Atomic Design × Sketch Library를 사용하여 설계 파일 작성

이 글은 구직 생활 방식 Advent Calendar 2017 6일째 되는 글이다.
저는 엔지니어로 평소 업무 중에 Atomic Design을 사용하여 설계 문서 제작을 추진합니다.
10월에 발매된 스케치의 새로운 기능인 스케치 리브레리는 아토믹 디자인 관리에 상당히 편리해졌기 때문에 이 일을 쓰려고 합니다.

Atomic Design 정보

Atomic Design은 부품 및 어셈블리 단위로 정의된 설계 기법입니다.
다음 예와 같이 설계를 정의된 어셈블리 단위로 분할합니다.
Component
예제
Atoms
아이콘, 버튼
Molucules
입력 창
Organisms
머리글, 바닥글, 측면 메뉴
Templates
실타래
Pages
스크린
아토믹 디자인 적용을 통해 설계·개발에서 구성 요소 등의 장점을 반복적으로 활용할 수 있다.

Sketch Library

스케치 리브레리는 Version 47(2017년 10월 10일 release)에 추가된 스케치의 새로운 기능이다.
Sketch 파일 간에 생성된 Symbol을 공유하고 동기화할 수 있습니다.
※ Symbol: 스케치에서 재사용 가능한 페이지와 다른 커팅 요소
스케치 리브레리는 지금까지 공통 요소를 수정할 때 모든 디자인 파일을 수동으로 수정해야 했다는 점이 편리했다.(디자인 파일을 화면으로 분할하는 상황 등)
지금까지

Sketch Library 사용 시

스케치 리브레리를 활용하면 리브레리 업데이트가 있는 경우 차분만 추출해 화면 업데이트(버튼만 클릭)만 하면 된다.
자세한 사용법은 공식.!

Atomic Design × Sketch Library

둘의 장점을 다시 생각해보면
Atomic Design: 높은 재활용성을 위해 어셈블리 단위로 설계 관리 가능
Symbol 관리, 간편한 업데이트
Atomic Design 단위에서 제시한 Component를 Library로 처리함으로써 쉽게 참조, 업데이트, 재활용할 수 있는 높은 구성 요소입니다.
예를 들어 Atomic Design에서 다음과 같이 Atoms, Molecules, Organisms, Templates를 통해 분류할 때

Library 참조에서 다음 항목을 볼 수 있습니다.
새로 디자인된 파일의 경우 리브레어 참조 외에도 아토믹 디자인대로 분할할 수 있어 어디에 어떤 요소가 있는지 쉽게 파악할 수 있다.

실제 새 파일을 만들 때의 프레젠테이션

이전에는 다른 도구(Craft)를 사용하지 않으면 Symbol의 공통화가 불가능했지만, 스케치 리브레리가 나오면 스케치 하나만 있으면 가능해 컴포니트 관리도 쉬워졌다.
이번에 데모로 만든 리브레리 파일을 지티허브에 줬다.
https://github.com/ichiki1023/SketchLibraryExample

최후

이번에 말한 스케치 리브레리의 활용은 아토믹 디자인이 아니어도 충분히 활용할 수 있다.
그러나 개인적으로는 Symbol화의 세도가 명확하기 때문에 리브레어 관리로서 아토믹 디자인 및 스케치 리브레어가 잘 어울린다고 추천합니다.그럼 이따 봐요!

참고 자료

Atomic Design

소중한 워크플로우: 설계부터 프로그래밍까지 Atomic Design의 원칙과 Sketch

Atomic Design 열기 스스로 이해했다고 여기다

Sketch Library

공식.