Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Wireframing
Webdesign

초보자용 와이어프레임 제작 가이드

by
Length:LongLanguages:
This post is part of a series called UX Foundations.
First Steps in Your User Experience Workflow: Nascent UX
A Beginner’s Guide to Wireframing in Omnigraffle

Korean (한국어) translation by Jin Ah Chon (you can also view the original English article)

디자인 진행 과정 전체에서 와이어프레임을 제작하는 단계는 중요합니다. 무엇보다 먼저 디자인의 정보 체계를 잡을 수 있습니다. 그에 맞춰서 여러분이 생각하는 사용자의 정보 처리 방식을 기준으로 해서 레이아웃을 짜기가 편해집니다. 아직 와이어프레임을 만들어 본 적이 없다면 지금 시작해 보세요.

A simple wireframe

와이어프레임은 설계도와 같습니다. 실제로 집 짓는 방법을 생각하기 전에 2차원의 흑백 설계도를 봐야 하지요. 마찬가지로 화면 설계에서도 정보가 흘러가는 방향을 알지 못한 채 포토샵으로  픽셀 레이어(pixel layer)를 만들거나 코드를 작성할 수 없습니다.

한 단계 더 들어가 보면, 사용자가 인터페이스와 상호작용하는 방식을 정하는 데 와이어프레임이 꽤 쓸모 있습니다. 가령 버튼의 여러 상태나 메뉴의 동작을 와이어프레임에 담을 수 있습니다.

a simple example of a wireframe showing a menu hover state this reduces the possibility of miscommunication

디자이너가 색상과 서체를 선택하거나 광고 제목을 만드는 일에서 관심을 내려놓고 레이아웃과 인터페이스에서의 상호작용을 설계하도록 해주기 때문에 와이어프레임은 중요합니다.  저는 클라이언트에게 이렇게 설명하는 것을 좋아합니다. 사용자가 흑백 와이어프레임에서 가야 할 방향을 모르면, 무슨 색상을 사용할지는 절대로 중요하지 않습니다. 버튼이 아무리 번쩍거리거나 밝은 색상이어도 명확해야 합니다.

건물의 초석처럼 값비싼 페인트칠을 하느냐 마느냐를 결정하기 전에 근본적으로 기반이 튼튼해야 합니다.


1단계: 영감 얻기

상세히 들어가기에 앞서 천 마디의 말보다 한 번 보는 게 더 나으므로 일단 I ♥ wirefames를 보겠습니다. 눈으로 쓱 훑어보면 다른 디자이너들이 와이어프레임 제작 과정을 어떻게 진행했는지 눈으로 이해하게 될 것입니다.

I Heart Wireframes

브라우저의 북마크 기능을 활용한 Wirify도 사용해 보세요. 서비스 중인 사이트를 와이어프레임 버전으로 볼 수 있습니다.

cnncom with wirify

여러 디자이너들이나 사이트에서 와이어프레임을 어떻게 제작하고 있는지 꾸준히 관찰하면 와이어프레임이 화면에서 정보를 체계화하는데 얼마나 도움이 되는지를 마음속에 서서히 그리게 될 것입니다.


2단계: 과정 설계

디자인은 고유한 과정이라서 다양한 디자이너들은 와이어프레임을 제작하고 실제 디자인이나 코드로 전환하는 과정에 각각 달리 접근합니다. 그래서 여러분도 자신의 역량을 끌어내며 진행하기에 가장 편한 과정을 찾아야 합니다. 전형적인 진행 과정을 보여주는 도표가 아래에 있습니다.

Wireframes Process

37signals스케치 사용을 옹호하며 곧바로 코드를 작성하는 것으로 잘 알려져 있습니다. 비록 그중에 일부 디자이너들은 진행 과정에서 비주얼 목업(visual mockups)에 참여하기도 하지만요.

저의 경우에는 과정을 어느 정도 간소화하려고 디자인에서 코드 작성까지의 주기를 충분히 거칩니다. 어떤 이들은 생각하지 못한 과정일지도 모르지만, 저는 프로젝트에서 사용할 html/css 프레임워크도 고려합니다.

가령, 저는 Blueprint에서 사이트를 많이 제작했었습니다. 그래서 와이어프레임과 Blueprint 둘 다 12컬럼 그리드로 설정해 놓습니다. 이렇게 하면 프로토타입 제작과 개발하는 시간이 상당히 줄어듭니다. 전체 요소의 너비를 css 스타일시트에 작성하지 않아도 1부터 12컬럼의 너비를 미리 지정하기 때문입니다. 저는 현재 그보다 반응형 디자인을 지원하는 cssgrid를 사용합니다. 하지만 여전히 12컬럼 그리드로 설정합니다. 이 그리드 파일의 포토샵 템플릿을 다운로드할 수 있습니다.

