기획자가 꼭 알아야 할 와이어프레임 제작 3단계

"Your prototype needs a workflow"

프로토타입(Prototype)은 워크 플로우(workflow)를 필요로 합니다.

프로젝트(Project) 개발 계획 단계에서 와이어프레임(wireframes)을 작성하는 것은 일정 단축과 제한적 사고의 틀을 깨는 데 많은 도움이 되기 때문입니다. 그런 까닭에 대부분 와이어프레임을 활용하는 것에 대해서 긍정적입니다.

하지만 모든 화면에 대해 상세한 와이어프레임을 작성하는 것은 많은 시간이 소요되며, 특히 사용성 이슈에 관해 근본적인 해결을 하고자 한다면 더 그렇습니다. 게다가 새로운 팀멤버가 투입된다면, 와이어프레임 작성의 필수적인 세부사항을 이해시키는 것도 많은 시간이 요구되기 때문에 단지 내부 팀원들이나 클라이언트와 공유하는데 그쳐서는 안 될 것입니다.

그래서 와이어프레임 작성을 3단계로 나누어 보도록 하겠습니다. 대부분 앱 개발 과정이 MVC(Model–View–Controller) 원칙에 따르고, 다수의 앱들이 API를 활용함에 따라 모든 단계에서 이러한 용어를 활용하도록 하겠습니다.

개념(Concept)

위의 그림에서 설명하듯이. MVC 기반 애플리케이션을 위한 와이어프레이밍 3단계는 견적(Estimates), 기능(Functionality), 유용성과 디자인(Usability and Design)으로 나누었습니다.

견적	기능	유용성과 디자인
화면 흐름	스크린, 레이아웃, UI 요소	상세 화면, 레이블, UI 요소
모델,컨트롤러,API	동선, 컨트롤러, 레이아웃	레이아웃, 화면 뷰

앱의 섹션, 화면 그리고 기능 정의를 하는 와이어프레임 초안
(First wireframes drafts to define app sections, screens and functionality)

1. 견적 및 앱 구조 초안(Estimates and app architecture draft)

클라이언트는 예산 수립을 위해서, 개발자는 현재 진행 중 이거나 예정된 프로젝트의 작업 일정을 계획하기 위해 대략적인 견적을 필요로 합니다.

현재 버전의 모든 화면들을 신속하게 그려보고, 기본적인 인터랙션과 사용자 행동을 선을 이용해서 표현해 보는 초기 과정은 앱의 전체 스펙을 이해하는 데 도움이 됩니다. 또한, 이 작업은 데이터 모델, 기본 컨트롤러와 API 요건을 규정짓는 데 도움이 됩니다.

2단계: 레이아웃과 엘레먼트 세트
(Second stage: layouts and element sets)

2. 제품 기능(Product functionality)

두 번째 단계는 특정한 엘레먼트 세트를 필요로 하는 화면들을 상세하게 리스트업 하는 것입니다. 사용자 행동 흐름을 재검토하고, 불필요한 요소와 기능들을 제거하고, 화면과 플로우에 맞게 컨트롤러들을 디자인할 차례입니다. 이제, 개발자들은 와이어프레임을 토대로 작업을 시작할 차례입니다. 이 단계에서 동선, 컨트롤러 그리고 기본 레이아웃을 정의할 수 있습니다.

유용성과 디자인 와이어프레이밍 단계(Usability and design wireframing stage)

3. 유용성과 디자인 초안(Usability and design draft)

3단계는 사용성을 정제하는 것과 앱의 룩을 결정하는 것에 집중할 차례입니다. 이 단계의 초기에 디자인 디테일에 너무 집착해서 많은 시간이 소모하지 않도록 주의해야 합니다. 데이터모델과 컨트롤러들 그리고 레이아웃들을 반복해서 검토하는 동안 화면들을 전체적인 뷰와 부분들로 나누어 보도록 합니다.

물론, 모든 단계에서 반복적으로 의문 사항을 찾아내고 개선해 나가야 합니다.

결과적으로 와이어프레이밍은 이러한 과정을 통해 명백한 예측, 시각적인 문서작업, 업무의 방향성 그리고 팀의 모든 구성원이 어떻게 앱이 동작하고 어떻게 컴포넌트들간의 상호 작용할지를 이해하게 해주고 팀 퍼포먼스를 큰 폭으로 성장시키는 것에 그 목적이 있습니다.

원문 링크) Three stages of making wireframes

<번역>

Staff Editor : Eunice Chung | http://www.facebook.com/unee.chung 

※ 본 기사는 웹진 '디자인로그(designlog.org)' 독자와 페이스북 'Design' 페이지 팬들이 디자인 인사이트를 넓히는데 도움을 드리기 위해 해외 디자인 트렌드 매거진과 블로그 기사를 바탕으로 세 분의 Staff Editor가 한국어로 번역하여 제공되고 있습니다.

콘텐츠의 모든 저작권은 원문 링크의 해당 블로그에 있음을 밝혀 둡니다.