슬로워크에서는 스티비라는 이메일마케팅 서비스를 만들고 있습니다. 스티비처럼 서비스를 새로 만들어나가는 단계에서 가장 많이 하는 일 중 하나는 서비스를 만들기 위한 화면을 설계하는 것입니다.



스티비를 만드는 과정은 대략 이렇습니다.



화면 설계의 산출물은 디자인과 개발의 밑바탕이 되는 것이기 때문에 화면 설계 단계에서는 디자이너, 개발자와의 소통이 중요합니다. 그 산출물 또한 디자이너, 개발자가 활용하기 쉬운 형태여야 합니다.


화면 설계의 산출물 중 하나는 와이어프레임(Wireframe)입니다. 와이어프레임이란 단순한 선으로 화면의 레이아웃을 표현하는 것을 말합니다.


더 읽기 > UI, UX 기획을 쉽게, 와이어프레임(Wireframe)



슬로워크에서는 원래 Moqups라는 도구를 사용하고 있었고 스티비 팀에서도 마찬가지였습니다. 하지만 몇 가지 아쉬운 점이 있었습니다.


  1. 제공되는 스텐실(Stencil)로는 부족합니다.
    Moqups에서는 스텐실이라는 이름으로 미리 제작된 UI 요소를 바로 끌어다 쓸 수 있도록 제공하는데, 제공되는 것만으로는 충족되지 않는 경우가 있었습니다. 일반적으로 사용되는 UI 요소는 대부분 제공하지만 오히려 필요하지 않는 것까지 포함되어 있다 보니 정작 필요한 걸 찾아 쓰는 데 오히려 불편함을 느끼기도 했습니다.

  2. 인터랙션을 표현하기 어렵습니다.
    화면 간 이동은 표현할 수 있지만 팝업이나 고정된 레이어 등 화면 단위가 아닌 인터랙션은 표현하기가 어려웠습니다. 물론 화면설계 단계에서 모든 인터랙션을 정확히 표현할 필요는 없지만 자주 사용되는 단순한 인터랙션을 매번 따로 설명해야하는 불편함이 있었습니다.


이런 아쉬운 점에도 불구하고 Moqups는 매우 훌륭한 도구임에는 틀림없습니다. 하지만 와이어프레임을 만드는 기획자가 디자인 툴을 사용하는 데 비교적 익숙한 편이었기 때문에 이런 아쉬움을 충족시켜줄 만한 새로운 도구를 찾아보기로 했습니다.


그래서 사용해보기로 한 것이 스케치(Sketch)와 인비전(Invision)입니다.





스케치는 UI 디자인에 최적화된 도구입니다. 빠르고 간편한 기능으로 포토샵을 대체하고 있습니다. 한국에서도 포토샵 대신 스케치를 사용하는 디자이너들이 점점 늘어나고 있는 추세입니다. 스티비 팀도 디자인 업무에 스케치를 사용하고 있습니다.



스케치 소개 영상



인비전은 화면 간 인터랙션을 표현하는 프로토타이핑 도구입니다. 디자인 된 화면을 불러와 어떤 사용자 행동에 대해 화면이 어떻게 전환되는지 정의할 수 있습니다. 그리고 이렇게 만든 결과물을 다른 사람과 공유하고 피드백을 받기에 용이합니다.



인비전 소개 영상



정확히 말하자면, 스케치와 인비전은 디자인 산출물을 만드는 과정에서 빠르고 효율적으로 프로토타이핑하고 그 결과물을 공유하기 위한 도구라고 볼 수 있습니다. 실제로 대부분 그렇게 활용하고 있기도 하죠. 하지만 와이어프레임 작업을 위한 도구로도 사용할 수 있다고 생각했고, 그래서 직접 활용해보기로 했습니다.



스케치와 인비전으로 만든 스티비 와이어프레임들



방법은 단순합니다. (사실 스케치와 인비전을 활용한 일반적인 프로토타이핑 과정과 다를 바 없습니다. 그 대상이 디자인 산출물이냐 와이어프레임이냐의 차이일 뿐입니다.)


  1. 스케치에서 아트보드(Artboard) 단위로 화면별 와이어프레임을 만듭니다.
  2. 스케치 파일을 인비전에서 불러와 화면 순서를 정리합니다.
  3. 인비전에서 화면 간 이동, 팝업, 스크롤 등 간단한 인터랙션을 정의하고 부연설명이 필요한 곳에 노트를 추가합니다.
  4. 인비전 링크를 동료들에게 공유하고 코멘트를 활용하여 의견을 주고받습니다. 필요하다면 사용자에게 디자인을 미리 공개하고 피드백을 받는 것도 가능합니다. (스티비는 새로운 에디터의 디자인 시안을 인비전으로 공개하여 피드백을 받았습니다.)



