[내일배움캠프] Chapter 2. 서비스기획 입문 - 와이어프레임

<서비스기획 입문>
와이어프레임
웹사이트의 골격이나 애플리케이션의 사용자 인터페이스(UI) 및 핵심 기능을 나타내는 단순한 선과 도형으로 구성된 다이어그램

와이어프레임

 

 Step 1. PM이 와이어프레임을 그리는 이유

 

● 그리는 과정에 "기획이 구체화"

그리는 과정에서 사용자의 UX 흐름 뿐 아니라 백앤드 구조, API 조건, 데이터 흐름까지 고려햐게 됨

● 팀의 커뮤니케이션

와이어프레임은 설득의 도구

"이 화면 왜 이렇게 했어요?"

"이 유저는 여기서 이걸 하려 하고, 이걸 위해선 이 정보 흐름이 필요해서요"

 

Step 2. 와이어프레임 설계 시 주의점

 

● 이쁜 디자인보다, '정보 구조의 흐름'이 더 중요하다

색깔/폰트/아이콘부터 고민 X - 디자인은 디자이너에게

● 한 번에 완벽하게 하려고 함

와이어프레임은 어차피 수정하면서 발전

'잘 그리기'보다 '빨리 그리고 보면서 고치기가 훨씬 중요

● 기능을 나열하는것이 아니라 행동을 설계

모든 요소에 기획 의도가 있어야 함

"이 기능이 왜 여기 있지?", "유저는 이걸 언제 써?" 라는 질문을 끊임없이 던지기

사용자자의 '손'과 '눈'이 동시에 행동하는 UX

 

Step 3. 와이어프레임 설계 단계

 

1. 화면의 목적을 정의한다

▶ "사용자가 어떤 행동을 하길 바라지?" 목표 행동을 정의하자 (why)

기능을 먼저 생각하지 말고, 사용자의 목표 행동을 생각하자

지면	목표 행동
홈	상품탐색
상품 상세	구매
검색	원하는 상품 찾기
장바구니	결제

 

목표 행동을 가로막는 부분이 무엇인지 정의하자

- 사용자 여정에서 어디서 멈추거나 불편해하는가?

지면	이탈 지점
회원 가입	회원 가입 과정의 단계가 너무 긴가?
검색	원하는 검색어를 떠올리기 어려운가?
리뷰	최소 글자수가 너무 많은가?

 

▶ 목표 행동에 오기까지의 핵심 유저 플로우 짜기

결제 완료 페이지(예시)

- 목표행동 - 결제가 완료되었음을 안내한다

- 유저플로우 생각 x - "결제 완료 메세지만 보여주면 되겠지?"

- 유저플로우 생각 o - "결제 완료 화면에 이런 정보들이 필요하겠다"

유저 플로우	사용자가 떠올릴 수 있는 질문	결제 완료 화면에 반영해야 할 요소
1. 장바구니 진입 후 원하는 상품 선택	어떤 걸 샀더라?	결제한 상품 정보
2. 결제 수단, 배송지 입력	언제 도착하지?	예상 배송이ㄹ, 결제 금액
3. 결제 완료 화면	잘 결제됐나?	결제 성공 및 실패 메시지
4. 추가 탐색 혹은 종료	이제 뭐하지?	이후 행동 안내
5. 배송 진행 중	배송 언제오지?	예상 배송일
6. 배송 완료	후기 쓰면 혜택있나>	X (배송 완료 후 작성)

 

 

2. 노출되어야 할 정보를 전부 나열 → 관련 있는 정보끼리 묶고, 우선순위에 따라서 배치

▶ 사용자에게 보여줘야 할 정보를 모두 나열한다

보고 - 판단하고 - 행동하는 순서로 사용자에게 필요한 정보를 떠올리기

- 필요한 정보를 빠짐 없이 나열할 수 있음

- 유저의 행동 전환율을 올리기 위한 정보들을 생각해냄

