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

주의! 이 방법은 주로 슬로워크 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

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