이 글은 코알못의 스케치 플러그인 개발 도전기 (1) - 시작하기에서 이어지는 글입니다. 지난 글에서는 스케치(Sketch) 플러그인을 개발하기 위해 플러그인의 구조와 플러그인 개발을 위해 필요한 것들을 알아봤습니다.


이제 만들어보겠습니다.


  1. 스케치는 MacOS용 애플리케이션이며 플러그인도 MacOS에서만 개발할 수 있습니다. 이 글도 MacOS를 기준으로 작성됐습니다.
  2. 이 글은 스케치 플러그인 개발 방법을 설명하는 글이 아니라 말그대로 ‘개발 도전기'입니다. 코딩을 모르는 사람도 간단한 스케치 플러그인을 개발할 수 있다는 것을 전달하기 위한 것입니다.
  3. 코알못의 스케치 플러그인 개발 도전기 (1) - 시작하기를 먼저 읽어보는 것을 권장합니다.



뭘 만들지?


개발 과정이 순탄하지 않겠지만, 가장 먼저 뭘 만들지 정해야 합니다. 가장 쉬운 방법은 내가 불편했던 것에서부터 시작하는 것입니다. 적어도 나한테는 필요한 것을 만드는 것이기 때문에 순탄하지 않은 개발 과정에서 동기부여가 될 뿐만 아니라 스스로가 사용자로서 기능에 대한 정확한 피드백을 줄 수 있기 때문입니다.


물론 더욱 많은 사람에게 필요한 게 무엇인지 생각해보면 좋겠지만, 이건 어디까지나 개발을 해본다는 것이 목적이기 때문에 너무 깊은 고민은 하지 않았습니다.


스케치를 사용하면서 불편하다고 느꼈던 것 중 하나는, 복수의 페이지를 선택해서 그 페이지들에 속한 아트보드를 한 번에 Export(내보내기) 할 수 없다는 것이었습니다. 다른 것들도 많았지만 그리 복잡한 로직이 필요하지 않아보였기 때문에 플러그인 개발 도전기의 대상으로 낙점했습니다. (물론 모든 기획이 이렇게 단순한 발상과 근거로 진행되지 않거니와, 이렇게 단순한 발상과 근거로 진행된다고 해서 꼭 좋은 결과로 이어지는 것도 아닙니다.)


그럼 “복수의 페이지를 선택해서 그 페이지들에 속한 아트보드를 한 번에 Export 할 수 없다"는 문제를 좀 더 자세히 알아보겠습니다.


우선 제가 저런 작업을 해야했던 이유는 다음과 같습니다.


스티비 런칭을 위한 초기버전 개발이 한창이던 때, 스케치로 와이어프레임을 만들고 이를 인비전(Invision)으로 Export 해서 디자이너, 개발자와 커뮤니케이션을 했었는데, 세부적인 기능이나 시나리오에 대한 정의를 전달하기 어렵다고 느꼈습니다. 그래서 스케치로 와이이프레임을 만들되, 인비전이 아닌 다른 도구를 활용하여 세부적인 기능이나 시나리오에 대한 정의를 전달하기로 했고, 결과적으로는 보편적인 방식인 - 벗어나고 싶었던 - “화면기획서"를, 구글 프레젠테이션으로 만들기로 했습니다.



누구를 위한 화면기획서인가



정리하면 다음과 같습니다.

  1. 스케치로 와이어프레임 제작 (1개 화면 = 1개 아트보드)
  2. 화면 단위인 아트보드를 이미지 파일로 Export
  3. 이미지 파일을 구글 프레젠테이션에 삽입하고 기능, 시나리오 등에 대한 상세 정의를 추가


이런 상황에서 복수의 페이지를 선택해서 그 페이지들에 속한 아트보드를 한 번에 Export 할 수 없다는 것은 큰 불편을 초래했습니다. 아트보드를 복수 선택하는 것은 가능하지만 페이지를 복수 선택할 수는 없었기 때문에, 20여 개의 페이지를 하나씩 선택한 뒤 아트보드를 선택해서 Export 해야했습니다.


그래서 페이지를 하나씩 선택하지 않고 모든 아트보드를 한 번에 Export 할 수 있다면 좋겠다는 생각이 든 것이죠.



근데 이걸 꼭 내가 만들어야 하나?


이미 솔루션이 나와있다면 굳이 고생해서 만들 필요는 없겠죠. 그래서 복수의 페이지를 선택해서 그 페이지들에 속한 아트보드를 한 번에 Export 할 수 없다는 문제를 해결할 수 있는 다른 솔루션은 없는지 찾아봤습니다.


  1. 이런 기능을 제공하는 플러그인이 있는지 찾아봤습니다. Export를 편리하게 하는 플러그인들이 있긴 했지만 복수의 페이지에 속한 모든 아트보드를 한 번에 Export하는 플러그인은 찾지 못했습니다.
  2. 스케치에 유사한 기능 - “Export Artboards to PDF”- 이 있다는 걸 알게됐습니다. 하지만 1) PDF로 저장된다는 점과 2) 선택한 페이지에 있는 아트보드만 Export 하기 때문에 결국 페이지를 하나씩 선택해가면서 Export해야한다는 점에서, 제가 느꼈던 문제를 완전히 해결해줄 수는 없었습니다.


