[서비스기획] 와이어프레임(Wireframe)의 특징과 작성방법에 대해 알아보자

와이어프레임(Wireframe) 

 

와이어프레임(wireframe)이란

웹·앱의 골격이나 사용자 인터페이스(UI) 및 핵심 기능을 보여주기 위해 선과 도형으로 만든 간단한 형태 또는 프레임이다.

 

 

 

와이어프레임 <출처 : 본인>

와이어프레임은 도구를 이용하여 작성하기도 하고, 필자처럼 손으로 작성하는 방법도 있다.

툴을 사용해서 그리는 것이 더 깔끔한 장점이 있지만, 나는 직접 그리는 것을 선호하는 편이다. 그 이유는 더욱 논리를 작성하는 과정에 집중할 수 있기 때문이다.  

 

 

 

 - 와이어프레임의 특징

•  실제 구현되는 앱이나 웹상에 포함되는 비디오 혹은 이미지, 컬러 등이 들어가지 않기에 실제 구현될 제품의 모습과 다르다.
• 요구사항을 빠르게 반영하여 그려봄으로써 팀원들의 피드백을 쉽고 빠르게 받을 수 있다.
• 아이디어를 와이어프레임으로 구체화시킴으로써 팀원 간의 해석 오류를 줄이기 위해 사용된다.

 

 

 

 

 - 와이어프레임에서 보여줘야 하는 내용은 무엇일까?

 

서비스 시나리오, UX에 집중해야 한다.

 

와이어 프레임은 화면 UI를 디자인하는 단계가 아니기에 화면의 전체적인 레이아웃(구조)과 기능 별 화면 흐름 및 이동, 화면에서 표출되어야 하는 데이터, 컴포넌트, 전체적인 화면의 개수를 파악할 수 있도록 작업해야 한다.

 

[내부 이해관계자들이 중요시하는 정보]
 - 화면의 전체적인 레이아웃 및 구조 / 컴포넌트 / 전체 화면의 개수 → 디자이너 
 - 기능 별 화면 흐름 및 이동, 화면에서 표출되어야 하는 데이터 → 개발자

 

와이어프레임은 기능별로 시나리오를 작성하고, 시나리오 흐름에 맞추어 그리면 되는데,

시나리오를 작성하면 흐름에 맞추어 논리적으로 UX 흐름에서 불필요한 단계가 있는지, 빠지거나 어색한 단계가 있는지 체크할 수 있다. 

 

 

 

 

 - 예를 들어 설명해 보자!

위의 필자가 작성한 와이어프레임을 예시로 '여행코스 등록' 기능을 설명하는 와이어프레임을 작성하고자 할 때,

서비스 시나리오는 아래와 같다.

지역명, 동행자 선택 → 여행코스 선택(1박 2일, 2박 3일) → 여행코스 상세 등록화면 (여행코스 제목, 상세내용 입력 → 해시태그 입력→ 마커선택 → 장소선택(추가) → 순서변경 → 장소삭제 → 등록) 

이처럼, 시나리오를 정리하고 UX를 작성하다 보면 보완이 필요한 화면흐름, 사용자가 필요한 기능 등을 발견할 수 있다. 또한 내부 이해관계자들은 와이어프레임을 검토함으로써 화면을 구성하는 컴포넌트, 데이터, 기능을 사전에 정의할 수 있다.

 

 

 

 

 

- 와이어프레임, 어떻게 작성해야 잘 작성한 걸까?

⭐ 잘 작성된 와이어프레임을 그리기 위해서는 

1. 설계하고자 하는 핵심 기능의 서비스 시나리오를 작성한다.

2. 서비스 시나리오를 기반으로 와이어프레임 초안을 작성한다.
    (작성 시 발견한 이상한 점 혹은 추가적으로 들어가야 할 데이터 등은 빨간색으로 작성한다.)

3. 화면 별 누락된 데이터는 없는지, 필요로 하는 추가적인 기능은 없는지, 상세 화면에서 표출되는 데이터와 등록에 필요한 데이터 사이에 누락된 부분은 없는지, 기능 및 시나리오 흐름의 오류는 없는지 등을 체크하여 수정한다.  

4. 팀원들에게 와이어프레임 수정안을 보여주고 의견을 교환한다. ( 불필요한 단계, 누락된 단계(*오류처리, 예외처리 등 다양하다.), 데이터 수정, 기능 수정 등 )

5. 의견이 반영된 와이어프레임 개선안을 작성한다. 

6. 와이어프레임을 기반으로 메뉴구조, IA, 화면설계서를 작성한다. 

 

 

 

 

↓ 함께보면 좋은 서비스기획 포스팅↓

[서비스기획] 메뉴구조도(Menutree)기획과 작성방법에 대해 알아보자

[서비스기획/UX] User Flow에 대해 알아보자-1(작성방법과 Task Flow, Wire Flow)

[서비스기획/UX] 기획자가 알아두면 좋은 Flow Chart에 대해 알아보자 (작성방법과 기호의 의미까지)