Sketch 라이브러리를 시작합시다! (Let’s start a Sketch Library!)

스케치 라이브러리(Sketch Library) 기능 (v4.7부터 사용 가능)이 얼마나 유용한 지는 들어 보셨을 것입니다. 크고 작은 많은 디자인 팀이 현재 디자인 반복 프로세스의 속도를 높이기 위해 이를 사용하고 있습니다. 또한 조직 내에서 "단일 출처(single source of truth)" 디자인 시스템을 구축하는 초기 프로세스의 일부입니다.
모든 팀은 자신의 스타일 라이브러리를 구성하는 방법에 대한 자신의 취향을 가지고 있으며, 이 포스트에서는 디자인 팀의 방식을 공유할 것입니다.

1 단계 : 포함할 항목 결정

팀과 함께 Sketch 라이브러리에 포함시킬 초기 빌딩 블록 목록을 결정하십시오. 우리는 원자 디자인(atomic design)의 규칙을 따르고 있습니다. 왜냐하면 이것은 많은 의미를 갖기 때문입니다 (Brad Frost 👍). 여기에 일반적인 아이디어는 가장 작은 원소 (atoms)를 먼저 만들고, 그다음에 어떻게 하면 더 큰 분자 (molecules) 내에서 이 원소를 어떻게 사용하는지를 설명하는 것입니다. 그리고 이들이 어떻게 결합되어 더 큰 집단 (organisms)을 형성하는지 등등 (templates).
presentation
초기 라이브러리 희망 목록

2 단계 : 첫 번째 원자(atom) 추가 - Colours🌈

새 Sketch 파일을 열고 라이브러리로 저장(save) 하십시오. 먼저 색상 표(colour palette)를 만듭니다. 직사각형을 만들고 기본(primary) 및 보조(secondary) 브랜드 색상, 검정(blacks) 및 회색(greys), 시스템 유효성(validation) 색상 등으로 채 웁니다. 쉽게 참조할 수 있도록 색상 코드(color codes)를 추가해야 합니다. 이것은 결국 스타일 가이드입니다!
presentation
컬러 팔레트 견본 (Colour Palette Swatches)
💡Pro tip. 이 스타일 가이드를 사용하여 향후 디자이너에게 도움이 되도록 하려면 각 요소를 사용하는 방법에 대한 설명 및 모범 사례를 추가하는 것이 좋습니다.
각 사각형 채우기(rectangle fill)를 선택하고 오른쪽 패널(right-side panel)에서 공유 스타일(shared style)을 만듭니다. 의미 적으로 각 색상의 이름을 지정하거나 각 음영에 숫자를 할당 한 다음 슬래시 "/"로 분류할 수 있습니다. 예 : Palette/primary/darkblue. 공유 스타일 라이브러리(shared styles library)를 사용하면 나중에 다른 요소를 만들 때 색상을 빠르게 변경할 때 유용합니다. 이것이 내 공유 스타일(shared style)의 색상입니다. (Shared Styles > Organize Shared Styles을 클릭하십시오)
presentation
내 colour palette의 공유 스타일(Shared Styles)

3 단계 : 컬러 요소를 만들어 symbol로 변환합니다.

컬러를 사용할 다음 항목이 무엇인지 결정하십시오. 우리는 먼저 버튼(buttons)을 만들기로 했습니다. 그래서 내부에 흰색 텍스트(white text)가있는 직사각형 버튼(buttons)를 만든 다음 공유 된 스타일을 사용하여 버튼(buttons) 색상을 채 웁니다. 버튼 배경과 텍스트를 모두 선택하고 "UI / Button / Primary"라는 symbol로 변환하십시오. 이 시점에서 기본 ol '사각형 버튼(rectangle buttons)을 먼저 작업하세요. 둥근 모서리(rounded corners)를 원한다면 나중에 할 것입니다!
presentation
첫 번째 기본 버튼(first basic button) 만들기

4 단계 : symbol 내에 symbol 만들기

