제플린(Zeplin)에서 간격과 램(Rem) 유닛을 확인하는 방법

안녕하세요. 블로그 관리자입니다.

디자이너와 개발자가 같이 작업할 때 색상, 텍스트 크기, 구성요소 외에 디자인에서 꼭 확인해야 하는 것은 간격입니다.

제플린(Zeplin)에서 디자인 Context의 간격 시스템을 공유할 수 있는 방법과 램(Rem) 유닛에 대해 전달해 드리겠습니다.

왜 간격이 중요한가요?

디자인은 구성 요소들의 위치가 조금만 달라도 전체적인 느낌이 많이 달라집니다. 그렇기 때문에 디자이너의 의도에 맞는 디자인을 하기 위해서는 개발자는 구성 요소들의 정확한 간격을 전달받아야 합니다.

지금까지는 서로 다른 간격 시스템 때문에 정확한 간격을 전달받기 위해서는 많은 어려움이 있었고 시간도 많이 걸렸습니다. 그래서 이번에 제플린(Zeplin)은 개발자와 디자이너가 순조롭게 간격을 번달받을 수 있는 새로운 간격 시스템을 도입했습니다.

제플린(Zeplin) 간격 확인 이렇게 하시면 됩니다.

간격을 확인하려면 Zeplin 스타일 가이드(Style Guide)의 [Spacing & Layout]이라는 새로운 페이지로 이동합니다. 그리고 [Add Token] 탭을 눌러 간격 토큰(Spacing token)을 생성합니다.

토큰의 이름은 자유롭게 설정할 수 있습니다.

간격 토큰(Spacing token)을 생성하면 아래와 같이 디자인의 간격을 보실 수 있습니다.

영역을 표시하는 오버레이 색상은 자유롭게 변경할 수 있습니다.

그림에서 보이듯 간격 토큰(Spacing token)이 사용되는 영역은 불투명한 오버레이로 표시되어 영역을 쉽게 구별할 수 있습니다.

램 유닛 활성화(Rem unit)

지금까지 많은 개발자들은 램(rem) 수치를 볼 수 있게 해달라는 요청이 있었습니다. 이 요청을 해결하고자 Zeplin 팀은 오랫동안 연구했고 드디어 Zeplin에서 램 수치를 보실 수 있게 되었습니다.

제플린(Zeplin)에서 램 유닛(Rem unit) 활성화하시려면 스타일 가이드(Style guide)의 [Spacing & Layout] 페이지로 돌아가 [enable rem] 버튼을 누르기만 하면 아래와 같이 수치를 rem 단위로 보실 수 있습니다.

추가 팁

• Tip 1: 스타일 가이드(Style guide)와 Zeplin에서 단일 기본값으로 수치를 정의하면 설정하신 기본 정의로 수치를 볼 수 있습니다. 예를 들어, 기본 수치가 8px이고 이것을 "X"라고 정의하면 16px은 "2X"라고 표시됩니다.
• Tip 2: 스타일 가이드(Style guide)에서 간격 토큰(Spacing token)을 정의하면 Zeplin 확장자를 통해 CSS, Sass와 같은 스타일 시트 언어, 변환 상수(Swift constants), XML 변수와 같은 플랫폼 특별 코드 스니펫(snippet)을 받으실 수 있습니다.
• Tip 3: 사용자 지정 코드 스니펫(snipet)을 생성하기 위한 확장자를 직접 만들 수도 있습니다.
• Tip 4: 간격 토큰(Spacing token)은 Zeplin API를 통해 액세스할 수 있으며 자동으로 코드 베이스로 끌어와 사용자 정의 워크플로우를 구축할 수 있습니다.

감사합니다.

이 게시물은 Zeplin의 Introducing Spacing and rem unit을 번역한 글입니다.