1에서 유사한 플러그인이 있는지 찾아보는 것이 중요한 다른 이유는, 이런 플러그인에서 유사한 기능을 어떻게 구현했는지를 알면 내가 필요한 플러그인을 개발할 때도 도움이 되기 때문입니다.


여전히 과연 나 말고 누가 이런 기능을 필요로 하겠냐는 의구심이 들고 있지만, 어쨌든 나는 필요하고, 다른 솔루션은 없으니, 일단 만들어보기로 했습니다.



그럼 본격적으로 만들어보겠습니다.


일단 위에서 얘기한 복수의 페이지를 선택해서 그 페이지들에 속한 아트보드를 한 번에 Export 할 수 없다는 문제를 해결할 수 있는 논리적인 과정을 생각해봤습니다.


  1. 플러그인을 실행합니다.
  2. 페이지를 조회합니다. (조회한 모든 페이지에 대해 A, B를 반복 실행합니다.)
    1. 페이지를 선택합니다.
    2. 선택한 페이지의 아트보드를 조회합니다. (조회한 모든 아트보드에 대해 I, II를 반복 실행합니다.)
      1. 아트보드를 선택합니다.
      2. Export 합니다.
  3. 플러그인을 종료합니다.


요는 2와 2-B의 반복실행 단계를 자동화한다는 것입니다.


그럼 먼저 위의 내용으로 구성한 코드를 살펴보겠습니다. 이해를 돕기위해 위의 내용을 그대로 주석으로 옮겼습니다. (스케치 플러그인의 파일 구조를 잘 모르겠다면 스케치 플러그인 개발 도전기 (1) - 시작하기를 먼저 읽어보세요.)



위 코드는 아직 동작하는 코드는 아닙니다. 일단 기본적인 내용으로 구성해본 것입니다. 실제로 동작하게 하려면 몇 가지 고려해야 할 것들이 있습니다.


  1. 스케치 플러그인으로 실행되기 위한 함수를 정의합니다. (모든 스케치 플러그인의 스크립트에 공통적으로 필요한 내용입니다.)
  2. 열려있는 스케치 문서를 조회합니다. (모든 스케치 플러그인의 스크립트에 공통적으로 필요한 내용입니다.)
  3. 아트보드에 미리 정의된 Export 설정값을 초기화합니다. (사용자가 Export 설정 값을 따로 정의해놨다면 저장되는 이미지마다 크기가 다를 수 있기 때문에, 이를 무시하기 위한 것입니다.) 방법은 다음과 같습니다.
    1. 선택한 아트보드를 복제합니다.
    2. 복제한 아트보드의 Export 설정값을 초기화합니다.
    3. 복제한 아트보드를 삭제합니다.
  4. 이미지를 저장할 경로를 정의합니다. 방법은 다음과 같습니다.
    1. 저장 경로에 사용하기 위해 페이지 이름을 조회합니다.
    2. 저장 경로에 사용하기 위해 아트보드 이름을 조회합니다.


그럼 위의 내용을 코드에 추가해보겠습니다. 역시 이해를 돕기위해 위의 내용을 그대로 주석으로 옮겼습니다.



아직 한 가지 빠진 게 있습니다. 바로 이미지를 저장할 경로를 정의하기 위해 사용자가 경로를 선택하는(파일을 저장할 때 파인더에서 폴더를 선택하는) 과정입니다.


완성된 코드입니다.



완성된 플러그인 패키지는 여기에서 내려받을 수 있습니다. 이미지 저장 경로 선택 및 호출과 Export 부분의 코드는 Quick Export를 참고했습니다.



스케치 플러그인 개발을 통해 얻은 것


안타깝게도 글을 쓰기 시작했던 시점과 달리, 지금은 스티비 팀의 개발 프로세스가 바뀌었고, 화면기획서를 만들고 있지 않고, 스케치로 작업한 모든 UI/GUI 관련 산출물은 제플린(Zeplin) 또는 인비전 인스펙트(Invision Inspect)로 Export 해서 확인하고 있습니다. 그래서 이번에 만든 플러그인은 이제 쓸 일이 없어졌습니다 (누군가에겐 쓸모가 있었으면 하지만 애초에 나 말고 누가 쓸까 하는 마음이었기 때문에 기대는 하지 않습니다.)


그럼에도 의미가 있었던 건, 코드에 대한 거부감을 줄일 수 있었다는 것입니다.


