상용 앱 만들기,
한눈에 지도 & 용어사전

아이디어가 서비스가 되기까지 ― 아이토피 프로젝트 학습 노트

먼저 이 지도로 큰 흐름을 잡고, 위 탭을 다음 →으로 넘기며 단계별 설명용어사전을 펼쳐 보세요. 지도의 박스나 카드의 용어 칩을 누르면 관련 설명으로 바로 이동해요.

📖 용어사전 바로 검색 ― 모르는 말을 여기에 치면 바로 찾아줘요
✎ 아이디어가 서비스가 되기까지, 한눈에 보는 지도 ― 카드를 누르면 자세한 설명으로!
● 아이토피 지금 여기 — ② 코드 직전 · 데이터 PoC 진행 중!
AI 도구 · 두뇌
ChatGPT아이디어 확장 · 기획
Claude설계 · 코드 · 리팩토링
Gemini검색 · 분석 · 문서
>_클로드코드터미널에서 직접 실행
바이브코딩
>_클로드코드 하나!
“생각을 코드로, 코드를 서비스로!
  • 자연어로 개발
  • 빠르게 프로토타입
  • 반복하며 완성도 UP!
  • 아이디어를 서비스로!
GitHub
버전 관리 · 협업 플랫폼
  • 코드 저장소 (Git)
  • 브랜치 전략
  • Pull Request 리뷰
  • 이슈 · 프로젝트 보드
프론트엔드 · 보이는 영역
React (UI)
화면 · 버튼 · 사용자 인터페이스 · UX
API 통신
백엔드 · 보이지 않는 영역
supabase 백엔드 플랫폼
  • 인증 (Auth) · DB (PostgreSQL)
  • 실시간 · 스토리지
  • API · Edge Functions
세상에 내보내기 · 배포 인프라
supabase데이터 · API
CloudflareDNS · CDN · 보안
사용자접속
Vercel자동 배포 · HTTPS
✦ 아이디어가 세상에 닿는 순간! ♥ 작게 시작하고, 빠르게 배포하고, 지속적으로 개선하자!
이 지도는 표준 흐름이에요. 실제로는 단계가 겹치고 되돌아가기도 합니다 ― 특히 개발→테스트→배포→운영은 계속 도는 반복!
각 단계를 자세히 보려면 위 탭에서 📍 단계별 · 📖 용어사전 · ⚖️ 비교표로 넘겨 보세요!
내 진행 0/0 (0%)

① 전체 로드맵 — 9단계

각 항목을 탭하면 체크돼요 — 진행은 자동 저장!
0

준비 Setup · 환경 구축

개발을 시작할 수 있게 도구와 계정을 갖추는 단계.
  • 개발 도구 설치 — VS Code(코드 편집기), Node.js, Git
  • 계정 만들기 — GitHub(코드 보관), 배포 서비스(Vercel 등), DB(Supabase 등)
  • AI 코딩 도구 연결 — 클로드코드 등
산출물 → 바로 코딩 가능한 내 컴퓨터 환경
용어IDECLI · 터미널Git클로드코드Node.js
아이토피 = S0 기반 준비 … VS Code·클로드코드·GitHub·Vercel·Supabase 세팅 완료! (7/8) ✔
1

아이디어 · 기획 Ideation & Planning

"무슨 문제를, 누구를 위해, 무엇으로 풀지"를 글로 확정하는 단계. 코드보다 먼저!
  • 문제(페인 포인트) 정의 & 시장조사 · 벤치마킹
  • 핵심 사용자 정하기 — 페르소나, 유저 스토리
  • 만들 기능 범위(스코프) 정하고 기능정의서(PRD) 작성
  • 일정 계획 — 로드맵 · 마일스톤 · 백로그
산출물 → PRD(기능정의서) · 페르소나 · 로드맵
용어페르소나PRD벤치마킹스코프백로그유저 스토리
아이토피 = S1 전반부 … 화해 벤치마킹 → 경쟁조사 → 리스크 조사 3종 완료 ✔ 페르소나 '지민맘·준서대디' 초안.
2
↓ 아이토피 지금 여기!

