와이어프레임과 사용자 흐름은 실무에서 어떻게 사용될까

와이어프레임(Wireframe)

제품을 만들 땐, 먼저 정보의 구조와 흐름, 판단의 우선순위로만 구성된 와이어 프레임을 먼저 만든다.

• 와이어 프레임을 만드는 이유

  • 처음부터 고해상도 비주얼 디자인을 만드는 건 너무 리소스가 많이 들고, 리스크가 큰 일

  • 그보다 정보의 구조와 흐름, 판단의 우선순위를 스케치해서 한 번에 보는 것이 중요함

  • 사용자 경험의 틀! 틀을 먼저 짜!

예쁘게 디자인하기 전에, 먼저 논리적으로 설계해야 해

• 시각적 표현 없이도 사용자 목적이 충족되는지 검토하고

• 기능과 정보의 배치, 흐름, 위계를 시각적으로 정리해보고

• 디자이너 혼자만이 아니라, 기획자·개발자와 의사소통의 도구로서 활용해야 함

와이어프레임을 그리는 순서

1. 사용자 목적과 화면의 역할 정의

• 이 제품 흐름에서 사용자는 어떤 목적을 가지고 있는지 명확하게 적어놓고 시작
• 각 화면에서 사용자는 어떻게 다음 화면들로 넘어갈 수 있는지 표시

2. 필요한 정보와 우선순위 정의

• 각 화면에서 반드시 보여줘야 하는 정보를 메모
• 상품명, 가격, CTA 버튼, 사용자 리뷰 등 정보 묶음 단위로 표시하면 소통이 빨라질 수 있음
• 어떤 정보가 가장 핵심인지 표시

3. 사용자 흐름과 행동유도 점검

• 이 화면에서 어떤 행동을 하게 되는지, 그 흐름이 명확한지 확인
• CTA의 위치, 텍스트, 강조는 행동 유도와 연결되어야 함.

와이어 프레임 설계 실전팁

화면의 맥락부터 정해라

• 이 화면은 어떤 행동 플로우의 일부인가요?

• 이전 화면에서 뭘 봤고, 이 화면에서 어떤 판단을 내려야 하나요?

  와이어프레임 옆에 플로우차트를 같이 두고 보면 더 편하다고

덩어리부터 크게 접근해라

• UI를 작은 것부터 만드는 것이 아니라, 큰 레이아웃 단위부터 접근
• 각 덩어리를 화면에 던져 넣는다는 느낌으로

컴포넌트의 역할을 정확히 명시해라

'좋아요'버튼 컴포넌트의 역할을 메모한 예시

• 와이어프레임은 특성 상 UI가 명확하게 드러나는 형태가 아님
• 따라서 UI를 그려넣을 때는 목적을 명확하게 명시해야 함

여백과 정렬 일단 무시해도 돼

• 기본적인 간격 정도만 신경쓴다면 정확한 여백이나 정렬은 조금 거칠어도 괜찮다고
• 흐름을 이해하고 화면이 해야 하는 일을 확인하기 위해서 만드는 거니, 디자인이 디테일하지 않아도 된다된다

---