Sketch meet up in Korea

디자이너와 개발자의 협업 : AB180의 에어브릿지 (https://airbridge.io/)

디자인 시스템을 구축하는 도전기 (스케치,리액트,깃)

공식 발표 슬라이드

디자인 요소 정리

• 반복적으로 쓰이는 디자인 요소들의 수정 용이를 위해
• 예외 처리된 부분은 과감히 제외하고 컴포넌트화할 수 있는 부분들을 정리.
• 개발과 네이밍을 통일. 동기화를 유지하기 위해서 네이밍을 같이 고민하는 것이 매우 중요하다.

Ui 구현 프로토콜

• UI 구성을 코드 관점으로 이해
• 커뮤니케이션 간극을 축소 (CSS를 배워서 디자이너가 직접 수정하고 Git으로 커뮤니케이션)
• 구현의 순도를 높이고 View QA 프로세스 개선

시스템 활용

• 자주 스타일이나 기능이 바뀌는 스타트업의 성격상, 디자인/기능을 완전히 제한시켜버리면 나중에 변화를 위해 써야 할 시간 및 노력이 점점 많아짐
• 컴포넌트라는 게 결국 사람마다, 의미마다 다르게 가져갈 수 있음
• 일관성이 갖추어져 있다면 레고처럼 잘 조립해서 쓸 수 있다.

무언가를 생산하는 데 있어 서로 협력하는 자세를 가져야 한다.

해당 발표 슬라이드 : https://bit.ly/2YAITZL

 

 

 

 

 

서핏팀이 스케치로 협업하는 방법 (https://surfit.com/)

파일 관리

Master, Library 파일이 따로 있었고 팀원들이 작업할 때는 사본을 만들어서 작업한 뒤 나중에 합치는 방식으로 일했다. 하지만 문제들이 점점 생기기 시작했다. 아래와 같은 문제들로 인해 버전 관리를 시작하게 됐다.

• 예전 시안으로 돌아가야 했을 때
• 최신 싱크된 디자인 파일을 찾을 수 없을 때
• 용량이 점점 무거워질 때

 

버전 관리

Sketch Cloud를 도입하여 Master와 Library 파일을 관리하기 시작하고 사본들은 따로 관리를 하지 않기로 했다. 라이브러리를 사용하는 것은 3가지의 목적이 있었다.

• 최신 리소스로부터 팔로업 유지
• 작업 속도 개선 (중복되는 요소들은 효율적으로)
• 별도 파일 관리 (시안 심볼과 분리, 간편한 관리)

Library에는 콘텐츠 카드 관련된 비중이 가장 높았고 아이콘, 일러스트 기타 그래픽 순으로 비중을 차지했다. 콘텐츠 카드는 종류가 약 120개에 달했는데 심볼의 오버라이드를 활용하였다. 또 유입 해상도는 1900px > 1680px > 1440px > 2560px 순으로 높았기 때문에 스케치의 리사이징 기능을 유용하게 사용했다.

 

규칙 활용

최근에는 화이트/다크 테마를 어떻게 효율적으로 동시에 관리할 지가 난제였다. CSS와 노션을 활용하여 각 컬러를 명도에 맞게 네이밍에 숫자를 달아 통일했다. 다크테마의 06 명도를 사용하면, 화이트 테마에서도 06명도 사용하는 식으로 통일성을 유지하고자 했다.