5 회 차 가 이 드

앱 고도화 및 AI 활용 사례/가이드 공유

4회차 앱을 이어서 고도화하고, 최신 AI 사례와 도구를 함께 살펴봅니다

📅 7/22(수) 오후 14:00~17:00
수업 전에 읽어보세요

오늘은 고도화와 영감, 두 가지입니다

🎯 오늘의 목표

4회차에서 처음으로 내 앱을 만들어봤어요. 오늘은 그 앱을 실제로 쓸 수 있는 수준까지 끌어올리는 시간입니다. AI가 실무에서 어떻게 쓰이고 있는지 사례도 함께 보면서, 내 앱을 더 발전시킬 힌트를 찾아봐요.

🛠️ 오늘 사용하는 도구

VS Code + Claude Code (4회차와 동일). 새로 설치할 것 없이 바로 시작해요. Claude Code 연결이 안 된다면 강사에게 알려주세요.

💡 미리 생각해오면 좋은 것

4회차 이후 내 앱을 써보거나 개발을 더 진행한 분들은 어디까지 됐는지 확인해오면 좋아요. 아직 못 열어봤더라도 괜찮아요 — 수업 시간에 같이 확인해요.

🎯 오늘의 최소 목표

체크리스트 L1~L2 통과 + 개선점 1개 이상 고치기. 이미 다 됐다면 L3~L6까지 도전하거나 새 기능 1개 추가에 도전해봐요.

오늘 흐름

이렇게 진행됩니다

14:00 ~ 14:10
📋 오프닝 & 현재 상태 확인
4회차 이후 어디까지 왔는지 VS Code로 빠르게 확인
📌 현재 상태 확인 →
14:10 ~ 14:40
🔍 AI 활용 사례 공유
실무 밀착 AX 사례 3개 — 내 앱과 연결되는 포인트 찾기
📌 AI 사례 →
14:40 ~ 15:00
⚡ 2026년 AI 도구 동향 공유
Claude Design, Claude Code 업데이트, Google Stitch
📌 AI 도구 동향 →
15:00 ~ 15:10
☕ 쉬는 시간
15:10 ~ 15:20
📋 개발 체크리스트 안내
내 앱 수준 진단 — 어느 레벨까지 왔는지 확인하고 오늘 목표 설정
📌 체크리스트 →
15:20 ~ 16:50
🚀 고도화 개발 시간
각자 체크리스트 기반으로 앱 고도화 — 강사는 순회하며 AI 질문 코칭
📌 고도화 개발 →
16:50 ~ 17:00
📌 마무리 & 6회차 안내
과제 안내, 다음 주 예고, 강의 평가
⭐ 강의 평가하기 →
수업 시작 전

내 앱, 지금 어디까지 왔나요?

4회차 이후 한 달이 지났어요. 먼저 지금 상태를 빠르게 확인하고 오늘 개발 목표를 잡아봅시다.

🚀 VS Code + Claude Code 시작 루틴

① VS Code 열기 → 4회차에서 만든 프로젝트 폴더 열기
② Claude Code 패널 연결 확인 (왼쪽 사이드바 Claude 아이콘)
③ 프로젝트 루트에서 current_status.md 파일 찾기
④ 아래 프롬프트로 Claude에게 현재 상태 물어보기

현재 상태 확인 프롬프트
current_status.md 파일을 읽고, 지금 어디까지 개발이 됐는지 요약해줘. 완성된 기능, 미완성 기능, 다음에 할 일을 구분해서 알려줘.
Q. current_status.md 파일을 못 찾겠어요
4회차에 GitHub에 push까지 했다면 VS Code에서 프로젝트 폴더를 열면 파일 목록에 보여야 해요.

파일이 없다면 Claude Code에 4회차에 만들던 앱을 이어서 개발하고 싶어. 프로젝트 현재 상태를 파악하고 current_status.md 파일을 새로 만들어줘.라고 요청하면 현재 코드를 읽고 자동으로 만들어줘요.
Q. Claude Code 연결이 안 돼요
① VS Code 재시작 → Claude Code 패널 다시 열기
② 터미널에서 claude --version 입력해서 설치 확인
③ 안 되면 강사에게 알려주세요
영감 받기

"이미 이런 게 만들어졌어요"

