나만의 자비스 만들기 (jarvis.ilproai.com 따라하기)

무엇을 만드나

[jarvis.ilproai.com](https://jarvis.ilproai.com) 같은, *말을 걸면 듣고, AI가 생각해서, 목소리로 대답하는* 웹 비서를 만듭니다. 영화 아이언맨의 자비스처럼요.

세 가지 조각이면 됩니다:

• 귀 — 내 말을 글자로 (음성 인식)
• 뇌 — 그 말에 답을 (Claude AI)
• 입 — 답을 목소리로 (음성 합성)

브라우저에 귀와 입(Web Speech API)이 이미 들어 있어서 무료입니다. 뇌는 Claude API를 씁니다.

0— 폴더 만들고 Claude Code 켜기

mkdir my-jarvis && cd my-jarvis
claude

1— 뼈대

"Next.js로 자비스 같은 AI 음성 비서 웹앱을 만들어줘. 가운데에 큰 동그란 버튼이 있고, 누르면 내 말을 듣기 시작해. 어두운 미래적 디자인으로."

2— 귀 (음성 인식)

"버튼을 누르면 브라우저 음성 인식(Web Speech API)으로 내 말을 한국어로 받아 글자로 보여줘."

3— 뇌 (Claude 연결)

"받은 말을 Claude API로 보내서 대답을 받아와. API 키는 환경변수(API 키 같은 비밀값을 코드에 노출 않고 보관하는 곳)로 안전하게 넣어줘. 키는 내가 줄게."

Claude API 키는 [console.anthropic.com](https://console.anthropic.com)에서 발급받습니다. Claude Code가 .env.local에 안전하게 넣는 법까지 안내합니다.

4— 입 (음성 합성)

"Claude의 대답을 화면에 보여주고, 동시에 한국어 목소리로 읽어줘(음성 합성)."

이제 말 걸면 → 듣고 → 생각하고 → 말로 답하는 비서가 완성됩니다.

5— 성격 입히기

"이 비서한테 이름이랑 성격을 줘. 친근한 울산 사투리로 짧고 위트있게 답하게 시스템 프롬프트를 만들어줘."

6— 세상에 공개

"Vercel에 배포해줘."

주소가 나오면 폰으로 열어 친구에게 자랑하세요.

더 나아가기

• "내가 한 대화를 Supabase에 저장해줘" → 기억하는 비서
• "공공데이터 날씨 API 붙여서 '오늘 날씨 어때' 물으면 진짜 답하게" → 똑똑한 비서
• "카카오맵 붙여서 '가까운 카페 알려줘' 되게" → 만능 비서

핵심은 변하지 않습니다. 무엇을 원하는지 한 문장씩 말하면, Claude Code가 만듭니다. 당신의 상상력이 한계입니다.