[나의 앱 개발기] 코딩 몰라도 만들었다 — 아버지를 위한 AI 맞춤법 앱 개발기
아버지가 카카오톡 메시지를 보낼 때마다 맞춤법이 조금씩 신경 쓰이셨던 모양이다. 직접 말씀을 꺼내신 건 아닌데, 어느 날 "맞춤법 검사하는 거 쉽게 쓸 수 있는 게 없냐"고 물어보셨다. 포털 맞춤법 검사기를 알려드렸는데 사용법이 복잡하다고 하셔서, 그냥 내가 만들어드리기로 했다.
간단할 거라고 생각했다. 텍스트 입력하면 AI가 교정해주는 앱. 하루면 되겠지 싶었는데, 실제로는 API 키 보안 하나 때문에 GitHub Pages, Cloudflare Workers, 그리고 최종적으로 Vercel까지 빙 돌아오는 여정이 됐다. 그 삽질의 전 과정을 솔직하게 공개한다.
* 처음 기획은 이랬다.
아버지가 쓰실 앱이라 복잡하면 안 됐다. 요구사항은 딱 세 가지였다.
글 입력 또는 음성으로 말하기
맞춤법·띄어쓰기·용례 자동 교정
왜 틀렸는지 쉬운 설명까지!
여기에 국립국어원 한글 맞춤법 규정을 기준으로 교정해주면 더 신뢰도가 올라갈 것 같았다. 단순 맞춤법 교정 도구가 아니라 왜 틀렸는지 이유까지 설명해주는 앱을 목표로 잡았다. 그게 기존 무료 맞춤법 검사기와의 차이점이기도 했다.
추가로 오늘의 맞춤법 팁, 즐겨찾기 저장, 국어사전 검색 기능도 넣기로 했다. 일단 Claude한테 기획을 던졌다.
* 첫 번째 시도 — HTML 단일 파일.
처음엔 가장 단순한 방법으로 갔다. HTML 파일 하나에 Claude API 호출 코드를 넣고, 파일을 아버지한테 보내드리는 방식. Claude가 만들어준 코드를 붙여넣고 실행해봤더니 PC에서는 됐다.
문제는 모바일이었다. 파일을 메일로 보내드리고 열어보니 음성 입력도 안 되고, API 호출도 안 됐다. 파일을 직접 열면 file:// 프로토콜이라 브라우저가 외부 API 호출과 마이크 접근을 모두 차단한다는 걸 그때 알았다. HTTPS 환경에서만 동작한다는 거다.
해결책은 웹 호스팅. GitHub Pages를 쓰기로 했다. 무료고 HTTPS도 기본 적용되니까.
* 두 번째 시도 — GitHub Pages, 그리고 API 키 문제.
GitHub에 레포지토리를 만들고 HTML 파일을 올렸다. 그런데 업로드하자마자 GitHub에서 경고가 떴다.
"Secret scanning found a Anthropic API Key secret."
GitHub 자체적으로 API 키를 감지해서 경고를 보내온 거다. 일단 무시하고 진행했는데, 잠시 후 실제로 Anthropic 쪽에서 그 키를 자동 비활성화해버렸다. Public 레포에 올라간 API 키는 수 분 내로 Anthropic 봇이 감지해서 자동 차단한다. 몰랐던 사실이다.
새 키를 발급받아 다시 넣으면 또 차단. 이 사이클을 세 번 반복하고 나서야 방향을 바꿔야겠다고 판단했다.
* 세 번째 시도 — Cloudflare Workers.
API 키를 파일에 넣지 않고 중간 서버를 두는 방식으로 전환했다. Cloudflare Workers가 그 역할을 한다. HTML은 키를 모르고, Workers가 키를 들고 Anthropic에 요청을 대신 보내주는 구조다.
| 방식 | API 키 위치 | 보안 | 문제점 |
|---|---|---|---|
| HTML 직접 포함 | 파일 안 | ❌ 노출 | GitHub 자동 차단 |
| Cloudflare Workers | 환경변수 | ✅ 안전 | 설정 복잡, CORS 오류 |
| Vercel API Route | 환경변수 | ✅ 안전 | 없음 (최종 선택) |
Cloudflare 계정을 만들고 Worker를 생성했다. 코드를 붙여넣고 배포했는데 Request not allowed 오류가 계속 났다. CORS 설정을 고치고, 키를 다시 입력하고, 코드 편집기가 코드를 잘라서 저장하는 문제까지 겹쳤다. 환경변수에 키를 넣었는데도 forbidden 오류가 사라지지 않았다.
원인을 찾다 보니 결국 Anthropic API 잔액이 소진됐을 때도 동일한 오류가 난다는 걸 알게 됐다. 그런데 잔액 확인해보니 $68 넘게 남아있었다. 원인 불명의 forbidden이었다. 한 시간 넘게 씨름하다가 포기하고 다른 방법을 찾기로 했다.
* 최종 선택 — Next.js + Vercel.
이전에 딸아이 문제출제 앱을 만들 때 썼던 조합이다. 처음부터 이걸 썼으면 반나절 안에 끝났을 텐데, 돌아오는 길이 꽤 길었다.
Next.js의 API Route 기능이 핵심이다. app/api/check/route.js 파일 하나가 브라우저와 Anthropic 사이의 중간 서버 역할을 한다. 사용자는 이 파일을 볼 수 없고, API 키는 Vercel 환경변수에만 저장된다.
배포 과정은 이렇다.
GitHub에 Next.js 프로젝트 push
Vercel에서 레포지토리 Import
환경변수에 ANTHROPIC_API_KEY 입력
Deploy → 자동 배포 완료!
Vercel 배포 화면에 앱 미리보기가 뜨는 순간 진짜 다 됐다는 실감이 났다. 그동안 고생한 것에 비해 배포 자체는 10분도 안 걸렸다.
* 완성된 앱, 이런 기능이 들어갔다.
| 기능 | 설명 |
|---|---|
| 맞춤법 검사 | 국립국어원 규정 기준으로 교정 + 이유 설명 |
| 음성 입력 | 말하면 자동으로 텍스트 변환 후 검사 |
| 국어사전 | 단어 입력하면 뜻·품사·예문·유의어 제공 |
| 오늘의 팁 | 매번 다른 맞춤법 팁 6개 자동 생성 |
| 즐겨찾기 | 틀린 표현 저장해두고 반복 학습 |
| 글자 크기 조절 | 어르신 배려, 버튼으로 크기 조절 |
특히 맞춤법 교정 결과에서 단순히 틀렸다고만 하는 게 아니라, "국립국어원 규정 제○항에 따르면..." 식으로 근거를 들어 설명해주는 부분을 신경 썼다. 아버지가 납득하면서 쓰실 수 있도록.
* 이번 개발에서 배운 것.
1. API 키가 필요한 앱은 처음부터 Next.js + Vercel로.
HTML 파일에 키를 넣는 방식은 아예 시작하지 말자. Public GitHub 레포에 올리면 수 분 안에 차단된다. 처음부터 서버 환경을 갖춘 구조로 가는 게 결국 빠르다.
2. 삽질도 공부다.
Cloudflare Workers에서 막혀서 시간을 날린 것 같지만, 덕분에 CORS가 뭔지, 환경변수가 어떻게 동작하는지 직접 몸으로 익혔다. Claude한테 물어보면서 개념을 하나씩 이해하는 과정이 결국 다음 프로젝트에 도움이 됐다.
3. 대상 사용자를 계속 생각할 것.
아버지가 쓰실 앱이라 글자 크기 조절, 큰 버튼, 쉬운 설명에 계속 집중했다. 기능을 추가할 때마다 "아버지가 이걸 쓸 수 있을까?"라고 자문했다. 덕분에 불필요한 기능은 빠지고 꼭 필요한 것만 남았다.
* 마무리 정리.
결론만 말하면, API 키 보안 문제 하나를 해결하는 데 가장 많은 시간이 걸렸다. 기능 구현보다 배포 환경 세팅이 더 어려웠다는 얘기다. 처음부터 Next.js + Vercel로 갔으면 하루면 충분했을 것을, 돌아서 오느라 배로 걸렸다.
그래도 완성하고 나니 아버지가 실제로 쓰신다. 카카오톡 보내기 전에 이 앱으로 한 번씩 확인하신다고 하셨다. 그걸로 충분하다.
코딩을 모른다고 만들 수 없는 게 아니다. 다만 어디서 막히는지 파악하고, 그 구간을 AI한테 물어가며 뚫어나가는 과정이 필요하다. 그 인내심만 있으면 생각보다 많은 걸 만들 수 있다.
본 글은 개인 개발 경험을 기록한 것이며, 특정 서비스나 플랫폼을 추천하는 글이 아닙니다.