이제 버튼(button)이 symbol이므로 symbol을 두 번 클릭(double-click) 하여 Sketch 파일의 symbol 페이지로 이동합니다. 사각형 채우기(rectangle fill)를 선택하고 'Color/Green01'이라는 symbol로 변환하십시오. 버튼((button))의 레이어를 symbol로 변환하면 나중에 사용자 정의할 수 있는 변수(variable)를 생성하게 됩니다. 이 symbol 레이어의 이름을 'Color'로 변경하십시오. 버튼 색상 드롭 다운(button color dropdown)의 레이블(label) 이름을 지정합니다.
이제 컬러 레이어(colour layer)를 두 번 클릭하여 'Color/Green01' symbol로 이동하십시오. 그것을 복제하고 팔레트(palette)의 다른 색상(colour)으로 변경하고, 이전에 지정한 이름 (예 : 'Color/Green02')에 따라 symbol의 이름을 바꿉니다. 버튼을 사용할 수 있게하려는 모든 컬러에 대해 이렇게하십시오.
presentation
Color를 symbols로 만들기

5 단계 : 사용해보세요!

이제 페이지로 돌아가 방금 만든 버튼을 삽입하십시오.
Insert > Symbols > UI > Button/Primary
이제 만든 버튼에 사용자 정의를 내릴 수 있습니다. 오른쪽 패널(right side panel)에서 드롭 다운(dropdown)을 사용하여 색상뿐만 아니라 이 버튼의 레이블 텍스트를 변경할 수 있습니다. 예! 🙌
presentation

6 단계 : 요소(element)에 맞춤 설정할 수 있는 속성(properties) 추가하기

앞서 언급했듯이 둥근 모서리(rounded corners)처럼 버튼(button)의 모양을 변경하는 옵션(option)을 원하면 버튼(button)를 두 번 클릭하여 버튼(button) symbol으로 다시 이동하십시오. 버튼(button)과 같은 width와 height의 사각형을 그립니다 (이 레이어의 이름을 'Shape'라고 지정합니다). border radius을 4px로 지정합니다. 이 레이어를 마스크(mask)로 변환 한 다음이 마스크 레이어(mask layer)를 ... symbol로 변환합니다. '_resources/Shape/4px-radius' symbol의 이름을 지정하십시오.
presentation
rounded rectangle의 이름을 'Shape'로 변경 한 다음 마스크(mask)를 적용하고 Symbol로 변환하십시오.
이제 이 버튼(button) symbol에서 'Color'레이어를 삭제하십시오. 예!, 당신은 그 권리를 읽었습니다. 왜냐하면 Shapes symbol 안에 colour을 중첩할 것이기 때문입니다. Shapes Symbol를 두 번 클릭하여 이동하십시오. 그 위에 color symbol를 삽입하고 color symbol 레이어의 이름이 'Color'인지 확인하십시오.
presentation
Colors와 마찬가지로 shape symbol를 복제(duplicate) 하여 10px-radius 또는 rounded과 같은 다른 button 모양을 만들 수 있습니다. 그에 따라 symbols의 이름을 기억하십시오.
스타일 가이드(style guide) 페이지의 버튼(button)으로 다시 돌아가서 모양을 테스트하십시오. 멋진가요?
presentation
계속해서 아이콘(icons)이 있는 버튼(button)과 같은 버튼(button) 옵션을 확장할 수 있습니다. 또는 스타일 가이드에 typography, form inputs, tables 등의 다른 요소를 추가할 수 있습니다.
기본 아이디어 :
  1. 구성 요소(component)를 작성하여이를 symbol로 만드십시오.
  2. 사용자 정의할 구성 요소(component)의 레이어(layers)를 결정하십시오. 이 레이어(layers)를 symbols로 변환합니다.
  3. 각각의 옵션으로 symbols을 복제(Duplicate) 하십시오.

7 단계 : 다른 Sketch 파일에서 이 라이브러리를 사용합니다.