여러분이 만든 앱과 비슷한 문제를 AI로 해결한 실제 사례들이에요. 내 앱을 더 발전시킬 힌트를 찾아보세요.

인사 관리 · 성과 평가
SK AX — AI 기반 HR 전 영역 자동화
SK AX (한국) · 2025
🔴 문제 상황
직원 채용·평가·복리후생이 전부 담당자 수작업 의존. 1명 채용에 평균 35일 소요. 평가 시즌마다 HR 담당자 번아웃 반복.
🔵 해결책
채용·육성·평가·복리후생 전 HR 영역에 에이전틱 AI 적용. 서류 심사·성과 요약·리포트 생성 자동화.
💡 내 앱과의 연결
상벌점·조직 관리 앱을 만드는 분들은 "AI가 요약·분류까지 해주는 기능"으로 고도화 가능.
📊 정량적 성과
서류 심사 1만 건 → 4시간 처리 (기존 35일 소요)
성과관리 평가 시간 80% 이상 단축
스케줄링 · 인원 배치
Rotageek — AI 기반 근무 스케줄 자동 배정
Rotageek (영국) · 2006 시작 → 2025 ELMO 인수
→ rotageek.com 직접 보기
🔴 문제 상황
영국 병원 응급실 의사들이 비효율적·불공정한 인력 배치로 의료 서비스 질 저하. 배치 담당자 수작업과 감에만 의존.
🔵 해결책
직원이 앱에 선호 근무 시간·휴가를 입력 → AI가 수요 예측 기반으로 최적 스케줄 자동 배정. 이후 리테일·호스피탈리티로 확장.
💡 내 앱과의 연결
당직·휴가·근무 관리 앱을 만드는 분들의 앱이 작은 버전의 Rotageek이에요. 공정성 문제를 AI로 해결한다는 핵심이 같아요.
📊 정량적 성과
의료진 만족도 향상 + 배치 오류 감소로 의료 서비스 질 개선
2025년 ELMO Group에 인수 — 채용·급여·성과까지 통합 플랫폼으로 성장
공공데이터 · 지도 시각화
AI + GIS 침수 피해 예측 시스템 (한국)
한국재난정보학회 / 환경부 · 2025
→ floodmap.go.kr 직접 보기
🔴 문제 상황
홍수 특보가 대규모 하천 중심. 중소 도시하천은 수위가 위험 수준 도달 시에야 대응. 담당자가 여러 데이터를 수작업으로 취합해 판단.
🔵 해결책
AI + GIS 결합으로 강우·수위 실시간 데이터를 AI가 분석. 침수 예상 시나리오를 지도 위에 자동 시각화. 클릭 하나로 위험 지역 확인 가능.
💡 내 앱과의 연결
해안 취약/미취약 지역 보드를 만드는 분들이 만들고 있는 것과 정확히 같은 결의 시스템. 공공데이터 + 지도 시각화로 의사결정을 돕는다.
📊 정량적 성과
수작업 대비 침수 예측 정확도 향상, 의사결정 시간 대폭 단축
환경부 홍수위험지도(floodmap.go.kr)로 공개 확장 — 지금 바로 접속 가능
2026년 6~7월 동향

AI 도구가 이렇게 바뀌었어요

4회차 이후 한 달 사이에 Claude와 관련 도구들이 크게 업데이트됐어요. 고도화 작업에 바로 쓸 수 있는 것들 위주로 소개합니다.

NEW — 2026.4.17 출시
🎨 Claude Design

텍스트 설명만으로 앱 목업·프로토타입·슬라이드를 만드는 도구예요. Figma 없이, 코드 없이, 대화만으로 UI가 나와요.

Claude Design 접속 방법 & 기본 사용법
접속: claude.ai/design (웹브라우저만 가능, 데스크탑 앱 아님)
조건: Claude Pro 이상 계정

첫 진입 순서
① claude.ai/design 접속
② 역할 선택 (Engineering / Product / Other 등 — 처음 한 번만)
③ New Project 클릭
④ 시작 유형 선택: Prototype(앱 화면) / Slide deck / From Template / Other

사용법
왼쪽에 텍스트로 요청 → 오른쪽 캔버스에 실시간으로 결과 렌더링. 대화로 수정.

좋은 프롬프트 구조 (4가지 요소) 
① 뭘 만드는지 (형식 명시)
② 누가 쓰는지 (사용자)
③ 어떤 내용/기능이 필요한지
④ 분위기/스타일

