heyviet/wireframe-fundamentals

Wireframe Fundamentals (와이어프레임 기초)

개요

충실도는 확실성에 대응해야 합니다. 검증된 결정보다 더 정교한 디자인을 렌더링해서는 안 됩니다. 와이어프레임의 결과물은 산출물 자체가 아닌 공유된 이해입니다. 와이어프레임은 만들기 쉽고, 변경하기 쉬우며, 버리기 쉬운 스케치/프로토타입 하이브리드로, 누군가 코드를 작성하기 전에 구조적 결함이 드러나도록 설계되어야 합니다.

사용 시기

• 새로운 화면, 기능, 또는 제품을 시작할 때 — 시각 디자인 이전, 코드 이전
• 다음 디자인 산출물의 충실도를 선택하거나, 한 단계 위/아래로 이동할지 결정할 때
• 와이어프레임 방법이나 도구(종이, 화이트보드, 전용 소프트웨어)를 선택할 때
• 바로 정교한 목업으로 건너뛰어 픽셀에 갇혀 있는 팀의 막힘을 해소할 때
• 빌드 시작 전 개발자와 이해관계자가 구조와 흐름에 대해 합의할 때
• 다음의 경우에는 사용하지 마세요: 시각적 다듬기 — 서체, 색상, 브랜드, 모션. 이는 컴프/목업 영역입니다 (동시 발동 스킬: hallmark)
• 다음의 경우에는 사용하지 마세요: 사용자와의 세부 상호작용 검증 — 이를 위해서는 와이어프레임이 아닌 프로토타입이 필요합니다

낮은 충실도가 승리하는 이유

• 정교함은 거짓된 확신을 만듭니다. 현실적으로 보이는 디자인은 모든 검토자에게 "거의 완료"된 것으로 읽힙니다. 피드백이 구조에서 브랜딩으로 이동하고, 승인은 잘못된 축에서 이루어집니다. 명세 → 정교한 프로토타입으로 진행하는 팀은 세 번의 버릴 수 있는 와이어프레임으로 잡을 수 있었던 수개월의 작업을 일상적으로 폐기합니다. 의도적으로 손으로 그린 듯한 와이어프레임 도구의 외관은 정확히 이러한 오해를 방지하기 위해 존재합니다.
• 생략이 핵심입니다. 의도적으로 세부 사항을 남겨두어 관심이 구조, 콘텐츠, 흐름에 집중되도록 합니다. 제품으로 오인될 수 없는 와이어프레임은 구조적 비판을 유도합니다. 그렇지 않은 것은 글꼴 의견을 유발합니다.
• 변경 용이성은 제작 용이성보다 중요합니다. 종이 스케치는 만들기는 빠르지만 수정은 느립니다. 프로토타입은 둘 다 느립니다. 디지털 와이어프레임은 둘 다 빠른 유일한 산출물입니다. 이것이 발산 및 수렴 모두에 사용할 수 있게 만드는 이유입니다.
• 머릿속 이미지는 생각보다 더 흐릿합니다. 아이디어를 외부화하면 머릿속에만 있을 때는 보이지 않던 격차(잊혀진 상태, 누락된 단계, 처리되지 않은 사례)가 드러납니다. 첫 번째 와이어프레임이 누락된 것을 전혀 드러내지 않는다면, 생각한 것이 아니라 복사한 것입니다.
• 볼륨은 낭비가 아니라 방법입니다. 픽사에서는 90분짜리 릴 하나에 약 12,000장의 스토리보드 그림이 필요하며, 영화당 최대 10개의 릴이 제작됩니다. 즉, 애니메이션 시작 전에 최대 120,000장의 그림이 그려집니다(실패를 "학습과 탐구의 표현"이라고 부르는 에드 캣멀). 노마의 르네 레드제피는 그 비율을 명확히 말합니다. 나오는 하나의 놀라운 아이디어마다 들어오는 열 개의 아이디어가 필요합니다. 첫 번째 개념을 출시할 것으로 기대한다면, 그것을 효율성이 아닌 위험 신호로 취급하십시오.