간단하게나마 스케치 플러그인을 개발해보면서 코드를 구성하는 논리적인 사고의 과정을 경험해볼 수 있었습니다. 문제점을 해결하기 위한 아이디어를 “문장의 나열"이 아닌 “논리적인 구조"로 만들어본다면, 개발자와의 커뮤니케이션이 한층 수월해지지 않을까요?


꼭 스케치 플러그인일 필요는 없습니다. 비개발자가 코딩을 비교적 쉽게 경험해볼 수 있는 다양한 도구가 존재합니다. 프레이머(Framer)도 그중 하나입니다. 자신의 필요에 맞게 - 화면기획서를 만들기 위해 스케치를 사용하면서 느꼈던 불편함에서 출발했던 이 글처럼 - 선택하면 됩니다. 일단 시작해보세요!



참고

The Beginner’s Guide to Writing Sketch Plugins Part 2 — User Notifications

Sketch Developer Reference

Quick Export


작성: 임호열

Posted by slowalk



슬로워크의 스티비 팀에서는 디자인 작업을 할 때 스케치(Sketch)를 적극적으로 활용하고 있습니다. 와이어프레임을 만드는 일부터 GUI를 입히고 간단한 아이콘을 만드는 일까지, 스케치로 시작해서 스케치로 끝난다고 할 수 있을 정도입니다.


스티비 팀이 쓴 스케치 관련 글



스케치로 작업 중인 새로운 스티비의 와이어프레임(좌)과 GUI(우)



스케치를 사용하다보면 가끔씩 ‘이런 기능도 있으면 참 좋을텐데'하는 생각이 들 때가 있습니다. 이런 부족함을 충족시켜주는 것이 스케치의 플러그인*입니다. 스케치 외에도 대부분의 유사한 애플리케이션들(포토샵, 일러스트레이터 등)이 플러그인 기능을 가지고 있지만, 고작 6년 밖에 되지 않았고(26년 된 포토샵과 비교하면 ‘고작 6년’) 19명 밖에 되지 않는 작은 규모의 팀이 만들고 있는 스케치 입장에서, 플러그인의 다양성은 다른 애플리케이션들과의 경쟁에서 앞서나갈 수 있는 좋은 무기 중 하나일 것입니다.


* 플러그인이란 애플리케이션이 제공하지 않는 기능을 사용하기 위해 설치하는 일종의 확장 프로그램을 말합니다.



스케치 공식 홈페이지에는 무려 366개의 플러그인이 소개되고 있습니다. 이제 여기에 소개되는 일만 남았습니다!



스케치 플러그인을 직접 만들어볼 수는 없을까요?


아티스트라면 자신이 사용하는 도구 정도는 직접 만들 줄 알아야 한다는 말이 있듯이, 디지털 시대의 기획자라면 자신의 제품을 만드는 도구를 만들지는 못하더라도 그 도구의 손잡이 정도는 만들 수 있어야 하지 않을까 싶지만, 물론 코알못(‘코딩을 알지 못하는 사람’의 줄임말) 입장에서 플러그인을 만든다는 것은 손잡이는 커녕 정말이지 상상도 안 되고 감도 잡히지 않는 것입니다. 플러그인은 누군가 만들어놓은 걸 내려받아서 설치해서 사용해보기만 했지, 그걸 직접 만든다는 생각은 해본 적이 없으니까요.


하지만 스케치 플러그인은 비교적 접근하기 쉬운 CocoaScript*로 만들 수 있다는 사실에 약간의 흥미가 생겼고(정확히 말하면 두려움이 줄어들었다는 게 맞겠네요), 마침 개발 과정을 아주 쉽게 소개한 글을 발견하고 도전해보기로 했습니다.


* CocoaScript는 스케치가 실행되는 MacOS의 개발 언어인 Objective-C와 Cocoa의 코드를 비교적 쉬운 Javascript 문법으로 사용할 수 있게 해주는 프레임워크입니다.


그럼 시작합니다.


  1. 코알못이 무작정 도전해본 스케치 플러그인 개발 과정을 연재할 예정입니다. 코알못이 쓴 글이니 코알못이 아닌 분의 입장에서는 지루할 수 있습니다. 물론 저같은 코알못인 분의 입장에서도 지루할 수 있습니다.

  2. 스케치는 MacOS용 애플리케이션이며 플러그인도 MacOS에서만 개발할 수 있습니다. 이 글도 MacOS를 기준으로 작성됐습니다.

  3. 중간에 포기한다면 이 글이 마지막이 될 수도 있습니다.



준비하기


1. 텍스트 에디터를 설치합니다.

글을 쓰려면 노트가 필요하듯 코드를 쓰려면 에디터가 필요합니다. 프론트엔드 개발자들이 가장 많이 사용하는 에디터 중 하나인 Sublime Text 3를 추천합니다.


