안녕하세요. Zeplin 아시아 총판 단군소프트입니다.
2021년을 맞아 Zeplin도 지속적으로 기능을 개선하고 새로운 기능은 추가되고 있습니다.
오늘은 어떤 기능이 Zeplin에 추가되었는지 알아보도록 하겠습니다.
| 구성 요소 변형(Component Variants) |
오늘날 디자이너에게 가장 인기 있는 Zeplin 기능이 무엇인지 아시나요? 바로 Styleguides입니다! Styleguides를 사용하면 어떤 구성 요소가 완성되었고 개발에 사용할 수 있는 구성 요소가 무엇인지 팀에게 공유할 수 있으며, 재사용이 가능한 구성 요소를 확인하고 코드에 연결할 수 있어 많은 디자이너가 이용하고 있습니다.
하지만 Zeplin은 여기서 만족하지 않고 한 단계 더 나아가 Adobe XD, Sketch 및 Figma 를 지원하는 구성 요소 변형(Component Variants)을 출시했습니다. 특히 Figma 사용자들을 위한 특별한 기능이 추가되었습니다.
1. 구성 요소 변형(Componet Variant)이란?
현재 Zeplin에서 개발자가 디자인의 구성 요소를 볼 때 별도의 구성 요소인지 여부를 확인할 수 없습니다. 하지만 이제 [Component] 메뉴에서 구성 요소들의 관계를 쉽게 확인할 수 있습니다.
이 기능은 사용된 명명 구조법을 포함해 특정 구성 요소 집합을 분석하여 구성 요소 변형(Component Variant)을 자동으로 생성하도록 구축되었습니다. 구성 요소 변형(Component Variant)이 자동으로 생성되면 사용자는 해당 정의를 자신의 워크플로우에 맞도록 편집할 수 있습니다.
2. 새로워진 개발자 경험
구성 요소 변형(Component Variant)이 Zeplin에 정의되면 구성 요소를 코드로 변환하는 개발자들은 아래와 같은 새로운 경험을 체험할 수 있습니다.
- 구성 요소 속성 확인
개발자가 구성 요소를 선택하면 파란색 헤더가 해당 구성 요소임을 표시해 줍니다. 그리고 오른쪽 패널에는 구성 요소 변형의 속성을 나열하는 새 섹션이 나타나 속성을 확인할 수 있습니다.
또한 구성 요소 변형(Component Variant) 아이콘 (또는 V)을 클릭하면 개발자가 구성 요소를 사용할 수 있는 새 팝업 창이 표시됩니다. 그리고 해당 구성 요소와 구성 요소 변형에 대한 코드 업데이트 사양을 확인할 수 있습니다.
- 향상된 스타일시트 스니펫(stylesheet snippets)
구성 요소에 대한 스타일시트 스니펫(stylesheet snippets)이 더 향상되었습니다. 이제 Zeplin은 구성 요소 변형(Component Variant)을 통해 변형을 구성하는 레이어를 비교하고 그 차이를 바탕으로 CSS를 생성합니다. - Figma에서 만든 구성 요소 변형(Component Variant)을 Zeplin에 바로 게시
이제 Figma에서 만든 구성 요소 변형(Component Variant)을 Figma용 Zeplin 플러그인을 사용하여 바로 Zeplin에 게시할 수 있습니다. 이 외에도 구성 요소 변형(Component Variant)을 사용하면 개발자와 전체 팀이 구성 요소 간의 관계를 쉽게 이해할 수 있습니다.지금 바로 Zeplin의 외에도 구성 요소 변형(Component Variant)을 사용해 보세요!
| 새로워진 알림 기능 |
- 구분화된 메모 및 디자인 변경 사항 알림 섹션
이제 Zeplin 사용자는 구분화된 새로운 알림 환경을 통해 팀원의 메모와 디자인 변경 사항을 쉽게 확인할 수 있습니다. 그리고 알림을 검토할 때 관련 디자인 요소를 미리 볼 수 있는 기능이 추가되어 프로젝트를 빠르게 파악할 수 있습니다. - 알림 필터링 기능
알림을 필터링하는 기능이 추가했습니다. 프로젝트, 특정 사람 및 메모 색상을 기준으로 필터링할 수 있음으로 필요한 정확한 정보를 매우 쉽게 얻을 수 있습니다. - 알림 화면에서 바로 답변하기
이제 알림 화면을 벗어나지 않고도 메모에 응답할 수 있습니다. 여러 디자인 파일을 탐색하지 않고도 한곳에서 알림을 관리하고 팀과 동기화 상태를 유지하세요!
이 알림 기능들은 아직 정식 출시된 기능은 아닙니다. 최종 릴리스를 수정하고 출시할 수 있도록 많은 피드백 부탁드립니다.
| Zapier와 통합 |
마지막 소식은 바로 Zeplin이 Zaps라는 사용자 지정 워크플로우를 만드는 자동화 도구인 Zapier와 통합되었다는 것입니다. Zapier는 개발 배경이 없어도 워크플로우를 자동화할 수 있어 API를 모르는 팀원도 워크플로우를 자동화할 수 있습니다. 이제 Zeplin에서 손쉽게 사용자 지정 워크플로우를 만들어보세요!
여기까지 2021년에 새로워진 Zeplin에 대한 소개였습니다.
더 많은 새로운 소식을 알고 싶으시면 아래의 Zeplin 신기능 출시 이벤트 영상을 시청하세요!
이 글은 Zeplin의 Introducing Component Variants, Zapier Integration & new Notifications experience을 번역한 글입니다.
제플린 견적 및 기능 문의 : sjlim@tangunsoft.com / 02-6206-2556
'Zeplin > Zeplin 정보 공유' 카테고리의 다른 글
| 2021 Zeplin, New 에디션 플랜! (2) | 2021.05.04 |
|---|---|
| Figma와 Zeplin: Superformula의 성공적인 디자인-개발 프로세스 (0) | 2021.05.04 |
| 새로운 Storybook 용 Zeplin Add-on을 소개합니다! (0) | 2021.03.02 |
| Figma와 Zeplin를 이용한 ArcTouch의 최적 워크플로우 (0) | 2021.03.02 |
| 글로벌 디자인 시스템을 구축한 Somo와 Audi의 협업 이야기를 들려드립니다. (0) | 2021.01.18 |
| Zeplin과 Adobe XD를 이용한 Electrolux의 협업을 위한 여정 (0) | 2020.12.15 |
| Zeplin에 아토믹 디자인(Atomic Design)을 적용한 LM 그룹과의 인터뷰를 공개합니다! (0) | 2020.12.10 |
| Zeplin과 Adobe XD를 이용해 워크플로우를 개선한 WestJet의 이야기를 들려드립니다. (0) | 2020.11.20 |