처음부터 끝까지 내가 만들고 싶은 앱으로 직접 시작합니다
3회차에서는 테디가 준 소스코드로 배포를 경험했어요. 오늘은 내가 만들고 싶은 앱을 처음부터 직접 만들기 시작합니다. PRD 작성부터 GitHub 세팅, 개발, 배포까지 전 과정을 한 번에!
3회차에 이미 다 설치했어요! Claude 데스크탑, VS Code, GitHub Desktop, Vercel. 오늘은 설치 없이 바로 만들기에 집중합니다.
"만들고 싶은 앱 아이디어" 하나. 아직 없어도 수업 시간에 함께 찾습니다!
① 내가 실제로 쓸 것 같다
② 핵심 기능을 3개로 말할 수 있다
③ 결제·AI·회원가입이 핵심이 아니다
이 3가지를 만족하면 충분해요. 완벽한 아이디어를 찾으려 하지 마세요. 만들면서 발전시키는 게 훨씬 빨라요!
PRD 완성 + GitHub 세팅 + 개발 시작 + 1차 배포. Supabase는 필요한 사람만 선택적으로 진행해요. 배포 URL만 있어도 오늘은 성공!
아이디어가 없으면 앱을 못 만들어요. 아래 3가지 질문으로 빠르게 결정하세요.
"완성되면 매주 1번이라도 쓸 것 같다." → YES면 좋은 선택!
3개로 정리가 안 되면 너무 복잡한 거예요. 범위를 줄이세요.
이런 기능이 핵심이면 완성이 어려워요. 핵심 가치는 다른 데 있어요.
나 혼자, 내 기기 하나로만 쓰는 거라면(예: 내 개인 캘린더) DB 없이 브라우저 저장(localStorage)만으로 충분해요 — 배포해도 똑같이 잘 작동해요.
여러 사람이 같이 쓰거나 여러 기기에서 봐야 해서 DB(Supabase)가 꼭 필요하다면, 부대 보안과 무관한 가벼운 주제로 정하세요. (예: 동기 생일 알림, 당직 순서표는 OK / 실제 작전·인원·보안 정보가 들어가는 건 안 됨)
막연히 "앱 아이디어 있으세요?"라고 물으면 가계부, 투두리스트처럼 흔한 것만 떠올라요. 아래 10개 질문에 짧게 답하면서 내 부대 생활 속 진짜 불편함을 감으로 잡아보세요. 문장으로 완벽하게 답할 필요 없어요, 떠오르는 대로 메모만 하면 충분합니다.
① 하루 중 가장 반복적으로 짜증나는 행정·관리 작업은?
② 정보가 늦게 전달돼서 곤란했던 적은?
③ 물품·인원·시간을 손으로 세거나 외워야 했던 순간은?
④ 같은 걸 매번 다시 확인하거나 물어봐야 했던 일은?
⑤ "이거 누가 정리해주면 좋겠다" 싶었던 작업은?
① 전우들과 뭔가를 정하거나 나눠야 할 때 헷갈렸던 경험은?
② 당직·작업·청소 같은 순서를 정할 때 불편했던 점은?
③ 혼자 기록하고 싶은데 마땅한 도구가 없었던 건?
④ 전입·전출, 동기들과 관련해서 챙기기 번거로웠던 일은?
⑤ 개인정비시간을 더 잘 쓰고 싶은데 안 됐던 이유는?
당직·작업 순서 룰렛 · 보급품 체크리스트 · 점호/PT 기록 · 전입신병 적응 체크리스트 · 동기 생일·기념일 알림 · 개인정비시간 루틴 트래커 — 이런 결의 아이디어들이 보안 걱정 없이 만들기 좋아요.
⚠️ 80% 마음에 들면 그걸로 시작하세요! 완벽한 아이디어는 없어요. 만들면서 발전시키는 게 훨씬 빨라요.
아이디어가 정해졌으면 Claude Chat 탭에서 PRD를 만들어요. 2회차에서 배운 티키타카 방식 그대로입니다. 이번엔 진짜 내 앱이에요!
PRD가 어느 정도 완성되면 4종 문서를 한 번에 만들어요. 각 파일이 무슨 역할인지 먼저 확인하세요.
prd.md = 설계도 (뭘 지을지)
claude.md = 수행 매뉴얼 (어떻게 지을지, 신입 직원 업무 매뉴얼처럼)
readme.md = 소개서 (제품 박스의 소개 라벨처럼, 사람이 보는 것)
current_status.md = 저장 버튼 (게임 세이브 포인트처럼, 다음에 이어서 시작)
Stripe, Notion, Linear, Apple, Spotify... 평소 보던 앱·사이트 중에 "이런 느낌이면 좋겠다" 하는 게 있나요? 그걸 claude.md에 미리 적어두면, 앞으로 만들 모든 Phase에 똑같은 스타일이 일관되게 적용돼요. 나중에 개발 다 끝나고 디자인을 바꾸려면 모든 화면을 다시 고쳐야 해서 비효율적이에요 — 지금이 가장 좋은 타이밍입니다.
"예쁘게 만들어줘"는 모호해서 AI가 무난한 기본 디자인으로 가요. 대신 "[특정 서비스]처럼"이라고 구체적으로 지정하면, 그 서비스의 색감·여백·폰트 분위기를 참고해서 훨씬 더 또렷한 스타일로 나와요. 꼭 유명 서비스가 아니어도 됩니다 — "군더더기 없이 단정한 느낌", "PT 체조 포스터처럼 또렷한 느낌"처럼 직접 표현해도 똑같이 적용돼요.
4개 파일이 내 컴퓨터에 다운로드된 상태. 다음 단계에서 프로젝트 폴더를 만들고 여기에 넣습니다!
GitHub Desktop에서 새 저장소를 만들면 .gitignore 파일이 자동으로 생성돼요. 3회차처럼 기존 폴더를 Add하는 게 아니라 처음부터 새로 만드는 방식이에요.
GitHub에 내 프로젝트 저장소가 생겼고, 4종 문서가 올라갔어요. 이제 개발 시작 준비 완료!
① 에러 메시지를 전체 그대로 복사한다 (일부만 X)
② Claude에게 그대로 붙여넣고 묻는다: "이 에러가 났어: [에러 전체] 1)무슨 뜻인지 쉽게 설명해줘 2)원인이 뭔지 알려줘 3)고치는 방법을 알려주고 직접 수정해줘"
③ 고친 후 다시 실행해서 확인한다
④ 안 되면 → "방금 방법으로 안 고쳐졌어. 다른 방법으로 시도해줘"
⑤ 그래도 안 되면 → 강사 호출 (강사는 정답을 주는 사람이 아니라, AI에게 더 잘 묻도록 같이 봐주는 사람이에요!)
claude 입력 → EnterPhase 2~3까지! 기본 UI가 보이는 단계까지 가는 게 목표예요. 남은 부분은 과제와 5회차에 이어서 합니다.
3회차에서 한 번 해봤죠? 이번엔 내 앱으로 다시 합니다!
내가 만든 앱에 진짜 URL이 생겼어요. 이제 개발할 때마다 커밋&푸시만 하면 자동 배포됩니다!
⚠️ 혼자 쓰는 기록 앱이라면 없어도 충분해요. "여러 사람이 함께 쓰거나, 어디서 접속해도 데이터가 보여야 한다"면 아래를 따라하세요.
https://xxxxxxxxxxxxxx.supabase.coeyJhbGciOiJIUzI1NiIsInR5...
Project URL: https://xxxxxx.supabase.co
anon key: eyJhbGciOiJIUz...
create table todos (
id uuid primary key default gen_random_uuid(),
title text,
is_done boolean default false,
created_at timestamp default now()
);
한국어로 풀면: "todos라는 표를 만들어줘. 컬럼은 id(고유번호), title(할일 내용), is_done(완료 여부), created_at(생성 시간)으로 해줘"라는 뜻이에요.🚨 API 키를 코드에 직접 넣으면 절대 안 돼요! GitHub에 올라가는 순간 전 세계에 공개됩니다. 반드시 .env.local 파일에 따로 보관하세요.
VITE_SUPABASE_URLVITE_SUPABASE_ANON_KEYAPI 키는 안전하게 보관되고, 어디서 접속해도 데이터가 보이는 진짜 앱이 됐어요!
에러가 나면 당황하지 마세요. 아래에서 내 상황과 비슷한 항목을 찾아 해결 프롬프트를 복사해서 Claude에게 그대로 물어보세요.
원인: 폴더 안에 .git 폴더가 없거나 잘못된 폴더를 열었을 가능성. 확인: 숨김 파일 표시 후 .git 폴더 존재 확인.
원인: 원격(GitHub)에 내 컴퓨터에 없는 변경이 있음. 해결: "Fetch origin" 먼저 클릭 → 다시 "Push origin".
원인: 코드 문법 오류, 빠진 파일 등. 해결: Deployments → 실패한 배포 클릭 → 로그의 빨간 줄(Error)을 그대로 복사.
원인: 메인 파일이 index.html이 아니거나 경로 문제. 해결: "메인 파일을 index.html로 바꿔줘" 요청 후 재커밋&푸시.
원인: 저장만 하고 재배포를 안 함. 해결: Settings에서 저장 → Deployments → 최근 배포 → "Redeploy" 필수.
원인: 설치가 안 됐거나, 새 터미널을 안 열었음. 해결: 터미널을 새로 열고 다시 시도 → 안 되면 3회차 설치 단계 재확인.
원인: 허용 여부를 묻는 창이 떴는데 응답을 안 함. 해결: "항상 허용(Always Allow)" 선택.
원인: 실제로는 작업 중일 가능성이 높음(특히 Phase가 클 때). 해결: 1~2분 더 기다린 후 "지금 진행 상황 알려줘"로 확인. 그래도 멈춰 있으면 "지금까지 한 작업 알려주고, 멈춘 부분부터 다시 진행해줘".
원인: 테이블 이름 중복, 문법 오류 등. 해결: 에러 메시지를 그대로 복사해 Claude에게 "이 에러가 났어. 고쳐줘."
원인: .env.local 키가 잘못 들어갔거나 Refresh 안 함. 해결: 먼저 Table editor에서 새로고침 → 안 보이면 .env.local의 URL/key 값을 다시 확인.
모든 에러를 직접 이해하지 않아도 괜찮아요. 위에서 비슷한 카테고리를 찾아 해당 프롬프트를 복사해서 Claude에게 그대로 물어보면 됩니다. 실제 디버깅은 AI가 해줘요 — 여러분은 방향만 잡아주면 충분해요.
개발 계속 이어가기 (Phase 3~4 목표)
개발 → 커밋&푸시 → URL 확인 사이클을 반복하세요. Phase가 끝날 때마다 current_status.md도 업데이트해두면 5회차에 바로 이어서 시작할 수 있어요!
막히는 부분은 메모해두고 5회차에 함께 해결해요.