2. '콘솔(Console)'을 실행합니다.

디버깅(코드를 실행한 결과를 확인하는 과정)을 위해 MacOS의 기본 애플리케이션인 콘솔을 실행합니다. MacOS의 ‘Spotlight’(단축키 control+space)에서 ‘콘솔’ 또는 ‘console’을 검색하면 실행할 수 있습니다. 콘솔이 실행되면 왼쪽 사이드바에서 ‘리포트'의 ‘system.log’를 선택합니다. 여기에서 스케치 플러그인을 개발하면서 작성한 코드가 어떤 결과를 출력하는지 확인할 수 있습니다.


콘솔은 이렇게 생겼습니다. 외계어 같은 것이 써있네요. 검색 창에 ‘sketch plugin’를 입력하면 스케치 플러그인과 관련된 로그만 따로 볼 수 있습니다.



3. 스케치 플러그인 폴더를 찾아갑니다.

스케치 플러그인 폴더의 경로는 다음과 같습니다. (이 폴더는 스케치 플러그인을 개발하면서 자주 확인해야 하므로 파인더(Finder)의 즐겨찾기에 추가해두면 좋습니다.)

/사용자/[사용자 이름]/라이브러리/Application Support/com.bohemiancoding.sketch3/Plugins


이미 설치한 플러그인이 있다면 스케치 플러그인 폴더에 ‘.sketchplugin’이라는 확장자를 가진 파일이 있는 것을 확인할 수 있습니다.



플러그인 만들기


스케치 플러그인은 ‘.sketchplugin’이라는 확장자를 가진 패키지 파일로 존재합니다. 이미 설치한 플러그인이 있다면 ‘.sketchplugin’ 파일을 오른쪽 클릭한 뒤 ’패키지 내용 보기'를 선택하면 플러그인을 구성하는 파일들을 확인할 수 있습니다.


스케치 플러그인의 파일 구조는 다음과 같습니다.



‘.sketchplugin’ 아래 ‘Contents’ 폴더가 있고 그 아래 ‘Sketch’ 폴더가 있습니다. ‘Sketch’ 폴더 안에는 플러그인의 기본 정보를 담고있는 ‘manifest.json’ 파일과 플러그인이 실제로 작동하는 코드를 담고있는 js 파일이 있습니다.


위 구조를 참고하여 ’MyPlugin’이라는 샘플 플러그인을 만들어보겠습니다.


1. ‘Plugins’ 폴더 아래 ‘MyPlugin.sketchplugin’이라는 폴더를 만듭니다.


2. ‘MyPlugin.sketchplugin’을 오른쪽 클릭한 뒤 ’패키지 내용 보기'를 선택합니다. (‘MyPlugin.sketchplugin’은 확장자를 가지고 있기 때문에 더블클릭하면 파일이 실행됩니다. 폴더를 탐색하려면 ’패키지 내용 보기'를 선택해야 합니다.)




3. 이 안에 ’Contents’라는 폴더를 만듭니다.


4. ‘Contents’ 폴더 안에 ’Sketch’라는 폴더를 만듭니다.


5. 이제 ‘manifest.json’ 파일과 js 파일을 만들 차례입니다. js 파일의 이름은 편의상 ‘MyScript.js’로 하겠습니다. js 파일의 이름은 원하는대로 수정해도 되지만 ‘manifest.json’ 파일 안에 js 파일의 이름이 정의되어있기 때문에 함께 수정해야 합니다. 설치한 텍스트 에디터를 실행하고 각각 아래 코드들을 붙여넣어 저장합니다.


먼저 ‘manifest.json’ 파일입니다.



'manifest.json' 파일은 플러그인에 대한 기본적인 정보와 실제 플러그인을 실행하기 위한 플러그인 파일 정보, 스케치 애플리케이션에 표시할 메뉴 구성, 단축키, 플러그인 식별 값 등 일종의 트리거(trigger)를 담고 있습니다.


그리고 MyScript.js 파일입니다. js 파일의 이름을 수정하면 ‘menifesto.json’의 ’“script” : “MyScript.js”’ 부분을 함께 수정하면 됩니다.



'MyScript.js' 파일이 담고있는 이 코드가 실제로 플러그인이 동작하는 내용입니다. 코드의 내용에 대한 자세한 설명은 우선 건너뛰겠습니다. 



플러그인 실행하기


이제 스케치의 ’Plugins’ 메뉴를 열어보면 ’My Plugin’이라는 플러그인이 설치된 것을 확인할 수 있습니다. ‘My Plugin’의 ‘Get Page Names’를 선택하면 ‘MyScript.js’의 코드가 실행됩니다. 




플러그인 실행 결과 확인하기