the 12-column cssgrid template

제가 얘기했듯이 진행하기에 편한 과정을 결정하는 것은 여러분의 판단에 달려 있습니다. 때에 따라 가장 효과적인 과정이라고 깨닫기까지 여러 번 시도하기도 합니다. 스케치를 능숙하게 하는 사람들은 아마 와이어프레임 툴을 사용하는 것을 선호하지 않을 수 있습니다. 다른 디자이너들은 디자인을 시작해서 형태나 모양이 잡힐 때까지 단계별 편차를 최소화하거나 반복되는 단계마다 충분히 생각하기 위해 가능한 진행 과정을 많이 거치려고 합니다. 

결국에는 자신이 선호하는 과정을 개발하게 됩니다. 그러나 이 튜토리얼에서는 하나의 예로서 제가 늘 하는 과정을 밟겠습니다. 

제가 와이어프레임 툴로 일러스트레이터를 사용하는 데에는 주된 3가지 이유가 있습니다.

  1. 스타일 - 종류와 오브젝트 스타일을 저장하고 전반적으로 재사용할 수 있습니다. CSS처럼 말이죠.
  2. 다수의 오브젝트를 수정하고 이동하거나 크기를 조절하기가 쉽습니다.
  3. 나중에 포토샵으로 쉽게 전환할 수 있습니다.

그렇지만 저는 다른 툴도 사용합니다. 프로젝트 시나리오에 따라 달라지지요. 다음 단계에서 대중적으로 쓰이는 툴과 장단점에 대해 간추려 얘기하겠습니다.


3단계: 툴 선택

다음은 많이 사용되는 툴입니다. 특정한 순서로 정렬되지는 않았습니다.

Balsamiq

Balsamiq은 그것으로 생산한 와이어프레임이 스케치한 것과 닮아서 유명해졌습니다. 그러한 스케치 형식은 와이어프레임이 완성된 상품이 아니라 진행 중인 산출물임을 단번에 명확히 해줍니다. Balsamiq 역시 재사용 가능한 컴포넌트들이 많이 있는 라이브러리가 있으며, 와이어프레임을 제작하는 데 컴포넌트를 쉽게 드래그 앤 드롭할 수 있습니다.

Sample Balsamiq wireframe from the Balsamiq website

Mac, 윈도우즈, 리눅스에서 활용 가능한 데스크톱 버전을 포함한 거의 모든 플랫폼에서 이 툴을 사용할 수 있습니다. 또한 클라우드에서 작업하는 것을 선호한다면 웹 버전을 사용하면 됩니다. iOS용 iMockups 같은 타사 앱에서도 Balsamiq 내보내기 파일 형식을 지원합니다.

Omnigraffle

과거 Mac에서 인기가 있었던 Omnigraffle에는 재사용 가능한 컴포넌트가 들어있고, 폭넓게 지원되며 사용자가 공헌하는 라이브러리인 Graffletopia가 있습니다.

youll like omnigraffle if you enjoy using beautiful stencils like this one

도표 작업용 애플리케이션으로 개발했기 때문에 Omnigraffle에는 자동으로 만들어지는 레이아웃, 커스텀 오브젝트 스타일 지원, 스마트 가이드와 그래프 툴처럼 복합적인 특징이 있습니다. 이 중에 일부 기능은 어도비 CS 스위트에서도 사용할 수 있습니다. 그렇지만 CS 스위트가 없다면, 상세한 와이어프레임을 제작하는 용도에서 Omnigraffle에는 괜찮은 가치(~$100)가 있습니다.

Axure

거의 와이어프레임 제작 툴의 할아버지이라 부르는 Axure는 최초의 전문가 레벨의 와이어프레임/프로토타입 제작 툴이었습니다. 최근까지만 해도 윈도우즈에서만 사용할 수 있었습니다. 개인적으로 사용 경험이 풍부하지 않지만, 업계 전문가들 사이에 널리 사용되는 툴로 알려져 있습니다.

Flairbuilder

신출내기인 Flairbuilder에서는 인터랙션에 대한 지원이 잘 되어 있습니다.

from show hide to if-else interactions

여기에는 컴포넌트 라이브러리가 있고, 마스터 페이지를 지원하며, 온라인에서 보도록 프로토타입을 내보내는 기능이 있습니다.

온라인 애플리케이션

데스크톱 소프트웨어를 선호하지 않는다면, mockflowhotgloomockingbird 같은 툴이 있습니다.

키노트/파워포인트