검증 Validation

크게 만들기 전에 "기술로 되는가 + 가치가 있는가"를 최소 비용으로 확인.
  • PoC — 핵심 기술이 실제로 작동하는지 실험 (제품 아님!)
  • 프로토타입 — 화면 흐름을 가짜로 만들어 반응 확인
  • MVP 범위 확정 — 뺄 것을 정하는 게 핵심
  • 결과에 따라 전진(GO) / 보류 / 피벗 결정
산출물 → PoC 결과 보고 · MVP 기능 목록(제외 목록 포함)
용어PoCMVP프로토타입피벗PMF린 스타트업
아이토피 = S1 후반부(현재) … 식약처 API로 실제 성분 조회가 되는지 데이터 PoC 진행 중. 성공률 80% 이상이면 GO!
3

설계 Design

화면과 데이터의 청사진을 그리는 단계. 여기서 그린 대로 개발한다.
  • 화면 구조(IA) · 유저 플로우 → 와이어프레임 → 목업
  • UX 원칙 정하기 — 접근성, 온보딩, 문구 톤
  • 데이터 설계 — DB 스키마, API 연동 방식
  • 기술스택 확정 — 무엇으로 만들지 (언어·프레임워크·호스팅)
산출물 → 와이어프레임 · 화면 목록 · 스키마 · 기술스택 결정서
용어와이어프레임IAUXUI스키마접근성기술스택
아이토피 … 화면 6개 흐름·판정 3단 표시 확정, 스택 확정(PWA + Vercel, 서버는 나중에 Supabase) ✔ 와이어프레임은 PoC 뒤 착수.
4

개발 Development

설계도를 실제 동작하는 코드로 바꾸는 단계. 바이브코딩이 여기서 활약!
  • 프로젝트 셋업 — 저장소(리포) 만들고 뼈대 코드 생성
  • 화면(프론트엔드) 구현 + 데이터(API) 연동
  • 수시로 커밋·푸시 — 되돌릴 수 있는 저장 포인트 만들기
  • 코드 리뷰 · 리팩토링으로 품질 관리, 인증키는 환경변수로 분리
산출물 → 동작하는 앱 코드 (GitHub 저장소)
용어프론트엔드백엔드API커밋리팩토링환경 변수PWA
아이토피 = S2 … 클로드코드로 PWA 구현 예정. 리포 itopi-app(비공개) + docs 3원장 구조, 인증키 커밋 금지(.gitignore)!
5

테스트 · 품질 Testing & QA

"믿고 내보낼 수 있는가"를 검사하는 단계. 고치고 다시 검사하는 반복.
  • 자동 테스트 — 단위 → 통합 → E2E(사용자 시나리오)
  • 엣지 케이스 점검 — 드물지만 위험한 상황들
  • 사람 테스트 — 알파(내부) → 베타(외부 소수)
  • 버그 트래킹 — 발견 → 티켓 등록 → 수정 → 재검사(회귀 테스트)
산출물 → 테스트 통과 목록 · 베타 피드백 · 수정 이력
용어QAE2E 테스트베타 테스트엣지 케이스회귀 테스트핫픽스
아이토피 … 판정 정확성 = 안전 문제. '우유↔유청단백' 같은 유의어 매칭이 최대 시험 항목 — 확신 없으면 '확인불가'로 낮추는 보수 원칙 검증.
6

배포 · 출시 Deployment & Launch

내 컴퓨터의 코드를 세상 누구나 쓸 수 있게 공개하는 단계.
  • 빌드배포 자동화(CI/CD) — 푸시하면 자동 반영
  • 도메인 연결 + HTTPS(자물쇠) 적용
  • 스토어 등록 — 개발자 계정, 앱 심사, 스크린샷·설명 준비
  • 단계적 공개 — 비공개 테스트 → 공개 테스트 → 정식 출시
