버튼을 누르면 실제로 작동하는 앱을, 말로 만든다
완성하면 생기는 것
데이터가 저장되고 휴대폰에 설치도 되는 나만의 웹앱
Claude Pro 이상 구독필수
바이브코딩의 두뇌입니다. 최소 Claude Pro($20/월)면 충분히 시작할 수 있고, 하루에 많이 만들 계획이면 Max 요금제가 한도가 넉넉합니다. 무료 플랜으로도 맛보기는 되지만 금방 한도에 걸립니다.
컴퓨터 (윈도우 또는 맥)필수
사양은 크게 중요하지 않습니다. 인터넷이 되는 노트북이면 충분합니다.
Node.js LTS 버전필수
코드를 실행하는 엔진입니다. nodejs.org에서 'LTS'라고 적힌 안정 버전을 받습니다. 설치는 아래 1단계에서 같이 합니다.
VS Code (비주얼 스튜디오 코드)필수
무료 코드 편집기입니다. 여기에 Claude Code 확장을 깔아서 'AI와 대화하며 코딩'합니다. 마이크로소프트의 Visual Studio(유료 IDE)와는 다른 프로그램이니 이름에 주의하세요.
웹사이트가 '보여주는 것'이라면, 앱은 '작동하는 것'입니다. 사용자가 입력하고, 그 내용이 저장되고, 다시 켜도 남아 있어야 진짜 앱입니다.
우리는 웹 기술로 앱을 만듭니다. 설치 파일이 필요 없고, 만든 걸 휴대폰 홈 화면에 추가하면 일반 앱처럼 쓸 수 있습니다(PWA). 앱스토어 심사도 필요 없습니다.
팁
첫 앱은 작게 시작하세요. '할 일 목록' 하나만 제대로 만들어도 입력·저장·삭제라는 앱의 핵심을 전부 배웁니다.
nodejs.org에서 'LTS' 버전을 설치합니다. VS Code 터미널에서 아래로 확인합니다.
$node -v$npm -v
v20.18.0 10.8.2
이렇게 나오면 성공
버전 숫자 두 개가 보이면 성공입니다.
오류가 나면?
VS Code 설치 후, 확장에서 'Claude Code'를 설치하고 Sign in으로 구독을 연결합니다.
팁
Claude에게 앱 아이디어를 먼저 한국어로 설명하고 '어떤 기능부터 만들면 좋을지' 물어보면, 순서를 잡아 줍니다.
아래 명령으로 앱의 뼈대를 만듭니다. 질문엔 TypeScript·Tailwind·App Router 모두 Yes를 권장합니다.
$npx create-next-app@latest my-app
✔ TypeScript … Yes ✔ Tailwind CSS … Yes ✔ App Router … Yes Success! Created my-app
이렇게 나오면 성공
'Success! Created my-app'이 나오면 성공입니다.
폴더로 들어가 개발 서버를 켭니다. 'http://localhost:3000'을 브라우저로 엽니다. 이 창은 켜둡니다.
$cd my-app$npm run dev
▲ Next.js 15 - Local: http://localhost:3000 ✓ Ready in 1.4s
이렇게 나오면 성공
기본 화면이 뜨면 준비 완료입니다.
오류가 나면?
Claude에게 앱의 동작을 구체적으로 설명합니다. 예: "app/page.tsx를 '할 일 관리 앱'으로 만들어줘. 위에 입력칸과 추가 버튼이 있고, 추가하면 아래 목록에 나오고, 각 항목엔 완료 체크와 삭제 버튼이 있어. 완료된 건 회색 취소선으로 표시해줘."
브라우저에서 직접 눌러 보며 '체크하면 맨 아래로 이동', '개수 표시 추가'처럼 동작을 다듬습니다. 앱은 '눌러 보고 고치는' 반복이 특히 중요합니다.
팁
버그가 보이면 '완료 버튼을 눌러도 표시가 안 바뀌어'처럼 증상을 그대로 말하세요. Claude가 원인을 찾아 고칩니다.
오류가 나면?
지금은 새로고침하면 내용이 사라질 수 있습니다. Claude에게 "입력한 할 일을 브라우저에 저장(localStorage)해서 다시 켜도 남아 있게 해줘"라고 하면 진짜 앱다워집니다.
이어서 "이 앱을 휴대폰 홈 화면에 설치할 수 있는 PWA로 만들어줘. 앱 아이콘과 이름도 설정해줘"라고 하면, 휴대폰 브라우저에서 '홈 화면에 추가'로 앱처럼 설치됩니다.
팁
저장 기능이 잘 되는지 확인하려면, 항목을 추가한 뒤 브라우저를 완전히 껐다 켜 보세요. 그대로 남아 있으면 성공입니다.
오류가 나면?
웹사이트 트랙과 동일합니다. 아래로 Vercel에 올리면 실제 주소가 생기고, 그 주소를 휴대폰에서 열어 설치할 수 있습니다.
$npm i -g vercel$vercel
Vercel CLI ✅ Production: https://my-app.vercel.app
이렇게 나오면 성공
https://...vercel.app 주소가 나오면 완성입니다.
오류가 나면?
축하합니다. 입력·저장·설치가 되는 진짜 앱을 만들었습니다.
다음엔 로그인, 알림, 다크모드, 여러 기기 동기화까지 같은 방식으로 확장할 수 있습니다. 커리어 아케이드에서 팀을 꾸려 함께 더 큰 앱에 도전해 보세요.