Keynotopia는 "여러분이 좋아하는 프레젠테이션 애플리케이션에서 모바일, 웹, 데스크톱 앱 목업용 프로토타입을 매우 빠르게 제작할 수 있는 툴로 바꿔줍니다.  Mac을 쓰지 않는 사용자가 걱정하지 않도록, Keynotopia는 파워포인트 템플릿도 제공하고 있습니다.

모바일 애플리케이션에 대한 와이어프레임이나 프로토타입을 신속히 제작해야 한다면 개인적으로 이 툴을 추천합니다. 다른 적절한 대안으로는 Keynote Kungfu가 있습니다.

어도비 CS

이미 어도비 스위트에 익숙해진 분에게 파이어웍스, 일러스트레이터, 인디자인은 각각 장단점을 갖춘 와이어프레임 제작 툴로 사용될 수 있습니다.

파이어웍스

기본 와이어프레임부터 전체 디자인 산출물까지 디자인 진행 과정 모두 파이어웍스로 작업할 후 있습니다.  파이어웍스는 마스터 페이지(마스터 템플릿에서 편집하면 자식 페이지 전체에 영향을 주는, 재사용 가능한 템플릿으로 생각하세요.)와 요소 라이브러리를 지원합니다. 그리고 파이어웍스를 이용해서 비교적 빨리 상호작용하는 프로토타입을 만들 수 있습니다.

일러스트레이터

제가 사용하기 좋아하는 툴 중의 하나입니다. 제가 일러스트레이터를 잘 다루며, 다수의 디자이너들도 그럴 거라 확신하기 때문입니다.  저는 상호작용이 필요 없는 복잡한 와이어프레임을 신속히 제작하려고 할 때 일러스트레이터로 작업합니다.

다른 툴에 비해 어떤 점이 우수할까요? 편집 가능한 레이어가 포함된 PSD 파일로 내보내는 기능이 있고, 포토샵으로 복사하고 붙여넣는 강력한 기능이 있으며, 마치 CSS처럼 저장, 편집, 재사용 가능한 서체 스타일을 제어하는 타이포그래피가 있습니다. 

인디자인

일러스트레이터와 유사한 장점이 있으나 이보다 더 강력한 타이포그래피 스타일 제어 기능과 마스터 페이지 지원, 그리고 상호작용하는 프로토타입을 만드는 기능이 최근에 생겼습니다.

Have you seen the interactive controls of InDesign

저는 상호작용을 하며 세밀하게 디자인된 다중 페이지 프로토타입을 제작해야 할 때 인디자인을 선택합니다. 최종 디자인용인 포토샵으로 내보내는 기능을 지원하지 못하는 점이 저에게는 단 하나의 취약점입니다.

포토쉐어

"효과적인 프로토타입 제작이 쉬워집니다." 요즘 출시된 9버전에는 새로운 위지위그 팔레트가 들어 있습니다.  확인해 보시죠.


4단계: 그리드 세팅

그리드 시스템에 관한 이론은 많습니다. 너무 깊게 들어가기 전에 저는 그리드 시스템을 "요소들을 배열하는 단순하고 체계화된 방식"이라고 설명하겠습니다.

이 튜토리얼에서는 일러스트레이터를 사용하지만, 어떤 툴이든 사용할 수 있습니다.

먼저 화면 크기를 세팅합니다. 저는 1280 x 900으로 정했습니다. 저의 웹사이트가 모바일 해상도에서 최대 1140 pixel까지 수월하게 늘어나도록 cssgrid를 이용할 것이기 때문이지요.

cssgrid에서 템플릿을 다운로드해서 일러스트레이터 화면에 놓으세요. 

팁:

다운로드 가능한 그리드 템플릿은 엄청 많습니다. 하지만 원하는 디자인에 맞추려 한다면 responsify.it에 있는 템플릿을 확인해 보세요.


5단계: 박스(boxes)로 레이아웃 정하기

박스를 그리드에 그립니다. 방문자에게 보여주고픈 정보의 순서를 왼쪽에서 오른쪽으로, 위에서 아래로 생각해 보세요. 아래 있는 와이어프레임 예제는 요즘 소프트웨어 회사에서 흔히 사용하는 레이아웃입니다.

때론 여러분이 디자인하는 목적과 본질에 따라서 창의적인 레이아웃을 제작할 수 있습니다. 마음속에는 정보의 체계를 유지하면서요. 아래는 저의 클라이언트 중 한 클라이언트에서 제작했던 실제 와이어프레임 예제입니다. 거기서 저는 보편적인 테크놀로지 회사의 웹사이트 레이아웃을 탈피했습니다.  

아래는 블로그 레이아웃입니다. 레이아웃에는 신중히 자리를 잡은 광고 컨테이너와 클라이언트를 위해 자세히 적은 설명이 있습니다.


6단계: 서체를 이용한 정보 체계 정의

