와이어프레임(Wireframe)
와이어프레임(wireframe)이란
웹·앱의 골격이나 사용자 인터페이스(UI) 및 핵심 기능을 보여주기 위해 선과 도형으로 만든 간단한 형태 또는 프레임이다.
와이어프레임은 도구를 이용하여 작성하기도 하고, 필자처럼 손으로 작성하는 방법도 있다.
툴을 사용해서 그리는 것이 더 깔끔한 장점이 있지만, 나는 직접 그리는 것을 선호하는 편이다. 그 이유는 더욱 논리를 작성하는 과정에 집중할 수 있기 때문이다.
- 와이어프레임의 특징
- 실제 구현되는 앱이나 웹상에 포함되는 비디오 혹은 이미지, 컬러 등이 들어가지 않기에 실제 구현될 제품의 모습과 다르다.
- 요구사항을 빠르게 반영하여 그려봄으로써 팀원들의 피드백을 쉽고 빠르게 받을 수 있다.
- 아이디어를 와이어프레임으로 구체화시킴으로써 팀원 간의 해석 오류를 줄이기 위해 사용된다.
- 와이어프레임에서 보여줘야 하는 내용은 무엇일까?
서비스 시나리오, UX에 집중해야 한다.
와이어 프레임은 화면 UI를 디자인하는 단계가 아니기에 화면의 전체적인 레이아웃(구조)과 기능 별 화면 흐름 및 이동, 화면에서 표출되어야 하는 데이터, 컴포넌트, 전체적인 화면의 개수를 파악할 수 있도록 작업해야 한다.
[내부 이해관계자들이 중요시하는 정보]
- 화면의 전체적인 레이아웃 및 구조 / 컴포넌트 / 전체 화면의 개수 → 디자이너
- 기능 별 화면 흐름 및 이동, 화면에서 표출되어야 하는 데이터 → 개발자
와이어프레임은 기능별로 시나리오를 작성하고, 시나리오 흐름에 맞추어 그리면 되는데,
시나리오를 작성하면 흐름에 맞추어 논리적으로 UX 흐름에서 불필요한 단계가 있는지, 빠지거나 어색한 단계가 있는지 체크할 수 있다.
- 예를 들어 설명해 보자!
위의 필자가 작성한 와이어프레임을 예시로 '여행코스 등록' 기능을 설명하는 와이어프레임을 작성하고자 할 때,
서비스 시나리오는 아래와 같다.
지역명, 동행자 선택 → 여행코스 선택(1박 2일, 2박 3일) → 여행코스 상세 등록화면 (여행코스 제목, 상세내용 입력 → 해시태그 입력→ 마커선택 → 장소선택(추가) → 순서변경 → 장소삭제 → 등록)
이처럼, 시나리오를 정리하고 UX를 작성하다 보면 보완이 필요한 화면흐름, 사용자가 필요한 기능 등을 발견할 수 있다. 또한 내부 이해관계자들은 와이어프레임을 검토함으로써 화면을 구성하는 컴포넌트, 데이터, 기능을 사전에 정의할 수 있다.
- 와이어프레임, 어떻게 작성해야 잘 작성한 걸까?
⭐ 잘 작성된 와이어프레임을 그리기 위해서는
1. 설계하고자 하는 핵심 기능의 서비스 시나리오를 작성한다.
2. 서비스 시나리오를 기반으로 와이어프레임 초안을 작성한다.
(작성 시 발견한 이상한 점 혹은 추가적으로 들어가야 할 데이터 등은 빨간색으로 작성한다.)
3. 화면 별 누락된 데이터는 없는지, 필요로 하는 추가적인 기능은 없는지, 상세 화면에서 표출되는 데이터와 등록에 필요한 데이터 사이에 누락된 부분은 없는지, 기능 및 시나리오 흐름의 오류는 없는지 등을 체크하여 수정한다.
4. 팀원들에게 와이어프레임 수정안을 보여주고 의견을 교환한다. ( 불필요한 단계, 누락된 단계(*오류처리, 예외처리 등 다양하다.), 데이터 수정, 기능 수정 등 )
5. 의견이 반영된 와이어프레임 개선안을 작성한다.
6. 와이어프레임을 기반으로 메뉴구조, IA, 화면설계서를 작성한다.
↓ 함께보면 좋은 서비스기획 포스팅↓
[서비스기획] 메뉴구조도(Menutree)기획과 작성방법에 대해 알아보자
메뉴구조도(Menutree)란? 메뉴구조도란 앱/웹 사이트의 메뉴와 구조를 한눈에 파악하여 볼 수 있도록 정리해놓은 문서이다. 웹사이트의 사이트맵을 생각하면 쉽게 이해할 수 있다. 메뉴구조도는
youngplan.tistory.com
[서비스기획/UX] User Flow에 대해 알아보자-1(작성방법과 Task Flow, Wire Flow)
User Flow, Task Flow, UX Flow 등 다양한 용어들이 시스템과 현업에서 사용되면서 모호하고 헷갈렸던 기본 개념에 대해 정리해보고자 한다. 차이점과 더불어 Flow char, User Flow를 작성하는 방법까지 이번
youngplan.tistory.com
[서비스기획/UX] 기획자가 알아두면 좋은 Flow Chart에 대해 알아보자 (작성방법과 기호의 의미까지)
이전포스팅에서는 User Flow에 대해 알아보았다. 이번포스팅에서는 Flow Chart의 기본 개념과 작성방법, 기호의 의미까지 알아보자. Flow Chart (플로우 차트) 플로우 차트(Flow Chart)란 프로세스를 수행하
youngplan.tistory.com
'⭐ 서비스기획' 카테고리의 다른 글
[서비스기획] 앱과 웹의 기본개념과 차이점에 대해 알아보자 (모바일웹, 웹 앱 vs 하이브리드 앱, 네이티브 앱) (0) | 2024.04.19 |
---|---|
[서비스기획] 백오피스, 관리자 화면 기획시 '보안관리 (권한 목록, 롤목록, 접속가능 ip)' 메뉴가 필수인 이유 (1) | 2024.04.04 |
[서비스기획] 기획자가 '알림톡, 앱 푸시 기획'시 알아두어야 할것 2 (카카오톡 알림톡과 친구톡의 차이) (0) | 2024.01.15 |
[서비스기획] 기획자가 '알림톡, 앱 푸시 기획'시 알아두어야 할 것 (기획 항목, 마케팅 활용 동의와 광고성 정보 동의) (0) | 2024.01.12 |
[서비스기획/UX] 기획자가 알아두면 좋은 Flow Chart에 대해 알아보자 (작성방법과 기호의 의미까지) (0) | 2024.01.10 |