🦞 AI 에이전트와 함께한 콘텐츠 자동화 여정 03 (나에게 최적화 된 업무파트너&영어 코치 동시에)

소개

시도하고자 했던 것과 그 이유를 알려주세요.

뷰티 업계에서 해외 마케팅·영업을 오래 해왔습니다. 영어는 늘 써야 하는 언어인데, 유학 경험이 없다 보니 바이어 미팅이나 컨콜에서 항상 조금씩 조심스러웠습니다. 하고 싶은 말은 표현하는데, 그들의 자연스러움과는 분명히 차이가 있다는 걸 스스로도 알았습니다.

그래서 오래전부터 이런 파트너가 있으면 좋겠다고 생각해왔습니다.

"내가 방금 한 말을 바로 고쳐주고, 내 업무 맥락에서 대화를 예의바르게 이어가 줄 수 있는 상대."

시중의 영어 앱이나 회화 모임을 꽤 찾아봤는데, 당연히 제 업무에 딱 맞는 내용은 없었습니다. 모두 일상 회화 위주이거나, B2B라도 업종이 달랐습니다. 거기다 한 가지 더 바랐습니다. 연습하는 김에 업종 관련 시장 정보나 트렌드도 영어로 접할 수 있다면, 영어 공부와 업무 인풋을 동시에 할 수 있지 않을까 하고요.

그 생각이 오래 머릿속에 있었는데, Claude를 쓰면서 "직접 만들 수 있겠다"는 생각이 처음으로 들었습니다.

진행 방법

어떤 도구를 사용했고, 어떻게 활용하셨나요?

1단계 — 일단 말로 요청했습니다

Claude.ai에서 처음 요청은 단순했습니다.

나는 K-Beauty 해외 영업 담당자야.
바이어 미팅 영어 연습을 할 수 있는 롤플레이 앱을 만들어줘.
AI가 바이어 역할을 하고, 내 말을 교정해줬으면 해.

처음 나온 결과물은 단순한 채팅 UI였습니다. 하지만 이미 핵심 구조는 있었습니다. AI 바이어가 실제처럼 질문하고, 제 답변 아래에 교정 블록이 붙는 형태였습니다.

여기서 욕심이 생겼습니다.

"바이어 목소리로 읽어줄 수 없어?"          → TTS 음성 출력 추가
"내가 말하면 텍스트로 바꿔줘"              → 마이크 음성 입력 추가
"시장 정보도 같이 나왔으면 해"             → 📊 Market Insight 블록 추가
"교정 스타일을 내가 고를 수 있게 해줘"     → 꼼꼼히 / 자연스럽게 / 고급 표현 옵션 추가

기능을 하나 요청하면 Claude가 코드를 수정해줬고, 저는 결과를 보고 피드백만 했습니다.

2단계 — 오류와의 전쟁 (삽질 기록)

첫 번째 오류 — JS 문법 오류

앱을 처음 실행했더니 콘솔에 이런 메시지가 떴습니다.

Uncaught SyntaxError: Unexpected identifier 'm'
Uncaught ReferenceError: handleKey is not defined