박스 배열 방식이 흡족하다면, 정보의 체계화가 잘 되었는지 감 잡도록 콘텐츠의 아주 작은 부분을 넣어봅시다.  경험상 기준은 동일합니다. 흑백 와이어프레임이라 할지라도 잠재 고객에게 전달하고자 하는 정보는 명확해야 한다는 것입니다.

출발점으로서 서로 다른 폰트 크기를 쓰는 방법은 다양한 정보 계층을 차별화하는 데 매우 좋습니다.

이 단계에서는 두려워 말고 테스트해 보세요.  가끔, 내용을 상세히 넣을 때 초기 레이아웃이 그리 효과적이지 않음을 인지할 수 있습니다. 바로 그것이 와이어프레임 제작 과정의 핵심입니다. 여러분이 전달하려는 정보를 가장 좋게 표시하는 방식으로 접근하기 위해 가능한 반복 과정(iterations)을 많이 거치세요. 

아래 예제에서 저는 스크린숏으로 효과를 높이고, 웹사이트에서 시각적으로 중요한 영역을 지정하는데 검은색 박스를 사용했습니다.

7단계: 그레이스케일을 이용한 세부 조정

그레이스케일 색상을 폭넓게 사용하면 컬러 팔레트에서 색상을 고르지 않아도 요소의 시각적인 강도를 결정하는 데 도움이 됩니다. 이후에 본격적으로 디자인 과정에서 유용하게 쓰일 것입니다.


8단계: 고해상도 와이어프레임

선택 가능한 단계입니다. 만일 작업을 점진적으로 나아가고 싶다면 이 단계를 진행해보려고 하겠지요. 와이어프레임의 해상도를 높이는 것은 시각적으로 너무 상세히 다듬지 않고, 가능한 세세한 부분을 많이 추가한다는 의미입니다.  실제 적용할 문구를 와이어프레임에 넣고 어울리는 폰트 크기를 결정하는 작업을 얘기합니다.

색상을 넣기도 하지요.

시각화/코드 작성하는 단계에서 사람들은 밑그림을 그리거나 테스트를 하지 않고, 세부적으로 다듬어가려 한다는 것이 일반적인 생각입니다. 그래도 포토샵에서 하는 본격적인 디자인 작업으로 넘어가지 마시고, 사용하기 편한 와이어프레임 애플리케이션에서 가능한 한 신속하게 반복 주기(피드백 <->와이어프레임 제작)를 수행해 보세요. 

하지만 어떤 시나리오에서는 세부 사항을 너무 많이 정의하는 단계를 생략하고 곧바로 상호작용하는 프로토타입 제작 단계로 가는 것이 더 적절하다고 봅니다. 일부 상호작용하는 세부 사항이 완벽히 채워지지 않은 이미지에서는 충분히 전달되지 못한다는 주장입니다.

만약 개발자와 한 팀이 되어 작업한다면, 여러분이 본격적으로 디자인 작업을 하는 동안 기본이 되는 프레임워크를 코딩하도록 개발자에게 승인된 와이어프레임을 넘기고 싶어 할 것입니다.


9단계: 와이어프레임을 실제 화면 디자인으로 전환하기

앞에서도 언급했지만, 제가 와이어프레임을 제작하는 데 일러스트레이터를 사용하기 좋아하는 이유는 대부분의 편집 가능한 레이어가 있는 .psd 파일로 전환할 수 있기 때문입니다.  포토샵에 있을 때까지 저는 레이어 활자(type)를 많이 편집하지 않을 것입니다. (포토샵에 있는 활자 제어 툴은 좋지 않은 편입니다. 그래도 CS6에서 많이 개선되었네요.) 

Photoshop Export Options

와이어프레임을 시각적인 디자인으로 바꾼 예제입니다. 눈으로 보기에 변화가 있긴 하지만, 와이어프레임의 근간은 꽤 온전히 유지하고 있습니다. 서비스 중인 이 웹사이트도 볼 수 있습니다.

Webwise 2010

마무리

이제 이 튜토리얼을 마무리하겠습니다. 여러분이 테스트를 시작할 정도로 영향을 미쳤으면 합니다. 어떤 디자인 과정일지라도 반복하고, 반복하며, 또 반복해서 하는 작업을 두려워하지 마세요.

또한, 다양한 툴과 진행 과정을 실험하는 데 시간을 투자하시고요. 여러분에게 직감적으로 느껴지는 애플리케이션을 찾게 되면 투자했던 시간이 아깝지 않을 것입니다.

질문이 있으면 맘 편히 댓글에 올려주세요. 읽어주셔서 감사합니다!


참고 목록

와이어프레임에 대해 더 많이 알고 싶다면 아래 목록을 읽어 보세요.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.