예시:
"당직 관리 앱의 메인 대시보드 화면을 만들어줘.
사용자는 부대 행정병이고,
오늘 당직자 이름, 내일 예정자, 비상 연락처가
한눈에 보여야 해.
깔끔하고 단정한 다크 톤으로 해줘."
내보내기 옵션: PDF, PPTX, HTML, Canva — 또는 Claude Code로 바로 개발 연결
Claude Design vs VS Code + Claude Code — 뭐가 다른가요?
🎨 Claude Design 💻 VS Code + Claude Code
주요 용도 UI 목업, 프로토타입, 슬라이드 실제 앱 개발, 코드 작성·수정·배포
진입 장벽 낮음 — 브라우저에서 바로 설치 필요, 터미널 사용
결과물 시각적 목업 (HTML/CSS 형태) 실제로 작동하는 앱
배포 가능? HTML 내보내기 후 수동으로 Vercel/Netlify에 올리는 건 가능. 단, Claude Code처럼 GitHub→Vercel 자동 연동은 없음 가능 (GitHub → Vercel 자동 배포)
수정 방식 대화로 수정 요청. 코드 보기는 가능하지만 직접 편집은 불가 대화 + 코드 파일 직접 반영
가장 잘 맞는 상황 기능 추가 전 화면 구조 미리 잡기, 발표 자료 만들기 실제 기능을 만들고 싶을 때 (= 지금 우리)

결론: 이번 5회차처럼 기존 앱을 고도화하는 상황에서는 VS Code + Claude Code가 메인이에요. Claude Design은 "새 기능의 화면 구조를 먼저 시각화해보고 싶을 때" 보조로 쓰면 좋아요.

⚠️ Claude Design 사용량 주의: Research Preview 단계라 주간 사용량 한도가 있어요. 주중에 많이 써두면 한도가 찰 수 있으니 중요한 작업은 남겨두세요.

CLAUDE CODE — 6~7월 주요 변경
⚡ Claude Code가 이렇게 바뀌었어요
기본 AI 모델 교체 (2026.6.30)
BEFORE
Claude Sonnet 4.6
컨텍스트 창 약 20만 토큰
→ 큰 프로젝트는 중간에 기억이 잘림
AFTER
Claude Sonnet 5
컨텍스트 창 100만 토큰
→ 프로젝트 전체 파일을 한 번에 맥락으로 처리. 속도·정확도 모두 향상
/code-review · /verify 실행 방식 변경 (2026.7월)
BEFORE
Phase 작업이 끝날 때마다 Claude가 자동으로 코드 검토를 실행
→ 원하지 않아도 실행되고, 토큰·시간 소모
AFTER
내가 원할 때 /code-review 또는 /verify를 직접 입력해야 실행됨
→ 고도화 테스트 시점에 쓰면 효과적
두 명령어 차이
/verify = "돌아가냐?" — 문법 오류·타입 오류·import 누락처럼 실행 전에 잡을 수 있는 문제 체크
/code-review = "잘 만들었냐?" — 실행은 되는데 버그 가능성·빈 값 처리 누락·보안 허점 등 품질과 개선점 위주
→ 초보자는 /code-review 하나면 충분해요. 두 가지를 다 잡아줘요.
/rewind 기능 추가
BEFORE
/clear로 대화를 지우면 되돌릴 방법이 없었음
→ 잘못된 방향으로 갔을 때 처음부터 다시
AFTER
/rewind 입력 시 /clear 이전 시점으로 대화 복원 가능
→ 개발 중 방향이 틀어졌을 때 안전망
서브에이전트 계층화 (Claude Pro 포함)
BEFORE
Claude가 혼자 순서대로 작업
→ 큰 기능 추가 시 느리고, 중간에 맥락 누락 발생
AFTER
Claude가 스스로 작업을 쪼개서 "자식 Claude"들에게 나눠 맡김
예: 프론트 UI는 A가, 데이터 저장 로직은 B가 동시 작업
→ 복잡한 기능 추가 시 더 빠르고 정확
개발 초반 단계라면
🔍 Google Stitch — 화면 구조 잡기

앱에 새 화면을 추가하고 싶은데 어떻게 생겨야 할지 감이 안 잡힐 때 써보세요. 텍스트 설명만으로 UI 화면을 바로 만들어줘요.

