@senspond
>
알지빗소프트(RgbitSoft) 홈페이지 다국어 지원 적용 / 성능 테스트
알지빗 소프트(RgbitSoft) 다국어지원 홈페이지로 개발 및 적용해본 과정을 상세하게 다룹니다.
오늘(2024.9.19) RgbitSoft 회사 홈페이지를 다국어 지원으로 새단장을 했습니다.
다국어 지원 홈페이지 개발 및 적용기
관련 아티클
NextJS 다국어 지원 쉽게 구현하기 : https://rgbitcode.com/blog/senspond/106
실제 적용된 홈페이지 : https://www.rgbitsoft.com
적용모습
우측 상단에 언어 선택할 수 있는 UI가 있고 변경시 언어가 바뀌게 됩니다.
프로덕션 메뉴
이번에 새로 업데이트 한 메뉴입니다.
참고로 '마방진 생성기' 는 현재 구글 플레이 스토어에 심사중인 앱입니다.
당분간은 대한민국만 출시를 고려하고 있지만, 향후 영어권 국가들에 출시 할 계획이기 때문에 다국어 홈페이지를 준비해두었습니다.
텍스트는 대충 번역기를 돌려서 영어지원이 가능하도록 만들었지만, 한글 텍스트가 들어간 이미지도 영어버전으로 따로 준비를 해야할것 같습니다.
개발시 고려됬던 사항
이 홈페이지는 '단순한 정적 홈페이지' 이지만 다국어지원 뿐만 아니라 새로운 시도들을 해본 것 같습니다.
번역 파일 관리
제품을 만들때마다 사이트에 추가하면서 업데이트를 할 계획인데, 번역파일을 한 파일로 다 때려넣으면? 관리가 어려울 것 같아 next-intl을 사용하면서 페이지별로 관리 할 수 있는 구조를 고려해봤습니다.
하이브리드 라우팅
본 사이트는 about, services, products, contact 같은 색션들은 싱글 페이지 안에서 앵커 해시(#) 라우팅이 사용되고 있지만, 검색엔진 최적화에 좀 더 유리하게 만들기 위해 각각의 색션에 대해서 별도의 페이지로 빌드를 해주었습니다.
사이트에 구현된 방식은 예를 들어 아래와 같습니다.
/ko#services : /ko 싱글 페이지 안에서 services 색션 위치로 스크롤 되어 이동 (새로고침해도 경로 고정)
/ko/services : services 색션만 보여주는 별도 페이지로 라우팅
해시기반 라우팅은 URL에 해시(#) 경로를 포함하여 라우팅 하는 방식입니다.
주로 싱글페이지 어플리케이션에서 많이 사용되며, 새로고침이 발생하지 않고 경로 이동이 됩니다.
라우터에 대해서 정리를 해보면 이런식으로 분류를 해볼 수 있겠는데요.
서버 라우터(SSR) - 서버 사이드에서 페이지를 랜더링해서 내려주는 전통적인 방식의 라우팅 (/about)
정적 라우터(SSG) - 사전에 미리 빌드 된 고정된 페이지의 파일을 제공하는 방식의 라우팅 (/about)
브라우저 라우터(CSR/SPA) - 브라우저 History API 로 라우팅, 페이지 리로딩 없음 (/about)
해시 라우터 (CSR/SPA) - 자바스크립트 기반 라우팅 , 페이지 리로딩 없음 ( /#/about)
해시 라우터 (HTML/SPA) - 순수 HTML 만으로 구현되는 전통적인 해시앵커 (#about)
<body>
<nav>
<a href="#about">Go to About Section</a>
<a href="#contact">Go to About Section</a>
</nav>
<section>
<h2>Home Section</h2>
<p>This is the home section. Scroll down for more content.</p>
</section>
<section id="about">
<h2>About Section</h2>
<p>This is the About section. The link above will scroll here when clicked.</p>
</section>
<section id="contact">
<h2>Contact Section</h2>
<p>This is the contact section.</p>
</section>
</body>위와 같은 순수 HTML 으로 작성된 고전적인 해시 라우팅은 자바스크립트 없이도 특정 위치로 이동하는 앵커 기능을 기본적으로 지원합니다. 페이지 내의 특정 요소에 고유한 id 속성을 부여하고, 그 id와 일치하는 해시를 가진 링크를 클릭하면 해당 위치로 브라우저가 자동 스크롤합니다. 이 원초적인 HTML 앵커 해시도 window.location.hash 로 감지가 되며, 해시값이 유지되기에 새로고침하면 해당 색션의 위치로 스크롤 됩니다. 사이트는 이러한 방식의 해시 라우팅과 NextJS 의 라우팅을 혼용했습니다.
싱글 페이지에서 스크롤시 해시 URL 업데이트
/ko#services 와 같은 경로로도 라우팅이 되는데, 싱글 페이지 내에서 스크롤을 하면서 현재 색션 ID가 URL 해시에 업데이트 되면 좀더 좋을 것 같다는 생각을 하고 고려해봤습니다.
스크롤 이벤트나 옵저버를 통해 사용자가 스크롤을 할때 색션 ID 를 감지해서 URL에 해시를 업데이트 해주는 식으로 적용을 해봤지만, 사이트 내에 스크롤 이벤트와 애니메이션 효과가 다소 많은 편이라 좀더 최적화가 필요할 것 같아 배포에는 적용하지는 않았습니다.
언어 변경 사용성 고려
처음에 언어 변경 기능은 아래처럼 정말 단순하게 구현을 했습니다. 영어는 /en 페이지로 이동, 한국어는 /ko 페이지로 이동
import { useTranslations } from "next-intl";
export default function LanguageDropdown() {
const t = useTranslations();
const handleLanguageChange = (event: any) => {
window.location.href = `/${event.target.value}`; // 영어 선택 시 /en으로 이동
};
return (
<div className="">
<label htmlFor="language" className="sr-only">Select Language</label>
<div className="">
<select
id="language"
value={locale}
onChange={handleLanguageChange}
className=""
>
<option value="en">{t("language.en")}</option>
<option value="ko">{t("language.ko")}</option>
</select>
</div>
</div>
);
}그런데, 적용해서 사용해보니 문제점이 있었는데.. 사용자가 특정페이지에서 언어를 변경하면 사용자가 보고 있는 화면에서 변경 되는 것이 아니라 초기화면으로 돌아가 버리면서 꽤 불편하다는 것이었습니다.
예를 들어 /ko#services 경로에서 영어로 언어 변경시 /en#services 로 이동되게 만들어야 하고,
/ko/products/item 경로에서 영어로 언어 변경시 /en/products/item 경로로 이동되게 만들어야 사용자가 보고 있는 화면 그대로에서 언어 변경이 될 수 있는 있다는 것을 고려해 개발을 했습니다.
디자인 조정 / 0과 1 애니메이션 추가
정말 쓰잘데기 없는 것이고 검색엔진 입장에서는 최악이지만 RgbitSoft 가 추구하는 이상세계 표현을 위해
기존에는 About 페이지에 백그라운드에 0과 1을 for문으로 한페이지 꽉 찰정도로 무식하게 채워서 빌드 했지만
https://rgbitcode.com/blog/senspond/100 (About 페이지 보시면 0과 1이 엄청나게 채워져 있다.)
이번에는 0,1 채우기를 제거하고
하늘에서 눈이 내리듯이 RGB Bit(0과 1)의 은총을 받고 있는 소프트웨어라는 느낌을 주는 애니메이션을 넣어봤습니다.
성능 부분에서 많은 부분 마이너스적인 요소라고 판단되지만… 개발자의 이상표현을 위해
빌드시 이슈
한동안 Flutter 를 학습하면서 앱을 만들어 보다가 간만에 프론트 웹개발을 하니… 잠시 망각하던 것이 있었습니다. 자바스크립트 기반 개발을 하면 개발할 때는 오류가 없지만 빌드를 할 때 오류가 발생하는 경우가 정말 자주 있었다는 것! 그러고 보니 플러터는 빌드할 때 정말 깔끔한것 같네요.
이슈 : next-intl이 서버 컴포넌트에서 사용될 때 아래와 같은 오류가 발생
Usage of next-intl APIs in Server Components currently opts into dynamic rendering. This limitation will eventually be lifted, but as a stopgap solution, you can use the unstable_setRequestLocale API to enable static rendering
서버 컴포넌트에서 next-intl API를 사용하면 현재 동적 랜더링이 사용된다고 한다. 결국 업데이트 될 예정이지만, 현재로써는 unstable_setRequestLocale API 를 사용해 정적 랜더링을 하라고 안내 되고 있다.
그런데, 어떤 서버 컴포넌트에서도 next-intl이 사용되면 정적 랜더링을 하지 않으면 그냥 오류가 발생하고 있다.
또한 타입스크립트를 사용하고 있기에.. 빌드를 하면서 타입체크로 오류가 나는 부분이 발생.
아래처럼 작성해줘야 오류가 발생하지 않습니다.
interface LocaleProps {
params: {
locale: string;
};
}여기저기 자주 사용할 것 같은 props 이므로 따로 정의를 해둡니다.
import {routing} from "@/i18n/routing";
import {unstable_setRequestLocale} from "next-intl/server";
import ProductsSection from "@/components/pages/products/page";
export async function generateStaticParams() {
return routing.locales.map((locale) => ({locale}));
}
export default function ProductsPage({params: {locale}} : LocaleProps) {
unstable_setRequestLocale(locale);
return (<ProductsSection/>);
}정적사이트생성(SSG)로 제공하기 위해서는 getnerateStaicParams 와 같이 제공해주어야 합니다.
그리고 unstable_setRequestLocale API를 사용해줍니다.
빌드 할 때 각 언어별로 페이지를 미리 생성되는 것을 확인할 수 있습니다.
퍼포먼스 테스트
웹 사이트 배포하고 나서 한번씩 해보는 것입니다. 측정시마다 조금씩 차이가 있지만, 어느정도 참고할 만한 데이터를 만들어주네요.
PageSpeed Insights
https://pagespeed.web.dev
사이트에 애니메이션 효과가 다소 있는 편인데… 데스크톱 성능, 접근성, 권장사항, 검색엔진 최적화 다 100점이 나왔네요.
( 0과 1 눈처럼 내리는 애니메이션 안빼도 될것 같습니다. )
그나저나 이 rgbitcode 사이트는 코드 재설계로 사이트 리뉴얼을 한번 해야할것 같은데, 엄두가 나지 않네요.
성능도 부족하고 검색엔진 최적화도 부족한 부분이 있어 점수가 높게 나오지 않고 있어 사실 개발자 마음 같아서는 완전히 갈아엎고 싶은데요.
그냥 갈아엎고 다시 처음부터 만들기보다는… 새로운 사이트 만들때 처음부터 잘 설계에서 좀 더 잘 만들기로..
모바일 기기도 준수하게 나오네요.
국가별 속도
일본 - 아시아
미국 - 센프란시스코
유럽 - 영국
특이점은 영국에서 접속시 Load Time이 길어진다는 것.
안녕하세요. Red, Green, Blue 가 만나 새로운 세상을 만들어 나가겠다는 이상을 가진 개발자의 개인공간입니다.
댓글 ( 0 )
카테고리내 관련 게시글
현재글에서 작성자가 발행한 같은 카테고리내 이전, 다음 글들을 보여줍니다
@senspond
>