4장 — 요소 찾기 (Find the Elements)

원문: Find the Elements — Shape Up

한 줄 요약

appetite와 문제 정의가 갖춰지면, breadboarding(장소·어포던스·연결선)과 fat marker sketch(굵은 펜 스케치)라는 두 기법으로 세부에 빠지지 않고 여러 접근을 빠르게 탐색해 해법의 핵심 요소(elements)를 뽑아낸다.

핵심 내용

적정 속도로 움직이기

수십 가지 접근이 가능하므로 빠르게 넓게 훑어야 한다. 두 가지가 속도를 만든다. 첫째, 방에는 맞는 사람만 — 혼자 하거나, 속기로 대화할 수 있고 솔직하게 아이디어를 넘나들 수 있는 신뢰하는 파트너 한 명. 둘째, 잘못된 세부 수준을 피한다 — 와이어프레임이나 구체적 시각 레이아웃으로 시작하면 불필요한 세부에 붙잡힌다. 이 단계에서 답할 질문은 넷이다: 새 기능이 기존 시스템 어디에 들어가는가, 어떻게 거기 도달하는가, 핵심 컴포넌트와 인터랙션은 무엇인가, 그 다음 어디로 이어지는가.

Breadboarding

전기공학의 breadboard(실제 부품과 배선은 다 있지만 산업 디자인은 없는 프로토타입)에서 빌린 개념. 표시등과 로터리 노브를 넣을지 결정하는 것과, 케이스 재질이나 노브 위치를 논쟁하는 것은 전혀 다른 일이다. 인터페이스도 마찬가지로 시각 디자인 없이 핵심 컴포넌트와 연결만 그린다. 표기법은 세 가지다:

• Places(장소) — 이동해 갈 수 있는 것: 화면, 다이얼로그, 팝업 메뉴
• Affordances(어포던스) — 사용자가 행동할 수 있는 것: 버튼, 필드. 인터페이스 문구도 어포던스다
• Connection lines(연결선) — 어포던스가 사용자를 장소에서 장소로 옮기는 경로

그림 대신 전부 단어로 쓴다. 인보이스 도구에 “Autopay(자동결제)” 기능을 붙이는 예: Invoice 화면(장소)에 “Turn on Autopay” 버튼(어포던스)을 두고 Setup Autopay 화면으로 연결선을 긋는다. 별도 화면인지 모달인지는 정하지 않는다 — 무엇이 무엇에 연결되는가(토폴로지)만 보면 같다. 화면에 뭘 넣을지 적기 시작하면 곧 깊은 질문이 터진다: 카드 정보를 여기서 받나? 그런데 원래 인보이스는 결제된 건가? Autopay 켜기가 이번 청구서도 결제하나? 이런 논의 끝에 접근 자체를 뒤집어 “결제하는 순간에 Autopay 옵션 제공”으로 바꾸면 모호함이 사라진다. 끄는 flow도 검토했는데, 사용자 계정(아이디/비밀번호) 체계를 새로 만드는 건 appetite 초과라, 인보이스 발행자 쪽 고객 상세 페이지에 비활성화 옵션 하나를 넣는 것으로 정리했다. 몇 개의 단어와 화살표만으로 원래 생각 못 한 질문들과 마주하고 빠르게 대안을 오갈 수 있다.

Fat marker sketch

아이디어가 본질적으로 시각적이어서 2차원 배치 자체가 문제라면 breadboarding은 핵심을 놓친다. 이때는 fat marker sketch — 세부를 그리는 것이 아예 불가능할 만큼 굵은 획으로 그리는 스케치를 쓴다. 원래는 굵은 Sharpie 마커로 종이에, 지금은 iPad에서 펜 굵기를 크게 설정해 그린다. 예: Basecamp 투두 리스트에서 사람들이 ”--- Needs testing ---” 같은 가짜 투두를 구분선으로 쓰는 걸 보고 공식 divider 기능을 구상했다. 구분선 위는 “loose” 투두, 아래는 “grouped” 투두라는 러프한 규칙을 굵은 스케치로 잡았다. 이 표기법은 breadboard보다 제약이 약해서 핵심이 아닌 레이아웃 요소(예: 사이드바)에 애착이 생길 위험은 있지만, 너무 이른 와이어프레임보다는 훨씬 낫다. 이 러프한 단계에 이름과 도구를 부여하는 이유는, 우리가 너무 쉽게 잘못된 정밀도로 건너뛰기 때문이다.

요소가 산출물이다 (Elements are the output)

이 단계의 산출물은 구체적 요소 목록이다. Autopay: 기존 결제 화면의 Autopay 체크박스 + 발행자 쪽 비활성화 옵션. To-Do Groups: loose 투두는 위, grouped 투두는 아래, 그룹별 추가 어포던스(안 되면 기존 액션 메뉴로 대체 가능). 캘린더: 2개월 그리드 + 점(스팬 없음) + 아래 agenda 목록. “월간 캘린더”에 비해 극도로 좁고 구체적이다 — 셰이핑이 노리는 바로 그 좁힘이다.

디자이너를 위한 여지 / 아직 전달물이 아니다 / 컨베이어 벨트는 없다

구체적 목업은 “이건 무시해도 돼”라고 말해도 이후 작업자를 편향시킨다(특히 그리는 사람이 상급자일 때). 세부를 빼는 것이 이후 단계의 창의성 공간을 지킨다 — 이것은 스펙이 아니라 게임의 경계와 규칙에 가깝다. 이 시점의 산출물은 여전히 비공개이며, 그 자리에 없던 사람은 해독하기 어려운 게 정상이다. 그리고 아직 베팅도 약속도 하지 않았다 — 언제든 걸어 나올 수 있다. 한 일은 날것의 아이디어를 더 실행 가능하게 만들어 가치를 더한 것뿐이다.

실무 포인트

• 요소 탐색은 혼자 또는 신뢰하는 파트너 1명과, 와이어프레임 없이 시작한다
• flow 문제는 breadboard(장소·어포던스·연결선, 전부 단어)로 그린다
• 시각 배치가 본질인 문제만 fat marker sketch로 — 펜 굵기를 세부가 불가능할 만큼 크게
• flow를 사용 사례에 대입해 끝까지 재생해 보고, 막히는 지점에서 대안 접근으로 점프한다
• 산출물은 화면 그림이 아니라 요소 목록 — 무엇이 들어가고 무엇이 빠지는지
• appetite를 넘는 부속 flow(예: 계정 체계 신설)는 기존 화면의 옵션 하나로 대체할 수 없는지 본다