플러그인이 실행된 결과는 ‘준비하기’ 단계에서 미리 열어놨던 콘솔에서 확인할 수 있습니다. 왼쪽 사이드바에서 ’리포트’의 ‘system.log’를 선택하면 나오는 화면에 아래와 같은 내용이 출력됐다면 플러그인이 정상적으로 실행된 것입니다.


플러그인을 실행할 때 선택되어있던 페이지 이름인 ‘Page 1’이 출력됐습니다!!



여기까지 문제없이 잘 따라오셨나요? 이제 스케치 플러그인을 생성하고 코드 실행 결과를 확인하는 방법을 알게 됐을 뿐입니다. 하지만 일단 이 과정을 이해했다면 적어도 다른 플러그인의 구조를 뜯어보는 것까지는 가능할 것입니다. 


이어지는 글에서는 플러그인을 통해 스케치의 기능을 어떻게 제어하는지, 그것을 코드로 어떻게 구현하는지 알아보겠습니다. 그 전까지 제가 포기하지 않는다면…



참고

The Beginner’s Guide to Writing Sketch Plugins Part 1 — Getting Started

Sketch Developer



Posted by slowalk

올 초 인터랙션 디자이너로 스티비에 합류하면서 어도비(Adobe)를 벗어나 다양한 프로토타이핑 툴을 사용했습니다. 그 중 가장 선호하는 툴은 스케치(Sketch)로, 새로 리뉴얼하는 스티비의 90% 이상을 스케치 기반으로 만들고 있습니다. 처음에는 왜 스케치를 쓰는 디자이너가 많아지는 걸까? 의문이 들었는데요. 스케치를 쓸수록 반복적인 업무가 효과적으로 단축되고 협업할 때 편리해서 제게도 다른 툴을 제치고 가장 많이 사용하는 툴로 자리잡았습니다.



지난해, 디자이너 툴 서베이 결과에 따르면 조사 대상자 중 스케치 사용자가 34%, 포토샵 사용자는 29%로 스케치 유저가 포토샵 사용자보다 많았습니다. 기존 유저 중 절반을 스케치에 빼앗겨버린 어도비가 안쓰러울 정도였는데요. 이렇게까지 유저들이 포토샵에서 스케치로 작업 환경을 옮겨간 이유는 무엇일까요? 바로 아직까지 어도비에서 모바일 어플리케이션 제작에 최적화된 툴을 내놓지 않았기 때문입니다.


모바일 어플리케이션 디자인은 화면을 만든 후 끝나는 작업이 아니라 직접 사용해보며 기획한 대로 시나리오가 흘러가는지, 화면 이동이 자연스러운지 여러 번 테스트를 거쳐야 합니다. 이때 스케치로 작업하면 레이어까지 그대로 활용해 프로토타입을 만들 수 있는 여러 도구가 있어 다양한 프로토타이핑을 시도해볼 수 있습니다. 하지만 어도비에서는 Photoshop과 Illustrator에서 만든 작업물을 이미지로 추출한 후 AfterEffect나 Keynote 등을 활용해 프로토타이핑을 하게 되는데, 이때 작업에 필요한 레이어를 추출하는 것부터 쉬운 일이 아닙니다.


이렇듯 UI/UX 디자이너들은 빠르게 프로토타입을 만든 후 논의와 수정을 거쳐 새로운 서비스를 내놓아야 하는 환경에 놓여있는데 어도비의 프로그램은 이런 흐름을 쫓아가지 못하고 기존의 개별 프로그램만 업데이트하고 있던 것이죠. 그 사이 UI/UX 디자이너들은 자신들의 메인 툴을 어도비에서 스케치로 옮겨버리게 된 것입니다.


그렇다면 디자인 프로그램의 제왕인 어도비가 유저들이 마구 이탈하는 상황에서 가만히 손놓고 당하고 있을까요? 아닙니다. 이들도 UI/UX 툴의 춘추전국시대를 재패할 엄청난 무기를 만들고 있습니다. 그것이 바로 “Adobe XD(Experience Design)”입니다.


어도비 XD(Experience Design) 프리뷰 공개


어도비는 스케치의 가장 큰 단점인 “스케치만 사용해서 프로토타이핑까지 끝낼 수 없다”는 점을 노리고 스케치와 스케치 플러그인들의 장점을 합친 XD를 시장에 내놓았습니다(아직 시험판입니다). 근데 이게….시험판인데도 ‘우와!’ 소리가 납니다. 그도 그럴 것이 스케치와 다양한 플러그인 조합을 사용해 만든 편리한 디자인 환경을 어도비 XD 하나로 경험할 수 있게 했다는 점이 어마어마한 장점이기 때문입니다. 특히 디자인과 프로토타이핑을 하나의 어플리케이션에서 작업할 수 있는 것은 어도비 XD가 지금까지 나왔던 자잘한 프로토타이핑 툴과 스케치를 대체할 수 있는 유일한 대체제로 우뚝 설 수 있다는 것을 점을 시사하고 있습니다.


