SmileCat.

Translog: AI와 함께 만든 번역 기록 및 단어 퀴즈 서비스

들어가며

지난 6개월간 Translog라는 개인 프로젝트를 진행했다. Translog는 Translation과 Log를 합친 이름으로, 번역기의 기록을 저장하고 이 기록을 사용해서 단어 퀴즈를 풀 수 있으면 좋을 것 같아서 제작했다.

블로그 글을 작성하지 않은 지난 2년간 개인적으로 프로젝트를 진행했지만 대부분 실패로 끝이 났다. 필자가 생각하는 가장 근본적인 이유는 필자가 스스로가 필요로 하는 기능이 아니다 보니 지속적으로 개발할 수 없었던 것이다. 지난 2년간에 진행했던 프로젝트들은 최초의 목적을 지속적으로 따라가지 못했다. 개인적으로 사용할 타이머 앱을 만들기, 광고를 붙일 수 있는 여러 작은 도구들이 있는 사이트를 만들기, 등과 같은 목적을 가지고 시작했지만, 기본 기능을 구현하고 나서는 더 이상으로 나아가지 못했다. Flutter를 사용해보거나, AI를 통해 구현해보거나 하는 식의 기능적 목표를 달성하는 것 이외에는 결국 스스로는 이미 제품화된 더 좋은 기능의 앱을 사용하게 되었던 것 같다.

앞선 프로젝트들을 진행하면서 무의미하게 새로운 프로젝트를 만드는 것 같은 느낌이 들었다. 그래서 다음번 프로젝트는 필자를 위한 프로젝트, 필자가 필요한 프로젝트를 만들어 봐야겠다는 생각을 했다. 다만 이미 대다수의 필자가 필요한 기능은 더 좋은 대안이 있었기에 필요한 주제를 찾지 못해 몇 달간 새로운 프로젝트를 시작하지 않았다.

25년 초부터 업무적으로 영어를 사용할 일이 늘어나서 작년부터 영어 공부를 시작했다. 이 과정 중에 다양한 번역기를 통해 문장이나 단어를 찾아보고, 혹은 이해가 되지 않는 문장을 AI에 질문하기도 했다. 그리고 그중에서 암기가 필요하다고 생각이 드는 부분들은 Anki라는 플래시카드 어플리케이션을 구매해서 찾아본 내용들을 등록해서 사용했다. 공부하는 기간이 길어지고 Anki에 쌓여가는 내용이 많아지면서 점점 분리된 이 세 과정에 불편함을 느꼈다.

드디어 시작할 이유를 찾았고, 이 불편함을 해소하기 위해 Translog를 제작하기로 결정했다.

어떤 목표를 가지고 시작했는지

프로젝트의 목표는 간단했다. 앞서 이야기한 세 가지 과정을 하나의 어플리케이션으로 통합하는 것이다. 그리고 가능하면 이 어플리케이션을 빠르게 만들어서 필자가 더 많은 데이터를 다른 어플리케이션에 쌓지 않을 수 있도록 하는 것이었다.

그리고 여유롭게 개인 프로젝트만을 하고 있을 수는 없었기 때문이기도 하고, AI를 밑바닥부터 적용해서 개발하는 경험을 해보는 것도 좋은 기회가 될 것 같았기 때문에 AI를 최대한 활용할 수 있도록 했다.

큰 방향성만 잡고는 다음과 같이 Obsidian 문서에서 구현이 필요한 기능들을 체크리스트로 추가하여 하나씩 구현해 나갔다.

checklist

어떤 기술 스택을 사용했는지

우선 AI 개발 환경은 얼리버드로 구매해서 유지하고 있던 $10 플랜의 Windsurf로 프로젝트를 시작했지만, 이 플랜으로는 토큰의 부족이 크게 느껴져서 후반부에 들어서는 Gemini Pro를 구독하고 Antigravity를 사용했다. 대략 전체 프로젝트의 60%는 Claude 모델을 통해 구현되었고, 나머지 40%는 Gemini 모델을 통해서 구현한 것 같다.

배포 환경은 가능하면 무료로 운영할 수 있는 모든 환경을 사용해서 구현을 했다. 도메인은 기존에 사용하고 있던 도메인에 3차 도메인으로 추가하였고, 기본 기능을 구현하는데 별도의 서버를 운영하는 것은 불필요하다고 생각이 들어서 Vercel에 클라이언트와 API를 배포해서 사용했다. 데이터베이스는 데이터가 엄청나게 많지 않을 것이기 때문에 Supabase를 사용했다. 다만 미디어파일 같은 경우는 Supabase에 저장하지 않고 R2를 사용하여 저장했다. TTS는 GCP를 사용하고 앞서 말한 R2에 저장을 했다. 구글 로그인만 지원했다가 ID, Password 형태의 가입을 넣으면서 이메일 발송이 필요했는데 이 부분은 Daum Workspace를 사용했다. API의 결과를 캐싱할 Redis는 Vercel의 Storage를 통해서 생성해서 사용했다.

전반적인 프로젝트의 구조는 다음과 같다. 도메인을 제외한 모든 부분에서 아직까지는 별도의 비용이 발생하지 않고 있다.

