Zeplin Sketch 플러그인 – 설계와 엔지니어링 간의 워크플로 브리지

Zeplin은 제품 팀을 위한 연결된 공간을 만들어 디자이너와 개발자 간의 격차를 해소하는 강력한 협업 도구입니다.

왜 제플린인가?

모든 제품 개발 퍼즐의 중요한 부분은 디자인과 개발이 만나는 곳입니다. 설계가 개발 단계("인도")로 이동할 준비가 되면 엔지니어는 이를 이해하고 코드로 변환할 방법이 필요합니다.

Zeplin은 Sketch, Adobe XD, Figma 및 Photoshop에서 디자인을 가져와 코드 조각, 스타일 가이드, 사양 및 자산을 쉽게 생성할 수 있는 형식으로 내보내어 전달을 용이하게 합니다.

"레드라이닝"의 시대에 작별 인사를 하십시오. Zeplin은 순전히 제품 디자이너와 개발 팀 간의 협업을 개선하는 데 중점을 두고 있으며 Airbnb, Dropbox, Pinterest, Microsoft 및 기타 여러 곳의 주요 제품 팀에서 사용합니다.

Zeplin을 사용하면 크기나 여백을 수동으로 작성하고 사본을 입력하고 아이콘을 내보낼 필요가 없습니다. 정말 멋지고 디자인 탐색에 집중하는 데 많은 시간을 절약할 수 있습니다. – Alex Potrivaev, 제품 디자이너 @Intercom

이전 기사 중 하나에서 Toptal 디자이너 Micah Bowers는 디지털 제품을 작업하는 제품 팀의 다양한 기능 간에 효율적으로 의사 소통하기 위해 표준화된 디자인 언어 시스템을 갖는 것이 중요하다고 말했습니다.

디자인 자산의 버전 관리, 구성 요소 라이브러리 생성, 생활 스타일 가이드 생성을 통해 Zeplin으로 이식된 프로젝트는 제품 팀을 위한 "단일 정보 소스" 역할을 할 수 있습니다.

우리는 기본적으로 Zeplin을 Engineering과의 협업을 위한 진실의 원천으로 간주합니다. Zeplin에 없으면 공식이 아닙니다. – Jason Stoff, 수석 디자이너, 디지털 제품 @Starbucks

제플린의 한계

Zeplin에는 유용한 기능이 많이 있지만 완벽하지는 않습니다. Zeplin은 무료 플랜을 제공하지만 해당 플랜에서는 하나의 프로젝트로 제한됩니다. iOS 및 Android용으로 디자인할 때 두 개의 개별 프로젝트가 필요합니다. 그 시점에서 유료 계획이 필요할 것입니다.

Zeplin 및 Sketch(또는 위에서 언급한 다른 앱) 작업의 흐름을 이해하면 워크플로가 쉬워집니다. 그러나 Zeplin에는 약간의 시간과 주의가 필요한 학습 곡선이 있습니다. 일반 개요를 보고 사용 방법에 대해 자세히 알아보려면 아래 Zeplin 데모 비디오를 참조하십시오.

Sketch 및 Zeplin 작업: 단계 및 팁

1. Zeplin을 시작하십시오.

• Zeplin 계정이 아직 없다면 만드십시오. 무료로 가입할 수 있습니다: https://app.zeplin.io/register
• Mac 또는 Windows용 Zeplin 데스크탑 앱을 다운로드하십시오.
• Sketch용 Zeplin 플러그인을 다운로드합니다.

2. 스케치 파일을 준비합니다.

• 이제 Sketch와 Zeplin을 사용할 준비가 되었으므로 Zeplin으로 원활하게 내보낼 수 있도록 Sketch 파일을 설정합니다.
• Sketch에서 일관된 명명 규칙을 사용하여 자산과 레이어를 구성합니다. 다른 디자이너와 공동 작업하는 경우 팀의 모든 사람에게 적합한 규칙을 결정합니다. 이것이 어떤 유형의 프로젝트인지(예: iOS, Android 또는 웹)에 따라 Zeplin은 자산의 이름 지정 규칙을 자동으로 조정하여 자산 내보내기를 한 단계 프로세스로 만듭니다.
• Sketch 내에서 공통 요소 및 자산에 대한 기호를 생성합니다. 이렇게 하면 Zeplin에서 구성 요소를 설정할 수 있습니다.
• "문서 색상" 팔레트에 색상을 저장하고 스케치 파일에 "텍스트 스타일"로 글꼴을 저장합니다. Zeplin에서 생성한 스타일 가이드에 표시됩니다.

3. Sketch에서 자산을 내보낼 수 있도록 합니다.

• 이것은 매우 중요한 단계입니다. 자산이 기호로 그룹화되면 Sketch 파일에서 기호 페이지를 엽니다.
• "ic-menu"(폴더 아이콘)와 같은 기호 내의 그룹을 클릭합니다.
• 그룹이 강조 표시된 상태에서 Sketch에서 "Inspector"의 오른쪽 하단에 있는 "Make Exportable" 작업을 찾아 이 옵션을 클릭합니다. 이제 그룹 이름 옆에 조각 아이콘이 나타납니다.
• 이 단계를 통해 엔지니어는 Zeplin에서 직접 자산을 내보낼 수 있습니다.

4. Zeplin에서 새 프로젝트를 생성합니다.

• 구축 중인 프로젝트 유형을 선택합니다. 디자인이 동일하더라도 iOS 및 Android에 대해 별도의 프로젝트가 있어야 합니다. Zeplin은 프로젝트 유형에 따라 다른 코드를 생성하기 때문입니다.
• Sketch 아트보드와 일치하는 프로젝트 해상도를 선택합니다(예: 1x, 320px).

5. Sketch 대지를 Zeplin으로 내보냅니다.

