“라인”의 서비스 제작 도구로서의 XD 사용기

1. LINE Product Planning에서는 언제 Adobe XD를 사용하나?

LINE Product Planning에서는 LINE App에 새 기능 추가, LINE App 기존 기능 사용성 개선, 그리고 Family App 출시를 하고 있습니다. 최근 추가한 새로운 기능은 LINE SQUARE(관심사 기반의 익명 채팅), 기존 기능 개선은 +메뉴 개편(쉬워진 사진 첨부)을 예로 들 수 있습니다. Family App에서는 Popcorn Buzz, B612, Foodie 등 다양한 앱이 있습니다. LINE MAN, LINE LIVE 같이 특정 국가에서만 서비스하는 앱도 있고요. 저도 입사할 당시에는 LINE에 이렇게 다양한 App이 있는지는 몰랐네요. LINE에서 위와 같은 프로젝트를 진행할 때, Adobe XD를 사용하는 경우는 아이데이션 & 커뮤니케이션 크게 2가지 입니다.

  1. 빠르게 프로토타이핑(아이데이션)하고
  2. UX Flowchart 만들어 개발 진행하기(커뮤니케이션)

2. 빠른 프로토타이핑으로 아이데이션 하기

LINE은 많은 사용자들이 이미 사용하고 있는 기능을 개선해야 하는 경우가 많은 편입니다. 새로운 기능이 추가되는 경우에도 현재 사용자들이 사용하고 있는 기존 기능과 자연스럽게 연결되어야 하는 부분이 매우 중요합니다. 메신저 앱은 우리가 매일 사용하고 있는 언어와 같은 역할을 하고 있으니 다양한 연령대의 많은 사람들이 사용하기에 어려움이 없어야 하고요. 앞서 언급한 LINE SQUARE와 같은 새 기능을 기획할 때에도 기존 사용자들이 익숙한 대화방 사용 인터렉션을 고려해야 했습니다.

이와 같이 개선을 진행할 때에 이미 작동하고 있는 UX를 고려하여 의사결정을 해야 하는데요. 이때 Adobe XD를 통해 기존 LINE App의 Asset을 활용, 빠르게 프로토타이핑을 해보는 것은 큰 도움이 됩니다. 현재 LINE 앱을 스크린 캡쳐하고, 그 화면을 뜯고 붙이며 조합해보고 새롭게 그려도 보는 거예요.

2-1. Adobe XD 활용 – Prototype

LINE의 UX는 한 화면에서의 화려한 인터렉션보다는 여러 화면 간의 전환이 많은 특징이 있습니다. 대화, 콜, 타임라인, 스퀘어 등의 다양한 기능을 제공하고 있고, 각 기능들의 연동이 많은 것이 그 이유입니다. 이러한 맥락에서 Adobe XD의 아트보드 기능은 유용합니다.

‘많은 페이지로 구성된 앱’에서 ’기존 기능에 새 기능 붙이기’가 필요할 때 XD는 매우 유용합니다!

독보적으로 넓습니다. 절반 정도 채웠는데 화면이 2600개.. 라인 앱 전체를 넣을 수 있을 듯합니다.

아래는 기존의 +메뉴의 개선안 기획 화면입니다. +메뉴 상단의 화면을 잘라 두고, 아래 영역에 추가로 이미지를 붙이는 식으로 작업을 하였는데요. 특정 영역을 잘라낼 때는 마스킹 기능을, 아이콘은 심볼 기능을 통해 그려놓으면 추가 수정에 용이합니다.

추가로 캡쳐를 하거나 완성된 디자인 이미지를 받았을 때 프로토타입을 빠르게 만들어 볼 수 있는 꿀 TIP 전수 드릴게요.

  1. 아트보드 위에 캡쳐한 이미지나 완성된 디자인 이미지를 올린다.
  2. 그 위에 도형을 그린다.
  3. 도형의 투명도를 0%로 설정한다.
  4. 프로토타입 모드에서 연결해준다.

이와 같이 ‘기존 화면을 캡쳐’, ‘도형 올리고 투명도를 0%로 조절’, 그리고 ‘새로운 UI와 연결’해주면 빠르게 프로토타입을 확인해볼 수 있습니다. LINE과 같이 기존 화면과의 연동이 많은 상황에서 기능을 개선할 때 편리합니다. App의 페이지가 많은 상황에서 컴퓨터가 무거워지는 현상 없이 여러 개의 아트보드를 손쉽게 편집하고 연결하여 볼 수 있는 것은 Adobe XD의 특별한 장점이라고 생각합니다.

이미지 위에 버튼을 그리고 투명도 ‘0%’로 세팅

프로토타입 모드에서 도형 영역을 선택하여 연결