그럼 이제 본격적으로 Sketch와 Adobe XD를 비교해보겠습니다.



쉽게 사용할 수 있는 스티비의 새로운 에디터를 만든 스케치!

스케치의 기본 인터페이스



단순 반복작업을 일괄적으로 처리


스케치를 통해 다양한 사이즈로 이미지를 추출하는 모습



이미지를 다양한 모바일 화면에 적합한 크기로 추출할 때 이미지마다 저장과정을 반복해야 하는 기존 프로그램과 달리 스케치는 다양한 크기와 포맷으로 이미지를 한번에 추출할 수 있습니다.


이런 단순 반복 작업일수록 스케치의 장점이 가장 돋보이는데요. 여러 페이지에 반복해서 사용하는 도형을 “심볼”로 정해놓고 작업 중간에 “심볼” 하나를 수정하면 전체에 반영되기 때문에 일일이 수정하지 않아도 빠르게 작업을 마칠 수 있습니다. 이 밖에도 도형을 만드는 것부터 정렬하는 것 까지 이렇게 편할 수가! 하는 순간들이 한 두 번이 아닙니다.


다양한 협업툴

웹 서비스를 만들 때 기획자-디자이너-개발자간의 원활한 소통이 가장 중요합니다. 이를 위해서 다양한 문서작업을 하게 되는데, 스케치를 활용하면 문서작업에 들이는 시간이 훨씬 줄어듭니다.

먼저 시나리오를 만들때 스케치를 활용하면, 각 화면을 인비전(Invision)과 연동해 시나리오가 제대로 만들어졌는지 간단한 프로토타입을 빠르게 만들어볼 수 있습니다. 시나리오 확인 후, 디자이너는 시나리오 파일에 그대로 디자인을 얹어 작업을 진행할 수 있습니다. 따로 틀을 다시 그릴 필요가 없이 한 파일로 mock-up과 시나리오 프로토타이핑 그리고 디자인까지 연동이 가능합니다.


스케치로 작업한 파일을 제플린으로 확인하는 모습


디자인을 마친 후엔 스케치로 작업한 파일을 제플린(Zeplin)으로 연동하게 되면 자동으로 각 페이지의 asset이 얼마인지 개발자가 보기 편하도록 이미지를 문서로 변환해 보여줍니다. 이때 이미지 파일도 함께 연동할 수 있어 디자이너와 개발자 사이에 쓸데없이 오고 가는 문서의 양과 문서를 제작하는데 걸리는 시간을 획기적으로 줄일 수 있습니다.(Photoshop도 CC버젼부터 제플린을 사용할 수 있습니다.)


만약 텍스트 여백 때문에 제플린에 디자이너가 의도한 정확한 수치가 나타나지 않는다면 measure를 사용해 정확한 간격을 입력할 수 있습니다(지금까지 단점으로 지목된 부분은 어도비 CC에서 많이 개선되었습니다).




스케치에게 빼앗긴 유져를 되찾으려 왔다: 어도비 XD

XD의 시작화면. 다양한 사이즈의 화면을 선택해 디자인을 시작할 수 있습니다.


어도비에서도 UI, UX유저를 겨냥한 어도비 XD를 만들었습니다. 스케치와 다양한 프로토타입 툴에 빼앗긴 기존 유저를 되찾아 올 수 있을까요? 지금은 정식 버전 이전으로 프리뷰 버전만 출시되었지만 앞으로 출시될 XD의 모습을 미리 살펴보도록 하겠습니다.


단축키 = 기존 어도비+스케치

디자이너들은 프로게이머와 견줄 수 있을 정도로 끊임없이 단축키를 누르며 작업합니다. 그런데 스케치와 어도비 계열 프로그램은 서로 단축키가 달라 스케치로 작업하다 Photoshop이나 Illustrator에서 작업을 하게 되면 머리와 손에서 단축키가 충돌을 일으킵니다. 허나 XD는 어도비에서 만든 프로그램 아닙니까! 어도비에서 사용하던 단축키를 그대로 사용할 수 있는 것부터 내집에 온듯 편안한 기분이 들게 해줍니다.(만약, XD에서 단축키는 물론이고 Illustrator와 Photoshop 파일까지 자유자재로 호환이 된다면 유저들은 다시 어도비에 충성을 맹세할 것입니다)


Repeat Grid

Repeat Grid로 반복적인 디자인을 구현하는 XD


스케치에서는 craft 플러그인을 활용해서 만들 수 있는 Repeat Grid를 XD에서는 버튼 하나로 바로 구현 가능합니다. (추측이지만 craft팀에서 XD 데모 영상 중 특별한 툴바 없이 finder에서 파일을 드래그만 하면 이미지와 글이 알아서 변경되는 부분을 보고 뒷목을 잡지 않았을까 싶네요.) Repeat Grid, 이것 하나 만으로도 어도비 XD가 위대해 보이는 부분입니다.


