11장 — 한 조각을 끝까지 완성하라 (Get One Piece Done)

한 줄 요약

레이어별로 수평으로 파지 말고, 프로젝트의 작은 한 조각을 디자인과 코드가 함께 동작하는 상태로 수직 통합해 첫 주 안에 시연 가능한(demoable) 무언가를 만든다.

핵심 내용

한 슬라이스를 통합한다 (Integrate one slice)

프로젝트는 크게 프론트엔드(디자인)와 백엔드(코드) 두 레이어로 볼 수 있다. 화면만 잔뜩 디자인하면 백엔드에 연결되기 전까지 아무것도 동작하지 않는 가설에 머물고, 백엔드 태스크만 잔뜩 끝내도 UI가 없으면 그 비즈니스 로직이 맞는지 판단할 수 없다. 태스크를 많이 끝냈는데 클릭해 볼 “하나”가 없으면 진척을 느낄 수 없다 — 많은 게 done인데 정작 아무것도 done이 아닌 상태다. 대신 한 슬라이스를 골라 통합하면, 팀은 동작이 증명된(혹은 동작하지 않아 재고할 수 있는) 실체를 갖게 된다.

사례: 프로젝트에 클라이언트 초대 (Case study: Clients in projects)

Basecamp 3의 클라이언트 초대 기능은 클라이언트 접근 권한(Client Access), 클라이언트 관리, 콘텐츠별 공개 토글(Visibility Toggle)이라는 여러 부품으로 구성됐다. 디자이너 1명, 프로그래머 1명인 팀은 방향을 잡은 뒤 공개 토글을 첫 통합 지점으로 골랐다 — 데모 영상에 나오고 고객이 가장 많이 쓸, 프로젝트에서 가장 중심적인 UI였기 때문이다. 디자이너는 픽셀 퍼펙트 목업 대신 HTML 템플릿에서 어포던스(affordance)와 배치를 실험했고, 프로그래머는 그동안 피치의 가이드만으로 접근 권한 모델을 스파이크했다. 디자이너가 기본 방향에 확신이 서자 프로그래머가 토글을 콘텐츠 타입 전반에 나타나고 클릭 시 상태가 저장되는 수준까지만 연결했다. 아직 실제 공개 여부를 바꾸진 않았지만 스테이징에서 실데이터로 클릭하고 느껴볼 수 있었다. 시작 약 3일 만에 동작하는 토글을 매니저에게 시연했고, 몇 가지 수정 후 done으로 확정했다. 핵심 조각 하나가 일찍 디자인·구현·시연·확정되면서 팀과 경영진 모두 프로젝트에 확신을 얻었다.

프로그래머는 기다릴 필요가 없다 (Programmers don’t need to wait)

중요한 부품들이 셰이핑에서 이미 정의됐기 때문에, 프로그래머는 디자인을 기다리며 놀지 않는다. 피치에 담긴 방향만으로도 기초적인 모델링 결정과 백엔드 문제에 착수할 수 있다.

픽셀 퍼펙트보다 어포던스 먼저 (Affordances before pixel-perfect screens)

프로그래머가 구현을 시작하는 데 필요한 것은 입력 요소, 버튼, 데이터가 표시될 자리 같은 엔드포인트뿐이다. 이 어포던스가 UI 디자인의 핵심이고, 폰트·색·간격·레이아웃은 어포던스가 코드에 연결된 뒤에 해결하면 된다. 첫 디자인은 시각 디자인이라기보다 브레드보드에 가까울 만큼 투박해도 된다. 겉보기엔 단순해도 그 안에 비즈니스 로직에서 나온 결정들이 반영돼 있다(도착 시각만 묻고 출발 시각은 묻지 않기로 한 결정, 달력형 날짜 선택기 대신 옵션 그룹이 있는 풀다운을 쓴 결정 등). 초기의 가장 큰 불확실성은 동작하는가, 말이 되는가, 구현이 얼마나 어려운가이지 예쁜가가 아니다. 먼저 동작하게 만들고, 그다음에 아름답게 만든다.

다음 단계에 필요한 만큼만 프로그래밍한다 (Program just enough for the next step)

백엔드도 전부 아니면 전무일 필요가 없다. 모델 없이 템플릿만 렌더링하는 컨트롤러, 목데이터가 든 모델 조각처럼 전략적으로 듬성듬성해도 된다. 인터뷰 앱 팀은 민감한 실데이터를 보호해야 했을 때 완전한 로그인 시스템 대신 HTTPAuth로 비밀번호를 하드코딩해, 배우는 것 없는 인증 코드에 시간을 쓰지 않고 아주 일찍 실데이터를 넣어볼 수 있었다. 핵심은 한 번의 큰 핸드오프 대신, 같은 조각 위에서 디자인과 프로그래밍이 어포던스·코드·스타일을 번갈아 쌓아 가는 주고받기를 만드는 것이다.

한가운데서 시작한다 (Start in the middle)

위 사례들의 팀은 로그인부터 만들지 않았다. 흥미로운 문제가 있는 한가운데로 바로 뛰어들고 나머지는 스텁으로 처리했다. 첫 조각을 고르는 기준은 세 가지다. 첫째, 핵심(core)일 것 — 그것 없이는 나머지가 의미 없는 부분. 둘째, 작을 것(small) — 며칠 안에 끝내 추진력을 만들 수 있는 크기. 셋째, 새로울 것(novel) — 핵심이고 작은 후보가 둘이라면 해본 적 없는 쪽을 먼저 해서 불확실성을 제거한다.

실무 포인트

첫 주 목표를 태스크 개수가 아니라 클릭해 볼 수 있는 통합된 슬라이스 하나로 잡는다.
첫 조각은 core·small·novel 세 기준으로 고르고, 로그인·설정 같은 주변부는 스텁 처리한다.
디자이너는 픽셀 퍼펙트 대신 어포던스 수준의 러프한 화면을 먼저 넘긴다.
프로그래머는 디자인을 기다리지 말고 피치 기반으로 백엔드 모델링을 병행한다.
백엔드는 다음 단계 검증에 필요한 만큼만 — 목데이터, 하드코딩된 인증도 초기엔 허용.