산출물 → 실서비스 주소(URL) · 스토어 등재 페이지
용어배포CI/CD도메인HTTPSTWA스토어 심사비공개 테스트
아이토피 = S3 … 1) Vercel로 웹 먼저 공개 → 2) Cloudflare 도메인 → 3) 반응 좋으면 TWA로 플레이스토어 등록. 개인 계정은 테스터 12명×14일 비공개 테스트가 관문!
7

운영 · 개선 Operation

출시는 끝이 아니라 시작. 지켜보고, 듣고, 고치는 무한 반복 단계.
  • 모니터링 — 오류·크래시·응답속도 감시, 로그 확인
  • 지표 분석 — 리텐션(재방문) · 퍼널 · DAU/MAU
  • 사용자 소리 듣기 — 리뷰 · CS · 신고 채널
  • 업데이트 반복 — 개선 → 배포 → 측정 (필요시 A/B 테스트)
산출물 → 지표 대시보드 · 업데이트 버전들 · 개선 백로그
용어모니터링로그리텐션DAU · WAU · MAU퍼널A/B 테스트
아이토피 = S4 … 북극성 지표는 주 1회 재사용률. 다운로드 수는 허영 지표라 안 봄! '실물과 달랐어요' 신고가 품질 경보.
8

성장 · 수익화 Growth & Monetization

서비스가 스스로 굴러가고 커지도록 구조를 만드는 단계.
  • 알리기 — ASO(스토어 검색 최적화) · 콘텐츠 · 커뮤니티
  • 수익모델 실험 — 프리미엄 · 구독 · 인앱결제
  • 단위경제 확인 — CAC(획득비용) < LTV(고객가치)
  • 확장 — 서버 도입, 기능 확대, 스케일링
산출물 → 수익모델(BM) · 성장 루프 · 확장 계획
용어ASO프리미엄CACLTV스케일링BM
아이토피 = S4 후반 … 신뢰 먼저·수익 나중. 광고 배제 선언, freemium 설계도는 준비만. 서버(Supabase) 도입 시 민감정보 동의 절차 필수!
↺ ④개발 → ⑤테스트 → ⑥배포 → ⑦운영은 한 바퀴로 끝나지 않고, 출시 후에도 계~속 도는 반복 루프!

용어사전 176개 · 12분류

모르는 말은 아래 검색창에 바로 치기 ― 분류 버튼으로 골라 봐도 OK

헷갈리는 것들 비교

비슷해 보이는 말들, 표로 한 방에 정리!

PoC vs 프로토타입 vs MVP 제일 많이 헷갈리는 3형제!

PoC (개념 증명)프로토타입MVP
답하려는 질문"기술적으로 되나?""이 흐름이 쓸 만한가?""시장이 원하나?"
형태실험 코드·스크립트 (버려도 됨)동작하는 척하는 화면 모형핵심 기능만 담은 진짜 제품
보는 사람나 (개발팀)나 + 예비 사용자 몇 명실제 사용자
아이토피 예식약처 API로 성분 조회 성공률 실험 (지금!)와이어프레임을 클릭되게 만든 화면프로필+검색+판정+리스트만 있는 첫 출시판

앱을 만드는 4가지 방식 아이토피는 PWA → TWA 경로!

네이티브크로스플랫폼하이브리드PWA
만드는 법OS 전용 언어 (Kotlin/Swift)한 코드로 양쪽 (Flutter, React Native)웹으로 만들고 앱 껍데기웹 자체에 앱 기능 부여
장점성능·기능 최고한 번에 두 OS웹 기술 재활용스토어 없이 즉시 배포, 수정 즉시 반영
약점비용·난이도 최대전용 기술 학습성능 한계일부 기기 기능 제한, iOS 저장 제약
스토어 등록기본기본가능TWA·Capacitor로 감싸면 가능