📌 Google Stitch 기본 정보

구글 계정만 있으면 무료. stitch.withgoogle.com 접속 → 앱 설명 입력 → 화면 생성. 2026년 3월 업데이트(Stitch 2.0)에서 한 번에 5개 연결된 화면 동시 생성, Figma·코드로 내보내기 추가.

💡 활용 흐름

Stitch로 "새 기능 화면을 어떻게 구성할지" 먼저 시각화 → 마음에 드는 레이아웃 캡처 → Claude Code에 "이 화면처럼 만들어줘"라고 이미지 붙여넣기

💡 영감 얻기 — 비슷한 서비스 둘러보기

내가 만들려는 앱과 비슷한 기존 서비스를 Stitch에서 참고하는 것도 좋아요. 예를 들어 스케줄 관리 앱을 만든다면 Calendly나 Notion 일정 화면을 보면서 "이 기능은 우리 앱에도 넣으면 좋겠다"는 아이디어가 자연스럽게 생겨요. 기능 구현의 힌트를 얻는 가장 빠른 방법이에요.

고도화 기준

내 앱, 진짜 쓸 수 있는 앱인가요?

지금 앱이 어디까지 왔는지 단계별로 점검하고, 부족한 부분을 채우는 방향으로 개발하세요. 각 단계는 난이도 순이에요 — 내 앱이 통과한 단계부터 확인하고 막히는 단계를 집중 보완하면 됩니다.

✅ 테스트 진행 현황 0 / 40
🔁 테스트할 때 두 가지 시선을 유지하세요

① 만든 나 — 기능이 의도대로 동작하는가
② 처음 쓰는 동기 — 설명 없이도 쓸 수 있는가

화면에 아무 반응도 없는데 뭔가 이상하다 싶을 때 → F12를 눌러 Console 탭의 빨간 줄을 복사해서 Claude에게 붙여넣으세요. 평소엔 안 열어도 괜찮아요.

테스트 준비
🛠 본격 점검 전, 환경부터 세팅
뭔가 이상하면 F12 → Console 탭 빨간 줄을 확인한다
왜? 화면은 멀쩡해 보여도 뒤에서 빨간 에러가 나고 있을 수 있어요. 그게 나중에 진짜 고장으로 이어져요.

방법: 브라우저에서 F12(또는 우클릭 → 검사) → Console 탭. 빨간 글씨가 뜨면 어딘가 문제가 있다는 신호예요.
처음 쓰는 동기 입장으로 아무 설명 없이 써본다
왜? 만든 사람은 사용법을 이미 알아요. 처음 쓰는 동기·선임은 몰라요. 설명 없이 헤매는 지점이 곧 개선할 지점이에요.

방법: 머릿속으로 "나는 처음 쓰는 동기다"라고 정하고, 첫 화면에서 무엇을 해야 할지 감이 오는지 봐요.
테스트용 샘플 데이터를 3~5개 미리 만들어 둔다
왜? 빈 화면만 보면 문제를 못 찾아요. 실제처럼 데이터가 쌓였을 때 어떻게 보이는지 확인해야 해요.

방법: 이름·날짜·숫자 등 샘플을 3~5개 입력해 둬요. 긴 이름, 0, 오늘 날짜 등 다양하게.
Level 1
👁 화면이 제대로 뜨는가 (기초)

기능을 누르기 전에 화면 자체가 온전한지부터 봐요. 깨진 화면 위에서는 어떤 기능도 못 믿어요.

첫 화면이 5초 안에 끊김 없이 다 뜬다
왜? 6개월 쓸 앱인데 열 때마다 오래 걸리면 아무도 안 써요.

방법: 주소를 새로 입력해 처음부터 열어봐요. 빈 화면·로딩만 계속 도는지 확인.
이미지·아이콘이 깨지지 않고 다 보인다
왜? 깨진 이미지 하나만 있어도 대충 만든 앱으로 보여요.

방법: 화면을 위아래로 끝까지 스크롤하며 X표시나 빈 네모가 없는지 봐요.
콘솔(Console)에 빨간 에러가 없다
왜? 화면은 멀쩡해도 숨은 오류가 있으면 특정 조건에서 갑자기 멈춰요.

