문제
근래에 회사 프로덕트에서 '1:1 다국어 번역에 사용되는 소스를 개발팀의 디펜던시 없이 관리하고 싶다'라는 요구사항이 있었다. 프로덕트에 번역 기능을 추가한 지 얼마 되지 않아 번역 소스의 변경이 자주 일어날 수 있다고 판단된 사항이었다.
기술 스택 및 로직 결정
- 기존에 사용하던 next-i18n은 프론트엔드 코드에 저장된 파일 기반(json)으로만 작동했다.
- 그래서 구글 스프레드시트에 번역 소스를 저장하고
getStaticProps(ISR)
로 불러와react-i18n
으로 번역하는 방식으로 로직을 변경했다.
Next.js 서버리스 함수를 사용한 이유
- 구글 스프레드시트에서 번역 소스를 불러오는데 사용되는
googleApis
라이브러리는 클라이언트 코드에서 작동하지 않았다.
- 번역 소스는 프론트엔드에서만 사용하는 데이터였다.
- 백엔드 디펜던시의 최소화가 필요했다.
기타 사항
- 반복적으로 발생할 수 있는 번역 소스 페칭을 방지하기 위해, 구글 스프레드시트 상에서 번역 소스의 수정이 일어나면 시트에 수정 시간을 표시하는 자동화 함수(구글 스크립트)를 설정했다.
- 프로덕트에서 언어 변환이 발생하면 수정 시간을 먼저 페칭하여 비교하고 번역 데이터가 최신이 아닐 때만 전체 소스를 페칭하는 로직을 적용해서 불필요한 데이터 로드 비용을 최소화했다.