스케치 프로젝트를 처음 해보신 디자이너라면 무엇부터 시작해야 할지, 어떤 프로세스로 진행해야하나 막막하고, 난감한 경우들을 있었을 거란 생각이 듭니다.

스케치를 처음 접하며 저도 무작정 인터넷 검색이나 참고서적과 자료들을 찾아 보면서 여러 기능들을 알아가고 프로젝트에 적용해가며 무작정 부딛혀 나가면서 진행하다 보니 스케치의 기능이나 디테일적인 부분들은 어느 정도 사용할 수 있는 수준이 되었지만 막상 새로운 프로젝트를 만나게 되면 또 어떻게 시작할지 다시 막막해지는 경험이 있었습니다.
이 글은 저와 같이 스케치 프로젝트를 시작할 때 막막하고 또 어려움을 겪는 디자이너들에게 보다 효율적이고 체계적인 프로세스와 디자인 시스템을 설명하고자 작성되었습니다.

스케치 라이브러리를 사용한 디자인 시스템

스케치 라이브러리 디자인 시스템을 사용하면 보다 체계적이고 효율적인 프로젝트를 수행할 수 있습니다.
그렇다면 왜 라이브러리 디자인 시스템을 사용하면 체계적이고 효율적일까?

라이브러리 디자인 시스템은 필요한 서비스의 요소들을 한 번씩만 제작하여 작업시간을 단축시키고, 프로젝트 전반에 일관성을 유지하기 쉬워진다는 장점이 있기 때문입니다.
라이브러리 디자인 시스템은 어떻게 하는 건데? 라는 질문에 지금부터 라이브러리 디자인 시스템을 Brad Frost의 Atomic Design 방법론에 접목하여 프로젝트를 진행해가는 과정을 설명하려 합니다.

이 진행 방식은 하나의 예제이며 참고할만한 하나의 방법론일 뿐 정답은 아닙니다.
Brad Frost의 Atomic Design에 따르면 “Atomic Design은 디자인 시스템 제작을 위한 명확한 방법론을 제공하며 고객과 팀원은 디자인 시스템의 개념이 실체화되어 눈앞에 보여 디자인 시스템의 개념을 더 잘 이해할 수 있게 됩니다.” 라고 Atomic Design의 장점을 설명했습니다.

Atomic design을 라이브러리 디자인 시스템에 적용시켜 프로젝트를 시작한다면 라이브러리를 만드는 것부터 시작할 수 있습니다. 즉 모든 심벌을 라이브러리화 시켜 작업하는 것입니다.
라이브러리화된 심벌은 Atomic Design의 ATOMS 단계입니다. 이 ATOMS 단계는 라이브러리 디자인 시스템에서 매우 중요한 단계입니다.

Atomic design을 라이브러리 디자인 시스템에 적용시켜 프로젝트를 시작한다면 라이브러리를 만드는 것부터 시작할 수 있습니다. 즉 모든 심벌을 라이브러리화 시켜 작업하는 것 입니다.
라이브러리화 된 심벌은 Atomic Design의 ATOMS 단계입니다. 이 ATOMS 단계는 라이브러리 디자인 시스템에서 매우 중요한 단계입니다.

ATOMS(원자)_단계
색상에 맞는 새 스케치 문서 만들기

새 스케치 문서의 이름을 프로젝트_0000으로 만들어 현재 진행 중인 다른 프로젝트와 혼동하지 않도록 시작했습니다.
라이브러리 디자인 시스템의 각 색상에 대한 스타일을 만들어 범주로는 primary, secondary, greyscale를 사용했고 색상 구조를 나누는 표기 방식으로는 ‘/’ 사용했습니다.
* /는 폴더 구조를 분기시켜주는 중요한 역할을 합니다.

컬러를 심벌로 만들 때 검정 / 화이트 / 회색 / 기본 (시스템의 기본 색상) / 성공 / 경고 / 오류 등 같은 색상 분기는 이후 작업에서 유연성과 일관성을 보장하는 데 도움이 됩니다.

* 색상 문서를 라이브러리로 전환 색상 문서를 저장했다면 다음은 문서를 스케치 라이브러리로 바꾸는 것입니다. 스케치 파일을 라이브러리에 사용할 때마다 이 작업을 수행해야 합니다. 색상 문서를 라이브러리로 전환하는 방법은Sketch > Preferences > Add Library > 라이브러리 문서 선택위의 예제를 사용하여 hello_color 문서를 첫 번째 라이브러리로 만들었습니다. 색상 문서는 이제 라이브러리이므로 다른 스케치 파일 안에 색상을 중첩할 수 있습니다.

ATOMS(원자)_단계
새 ICON 문서 만들기

아이콘에 대한 새 문서를 만들고 문서 이름을 지정하여 색상 문서와 같은 폴더에 저장합니다.
라이브러리 디자인 시스템의 모든 구성 요소가 들어있는 디렉토리입니다.

아이콘을 만들고, 아이콘 모양 아래에 투명 컨테이너를 만들었습니다.
아이콘 모양 위에 색상 문서 라이브러리의 색상 심벌(삽입 > hello_color 색상)을 삽입했습니다.
다음으로 아이콘 모양을 마스크 (Ctrl + 클릭 > 마스크)로 바꾸면 아래의 원래 아이콘 모양을 나타나게 됩니다.

*아이콘에 hello_color 라이브러리를 추가해 마스크를 씌우면 추후에 라이브러리의 컬러를 손쉽게 변경할 수 있습니다.
따라서 컬러 라이브러리에 icon_normal / icon_pressed 등 상태 값 컬러를 추가해주면 유용하게 사용할 수 있습니다.

ATOMS(원자)_단계
새 TEXT 문서 만들기

