10강: 수직 슬라이싱

한 입씩만 만들기

오늘 끝나면 이런 걸 갖게 돼요. PRD(Product Requirements Document, 제품 요구사항 문서)의 기능을 순서대로 나눈 목록과, 첫 기능을 완성한 저장 지점이 생겨요.

9강에서 프로젝트 규칙을 만들었어요. 이번에는 PRD의 기능을 작고 완성된 단위로 나누는 수직 슬라이싱(Vertical Slicing)을 시작해요.

1단계: PRD에서 첫 조각 고르기

6강에서 만든 PRD.md를 열어 달라고 하세요. 클로드가 핵심 기능을 뽑고, 눈으로 확인하기 쉬운 순서로 정리해 줘요.

현재 프로젝트의 PRD.md를 읽어줘.
핵심 기능 3~5개를 뽑고, 한 번에 하나씩 만들 수 있는 크기로 나눠줘.

눈에 바로 보이는 기능과 간단한 기능을 앞에 두고,
다른 기능이 먼저 필요한 항목은 그 뒤에 배치해줘.
각 기능마다 완료 여부를 눈으로 확인할 기준도 한 줄씩 적어줘.

아직 파일은 수정하지 마. 목록과 추천 순서만 먼저 보여줘.

개인 포트폴리오 사이트라면 아래처럼 나눌 수 있어요.

1. 히어로 섹션(페이지 맨 위 대문 영역): 이름과 한 줄 소개가 보인다.
2. 자기소개 섹션: 소개 글이 보인다.
3. 프로젝트 카드 3개: 카드가 나란히 보인다.
4. 연락처 섹션: 연락처 링크가 열린다.
5. 다크 모드 토글: 버튼을 누르면 화면 색이 바뀐다.

PRD가 없다면 아래 프롬프트로 먼저 만들어요.

개인 포트폴리오 사이트의 PRD를 만들어줘.
핵심 기능 5개와 안 만들 것 3개를 넣어줘.
HTML(웹페이지의 내용과 구조)과 CSS(화면 꾸미기)를 중심으로 쓰고,
다크 모드에만 JavaScript(자바스크립트, 화면에 동작을 더하는 언어)를 써줘.

2단계: 첫 조각만 만들기

이제 1번 기능인 히어로 섹션만 만들어요. 다른 섹션을 함께 만들지 않도록 범위를 분명히 적어 주세요.

개인 포트폴리오 사이트의 첫 기능만 만들어줘.

이번에 만들 것:
이름은 "홍길동", 한 줄 소개는 "AI와 함께 만드는 사람"인 히어로 섹션
배경은 #0a0a0a, 글씨는 #e0e0e0, 포인트 색은 #00e5ff

이번에 하지 않을 것:
히어로 외의 다른 섹션
JavaScript와 외부 라이브러리 사용

index.html과 style.css만 사용하고, 다른 파일은 건드리지 마.
먼저 무엇을 바꿀지 짧게 보여주고 작업해줘.

프롬프트에는 기능 하나만 넣으세요. 클로드가 계획을 보여주면 히어로 외의 작업이 섞이지 않았는지 확인하세요.

3단계: 화면을 확인하고 저장하기

직접 명령어를 칠 필요는 없어요. 클로드에게 만든 화면을 열고 확인할 항목을 알려 달라고 하세요.

방금 만든 히어로 섹션을 브라우저에서 확인할 수 있게 열어줘.
이름, 한 줄 소개, 배경색, 글씨색, 포인트 색이 요청과 맞는지 확인해줘.
문제가 있으면 다른 기능을 추가하지 말고 이 조각만 고쳐줘.

화면이 맞으면 저장해요. 5강에서 배운 Git(깃, 파일의 변경 기록을 저장하는 도구)은 클로드에게 맡기세요.

한 조각 끝났어. 지금 상태 저장해 줘.
바뀐 파일과 저장할 이름을 먼저 보여주고, 비밀번호나 인증 정보가 없는지 확인해줘.
저장 이름에는 "1번 기능: 히어로 섹션 완성"을 넣어줘.
내가 확인하면 저장하고, 저장 기록도 보여줘.

