주요 소식
foura.ai가 이제 6개 언어로 제공됩니다. 사이트, Dashboard UI, 9개의 마케팅 페이지를 추출 및 번역하고, URL을 기반으로 올바른 로케일을 제공하도록 재구성했습니다. 브라우저에서 sitemap을 열면 원시 XML 대신 스타일이 적용된 테이블로 렌더링됩니다.
새로운 기능
6개 언어를 지원하는 사이트
영어, 불가리아어, 독일어, 폴란드어, 베트남어, 중국어를 지원합니다. URL 접두사 라우팅을 통해 각 로케일은 /de/, /pl/, /zh/ 등 고유한 경로에 위치합니다. 기본 경로는 영어를 제공하며, /en/은 기본 경로로 리다이렉트되므로 영어 페이지당 하나의 canonical URL만 존재하게 됩니다. 상단 내비게이션의 지구본 아이콘을 통해 언어를 전환할 수 있으며, 선택한 언어는 페이지를 이동해도 유지됩니다.
서버 사이드 렌더링이 SEO를 위한 핵심 작업을 처리합니다. 이제 모든 페이지에 올바른 lang 속성, 전체 hreflang 세트, 로케일별 Open Graph 메타데이터, 로컬라이징된 <title> 및 <meta description>이 포함되어 제공됩니다. sitemap은 모든 로케일에 걸친 모든 URL을 노출합니다. 특정 로케일을 선호하는 검색 엔진(중국어를 원하는 Baidu, 폴란드어를 원하는 폴란드판 검색 엔진)은 이제 첫 번째 크롤링에서 올바른 페이지를 수집합니다.
ICU 복수형 표현(plurals)은 예상대로 작동합니다. "1 API key"는 단수형으로 유지되고, "2 API keys"는 복수형으로 변환되며, 이 규칙은 언어별로 다르게 적용됩니다. 폴란드어는 3가지 복수형을, 영어는 2가지를, 중국어는 1가지를 가집니다. 런타임 리졸버는 브라우저 내장 API인 Intl.PluralRules를 사용하므로 번들에 추가적인 코드가 포함되지 않습니다.
영문으로 읽는 경우 시각적으로 바뀌는 것은 없습니다. 기존 URL은 그대로 유지됩니다.
Playground UI 로컬라이징 완료
Playground 도구의 약 80개 문자열(레이블, 힌트, 플레이스홀더, 툴팁)이 이제 선택한 로케일을 따릅니다. 기술적인 콘텐츠는 의도적으로 영어로 유지됩니다. HTTP 메서드 이름, 코드 샘플, JSON 키, header 이름, 상태 코드, request에 붙여넣을 값 등은 모든 로케일에서 동일하게 표시됩니다. 이를 둘러싼 UI는 사용자의 언어로 표시되지만, 실제 전송 데이터(wire)는 영어로 유지됩니다.
이러한 분리는 중요합니다. 모국어가 다른 팀원들이 함께 request를 디버깅할 때도, 번역 오차 없이 request body를 복사하여 문서와 대조할 수 있습니다.
테이블로 렌더링되는 Sitemap
브라우저 탭에 https://foura.ai/sitemap.xml을 입력하면 원시 XML 대신 FourA의 다크 테마가 적용된 스타일 테이블이 표시됩니다. 개별 sitemap과 sitemap 인덱스를 모두 처리하는 XSLT 스타일시트를 추가했습니다.
이것이 필요했던 이유는, <xhtml:link> 대체 로케일 항목이 나타나면 브라우저가 로컬라이징된 sitemap을 기본 내장 스타일 트리로 렌더링하지 않기 때문입니다. 선택지는 대체 로케일이 없는 sitemap을 배포하여 로케일을 연결하는 SEO 신호를 잃거나, 자체 스타일을 렌더링하는 것뿐이었습니다. 그래서 우리는 두 번째 방법을 선택했습니다. 크롤러는 스타일시트를 무시하고 이전과 동일하게 XML을 파싱하므로 크롤러에게는 아무런 변화가 없습니다.
sitemap은 실제 사이트의 실제 페이지입니다. 그에 걸맞은 모습을 갖추어야 합니다.
내부 동작
번역은 자동화된 파이프라인을 통해 이루어집니다. 우리는 영어 소스 문자열만 커밋하며, main 브랜치에 병합될 때 파이프라인이 다른 모든 로케일을 생성하고 그 결과를 커밋합니다. 한 곳에서 텍스트를 수정하면 6개 언어 전체로 전파됩니다.
언급할 만한 버그 수정이 하나 있습니다. 첫 번째 로컬라이징 배포 당시 빌드 단계에서 locales 디렉터리가 누락되어 프로덕션에 원시 번역 플레이스홀더가 잠시 노출되는 현상이 있었습니다(헤드라인이 있어야 할 자리에 home.h1a가 표시됨). 우리는 이 문제를 해결하고 빌드 시 번들을 생성하기 전에 locales 디렉터리를 읽도록 수정하여 이 문제가 재발하지 않도록 했습니다.
6개 언어로 제공되는 사이트는 구조적으로 6개의 서로 다른 사이트와 같습니다. 올바른 로케일이 올바른 URL과 올바른 메타데이터와 함께 제공될 때, 검색 엔진, 스크린 리더, 그리고 폴란드어로 구글링하는 바르샤바의 고객 모두가 혜택을 누릴 수 있습니다. 실제 전송 데이터(wire)는 동일하게 유지되지만, 겉으로 드러나는 표면은 각 독자의 환경에 맞게 다가갑니다.