수직 슬라이싱

케이크는 층으로 자르지 않습니다

서비스를 만드는 방법은 두 가지입니다.

수평(층별): 모든 화면을 먼저 다 만들고 → 모든 데이터 저장을 만들고 → 모든 연결을 만든다. → 3주 동안 아무것도 "동작"하지 않습니다. 마지막 날 한꺼번에 연결하면 온갖 문제가 터집니다.

수직(조각별): 기능 하나를 화면 + 저장 + 연결까지 끝까지 만들어 동작시킨다. 그 다음 기능도 같은 방식으로. → 첫날부터 뭔가 동작합니다. 매일 커밋할 게 있고, 매일 배포된 주소에서 변화가 보입니다.

케이크를 한 조각 잘라 먹듯 위에서 아래까지 관통하는 조각을 만드는 것, 이것이 수직 슬라이싱입니다.

조각의 크기: 한 번의 대화로 끝나는 것

좋은 조각의 기준:

• AI에게 요청 한 번(길어야 두세 번) 으로 완성된다
• 완성되면 브라우저에서 눈으로 확인할 수 있다
• 완성되면 커밋 하나가 된다
• 30분~1시간 안에 끝난다

"재료 추천 기능"은 조각이 아닙니다. 너무 큽니다. 이렇게 쪼개야 합니다.

재료 추천 기능
├─ 조각 1: 재료 입력창 + 목록에 쌓이기 (화면만, 새로고침하면 사라져도 OK)
├─ 조각 2: 새로고침해도 재료 목록이 남아 있기 (브라우저 저장)
├─ 조각 3: '추천받기' 누르면 고정된 메뉴 3개가 보이기 (가짜 데이터)
├─ 조각 4: 가짜 데이터 대신 AI API가 추천하기 (13강)
└─ 조각 5: 추천 메뉴를 '저장' 누르면 내 목록에 들어가기 (12강)

조각 3이 중요합니다. 가짜 데이터로 먼저 동작시키고 나중에 진짜로 바꾸는 것. 이렇게 하면 화면 문제와 데이터 문제를 분리해서 해결할 수 있습니다.

따라하기: TODO.md 만들기

PLAN.md의 핵심 기능 3개를 각각 3~5개 조각으로 쪼개세요. AI와 같이 하면 빠릅니다.

확인: 조각이 한 줄씩, 괄호 안에 확인 방법이 있는지 보세요. 한 줄이 너무 크면 "이 조각을 둘로 쪼개줘"라고 하세요.

나온 목록을 읽고 순서를 조정하세요. 기준은 "이게 되면 다음에 뭐가 보고 싶지?" 입니다. 마음에 들면 저장합니다.

확인: VS Code에서 TODO.md를 열면 체크박스 목록이 보입니다.

남은 10일의 지도

TODO.md의 조각들을 11~20강에 배치해봅니다. 대략 이렇습니다.

강의	만드는 것
11강 프론트엔드	핵심 화면 조각들 (가짜 데이터)
12강 백엔드	데이터 저장 조각들
13강 API 연동	외부 서비스 연결 조각
14강 인증	로그인
15강 디버깅	지금까지 쌓인 버그 청소
16강 배포	진짜 도메인, 환경변수 정리
17강 피드백	사용자 3명에게 보여주고 고치기
18강 디자인	티 벗기기
19강 자동화	반복 작업 위임
20강 모바일	폰에 설치되는 앱으로

각 강의는 "방법"을 알려주고, 여러분은 그 방법으로 TODO.md의 내 조각을 만듭니다.

조각 하나를 만드는 리듬

앞으로 매일 반복할 리듬입니다.

1. TODO.md에서 조각 하나 고르기
2. 7강 템플릿으로 요청문 쓰기
3. AI에게 보내기
4. 브라우저에서 확인
5. 됐으면 커밋 + push, TODO.md에 체크
6. 안 됐으면 "마지막 커밋 상태로 되돌려줘"(터미널이면 git checkout .) → 요청문 고쳐서 3번으로

한 조각에 세 번 이상 실패하면 조각이 너무 큰 겁니다. 더 잘게 쪼개세요.

오늘의 체크리스트

직접 해보고 눈으로 확인한 것만 체크하세요.

다음 강의

3부 시작. 11강에서 첫 조각들을 실제로 만듭니다. 화면 만들기.