충실도 사다리

레벨	형태	인코딩하는 확실성	용도
No-fi	상자, 화살표, 순서도, 콘텐츠 목록 — UI 요소 없음	문제와 흐름이 아직 알려지지 않음	발견: 옵션, 화면, 콘텐츠 모델 매핑
Low-fi	거친 단색 프레임, 부정확한 선, 자리 표시자 텍스트	후보 구조 형성 중	빠른 발산: 각각 몇 분 만에 여러 레이아웃 개념
Mid-fi	실제 UI 구성 요소, 실제 제목/레이블/CTA, 제한된 팔레트, 로렘 바디 카피	구조가 합의됨; 상호작용이 정제 중	결합 및 정제, 레이아웃/구성 요소 변형, 초기 피드백
Late-phase	Mid-fi + 주석, 화면 간 화살표, 완전한 흐름, 샘플 콘텐츠	구조와 흐름이 확정됨	이해관계자 검토, 개발자 인계 — 단독으로 작동 가능해야 함
Hi-fi	제품과 구별 불가능, 대화형일 수 있음	시각적 + 상호작용 결정이 고정됨	이제 프로토타입/컴프입니다. 와이어프레임이 아닙니다 — 다른 산출물, 다른 규칙

다음 경우에만 한 레벨 위로 이동하십시오: 현재 레벨이 존재하는 이유인 질문에 대한 답이 얻어졌을 때. 즉, 레이아웃 세부 사항 전에 흐름이 검증되고, 구성 요소 선택 전에 레이아웃이 합의되며, 현실성이 추가되기 전에 구조가 승인되었을 때.

다음 중 하나라도 발생하면 한 레벨 아래로 이동하십시오:

• 검토자가 구조 대신 색상, 글꼴 또는 간격에 대해 언급합니다 — 당면한 결정에 비해 산출물이 너무 정교합니다.
• 토론이 현재 화면이 아닌 누락된 기능이나 흐름 순서에 관한 것입니다.
• 개념이 막다른 골목에 이르렀거나 새로운 요구 사항이 추가되었습니다 — 비싼 수리보다 싼 재시작을 선택하십시오.
• 흐름이 합의되기 전에 픽셀을 조정하고 있는 자신을 발견합니다.

이해관계자가 "고충실도 와이어프레임"을 요청하는 경우: 이는 컴프나 프로토타입에 대한 요청입니다. 별도의 산출물로 만드십시오. 와이어프레임을 부풀리지 마십시오. 그렇지 않으면 변경할 수 있는 권한을 잃게 됩니다.

프로세스 전반의 와이어프레임

볼륨은 발산 중에 확장되고 수렴 중에 축소되며, 충실도는 결정이 확정됨에 따라서만 상승합니다. 수렴은 하나의 매끄러운 깔때기가 아닙니다. 작은 수렴/발산 단계를 번갈아 가며(Pugh의 통제된 수렴) 생존자를 평가하면서 새로운 변형이 나타나도록 하십시오.

단계	충실도	와이어프레임 수	종료 기준
발견	No-fi	많은 조각	화면, 흐름, 콘텐츠가 열거됨; 옵션이 매핑됨
정의	Low-fi	≥3개의 별개 개념	팀이 시각적 요소 없이 구조에 대해 논쟁할 수 있음
디자인	Mid-fi	1–2개의 병합된 생존자 + 변형	하나의 구조가 합의됨; 상호작용과 내비게이션이 해결됨
구축/인계	Late-phase	완전한 주석 흐름	개발자가 작성자 없이 빌드할 수 있음