원인은 Claude.ai 아티팩트 환경이 구형 JS 엔진을 사용한다는 점이었습니다. 백틱(`) 안에 줄바꿈이 있으면 파싱 오류가 났습니다. 오류 메시지를 그대로 Claude에게 붙여넣었더니 원인을 찾아서 수정해줬습니다.

두 번째 오류 — 최신 JS 문법 미지원

Uncaught SyntaxError: Unexpected identifier 's'
Uncaught SyntaxError: Unexpected end of input

이번엔 .finally()와 Array.from()이 문제였습니다. Claude가 아티팩트 환경에서 금지된 문법 목록을 정리해줬습니다.

이후 빌드할 때마다 Node.js로 문법 검사를 자동으로 돌렸습니다.

bash

node -e "
var js = require('fs').readFileSync('index.html','utf8')
  .match(/<script>([\s\S]*?)<\/script>/)[1];
try { new Function(js); console.log('Syntax OK'); }
catch(e) { console.log('ERROR:', e.message); }
"

세 번째 오류 — CORS 벽

앱에서 Anthropic API를 직접 호출하니 이런 오류가 났습니다.

HTTP 0 — API 연결 오류

브라우저에서 외부 API를 직접 호출하면 보안 정책(CORS)으로 막힙니다. 해결책은 Anthropic이 제공하는 특수 헤더였습니다.

javascript

headers: {
  "x-api-key": userApiKey,
  "anthropic-version": "2023-06-01",
  "anthropic-dangerous-direct-browser-access": "true"
}

이 헤더 덕분에 별도 서버 없이 브라우저에서 직접 API 호출이 가능해졌습니다. 사용자가 본인 Anthropic API Key를 앱에 입력하는 구조로 설계했습니다.

3단계 — 처음엔 K-Beauty 전용이었는데

처음 만든 앱은 네일·색조 화장품(Enth) 전용이었습니다. 시나리오 5개가 하드코딩돼 있었습니다. 그런데 이런 생각이 들었습니다.

"SaaS 해외 영업, 자동차 부품 수출, 식품 유통 담당자들도 쓸 수 있지 않을까?"

Claude에게 방향을 설명했습니다.

이 앱을 범용 B2B 영어 코치로 만들고 싶어.
업종을 입력하면 그에 맞는 AI 바이어가 자동 생성되게 해줘.
사용자마다 이름, 직무, 상황, 교정 스타일을 입력하는 온보딩 단계가 필요해.

핵심은 시나리오를 하드코딩하지 않는 것이었습니다. 사용자가 본인 업종을 입력하면 Claude API가 그에 맞는 바이어 페르소나와 시나리오 5개를 실시간으로 만들어주는 구조입니다.

사용자 입력: 직무/업종 · 이름 · 주요 상황 · 교정 스타일
     ↓
Claude API → 맞춤 시나리오 5개 JSON 생성
     ↓
시나리오 선택 → AI 바이어 등장 → 롤플레이 시작

4단계 — 문서화까지 한 번에

앱이 어느 정도 완성되자, 다른 사람에게도 배포하고 싶어졌습니다. 개발 경험이 없으니 문서부터 정리하기로 했습니다.

지금까지 만든 내용을 바탕으로
PRD, TRD, Task.md, build.sh를 만들어줘.
다른 사람도 쓸 수 있는 범용 B2B 영어 코치 기준으로.

몇 분 만에 4개 파일이 완성됐습니다.

• PRD.md — 제품 정의, 사용자 페르소나, 기능 목록, 로드맵

• TRD.md — 아키텍처 설계, API 스펙, ES5 제약사항, 배포 설정

• Task.md — Phase 0(완료) ~ Phase 3까지 53개 태스크

• build.sh — 한 줄 배포 (bash build.sh vercel)

bash

bash build.sh status
# → Progress: 9 / 53 tasks complete

결과와 배운 점

완성된 것

ALT

한국어 웹사이트의 스크린샷

(최근 Nail과 색조회사 업무를 시작해서 이 부분이 여기에 반영이 되었습니다)

단일 HTML 파일 하나로 동작하는 B2B 영어 롤플레이 앱입니다. 설치 없이 브라우저에서 열면 됩니다. 본인 Anthropic API Key만 있으면 바로 쓸 수 있습니다.

주요 기능은 이렇습니다. 5가지 업무 시나리오 선택, AI 바이어와 실시간 대화, TTS로 바이어 목소리 듣기, 마이크로 말하면 자동 인식 후 전송, 매 응답 후 교정 표현 + 한국어 팁 + 시장 정보 표시.

시행착오에서 배운 것

오류가 날 때마다 메시지를 그대로 붙여넣는 게 가장 빠른 해결책이었습니다. "왜 안 되지?"를 혼자 고민하는 시간이 오히려 더 낭비였습니다.

그리고 Claude는 코드만 짜주는 게 아니었습니다. "범용으로 가야 하나, 전용으로 가야 하나?" 같은 방향 질문에도 이유를 들어 의견을 줬습니다. 작업 중간중간에 이런 대화가 꽤 도움이 됐습니다.

도움이 필요한 부분

현재 API Key를 사용자가 직접 입력하는 구조라 매번 넣어야 하는 불편함이 있습니다. localStorage 저장 기능은 구현 예정인데, 보안 관련해서 더 좋은 방법이 있으면 의견 부탁드립니다.

앞으로의 계획

온보딩 모듈과 동적 시나리오 생성 기능을 구현하면 진짜 범용 버전이 됩니다. 이후 Vercel에 올려서 링크 하나로 공유할 수 있게 만들 예정입니다. 혹시 테스트해보고 싶으신 분이 계시면 댓글 남겨주세요.

도움 받은 글 (옵션)

삼성PM Kenny 님의 "API Manager 제작 방식 (Rust 기반 build.sh 요청 부분)"을 참고 하였습니다