AI와 5일 만에 만드는 엔터프라이즈 번역 관리 시스템: 아키텍처 편 (feat. 2026 AI vibe coding)

“코딩을 몰라도 시스템을 기획하고 구축할 수 있을까?” 최근 AI 기술의 발전으로 이제는 상상만 하던 서비스를 실제로 구현하는 시대가 되었다.
오늘은 Next.js, Supabase, 그리고 강력한 AI 코딩 도구인 Claude Code를 활용해 복잡한 ‘다국어 번역 관리 시스템(TMS)’을 단 5일 만에 구축한 여정 중,
그 첫 번째 기록인 기본 설계와 구조 잡기에 대해 상세히 공유하려 한다.

1. 왜 지금 ‘우리만의 번역 관리 시스템’이 필요한가?

글로벌 비즈니스를 준비하는 팀이라면 누구나 ‘번역’이라는 장벽에 부딪친다.
단순히 구글 번역기를 돌리는 수준을 넘어, 실제 서비스에 적용하려면 다음과 같은 복잡한 실무적 고충(Pain Point)이 발생하기 때문이다.

1. 일관성 유지: 제품명이나 고유 용어가 매번 다르게 번역되면 브랜드 신뢰도 하락
2. 진행 상태 추적: 수천 개의 문장 중 어떤 것이 번역 중이고, 어떤 것이 검토 완료되었는지 한눈에 파악하기 어려움
3. 협업의 한계: 엑셀 파일로 번역본을 주고받다 보면 파일 버전이 꼬이고 최종본 찾기 어려움
4. AI 활용의 부재: 매번 사람이 번역하기보다 AI가 초안을 잡고 사람이 검수하는 효율적인 프로세스 절실

나는 이 문제를 해결하기 위해, 기획자의 의도를 100% 반영한 커스텀 번역 관리 시스템을 구축하기로 했다.

2. 기술 스택 선정: 비개발자를 위한 쉬운 설명

시스템을 만들기 위해서는 튼튼한 ‘재료’가 필요하고, AI가 코드를 생성하기에 가장 최적화된 도구들을 선택했다.

1. Next.js 16 (설계도): 현재 가장 인기 있는 웹 제작 도구.사용자에게 화면을 보여주는 속도가 매우 빠르고, 구글 검색 엔진(SEO)에 잘 노출된다는 결정적인 장점이 있음
2. Supabase (창고): 우리가 입력한 번역문과 사용자 정보를 저장하는 똑똑한 데이터 창고. 복잡한 서버 설정 없이도 보안이 철저한 저장소를 만들 수 있음
3. Tailwind CSS (인테리어): 버튼의 색상, 글자 크기 등을 일일이 코딩하는 대신, 정해진 디자인 규칙을 조합해 세련된 UI를 빠르게 완성해줌
4. Claude Code (AI 파트너): 이번 프로젝트의 핵심 동료입니다. 터미널 환경에서 내 코드 전체를 이해하고 실시간으로 수정을 도와주는 AI 에이전트
-> 4일 후, kimi 2.5로 변경

3. [핵심] Claude Code와의 협업: 기획자의 언어를 코드로 바꾸는 법

“AI에게 어떻게 말을 걸어야 할지 모르겠다”고 하십니다. 단순히 “번역 사이트 만들어줘”라고 하면 AI는 뻔한 결과물만 내놓는다.
내가 이번 프로젝트에서 Claude Code와 주고받은 ‘실무 밀착형 프롬프트’ 사례를 들어볼까 한다.

ㄱ. 비즈니스 로직과 데이터 구조 정의하기

Claude Code에게 시스템의 뼈대를 만들어 달라고 요청하며 다음과 같이 구체적으로 명령했고, 대화를 하면서 현재 겪고있는 프로세스와 시행착오 개선 했으면 좋겠는 것들도 차근차근 이야기 했다.

“나는 현재 9개 언어를 관리해야 하는 엔터프라이즈 TMS를 기획 중이야. 단순히 텍스트만 저장하는 게 아니라, 이게 ‘SaaS 서비스’용인지 ‘설치형 솔루션’용인지 구분하는 scope 필드가 필요해. 그리고 번역가가 작업 우선순위를 알 수 있게 ‘상/중/하’ 필드도 추가해 줘. 이 조건에 맞는 Supabase 테이블 설계(SQL)를 짜줄 수 있어?”