처음 몇 가지 구성 요소(components) 세트에 만족하면 팀 구성원과 함께 사용해보십시오. 일반 서버 또는 Dropbox와 같은 파일 공유 서비스에서 라이브러리 스케치(library sketch) 파일을 공유할 수 있습니다. 새로운 변경 사항이 있을 때마다 동기화할 수 있는 위치에서 파일이 공유되는지 확인하십시오.
팀원이 작업 중인 별도의 Sketch 파일에 Sketch library를 추가하려면 Preferences…>Libraries로 이동 한 다음 +를 클릭하여 공유 폴더에서 공유 한 라이브러리 파일(syncing folder)을 찾습니다.
이제 이 Sketch 파일에서 공유 라이브러리(shared library)의 요소를 사용할 수 있습니다. 삽입하고 필요한 library와 symbol을 찾으십시오. 쉬워요.
라이브러리(library)에 대한 업데이트가 있을 때마다 이 라이브러리(library)를 사용하는 모든 파일에 오른쪽 상단 모서리에 보라색 알림이 표시됩니다. 이 버튼을 클릭하면 변경 사항을 알려주고 업데이트를 가져 오기로 결정한 경우 Sketch 파일의 차이점을 보여줍니다.
presentation

8 단계 : Sketch 라이브러리(library)를 유지하고 생생하게 유지하십시오!

라이브러리(library)에 관한 것은 매우 쉽게 구식이 된다는 것입니다. 당신의 팀은 이 라이브러리(library) 파일이 유용하게 사용될 수 있도록 정기적으로 유지 관리하는 데 동의해야 합니다. 업데이트, 추가 또는 수정해야 할 사항에 대해 논의합니다. 각 '릴리스(release)'전에 기존 구성 요소를 손상시키지 않는지 테스트하십시오. 그렇지 않으면 상황이 정말 엉망이 될 수 있습니다. 😱
우리 팀에서는 Sketch 라이브러리(library) 파일에 'Changelog'라는 별도의 페이지가 있습니다. 이 페이지에서 파일의 모든 업데이트를 문서화합니다. 이는 제품 릴리스 노트와 비슷하기 때문에 파일에서 무엇을 업데이트했는지 추적할 수 있습니다.
presentation
Sketch 라이브러리(library) 파일에 변경 내역(changelog)을 보관하십시오.
우리는 또한 Abstract, Kactus 또는 Folio for Mac와 같은 버전 제어 도구를 사용하여 수동 작업을 없애는 아이디어를 가지고 실험하고 있습니다.
이게 다입니다. 이 정보가 자신만의 Sketch 라이브러리(library)를 만드는 데 충분하기를 바랍니다.
이 게시물은 Pablo Stanley의 Youtube video에서 크게 영감을 받았습니다 (진심으로 그는 나보다 훨씬 좋게 설명합니다).

이 글은 번역 글입니다. 원본 링크입니다.



presentation
안녕하세요! Early adopter입니다.
제 번역 블로그를 자주 찾아 주셔서 감사드립니다.저를 위해서 시작한 블로그였는데 1년 넘게 하다 보니 욕심이 생기게 되었습니다. 해외 디자인 관련 좋은 콘텐츠를(영어 포함 다양한 언어) 가능한 한 모두 번역해보자!라는 목표를 새워보았습니다. 많이 도와주세요^^
페이스북의 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다. 아직은 너무 부족하지만 함께 좋은 방향으로 발전할 수 있기를 기대합니다.
다시 한번 제 블로그를 방문해 주셔서 진심으로 감사드립니다.
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
혹시나 저랑 함께 "보버"에서 디자인 번역 공장 연재를 해주실 유저분 계시면 리뷰나, 페북 어디에서든 메시지 주세요!!! 외롭습니다
함께 작업했으면 좋겠습니다^^ 연락 간절히 기다립니다.



번역 글 추천(신청) 받습니다.
안녕하세요.
일 년 조금 넘게 제가 공부 좀 해보려고 블로깅을 처음 시작했는데, 생각보다 많은 분들께서 제 번역 글들을 보시고 계셔서 놀라기도 하고 좋기도 했습니다.
읽고 싶은 좋은 디자인 관련 해외 글들이 있다면 리뷰에 링크를 달아 주세요. 가능하면 번역해보려고 합니다.
기간은 보통 원작자 허락 구하는데 3일 정도 그리고 번역은 1일 정도입니다. 신청하시면 가능한 1주일 내에는 충분히 볼 수 있지 않을까 생각됩니다.