방법: F12 → Console. 빨간 줄이 있으면 그 문장을 복사해 둬요 (나중에 Claude에게 넘길 재료).
휴대폰 화면 크기에서도 안 깨진다 선택
왜? 부대에서 폰으로 열어볼 수도 있어요. 데스크톱만 맞으면 반쪽이에요.

방법: F12 → 좌상단 휴대폰 모양 아이콘 클릭, 또는 브라우저 창을 좁게 줄여봐요. 글자가 잘리거나 버튼이 겹치는지 확인.
오탈자·어색한 문구가 없다
왜? 부대 앱의 오탈자는 신뢰를 떨어뜨려요. 상관이나 동료에게 보여줄 화면이에요.

방법: 제목·버튼·안내문을 소리 내어 읽어봐요. AI가 넣은 영어 잔재('Submit', 'Cancel' 등)가 남아있는지도 확인.
Level 2
🖱 핵심 기능이 진짜 되는가

핵심은 "하나도 빠짐없이 다 눌러본다"예요. 화면에 보이는 모든 버튼과 링크를 하나씩 손가락으로 짚으며 눌러보세요.

화면의 모든 버튼을 하나도 빠짐없이 눌러봤다
왜? 안 눌러본 버튼은 안 만든 버튼과 같아요. 하나라도 반응 없으면 미완성이에요.

방법: 화면 좌상단부터 순서대로 버튼을 손가락으로 짚으며 전부 클릭. 누른 버튼을 종이에 ✓ 표시하면 빠짐이 없어요.
모든 메뉴·링크가 올바른 곳으로 연결된다
왜? 메뉴 이름과 실제 이동 화면이 다르면 사용자는 길을 잃어요.

방법: 메뉴를 하나씩 눌러 이름대로 맞는 화면이 나오는지, '페이지 없음'이 뜨진 않는지 확인.
핵심 업무 흐름을 처음부터 끝까지 한 번에 통과해본다
왜? 버튼 하나하나는 되는데 이어서 하면 중간에 끊기는 경우가 많아요. 실제 업무는 이어지는 흐름이에요.

방법: 예: '새 항목 등록 → 목록에서 확인 → 수정 → 삭제'를 멈추지 않고 쭉 해봐요. 이게 이 앱의 진짜 사용 시나리오예요.
저장한 내용이 목록/상세에 그대로 나타난다 (등록→조회)
왜? 입력은 됐는데 목록에 안 보이면 사용자는 '사라졌다'고 느끼고 다시 입력해요.

방법: 새 데이터를 등록한 뒤 목록으로 돌아가 방금 넣은 게 보이는지, 눌러서 상세도 맞는지 확인.
수정하면 반영되고, 삭제하면 사라진다
왜? 수정·삭제는 실무에서 매일 쓰는 기능이에요. 등록만 되고 고치질 못하면 못 써요.

방법: 등록한 데이터를 수정 → 목록에서 바뀌었는지 확인. 삭제 → 목록에서 없어졌는지, 새로고침 후에도 없는지 확인.
'취소'·'뒤로가기'를 눌러도 앱이 깨지지 않는다
왜? 사람은 실수로 뒤로가기를 눌러요. 그때 데이터가 엉키거나 흰 화면이 나오면 안 돼요.

방법: 작업 중간에 브라우저 뒤로가기, 취소 버튼을 눌러보고 이전 상태로 잘 돌아가는지 확인.
Level 2+ — 내 앱에 있는 기능만 골라서
⚙️ 실전 업무 시나리오

내 앱에 있는 기능만 골라 시나리오대로 끝까지 따라 해보세요. 해당 없는 항목은 건너뛰어도 돼요.

[검색·필터] 목록에서 원하는 것을 정확히 찾아낸다
왜? 데이터가 쌓이면 스크롤이 아니라 검색으로 찾아요. 검색이 부정확하면 '없다'고 오해해 중복 입력해요.

방법: 데이터를 20개쯤 넣은 뒤 → ① 정확한 단어 ② 일부 글자만 ③ 존재하지 않는 단어 ④ 빈 검색으로 각각 눌러봐요.
[상태 변경] 신청→승인/반려 같은 처리 흐름이 제대로 돈다
왜? 부대 앱의 핵심은 '상태가 바뀌는 것'이에요. 상태가 안 바뀌거나 아무나 바꾸면 업무가 엉켜요. (예: 휴가 신청→승인, 상벌점 부여→확인)