ㄴ. AI의 답변과 역제안

Claude Code는 제 요청을 듣고 즉시 데이터 구조를 설계했을 뿐만 아니라, 다음과 같은 전문가적인 조언을 추가적으로 이야기 해주었다.
그리고, 꼭 전문용어를 써야하는 것도 아니였고 “이런게 하고 싶은데, 어떻게 해야할까?”라고 때론 질문도 했다.
내가 작성한 것은 정제 되어있는 텍스트에 가깝고, 거의 대부분 실시간 컨설팅 받는 사람처럼 대화 한 것이 대부분이였다.

“좋은 아이디어입니다! 요청하신 scope와 priority 필드를 추가했습니다. 여기에 더해, 실제 운영을 고려한다면 ‘번역 완료된 날짜’와 ‘검토자(Reviewer) 정보’를 담는 필드도 미리 설계하는 것을 추천합니다. 나중에 통계를 뽑을 때 매우 유용할 것입니다.”

AI는 단순한 코딩 도구를 넘어, 기획자들이 꿈꾸는 워너비의 모습을 갖고 있는 실무적인 디테일을 채워주는 ‘시니어 개발자’의 역할을 수행해주었다.

4. 데이터베이스 설계: 시스템의 뼈대 (SQL 참고)

기획자와 AI가 합의한 데이터베이스의 모습은 아래와 같다.
비개발자분들은 ‘아, 우리가 화면에서 입력하는 정보들이 이렇게 체계적으로 저장되는구나’라고 슉~ 지나가도 무관 하다.

5. 사용자 경험(UX) 설계: 누가, 어떻게 사용하는가?

시스템 구축 전 가장 중요한 것은 사용자의 여정을 정의하는 것이였고, 나는 세 가지 역할에 맞춰 화면을 설계했다.

ㄱ. 기획자 (PM) – “빠르고 정확한 요청”

– PDF나 이미지 파일을 업로드하면 AI가 텍스트 추출
– 번역이 필요한 언어를 다중 선택하고 중요도 설정
– 핵심 기능: 한 번의 입력으로 9개 언어의 번역 요청이 동시 생성

ㄴ. 번역가 (Translator) – “집중할 수 있는 환경”

– 자신에게 할당된 작업만 모아서 보여주는 대시보드 제공
– AI 어시스턴트: 번역창 옆에 AI가 제안한 초안이 미리 나타나, 처음부터 타이핑할 필요 없이 수정만 하면 됨

ㄷ. 관리자 (Admin) – “데이터 기반의 의사결정”

– 언어별 번역 진행률을 시각화된 그래프로 확인
– 용어집(Glossary)을 관리하여 ‘로그인’이 ‘Sign-in’ 혹은 ‘Login’으로 혼용되는 것 방지

6. 주요 기능 구현 맛보기

비개발자분들도 이해할 수 있도록, 실제로 돌아가는 코드의 핵심 원리만 캡쳐해보았고, 해당 부분은 사용자가 ‘추가’ 버튼을 눌렀을 때 작동하는 부분이다.

이 코드를 통해 기획자가 버튼 한 번만 누르면, 내부적으로는 수많은 언어별 데이터가 일목요연하게 정리되어 쌓이게 되는 것이였다.

[오늘 한 일]
클라우드 인프라 구축: Supabase를 통한 엔터프라이즈급 DB 세팅
실무 중심의 데이터 설계: scope, priority 등 현업의 니즈를 반영한 아키텍처
확장 가능한 코드 구조: Next.js의 최신 패턴을 활용해 향후 AI 자동 번역 기능을 붙이기 쉬운 구조 확보

이번 작업을 통해 배운 점

AI와 함께하는 ‘바이브 코딩’의 핵심은 ‘명확한 기획’에 있다는 것이다.
내가 무엇을 만들고 싶은지, 어떤 데이터가 중요한지 정확히 알고 있다면 AI는 그 어떤 숙련된 개발자보다 빠르게 내 생각을 현실로 만들어 준다는 것이 포인트 이다.