• 발견 — No-fi. 목표: 아이디어를 머리 밖으로 꺼내고, 나타난 것을 사용하여 더 많은 것을 생성합니다. 순서도, 화면 연결 다이어그램, 콘텐츠 자리 표시자. 가장 빠른 도구로 빠르게 움직이십시오. 더 많은 시작 아이디어는 확실히 좋습니다. 여기서 UI 세부 사항을 추가하고 있다면 한 아이디어에 너무 오래 시간을 쓰고 있는 것입니다. 한 걸음 물러서십시오.
• 정의 — Low-fi. 하나의 개념에 수렴하기 전에 문제당 ≥3개의 구조적으로 다른 개념을 생성하십시오. 개념을 그 완성도가 아닌 생성하는 대화로 판단하십시오. 디자인 산출물이 완성된 것처럼 보여야 한다는 무의식적인 규칙을 없애십시오.
• 디자인 — Mid-fi, "결합 및 정제". 이전 라운드에서 가장 좋아하는 것을 단순히 승격시키지 마십시오. 여러 개념의 강점을 병합하고 불편함을 느끼더라도 한 라운드 더 불확실성 속에 머무르십시오. 실제 텍스트와 실제 구성 요소를 도입하고, 세부 사항이 제한되도록 제한된 팔레트를 유지하십시오. 화면 간 내비게이션 및 화면별 상호작용 작업을 시작하고, 구성 요소 수준에서 변형을 만드십시오.
• 구축/인계 — Late-phase. 새로운 대상(자신이 아닌 동료와 이해관계자)에 최적화하십시오. 주석을 추가하고, 화살표로 화면을 연결하고, 워크플로의 모든 화면을 포함시키고, 중요하거나 새로운 상호작용에만 세부 사항을 추가하십시오. 와이어프레임은 작성자 없이도 이해할 수 있어야 합니다. 이 단계의 위험은 집착입니다. 도메인 전문가와 개발자는 여전히 이를 자유롭게 판단하고, 삭제하고, 재정의할 수 있어야 합니다.

좋은 와이어프레임의 조건

와이어프레임을 제품과 얼마나 닮았는지가 아니라 그것이 유발하는 것으로 판단하십시오.

1. 존재하기 전에 세 가지 질문에 답했습니다. 파일 첫 페이지에 다음을 작성하십시오. 누가 이것을 사용하는가(페르소나 또는 구체적인 역할 — "관리자", "기부자")? 그들의 목표는 무엇인가(사용자 니즈로 구성 — 아무도 가입을 원하지 않고, 진행 상황을 저장하기를 원합니다)? 어떤 문제를 해결하는가(현재의 어려움, 경쟁사 격차)? 잘못 정의된 문제에 대한 훌륭한 솔루션은 잘 정의된 문제에 대한 적절한 솔루션보다 못합니다. 이 메모를 건너뛰는 것은 전체 프로세스에서 가장 영향력이 큰 실수입니다.
2. 반복되었습니다. 좋은 와이어프레임은 여러 라운드를 거친 생존자이지, 다듬어진 첫 번째 초안이 아닙니다. 모든 버전을 일회용으로 취급하십시오. 삭제하려는 의지가 품질의 엔진입니다.
3. 격차를 드러냈습니다. 누락된 상태, 단계 또는 사용 사례를 보여준 와이어프레임은 이미 그 가치를 증명했습니다. 개방성은 기능입니다. 그 격차를 메우는 아이디에이션을 촉발합니다.
4. 행동을 유도합니다. 주석을 달고, 의도적으로 영역을 미완성으로 남겨두고, 현재 제품과의 차이점 및 가장 확실하지 않은 영역을 강조하십시오. 세부 사항 예산: 전달 노력이 대상자가 알아야 할 것을 초과하면 중단하십시오. 실패 반응은 "좋아, 그런데 이제 뭐지?"이고, 성공 테스트는 다음 사람이 당신 없이도 그것을 집어 들고 실행할 수 있는 것입니다.

도구 선택

