와이어프레임이란?
와이어프레임은 용어는 ‘선(Wire)’과 ‘틀(Frame)’의 합성어로, 선으로 구성된 프레임을 의미한다.
웹/앱 서비스의 화면을 계획하고 디자인할 때 전체적인 레이아웃과 구조를 정의하는 설계 도구다.
와이어프레임은 청사진 역할을 하기 때문에 UX 디자이너에게 매우 유용한 도구다. UX 디자이너는 색상, 글꼴 및 기타 디자인 요소로 완성된 사용자 인터페이스의 전체 모형에 많은 시간을 투자하기 전에 올바른 방향으로 작업하고 있는지 와이어프레임을 통해 확인할 수 있다.
설계가 기대치를 충족하는지를 신속하게 평가하고, 누락된 것이 있는지 판단하고, 실행 가능한 작업을 탐색하고, 인터페이스 요소가 어떻게 조합되는지 확인할 수 있다.
작성하는 이유
- 기획과 디자인의 시각화
초기 기획 아이디어를 시각적으로 표현하여 프로젝트 팀원, 이해관계자, 디자이너, 개발자 등이 동일한 비전을 공유할 수 있도록 한다. - 정보 구조 확립
페이지의 핵심 요소들이 어떻게 배치될지, 콘텐츠나 UI의 흐름이 어떤지 미리 결정하는 데 도움을 주고, 사용자 경험(UX)을 고려한 구조 설계를 가능하게 한다. - 시간과 비용 절약
레이아웃이나 기능적 문제를 미리 발견할 수 있어, 수정이나 피드백을 수월하게 처리함으로써 불필요한 재작업을 줄이고, 개발 전 시간과 비용을 절감할 수 있다.
작성 시 유의사항
- 목적 명확화: 와이어프레임을 작성하기 전에 화면의 목적과 사용자 목표를 명확히 정의해야 한다. 사용자가 원하는 기능을 직관적으로 찾을 수 있도록 설계한다.
- 타겟 이해: 와이어프레임은 최종 사용자의 요구를 반영해야 한다. 사용자 그룹의 행동 패턴과 니즈에 맞게 인터페이스와 네비게이션을 설계한다.
- 명확한 구조: 정보와 기능을 간결하고 체계적으로 배열하여 가독성을 높인다. UI 요소 간의 간격과 크기를 적절히 조절하여 깔끔한 레이아웃을 유지한다.
- 패턴과 규칙 준수: 동일한 기능을 가진 UI 요소는 동일한 위치에 배치하거나 같은 스타일로 표현하여 일관성을 유지한다.
- 피드백 수용: 다양한 팀 구성원(디자이너, 개발자, 기획자)과 이해 관계자로부터 피드백을 받아 구조나 흐름이 올바른지 확인하고 수정한다.
와이어프레임 예시 - 직방
와이어프레임은 서비스를 모르는 사람이 봐도 이해할 수 있을 정도로 상세하게 작성해야 한다고 생각한다. 범위가 커질 것 같아서 간단하게 작성해서 그런지 부족한 느낌이다.. 넘버링하여 설명을 적어놓은 표에 type, default value, text 컬럼을 추가하여 보완하면 좀 더 보기에 편할 것 같다.
서비스 기획 문서를 작성할 때 디자인, 개발하는 입장에서 생각하고 어떤 부분이 필요한지 고려하는 과정이 중요한 것 같다.
'PM 학습 일지' 카테고리의 다른 글
[제로베이스 PM스쿨 29기]OKR 기법 (1) | 2024.09.13 |
---|---|
[제로베이스 PM스쿨 29기]프로토타입 (0) | 2024.09.13 |
제로베이스 PM스쿨 학습 1개월 차 후기 (0) | 2024.09.08 |
[제로베이스 PM스쿨 29기] 프로젝트 이해하기 (2) | 2024.09.08 |
[제로베이스 PM스쿨 29기] 벤치마킹 (0) | 2024.09.08 |