DesignOps : 효율적인 업무 프로세스 자세히보기

Zeplin/Zeplin 정보 공유

2021년 Zeplin의 새로운 소식을 소개합니다. 새로운 구성 요소 변형(Component Variants), 새로워진 알림 기능, Zapier 과의 통합

단군소프트 2021. 2. 22. 10:37

안녕하세요. 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)이 자동으로 생성되면 사용자는 해당 정의를 자신의 워크플로우에 맞도록 편집할 수 있습니다.

구성 요소의 "Type"및 "State"와 같은 속성을 확인할 수 있습니다.

 

2. 새로워진 개발자 경험

구성 요소 변형(Component Variant)이 Zeplin에 정의되면 구성 요소를 코드로 변환하는 개발자들은 아래와 같은 새로운 경험을 체험할 수 있습니다.

  • 구성 요소 속성 확인
    개발자가 구성 요소를 선택하면 파란색 헤더가 해당 구성 요소임을 표시해 줍니다. 그리고 오른쪽 패널에는 구성 요소 변형의 속성을 나열하는 새 섹션이 나타나 속성을 확인할 수 있습니다.

위 이미지의 변형 속성은 "Primary"이고 State 속성은 "Default"입니다.

또한 구성 요소 변형(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 신기능 출시 이벤트 영상을 시청하세요!

youtu.be/1CcHi_wSscg

이 글은 Zeplin의 Introducing Component Variants, Zapier Integration & new Notifications experience을 번역한 글입니다.

제플린 견적 및 기능 문의 : sjlim@tangunsoft.com / 02-6206-2556