3. 디자인/개발과 커뮤니케이션하기 – Prototype과 Flowchart

디자인/개발과 커뮤니케이션을 할 때 프로토타입은 유용합니다. 인터렉션을 상상해 보는 것이 아닌 직접 조작해보는 것은 논의 시간을 단축시켜 주고, 정확한 동작을 공유할 수 있는 장점이 있습니다. 따라서, 프로토타입을 만드는 데 많은 시간이 걸리지 않는다면 소요되는 리소스를 줄일 수 있게 되죠. (그려놓은 화면을 프로토타입으로 전환하는 데 10분이 채 걸리지 않습니다.)

기획자는 위 과정을 통해 결정된 안을 Flowchart로 정리해 디자인/개발에 WIKI page를 통해 공유를 하는데요. 프로토타입을 만드는 과정에서 이미 그려놓은 화면을 활용, 이동과 아트보드 생성만으로 문서를 만들어 낼 수 있습니다. 아트보드를 Ctrl+C, Ctrl+V 하여 간단하게 WIKI(업무용으로 쓰는 문서 공유 Cloud)에 붙여 넣거나, 인터렉션 설명이 중요한 경우에는 Adobe XD prototype 영상을 GIF로 변환하여 붙여넣기도 합니다. XD에서 GIF를 바로 생성할 수 있다면 정말 좋겠네요!

3-1. Flowchart 그리기 – smartgrid

Adobe XD의 기능 중 Flowchart 작업을 도와주는 기능은 다양합니다.

이중 smartgrid text 적용 기능 활용에 대해 설명드릴께요.

LINE은 여러 국가에서 사용되고 있어서 국가별 언어를 반영한 UI를 고려해 주어야 합니다. 예를 들어 우리말로는 1줄로 보이는 문구가 러시아어에서는 2줄로 길게 보일 수도 있는 것이죠. text smartgrid 기능을 사용하면 각 국가별로 해당 문구가 UI에서 어떻게 보이는지 쉽게 확인할 수 있습니다. 다국어를 text 파일로 저장하고, 글자 위에 txt 파일을 스마트 그리드로 얹어주면 다국어 반영을 곧장 확인할 수 있습니다. 확인 후 UI에 맞지 않는 길이의 언어는 번역을 재요청하는 것이죠.

텍스트를 smart-grid로 배열

다국어를 UI에 일괄 적용

3-2. Flowchart 그리기 – Mask

Mask 기능은 이미지를 원하는 모양으로 잘라낼 때 유용합니다. 특히 기존 이미지가 있고 그것을 고쳐 쓰려고 할 때 유용하죠. 아래 그림은 Reply라는 대화방 기능 Ideation을 하는 과정인데요. 말풍선의 색을 흰색/녹색으로 나누어, 상대방 메시지와 내가 reply 한 것을 구분해 보여주고 싶었습니다.

  1. 잘라내고 싶은 이미지 불러온다. (Drag 해서 XD 창에 놓으면 됩니다.)
  2. 이미지 위에 도형을 그린다. (사각형, 원, 자유 곡선 모두 괜찮습니다.)
  3. 이미지와 도형을 함께 선택하고 Ctrl+Shift+M

이미지 마스킹 하기

마스킹을 활용하여 이미지 수정 및 프로토타입

4. Adobe XD 활용 – 번외편

개인적으로 사용하고 있는 XD 활용법 공유합니다. XD를 통해 일주일 단위로 TODO 관리를 하고 있는데요. 글 초반에 언급한 ‘넓다’ 의 이점 때문입니다. XD의 도화지(?)가 넓다 보니 전지에 포스트잇을 뗐다 붙였다 하는 것과 같이 사용하고 있어요. 아트보드를 여러 개로 나누어 놓고 사용하는데요. 전지가 여러 장인 효과와 같다고 생각할 수 있어요. 중요하고 급한/안 급한 도화지에 그 주에 할 일을 쭉 나열해 놓습니다. 작업을 완료하는 대로 공유 완료, WIKI업데이트 아트보드에 옮겨놓습니다. 간단한 화면은 이 문서에서 바로 그리기도 하고요. 커뮤니케이션을 하다가 중요한 부분은 바로 기입도 해놓고 편리합니다. 한번 활용해 보세요.

XD로 TODO 관리하기

5. 마치며

Adobe XD를 통해서 많은 부분에서 업무 효율을 높일 수 있었습니다. 고마워요, XD! 지금도 좋지만 추가적으로 몇 가지 개선되면 더 좋을 것 같은 부분 공유드리며 글을 마치겠습니다.

그리기 도구

마스킹 도구

가져오기 / 내보내기

프로토타입

작성자: 김성환. 라인플러스

김성환님의 웨비나를 듣고 싶으시면, 여기를 클릭하세요.