graph TD User([User]) --> CF[Cloudflare] subgraph Frontend & Middleware CF --> Vercel[Vercel Hosting] Vercel --> CF end subgraph Data & Storage Vercel -->|Database, Auth| Supabase[(Supabase<br/>PostgreSQL)] Vercel -->|Cache| Redis[(Redis / Upstash)] Vercel -->|Files & Assets| R2[(Cloudflare R2)] end subgraph External Services Vercel -->|Translations| AI[AI Providers<br/>DeepL, OpenAI, Anthropic] Vercel -->|Email Delivery| Daum[Daum Workspace] Vercel -->|TTS| Google[Google Cloud TTS] end %% Styles classDef cf fill:#f48120,stroke:#none,color:white; classDef vercel fill:#000,stroke:#fff,color:white; classDef db fill:#3ecf8e,stroke:#none,color:white; classDef ext fill:#4285f4,stroke:#none,color:white; class CF,R2 cf; class Vercel vercel; class Supabase,Redis db; class AI,Daum,Google ext;

작업을 하면서 어떤 점을 특별하게 신경썼는지

목표로 하는 기능이 적지 않았고, 계속 사용할 어플리케이션이었기에 그 무엇보다 신경을 썼던 것은 AI를 통해 구현하는데 어려움이 없는 환경을 구성하는 것을 특별하게 신경을 썼다.

프로젝트를 시작하면서 기능을 묘사해 AI가 PRD를 작성하도록 유도했고, 동일한 형식의 문서 규격을 유지하고 관리할 수 있도록 다양한 Rules와 Skills를 만들어서 사용했다.

PRD agent

이외에도 PR을 생성, 커밋, 테스트 코드 작성 확인 등 다양한 부분에서 AI를 통한 Workflows를 구성하여 개발을 진행했다.

Review

작업을 진행하면서 어떤 점이 어려웠는지

가장 어려웠던 부분은 토큰의 부족이 제일 어려웠던 것 같다. Windsurf를 사용할 때는 $10 플랜이었고 토큰을 다 사용하면 충전을 했어야 했기 때문에, 토큰이 부족하면 개발을 진행하기 어려웠다. 나중에 Gemini Pro를 구독하고 나서도 조금은 토큰의 압박으로부터 자유로웠던 것 같다. (하지만 근래 들어서 정책이 변경되면서 쿼터 제한에 걸리는 경우가 많이 발생하고 있다.) 이 부분은 최대한 아껴서 잘 쓰는 방법밖에 없는 것 같다.

그 외에 AI가 의도했던 대로 동작하지 않는 경우가 종종 있었는데, 이럴 때는 최대한 AI가 이해할 수 있는 다양한 문서를 만들어 보강하는 방식으로 해결해 나갔다.

AI의 사용 부분 이외에는 특별하게 어려웠던 부분은 없었던 것 같다.

주요 기능 소개

번역기

DeepL을 사용하여 번역을 생성하고, 이 내용을 바탕으로 AI를 통해 다시 한번 번역을 한다. 단순하게 번역 결과만 얻는 것이 아니라, 어떻게 번역된 것인지에 대한 부분도 함께 확인할 수 있다. 그리고 번역된 내용을 노트북에 등록할 수 있다.

번역기

단어 검색

검색하고자 하는 단어를 입력하면, 단어의 뜻과 함께 예문이 제공된다. 그리고 해당 단어의 어원도 함께 제공된다. 결과에 나온 예문을 노트북에 등록할 수 있다.

단어 검색

문장 분석

작성된 문장에 대해서 분석을 하고, 더 나은 표현이 있다면 제안을 해준다. 그리고 해당 문장을 노트북에 등록할 수 있다.

문장 분석

노트북

번역기, 단어 검색, 문장 분석에서 저장한 노트들을 모아볼 수 있다. 그리고 직접 등록도 가능하다. 노트북에 저장된 노트들을 바탕으로 퀴즈가 생성된다.

노트북

퀴즈

노트북을 통해 생성하거나 등록한 노트는 SM-2 알고리즘을 사용하여 퀴즈를 생성한다. 노트나 퀴즈에서 문장에 빈칸을 만들어서 퀴즈로 만들 수 있다.

퀴즈 1

퀴즈 2

퀴즈 3

결론

지난 6개월 동안 Translog를 개발하면서 밑바닥부터 프로젝트를 구성한다면 어떻게 AI를 적용하고 활용할 수 있는지에 대해 많이 고민하고 배운 것 같다.

그리고 필자 스스로가 스스로 만든 프로젝트의 가장 열렬한 사용자가 될 수 있다는 점이 가장 좋았다. 늘 사용할 때마다 개선하고 싶은 점이 생기고, 이를 AI를 통해 만들어 나가는 과정이 즐거웠다.

퀴즈 기록

이제는 스스로가 하나의 고객으로서 사용하고 있고, 많은 데이터를 쌓아나가고 있기에, 앞으로도 좀 더 안전하게 다양한 기능을 추가하며 개선해 나가봐야겠다.

Loading comments...

Recent Posts