Claude Code : 번역 서비스 제작기
설명서도 아니고 '딸깍'도 아닌 기록
이곳 브런치에 글을 한 개도 남기지 못한 채 순식간에 2025년이 지나버렸습니다. 최근 1년간은 그야말로 격변의 AI 시대라고 할 만큼 엄청난 변화가 있었지만 아쉽게도 새로운 것을 구경하는 수준에 멈춰 있는 경우가 많았는데, 더 늦기 전에 조금씩은 적응하고 따라가야 하는 것은 물론 저에게도 효용성이 있는 부분을 찾아나가야 하는 시점이 되었다는 것을 실감하고 있습니다.
#0 프롤로그
프롤로그 #A
이런저런 고민을 사실상 깊게 하지는 못하고 시간이 흘러가다가, 주위에 있는 개발자들이 Claude Code를 잘 활용하는 것에 대해 좀 더 인지하게 되었습니다. 회사에서는 AI 활용을 지향하는 분위기가 있기 때문에 저의 PM 업무 영역에 대해서도 활용하면 좋겠다는 생각을 하고 있었습니다. 마침 추가적인 권고 사항을 계기로 회사 비용으로 claude code를 구매하고 진행할 기회를 구상하게 되었습니다. 하지만 개발 영역이 아닌 부분에 대해서는 어느 정도 방향성을 설명해야 할 상황이어서, 일단 먼저 개인 비용으로 claude code를 결제하고 이것저것 테스트를 해보면서 학습을 해봤습니다.
프롤로그 #B
2년가량은 ChatGPT를 나름대로 여러 방면으로 활용했다고 생각했었는데, 시간이 지나면서 유료 사용을 유지하는 것이 큰 의미가 없는 수준으로 활용도가 떨어지고 있었습니다. 실제로 가장 효용성이 큰 부분은 한영 자동 번역에 대한 프롬프트를 GPTs로 만들어서 별도의 요구 없이 번역이 필요한 문장만을 한/영 구분 없이 입력하고 결과를 얻는 형태로 활용하고 있는 것이었습니다.
업무와 개인 영역에서 실제적으로 효용성을 얻을 수 있는 것을 각각 생각을 해보면서 Claude Code 활용을 해보고 있는데, 그중에 교집합이 되는 부분이 번역에 대한 것이었습니다. 영어를 업무에 활용하기 위해 사용하는 부분과 조금이나마 이를 극복하기 위해 영어를 공부하면서 여러 번역 툴들을 사용하는 상황들이 그것인데요, 무엇을 개선하면 각 과정 사이에 발생하는 시간과 노력을 조금이라도 줄일 수 있을까 고민하면서 발전시키고 있는 내용에 대해 글을 남겨보려고 합니다.
업무 영역에 대해서는 별도로 진행을 하고 있기 때문에 결과를 공유하기는 어려울 것 같고, 현재 시점까지 1차로 만든 개인용 버전을 기준으로 대략적인 과정과 결과에 대해 글을 남겨보도록 하겠습니다. 아마도 이 서비스를 제 스마트폰에서 사용 가능하도록 시도한 과정에 대해서는 소개를 할 수 있을 것 같습니다.
시작하기에 앞서
이 글은 저를 위해 적어두는 기록이면서 간단하게 질문을 하는 지인들을 위한 설명이기도 합니다. 물론 우연찮게 이곳에 와서 글을 읽게 되는 분들도 계실 텐데, 적어도 AI 도구들의 활용 사례에 대해서 여러 글이나 유튜브 영상 등을 통해서 익숙해진 분들이 많아진 시점이라는 상황을 전제로 하고 있습니다. 직접 사용은 하지 않고 있다 하더라도 Claude Code 혹은 다른 AI 툴을 통해 소위 '딸깍'하고 서비스를 만든 사례나 과정들에 대해 인지하고 있으리라 생각하고 있고, 세부 사용 방법에 대해서는 정말 많은 자료들을 어디서든 찾을 수 있을 것입니다. 저는 간단해 보이는 서비스가 실제 활용되기 위해 필요했던 내용들을 되짚어보는 내용으로 이해하고 읽어주시면 감사하겠습니다.
#1 무엇을 목표로 진행하였나
초기 버전을 개발하면서 목표가 조금씩 수정이 되었지만 독자(및 미래의 나)를 위해 몇 가지로 구분을 지어서 설명을 해보려고 합니다. 서비스 화면에 대해서 잘 살펴보면 알 수 있는 내용들이 많은데 캡처 화면을 보면서 얘기를 해보겠습니다.
< 모바일 화면 >
< PC 화면 >여러 요구사항들을 반복적인 프롬프팅을 통해 조금씩 수정이 되었는데 아래와 같은 것을 화면을 통해 발견하셨거나 유추를 하셨다면 눈썰미가 있으신 분일 것 같습니다.
> 번역 종류
번역 기록 부분을 보면 KO→EN 혹은 EN→KO로 번역이 된 것을 볼 수 있을 것입니다. 그리고 입력 시에 별도의 변환 종류를 선택하는 과정 없이 입력된 내용을 기준으로 판단해서 수행이 되도록 구성이 되었습니다. 사실 이 과정을 생략하는 것이 ChatGPT의 GPTs에 프롬프팅을 해두고, 별도로 '이 문장을 번역해 줘'라는 타이핑을 하지 않아도 번역 결과를 볼 수 있었던 유용했던 경험을 옮겨온 내용입니다.
> 부가 처리 액션
PC 화면에서는 Ctrl+Enter 키를 활용해서 번역할 수 있는 것이나 아래 글자수를 표시하는 것은 최초에는 제가 요청한 사항이 아니었고, UI 구성에 대한 요청을 하면서 AI가 부가적으로 반영한 내용입니다. 일반적으로 '좋은 구성'에 대한 기초 자료를 AI가 다양하게 가지고 있다는 것을 알 수 있었습니다.
> 서비스 도메인
이것은 AI가 직접 처리하기 어렵고 아직은 사람이 처리해야 하는 부분이지만, 해당 과정에 대해서도 질문을 하면 AI가 상당히 자세하게 가이드를 해주기 때문에 이미 잘 알려진 서비스를 사용한다면 충분히 해볼 만한 작업이라고 할 수 있습니다. 참고로 도메인이 캡처 화면에 포함되어 있어서 공개 서비스인 것으로 생각할 수 있겠지만, 현재는 토큰을 통해 소수 인원들만 사용할 수 있게 제어되고 있습니다. 20여 년 전에 개인 홈페이지를 운영했던 도메인을 다시 구매를 했는데, 다른 서비스들도 개발을 하고 확장을 해보겠다는 생각도 해보지만 잘 될지는 모르겠네요.
> 호스팅 서비스
로컬 컴퓨터가 아닌 호스팅 서비스를 활용하기 위한 방법은 다양하게 있을 텐데, 저는 AI가 추천해 준 Railway를 사용했습니다. 적은 비용에 부가적인 설정이 단순해서 당분간 활용을 할 것으로 생각됩니다. 저의 경우 현재 간략한 기능 업데이트에 대해서는 Claude Code에 프롬프트로 요청 및 개발을 완료한 후에 git commit & push까지 요청하게 되면, Railway가 연결된 Github Repository의 변경 사항을 감지하고 build 및 배포까지 자동으로 수행하고 있습니다.
> 번역 기록
이 부분은 업무 관련 효용성 대응을 할 때 주로 활용할 영역이지만 공통으로 들어간 기능입니다. 이런저런 번역 작업 이후 내용을 복사해서 다른 곳에 붙여 넣기를 하기 쉽게 하기 위한 구조를 반영했습니다.
위와 같은 내용에 대해 작업을 하면서 시간이 지나도 서비스가 계속 유지할 수 있도로 MD 파일로 저장하고 있고, 각 요구 사항에 대해 실제 동작이 정상인 것을 확인할 때마다 "해당 내용 md 파일에 반영해 줘"라는 요청을 하면 아래 화면의 내용처럼 관리가 되고 있습니다. 이와 관련한 테크닉이나 방법들은 여러분도 Claude Code에 입문하여 조금만 작업을 하다 보면 자연스럽게 여러 내용을 찾아보면서 적절한 선택을 하게 될 것입니다.
< MD 파일 내용 >#2 활용한 무료/유료 서비스
제가 사용한 툴과 서비스 및 비용에 대해 적어보려다가, 역시나 Claude에게 물어보니 잘 정리를 해줬습니다.
< 서비스 항목 >
< 비용 >툴이 많이 필요한 것처럼 보이지만, 사실 두 가지 부분만 알아두면 될 것 같습니다.
첫 번째는 Claude에서도 번역을 해주니 금액이 포함될 것이라 생각할 수 있겠지만, API 연동을 위해서는 별도의 구매가 필요할 수 있다는 것입니다. 하지만 위의 결과에도 나왔듯이 개인 사용량으로는 비용이 그다지 많이 발생하지 않기 때문에 겁먹지 말고 시도를 해도 된다는 것입니다. 물론 아무런 제약 없이 외부에서 접근할 수 있게 될 경우 문제가 발생할 수 있으므로 최소한의 안전장치를 해두고, API 비용 등에 대한 설정 등에 대해서 차근차근 찾아보면서 보완을 해나가면 되겠습니다.
두 번째는 호스팅과 도메인 사용을 포함한 접근성에 대한 것인데, 서비스가 동작한다는 것은 어딘가의 컴퓨터 리소스가 필요하다는 것을 이해하기만 하면 되겠습니다. 개인 컴퓨터가 커져 있는 상태에서 로컬호스트만으로 사용하는 것 이상으로 운영하고 싶은 상황이 생길 때, '무료 호스팅'이나 '저렴한 호스팅' 등의 키워드로 방법을 찾아보면서 본인에게 적절한 선택을 하면 되겠습니다. 보통의 경우 이런 부분이 AI 툴 자체적으로 이뤄지지 않고 외부 서비스에 가입하고 설정을 하는 과정이 필요한 영역이어서 어려움을 느낄 수 있겠지만, 한 번만 해보고 나면 이 부분 역시 넘을 수 있는 허들이라는 것을 알 수 있을 것입니다.
#3 확장하고 싶은 내용
글을 쓰는 중에도 일부 기능 추가에 대한 시도를 해보고 있는데요, 아래와 같이 학습/통계 부분을 만들어보고 있습니다. 개인적으로 번역 기능을 활용하는 부분이 영어 공부를 할 때도 발생하는데, 나중에 다시 복습과의 연결을 위한 데이터로 활용을 하려고 하고 있습니다. 영어를 잘 모르기 때문에 번역을 사용했다는 것은, 곧 공부가 필요한 영역이 될 테니까요.
< 확장 기능 고민 중 >#4 TMI
> TMI-A
개인적으로 20세기에 대학을 다니면서 Unix 터미널에 접속해서 C 언어 수업 숙제를 하던 시절이 있었던 터라, 기본적인 명령어나 VI 에디터 사용에 거부감이 적어서 작은 허들 몇 개를 쉽게 넘고 있다는 생각을 하고 있는 것을 다행으로 생각하고 있습니다.
> TMI-B
회사에서는 윈도 환경에서 일을 하기 때문에 환경 설정을 별도로 진행하면서 여러 가지 문제를 경험했는데, 그 와중에 Claude Code의 힘을 빌어 오픈 소스에 작은 기여를 시도하게 되는 경험도 하게 되었습니다. 개발자가 아닌 관리자 및 PM으로 지내면서 분리되었던 세상에 다시 연결된 느낌도 잠시 들었습니다. 역시 AI 시대가 된 것인가...
하지만, 몇 번의 문제를 겪고 나서 Windows의 Powershell을 그대로 사용하지 않고 WSL(Windows Subsystem for Linux)을 설치한 상태에서 Claude Code를 사용하고 있고, 결과적으로 WSL 사용을 통해 윈도와 맥에서 각각 작업을 할 때의 간극이 줄어들면서 맘이 편해졌습니다^^;
머릿속에는 꽤나 복잡한 요구사항을 멋지게 구현하면 좋겠다고 생각하는 프로젝트도 있지만, 아마도 당분간은 조금씩 번역&학습 서비스를 확장해 볼 것 같습니다. 더 나은 서비스를 만들었다는 스토리를 남길 수 있기를 기대해 봅니다.
# 에필로그
글을 발행하고 나서 글의 내용과 실제 구현한 것에 대해서 평가를 해달라고 해봤습니다.
< 평가 내용 일부 >아직 머리속의 내용을 모두 설명하지 않았기 때문에 Claude Code는 학습 부분도 완성이 되었다고 평가하는 것은 어쩔 수 없네요. Claude! 계속 잘해보자~