방법: 새 요청 등록(상태=대기) → 승인 눌러 상태가 바뀌나 → 반려도 해보기 → 이미 승인된 걸 또 승인 눌러보기 → 상태별 목록이 잘 나뉘나 확인.
[기한·날짜] 지난 일정·마감이 눈에 띄게 표시된다
왜? 기한 지난 항목이 일반 항목과 똑같이 보이면 놓쳐요. 날짜 처리는 실무에서 사고가 잦은 지점이에요.

방법: 기한이 '지난 것 / 오늘 마감 / 미래' 항목을 각각 만들고 → 지난 것에 빨강·D-day 표시가 되나 → 기한을 과거로 수정하면 반영되나 확인.
[집계·합계] 개수·점수 합계가 항상 정확하다
왜? 숫자가 틀린 앱은 아무도 안 믿어요. 데이터가 바뀔 때마다 합계가 따라와야 해요. (예: 상벌점 총점, 당직 횟수 합산)

방법: 데이터 3개일 때 합계 확인 → 1개 추가하면 합계가 정확히 늘어나나 → 삭제하면 줄어드나 → 0개일 때 합계가 0으로 나오나 확인.
[정렬·페이지] 목록이 길어져도 원하는 순서로 잘 보인다
왜? 6개월 쓰면 목록은 수백 줄이에요. 정렬·페이지가 없으면 원하는 걸 못 찾아요.

방법: 이름·날짜·숫자로 정렬(오름/내림) → 정렬한 뒤 데이터를 추가하면 제자리에 들어가나 → 항목이 많을 때 '더보기'가 동작하나 확인.
[공유·내보내기] 화면 내용이 파일·인쇄물에도 그대로 나온다 (해당 시)
왜? 보고용으로 뽑아야 하는 앱이라면 출력물이 곧 결과물이에요. 화면엔 멀쩡한데 내보낸 파일엔 데이터가 빠지는 경우가 흔해요.

방법: 인쇄·PDF 내보내기 결과가 온전한가 → 공유 링크가 실제로 열리나 확인.
Level 3 — 로그인 기능이 있는 앱만
🔐 로그인·인증 (가장 많이 빠뜨리는 곳)

로그인은 "잘 되는 것"보다 "막혀야 할 때 막히는지"가 훨씬 중요해요. 아래를 전부 시도해보세요.

올바른 아이디·비번으로 로그인하면 들어가진다
왜? 기본 정상 경로. 이것부터 되어야 해요.

방법: 정상 계정으로 로그인 → 원래 보여야 할 화면이 나오는지 확인.
⭐ 틀린 비밀번호를 넣으면 막힌다
왜? 이게 로그인 테스트의 핵심이에요. 틀려도 들어가지면 보안이 완전히 뚫린 것이에요.

방법: 일부러 비번을 틀리게 넣어봐요. 못 들어가고, 안내 메시지가 떠야 정상이에요.
아이디·비번을 빈칸으로 두고 로그인을 눌러본다
왜? 사용자는 실수로 빈칸으로 눌러요. 앱이 멈추거나 이상한 에러가 나면 안 돼요.

방법: 둘 다 비운 채, 한쪽만 비운 채 각각 눌러봐요. '아이디를 입력하세요' 같은 안내가 떠야 좋아요.
로그아웃이 실제로 된다
왜? 공용 PC에서 로그아웃이 안 되면 다음 사람이 내 정보를 봐요.

방법: 로그아웃 → 다시 뒤로가기나 주소 입력으로 내부 화면에 들어가지는지 시도. 다시 로그인 화면으로 튕겨야 정상이에요.
⭐ 로그인 안 한 상태로 내부 주소에 바로 접근해본다
왜? 부대 앱의 가장 흔한 보안 구멍이에요. 로그인 없이도 URL만 알면 내부가 보이면 큰 사고예요.

방법: 로그아웃한 상태에서 내부 페이지 주소(예: /dashboard, /admin)를 주소창에 직접 입력. 로그인 화면으로 튕겨야 정상이에요.
Level 4
🧪 입력값 — 정상 vs 비정상

"이렇게 넣으면 안 되겠지" 싶은 값을 일부러 넣어보는 게 이 단계의 전부예요. 앱이 안내로 막아주면 잘 만든 것이에요.

