지난 포스팅에서 개발자와 대화하고 싶은 비 개발자를 위한 참고서에 대한 글을 작성했습니다. 이번 포스팅에서는 개발자와 기획자 간 원활한 커뮤니케이션을 위해 저희 팀 내에서 초기 사용했던 방법이 현재는 어떻게 바뀌었는지 사례를 통해 보여드리겠습니다.

주의! 이 방법은 주로 슬로워크 1팀 기획자인 저와 개발자들이 사용하는 방식으로, 회사별로 팀별로 방법이 다를 수 있습니다. 가장 좋은 방법은 팀 내에서 서로 많은 대화를 해보는 것입니다.




1. 기획자와 개발자의 시간은 다르게 간다.

“이거 금방 되죠?” vs “이거 오래 걸려요”



초기에 기획자로서 흔히 했던 실수는, 개발자에게 정확한 기간이나 요건을 설명하지 않고 금방 될 것이라 추측한 것입니다. ‘금방’, ‘오래'와 같은 단어는 주관적입니다. 내가 생각하는 금방은 하루지만 상대방이 생각하는 금방은 3일일 수 있습니다. “이거 금방 되죠?"와 같은 질문을 받은 개발자는 당연히 금방 되지 않으니 오래 걸린다고 답할 수밖에 없습니다. 그러다 보니 서로 갈등과 오해가 생기게 됩니다. 기획자는 ‘분명 이전 프로젝트에서는 금방 해주었던 것 같은데, 왜 오래 걸린다는 거지’ 혼자 생각하고, 개발자는 ‘지금 요건에서 그 기능은 금방 추가할 수가 없는데 왜 금방 된다는 거지’ 하며 답답해 합니다.


시간에 대해 설명할 때는 구체적인 언급이 필요합니다. 모호하고 주관적 단어 대신 구체적인 단어를 선택해야 합니다.


“이런 기능 요건이 추가되었는데, 3일 안에 가능할까요?”

“이 기능은 지난 프로젝트에서 사용했지만, 이번 프로젝트 개발 구조와 달라 수정이 필요할 것 같아서 3일은 어렵고 5일이 소요될 것 같아요.”


위와 같이 서로 구체적인 기간을 언급하고, 그 이유를 설명해야 불필요한 오해의 소지를 줄일 수 있습니다. 또한, 고객에게 일정을 설명할 때도 정확한 기간을 언급해주는 것이 신뢰의 기본입니다.




2. 개발자와 기획자의 서로 다른 언어

이해관계자와 수많은 커뮤니케이션 vs 프로그래밍 언어로 컴퓨터와 커뮤니케이션




기획자는 여러 이해관계자와 다양한 수준의 커뮤니케이션을 합니다. 이를 통해 일을 정리하고 상대방을 설득하며, 개발자에게도 설명합니다. 즉 기획자가 하는 모든 일은 다른 사람들에게 상대방의 생각을 올바르게 커뮤니케이션해주는 과정에 있습니다. 개발자는 해당 내용을 결과물로 보여주기 위해 일반인이 이해하기 힘든 프로그래밍 코드를 작성하고, 컴퓨터와 대화를 주고 받습니다. 기획안을 오랫동안 설명하였는데 나의 기획과 다른 개발 결과물이 나오는 일도 있고, 반대로 기획자가 가져온 그대로 개발하였는데 번복하는 상황이 생기기도 합니다.


서로가 대화하는 대상이 다름을 인지하는 것이 가장 중요합니다.

기획자는 자신뿐만 아니라 상대방의 생각도, 고객의 요구도 반영해야 합니다. 개발자는 그러한 결과물을 구현해주기 위해 컴퓨터와 끊임없이 대화하고 수정합니다. 그렇기 때문에 서로의 커뮤니케이션 대상자가 다름을 이해할 때 서로 불필요한 오해를 줄일 수 있습니다. 특히 개발언어는 정량적 측정이 어렵기 때문에 정확한 기간을 말하기 힘들 때가 있습니다.


커뮤니케이션 대상자는 다르지만 하나의 결과물을 위해 함께 협업해야 한다는 점을 기억하세요.



3. 개발자와 기획자의 논리적인 대화를 위한 3단계

“이 기능 간단하죠? 전에 한 거랑 같은데.” vs “이거 달라요, 여기엔 안 돼요.”




기획과 개발은 서로 함께 하나의 목표를 위해 달려가는 협업과정입니다. 그 과정에서 서로가 생각하는 바가 다르기도 하고 머릿속에 있는 것을 말로만 설명해서는 이해하기가 어렵습니다. 막바지에 이르러 서로 다른 결과물을 가지고 볼 수도 있습니다. 따라서 대화 전에 아래와 같은 사전 기획서 혹은 간단한 문서를 통해 대화하면 조금 더 논리적이고 오해가 적은  커뮤니케이션을 할 수 있습니다.


1) 자신의 생각을 정리한다

2) 생각을 구체적으로 손으로 그리거나 툴을 이용해 누구나 이해할 수 있게 그린다

3) 1:1로 직접 보고 대화한다


<실제 1팀에서 기획자와 개발자 간에 대화를 위해 작성한 페이퍼프로토타입, ppt 문서>



슬로워크 1팀에서 기획자는 주로 moqups.com과 ppt를 사용합니다. 와이어프레임을 그려 디자이너와 개발자에게 전달하고 내부 세미나를 합니다. 또 역으로 개발자가 기획자에게 관리자 화면이나 기획안 수정 및 요청을 할 때가 있습니다. 주로 직접 그려서 주거나 엑셀 표에 작성해서 전달합니다. 또 가까운 공간에 서로 함께 일하기 때문에 끊임없이 이야기하면서 커뮤니케이션 능력을 서로 업그레이드시키고 있습니다. 특히 제가 개인적으로 선호하는 방식은, 개발자에게 먼저 묻고 일정과 협의를 진행하는 것입니다. 그렇게 되면 일정이나 서로 개발범위에 따른 오해의 소지가 반 이상 줄어들고, 서로 존중하는 프로젝트가 진행됩니다. 개인적으로 짐작하거나 말을 걸기 두려워 지레짐작하다 보면 프로젝트는 산으로 가기 십상입니다. 최근 1팀의 대화는 이렇습니다.


“ A와 B를 통해서 C가 나오도록 해주세요, 10일간의 일정에 가능할까요? “

“네, A와 B를 OO코드로 C가 나오도록 구현할게요. 일정은 10일이면 가능할 것 같아요. ”



4. 마무리

‘우리는 모두 한 배를 타고 있다.’ 서로의 언어에 관심을 가지는 것이 시작입니다.



사실 커뮤니케이션 방법에 정답은 없습니다. 우리 팀에서 잘 맞고, 우리 팀원들과 적합한 커뮤니케이션 방식을 찾아가는 것 또한 업무의 일환이라고 생각합니다. 다만 서로에 대한 배려와 이해하고자 하는 마음 그리고 조금 더 구체적으로 서로의 업무를 설명하는 것이 신뢰를 위한 첫 걸음입니다.



Posted by slowalk

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



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



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


화면 설계의 산출물 중 하나는 와이어프레임(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