TL;DR

디자인의 보수성을 높이기 위해 sketch에 Atomic Design을 도입했습니다.
부품 수량이 줄고 구성도 간단해져서 유지보수성이 크게 높아졌다
스카치 파일이 너무 무거워서 소용이 없으니 누가 쉽게 처리할 수 있는 방법이 있으면 알려주세요.

개시하다

주식회사에서 스케치를 이용하여'manabo'이라는 중·고등학생을 위한 질문 애플리케이션의 디자인 업데이트를 진행하였다.
스케치 화면과 Symbol(부품)이 늘어나면 관리가 어려워진다.
약간의 색과 테두리 수정도 여러 화면과 Symbol을 수정해야 합니다.
여분의 작업 시간과 수정 누락이 발생할 수 있다.
이런 상황을 열기 위해 스케치에서 아토믹 디자인(Atomic Design)을 가져와 보수성이 높은 디자인을 시도했기 때문에 적었다.

AtomicDesign이란?

Atomic Design은 Atoms(원자), Molecules(분자), Organisms(유기체), Templates(템플릿), Pages(페이지) 5개 요소로 디자인한 디자인 기법이다.
Atoms는 디자인의 최소 단위이고 Molecules는 Atoms의 조합이며 Organisms는 Molecules(Atoms)의 조합이다.이렇게 작은 부품을 조합하여 점차적으로 큰 부품을 설계하다.

참조: www.justinmind.com

Sketch에서 AtomicDesign을 가져오는 방법 고려

스케치가 Symbol로 부품에 로그인하면 여러 화면에서 한 부품을 참조할 수 있는 기능이 있어 부품을 조합해 만든 아토믹 디자인과 잘 어울리죠.그리고 다양한 사람들이 아토믹 디자인으로 만든 스케치 파일을 공개했다.
그 중에서 가장 유창한 아래의 템플릿 파일을 보고 구성을 분석했다.

템플릿을 보고도 역시 Symbol 기능을 잘 사용해 Atomic Design을 구성했네요.포인트는 아래 3개인가요?

아톰스(원자), 모레큘리스(분자), 오르가니스ms(유기체)는 Symbol이 제작했다.Artboard에서 참조하여 Pages(시트) 만들기

1.Atoms/、2.Molecules/、3.Artboard에서 Symbol을 참조할 때 어떤 요소인지 쉽게 알 수 있도록 Organisms/의 이름으로 각 Symbol을 그룹화합니다

.

0.Icons라는 Symbol 그룹을 생성하여 각각 Icon 재료와 Atoms를 관리하여 Atoms의 증가를 방지합니다

.

실제로 Atomic Design을 사용한 UI 설계

스케치에 있는 아토믹 디자인 방법을 알았기 때문에 아토믹 디자인으로 현재 디자인 업데이트가 진행 중인'manabo의 교과서 선택 화면을 만들어 봤다.

원자의 제작

먼저 Symbols로 Atoms(원자)를 만듭니다.
제작할 화면의 부품을 뜯어내고 더 이상 뜯을 수 없는 단위 부품을 준비한다.
교과서 일람을 원형 틀로 만들려고 원형 틀의 아톰스를 만들었다.

Atoms를 제작할 때는 서비스 내에서 사용하는 색상과 글꼴의 규칙을 먼저 결정하는 것이 좋다.
스케치에서는 색상 정보와 글꼴 정보를 부모 Symbol에서 하위 Symbol로 다시 쓰기 기능을 사용할 수 있지만, 해당 색상과 글꼴을 다시 쓰기로 부품을 만들면 규칙 위반을 방지할 수 있다.

Molecules(분자)의 제작

아톰스(원자) 제작이 끝나면 그다음에 분자를 만든다.이것도 Symbols로 만들어요.
교과서 선택 화면에서 교과서를 가로 3×왜냐하면 세로 2로 배열된다고 가정하면...
Atoms(원자)로 제작된 원형 틀과 문자 라벨을 조합해 옆에 3개의 원형 틀+문자를 배열한 위젯을 준비했다.