함께 사용하면 좋은 것


인비전 싱크(Invision Sync)

스케치 파일과 인비전 프로젝트를 동기화합니다. 스케치에서 수정한 내용이 인비전 프로젝트에 바로바로 반영됩니다.


크래프트(Craft)

인비전에서 만든 스케치의 플러그인입니다. 한 가지 요소를 그리드 형태의 배치로 복제해주고, 이미지 요소를 라이브러리 형태로 관리하고, 공개된 이미지를 무작위로 불러와 배치하고, 텍스트를 무작위로 입력해주는 등의 기능을 제공합니다.


와이어프레임 키트

공개된 와이어프레임 키트를 사용하면 스케치에서 UI 요소를 직접 그릴 필요가 없습니다. Teracy Wireframe, Bootstrap 3 GUI를 추천합니다.



다른 와이어프레임 도구와 비교했을 때 장점은 이렇습니다.


  1. 다양한 UI 요소를 표현할 수 있습니다.
  2. 디자인 산출물과 연속성이 생깁니다. 와이어프레임을 만들 때 사용한 레이어와 심볼의 이름과 구조를 디자인 작업 시 그대로 사용할 수 있습니다.
  3. 단순한 인터랙션은 글이나 말로 설명할 필요없이 직접 표현할 수 있습니다.
  4. 공유가 쉽고 피드백을 주고받기 쉽습니다.


단점도 있습니다.


  1. UI 요소를 수정할 때 시간이 오래 걸립니다. 다른 와이어프레임 도구는 제공되는 UI 요소에서 간단한 수정만으로도 메뉴의 수를 늘린다든가 버튼의 스타일을 변경할 수 있지만, 스케치에서는 직접 수정해야 합니다.
  2. 전체적인 화면 구조나 순서를 파악하기 어렵습니다. 직접 클릭하면 화면이 어떻게 이동하는지 확인할 수 있지만 전체적인 흐름을 확인할 수는 없습니다.


스티비팀에서도 화면설계 단계에서 스케치와 인비전을 활용해본 건 이번이 처음이었고 이번에 알게된 단점을 어떻게 보완할 수 있을지 고민하고 있습니다. 전체적인 화면 구조나 순서를 파악할 수 있도록 화면 단위의 시나리오를 표현한 별도의 아트보드를 만들고 꼭 필요한 부분만 인비전으로 옮기는 것이 대안이 될 수 있습니다. 어쩌면 아예 다른 도구를 사용하는 게 더 나을 수도 있겠죠.


스케치나 인비전이 정답이 아니듯이 어떤 도구로 서비스 전체의 기획 내용을 완벽히 전달할 수는 없습니다. 문서가 필요할 때도 있고 표가 필요할 때도 있고 순서도가 필요할 때도 있습니다. 기획의 본질은 커뮤니케이션입니다. 중요한 것은 상황에 따라 커뮤니케이션을 효율적으로 할 수 있는 도구를 선택적으로 사용하는 것입니다.



by 낙타 발자국

Posted by slowalk

UI/UX 기획을 할 때 사용하는 와이어프레임(Wireframe)에 대해 들어보셨나요?

웹 또는 앱 프로젝트를 진행할 때 필요한 과정 중 하나로 웹 페이지의 구조를 제안하기 위한 화면 설계도입니다. 즉 디자인이 들어가기 전 단계에서, 선(wire)을 이용해 윤곽선(frame)을 잡는 것을 말합니다. 단순한 선과 회색박스들로 보일 수 있겠지만, 디자인의 컨셉, 고객의 요구사항, 콘텐츠들의 기능 요소를 모두 파악하여 전략적으로 설계되어야 하므로 중요도가 높습니다. 또한, 이 와이어프레임이 잘 갖춰져 있어야 디자이너와 웹 퍼블리셔, 개발자 그리고 클라이언트가 서로 원활히 소통할 수 있게 됩니다.



