<img class="size-full wp-image-14482 aligncenter" src="https://www.wishket.com/media/newscenter/325/01_페북__5_.png" alt="01_페북" width="1200" height="628" /> <br> <br> <span style="font-weight: 400;"><strong>클라이언트</strong> : 아하, 외주 프로젝트도 제가 많은 부분 개입하고 주도적으로 이끌어가야 하는군요..! 그럼 이번 웹 디자인은…</span> <img class="size-full wp-image-14411 aligncenter" src="https://www.wishket.com/media/newscenter/325/위시켓_언어짤__1_.png" alt="외주 클라이언트 위시켓 캐릭터 언어짤" width="547" height="284" /> <span style="font-weight: 400;"><strong>클라이언트</strong> : ?? 이게 왜 잘못인가요... 억울해요. 제가 전문가가 아니다 보니, 이렇게 밖에 표현이 안되는걸요?</span> <br> <span style="font-weight: 400;">사실 클라이언트님들이 ‘화려하면서도 심플하게’와 같은 모호한 표현을 왜 사용하고 있을까를 생각해보면, </span><span style="font-weight: 400;"> </span><span style="font-weight: 400;">1. <span style="text-decoration: underline;">‘내가 원하는 것이 뭔지 모르겠다’</span> 거나 2. <span style="text-decoration: underline;">‘원하는 것은 명확하지만, 표현하기가 쉽지 않다'</span> 인 경우가 대부분인 것 같습니다.</span> <span style="font-weight: 400;"> </span><span style="font-weight: 400;">그럼 어떻게 해야 내 머릿속에 있는 ‘그림’을 상상한 모습 그대로! 선명하게! 디자이너/개발자에게 전달할 수 있을까요?</span> <br> <h3 style="text-align: center;"><span style="font-weight: 400;">“내가 만들고자 하는 서비스가 무엇인지 먼저 </span> <b>스스로 정리</b><span style="font-weight: 400;">해보세요.</span></h3><h3 style="text-align: center;"><span style="font-weight: 400;">그리고</span> <b>구체적으로</b> <span style="font-weight: 400;"> 설명해주세요! ”</span></h3><p style="text-align: center;"><img class="size-full wp-image-14410 aligncenter" src="https://www.wishket.com/media/newscenter/325/위시켓_사내_포스터.png" alt="위시켓 사내 포스터" width="547" height="365" /><i><span style="font-size: 12px;">(위시켓 사내 포스터. 비단 외주 뿐만 아니라, 일을 ‘잘’ 하기 위해서는 꼭 필요한 과정들이죠.)</span></i></p> <br> <h3>케이스 1. 내가 원하는 것이 뭔지 모르겠다.</h3><h4 style="text-align: center;"><span style="font-weight: 400;">“내가 만들고자 하는 서비스에 대해 </span> <b>스스로 정리</b><span style="font-weight: 400;">해보세요.”</span></h4> <span style="font-weight: 400;">여기서 제가 말씀드리는 ‘스스로 정리하기’란 <strong>‘요구사항 정의’</strong>를 의미하는데요.</span> <span style="font-weight: 400;">요구사항을 명확히 해야 내 서비스 중 <strong>어떤 ‘핵심’에 집중할지를 판단</strong>할 수 있고, 이번 <strong>프로젝트의 목표를 정확히 세울 수 있습니다</strong>. </span> <p style="text-align: center;"><img class="size-full wp-image-14409 aligncenter" src="https://www.wishket.com/media/newscenter/325/에어비앤비_초기.png" alt="에어비앤비 초기" width="547" height="470" /><i><span style="font-size: 12px;">(에어비앤비 설립자들이 서비스 초기에는 자신들의 아파트 사진 이미지, 위치 정도의</span></i><i><span style="font-size: 12px;"> </span></i><i><span style="font-size: 12px;"> ‘핵심 기능’만 만들기로 결정했듯이요.)</span></i></p> <br> <span style="font-weight: 400;">그럼 이 <strong>‘요구사항 정의’</strong>라는 건 어떻게 해야 할까요?</span> <h4><span style="font-weight: 400;">1. 워밍업 : 서비스 <strong>목적을 명확하게 정의</strong> 내리기 </span></h4> 요구사항 정의 이전에 클라이언트님께서 고민해주셔야 하는 부분이 있습니다! <span style="font-weight: 400;">바로 클라이언트님의 <strong>서비스 목적에 대해 명확하게 정의</strong> 내리는 것입니다.</span> <span style="font-weight: 400;">만들려는 서비스가 타겟으로 하는 핵심 고객은 누구인지, 왜 그들이 제품/서비스를 사용코자 하는지, 어떻게 서비스를 제공하고 수익화할 것인지 등에 대해 명확히 해야 합니다.(이에 대해서는 </span> <a href="https://www.wishket.com/news-center/detail/196/" target="_blank"> <span style="font-weight: 400;">비즈니스 모델 정립 관련 글</span></a><span style="font-weight: 400;">들을 참고해보세요!)</span> <span style="font-weight: 400;">위 내용을 먼저 말씀드린 이유는, 이 과정을 거쳐야 <strong>내 서비스에 무엇이 필요한지를 정확히 인지할 수 있기 때문</strong>입니다. </span> <span style="font-weight: 400;">그렇지 않으면 필수적인 기능에 대한 기준이 없어 고객이 원하지 않는 기능을 단지 있으면 좋을 것 같다는 이유로 추가하게 되고, 결국 서비스는 엉뚱한 방향으로 갈 수 있습니다.</span> <p style="text-align: center; padding-left: 30px;"><img class="size-full wp-image-14408 aligncenter" src="https://www.wishket.com/media/newscenter/325/산으로_가는_서비스.png" alt="산으로 가는 서비스" width="547" height="320" /><i><span style="font-size: 12px;">(산으로 가는 내 서비스…...)</span></i></p> <h4><span style="font-weight: 400;">2. <strong>요구사항 정의</strong>하기 </span></h4> <span style="font-weight: 400;">서비스의 목적을 명확히 했다면, 이제 요구사항을 정의해야 합니다.</span><span style="font-weight: 400;"> </span><span style="font-weight: 400;"> </span><span style="font-weight: 400;">이번에는 ‘외주를 맡기기 전 <strong>요구사항 정의</strong>라는 과정이 꼭 필요합니다!’ 를 강조하고 싶었기 때문에, 작성법은 예시와 함께 간단하게 다루고, <a href="https://www.wishket.com/news-center/detail/326/" target="_blank">다음 글</a>에서 샘플과 함께 상세한 작성법을 안내드릴게요!</span><span style="font-weight: 400;"> </span> <span style="font-weight: 400;"> </span><span style="font-weight: 400;">요구사항을 정의할 때는 클라이언트님이 만들고 싶은 서비스의 <strong>기능별 플로우를 하나하나 펼쳐서 작성</strong>해보시는 것이 좋습니다. </span> <span style="font-weight: 400;">‘펼쳐서 작성’이 뭘까요? 예를 들어보겠습니다.</span><span style="font-weight: 400;"> </span><span style="font-weight: 400;">저희 위시켓에는 클라이언트님이 원하는 디자이너/개발자에게 프로젝트 지원을 신청하는 ‘지원 요청’ 기능이 있는데요.</span> <span style="font-weight: 400;">이 기능을 활용하기 위해서는,</span><span style="font-weight: 400;"> </span><span style="font-weight: 400;">1. 위시켓 사이트의 상단 영역의 ‘파트너스 찾기’를 누른다. </span><span style="font-weight: 400;"> </span><span style="font-weight: 400;">2. 파트너스 찾기 페이지에 들어가면 ‘지원 요청 도움말’ 팝업이 뜬다. </span><span style="font-weight: 400;"> </span><span style="font-weight: 400;">3. 좌측의 ‘파트너스 필터’에서 파트너 직종/형태/지역을 선택할 수 있다.</span><span style="font-weight: 400;"> </span><span style="font-weight: 400;">4. 우측 상단의 검색에서 프로젝트 기술, 유사 서비스를 검색할 수 있다.</span><span style="font-weight: 400;"> </span><span style="font-weight: 400;">5. 파트너스 목록에서 기본 정렬/ 평점 높은 순/ 포트폴리오 많은 순/ 최근 업데이트 순으로 리스팅을 변경할 수 있다. </span><span style="font-weight: 400;"> </span><span style="font-weight: 400;">6. 마음에 드는 파트너를 선택하면 파트너 프로필 페이지로 이동한다.</span><span style="font-weight: 400;"> </span><span style="font-weight: 400;">7. 파트너 프로필 이미지 하단의 ‘지원 요청하기’ 버튼을 누른다.</span><span style="font-weight: 400;"> </span><span style="font-weight: 400;">8. 지원 요청하기 팝업에서 파트너의 활동가능 여부를 확인할 수 있다.</span><span style="font-weight: 400;"> </span><span style="font-weight: 400;">9. 지원 요청하기 팝업에서 지원을 요청할 프로젝트를 선택한다.</span><span style="font-weight: 400;"> </span><span style="font-weight: 400;">10. 지원 요청하기 팝업에서 내 프로젝트 정보와 남은 지원 요청 횟수를 확인할 수 있다.</span><span style="font-weight: 400;"> </span><span style="font-weight: 400;">11. 지원 요청하기 버튼을 누른다.</span><span style="font-weight: 400;"> </span><span style="font-weight: 400;">12. 파트너 프로필 페이지 상단에 지원 요청 완료 안내가 노출된다. </span> <span style="font-weight: 400;">이렇게 유저가 클라이언트님의 서비스 내 기능들을 어떻게 사용하게 할지를 플로우별로 </span> <b>자세히</b> <span style="font-weight: 400;"> 작성해주세요. </span> <p style="text-align: center;"><img class="size-full wp-image-14412 aligncenter" src="https://www.wishket.com/media/newscenter/325/종이접기_설명서.png" alt="종이접기 설명서" width="547" height="669" /><i><span style="font-size: 12px;">(마치 종이접기 설명서처럼 어디를 몇 번 접어야 하고, 접었더니 모양이 어떻게 바뀌었다를 자세히 보여준다고 생각해주세요.)</span></i></p> 요구사항 정의가 어떤 것인지 감이 좀 잡히시나요? <span style="font-weight: 400;">위 내용</span>을 일목요연하게 정리하고 문서화하고 싶다면, <a href="https://www.wishket.com/news-center/detail/326/" target="_blank">이 글</a>을 확인해보세요! (요구사항정의서 초안 버전 양식도 제공하고 있답니다.) <span style="font-weight: 400;">지금까지 ‘내가 만들고자 하는 서비스를 </span> 스스로 정리<b>’</b><span style="font-weight: 400;">해보는 방법에 대해서 알아보았는데요. </span><span style="font-weight: 400;">서비스의 목적을 명확하게 하고, 요구사항 정의까지 거쳐보신다면 ‘클래식하면서 모던하게’와 같은 모호한 표현이 많이 줄어들 거예요. :) </span> <span style="font-weight: 400;">이제 요구사항 정의까지 진행되었으니, 디자이너/개발자들에게 원하는 ‘그림’을 명확하게 전달할 수 있어야겠지요.</span> <br> <h3>케이스 2. 원하는 것은 명확하지만, 표현하기가 쉽지 않다.</h3><h4 style="text-align: center;"><span style="font-weight: 400;">“</span><b>구체적</b><span style="font-weight: 400;">으로 설명해주세요!”</span></h4> <span style="font-weight: 400;">‘장님 코끼리 만지기’ 이야기를 아시나요? </span> <span style="font-weight: 400;">코끼리 한 마리를 두고 여섯 명의 장님이 각 부분을 만지면서, 코끼리에 대한 설명을 하지요. 하지만 각자 만진 부분만으로는 한 마리의 완전한 코끼리를 떠올리기 힘들었다는 내용인데요. </span> <img class="size-full wp-image-14406 aligncenter" src="https://www.wishket.com/media/newscenter/325/각자_맡는_파트__2_.png" alt="각자 맡는 파트" width="547" height="154" /> <span style="font-weight: 400;">이라고 놓고 보면 어떨까요?</span><span style="font-weight: 400;"> </span> <span style="font-weight: 400;">프로젝트를 시작할 때 아무리 뛰어난 작업자님을 만난다고 하더라도 <strong>코끼리의 완전한 모습을 유추해낼 수는 없습니다</strong>. </span><span style="font-weight: 400;">클라이언트님께서 설명해주시는 업무 범위를 듣고 코끼리를 더듬어서 일부를 조금씩 확인해나갈 뿐이지요. </span> <span style="font-weight: 400;">그렇기 때문에 성공적으로 외주를 끝내기 위해서는 </span> <b>프로젝트 시작 시점 때</b><span style="font-weight: 400;"><strong>부터 원하는 것을 정확하게 전달하는 것이 무엇보다 중요</strong>합니다.</span> <span style="font-weight: 400;">그럼 어떻게 하면 요구사항을 정확하게 전달할 수 있을까요? </span><span style="font-weight: 400;"> </span><span style="font-weight: 400;">요구사항을 정리한 문서에 </span> <b>+α</b><span style="font-weight: 400;">가 추가된다면 더 명확하지 않을까요?</span> <span style="font-weight: 400;">그래서 ‘구체적으로 설명하기’ 위한 방법으로 <strong>레퍼런스 활용 TIP</strong>을 안내드리려 합니다. </span> <span style="font-weight: 400;">그전에 위에서 내가 하고자 하는 서비스의 목적을 정확히 알고나서 요구사항 정의를 해야 한다고 말씀드렸는데요. </span> <span style="font-weight: 400;">레퍼런스도 마찬가지입니다. <strong>서비스 목적이 명확해야 이를 기반으로 레퍼런스를 찾고, 내 서비스에 맞게 어떻게 변형시켜야 할지를 알 수 있습니다</strong>. </span> <span style="font-weight: 400;">위 과정이 선행되지 않으면, 기준 없이 단순히 마음에 드는 레퍼런스를 선정하거나 레퍼런스에 혹해 서비스 목적까지 흔들릴 수 있습니다. </span> <p style="text-align: center;"><img class="size-full wp-image-14407 aligncenter" src="https://www.wishket.com/media/newscenter/325/디자이너를_괴롭히는_방법.png" alt="디자이너를 괴롭히는 방법" width="547" height="305" /><i><span style="font-size: 12px;">(명확한 요구사항과 레퍼런스가 함께라면 디자이너/개발자님들이 더욱 행복해질 수 있답니다!)</span></i></p> <h3><span style="font-weight: 400;">레퍼런스, 어떤 것에 포인트를 두고 찾아보면 될까요? </span><span style="font-weight: 400;"><span style="font-size: 12px;">(*레퍼런스 : 참조, 참고, 참고문헌)</span> </span></h3><h4><span style="font-weight: 400;"> </span><span style="font-weight: 400;">1. 만들고 싶은 것과</span> <b> 비슷한 유형의 서비스</b><span style="font-weight: 400;">를 많이 찾아보세요.</span><span style="font-weight: 400;"> </span></h4> <span style="font-weight: 400;">클라이언트님이 준비하시는 서비스가 ‘소개팅 앱’이라면 ‘소개팅’ 혹은 ‘매칭’의 성격을 가지고 있는 서비스들을 전부 살펴보는 거죠. 서비스들을 보다 보면 불편한 점, 이상한 점, 좋은 점 등을 발견하게 되고, 여기서 내가 차용할 점이 무엇인지 알 수 있게 됩니다. </span> <br> <h4><span style="font-weight: 400;">2. 벤치마킹하고 싶은</span> <b> 기능</b> 레퍼런스<span style="font-weight: 400;">와 <strong>디자인 레퍼런스</strong>를 모아주세요.</span><span style="font-weight: 400;"> </span></h4> <h5>디자인 프로젝트</h5> <span style="font-weight: 400;">디자인 콘셉트 관련 레퍼런스를 찾는다면 꼭 비슷한 유형의 서비스만 볼 필요는 없습니다.(다만, 서비스 레이아웃 레퍼런스는 유사한 서비스를 살펴보는 것이 좋겠죠?) 클라이언트님이 원하는 콘셉트, 톤앤매너와 비슷한 사이트 / 포트폴리오들이 있다면 전부 모아 두고, 작업을 맡아주실 디자이너님에게 레퍼런스로 보여주세요. </span> <span style="font-weight: 400;"> </span><span style="font-weight: 400;">디자인 레퍼런스는 어디서 찾냐고요? </span> <ol> <li><span style="font-weight: 400;">핀터레스트 </span><span style="font-weight: 400;"> </span> <span style="font-weight: 400;">#webdesign #logo 등을 검색해 마음에 드는 이미지를 찾아보세요</span></li> <li><a href="https://httpster.net/2019/oct/" target="_blank">httpster</a><span style="font-weight: 400;"> </span>최신 사이트의 디자인을 소개하는 곳으로, 서비스 특성별로 필터링을 할 수 <span style="font-size: 15px;">있습니다. 만들고자 하는 서비스 분야의 디자인 트렌드를 확인하기에 좋습니다. </span></li> <li><a href="http://collectui.com/" target="_blank">collect ui</a> 디자이너들의 포트폴리오를 아카이빙해 둔 곳으로, 서비스 기능 단위별 필터링이 가능해 기능별 디자인을 참고하기에 유용합니다.</li> </ol> <h5>개발 프로젝트</h5> <span style="font-weight: 400;">위에서 안내드린 ‘요구사항 정의’를 활용할 때가 왔습니다! </span><span style="font-weight: 400;"> </span><span style="font-weight: 400;">요구사항 정의에서 정리한 기능들을 다시 봐주세요. 그리고 각 기능마다 내 서비스와 동일하거나 유사한 플로우를 가진 서비스들을 찾아보세요. </span><span style="font-weight: 400;"> </span> <span style="font-weight: 400;">찾은 레퍼런스들은 요구사항 정의에 추가로 언급해주세요. </span><span style="font-weight: 400;"> </span><span style="font-weight: 400;">(예 : 이미지 업로드 기능은 레퍼런스인 인스타그램과 완전히 동일한 플로우입니다.)</span><span style="font-weight: 400;"> </span> <span style="font-weight: 400;">혹시 벤치마킹한 기능 중 새롭게 추가하거나 보완하고 싶은 부분은 </span><span style="font-weight: 400;"><em>‘회원가입은 에어비앤비의 회원가입 순서와 동일하나 여기에서 ‘구글 계정 로그인’을 빼고 ‘카카오톡 로그인’을 새로 추가하고 싶습니다.’</em>와 같이 명시해주세요. </span><span style="font-weight: 400;">개발자님이 클라이언트님의 요구사항을 이해하기 훨씬 쉬워진답니다.</span> <br> <h4><span style="font-weight: 400;">3. <strong>어떤 부분에 대한 레퍼런스인지</strong>를 명확히 설명해주세요.</span></h4> <span style="font-weight: 400;">모아두신 레퍼런스들의 어떤 부분을 벤치마킹하길 원하는지 콕 집어 설명해주세요.<em> ‘이 레퍼런스의 사이트 </em></span> <em><span style="font-weight: 400;">레이아웃을 내 사이트에 그대로</span></em> <span style="font-weight: 400;"><em> 적용하고 싶다.’</em>와 같이요. </span> <span style="font-weight: 400;">지금까지 레퍼런스를 활용해 디자이너/개발자님에게 요구사항을 좀 더 선명하게 전달하는 법을 알아봤는데요. 레퍼런스를 활용할 때 주의하셔야 할 점은 </span> <span style="font-size: 17px;"> <strong>'레퍼런스만 맹신하지는 말라는 것'</strong></span><span style="font-weight: 400;">입니다. </span> 레퍼런스가 모든 것을 대체하지는 않습니다. 원하는 방향을 시각적으로 전달할 수 있는 좋은 참고 자료일 뿐이죠. 결국엔 레퍼런스를 토대로 내 작업을 진행해주실 <strong>디자이너님, 개발자님과의 적극적인 커뮤니케이션이 성공적인 결과물을 이끌어 낼 수 있다는 점</strong>도 꼭 기억해주세요! <span style="font-weight: 400;"> </span> <hr /> <p style="text-align: center;"><strong>[관련 글]</strong></p> <p style="text-align: center;"><a href="https://www.wishket.com/news-center/detail/323/" target="_blank">외주를 맡기려면 뭐부터 해야하죠? 1. '알아서 해주세요'는 안된다구요?</a></p> <p style="text-align: center;"><a href="https://www.wishket.com/news-center/detail/326/" target="_blank">외주를 맡기려면 뭐부터 해야하죠? 3. 요구사항을 문서화하라구요?</a></p> <hr />