와이어프레임이란?
웹사이트의 골격이나 어플리케이션의 UI 및 핵심 기능을 나타내는 단순한 선과 도형으로 구성된 다이어그램
보통 디자이너의 영역이지만 조직/과제에 따라 PM이 담당할 수도 있는 분야이다.
PM은 키노트나 PPT 등으로 작업하는 경우가 있다고 한다.
와이어프레임을 그리면 그리는 과정에서 기획이 구체화될 수 있고, 팀에서 커뮤니케이션을 원활하게 하기 위해 시각적 자료로 사용할 수도 있다.
와이어프레임 설계 시 주의점
예쁜 디자인보다는, 정보 구조와 흐름 중심이 중요하다.
→ 예쁜 디자인은 디자이너에게 맡기자.
한 번에 완벽하게 하려고 하지 말라.
→ 와이어프레임은 수정하면서 발전하는 것. 잘 그리기보단 빨리 그리고 고치는 게 더 효율적.
기능 나열이 아니라 행동을 설계해야 한다.
→ 모든 요소에 기획 의도가 있어야 한다.
→ 이 기능이 위치하는 이유, 사용 유도 등을 고려해서 시각과 편의성을 챙기는 UX로 생각해보자.
와이어프레임의 설계 단계
화면의 목적을 정의
사용자가 여기서 어떤 행동을 할지 생각해보고, 목표 행동(Why)을 정의해보자.
사용자의 목표 행동을 방해하는 요인이 뭘까 생각해보고, 병목 포인트(Why)를 찾아서 제거해보자.
노출되어야 할 정보를 묶고, 우선순위에 따라 배치
사용자에게 보여줘야할 정보를 모두 나열한다.
→ 보통 화면에 들어갈(띄워줄) 요소들을 생각해서 전부 작성해보자.
관련 정보끼리 그루핑한다.
- 시선 유도: 이미지 & 상품명
- 결정 정보: 가격, 배송, 할인 정보
- 신뢰 형성: 후기 요약, 별점
- 행동 유도: 구매 or 장바구니 버튼
이전/이후 화면을 생각해보면서 맥락의 흐름을 살피자.
→ 보고 판단하고 행동하는 순서로 사용자에게 어떤 정보가 필요할지 생각해본다.
→ 이 흐름에서 사용자가 어떤 것을 원하고 어떤 것을 할지를 미리 짚어보며 화면 간에 어떻게 연결될지를 설계해야 한다.
레이아웃 설계
사용자 행동의 순서에 따라 레이아웃 구조 결정
→ 시선도 고려해보며 어디에 무엇이 배치하면 좋을지 생각해본다.
클릭/입력 항목은 손가락이 닿을 위치를 고려
→ 모바일 환경에서는 특히 손가락이 닿을 위치를 고려해서 편한 위치를 생각해봐야 한다.
→ 입력을 최소화하는 것이 사용자 실수를 줄이고, 귀찮아하지 않는다.
다양한 케이스의 와이어프레임
- 사용자 행동 실패(잘못된 값 입력, 오류 등) → 에러 모달, 토스트 등
- 항목 정보 누락(Null) → 안내 인라인 메시지 등
- 사용자가 일반 대상이 아니라면? (탈퇴 사용자 등) → 권한, 조건 분기 등
- 예상보다 너무 크거나 적다면? (첨부파일 용량 문제 등) → 첨부, 텍스트 처리 등
- 중간에 서비스가 멈추면? (도중 중단, 오류 등) → 임시 저장, 복구, 재시도 등
와이어프레임 도구
종이와 펜
- 러프하게 쉽게 그리기 쉬움
- 즉각적으로 바로 표현 가능
- 디지털 공유가 어려움
- 수정이 어려움
파워포인트/키노트
- 툴이 쉬움
- 간단한 와이어프레임 충분히 그릴 수 있음
- 기능 부족
- 복잡한 인터렉션, 재사용 UI 컴포넌트 관리 어려움
피그마
- 와이어프레임 키트를 사용해 간단히 가져다 쓸 수 있음
- 실시간 공유가 편함
- 디자이너와 협업하기 좋음
- 툴 학습 필요
- 사용할 줄 알면 어디까지 그려야할지 모르겠음
인사이트
와이어프레임 기획은 직접 해본 적이 있어서 익숙한 내용들이었다. 웹앱, 키오스크 대상 서비스로 와이어프레임에서 디자인, 클릭스트림까지는 만들어봤다.
하지만 이런 기획 방법을 알아본 적은 없고, 그냥 가지고 있는 디자인 감각대로 자유롭게 기획했어서 이 기회에 방법들을 알아보는 것 같아 좋았다.
피그마 배우기 어렵다고 하는데… 온갖 그래픽 툴을 써본 나는 피그마는 배운적도 없는데 그냥 썼고(그래서 많은 기능들을 몰랐지만), 어차피 PM으로서 사용하는데 이만하면 괜찮다고 생각한다.
웹디자인 2대 프로그램은 피그마랑 어도비 XD라고 생각하는데… 한국어 언급량 보면 어도비 XD는 한국에서 잘 안 쓰이는 느낌…
둘 다 작년에 한 것인데 오랜만에 피그마에서 캡쳐해 첨부해봤다.
좌측 이미지는 웹디자인 수업 작업물이라, 디자인을 중시했는데 PM으로서 작업할 때는 이것보다 더 단순하게, 팀원들이 파악하기 쉽도록 그려야겠다. 키오스크 대상으로 디자인한 작업물이라 클릭 편의성과 폰트 크기를 고려해서 작업했었다. 다시 보니 상품 페이지의 상단 네비게이션바와 보러가기 버튼을 더 쉽게 누를 수 있도록 수정할 필요가 있어보인다.
우측 이미지는 프로그래밍 관련 수업 작업물이라, 직접 유저플로우, 디자인부터 프론트엔드 코딩(바이브 코딩 도움도 받았다.)까지 한 작업물의 디자인 결과물이다. 팀원들에게 보여줄 필요가 있었고, 본인이 이걸 보고 코딩까지 해야해서 여러 래퍼런스를 보고, 가장 사용자에게 익숙한 UX/UI로 디자인하려고 했었다.
일기 웹앱인데도 불구하고 역시 달력을 악보로 하는 건 너무 익숙하지 않은 디자인이었던 것 같고… (너무 컨셉 위주로 간 것 같다) 화면 하나에 넣은 기능이 너무 많아서 사용자가 복잡해할 것 같은 느낌이 든다. 조금 더 단순화하고, 기능을 줄인 MVP로 했어야 할 것 같은 아쉬움을 느낀다.