단순한 코딩 비서가 아닌, 진정한 의미의 AI 페어 프로그래밍 파트너인 Claude Code와 함께 5일 동안 진행한 프로젝트의 전 과정을 요약해보았다.
이 요약본은 시스템의 설계부터 배포, 고도화, 품질 관리까지의 AI와 함께한 여정을 요약했다.
Day 1: 프로젝트 시작과 기반 설계 (Foundation)
시스템의 목적을 정의하고, 향후 확장이 용이한 기술적 뼈대를 세울 것
ㄱ. 왜 커스텀 번역 관리 시스템(TMS)인가?
글로벌 서비스 운영 시 발생하는 번역의 파편화, 일관성 결여, 비효율적인 엑셀 협업 방식을 해결하기 위해 기획했다.
1. 다국어 통합 관리: 한국어, 영어, 일본어, 중국어 등 9개 언어의 실시간 관리
2. 상태 추적 자동화: 요청됨 → 진행 중 → 검토 중 → 완료의 워크플로우 시스템화
3. AI 시너지: 단순 저장소가 아닌, AI가 번역 초안을 제안하는 지능형 시스템 지향
ㄴ. 핵심 기술 스택 선정
1. Next.js 16: 서버 컴포넌트 기반의 빠른 로딩과 SEO 최적화를 위해 선정
2. Supabase (PostgreSQL): 실시간 구독 기능과 강력한 보안(RLS)을 갖춘 오픈소스 데이터베이스
3. Tailwind CSS: 유틸리티 퍼스트 방식으로 디자인 시스템의 빠른 프로토타이핑 가능
ㄷ. 데이터베이스 아키텍처 (핵심)
번역 원문과 언어별 결과물을 1:N 관계로 설계하여 데이터 유연성을 확보했다
1.
translations테이블: 원문, 제품 코드, 서비스 범위(SaaS/Solution), 우선순위 관리
2.translation_results테이블: 언어별 번역 텍스트, 상태, 작업자 정보 저장3. users및glossary테이블: 역할 기반 권한 관리 및 전문 용어 일관성 유지
Day 2~3: 고급 기능 구현과 기술적 도전 (Advanced Features)
기본적인 등록을 넘어, 실무자의 업무 강도를 획기적으로 줄여주는 지능형 기능들을 구현했다.
ㄱ. 파일 기반 자동 텍스트 추출 (OCR/PDF Parsing)
사용자가 수백 건의 문장을 수동으로 복사하지 않도록 파일 업로드 기반 자동화 시스템을 구축했다.
1. unpdf 라이브러리 활용: 브라우저 내에서 PDF를 직접 파싱하여 서버 부하 감소
2. 3단계 업로드 플로우: 파일 업로드 → 메타데이터 입력 → 추출된 텍스트 확인 및 선택 등록
ㄴ. AI 다중 엔진 연동 (OpenAI & Claude)
하나의 엔진에 의존하지 않고, 상황에 맞는 AI 번역 결과를 얻을 수 있도록 멀티 엔진 시스템을 설계했다.
1. GPT-4o / Claude 3.5 Sonnet: 고성능 모델을 통한 문맥 맞춤형 번역 제안
2. 시스템 프롬프트 설계: 단순 번역이 아닌 ‘UI/UX 전문 번역가’ 역할을 부여하여 말투와 전문 용어 최적화
ㄷ. 대량 데이터 처리 (Bulk Processing)
100개 이상의 번역 요청이 들어올 때 발생하는 성능 저하를 방지하기 위해 PostgreSQL 함수를 활용했다.
1. 배치 삽입(Batch Insert): 100번의 API 호출 대신 단 한 번의 호출로 대량 데이터 저장
2. DB 함수 최적화: 서버 사이드에서 일괄 처리하여 트랜잭션의 안전성 확보
Day 4: 프로덕션 배포와 트러블슈팅 (Deployment)
로컬 환경을 넘어 실제 사용자가 접속할 수 있는 서비스 환경을 구축하며 마주한 실전 문제들을 해결했다
ㄱ. Railway 배포 전략
GitHub와 연동된 자동 배포 환경을 구축하고, NIXPACKS 빌더를 통해 Next.js 프로젝트를 최적화했다
1. 포트(PORT) 최적화: Railway 네트워크 환경에 맞춰 8080 포트 명시적 설정
2. 빌드 캐시 관리:rm -rf .next명령어를 통한 빌드 에러 방지
ㄴ. 환경 변수 및 보안 설정
1. NEXT_PUBLIC_ 접두사: 클라이언트와 서버에서 사용되는 환경 변수를 구분하여 보안 유지
2. Service Role Key: 서버 사이드에서 보안 정책(RLS)을 우회하여 관리자 데이터를 안전하게 처리
Day 5: 리팩토링 및 품질 고도화 (Refactoring & QA)
마지막 단계는 시스템을 ‘견고하고 아름다운’ 프로덕션 레벨로 다듬는 과정을 진행했다.
ㄱ. 성능 및 보안 최적화
1. N+1 쿼리 해결: JOIN 연산을 통해 DB 호출 횟수를 1,000회에서 1회로 단축, 응답 시간 15배 향상
2. 동시성 제어: 낙관적 잠금(Optimistic Locking)을 도입하여 여러 사용자가 동시에 수정 시 발생하는 데이터 유실 방지
3. 보안 검증: 파일 업로드 시 MIME 타입 및 이중 확장자 검사를 통한 보안 공격 원천 차단
ㄴ. 인디고(Indigo) 디자인 시스템 구축
1. 디자인 토큰화: 모든 UI 색상을
Soft Indigo테마로 통일하여 사용자 시각적 피드백 강화
2. Pill UI 적용: 터치 및 클릭에 최적화된 라운드형 버튼과 그라데이션 스타일 확립
ㄷ. 품질 보증 (TQC/QC)
1. 테스트 커버리지: 비즈니스 핵심 경로에 대한 API 통합 테스트 100% 수행
2. 비용 절감 지표: 용어집 재사용을 통한 AI 비용 절감 수치를 실시간 대시보드로 시각화
[5일 동안의 프로젝트 회고]
ㄱ. 인간과 AI 협업의 새로운 패러다임
- 기획자의 역할: 비즈니스 우선순위 결정, UX 직관성 확보, 품질 기준 설정
- AI(Claude Code)의 역할: 복잡한 코드 구현, 버그 탐지, 최적화 제안, 테스트 자동화
ㄴ. 5일 동안의 성과 지표
- 개발 속도: 0에서 프로덕션 배포까지 단 5일 소요
- 시스템 품질: Lighthouse 성능 점수 90점 이상의 고품질 애플리케이션 완성
- 운영 효율: 자동화된 텍스트 추출과 AI 제안으로 번역 소요 시간 70% 이상 절감
본 프로젝트는 AI 기술이 단순한 보조 수단을 넘어, 기획자의 아이디어를 실제 엔터프라이즈급 서비스로 구현하는 데 얼마나 강력한 도구가 될 수 있는지를 증명에 대한 내용이였다.
[핵심 요약] 버전에 적힌 내용으로 정확한 오더가 아닌, 프로덕트 매니져가 디자인, 개발, QA와 소통 과정에서 결론 된 도출이라고 봐주면 좋을 것 같다!