Molecules를 만드는 요점은 통용성이 높은 부품을 어떻게 만드는가이다.
비슷하지만 미묘하게 다른 부품도 많지만 스케치 기능을 이용해 한 부품에 최대한 집중하면 부품 수를 줄일 수 있어 유지보수 비용을 낮출 수 있다.
예를 들어 네비게이션 표시줄은 각양각색의 모델이 있기 때문에sketch의 기능을 이용하여 잘 정리할 수 있다.
나는 세 가지 모드의 내비게이션 표시줄을 사용하고 싶다. 만약 모든 모드를 한데 모으면

부품을 참조하는 화면에서 부품 안에 사용된 symbol을 변경하거나 삭제할 수 있기 때문에 한 부품에서 각각 3가지 모드를 제작할 수 있다.

이렇게 하면 내비게이션 표시줄의 유지 보수 비용을 3분의 1로 줄일 수 있다.대박이다.
Symbol의 중첩 기능을 사용하면 이 기사에 더 자세한 설명이 나와 있습니다.
https://dev.digitrick.us/notes/nestedoverridesinsketch

Organisms(조직체) 제작

아토머스(원자)와 모레큘리스(분자)가 있다면 오건리스(조직체)다.Symbols로 합니다.
기본적으로 Molecules의 조합이지만 Pages(페이지)에 Atoms 단위의 작은 부품을 배치하지 않기 위해서는 Organisms(조직체)로 흡수하는 것이 좋다.
교과서가 화면을 선택한 Organisms에서는 몰레큘리스(분자)가 만든 부품 외에도 아토머스가 만든 텍스트 라벨을 조합해 Pages(페이지)에 배치된 작은 요소를 흡수했다.
수업의 선택이 고정적이기 때문에 이맘때 넣었다.

Templates(템플릿)·Pages(페이지) 제작

마지막으로 Templates(템플릿), Pages(페이지)를 만듭니다.
다음은 Artboard가 Symbols로 만든 Organisms(조직체) 또는 Molecules(분자)를 참조하여 구성할 뿐입니다.
나는 Templates(템플릿)가 실제 값이 없는 와이어 프레임처럼 안 해도 된다고 생각한다.
완료된 페이지는 다음과 같습니다.
커리큘럼 선택 부품 외에도 내비게이션 막대와 버튼의 부품이 추가됐다.

왼쪽의 사이드바는 이 화면에 사용되는 부품의 목록이다.
디자인상으로는 여러 가지 요소가 있는 것 같지만 실제로는 부품이 세 개밖에 없다.상당히 유창하다.
보통 디자인하면 이렇게 안 되잖아요.
.화면 구성이 간단하고 관리하기 쉬운 점은 아토믹 디자인(Atomic Design)의 큰 장점이다.

총결산

디자인의 보수성을 높이기 위해 아토믹 디자인(Atomic Design)에 도전해 봤는데 효과가 좋다고 생각해요.
부품의 도안을 간단하게 줄이고 관리하기 쉬울 뿐만 아니라 구성상 디자인 수정 비용도 크게 줄었다.
예를 들어 다음 두 화면에서 사용하는 교과서의 부품 폭을 축소하고 싶을 때
<수정 전>

Pages 객체 위치부터 Organisms→Molecules
몰레큘리스의 부품만 조정하면 대상의 2개 화면을 즉시 수정할 수 있다.

<수정 후>

지금까지라면 각자의 화면으로 6개의 테두리 가장자리를 조정해야 할 것 같고, 모레컬스만 수정하면 될 것 같다.
화면이 커질수록 효과가 커지고 수정 누락도 줄어들겠죠.
아토믹 디자인은 화면이 완성되지 않은 상태에서 최소 부품부터 조립해야 해 초기 단계는 힘들었지만 이후 일을 고려하면 매우 효과적인 디자인 기법이라고 생각한다.

지금 곤란한 일

Atomic Design을 도입하여 설계 효율성을 크게 향상시켰지만
화면이 늘어나서sketch 파일이 무거워지는 것을 매우 신경 썼다.
특히 Symbols와 Artboard 사이를 오갈 때.아래와 같이 화면이 보이지 않으면 굳는다.

16GB의 MacBook Pro이기 때문에 환경도 괜찮을 것 같아요.
어렵게 아토믹 디자인 도입했는데 동작이 이러면 소용이 없어서 스케치 동작을 유지할 방법을 강구했다.
좋은 방법 아시는 분 있으면 알려주세요.