프론트엔드 vs 백엔드 식당으로 비유하면…

프론트엔드 (보이는 곳)백엔드 (안 보이는 곳)
비유홀 — 메뉴판·테이블·직원 응대주방 — 재료 창고·조리·레시피
하는 일화면, 버튼, 입력, 애니메이션데이터 저장, 로그인, 계산, API 제공
대표 기술HTML · CSS · JS · React서버, DB(PostgreSQL), 인증
아이토피MVP는 거의 전부 프론트 (기기 저장)S4에서 Supabase 도입 시 시작

라이브러리 vs 프레임워크 vs SDK vs API 도구 4형제

한 줄 비유예시
라이브러리필요할 때 꺼내 쓰는 부품 상자 — 주도권은 내 코드React
프레임워크규칙이 정해진 조립 키트(뼈대) — 주도권은 틀Next.js
SDK특정 플랫폼용 공구 세트 (라이브러리+문서+도구)안드로이드 SDK
API프로그램끼리 말 거는 창구(주문 창구)식약처 공공 API

개발 → 스테이징 → 프로덕션 환경 3단계

개발 (Dev)스테이징 (Staging)프로덕션 (Production)
비유연습실최종 리허설 무대본 공연
누가 보나나만 (localhost)팀·테스터 (미리보기 주소)실제 사용자 전원
Vercel에선내 컴퓨터 실행Preview 배포 (브랜치마다 자동)Production 배포 (본선 머지 시)

알파 → 베타 → 정식 출시 공개 범위가 점점 넓어져요

단계대상목적참고
알파나·내부 사람큰 버그 잡기깨져도 되는 단계
비공개 베타초대한 소수실사용 피드백구글 신규 개인 계정: 테스터 12명×14일 의무 [2026 기준, 변동 가능]
공개 베타원하는 누구나규모 검증스토어 '테스트 참여' 노출
정식 출시전체 공개본 운영심사 통과 후 스토어 등재

지표 5형제 숫자로 서비스 건강 읽기

지표아이토피라면
DAU / WAU / MAU하루/주/월 실사용자 수월간 몇 가족이 쓰나
리텐션다시 돌아오는 비율 (생존의 핵심)주 1회 재사용률 = 북극성 지표 ★
이탈률 (Churn)떠나는 비율 (리텐션의 반대)2주째 안 여는 가족 비율
퍼널목표까지 단계별 생존율 (깔때기)검색 → 판정 도달률
전환율원하는 행동을 한 비율판정 후 리스트 저장 비율

Git 작업 흐름 코드는 이렇게 세상에 나간다!

수정코드 고침 커밋저장 포인트 푸시GitHub에 올림 PR합쳐달라 요청 리뷰검토(AI 가능) 머지본선에 합침 자동 배포CI/CD → 사용자에게!
기준일 2026-07-19 · 아이토피 프로젝트 학습용으로 Claude가 제작 · 본문 정의는 업계 표준 개념이며, 스토어 정책·요금은 변동될 수 있어 등록 시점에 공식 문서 재확인 필요 (구글 신규 개인 계정 테스트 요건: Play Console 고객센터). 단계 구분은 학습용 표준 모델로, 실제로는 단계가 겹치고 반복됩니다.

비개발자 실전 팁

자주 막히는 곳만 콕 집었어요!

🧠 AI 도구, 이렇게 나눠 쓰기

💬 ChatGPT아이디어 확장·기획 브레인스토밍
📋 클로드 코워크문서·조사·대시보드 "만들어줘"
✦ Gemini검색·자료 분석·문서화
⌨️ 클로드코드실제 앱 코딩·깃허브·배포

✍️ 바이브코딩 프롬프트 요령

  • 목표·대상·제약을 구체적으로. "로그인 화면 만들어"보다 "이메일로 가입, 버튼은 하나".
  • 한 번에 하나씩. 큰 걸 통째로 말고 작은 단위로 쪼개 요청.
  • 안 되면 에러 메시지를 그대로 붙여넣고 고쳐달라 하기.
  • 확신 없는 건 물어보게. "[확인]·[추정]·[미확인]으로 구분해줘".