인터페이스

Design과 Prototype 패널로 쉽게 페이지를 오고갈 수 있습니다.


스케치와 흡사합니다. 스케치를 사용하던 유저는 조금 더 쉽게 사용할 수 있습니다. 오른쪽 패널은 정렬과 크기, 컬러 등을 선택할 수 있고 왼쪽은 툴이 나열되어 있습니다. 레이어 창이 없는 것이 스케치와 다른 부분입니다. 디자인과 프로토타입 패널도 쉽게 오고갈 수 있습니다.


디자인과 인터렉션을 한번에. 완벽한 프로토타이핑툴

XD는 프로토타입을 만들때 그 장점이 돋보입니다. 스케치에서는 프로토타입을 만들기 위해서 다른 어플리케이션과 스케치파일을 연동시켜 작업하는 것이 일반적입니다. 반면 XD는 디자인과 프로토타입을 한번에, 하나의 어플리케이션 안에서 만들 수 있는 툴입니다.



만드는 방법도 아주 간단합니다. 화면이 시작하는 지점을 클릭하고 그 다음 나타나는 화면을 선택하고 세부 사항을 정하면 완성됩니다. 이렇게 만든 프로토타입은 웹에서 바로 실행해볼 수 있고 핸드폰으로 미러링해 직접 동작해보는 테스트도 가능합니다. URL도 생성할 수 있어 다른 사람들과 바로 공유할 수도 있습니다.


기존 어도비 유저를 그대로 흡수할 가능성이 높은 XD와 다양한 어플리케이션과 함께하는 스케치. 그 최후의 승자가 누가 될까요. UI/UX툴의 홍수 속에서 어서 빨리 XD 정식버전이 나오길 기대합니다.


참고: adobe XD, design tools survey

작성: 조은지


Posted by slowalk

슬로워크에서는 스티비라는 이메일마케팅 서비스를 만들고 있습니다. 스티비처럼 서비스를 새로 만들어나가는 단계에서 가장 많이 하는 일 중 하나는 서비스를 만들기 위한 화면을 설계하는 것입니다.



스티비를 만드는 과정은 대략 이렇습니다.



화면 설계의 산출물은 디자인과 개발의 밑바탕이 되는 것이기 때문에 화면 설계 단계에서는 디자이너, 개발자와의 소통이 중요합니다. 그 산출물 또한 디자이너, 개발자가 활용하기 쉬운 형태여야 합니다.


화면 설계의 산출물 중 하나는 와이어프레임(Wireframe)입니다. 와이어프레임이란 단순한 선으로 화면의 레이아웃을 표현하는 것을 말합니다.


더 읽기 > UI, UX 기획을 쉽게, 와이어프레임(Wireframe)



슬로워크에서는 원래 Moqups라는 도구를 사용하고 있었고 스티비 팀에서도 마찬가지였습니다. 하지만 몇 가지 아쉬운 점이 있었습니다.


  1. 제공되는 스텐실(Stencil)로는 부족합니다.
    Moqups에서는 스텐실이라는 이름으로 미리 제작된 UI 요소를 바로 끌어다 쓸 수 있도록 제공하는데, 제공되는 것만으로는 충족되지 않는 경우가 있었습니다. 일반적으로 사용되는 UI 요소는 대부분 제공하지만 오히려 필요하지 않는 것까지 포함되어 있다 보니 정작 필요한 걸 찾아 쓰는 데 오히려 불편함을 느끼기도 했습니다.

  2. 인터랙션을 표현하기 어렵습니다.
    화면 간 이동은 표현할 수 있지만 팝업이나 고정된 레이어 등 화면 단위가 아닌 인터랙션은 표현하기가 어려웠습니다. 물론 화면설계 단계에서 모든 인터랙션을 정확히 표현할 필요는 없지만 자주 사용되는 단순한 인터랙션을 매번 따로 설명해야하는 불편함이 있었습니다.


이런 아쉬운 점에도 불구하고 Moqups는 매우 훌륭한 도구임에는 틀림없습니다. 하지만 와이어프레임을 만드는 기획자가 디자인 툴을 사용하는 데 비교적 익숙한 편이었기 때문에 이런 아쉬움을 충족시켜줄 만한 새로운 도구를 찾아보기로 했습니다.


그래서 사용해보기로 한 것이 스케치(Sketch)와 인비전(Invision)입니다.





스케치는 UI 디자인에 최적화된 도구입니다. 빠르고 간편한 기능으로 포토샵을 대체하고 있습니다. 한국에서도 포토샵 대신 스케치를 사용하는 디자이너들이 점점 늘어나고 있는 추세입니다. 스티비 팀도 디자인 업무에 스케치를 사용하고 있습니다.



스케치 소개 영상