바뀐 파일이 index.html과 style.css뿐인지 먼저 보세요. 이 확인만 직접 하시면 저장 과정은 클로드가 해요.

4단계: 다음 조각으로 넘어가기

첫 조각을 저장한 뒤 자기소개 섹션을 추가해요. 이미 완성한 히어로는 그대로 두는 조건을 넣으세요.

이제 2번 기능인 자기소개 섹션만 추가해줘.

제목은 "About Me"로 써줘.
본문은 아래 문장을 사용해줘.
"안녕하세요! 바이브 코딩으로 새로운 가능성을 탐험하고 있습니다.
코드 한 줄 모르지만, AI와 함께라면 뭐든 만들 수 있다고 믿어요."

기존 히어로 섹션은 바꾸지 마.
아직 만들지 않은 다른 섹션도 추가하지 마.
기존 스타일은 유지하고, 필요한 새 스타일만 더해줘.
작업 전에 바꿀 파일과 내용을 먼저 보여줘.

화면을 확인한 뒤에는 앞의 “한 조각 끝났어. 지금 상태 저장해 줘” 프롬프트를 다시 쓰세요. 저장 이름만 2번 기능: 자기소개 섹션 추가로 바꾸면 돼요.

이 흐름을 나머지 기능에도 반복해요.

1. 기능 하나를 고른다.
2. 그 기능만 만든다.
3. 눈으로 확인한다.
4. 상태를 저장한다.
5. 다음 기능으로 넘어간다.

수직 슬라이싱은 피자를 한 조각씩 먹는 방식이에요

피자 한 판을 도우, 소스, 치즈 순서로 따로 먹지는 않아요. 도우부터 토핑까지 모두 들어 있는 한 조각을 먹고, 맛을 확인한 뒤 다음 조각을 집어요.

수직 슬라이싱도 같아요. 화면만 전부 만든 뒤 기능을 넣는 대신, 기능 하나를 처음부터 끝까지 만들고 확인해요.

이 강의에서는 10분 안에 결과를 확인할 수 있는 크기를 기준으로 삼아요. 눈으로 확인하기 어렵다면 작업 범위를 더 작게 나누세요.

범위를 지키는 세 문장

클로드가 요청하지 않은 곳까지 바꾸지 않도록 아래 세 문장을 상황에 맞게 섞어 쓰세요.

지금은 로그인 기능만 만들어줘.
회원가입과 비밀번호 찾기는 나중에 할게.

style.css만 수정해줘.
index.html은 건드리지 마.

자기소개 섹션을 추가해줘.
기존 히어로 섹션은 유지하고 새 스타일만 추가해줘.

9강에서 만든 CLAUDE.md에 “한 번에 하나의 기능만 수정해”라고 적어 둘 수도 있어요. 다만 규칙서가 작업 범위를 강제로 막지는 않으니, 중요한 조건은 프롬프트에도 다시 적으세요.

이번 강에서 기억할 것

수직 슬라이싱은 기능 하나를 만들고, 확인하고, 저장한 뒤 다음 기능으로 넘어가는 방식이에요. PRD의 핵심 기능을 순서대로 놓으면 첫 조각을 고르기 쉬워져요.

작업 범위가 크면 원인을 찾기도 어려워져요. 10분 안에 확인하기 어렵다면 한 단계 더 나누고, 완성한 조각마다 저장하세요.

이런 분께 추천해요

AI에게 전체 페이지를 한꺼번에 맡겼다가 어디서 잘못됐는지 찾기 어려웠던 분께 알맞아요. PRD는 만들었지만 첫 기능을 고르지 못한 분도 이 순서대로 시작할 수 있어요.

참고 링크

• Git 공식 문서: 기초
• Vertical slice (Wikipedia): 게임 개발에서 쓰는 "플레이 가능한 한 조각" 뜻이 중심이라, 오늘 배운 기능 쪼개기와 완전히 같은 개념은 아니에요. 참고용으로만 보세요.
• Claude Code 공식 문서

다음 강

11강: 프론트엔드 기초에서는 Next.js(넥스트 제이에스, 웹 화면을 만드는 도구)로 화면을 레고 블록처럼 조립해요.

11강으로 넘어가기