단계	사용자 심리	설계자가 도와줘야 할 것
1. 인식	"이게 뭐지?"	유저는 이 화면이 뭔지 바로 알아볼 수 있을까?
2. 판단	"이게 괜찮은가?"	선택/비교/결정에 필요한 정보가 충분한가?
3. 행동	"해야겠다"	행동 유도 + 결과 예측이 가능할까?

 

예시 1. 구매화면

단계	사용자 심리	필요한 정보
1. 인식	“이게 어떤 상품이지?”	상품명, 브랜드, 이미지, 설명….
2. 판단	“살 만한 가치가 있나?”	가격, 후기/평점, 적립 포인트….
3. 행동	“이걸 사야겠다”	구매 버튼, 장바구니 버튼….

 

예시 2. 회원가입 화면

단계	사용자 심리	필요한 정보
1. 인식	“회원가입 하라는 거구나”	페이지 제목, 안내문구..
2. 판단	“복잡하면 안 할래…”	간소화한 입력 항목, 회원가입 후 혜택…
3. 행동	“가입하자”	가입 버튼..

 

3. 레이아웃을 설계한다

▶ "우선순위" 에 따라 레이아웃 구조 결정

사용자가 "한 번만 보면 될 것" vs "계속 봐야 할 것" 나눠서 배치

- 한 번만 보면 될 건 위쪽 or 처음 진입 시 (ex.메뉴)

- 계속 참고해야 할 건 고정 or 반복 노출 (ex. 구매 버튼)

첫 화면(스크롤 이전)에 보여지는 정보가 뭔지 선택하기

 

▶ "사용자 행동의 순서"에 따라 레이아웃 구조 결정

이 정보를 보면 다음 행동이 가능해지게 배치하기

- 구매하기 버튼이 중요해도, 상품 정보를 보고나서 구매하기 버튼을 클릭 (항상 하단 고정)

 

▶ 사용자 시선 흐름을 고려하기

모바일은 위 → 아래 흐름, PC는 왼쪽 → 오른쪽 → 아래 (Z패턴) 흐름에 따라 정렬

리스트/텍스트는 F패턴

- 정보가 많고, 스캔하는 화면 (ex. 상품 목록, 게시글 리스트, 콘텐츠형 화면, 뉴스)

 

▶ 클릭 / 입력 항목을 배치할 때, 손가락 도달 범위(Thum Zome) + 입력 최소화!

- 보는 정보와, 클릭/ 입력 항목을 분리해보기

- 주요 CTA는 오른손 엄지 기준 도달 영역에 배치

- 이탈 방지를 위해 입력/클릭은 최소화 + 자동완성/이전 정보 활용하기

- 클릭 / 입력에서는 무조건 사용자가 실수할 케이스를 고려하기

 

Step 4. 다양한 케이스를 고려한 와이어프레임 추가하기

 

▶ 케이스별로 다른 와이어프레임을 그린다

질문	떠올릴 수 있는 예외	예시
사용자의 행동이 실패하면?	실패 시나리오 / 경고 메세지	회원가입 화면 • 이메일 중복 • 비밀번호 기준 안 맞음 • 인터넷 끊김 • 인증 번호 입력 시간 지남
이 정보가 비어있다면? 빈 상태, 누락 상태는 어떻게 보여줄까?	빈 상태, 안내 문구	유저 프로필 화면 ◦ 최근 활동 내역 없음 검색 화면 • 검색 결과 없음
사용자가 일반적인 대상이 아니라면?	권한, 역할, 조건 분기	댓글 화면 • 탈퇴 회원
예상보다 너무 많거나 적다면?	리스트, 첨부, 텍스트 처리	• 첨부파일이 너무 많거나 너무 큼
중간에 서비스가 멈추면?	임시 저장, 복구, 재시도 등	글쓰기 중 앱 닫음 • 회원가입 도중 중단 후 다시 가입