• Sketch에서 Zeplin으로 내보내려는 모든 대지를 강조 표시합니다.
• Plugins > Zeplin > Export Selected… 로 이동하거나 키보드에서 ⌃⌘E 를 누르십시오.
• 다음으로 Sketch에서 Symbol을 내보냅니다. Sketch에서 Symbols 페이지를 열고 모든 대지를 강조 표시합니다. Zeplin으로 내보내기.

6. Zeplin에서 프로젝트를 구성합니다.

• 이제 Sketch 아트보드가 Zeplin에 있으므로 아트웍을 섹션으로 구성해 보겠습니다.
• 프로젝트의 대시보드 보기에서 유사한 화면을 선택하여 범주로 그룹화합니다. 강조 표시되면 마우스 오른쪽 버튼을 클릭하고 "선택 항목에서 새 섹션"을 선택합니다. Zeplin 파일이 제대로 구성될 때까지 이 작업을 반복합니다.

7. Zeplin의 구성 요소를 활용합니다.

Zeplin의 가장 유용한 기능 중 하나는 자산을 구성 요소 라이브러리로 구성하는 기능일 것입니다. 이것은 프로젝트의 디자인이 다른 팀 구성원에 의해 여러 플랫폼에 대해 개발될 때 중요합니다. Airbnb 디자이너 Karri Saarinen이 Build Visual Language에서 다음과 같이 설명했듯이 디자인 통합은 필수적입니다.

통합된 설계 시스템은 더 좋고 빠르게 구축하는 데 필수적입니다. 응집력 있는 경험이 사용자가 더 쉽게 이해할 수 있기 때문에 더 좋고 작업할 공통 언어를 제공하기 때문에 더 빠릅니다.

• Zeplin 상단 중앙("Dashboard" 옆)에서 "Styleguide" 탭을 선택합니다.
• "스타일 가이드" 탭에서 보조 탭인 "구성 요소"를 선택합니다. 여기에서 Sketch에서 내보낸 모든 기호를 볼 수 있습니다.
• 이것을 "아이콘", "이미지", "공통 요소" 등과 같은 섹션으로 구성하십시오. 여기에서 Zeplin의 프로젝트 스타일 가이드의 구성 요소 탭에 대해 자세히 알아볼 수 있습니다.

8. Zeplin에서 스타일 가이드 내보내기.

• Zeplin 프로젝트의 대시보드 보기에서 애플리케이션의 오른쪽 상단 모서리에 있는 "공유" 버튼을 찾습니다.
• "공유"를 선택한 다음 메뉴 하단에서 "장면"을 찾으십시오. "사용"을 선택한 다음 "열기"를 선택하십시오. 그러면 프로젝트에 대한 동적 스타일 가이드가 생성됩니다. URL을 팀과 공유하십시오.

9. Zeplin에서 디자인에 주석을 답니다.

• Zeplin을 사용하면 디자인에 메모를 쉽게 추가할 수 있습니다. 화면의 상세 보기에서 메모 추가 아이콘을 선택하고 메모를 구성 요소에 고정합니다.
• Cmd (Windows 및 Linux 사용자의 경우 Ctrl )를 누른 상태에서 화면의 아무 곳이나 클릭하여 메모를 추가할 수 있습니다.
• "@"로 다른 팀원을 멘션할 수도 있으며 알림을 받게 됩니다.

10. 버전 관리를 공동 작업, 공유 및 사용합니다.

• 이제 Zeplin 파일을 팀과 공유할 준비가 되었으며 이메일 주소를 통해 사용자를 초대하거나 프로젝트 URL을 보냅니다.
• Sketch에서 아트보드를 내보내 Zeplin 파일을 계속 업데이트합니다.
• Zeplin은 파일의 버전을 자동으로 제어하므로 이 동적 "진실의 소스"를 사용하여 팀원들과 계속 협업할 수 있습니다.

결론

디자인 팀과 개발 팀 간에 역동적이고 조직적이며 협업적인 워크플로를 만드는 것은 훌륭한 디지털 제품을 구축하는 데 필수적입니다. Zeplin과 같은 워크플로 브리지를 사용하면 디자이너가 화면에 주석을 달 수 있고 완벽하고 정확한 사양으로 종종 두려운 핸드오프 단계를 완화할 수 있습니다.

Zeplin의 구성 요소로 내보낸 Sketch의 기호와 같이 하나의 중앙 소스에서 자산을 동적으로 업데이트할 수 있는 유연성은 엄청난 유연성을 제공합니다. 그러면 엔지니어는 자산을 네이티브 코드로 쉽게 내보낼 수 있어 시간과 지루함을 줄일 수 있습니다.

사려 깊은 UX와 미학적으로 아름다운 디자인이 성공적인 제품의 뿌리이지만 해당 디자인을 사용자의 손에 전달하는 프로세스가 중요합니다.

효율적이고 단일 "진실의 출처"에 의존하고자 하는 디자이너는 위에서 설명한 Sketch to Zeplin 워크플로를 고려해야 합니다. 이 두 설계 도구 간의 강력한 소프트웨어 관계 뒤에 있는 힘은 설계자와 개발 팀이 더 쉽고 만족스럽게 결승선에 도달하는 데 도움이 될 것입니다.

• • •

Toptal Design 블로그에 대한 추가 정보:

• Adobe XD vs. Sketch – 어떤 UX 도구가 당신에게 적합합니까?
• 효과적인 디자인 프레임워크를 구축하는 방법(무료 스케치 UI 프레임워크 포함)
• 스케치의 타이포그래피에 대해 모를 수도 있는 것들
• 스케치 플러그인 개발에 익숙해지기
• 스케치와 루퍼로 순식간에 멋진 일러스트레이션 만들기