개발자
1. 서버에서 json 받는다 2. 프론트에서 json을 하드코딩한다 3. 구글 스프레드시트로 관리하고 프론트에서 api로 땡겨온다 정도가 있는거 같은데, 이전 직장에선 1번으로 해봤고, 이번에 프로젝트로 새로 해보려는데 다른 분들은 어떤 식으로 하시는지 궁금합니다!!
답변 8
인기 답변
저도 이 토픽에 대해서 고민을 엄청 해봤어서 답변 남깁니다..ㅎㅎ 1. 서버에서 json을 받는다 보통 서버에서 DB를 관리하니까 다국어 관련 데이터도 서버에서 관리하는게 좋지 않을까? 라고 생각할 수 있습니다. 하지만 서버가 정말 사용자와 가까운 곳에 있지 않는 이상 데이터를 받아오는 시점까지 지연 시간이 생길 수 밖에 없습니다. 다국어를 도입한다는 것은 결국 전세계에서 접속한다는 건데 다국어 데이터를 받아올 때까지 사용자는 fallback(기본 언어) 문자열을 봐야 하고, 특히 인터넷이 느린 환경이라면 사용자 경험이 더 떨어질 수 있습니다. 만약 사내에서만 쓰는 서비스라면 상관없지만, 전세계 사용자들이 쓰는 서비스라면 사용자 경험에 대해서 고려하셔야 합니다. 다만, 이런 단점을 보완할 수 있는 두 가지 방법이 있습니다. 1-1. Edge Computing을 사용한다 엣지 런타임을 지원하는 AWS Lambda, Cloudflare Workers 등을 사용한다면, 사용자의 위치에서 가장 가까운 서버에서 데이터를 받아올 수 있기 때문에 응답 속도가 빨라지므로, 느린 응답 시간을 개선할 수 있습니다. 1-2. SSG를 사용한다 Next.js 같은 메타 프레임워크에서는 빌드 타임에 데이터를 받아서 미리 다국어별로 페이지를 분기 처리할 수 있습니다. 빌드 타임에 서버에 다국어 json 데이터를 요청해서 받아놓고 미리 html 파일들을 생성해놓으면 레이턴시가 아예 없어집니다. 2. 프론트에서 json을 하드코딩한다 서버에서 관리하는 메리트가 없다면 이 방법도 좋습니다. 다만, 다국어 변경사항이 있을 경우 프론트엔드 개발자가 매번 직접 수정해줘야 하는 단점이 있습니다. 서버에서 관리하는 경우 어드민을 제공해서 요구사항이 필요한 사람이 직접 수정하게 만들 수 있는데, 프론트에서는 그게 불가능하죠. 3. 구글 스프레드시트로 관리하고 프론트에서 api로 땡겨온다 이 방법도 결국 1번과 같이 응답이 오는 동안 사용자가 기다려야하는 불편함이 있습니다. 하지만 1-2번의 해결 방법(SSG)으로 보완하면 이 단점도 해결됩니다.
익명
작성자
2023년 04월 24일
오... 답변 감사합니다. 저희는 지금 2번으로 하려고 생각하고 있는데 이렇게 하면 응답속도가 개선이 되겠군요 ㅎㅎ
저희는 서버로부터 JSON을 가져와서 처리하는 방식을 사용합니다. i18n을 지원하는 라이브러리를 활용하고, 사용자의 브라우저 정보를 기반으로 선택된 언어에 맞는 리소스를 불러와 화면에 반영합니다. 보다 체계적인 관리를 위해서는 언어 리소스를 데이터베이스에 저장하고, 관리 도구를 통해 키 값과 각 언어별 텍스트를 관리할 수 있습니다.
익명
작성자
2023년 04월 24일
네 답변 감사합니다 역시 1번이 많네요 ㅋㅋ
익명
작성자
2023년 04월 24일
답변 감사합니다!
다국어 번역 및 관리는 구글 시트를 이용하고, `array-to-google-sheets` 라이브러리를 이용해서 json 파일을 생성합니다. 생성된 json파일은 프론트엔드 프로젝트에 함께 서빙 및 형상 관리 하고 있습니다.
익명
작성자
2023년 04월 24일
오.. 그것도 좋겠네요. 의견 감사합니다~
3번이요. 구글 스프레드 시트에 자동번역 함수도 제공하고 있어요, i18n 라이브러리 플러그인중 t 함수로 감싸면 추출하는 것이 있습니다. 추출 => 스프레드 시트 => 자동 번역=> json 이런식으로 자동화할 수 있어요. 매끄러운 번역을 제공할려면 계속 손이 가야합니다!
사용자가 선택한 언어로 언어가 변경돼서 보여져야 하기 때문에 다국어 json 파일을 만들고 유지관리하는게 제일 관건인거 같아요. 저희회사는 이렇게 해서 글로벌 e-commerce 프론트개발 했었습니다. 운영하면서 앞으로 추가될 문자나 문장들은 구글스프레드시트로 관리하여 다국어 json파일을 자동으로 생성하도록 해서 관리포인트 비중을 줄이고 해당파일을 i18n으로 보여지도록 합니다. 노파심에 말을 좀더 이어가자면, 사용자 편의를 생각해서 접속 ip대역을 통해 자동으로 언어를 설정하는것은 비추천 합니다. 사용자가 직접 언어를 선택해서 사용할 수 있게 하는게 제일 좋은거 같습니다. 그 이유는 사용자가 잠시 해외에 거주중인 상태에서 접속한다면 한국어로 보고싶어도 대역이 해외로 잡혀서 자동으로 언어가 전환되면 오히려 이런 유저들은 불편함을 초래합니다.
다국어 제공을 위한 구조는 몇 가지 방법이 있지만, 여기에서 언급한 3가지 방법이 가장 일반적입니다. 각 방법의 장단점을 살펴보면 다음과 같습니다. 1. 서버에서 JSON 받기 장점: - 서버에서 관리하기 때문에 언어 데이터 변경 시 클라이언트 코드 수정이 불필요 - 여러 클라이언트(웹, 앱 등)에서 동일한 데이터를 사용할 수 있음 단점: - 서버 요청이 필요하기 때문에 초기 로딩 시간이 길어질 수 있음 2. 프론트에서 JSON을 하드코딩하기 장점: - 서버 요청이 필요 없어 초기 로딩 시간이 짧음 단점: - 언어 데이터 변경 시 클라이언트 코드 수정이 필요 - 여러 클라이언트에서 동일한 데이터를 사용하려면 각 클라이언트에서 동일한 코드를 유지해야 함 3. 구글 스프레드시트로 관리하고 프론트에서 API로 땡겨오기 장점: - 비개발자도 쉽게 언어 데이터를 관리할 수 있음 - 여러 클라이언트에서 동일한 데이터를 사용할 수 있음 단점: - 서버 요청이 필요하기 때문에 초기 로딩 시간이 길어질 수 있음 - 구글 스프레드시트 API 사용에 제한이 있을 수 있음 프로젝트의 요구 사항과 팀의 작업 흐름에 따라 적절한 방법을 선택하는 것이 좋습니다. 예를 들어, 다양한 플랫폼에서 동일한 데이터를 사용해야 한다면 1번이나 3번 방법이 적합할 수 있습니다. 반면, 프론트엔드에서만 다국어를 처리해야 하고 초기 로딩 시간을 최소화하고 싶다면 2번 방법을 고려할 수 있습니다.
커리어리 AI 봇의 답변을 평가해 주세요!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!