⚠️ Git·GitHub 실전 주의

  • 구글드라이브(G:) 폴더 안에 코드 리포(.git)를 만들지 마세요. 자동 동기화와 부딪혀 깨질 수 있어요 → C:\dev 같은 로컬 경로에.
  • 원본 문서는 드라이브에, 코드는 GitHub 리포에.
  • VS Code에서 GitHub 로그인 한 번이면 토큰 없이 자동 인증돼 push 됩니다.
  • 인증키·비밀번호는 커밋 금지. 환경변수로 분리하고 .gitignore에 넣기.

🔍 AI와 안전하게 일하기 (자가검증)

  • 3단계 검증 루프: ① 초안 → ② 자체 비판·재검토 → ③ 수정·확정.
  • 1/2 검증 법칙: AI가 아껴준 시간의 절반은 다시 확인하는 데 투자.
  • 없는 링크·수치·기능을 지어내지 않았는지 실물로 재확인. 중요하면 전문가에게.

🗂️ 파일·버전 관리 습관

  • 파일명은 YYMMDD_이름 형식으로 — 시간순 정렬·최신본 찾기가 쉬워져요.
  • 옛 버전은 지우지 말고 _구버전 폴더로 옮겨 보관.
  • 코드는 수시로 커밋 — 되돌릴 저장 포인트를 자주.

실전 문제해결 사례집

앱 3개를 만들며 진짜로 막혔다 뚫린 기록 — 제목을 눌러 펼쳐 보세요!

🙋 사람의 "다른 지시"가 뚫은 사례

AI가 저장소(리포)를 못 만들어요

막힘 AI에게 GitHub 저장소를 만들라고 하니 권한 거부(403)로 실패.

해결 사람이 GitHub 홈페이지에서 1분 만에 직접 만들고 "만들었어"라고 알려줌 → AI가 바로 이어서 작업.

배움 계정·권한이 필요한 일은 사람 몫. 나머지는 전부 AI가 한다 — 역할을 나누면 안 막힌다.

디자인이 엉뚱하게 나왔어요

막힘 새 앱(바코가이드) 첫 화면이 이전 앱(사가미하라) 스타일로 나와 반려.

해결 "내 드라이브의 이 자료를 학습해서 그걸 근간으로 만들어" — 견본을 주는 지시로 손그림 UI 완성.

배움 원하는 결과물의 견본(예시)을 주는 지시가 가장 강력하다.

음성 기능이 5번 연속 실패했어요

막힘 번역기 남/여 음성을 서버로 내보내려 5가지 방법을 시도 — 연결 불가·유료화로 전부 막힘.

해결 사람이 목표를 바꿔줌: "성별 옵션 빼고, 자연스러운 대화체만" → 한 번에 해결.

배움 기술이 계속 막히면 기능을 고집하지 말고 목표를 다시 정하기(피벗).

버전 번호를 8번이나 잘못 썼어요

막힘 v2.9 다음을 v2.10, v2.11…로 8번 연속 오표기(규칙: v2.9 다음은 v3.0).

해결 사람이 발견해 "규칙 위반, 정정해" → 나아가 버전 올리는 전용 스크립트를 만들게 해서 실수 자체가 불가능해짐.

배움 반복 실수는 "조심하자"가 아니라 "실수 못 하게 만드는 장치를 만들어줘"라고 시키기.

오프닝 화면을 4번 갈아엎었어요

막힘 스플래시를 하트→지브리풍→넷플릭스풍→크림톤… 만들 때마다 "이게 아닌데"의 반복.

해결 이후 관례 확립: "후보 시안 2~3개를 그림으로 먼저 보여줘, 고르면 만들자".