• 유일한 필수 기능: 흐름을 방해하지 않아야 합니다. 올바른 도구는 아이디어가 도착하는 즉시 시각화합니다. 초기 단계: 펜/종이 또는 화이트보드는 소프트웨어와 완전히 경쟁력이 있습니다.
• 소프트웨어를 사용하는 경우, 다음을 요구하십시오: 표준 UI 구성 요소 라이브러리(중/후기 단계 프레임이 개발자가 빌드할 수 있는 것에 매핑되도록) 그리고 미세 조정의 부재를 요구하십시오: 픽셀 치수, CSS 속성, 대화형 동작이 없어야 합니다. 이러한 옵션은 아이디에이션 중 정교함의 유혹입니다.
• 더 강력함이 더 나음을 의미하지는 않습니다. 제약이 속도와 창의성을 모두 높입니다. 실제 제품을 렌더링할 수 있는 도구는 그렇게 하도록 유혹할 것입니다.
• 도구를 선호도가 아닌 단계에 맞추십시오: 개인 발산 → 가장 빠른 것(종이 포함); 그룹 아이디에이션 → 화이트보드(물리적 또는 디지털) 모두가 그릴 수 있도록; 수정, 공유 또는 주석이 필요한 모든 것 → 디지털 와이어프레임 도구; 대화형 기능이 필요한 모든 것 → 와이어프레임을 벗어난 것입니다. 프로토타이핑 도구를 사용하고 명시적으로 알리십시오.
• 팀 참여 테스트: 디자이너만 도구를 작동할 수 있다면 초기 단계에 적합한 도구가 아닙니다. 와이어프레임은 모든 사람(PM, 개발자, 이해관계자)이 만들고 편집할 수 있기 때문에 작동합니다.

필수 컨텍스트

• 어떤 결정이 대기 중인가 — 충실도는 추상적인 것이 아니라 결정에 대해 선택됩니다.
• 무엇이 이미 검증되었는가 vs 아직 열려 있는 것. 충실도는 확실성을 초과할 수 없습니다.
• 누가 다음에 검토하는가, 그리고 그들이 정교함을 무엇으로 읽을 것인가.
• 얼마나 오래 유지되어야 하는가 — 일회용 탐색인가 내구성 있는 참조인가.
• 누가 편집해야 하는가 — 비디자이너가 기여해야 한다면 도구 선택이 좁아집니다.

평가 절차

1. 누가 / 목표 / 문제 메모를 작성하십시오. 할 수 없다면 중단하십시오. 그것이 발견입니다.
2. 대기 중인 결정과 이에 답할 수 있는 가장 낮은 충실도를 명명하십시오.
3. 사다리에 대해 확실성을 확인하십시오: 결정된 것보다 더 완성된 형태로 렌더링된 것이 있습니까?
4. 개념 수를 세십시오. 정의 단계에서 3개 미만이면 충분히 발산하지 않은 것입니다.
5. 받고 있는 피드백을 읽으십시오. 글꼴이나 색상에 대한 언급은 산출물이 너무 정교하다는 것을 의미합니다. 한 레벨을 낮추십시오.
6. 아이디에이션 중에 도구가 픽셀 또는 CSS 미세 조정을 제공하지 않는지 확인하십시오.
7. 공유하기 전에 당신 없이도 작동하는지 확인하십시오.

출력 형식

결정 대기: <이 아티팩트가 답해야 할 것>
누가 / 목표 / 문제: <세 가지 답변>
충실도: <레벨> — 확실성이 <검증된 것>이므로
탐색된 개념: <n>개 (정의 단계에서 ≥3)
도구: <선택> — 이유: <속도 / 편집 가능성 / 누가 기여해야 하는지>
다음 레벨 조건: <위로 이동을 가능하게 하는 조건>

빠른 참조