와이어 프레임이 실제 업무에서 사용되는 예시를 살펴보겠습니다. (*주관적인 흐름으로 개인적, 업체별로 다른 프로세스로 사용될 수 있습니다.) 

고객이 웹 페이지 제작을 요청합니다. 기획자는 고객의 요구사항을 파악하고 메인에 나올 콘텐츠와 기능 요소들을 정리합니다. 정리된 자료를 토대로 와이어프레임을 제작하게 됩니다. 디자인의 컨셉, 레이아웃, 각각 요소들의 상호작용과 인터렉션까지도 정해주게 됩니다. 이 와이어프레임을 통해 개발자는 사이트의 기능을 이해하고, 디자이너는 디자인 컨셉을 원활하게 잡을 수 있고, 클라이언트는 요구사항과 원하는 기능이 제대로 전달되었는지를 사전에 확인할 수 있습니다.



와이어프레임을 초기에는 파워포인트로 제작을 주로 했습니다. 하지만 앞서 설명한 것과 같이 화면 기획서에는 디자이너와 웹 퍼블리셔, 개발자, 클라이언트에게 필요한 다양한 정보가 들어가 있습니다. 그러나 파워포인트로 제작 할 시 조금 불편한 점이 있습니다. 파워포인트는 Document 사이즈이고 웹은 pixel 단위입니다. 그러므로 클라이언트 입장에서는 실제로 이 와이어프레임이 웹 페이지에서 어떠한 사이즈로 보일지 감을 잡기 어렵습니다. 또한, 실시간 공유와 협업이 쉽지 않습니다. 그렇게 되면 매끄러운 업무협의가 어려워지고 제작 시간 또한 늘어날 수 있습니다. 그렇기 때문에 최근 많이 사용되고 있는 다양한 와이어프레임툴을 사용해볼 것을 권합니다. 이러한 다양한 와이어프레임툴들은 실제 웹 페이지와의 1:1사이즈 대응, 실시간 공통편집 등의 다양한 기능을 제공하며 공유 또한 쉽습니다. 그렇다면 사용하기 쉬운 와이어프레임 제작 도구 몇 가지를 소개해드리겠습니다. 


1. Moqups (https://moqups.com)

슬로워크 웹 개발실에서 사용하고 있는 툴입니다. PNG,PDF로 저장이 가능하고 메일이나 URL로 여러 사람과 공유하기가 쉽습니다. 직관적인 UI로 누구나 손쉽게 사용할 수 있다는 장점이 있습니다. 



2. UXPin (http://www.uxpin.com)

반응형 웹 기획에 적합합니다. 동일 페이지를 해상도별 사이즈로 쉽게 만들 수 있고, 실제 html로 확인할 수 있습니다. 실시간 협업 또한 가능합니다.



3. Balsamiq (https://balsamiq.com)

손으로 스케치한듯한 캐쥬얼한 느낌을 주는 와이어프레임 도구입니다. 네트워크 연결 없이도 사용할 수 있다는 점이 있습니다.




4. Proto.Io (https://proto.io)

모바일 앱을 만들기에 적합한 툴입니다. 아이폰, 아이패드, 안드로이드, 안드로이드 타블렛 모두 가능합니다. QR코드를 통해 스마트폰에서 바로 확인하여 볼 수 있습니다.




5. Power mockup (http://www.powermockup.com/)

파워 목업은 많은 기획자들이 사용하는 툴입니다. 다운로드를 받으면 파워포인트 내에 설치되어 손쉽게 와이어프레임과 문서작성을 동시에 할 수 있습니다. 사용성이 매우 간편하고 스텐실 종류가 다양해 초보자도 쓰기가 편하다는 장점이 있습니다. 





이 밖에도 다양하고 손쉽게 쓸 수 있는 와이어프레임 툴이 많습니다. 가장 좋은 것은 직접 사용해 보고 자신의 사용 목적에 맞고 편한 와이어프레임 툴을 선택하는 것이 좋습니다. 

참조사이트 <http://likelink.co.kr/20702>를 확인하시면 더 많은 와이어프레임 툴에 대해 소개하고 있습니다. 

UIUX기획, 손쉽게 와이어프레임 툴로 시작해보세요.



by 양 발자국




Posted by slowalk