디자인과 코드의 컴포넌트 연결 향상

안녕하세요, Zeplin 총판 단군소프트입니다.
오늘은 디자인 및 코드의 컴포넌트 연결 향상에 대해서 알아보겠습니다.

Agenda

- 디자인 컴포넌트 보기"하이라이트 컴포넌트"🪐
- Zeplin의 스토리북 통합: 새롭고 향상된 기능
- 미리 작업 계획, 재사용 가능한 컴포넌트

그럼 시작해볼까요?

---

지금의 우리는 디자인과 코드사이의 격차를 줄이는데 한 걸음 더 다가선 것 같습니다. 디자인 내 컴포넌트를 표시하는 두 가지 새로운 기능인 하이라이트 컴포넌트와 새롭게 개선된 스토리북 통합기능을 출시하게 되어 기쁩니다.

두 기능 모두 개발자를 위한 강력한 솔루션입니다. 시간을 절약하고,가능한 많은 코드를 재사용하며,워크로드를 더 잘 추정하고 싶으시다면 기회를 잡으세요! 🤓

 

디자인 컴포넌트 보기 "하이라이트 컴포넌트"🪐

Styleguides 및 Connected Components를 통해 Zeplin은 이미 디자인 시스템과 프로젝트의 코드베이스를 상호 참조하기 위해 각 레이어를 클릭하여 디자이너와 개발자가 재사용 가능한 디자인 컴포넌트를 볼 수 있는 고유한 기능을 제공합니다.
​
최근에 개발자들은 우리에게 재사용 가능한 디자인 컴포넌트를 한눈에 식별할 수 있기를 원한다고 말했습니다.

하이라이트 컴포넌트의 오늘 릴리스를 통해 새로운 "재사용 가능한 컴포넌트" 패널에서 코드베이스의 모든 디자인 컴포넌트와 연결된 정보를 볼 수 있습니다.

모두 표시를 토글하여 프로젝트 화면에서 컴포넌트를 강조 표시하고, 어떤 컴포넌트가 코드에 연결되었는지 확인할 수 있습니다. 또한 리포지토리의 코드 조각, 컴포넌트 상태, 링크 상태 및 코드베이스에서 편집할 수 있는 링크와 같은 유용한 정보를 즉시 확인할 수 있습니다.

‘링크 상태 보기’가 개발자의 공통적 고충인 지속적으로 발전하는 디자인을 추적하는 것을 해결하기 때문에 특히 기쁩니다. 링크 상태를 "아직 연결되지 않음"으로 전환하기만 하면 디자이너가 스타일 가이드에 최근에 추가한 새 컴포넌트가 있는지 쉽게 확인할 수 있습니다.

Zeplin의 스토리북 통합: 새롭고 향상된 기능

Storybook은 컴포넌트 중심 개발 팀을 위한 저장소이며, 최근에 출시된 Storybook 애드온의 인기를 감안할 때 Zeplin + Storybook
작업을 더욱 원활하게 만들고 싶었습니다.

이전에는 개발자가 Zeplin 명령줄 인터페이스(CLI)를 사용하여 Storybook 플러그인을 설치해야 했지만. 이번 릴리스에서는 Zeplin 내에서 바로 스토리북 URL을 입력하기만 하면 디자인 컴포넌트를 코드에 쉽게 연결하고 동기화 할 수 있습니다. 너무 쉬워서 누구나 사용할 수 있습니다. ⚡

새롭게 개선된 통합을 통해 Zeplin은 Storybook에 연결된 Styleguide를 검색하고 Zeplin의 컴포넌트와 Storybook의 스토리 간의 일치 항목을 자동으로 제안합니다. 개발자뿐만 아니라 비기술적 사용자도 Zeplin의 제안을 승인하거나, 단순히 시각적으로 비교하여 연결할 다른 컴포넌트를 검색할 수 있습니다. 이 작업에도 CLI를 사용할 필요가 없습니다 :D

오류 링크 상태를 통해 Styleguides와 코드베이스 간의 연결 오류를 확인할 수 있으므로 개발자가 사전에 수정할 수 있습니다. 또한 Zeplin은 Storybook에서 새 컴포넌트가 변경, 추가 또는 삭제되면 자동으로 스토리 목록을 업데이트합니다.

Zeplin의 새로운 통합을 통해 이제 내 디자인의 모든 연결된 컴포넌트에 대한 훌륭한 개요를 갖게 되었고, 내가 좋아하는 CSS 값을 얻을 수 있습니다.

저는 이 "full circle"이라는 개념을 내 디자인에 많이 사용합니다.
스토리북이 디자인을 통합하고 디자인이 스토리북을 통합하는 상태입니다.
Zeplin과의 이 양방향 통합에서 비기술 사용자와 기술 사용자 모두 서로의 작업을 활용할 수 있습니다. 저는 이것이 " full circle"을 향한 중요한 단계라고 생각하며 이 통합을 더 많이 사용할 수 있기를 기대하고 있습니다.

- 얀 브라가 , Chromatic의 수석 프론트엔드 엔지니어 및 Storybook 유지 관리자

 

향후 작업을 계획하여 최대한 재사용할 수 있습니다.

Highlight Components와 개선된 Storybook 통합을 통해 엔지니어링 팀이 다음을 수행할 수 있기를 바랍니다.

•시간 절약: 모든 화면에서 또는 글로벌 스타일 가이드를 사용하는 경우, 모든 프로젝트에서 재사용 가능한 모든 컴포넌트를 빠르게 볼 수 있습니다. 디자이너가 Styleguides에 새 컴포넌트를 추가할 때 이를 감지하여 빌드를 미리 계획할 수 있습니다. Storybook 통합을 통해 코드에서 새 컴포넌트에 대한 올바른 일치 항목을 쉽게 검색할 수 있습니다.

•코드 재사용: Zeplin 내에서 바로 코드베이스의 CSS 스니펫 및 기타 사용자 정의 코드를 볼 수 있습니다. 링크된 경우 편집 링크 를 사용하여 언제든지 변경할 수 있습니다. 미리 작성된 코드의 사용을 최대화하고 이미 존재하는 컴포넌트의 재구축을 방지합니다.

•더 나은 작업량 추정: 재사용 가능한 요소를 조기에 식별하여 남은 작업량을 더 잘 추정합니다. 엔지니어링 리더와 제품 관리자에게 이러한 가시성을 제공하여 개발자가 작업 범위를 정확하게 지정할 수 있도록 합니다.

이러한 업데이트는 전체 제품 팀이 Zeplin이라는 한 곳에서 디자인 시스템과 코드베이스의 정보에 액세스하고 사용하는 데 도움이 될 것이라고 믿습니다. 그리고 Storybook의 경우 새로운 통합 기능을 통해 기술에 익숙하지 않은 사용자도 단일 디자인 시스템을 유지하는 데 있어 자신의 역할을 수행할 수 있습니다.

아직 설정하지 않았다면  Zeplin에서 Styleguide를 설정하여 컴포넌트를 경험해보세요. (이러한 기능을 사용하려면 Styleguide가 필요합니다).

개선된 스토리북 통합은 스토리북을 사용하는 팀의 누구나 설정할 수 있습니다.
시작하려면 인스턴스 URL을 연결하기만 하면 됩니다.

---

여기까지 저희가 준비한 내용이었습니다. 유익하셨나요? :)
다음 시간에도 유익한 정보로 다시 찾아뵙겠습니다.

긴 글 읽어주셔서 감사합니다!

 

이 글은 Now live: Better connect components in design and code | Zeplin Gazette을 번역한 글입니다.