똑똑하게 스케치 사용하기
협업을 위한 심볼 구조화, 플러그인 활용
Sketch App 도입은 Zeplin을 활용하여 효율적으로 개발자와 소통하기 위해 시작되었습니다.
도입하는 과정에서 안드로이드 UI를 담당하게 되었고, 심볼의 구조화와 적절한 플러그인의 사용을 통한
작업의 효율, 가지고 있던 문제점들을 해결하는 것에 중점을 뒀습니다.
기존 작업방식과 문제점
디자인 작업 패턴디자인 작업 패턴을 분석했을 때, 기존의 PSD 파일들에서 컴포넌트를 가져와 재조합하는 경우가 가장 많았습니다. 디자이너간 협업 시 최근 릴리즈된 디자인이 맞는지, 요소간 간격 같은 디테일한 부분에 대해 묻는 경우가
많았으며, 개발자와의 협업 시 지칭하는 용어가 달라서 생기는 커뮤니케이션 미스가 종종 발생했습니다.
구조화에 앞서, 분석하고 내린 작업의 키포인트는 다음과 같습니다.
1. 최근 릴리즈된 디자인이 영향을 받는 모든 화면에 동기화되어야 합니다.
2. 개발자와의 협업 시, 심볼의 네이밍을 기준으로 커뮤니케이션합니다.
3. 디자이너가 사용 시, 시안 작업을 빠르고 편하게 할 수 있어야 합니다.
4. 컴포넌트, 디자인 요소들이 서로 유기적으로 연결되어있어야 합니다.
5. 시안 작업 시, 유저 데이터를 사용하기 편리해야 합니다.
심볼 생성 기준
심볼로 만들어야 하는 경우는 다음과 같이 정의했습니다.
1. 다양한 상태값을 가진 요소
2. 같은 크기의 영역 안에서 다양한 형태를 가진 요소
3. GNB처럼 자주 쓰이는 컴포넌트
4. 카드 형태의 디자인
5. 아이콘
Overrides 예시심볼 폴더 구조
디자이너들이 사용하기 때문에 첫 번째 분류는 보이는 형태, 디자이너끼리 자주 사용하는 용어로 합니다.
두 번째 분류는 원활한 커뮤니케이션을 위해 목적 혹은 개발자분들이 사용하는 용어로 지정하며,
세 번째 분류까지 해야하는 경우 2 Column, 3 Column(스타일쉐어 내부에선 Grid라는 용어를 주로 사용합니다.)과 같은 다양한 변화에 대한 것이므로, 똑같이 커뮤니케이션에 용이하게 판단하여 결정합니다.
Elements 폴더는 심볼을 구성하는 심볼들이 있는 폴더입니다.
직접 심볼 폴더트리를 타고 들어가 생성하는 경우는 없으므로, 분류에 더 목적을 두고
폴더 구조가 복잡해지는 것을 감수했습니다. 그리고 Overrides를 대비하여 이해하기 쉬운 용어로 작성합니다.
심볼의 활용
자주 쓰는 컬러들을 심볼화하고 마스크 기능을 활용하면, 아이콘들의 색상을 더 편하게 변경할 수 있습니다.
브랜드 컬러, 그레이스케일이 변경되는 경우에도 컬러 심볼만 수정하면 큰 문제없이 바로 적용할 수 있습니다.
플러그인의 활용
작업에 주로 사용하는 플러그인은 Auto Layout, Button, Clipboard Fill입니다.
Auto Layout의 Stacked Group 기능으로 심볼이나 요소들을 유기적으로 연결시킵니다.
Button은 Tag, List item 등에 사용하며 짜잘한 수정작업을 줄여 시안작업에 더 집중할 수 있도록 합니다. Clipboard Fill은 스타일쉐어 특성때문에 활용 가치가 높은 플러그인입니다.
유저 이미지, 게시글의 사진을 스타일쉐어 웹에서 복사하여 시안을 작업할 때 활용합니다.
실 데이터를 사용하기 때문에 설득력이 높아지고, 조금 더 객관적으로 작업할 수 있다는 장점이 있습니다.
페이지 구성
모든 화면이 모여있는 Master_Android.sketch 파일에서는 페이지로 분류합니다.
이 분류와 구글 드라이브 폴더 구조를 일치시켜 빠르게 파일을 찾을 수 있도록 하였으며,
탐색이 용이하기때문에 새로운 디자이너가 오더라도 쉽게 파악가능합니다.
디자인 작업 프로세스
시안 작업 시, 실제 데이터를 사용하여 설득력을 높이는 것을 가장 큰 목표로 합니다.
1. 디자인 작업 전, 사용할 심볼들을 모두 Detatch합니다.
2. 문제해결에 맞게 컴포넌트를 디자인합니다.
3. 플러그인을 활용하여 웹에서 실제 데이터들을 가져와 채웁니다.
4. 시안 작업이 끝난 후, 정리하여 Zeplin으로 내보냅니다.
5. 심볼을 만들어야 한다면, Master파일 Symbols에 업데이트합니다.
6. Master파일에 심볼을 사용하여 화면을 정리합니다.
이 과정에서 생기는 큰 문제점은 모든 작업자가 심볼 구조화에 같은 기준을 가지고 있어야 한다는 점입니다.
생성 여부, 심볼 이름을 정하는 규칙 등에 대해 문서화하여 공유해도 익숙하지 않기때문에 실수가
생기기 마련입니다. 그래서 안정화되기까지 첫 구조를 잡았던 담당자가 정기적으로 확인하여,
다듬어나가는 것으로 결정했습니다. 비효율적인 방법일 수도 있지만, 동시에 구조화를
더 탄탄하게 하는 기회였습니다.
잘가 포토샵.
Sketch App의 업데이트에 따라 해결할 수 있는 방법이 달라지는 경우가 많았습니다. 그에 대비하여 의존성을 줄여나가는 고민을 계속하고 있으며 UI 뿐만 아니라, 작업툴 사용에 제약이 없다는 조건 하에 Overrides 기능과, Clipboard Fill, Auto Layout을 활용하여 다양한 템플릿 작업에도 사용할 수 있다고 생각합니다.