필수 입력칸을 비운 채 저장을 눌러본다
왜? 이름 없이 저장되면 나중에 누구 것인지 알 수 없는 데이터가 쌓여요.

방법: 필수로 보이는 칸을 비우고 저장 시도. '필수 항목입니다' 안내가 떠야 좋아요.
숫자칸에 글자를, 글자칸에 특수문자를 넣어본다
왜? 점수칸에 'abc', 이름칸에 !@# 가 들어가면 데이터가 오염돼요.

방법: 점수·수량칸에 abc, 이름칸에 !@#$%를 넣고 저장. 걸러지는지 확인.
아주 긴 글(수백 자)을 한 칸에 넣어본다
왜? 누군가는 복사·붙여넣기로 긴 내용을 넣어요. 화면이 깨지거나 잘리면 안 돼요.

방법: 이름칸이나 메모칸에 긴 문장을 반복해 붙여넣고 저장 후 목록에서 어떻게 보이는지 확인.
경계값(0, 음수, 아주 큰 수, 과거/미래 날짜)을 넣어본다
왜? '점수 0점', '-1점', '100000점' 같은 값에서 계산이 틀리는 경우가 많아요.

방법: 숫자칸에 0, -1, 아주 큰 수를, 날짜칸에 과거·미래 날짜를 넣고 결과가 말이 되는지 확인.
같은 걸 두 번 저장(중복 제출)해본다
왜? 저장 버튼을 두 번 누르면 똑같은 데이터가 2개 생기는 흔한 버그가 있어요.

방법: 저장을 빠르게 두 번 누르거나, 저장 후 새로고침으로 재전송해봐요. 목록에 중복이 생기는지 확인.
Level 5
💾 데이터가 살아있는가 (6개월 관점)

2일 만든 앱을 6개월 쓰려면 데이터가 사라지지 않아야 해요. 화면에 잠깐 보이는 것과, 내일 다시 열었을 때 남아있는 것은 완전히 다른 문제예요.

저장 후 새로고침(F5)해도 데이터가 그대로 있다
왜? 새로고침에 사라지는 데이터는 '진짜 저장'이 아니라 화면에만 잠깐 있던 것이에요.

방법: 데이터를 등록한 뒤 F5. 방금 넣은 게 그대로 있으면 정상.
로그아웃 후 다시 로그인해도 내 데이터가 있다
왜? 실제 업무는 오늘 넣고 내일 봐요. 재접속 시 사라지면 못 써요.

방법: 로그아웃 → 브라우저 완전히 닫기 → 다시 열고 로그인 → 데이터 확인.
데이터가 20~30개 쌓여도 목록이 잘 보인다
왜? 6개월 쓰면 데이터는 수백 개가 돼요. 몇 개일 때만 예쁜 앱은 곧 무너져요.

방법: 샘플을 20개 이상 넣어보고 목록이 느려지거나, 화면 밖으로 넘치거나, 스크롤이 안 되는지 확인.
실수로 지운 데이터에 대한 안전장치가 있다
왜? 인사 데이터를 실수로 삭제하면 큰일이에요. 최소한 '정말 삭제할까요?' 확인은 있어야 해요.

방법: 삭제를 눌렀을 때 바로 지워지는지, 확인창이 뜨는지 확인. 없으면 개선 후보로 기록.
Level 6 — 여러 명이 쓰는 앱이라면
👥 분대·소대가 함께 쓸 때

이 앱은 나만 쓰는 것이 아니라 동료들이 실무에 쓰는 도구예요. 여러 사람, 실수, 민감 정보의 관점에서 한 번 더 봐요.

두 사람이 동시에 써도 데이터가 섞이지 않는다
왜? A가 넣은 데이터가 B 화면에 뜨거나, 서로 덮어쓰면 업무가 엉켜요.

방법: 계정 2개(또는 시크릿 창)로 각각 로그인해 동시에 데이터를 넣어보고 섞이지 않는지 확인.
동료가 봐도 되는 정보와 안 되는 정보가 구분된다
왜? 인사 자료·개인 정보 같은 민감 데이터가 아무에게나 보이면 사고예요.

방법: 다른 계정으로 로그인해 내 개인 데이터가 그 사람에게 보이는지 확인.
에러가 나도 사람이 이해할 안내가 뜬다
왜? 영어 에러코드나 흰 화면이 뜨면 동료는 겁먹고 앱을 안 써요.

