<p style="text-align:justify;">제품을 만들어 시장에 출시하는 과정은 대략 ‘기획 > 디자인 > 개발 > QA > 출시’ 순으로 진행됩니다. 이때 디자이너는 화면을 디자인하고, 모션을 추가해 제품의 완성도를 높이기 위해 노력합니다. 이렇게 만든 제품이 의도한 대로 시장에 출시되려면 개발자에게 핸드오프(Handoff, 개발자들이 개발하기 쉽게 UX/UI 정보를 정리하여 전달하는 것)를 잘해야 합니다. 그렇지 않으면 개발 과정에서 불필요한 커뮤니케이션으로 작업 일정이 미뤄지거나, 예외 케이스, 엣지 케이스 등을 제작하지 못할 수도 있습니다.</p><p style="text-align:justify;"> </p><p style="text-align:justify;">피그마나 제플린처럼 정적인 UI를 전달하는 핸드오프 툴은 점차 발전해 왔으나, 모션 디자인 관련 핸드오프 툴은 상대적으로 진전이 없는 편입니다. 그래서 저마다의 방법으로 개발자에게 모션 디자인 가이드를 전달하고 있습니다.</p><p style="text-align:justify;"> </p><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2020/image10.png" alt="모션 디자인 가이드 제작 팁"><figcaption><출처: 각 사, 작가></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">이러한 과정에서 디자이너는 개발자와의 소통에 신경 써야 합니다. 디자이너에게 그들만의 언어가 있듯, 개발자도 개발자만의 언어가 있습니다. 개발자와 잘 소통하기 위해 디자인 언어를 개발자 언어로 변환해야 하는 것이죠.</p><p style="text-align:justify;"> </p><p style="text-align:justify;">그렇다고 코딩을 배우라는 뜻은 아닙니다. 열심히 만든 작업물을 실제로 잘 구현하기 위해 어떤 ‘정보’를 전달해야 하는지 알면 됩니다. 이번 글에선 어떻게 모션 디자인 관련 가이드를 개발자에게 잘 전달할 수 있을지, 제작 팁에 대해 소개하겠습니다.</p><p style="text-align:justify;"> </p><p style="text-align:justify;"> </p><h3 style="text-align:justify;"><strong>모션 적용 원칙부터 세우자</strong></h3><p style="text-align:justify;">먼저 모션 스펙을 정리하는 과정을 거쳐야 합니다. 비슷한 기능의 모션인데 좌푯값이 미세하게 다르다면 좌푯값을 통일하는 게 좋습니다. 개발 측면에서 코드를 최소화할 수 있고, 디자인 측면에선 일관된 모션 원칙을 적용해 브랜드의 품질을 높이는 효과를 줍니다.</p><p style="text-align:justify;"> </p><p style="text-align:justify;">다음으로 가이드 할 모션을 정의합니다. 사실 모션을 먼저 정의하고, 모션 디자인을 정리하는 것도 괜찮습니다. 정의할 모션을 나열했다면, 본격적인 핸드오프 과정에 들어갑니다.</p><p style="text-align:justify;"> </p><p style="text-align:justify;"> </p><h3 style="text-align:justify;"><strong>모션 디자인 핸드오프는 어떻게 할까?</strong></h3><h4 style="text-align:justify;"><strong>1) 영상</strong></h4><p style="text-align:justify;">먼저 프로토타입 시연 영상을 개발자에게 보여주는 방법이 있습니다. 영상으로 전체 플로우를 파악하고, 모션이 등장하고 사라지는 타이밍 등을 확인할 수 있습니다. 거시적인 관점에서 제품을 바라볼 수 있는 것이죠. 그러나 영상만 전달하면 개발자가 난감해할 것입니다. 영상만으로는 구체적인 수치를 확인할 수 없기 때문입니다. 그래서 모션을 작업한 대로 정확하게 구현하고 싶다면, 모션 스펙이 정의된 문서를 함께 전달해야 합니다.</p><p style="text-align:justify;"> </p><h4 style="text-align:justify;"><strong>2) 모션 디자인 가이드</strong></h4><p style="text-align:justify;">모션 디자인 가이드는 모션을 키프레임으로 기록해, 타임라인마다 변하는 효과를 시각적으로 나타낸 문서입니다. 모션 디자인 가이드에서 확인할 수 있는 속성은 크게 네 가지입니다.</p><ul><li style="text-align:justify;">변경되는 UI 요소</li><li style="text-align:justify;">요소의 속성(예: 불투명도, 위치, 각도)</li><li style="text-align:justify;">모션의 시작, 종료 시점</li><li style="text-align:justify;">애니메이션 타이밍 커브 종류</li></ul><p style="text-align:justify;"> </p><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2020/image5.jpg" alt="모션 디자인 가이드 제작 팁"><figcaption><출처: Google I/O 2016></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">모션 타임라인 구성은 다음과 같습니다.</p><ul><li style="text-align:justify;">모션의 시작과 끝</li><li style="text-align:justify;">모션 커브: ‘cubic-bezier’라는 컴퓨터상에서 4개의 점으로 움직임을 만들어 주는 곡선 알고리즘이라고 생각하면 쉽습니다. ex) Ease-in, Ease-out 등</li><li style="text-align:justify;">모션 속성: Opacity, Position, Scale, Rotation 등</li></ul><p style="text-align:justify;"> </p><p style="text-align:justify;">모션 디자인 가이드는 사용 중인 프로토타이핑 또는 애니메이션 도구의 복잡한 타임라인을 파헤칠 필요 없이, 그래프에서 많은 정보를 한눈에 파악할 수 있습니다. 문서를 제작하는데 시간이 좀 걸리지만, 모션 가이드 없이 개발자와 커뮤니케이션하는 비용을 생각하면 오히려 빠른 방법입니다. 앞서 말했듯 모션 디자인 가이드와 영상을 함께 전달하는 것이 좋습니다.</p><p style="text-align:justify;"> </p><h4 style="text-align:justify;"><strong>3) 코드</strong></h4><p style="text-align:justify;">만약 본인이 코드까지 짤 수 있는 디자이너라면 코드를 직접 짜서 개발자에게 전달할 수도 있습니다. 하지만 코드를 몰라도 괜찮습니다. <a href="https://codepen.io/"><u>‘CodePen’</u></a>을 활용하면 됩니다. ‘CodePen’은 사용자들이 직접 작성한 HTML/CSS를 시연하고 공유할 수 있는 온라인 커뮤니티 사이트입니다. 여기서 본인이 구현한 모션 디자인과 유사한 코드를 찾아 개발자에게 전달하면 됩니다.</p><p style="text-align:justify;"> </p><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2020/image6.png" alt="모션 디자인 가이드 제작 팁"><figcaption>‘Card’를 검색하니 다양한 효과의 Card HTML/CSS 리소스들이 나옵니다. <출처: 작가 캡처></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;"> </p><h3 style="text-align:justify;"><strong>모션 디자인 가이드 제작하기</strong></h3><p style="text-align:justify;">이제 모션 디자인 가이드를 직접 만들어 보겠습니다. 정의할 모션은 iOS 앱스토어 ‘투데이’ 탭 중, 카드 콘텐츠에서 상세 페이지로 진입할 때 일어나는 모션입니다.</p><p style="text-align:justify;"> </p><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2020/image8.gif" alt="모션 디자인 가이드 제작 팁"><figcaption><출처: 작가></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">저는 프로토파이(Protopie) 툴로 모션을 만들었고, 가이드는 자주 사용하는 피그마로 제작했습니다.</p><p style="text-align:justify;"> </p><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2020/image3.png" alt="모션 디자인 가이드 제작 팁"><figcaption><출처: 작가></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">먼저 모션 gif 파일은 문서 좌측, 가이드는 우측에 배치해 개발자가 영상과 가이드를 한눈에 볼 수 있게 정리합니다. </p><p style="text-align:justify;"> </p><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2020/image1.png" alt="모션 디자인 가이드 제작 팁"><figcaption><출처: 작가></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">가이드에 사용할 그래프 템플릿은 피그마 커뮤니티에서 찾았습니다. 참고로 피그마 커뮤니티에선 플러그인뿐 아니라 다른 사용자들이 만든 디자인 가이드나 아이콘, UI 리소스 등을 사용할 수 있습니다.</p><p style="text-align:justify;"> </p><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2020/image7.png" alt="모션 디자인 가이드 제작 팁"><figcaption><출처: 작가></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">다음으로 카드를 선택했을 때 변화하는 요소들을 모두 체크합니다. 프로토타이핑 툴을 확인하고 오브젝트와 속성을 나열해 봤습니다.</p><ul><li style="text-align:justify;">카드: radius</li><li style="text-align:justify;">카드: scale</li><li style="text-align:justify;">카드 타이틀: 위치(y축)</li><li style="text-align:justify;">카드 서브타이틀: 위치(y축)</li><li style="text-align:justify;">이미지: 위치(y축)</li><li style="text-align:justify;">닫기 버튼: 투명도</li><li style="text-align:justify;">상세 페이지 콘텐츠: 투명도</li></ul><p style="text-align:justify;"> </p><p style="text-align:justify;">오브젝트의 모든 속성값을 타임라인에 배치합니다. 모션의 시작과 끝을 표시하고, 속성과 커브 좌푯값을 적어줍니다. 저는 카드 scale 값을 제외하고 cubic-bezier 값을 동일하게 적용했습니다. 확대하거나 회전하는 오브젝트가 있다면, 앵커 포인트(Anchor Point)도 함께 표기하는 걸 잊지 마세요.</p><p style="text-align:justify;"> </p><ul><li style="text-align:justify;">카드: radius 값이 14 → 0으로 변화</li><li style="text-align:justify;">카드: scale 값이 100ms 초 뒤, (335, 420) → (375, 820)으로 변화</li><li style="text-align:justify;">타이틀: y축이 347 → 407로 이동</li><li style="text-align:justify;">서브타이틀: y축이 210 → 250으로 이동</li><li style="text-align:justify;">이미지: y축이 14 → 50으로 이동</li><li style="text-align:justify;">닫기 버튼: 투명도가 0% → 100%로 변화</li><li style="text-align:justify;">상세 페이지 콘텐츠: 투명도가 0% → 100%로 변화</li></ul><p style="text-align:justify;"> </p><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2020/image4.png" alt="모션 디자인 가이드 제작 팁"><figcaption><출처: 작가></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">이렇게 모션 디자인 가이드를 완성했습니다. 다만 이 방법은 제가 실무에서 개발자에게 가이드를 전달할 때 사용하는 방법이니, 본인에게 더 맞는 방법이 있다면 그걸 사용하시면 됩니다.</p><p style="text-align:justify;"> </p><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2020/image9.png" alt="모션 디자인 가이드 제작 팁"><figcaption><출처: 작가></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">참고로 프로토파이는 클라우드에서 속성값을 자동으로 추출해 주는 기능이 있어, 핸드오프 툴을 이용하면 일일이 수작업하지 않아도 됩니다.</p><p style="text-align:justify;"> </p><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2020/image2.png" alt="모션 디자인 가이드 제작 팁"><figcaption><출처: 작가></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">또한 애프터 이펙트에는 키프레임 속성을 텍스트 파일로 변환해 주는 ‘<a href="https://google.github.io/inspectorspacetime/"><u>Inspector Spacetime</u></a>’ 플러그인이 있어, 손쉽게 모션 스펙을 만들 수 있습니다.</p><p style="text-align:justify;"> </p><p style="text-align:justify;"> </p><h3 style="text-align:justify;"><strong>마치며</strong></h3><p style="text-align:justify;">이렇듯 모션 디자인 가이드를 제작해 전달했다고 해서 디자이너의 역할이 완전히 끝난 것은 아닙니다. 가이드대로 개발해도 실제 구현된 케이스가 예상한 것과 다르거나, 디자이너가 만든 효과가 iOS나 안드로이드에서 구현할 수 없는 경우도 있습니다. 따라서 가이드를 전달한 뒤에도 개발자와 지속적으로 소통하며 꼼꼼히 체크하시길 바랍니다.</p><p style="text-align:justify;"> </p><p style="text-align:justify;"><참고 자료></p><p style="text-align:justify;"><a href="https://www.youtube.com/watch?v=ZFyK1J5NrVk&t=1829s"><u>Designer & developer communication - Google I/O 2016</u></a></p><p style="text-align:justify;"> </p><p style="text-align:center;"><span style="color:#999999;">©️요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.</span></p>