텍스트 스타일을 정의하고 라이브러리화 시켜 진행한다면 보다 편리하게 프로젝트를 진행할 수 있습니다.
텍스트 스타일을 설정할 때 정렬을 각각 Left, Center, Right로 정렬하고 컬러를 분기시켜서 적용하면 편리합니다.
그 후 링크, 주석, 버튼, 경고 등 여러 텍스트 스타일을 추가하면 유용하게 프로젝트에 적용할 수 있습니다.

ATOMS(원자)_단계
과정 반복

위의 각 원자에 대한 과정을 반복하여 라이브러리 파일을 프로젝트 폴더에 취합합니다.
프로젝트 성격에 따라 dropbox 혹은 google drive에 취합할 수 있습니다.

* 라이브러리 파일 업데이트각 라이브러리 파일 수정 시 프로젝트 마스터 스케치 문서에 적용해야 합니다. 마스터 스케치 문서 오른쪽 상단에 라이브러리 업데이트 알림이 표시됩니다.표시된 메시지를 클릭하고, 동기화시키면 아주 간단하게 라이브러리를 업데이트를 할 수 있습니다.

 MOLECULES(분자)_단계

분자는 서로 다른 특성을 가진 원자의 그룹입니다.
분자는 비교적 단순한 GUI 요소 그룹이기 때문에 분자 단계도 라이브러리화 시킬 수 있습니다.

ORGANISMS(유기체)_단계

유기체는 분자, 원자의 그룹 혹은 다른 유기체로 구성된 비교적 복잡한 UI 구성 요소입니다.
유기체는 인터페이스의 별개의 섹션을 형성합니다.

TEMPLATES(템플릿)_단계

템플릿 단계는 디자인 시스템의 요소들을 의도적으로 구성하는 계층 구조입니다.
템플릿은 구성 요소들을 레이아웃에 배치하고, 디자인 콘텐츠 구조를 설명하는 페이지 레벨의 객체입니다.

PAGES(페이지)_단계

페이지는 실제 콘텐츠가 있는 UI의 모습을 보여주는 템플릿입니다.
페이지 단계는 Atomic Design의 가장 구체적인 단계입니다. 결국 이 단계에서 모든 구성 요소가 모여
아름답고 기능적인 사용자 인터페이스를 형성하게 됩니다.

Atomic Design을 활용한 라이브러리 디자인 시스템 구축

지금까지 Brad Frost의 Atomic Design을 적용한 라이브러리 디자인 시스템 프로세스에 대해 알아보았습니다.
Atomic Design의 원자, 분자 단계를 빌딩의 블럭이라고 생각하면 이해하기 좀 더 편합니다.
각 블럭은 디자인의 일관성을 갖게 하고 빌딩을 견고하게 하는 토대가 됩니다.
즉 라이브러리 구축을 잘해놓으면 반복되는 작업을 수행하는 데 걸리는 시간을 단축시키고, 작업의 반복성을 줄여 일관성 갖춘 튼튼한 프로젝트가 될 것입니다.

라이브러리 파일 관리

라이브러리는 하나의 파일로 여러 사람이 다양한 페이지의 디자인 페이지를 만들 수 있습니다.
즉 하나의 라이브러리는 프로젝트에서 매우 큰 비중을 차지합니다. 라이브러리 관리자는 프로젝트를 전반적으로 파악할 수 있는 능력이 필요하며 다른 팀과 원활한 소통이 가능한 위치의 직급의 인원을 배치하는 것이 효율적이라고 생각합니다.
라이브러리를 관리자의 능력에 따라 프로젝트의 유지 보수 시 작업의 리소스를 단축시킬 수 있고, 늘어날 수도 있습니다. 그만큼 라이브러리 관리자가 프로젝트에 차지하는 비중은 큽니다.
그렇기 때문에 프로젝트 규모의 맞춰 라이브러리 관리하는 관리자를 배정해 주는 것이 중요합니다.

지금까지 스케치 프로젝트 시작의 방법론 중 하나인 라이브러리 디자인 시스템을 Atomic Design에 접목시킨 디자인 프로젝트 구축 방법을 알아봤습니다. 앞에서 말했듯 이 시스템은 하나의 방법론이며 상황에 맞춰 유동적으로 사용하는 것이 가장 효율적입니다.
마지막으로 라이브러리 디자인 시스템의 장점을 정리하자면 아래와 같습니다.

– 구성 요소 간 일관성 유지
– 프로젝트 전체에 걸쳐 응집력 있는 디자인 제공
– 인지 부조화 감소
– 설계 작업 속도 향상
– 프로젝트 팀원들 간의 손쉬운 공유

Tip. dropbox, google drive 라이브러리 공유 방법드롭박스를 PC에 다운로드받고 설치한 뒤 라이브러리 파일을 드롭박스에 업로드시키고, Sketch > Preferences > Add Library를 클릭하면 드롭박스 폴더에 있는 스케치 파일을 라이브러리화 시킬 수 있습니다. google drive도 위의 방법과 동일합니다.

– 가치디자인그룹 송호영

연관 글
[SKETCH] 스케치 초보를 위한 열가지 팁
[SKETCH] 스케치 입문부터 협업 그리고 개발가이드까지
[ZEPLIN] 개발자와 효율적인 협업을 위한 GUI가이드 프로그램 제플린 

[타이틀이미지]
https://ubiedigital.com/atomic-design/

[참고자료]
– Atomic Design by Brad Frost
– Subatomic Design Systems by Daniel Eden
– Harry Cresswell의 Using Sketch Libraries to build a better UI design system
– Libraries, an in depth look by Sketch
– Sketch Libraries by Jon Moore