인비전은 화면 간 인터랙션을 표현하는 프로토타이핑 도구입니다. 디자인 된 화면을 불러와 어떤 사용자 행동에 대해 화면이 어떻게 전환되는지 정의할 수 있습니다. 그리고 이렇게 만든 결과물을 다른 사람과 공유하고 피드백을 받기에 용이합니다.



인비전 소개 영상



정확히 말하자면, 스케치와 인비전은 디자인 산출물을 만드는 과정에서 빠르고 효율적으로 프로토타이핑하고 그 결과물을 공유하기 위한 도구라고 볼 수 있습니다. 실제로 대부분 그렇게 활용하고 있기도 하죠. 하지만 와이어프레임 작업을 위한 도구로도 사용할 수 있다고 생각했고, 그래서 직접 활용해보기로 했습니다.



스케치와 인비전으로 만든 스티비 와이어프레임들



방법은 단순합니다. (사실 스케치와 인비전을 활용한 일반적인 프로토타이핑 과정과 다를 바 없습니다. 그 대상이 디자인 산출물이냐 와이어프레임이냐의 차이일 뿐입니다.)


  1. 스케치에서 아트보드(Artboard) 단위로 화면별 와이어프레임을 만듭니다.
  2. 스케치 파일을 인비전에서 불러와 화면 순서를 정리합니다.
  3. 인비전에서 화면 간 이동, 팝업, 스크롤 등 간단한 인터랙션을 정의하고 부연설명이 필요한 곳에 노트를 추가합니다.
  4. 인비전 링크를 동료들에게 공유하고 코멘트를 활용하여 의견을 주고받습니다. 필요하다면 사용자에게 디자인을 미리 공개하고 피드백을 받는 것도 가능합니다. (스티비는 새로운 에디터의 디자인 시안을 인비전으로 공개하여 피드백을 받았습니다.)



함께 사용하면 좋은 것


인비전 싱크(Invision Sync)

스케치 파일과 인비전 프로젝트를 동기화합니다. 스케치에서 수정한 내용이 인비전 프로젝트에 바로바로 반영됩니다.


크래프트(Craft)

인비전에서 만든 스케치의 플러그인입니다. 한 가지 요소를 그리드 형태의 배치로 복제해주고, 이미지 요소를 라이브러리 형태로 관리하고, 공개된 이미지를 무작위로 불러와 배치하고, 텍스트를 무작위로 입력해주는 등의 기능을 제공합니다.


와이어프레임 키트

공개된 와이어프레임 키트를 사용하면 스케치에서 UI 요소를 직접 그릴 필요가 없습니다. Teracy Wireframe, Bootstrap 3 GUI를 추천합니다.



다른 와이어프레임 도구와 비교했을 때 장점은 이렇습니다.


  1. 다양한 UI 요소를 표현할 수 있습니다.
  2. 디자인 산출물과 연속성이 생깁니다. 와이어프레임을 만들 때 사용한 레이어와 심볼의 이름과 구조를 디자인 작업 시 그대로 사용할 수 있습니다.
  3. 단순한 인터랙션은 글이나 말로 설명할 필요없이 직접 표현할 수 있습니다.
  4. 공유가 쉽고 피드백을 주고받기 쉽습니다.


단점도 있습니다.


  1. UI 요소를 수정할 때 시간이 오래 걸립니다. 다른 와이어프레임 도구는 제공되는 UI 요소에서 간단한 수정만으로도 메뉴의 수를 늘린다든가 버튼의 스타일을 변경할 수 있지만, 스케치에서는 직접 수정해야 합니다.
  2. 전체적인 화면 구조나 순서를 파악하기 어렵습니다. 직접 클릭하면 화면이 어떻게 이동하는지 확인할 수 있지만 전체적인 흐름을 확인할 수는 없습니다.


스티비팀에서도 화면설계 단계에서 스케치와 인비전을 활용해본 건 이번이 처음이었고 이번에 알게된 단점을 어떻게 보완할 수 있을지 고민하고 있습니다. 전체적인 화면 구조나 순서를 파악할 수 있도록 화면 단위의 시나리오를 표현한 별도의 아트보드를 만들고 꼭 필요한 부분만 인비전으로 옮기는 것이 대안이 될 수 있습니다. 어쩌면 아예 다른 도구를 사용하는 게 더 나을 수도 있겠죠.


스케치나 인비전이 정답이 아니듯이 어떤 도구로 서비스 전체의 기획 내용을 완벽히 전달할 수는 없습니다. 문서가 필요할 때도 있고 표가 필요할 때도 있고 순서도가 필요할 때도 있습니다. 기획의 본질은 커뮤니케이션입니다. 중요한 것은 상황에 따라 커뮤니케이션을 효율적으로 할 수 있는 도구를 선택적으로 사용하는 것입니다.



by 낙타 발자국

Posted by slowalk