상황	규칙
새 기능 또는 제품	No-fi/Low-fi로 시작; 수렴 전에 ≥3개의 별개 개념
어떤 충실도를 사용할지 확실하지 않음	충실도를 확실성과 일치; 의심되면 더 낮게
피드백이 글꼴/색상에 관한 것	산출물이 너무 정교함 — 충실도 한 단계 낮춤
구조가 합의되고 상호작용 정제 중	Mid-fi로 이동: 실제 구성 요소, 실제 레이블, 제한된 팔레트
"실제처럼 보이게" 요청	별도의 컴프/프로토타입; 와이어프레임을 절대 부풀리지 않음
개발자에게 인계	Late-phase: 주석, 화살표, 완전한 흐름, 단독 작동
첫 번째 아이디어가 승자처럼 느껴짐	위험 신호 — 다른 9개를 생성하십시오
첫 번째 라운드 완료, 하나의 선호 개념	여러 개념에 걸쳐 결합 및 정제; 잠그기 전에 한 번 더 발산
후기에 얼마나 많은 세부 사항을 추가할지	중요하거나 새로운 상호작용에만; 수확 체감 지점에서 중단
무엇이든 그리기 전에	1페이지에 누가 / 목표 / 문제를 작성
도구 선택	흐름을 방해하지 않는 가장 빠른 것; 구성 요소 라이브러리, 미세 조정 옵션 없음
비디자이너가 기여를 원함	그들에게 도구를 건네십시오 — 낮은 충실도는 모든 사람이 그릴 수 있는 면허입니다
검토자가 "이게 최종 디자인입니까?"라고 물음	충실도가 잘못 보정됨 — 산출물을 거칠게 하거나 검토를 다시 구성
초기 사용자에게 개념 보여주기	Low/Mid-fi는 구조와 흐름 질문에 적합; 프로토타입은 상호작용 세부 사항에만
코드 시작 후 프로젝트가 흔들림	와이어프레임이 싸기에는 너무 늦음 — 코딩하기 전에 다음 변경 사항을 와이어프레임

안티패턴

실수	수정
명세 → 정교한 목업 → 코드, 아이디에이션 없음	≥3개의 Low-fi 개념 탐색; 현실성 투자 전에 구조 테스트
탐색 중 정교화(글꼴, 색상, 픽셀)	하나의 색상, 거친 선, 구조가 승인될 때까지 스타일링 없음
한 라운드 후 선호 개념 승격	여러 개념의 강점 결합; 수렴/발산 번갈아 가며
"고충실도 와이어프레임"	그것은 프로토타입/컴프입니다 — 별도의 산출물로 구축
와이어프레임이 작성자의 설명을 필요로 함	주석, 화면 연결 화살표, 흐름의 모든 단계 포함
다중 화면 흐름의 한 화면만 와이어프레임	진입부터 종료까지 와이어프레임; 격차는 화면 사이에 존재
누가/목표/문제 메모 건너뛰기	첫 번째 상자 전에 페이지 1에 세 가지 답변 작성
후기 단계 와이어프레임에 집착	아이디어의 최종 시험일 뿐, 트로피가 아님 — 전문가가 잘라내도록 함
이해관계자가 브랜딩 승인	낮은 충실도에서 먼저 구조 검토; 의도 여부와 관계없이 충실도는 완료 신호
아이디에이션 중 픽셀/CSS 미세 조정 도구	종이나 구성 요소 전용 와이어프레임 도구로 전환
Mid-fi에서 모든 곳에 로렘 입숨	실제 제목, 레이블 및 CTA; 바디 카피에만 로렘 사용
하나의 개념에 대한 세 가지 시각적 변형	구조(레이아웃, 흐름, 계층)를 변경하고 장식은 변경하지 않음 — 그렇지 않으면 하나의 개념
수렴 전용 깔때기, 재발산 없음	각 절단 후 생존자에 대해 작은 발산 패스 허용(통제된 수렴)
"이해를 돕기 위해" 상호작용성 추가	상호작용성은 프로토타입으로 만듦 — 대신 동작에 주석을 답니다
와이어프레임을 전달물로 취급	이해가 결과물이고, 파일은 수단입니다

동반 스킬

상황	동시 발동
문제 정의

…

[번역을 위해 잘림]