UI디자인가이드(스타일가이드,개발가이드,디자인명세) 만들기 (2016년 기준) (내용수정)

(내용수정, 2019-09-18)

본 글은 2016년에 기재된 비교적 오래된 내용을 담은 포스트입니다. 관련 내용을 2019년 09월 기준으로 추가 드립니다.

• 아래 소개된 툴들은 이제 거의 사용되지 않습니다.
• UI디자인가이드 제작에 있어 '제플린'이라는 디자인명세 및 핸드오프 툴이 거의 업계 표준으로 자리잡았습니다.
• 그 외의 일부 기업에서는 전통적인 파워포인트를 여전히 활용하고 있습니다.
• 그사이 명세적 측면보다 디자인의 구체적 활용안 및 컴포넌트화를 다루는 '디자인시스템'이라는 확장된 개념이 등장했습니다.
• 용어의 모호성은 여전합니다. 디자인가이드, 디자인명세, 스타일가이드, 디자인규격 등 혼용되고 있는 상황입니다.
• UI디자인가이드, 디자인명세, 스타일가이드 등의 각 용어에 대한 의미성과 프로젝트 상황에 맞춰 사용하시면 될 것 같습니다.
• 요지는 제플린을 쓰시라는 것과 디자인시스템 등의 개념 등장에 더 주의를 가지시길 권장한다는 것입니다.

UI디자이너들의 디자인 결과물은 개발로 실제 구현되었을 때 비로소 그 작업이 완료되었다고 볼 수 있습니다. 그러기 위해서는 개발자들이 디자인 의도와 텍스트 크기, 여백과 같은 디자인 명세에 대해서 명확히 이해할 수 있게 해야 합니다. 이를 위해서 UI디자인 결과물은 일종의 ‘가이드화(또는 명세화)’ 작업을 필요로 합니다.

UI디자인가이드? (출처 : TheNextWeb)

UI디자인가이드화?

업체, 세부업무분야에 따라서 앞서 말한 ‘가이드화’를 일컫는 용어는 다양하고, 작업 과정, 결과 또한 매우 다양한 편입니다. 특히 결과 단에서의 UI디자인가이드는 크게 다음 두 가지로 분류될 수 있습니다.

UI디자인가이드 : 스타일가이드 (출처 :  Julie Delanoy from dribbble)

UI디자인가이드 : 디자인명세 (출처 : Smashing Magazine)

• 스타일가이드 : 디자인에 필요한 ASSET 및 스타일링, 인터랙션 지침을 담은 문서
• 디자인명세 : 개발에 필요한 디자인 명세를 화면 단위로 명시한 문서

국내에서 보통 이야기하는 UI디자인가이드는 ‘2번 항목’인 디자인명세를 구체화한 문서를 지칭하는 것이 일반적입니다. 하지만 앞서 말씀드린 바와 같이 용어에 있어서는 표준화된 것은(특히 국문의 경우 더욱 더) 없는 실정이며, 디자인가이드, 개발가이드, 스타일가이드 등의 용어로 불리고 있습니다. 영미권에서는 디자인명세와 같은 경우 ‘design spec’ing(디자인 명세화)’와 같은 용어로 부르고 있으며, ‘UI design guideline(UI디자인가이드)’라고 하면 ‘1번 항목’인 스타일가이드을 일반적으로 칭합니다.

본 포스트에서는 디자인 결과물이 실제 개발로 이어지기 위해 반드시 필요한 작업인 ‘디자인명세’ 문서 작성에 필요한 정보를 담아볼 예정입니다. 국내에서는 일반적으로 ‘디자인명세’라는 말 보다 ‘UI디자인가이드, 스타일 가이드’라는 말이 주요 에이전시 및 대기업에서 통용되기 때문에, ‘UI디자인가이드’라는 용어로 해당 작업을 표현하도록 하겠습니다.

첫번째 포스트에서는 관련 툴이 무엇이 있는지 등 작업 관련 제반 요소에 대해서 주로 알아보고, 두번째 포스트에서는 실제 문서 제작에 필요한 관련 정보에 대해서 다루어 볼 예정입니다.