방법: 일부러 에러를 유발(빈 값·이상한 값)해보고, 나오는 메시지가 사람이 읽을 한글 안내인지 확인.
'사용법을 몰라도' 다음에 뭘 할지 화면이 안내한다
왜? 6개월 쓰려면 나 없이도 동료가 스스로 써야 해요. 빈 화면에 안내가 없으면 못 써요.

방법: 데이터가 하나도 없는 첫 화면에서 '여기 눌러 시작하세요' 같은 안내가 있는지 확인.
버그 발견 후
🔧 AI에게 넘겨 고치는 법

버그를 찾는 것으로 끝이 아니에요. 재현 단계를 적어서 Claude Code에게 그대로 넘기면 훨씬 잘 고쳐줘요. "안 돼요"보다 "이렇게 하면 이렇게 됩니다"가 100배 나아요.

버그 리포트 양식 — Claude에게 넘기는 법
아래 양식을 복사해서 Claude Code에 붙여넣으세요:
버그 내용:
- 무엇을 눌렀나: [예: 저장 버튼]
- 어떤 값을 넣었나: [예: 이름 칸에 빈칸]
- 기대한 것: [예: "필수 항목입니다" 안내]
- 실제로 된 것: [예: 흰 화면이 뜸]
- 콘솔 에러 메시지: [F12 → Console의 빨간 줄 복사]

이 버그를 고쳐줘.
고친 뒤 '같은 단계'를 다시 밟아 확인한다
왜? 고쳤다는 말만 믿으면 안 돼요. 버그를 만든 그 동작을 똑같이 반복해 사라졌는지 봐야 해요.

방법: 수정 후 처음 버그를 냈던 재현 단계를 그대로 다시 실행. 이제 정상이면 체크.
고치면서 '다른 게 망가지지 않았는지' 주변도 확인한다
왜? 한 곳을 고치면 다른 곳이 깨지는 일이 흔해요 ('풍선 효과').

방법: 고친 기능 근처의 버튼·흐름을 다시 눌러보며 멀쩡한지 확인한 뒤 다음으로 넘어가요.
AI 코드 전체 리뷰 받기
/code-review 위 체크리스트 기준으로 내 앱에서 개선이 필요한 부분을 찾아줘. 특히 데이터 저장, 빈 값 처리, 에러 안내 메시지를 집중적으로 봐줘.

⚠️ /code-review는 직접 입력해야 실행돼요. 2026년 7월 업데이트 이후 자동 실행이 아니라 내가 원할 때 입력해야 작동해요.

고도화 시간

내 앱 더 발전시키기

체크리스트 점검이 끝났으면, 이제 실제로 개발을 이어가요. 아래 프롬프트를 참고해서 Claude Code와 대화를 시작하세요.

고도화 방향 제안 받기 (범용)
current_status.md와 prd.md를 읽고, 내 앱에서 지금 당장 추가하면 실제로 더 유용해질 기능 3가지를 추천해줘. 구현 난이도도 쉬움/보통/어려움으로 표시해줘.
버그 수정 요청 (에러 발생 시)
이 에러가 났어: [에러 메시지 전체 그대로] 1) 무슨 뜻인지 쉽게 설명해줘 2) 원인이 뭔지 알려줘 3) 고치는 방법을 알려주고 직접 수정해줘
디자인 개선 요청
현재 앱의 UI를 개선해줘. [Linear / Notion / Stripe]처럼 깔끔하고 여백이 넉넉한 느낌으로 바꿔줘. 기능은 그대로 유지하고 스타일만 개선해줘.
💡 오늘 수업 목표 잡는 법

체크리스트에서 부족한 게 많다면 → 기존 기능 완성도 높이기에 집중하세요.
기본 기능이 잘 돌아간다면 → 새 기능 1개 추가에 도전해보세요.
욕심내서 두 가지 다 하려다 둘 다 못 끝내는 경우가 많아요.

⭐ 5회차 강의 평가

오늘 수업은 어떠셨나요? 솔직한 피드백이 다음 수업을 더 좋게 만듭니다. 1분이면 충분해요!

강의 평가하러 가기 →
5회차 가이드 · 와우디랩 바이브코딩 교육