Adobe Xd로 와이어프레임 그리기
서비스 기획자들의 일과 중 하나가 와이어 프레임을 그리는 일이다. 물론 나는 와이어프레임보다 회의하고 문서를 작성하고 커뮤니케이션하고 등등의 일을 더 많이 하지만, 어쨋든 서비스 기획자의 필수 스킬 중에 하나가 와이어프레임 그리기이다. 그래서 지난번에 서비스 기획에 사용하는 Tool에서 Adobe Xd를 사용해서 와이어프레임을 그린다고 간단하게 소개를 한 적이 있다.
처음 브런치에 Adobe Xd를 소개할 때와는 달리, 이제는 Adobe Xd 무료 사용이 가능하게 정책도 변경되고 덕분에 이용하는 사람도 많이 늘어나고 있는 것 같다. 그래서 내가 어떻게 이 프로그램을 가지고 와이어프레임을 제작하는지 상세하게 소개하는 시간을 가지려고 한다.
Adobe Xd로 와이어프레임 쉽게 그리는 방법
Adobe Xd는 튜토리얼도 자세하게 나와있고, 간단한 작업을 진행할 때는 무료로 사용 가능해서 쉽게 이용할 수 있는 편이다. 요즘은 앱설치를 하지 않아도 되는 Figma를 많이 쓰는 추세인데, 쓰던 툴 계속 쓰려는 게으른 성향이라 써보지 않아서 비교할 수 없는 점 양해 부탁드린다.(일반적으로 Figma 평이 더 좋은 편이긴 하다.)
그럼 이제부터 Xd를 쉽게 사용하는 방법에 대해 소개하겠다.
1. 단축키를 외워둔다.
어도비 사이트에서 Adobe XD 학습 및 지원에 들어가면 다양한 튜토리얼과 가이드가 나와있지만, 이 중에서 가장 쓸모있는건 단언컨데 단축키 목록이라 할 수 있다. 단축키 목록만 외우면 마우스 클릭질을 줄일 수 있고, 그러면 나의 오른손 두번째 or 세번째 마디관절을 보호할 수 있다.
Adobe Xd를 사용한다면 툴 메뉴 단축키는 필수적으로 외워두자.
디자이너분들은 이 단축키 목록을 매우 많이 알고 다양하게 활용하시는 걸로 아는데, 나는 와이어프레임정도만 그리는 기획자 나부랭이라 전체다 사용하지 않는다. 기획자가 와이어프레임정도를 그릴때 필요한 단축키는 툴 메뉴 관련 키다. 앱을 켜고 상황에 맞춰서 v, r, e, t, l 정도만 키보드로 샥샥 누를 수 있다면 와이어프레임을 그리면서 마우스를 클릭하는데 버리는 시간을 많이 줄일 수 있다. Adobe Xd를 사용한다면 툴 메뉴 단축키는 필수적으로 외워두자.
위 단축키 사이트에서 캡쳐한 이미지2. 무료 템플릿을 다운받아 활용한다
Adobe는 Xd를 초반에 출시할 때부터 무료 템플릿 제공을 꾸준히 해오고 있다. 튜토리얼도 템플릿을 다운받아서 따라해보라는 식이어서, 무료 템플릿이라고 올라온 것들을 다운받아 보는걸 권장한다. 그러면 다른 사람이 제작한 와이어프레임을 벤치마킹할 수도 있고, 아이콘이나 심볼같은 기능들을 가져와 사용할 수 있는 등 여러 장점이 있다. 단, 무료배포된 템플릿이라도 저작권의 개념은 잊지않고 완전 표절하는 일은 없도록 하자. 무료 템플릿은 xdguru나 behance에서 다운받을 수 있는데, 와이어프레임에 필요한 파일은 xdguru에서 많이 구했었다. 각 사이트 들어가보고 필요한 내용을 다운받아 두는걸 추천한다.
*주의할 점: xdguru에는 유료 템플릿이 포함되어 있으니, 무료와 유료 구분을 잘 해서 다운받으세요.
3. 디자이너가 공유한 Xd파일을 적극 재활용한다
우리 팀은 디자이너, 기획자 모두 기본적으로 Adobe Xd를 사용하고 있어서 디자이너분이 기존에 완성한(또는 완성직전인) 파일을 전달 받아서 그걸 와이어프레임에 재활용하고 있다(디자인 시스템이 생기고 나서는 디자이너의 파일을 공유받지 않아도 위의 장점들을 바로 활용할 수 있었다.). 만약 디자이너분이 Sketch를 쓰신다면 Xd와도 호환되니 Sketch 파일을 전달받아 Xd에서 재사용하면 된다. 만약 우리팀은 Xd도 Sketch도 안써요! 할 경우에는 기존에 디자인된 서비스 화면 이미지를 보면서 따라 그리는게 좋다.
와이어프레임인데 디자인된 걸 가져다 쓸 필요 없지 않느냐! 생각할 수도 있다. 일리있는 말이다. 와이어프레임이니 어느정도 모양만 알아볼 수 있을 정도로만 그리는 경우도 많기 때문이다. 하지만 내가 굳이 디자이너의 Xd 파일을 공유받아 사용하는 이유가 있다. 첫번째로, 화면의 GNB 구조를 매번 새롭게 그리지 않아도 된다. 두번째로, 서비스에서 사용하는 아이콘이나 심볼, 컬러 종류를 매번 물어보거나 새롭게 찾아가며 그리지 않아도 된다. 그리고 마지막으로, 서비스 내에서 일부 기능을 MVP(Minimum Viable Product)로 제작해야할 때, 디자인 공수가 들어가지 않고 와이어프레임만으로도 프론트 작업이 가능하단 장점이 있다. 즉, 와이어프레임을 그리는 시간이 단축되고 업무 효율성이 높아졌다.
물론, 기획자가 디자인된 화면을 보고 따라그린다고 똑같이 그려낼 수 없다. 분명 똑같이 따라한다고 따라했지만 디자이너가 만진 화면과 내가 그린 와이어프레임은 천지차이다. 그럼에도 와이어프레임을 디자인에 맞춰 그리는걸 도전해보길 적극 권장한다. "와이어프레임 그리기 스킬이 +10% 되었습니다." 를 느낄 수 있게될 것이다.
4. 참고할 화면 이미지를 옆에 두고 보면서 따라 그려본다.
3번의 연장선상이라고 생각하시면 좋겠다. 디자인된 서비스 화면을 캡처해서 아트보드 옆에 두고 그대로 따라 그리거나, 다른 서비스의 캡처한 화면을 옆에 두고 참고하면서 따라그리면 된다. 이렇게 하면 화면 기획 벤치마크도 되고, 와이어프레임 그리는 기술력이 향상된다. 한번 믿고 따라해보시라! :)
실제로 서비스 기획하고 있는 XD 앱 내 화면5. 어도비 클라우드 저장을 활용한다
Adobe Xd를 좋다고 적극 추천하고 있지만, Adobe 프로그램 특성인지 메모리도 많이 잡아먹고 자잘한 버그들이 많아서 중간에 꺼지는 경우가 빈번하다. 특히 윈도우에서는 이거 그대로 써도 될지 의문을 품을 정도로 버그가 많아서 다른걸로 갈아탈까 아주 잠깐 고민했었다. 하지만 디자인팀에서는 Adobe 프로그램을 메인으로 쓰고 있고, 다른 Tool을 다시 배워야 한다는 부담감이 있어서 그대로 Xd를 사용하게 되었다. 그리고 때마침 Adobe cloud에 자동저장 기능이 생겨서 한참 작업하다 파일 날려먹는 일도 많이 줄어들고 사용성이 많이 좋아졌다.
동시작업에 대한 사용자들의 요구사항이 많이 늘어나서인지 다른 구성원에게 파일자체를 공유하면 동시작업도 가능해졌고, 심볼이나 에셋을 저장하고 활용하기 매우 간편해졌다. 그리고 어도비 클라우드로 파일을 저장하면, PC와 모바일을 별도로 연결하지 않아도 모바일 앱에서 PC로 작업한 내용을 확인할 수 있는 장점이 있었다. 모바일 앱 화면 작업하기가 매우 편해졌달까.
나와 공유된 디자인 시스템이 적용된 Xd 파일들이번에 내가 공유한 Xd로 와이어프레임 쉽게 그리는 방법은 모두에게 통용되는 것이 아닐 것이다. 회사에서 Xd를 사용하는 환경이 갖춰져 있지 않고 혼자서 사용하려고 하거나, 무료로 사용할 경우에는 이렇게 다양한 방식으로 Xd를 활용해서 사용하기 어렵기 때문이다. 하지만 Xd를 적극적으로 활용하면 이런 방법들을 활용해서 와이어프레임을 좀 더 손쉽게 그릴 수 있게 된다는 걸 알리고 싶었다. Xd에 대한 상세한 사용법이나 튜토리얼들은 Adobe 홈페이지에서 나와있기 때문에 내가 굳이 상세히 알릴 필요도 없다 생각했다. 그래서 이번 편에 설명하려고 생각했던 심볼이나 마스킹, 반복그리드에 대한 사용설명은 제외했다. 심볼, 마스킹, 반복 그리드 등에 대한 사용법은 다음에 소개해보겠다. 저 세 기능 모두 와이어프레임을 그리는 정도의 단순 기능이라는 건 알아두시면 좋을 것 같다.
긴 글을 읽어주셔서 감사하다. 최대한 빠른 시일 내에 좋은 글을 가져오도록 노력하겠다.
