10강: 수직 슬라이싱
한 입씩만 만들기
PART 3가 시작됩니다
9강까지 정말 잘 따라오셨어요. PART 1(1–5강)에서 환경을 세팅하고, PART 2(6–9강)에서 기획서(PRD)를 쓰고, 프롬프트를 익히고, 첫 웹페이지도 배포하고, CLAUDE.md로 규칙서까지 만들었어요. 바이브 코딩의 기초 체력이 완성된 거예요.
9강 마지막에 이렇게 말씀드렸죠. "10강에서는 수직 슬라이싱(Vertical Slicing, 기능을 얇게 한 조각씩 잘라서 만드는 방법)을 배워요. '한 번에 전부 만들어줘'가 왜 위험한지, '한 입씩 만들기'가 왜 정답인지 알게 될 거예요."
바로 오늘이에요. PART 3: 본격 개발의 첫 번째 강의예요. 지금부터는 진짜 서비스를 만들기 시작해요. 그 전에, 가장 중요한 습관 하나를 먼저 배울 거예요.
피자 한 판을 어떻게 먹을 건가요?
피자 가게에서 피자 한 판이 나왔어요. 두 가지 먹는 방법이 있어요.
방법 A: 도우(밀가루 반죽)를 한 판 전부 먹고, 그다음 소스를 한 판 분량 다 먹고, 그다음 치즈를 다 먹고, 마지막에 토핑을 다 먹는다.
방법 B: 피자를 한 조각 잘라서, 도우 + 소스 + 치즈 + 토핑이 다 들어있는 그 한 조각을 먹는다. 맛있으면 다음 조각을 먹는다.
방법 A로 먹는 사람은 없죠? 도우만 잔뜩 먹으면 맛도 모르고, 배만 부르고, 토핑까지 도달하기 전에 포기하게 돼요.
그런데 놀랍게도, 뭔가를 만들 때 많은 사람이 방법 A로 작업해요. "전체 화면 레이아웃(화면 구성과 배치)을 먼저 다 잡고, 그다음 기능을 다 넣고, 그다음 디자인을 다 입히자." 이게 바로 수평 슬라이싱(Horizontal Slicing, 레이어별로 전체를 한꺼번에 만드는 방법)이에요. 그리고 이게 바이브 코딩에서 가장 흔한 실패 원인이에요.
방법 B가 수직 슬라이싱이에요. 기능 하나를 처음부터 끝까지 완성하고, 확인하고, 다음 기능으로 넘어가는 거예요. 피자를 한 조각씩 먹는 것처럼요.
수평 vs 수직, 뭐가 다른 건데요?
표로 비교하면 차이가 확실히 보여요.
| 구분 | 수평 슬라이싱 | 수직 슬라이싱 |
|---|---|---|
| 비유 | 도우 전부 → 소스 전부 → 치즈 전부 | 한 조각씩 완성 |
| 작업 방식 | 레이어(층) 별로 전체를 한 번에 | 기능별로 처음부터 끝까지 |
| 확인 시점 | 전부 끝나야 확인 가능 | 기능 하나 끝날 때마다 확인 |
| 에러 발견 | 마지막에 한꺼번에 터짐 | 즉시 발견, 즉시 수정 |
| AI에게 시키면 | "전체 페이지 만들어줘" | "로그인 기능만 만들어줘" |
| 커밋(세이브) | 한참 뒤에야 세이브 | 기능마다 세이브 |
| 실패 비용 | 전부 되돌려야 함 | 한 조각만 되돌리면 됨 |
핵심 규칙이 있어요. "10분 안에 확인 못 하면, 너무 큰 겁니다." 한 번에 시킨 작업을 10분 안에 눈으로 확인할 수 없다면, 그건 AI에게 너무 많은 걸 한꺼번에 시킨 거예요. 더 작게 쪼개세요.
왜 바이브 코딩에서 특히 중요한가요?
바이브 코딩은 AI에게 말로 시키는 거잖아요. 여기서 함정이 하나 있어요. AI는 시키면 뭐든 해주려고 해요. "로그인 페이지, 대시보드(한눈에 현황을 보는 요약 화면), 설정 페이지, 관리자 화면 전부 만들어줘" 하면, 진짜로 전부 만들어요.
문제는 한꺼번에 많이 만들수록 에러도 많이 생긴다는 거예요. 파일 10개를 동시에 수정하면, 어디서 문제가 생겼는지 찾기 어려워요. 마치 요리 10개를 동시 에 하다가 하나가 타버렸는데, 어떤 냄비에서 타고 있는지 모르는 것과 같아요.
반면에, "로그인 기능만 만들어줘. 다른 파일은 건드리지 마" 하고 시키면 어떻게 될까요?
- AI가 수정하는 파일이 1~2개로 줄어요
- 결과를 바로 눈으로 확인할 수 있어요
- 문제가 생기면 방금 바꾼 그 파일만 보면 돼요
- 잘 되면 커밋(세이브)하고 다음으로 넘어가면 돼요
7강에서 배운 "안 할 것"을 말하는 기술, 기억나시죠? "다른 파일은 건드리지 마" 라는 한 줄이 수직 슬라이싱의 핵심이에요. 범위를 제한하는 거예요.
우리는 이렇게 쓰고 있어요
지금 여러분이 읽고 있는 이 AI//STUDY 사이트도 수직 슬라이싱으로 만들어졌어요.
처음에 이 사이트를 만들 때, "홈페이지, 강의 목록, 글 페이지, 사이드바, 검색, 모바일 대응" 을 한꺼번에 만들지 않았어요. 이런 순서로 한 조각씩 완성했어요.
- 1조각: Docusaurus(문서 사이트 생성 도구) 설치 + 기본 페이지 1개 확인 → 커밋
- 2조각: 사이드바 구조 잡기 (글 3개만 넣어서 확인) → 커밋
- 3조각: 다크 테마 + 시안 포인트 색상 적용 → 커밋
- 4조각: 홈 랜딩 페이지 디자인 → 커밋
- 5조각: 모바일 반응형(화면 크기에 맞춰 자동 조절) 대응 → 커밋
매번 한 가지만 바꾸고, 브라우저에서 확인하고, 잘 되면 커밋했어요. 한 조각이 망가져도 바로 직전 커밋으로 되돌릴 수 있었어요. 5강에서 배운 Git 세이브 시스템이 여기서 빛을 발하는 거예요.
실습: PRD에서 기능 뽑고, 하나씩 만들기
6강에서 PRD(기획서)를 만들었죠? 그 PRD를 꺼내서, 수직 슬라이싱을 직접 해볼 거예요.
1단계: 기능 목록 뽑기
6강에서 만든 PRD에는 "핵심 기능 3~5개"가 적혀 있을 거예요. 만약 "개인 포트폴리오(내 작업물을 모아둔 소개) 사이트"를 기획했다면, 이런 기능 목록이 있을 수 있어요.
1. 히어로 섹션 (페이지 맨 위 대문 영역 — 이름 + 한 줄 소개)
2. 자기소개 섹션
3. 프로젝트 카드 3개
4. 연락처 섹션
5. 다크 모드 토글 (밝은/어두운 화면 전환 버튼)
아직 PRD가 없다면, Claude Code 대화창에서 이렇게 시키세요.
개인 포트폴리오 사이트의 PRD를 만들어줘.
핵심 기능 5개, 안 만들 것 3개를 포함해줘.
기술은 HTML + CSS만 사용해.
2단계: 우선순위 정하기
기능 목록이 나오면, 순서를 정하는 게 중요해요. 규칙은 간단해요.
- 눈에 보이는 것을 먼저 (화면에 뭔가 나타나야 동기부여가 돼요)
- 간단한 것을 먼저 (성공 경험이 쌓여야 다음이 쉬워요)
- **의존성(다른 기능이 이걸 필요로 하는 것)**이 있 으면 먼저
위 예시라면 이 순서가 좋아요.
우선순위:
1순위: 히어로 섹션 (가장 간단하고, 바로 눈에 보임)
2순위: 자기소개 섹션 (텍스트만 넣으면 돼서 쉬움)
3순위: 프로젝트 카드 3개 (구조가 좀 더 복잡)
4순위: 연락처 섹션 (링크 연결 필요)
5순위: 다크 모드 토글 (JavaScript 필요, 가장 복잡)
3단계: 1번 기능 만들기
이제 1번 기능만 만들어볼게요. Claude Code를 시작하고, 대화창에 이렇게 입력하세요.
너는 10년차 프론트엔드 개발자야.
나는 코딩 1줄도 모르는 바이브 코더야.
지금부터 개인 포트폴리오 사이트를 만들 건데,
오늘은 1번 기능인 "히어로 섹션"만 만들어줘.
히어로 섹션 내용:
- 이름: "홍길동" (큰 글씨)
- 한 줄 소개: "AI와 함께 만드는 사람"
- 배경: 다크(#0a0a0a), 글씨: 밝은 회색(#e0e0e0), 포인트: 시안(#00e5ff)
안 할 것:
- 히어로 섹션 외의 다른 섹션은 만들지 마
- JavaScript 사용하지 마
- 외부 라 이브러리 사용하지 마
파일: index.html, style.css
코드에 한글 주석 달아줘.
"히어로 섹션 외의 다른 섹션은 만들지 마" 이 한 줄이 핵심이에요. AI의 범위를 딱 한 조각으로 제한하는 거예요.
4단계: 확인하고 커밋하기
파일이 만들어지면 브라우저에서 확인하세요.
클로드 코드 대화창에서
!를 맨 앞에 붙이면 터미널 명령어를 바로 실행할 수 있어요.
# 브라우저에서 확인 (Windows)
! start index.html
# 브라우저에서 확인 (Mac)
! open index.html
히어로 섹션이 잘 보이나요? 이름과 소개가 제대로 나오나요? 잘 되면 커밋(세이브)하세요.
# 파일을 세이브 목록에 담기
! git add .
# 기능 이름으로 세이브
! git commit -m "1번 기능: 히어로 섹션 완성"
커밋 메시지에 기능 이름을 넣는 게 포인트예요. 나중에 "히어로 섹션은 언제 만들었지?" 할 때, 커밋 목록에서 바로 찾을 수 있어요.
5단계: 2번 기능으로 넘어가기
1번이 끝났으니, 2번으로 넘어갈게요.
방금 만든 index.html에 자기소개 섹션을 추가해줘.
자기소개 섹션 내용:
- 제목: "About Me"
- 본문: "안녕하세요! 바이브 코딩으로 새로운 가능성을 탐험하고 있습니다.
코드 한 줄 모르지만, AI와 함께라면 뭐든 만들 수 있다고 믿어요."
안 할 것:
- 히어로 섹션은 건드리지 마
- 아직 만들지 않은 다른 섹션은 추가하지 마
- style.css의 기존 스타일은 수정하지 마 (새 스타일만 추가)
확인하고, 잘 되면 또 커밋이에요.
! git add .
! git commit -m "2번 기능: 자기소개 섹션 추가"
이 리듬을 느끼셨나요? 기능 하나 → 확인 → 커밋 → 다음 기능. 이게 수직 슬라이싱이에요. 피자를 한 조각씩 먹는 거예요.
클로드 코드 터미널에서는 이렇게
전체 흐름을 한눈에 정리해 드릴게요. 일반 터미널에서 프로젝트 폴더를 만들고 시작하세요.
# ── 프로젝트 폴더 만들기 ──
cd ~
mkdir my-portfolio
cd my-portfolio
git init
claude
Claude Code가 열리면, 기능을 하나씩 시켜요.
(1번 기능 프롬프트를 입력 — 위의 "3단계" 참고)
결과를 확인하고 커밋해요.
# 브라우저에서 확인
! start index.html
# 잘 되면 세이브
! git add .
! git commit -m "1번 기능: 히어로 섹션 완성"
바로 다음 기능을 시켜요.
(2번 기능 프롬프트를 입력 — 위의 "5단계" 참고)
확인하고 또 커밋해 요.
! start index.html
! git add .
! git commit -m "2번 기능: 자기소개 섹션 추가"
이 패턴을 5번 반복하면, 기능 5개가 각각 커밋으로 남아있는 포트폴리오 사이트가 완성돼요. 커밋 이력을 보면 이렇게 돼요.
# 지금까지의 커밋 목록 보기
! git log --oneline
a1b2c3d 5번 기능: 다크 모드 토글 추가
e4f5g6h 4번 기능: 연락처 섹션 추가
i7j8k9l 3번 기능: 프로젝트 카드 3개 추가
m0n1o2p 2번 기능: 자기소개 섹션 추가
q3r4s5t 1번 기능: 히어로 섹션 완성
기능마다 세이브 포인트가 있으니까, 5번 기능에서 문제가 생기면 4번 상태로 돌아갈 수 있어요. 5강에서 배운 Git의 진짜 가치가 여기서 나와요.
범위를 제한하는 프롬프트 기술
7강에서 "안 할 것"을 말하는 게 중요하다고 배웠죠? 수직 슬라이싱에서는 이 기술이 더 중요해요. AI에게 범위를 딱 제한해주는 프롬프트 패턴 3가지를 알려드릴게요.
패턴 1: "이것만 만들어줘"
지금은 로그인 기능만 만들어줘.
회원가입, 비밀번호 찾기는 나중에 할 거야.
패턴 2: "이 파일만 수정해줘"
style.css만 수정해줘.
index.html은 건드리지 마.
패턴 3: "기존 코드는 보존해줘"
자기소개 섹션을 추가해줘.
기존 히어로 섹션의 HTML과 CSS는 그대로 유지해.
새로운 스타일만 추가해.
이 3가지 패턴을 조합하면, AI가 엉뚱한 곳을 건드리는 사고를 막을 수 있어요. 9강에서 만든 CLAUDE.md에 "한 번에 하나의 기능만 수정해" 라는 규칙을 넣어두면 더 확실해요.
이번 강에서 기억할 것
핵심만 정리해 볼게요.
-
수직 슬라이싱은 피자를 한 조각씩 먹는 거예요. 도우만 전부 먹고 소스만 전부 먹는 게 아니라, 한 조각에 모든 재료가 들어있는 완성된 형태로 하나씩 먹는 거예요. 기능 하나를 처음부터 끝까지 완성하고, 확인하고, 다음으로 넘어가세요.
-
10분 안에 확인 못 하면 너무 큰 거예요. AI에게 시킨 작업을 10분 안에 눈으로 확인할 수 없다면, 더 작게 쪼개세요.
-
"다른 파일은 건드리지 마"가 마법의 한 줄이에요. AI의 작업 범위를 제한하면 에러가 줄고, 문제가 생겨도 원인을 바로 찾을 수 있어요.
-
기능 하나 완성 = 커밋 하나예요. 5강에서 배운 Git 세이브를 여기서 실전으로 쓰는 거예요. 커밋 메시지에 기능 이름을 넣으면 나중에 이력 추적이 쉬워요.
-
PRD의 기능 목록이 슬라이싱의 출발점이에요. 6강에서 만든 기획서에 적힌 기능 목록을 우선순위대로 정렬하고, 1번부터 하나씩 만들어가세요.
다음 강에서는 11강: 프론트엔드 기초를 다뤄요. 지금까지 HTML + CSS로 만들었는데, 진짜 서비스를 만들려면 프레임워크(Framework)라는 도구 묶음이 필요해요. Next.js라는 프레임워크로 한 단계 더 올라가 볼 거예요. 레고 블록으로 화면을 조립하는 방법을 배워요.
이런 분께 추천해요
수직 슬라이싱은 "AI에게 한꺼번에 시켰다가 엉망이 된 경험이 있는 분"을 위한 해결책이에요.
- "전체 페이지 만들어줘" 했더니 에러 투성이가 된 분 -- 한 조각씩 시키면 에러가 줄고, 생기더라도 바로 잡을 수 있어요.
- 프로젝트가 커지면서 뭘 고쳐야 할지 모르겠는 분 -- 기능별로 커밋해두면, 문제가 생긴 기능만 되돌릴 수 있어요.
- 6강에서 PRD를 만들었는데, 어디서부터 시작해야 할지 모르겠는 분 -- 기능 목록을 뽑고 우선순위를 정하면, 첫 번째 할 일이 바로 보여요.
참고 링크
▸개정 이력1건
- v12026-04-13초판
이 글이 도움이 되었나요?