윤누리
윤누리
Admin
🧙 AI 위자드
🎻 루키 파트너
🌈 지피터스금손
🚀 SNS 챌린지 달성자
☕ 커피챗 오픈

[사내AX] 영어권 사용자를 잡자! AI로 앱 전체 5개국어 다국어화한 방법

📝 한줄 요약

Electron 앱을 AI와 함께 3일 만에 5개 언어로 다국어화했습니다. 프론트엔드뿐 아니라 백엔드 AI 프롬프트까지 번역해서 진짜 글로벌 앱을 만들었습니다.

결과부터 보고 가시죠

독일어 선택 > 이슈로 만들고 싶은 영역 캡처 > 분석 시키면 바로 독일어 이슈 생성 완료!

컴퓨터에 있는 한국어 채팅 앱의 스크린샷

🎯 이런 분들께 도움돼요

  • AI 코딩 도구로 앱 다국어 처리를 고민하는 개발자

  • Electron 앱 i18n 구현 방법을 찾는 분

  • "어차피 할 거면 여러 언어 한 번에 하면 안 되나?" 생각해본 분

😫 문제 상황 (Before)

Linear Capture라는 macOS 앱을 만들었습니다. 스크린샷 찍으면 AI가 분석해서 Linear 이슈를 자동 생성해주는 앱인데, UI가 전부 한국어였습니다.

문제는 Linear를 쓰는 사람들은 한국인보다 영어권 사용자가 훨씬 많다는 것이었습니다. 글로벌 서비스인데 한국어 앱만 만들어놓으니 타겟 사용자의 대부분을 놓치고 있었습니다.

처음엔 "영어 하나만 추가하자"고 생각했는데, 곰곰이 생각해보니 어차피 다국어 처리하는 김에 5개 언어를 동시에 처리해도 AI 리소스가 크게 다르지 않을 것 같았습니다. 한국어, 영어, 독일어, 프랑스어, 스페인어 - 5개 언어를 한 번에 처리하기로 했습니다.

🛠️ 사용한 도구

  • 도구명: OpenCode (시지프스 에이전트)

  • 보조 에이전트: Librarian (라이브러리 조사 전문)

  • 특이사항: Git Worktree로 Gmail 연동 기능과 병렬 작업


🔧 작업 과정

라이브러리 조사부터 - Librarian 에이전트의 활약

다국어 처리를 어떻게 해야 할지 막막했습니다. Electron 앱에서 i18n을 어떻게 구현하는지, 베스트 프랙티스가 뭔지 모르는 상태였습니다.

Librarian 에이전트한테 물어봤습니다.

i18next + Electron 조합의 베스트 프랙티스 찾아줘

이게 진짜 인상적이었습니다. Librarian이 공식 문서, Stack Overflow, 실제 오픈소스 프로젝트를 다 뒤져서 정리해줬습니다:

  • Main 프로세스와 Renderer 프로세스에 별도 i18next 인스턴스를 만들고 IPC로 언어 변경 동기화

  • app.getLocale()로 시스템 언어 자동 감지

  • 네임스페이스 구조는 기능별로 분리 (common, capture, settings, errors, validation)

이 조사 결과가 있었기 때문에 삽질 없이 바로 구현에 들어갈 수 있었습니다.


5개 언어 번역 파일 한 번에 생성

구조가 잡혔으니 이제 번역 파일을 만들 차례였습니다.

다국어 지원 구현해줘. 한국어랑 영어부터 시작하고, 독일어/프랑스어/스페인어도 추가해줘

시지프스가 한 일:

  • src/locales/ 폴더에 en.json, ko.json, de.json, fr.json, es.json 생성

  • 설정 화면, 캡처 화면, 온보딩 화면 전체 번역

  • 메인 프로세스 다이얼로그와 알림까지 번역

5개 언어 × 150개 이상의 문자열이었습니다. 수동으로 했으면 며칠은 걸렸을 작업이 한 번에 끝났습니다.


백엔드 프롬프트까지 다국어화 - 진짜 다국어 앱의 조건

여기서 중요한 포인트가 있습니다. 앱 UI만 번역하면 진짜 다국어 앱이 아닙니다.

이 앱은 스크린샷을 AI가 분석해서 이슈 제목과 설명을 자동 생성해주는데, 그 AI 분석 결과가 한국어로 나오면 영어 사용자한테는 의미가 없습니다.

AI 분석 결과도 선택된 언어로 나오게 해줘

Cloudflare Worker에서 AI 프롬프트를 날리는 부분을 수정했습니다:

  • src/prompts/templates/ 폴더에 언어별 프롬프트 템플릿 생성

  • getTemplates(language) 함수로 사용자 언어에 맞는 프롬프트 선택

  • 제목 규칙, 설명 템플릿, 컨텍스트 섹션 전체를 5개 언어로

이제 독일어 사용자가 앱을 쓰면 UI도 독일어, AI 분석 결과도 독일어로 나옵니다. 프론트엔드 + 백엔드 전체 스택 다국어화입니다.


UI 크기도 다국어 대응

마지막으로 예상 못한 문제가 하나 더 있었습니다.

설정 창이 너무 작아. 독일어로 바꾸니까 버튼이 삐져나오기도 해

독일어는 영어보다 단어가 깁니다. "Settings"가 "Einstellungen"이 되니까 버튼이 넘쳤습니다.

설정 창 크기를 480×630에서 540×800으로 키우고, Slack/Notion/Gmail 연동 섹션도 컴팩트하게 재디자인했습니다. 다국어 대응은 번역만 하면 끝이 아니라 UI 레이아웃도 고려해야 합니다.


✅ 결과 (After)

Before vs After

항목

Before

After

지원 언어

한국어만

한국어, 영어, 독일어, 프랑스어, 스페인어

AI 분석 결과

항상 한국어

사용자 언어에 맞춰 출력

타겟 사용자

한국 Linear 사용자

글로벌 Linear 사용자

작업 기간

-

1일

결과물

  • 앱 전체 UI 다국어화 (설정, 캡처, 온보딩)

  • 백엔드 AI 프롬프트 다국어화

  • 시스템 언어 자동 감지 + 수동 변경 가능

글로벌 출시 준비는 완료됐습니다.

💬 이 과정에서 배운 AI 활용 팁

효과적이었던 것

  1. 어차피 5개 언어 동시 처리해도 리소스 비슷합니다 - 1개 언어 하나, 5개 언어 하나 AI한테는 큰 차이 없습니다

  2. Librarian 에이전트로 라이브러리 조사 - 직접 문서 뒤지는 것보다 훨씬 빠릅니다

  3. 프론트엔드 + 백엔드 전체 다국어화 - UI만 번역하면 반쪽짜리입니다

🌍 다른 업무에 적용한다면?

  • 웹 앱이든 모바일 앱이든 다국어 처리할 때 같은 방식 적용 가능합니다

  • 특히 AI 기반 앱이라면 프롬프트까지 다국어화하는 걸 잊지 마세요

  • 처음부터 여러 언어 한 번에 처리하는 게 나중에 하나씩 추가하는 것보다 효율적입니다

🚀 앞으로의 계획

  • 실제 영어권 사용자 피드백 받고 번역 품질 개선

  • 부자연스러운 표현이나 오역 수정

  • 필요하면 일본어, 중국어 등 아시아권 언어도 추가 고려

1
3개의 답글
지피터스 뉴스레터

이번 주 AI, 딱 쓸 것만

매주 월요일 오후,
읽고 바로 써먹을 AI 소식만