배움 큰 디자인은 구현 전에 시안부터 확정 — 총 시간이 훨씬 적게 든다.

내 폰에서만 그림이 안 보여요

막힘 악보 이미지가 AI 화면에선 멀쩡한데 사용자 폰에서만 안 뜸.

해결 사용자가 증상을 제보 → 원인 발견: 남의 사이트 이미지 직접 링크(핫링크)는 차단됨 → 내 저장소에 옮겨 해결.

배움 AI가 못 보는 문제는 사용자 실기기의 제보(스크린샷)가 진단의 열쇠.

🤖 AI가 우회로를 찾아 뚫은 사례

분명 올렸는데 그림이 안 나와요

막힘 파일이 생기기 전에 요청된 "404(없음)" 응답이 캐시에 박제돼, 올린 뒤에도 계속 안 뜸.

해결 주소 뒤에 ?v=버전을 붙여 새 주소로 요청 → 캐시 무력화, 즉시 표시.

배움 주소가 바뀌면 캐시는 무력화된다. 처음부터 붙이면 이 함정 자체가 안 생김.

배포가 몇 분째 멈춰 있어요

막힘 코드를 올려도(push) 자동 배포가 반응 없음.

해결 내용 없는 빈 커밋을 한 번 더 push해 배포를 재시동.

배움 자동화도 가끔 멈춘다 — 콕 찔러주는 방법을 알아두면 당황하지 않는다.

AI 컴퓨터가 사이트 접속을 차단당했어요

막힘 보안 정책 때문에 AI 작업 환경에서 배포된 사이트·외부 자료에 접근 불가(403).

해결 ① 라이브 확인은 사용자 폰으로 분담 ② 접근 가능한 서버(수파베이스 함수)가 대신 접속해서 결과만 받아오는 우회 개발.

배움 내가 못 가는 곳은 갈 수 있는 친구(서버)에게 부탁한다.

번역이 뒷부분을 잘라먹어요

막힘 문장 끝에 마침표가 없으면 구글 번역이 뒷절을 통째로 삭제하는 버그.

해결 번역 전에 몰래 마침표를 붙였다가, 결과에서 다시 떼는 트릭.

배움 버그의 원인을 알면 입력을 살짝 바꿔 피해 갈 수 있다.

같은 숫자가 화면마다 달라요

막힘 출발까지 남은 날(D-day)이 위젯마다 D-50, D-49로 제각각 — 계산식이 두 개였음.

해결 계산 함수를 하나만 두고 모든 화면이 그걸 쓰게 통일.

배움 같은 값은 한 곳에서만 계산한다 — 프로그래밍의 황금률.

손글씨를 옮겨 적으니 오타가 나요

막힘 수험 노트를 글자로 옮기니(OCR) 원문이 왜곡됨 — 시험 앱이라 오타는 치명적.

해결 옮겨 적기를 포기하고 원본 스캔 이미지를 그대로 보여주는 방식으로 전환.

배움 정확성이 생명이면 변환하지 말고 원본을 보여주기.

🧭 막혔을 때 이 순서로 (정리 공식)

  • 에러 메시지를 그대로 복사해 붙여넣고 "고쳐줘".
  • ② 몇 번을 해도 안 되면 목표를 다시 말해주기 — "이 방식 말고, 결국 내가 원하는 건 ○○야".
  • ③ 계정·권한·결제 문제면 사람이 직접 하고 결과만 알려주기.
  • ④ 같은 실수가 반복되면 "실수 못 하게 만드는 장치(스크립트)를 만들어줘".
  • ⑤ 화면 문제는 내 폰 스크린샷을 보내주기 — AI 화면과 다를 수 있다.
단계·용어는 업계 표준 개념을 비개발자 눈높이로 정리한 것이며, 구체 정책·요금·도구는 바뀔 수 있어요. 중요한 결정 전엔 공식 문서를 확인하세요.
저장됐어요 ✓
새 버전이 있어요 — 눌러서 새로고침 ↻