UI디자인가이드는 무엇으로 만드나?

UI디자인을 위한 그래픽 프로그램은 2010년대를 기점으로 해서 크게 2가지 툴을 통해서 이루어지고 있습니다. 바로 포토샵과 MAC OS에 있는 SKETCH가 그것이라고 볼 수 있습니다. 두 프로그램 모두 디자인명세를 만들어 주는 기능을 내장하고 있지는 않고, 써드파티 앱이나 플러그인을 활용해야 합니다. SKETCH의 경우 제플린이라는 서비스가 매우 널리 이용되고 있습니다. 다음은 아직까진 국내에서 가장 많이 사용되는 UI디자인 그래픽 프로그램인 포토샵의 UI디자인가이드 제작 지원 프로그램에 대해 알아 보겠습니다.

(무료) Assistor PS

WitStudio라는 업체에서 개발/유포했던 서비스입니다. 원래 유료였으나, 관련 인력이 네이버에 인수되면서 무료로 풀리게 되었네요. 그래서 그 이상의 업그레이드 패치나 서비스 최적화 등은 없는 것으로 보이나, 다행히도 포토샵CC2017 버전에서도 아직 정상작동하고 있습니다. 높이/넓이 측정과 텍스트 정보 표시 등 기본적인 기능을 원활히 수행하며, 프로그램 자체도 가벼운 편입니다. 유일한 국산 제품이며, 한글 UI를 제공한다는 점 또한 강점이라고 볼 수 있습니다.

• 프로그램 타입 :  포토샵용 플러그인
• 호환 운영체제 : 윈도우&맥
• 다운로드 주소 : http://witstudio.net/ 

(유료) specKing

해외에서 범용적으로 사용되는 디자인가이드화 프로그램인 specKing이라는 이름의 포토샵용 확장프로그램입니다. 가격도 비교적 저렴한 편이고, 레퍼런스도 어지간한 글로벌 빅네임들은 다 있을만큼 화려한 편입니다. 직접 이용해 보지는 못했지만, 말씀 드린 대로 내용 관련해서 명성이 가장 높은 편인 프로그램입니다.

• 프로그램 타입 : 포토샵용 플러그인
• 호환 운영체제 : 윈도우&맥
• 다운로드 주소 : http://www.wuwacorp.com/specking/
• 가격 : $18 (약 20,000원)

(무료+유료) Specctr

Specctr는 일부 기능이 제한된 라이트 버전은 무료로 이용이 가능하며, 보다 확장된 기능들의 경우 월정액 상품으로 판매되고 있는 디자인가이드화 포토샵 플러그인입니다. 마찬가지로 어느정도 유명세를 확보하고 있는 프로그램으로 specKing 보다 더 다양한 기능을 원한다면, Specctr를 사용하는 것도 한 방법이라고 보여집니다.

• 다운로드 주소 : https://specctr.com/cloud/home
• 가격 : 무료 혹은 월 1만원

(무료) INK

(출처 : Enes Usta from Youtube )

무료이면서 직관적인 UI로 매우 쉬운 사용성을 보장하는 포토샵 플러그인입니다. 기능이 다양한 편이지는 않지만, 주요 특징점으로 앞서 말했듯, 쉬운 UI와 무료인 가격을 들 수 있습니다.

• 다운로드 주소 : http://ink.chrometaphore.com/ 
• 가격 : 무료

이상 UI디자인가이드 문서 제작에 있어서 필요한 프로그램에 대해서 알아 보았습니다. 위 프로그램들은 기 서술한 대로 포토샵에 대응하는 플러그인들이며, 워크플로우가 SKETCH로 구성된 경우에는 제플린이라는 프로그램을 통해 UI디자인가이드를 제작하는 것 일반적이라고 합니다. 다음 포스트에서는 실제 UI디자인가이드 문서 제작에 필요한 노하우 및 문서형식 등에 대해서 알아 보겠습니다.