*잠깐, 위시켓은 2022년 시밀러웹 방문자 수 기준, 국내 1위 IT아웃소싱 플랫폼입니다. 현재 10만 이상의 개발업체, 개발 프리랜서들이 활동 중이며 무료로 프로젝트 등록이 가능합니다. 프로젝트 등록 한 번으로 여러 개발업체의 견적, 예상기간, 포트폴리오 등을 한 번에 비교해 보세요📝



불과 몇 년 전만 해도 디자이너들은 컴포넌트를 개인적인 용도로 사용하기 위해 제작했습니다.

하지만 2022년에는 디자인 팀들의 입지가 커지고 있고, 더 많은 디자인 시스템(Design System) 디자이너들이 등장하고 있습니다. 그리고 이 트렌드와 더불어 컴포넌트 라이브러리들이 점차 성숙해지고 복잡해짐에 따라서 컴포넌트 제작자(creator)와 사용자(consumer) 간의 지식 격차가 발생하고 있습니다.

컴포넌트에 필요한 베리언트(variant)가 빠짐없이 있으면 그만인 시대는 지났습니다. 이제 컴포넌트는 직관적이고, 정보적이며, 개발 사이드와 일관되어야 합니다.



이런 배경을 참고 부탁드리며, 이제부터 쉽게 사용 가능한 ‘피그마 컴포넌트’를 만드는 7가지 방법을 소개하겠습니다.

1. 속성의 디폴트 값

컴포넌트에는 매우 많은 베리언트가 있기 때문에 각 속성(property)의 디폴트 값을 표기하는 게 중요합니다. 이렇게 하면 사용자가 컴포넌트를 드래그 안 할 때 어떤 베리언트를 써야 하는지 쉽게 인지할 수 있습니다. 예를 들어 일반 사이즈와 작은 사이즈의 속성이 있는 버튼의 경우, 일반 사이즈를 디폴트 값으로 두어서 필요한 경우에만 속성을 바꾸도록 하는 게 좋습니다. 이렇게 하려면 아래 사진처럼 디폴트 값을 캔버스의 왼쪽 상단에 배치하는 게 용이합니다. 예시에서는 regular 사이즈의 Default 상태 버튼이 드래그인 할 때 기본 베리언트가 됩니다.



사실 논리적으로 사용 빈도가 높은 베리언트의 순서로 정렬하는 게 자연스럽기 때문에 디자이너들은 이런 규칙을 알게 모르게 적용하고 있습니다.

그럼 이어서 다음 예시를 살펴보겠습니다.

이처럼 디자이너가 컴포넌트를 크기에 따른 논리적 순서(가장 작은 것에서 가장 큰 순서)로 배치하게 되면 소비자가 가장 작은 것(sm)을 기본 값으로 인식하고 드래그하게 됩니다. 이 경우에는 베리언트를 아래 사진처럼 다시 정렬해서 UX를 최적화하는 게 좋습니다.



2. 속성 값의 정렬 순서

기본적으로 캔버스가 렌더링 될 기본 베리언트를 결정하지만 디자이너가 속성 패널(propeties panel)에서 사용자에게 표시되는 값의 순서를 수동으로 설정할 수도 있습니다.

순서를 변경하면 아래 사진처럼 기본 사이즈는 md이지만 드롭다운에는 크기의 논리적인 순서에 따라 sm, md, lg로 표시되도록 할 수 있습니다.



3. 컴포넌트 속성

Figma의 새로운 기능인 컴포넌트 속성(Component Properties)을 짧게 소개하겠습니다.(상세 소개는 여기를 참고하세요)

컴포넌트 속성의 가장 큰 장점은 관리해야 하는 베리언트의 수를 줄여서 가볍게 만드는 것인데, 이는 로딩 속도를 향상하고 컴포넌트 검색이나 파일을 여는 시간을 단축시켜서 제작자뿐만 아니라 사용자에게도 큰 도움이 됩니다.

또한 아래 예시처럼 코드와 디자인 사이에 일관성이 생기게 도와줍니다.

다만 관리할 베리언트가 적기 때문에 컴포넌트의 모든 베리언트를 한눈에 알아보기 어려운 점이 있어 주의가 필요합니다.



4. 네이밍

디자이너와 개발자 사이의 간극을 메우는 또 다른 방법은 디자인 속성과 그 값의 이름을 코드와 유사하게 만드는 겁니다. 대소문자 기준도 맞춰주면 좋습니다. 스토리북¹에서 속성과 값이 아래 예시처럼 모두 소문자로 되어있다면, 피그마에서도 맞춰주면 됩니다.



5. 불필요한 컴포넌트 숨기기

수백 개의 검색 결과에서 컴포넌트를 찾는 것은 누구에게나 짜증 나는 일입니다. 애셋(Assets) 패널을 쉽게 사용하려면 단독으로 사용되면 안 되는 컴포넌트 또는 레거시 디자인의 컴포넌트를 반드시 숨겨야 합니다.



메인 컴포넌트의 이름 앞에 마침표(.)나 언더바(_)를 추가하면 쉽게 숨김 처리할 수 있습니다. 자세한 내용은 피그마 아티클을 참고해 주세요.

6. 코너 케이스를 제거하세요

1년에 5회 이하의 빈도로 사용하는 베리언트는 컴포넌트에 포함시키면 안 됩니다. 먼저 예시로 아래의 로딩 상태 버튼을 봐주세요.



저는 이 버튼이 필요할 거라고 생각해서 컴포넌트에 넣었는데 누가 사용하는 것을 한 번도 보지 못했습니다. 이처럼 활용 가치가 크지 않은 베리언트는 괜히 피그마를 무겁게만 만듭니다. 이런 것들은 제거해 두고 나중에 필요할 때 다시 디자인하면 됩니다.

7. 슬롯을 사용하세요.

슬롯은(slot) 신규 기능은 아니지만 현업에서 많이 사용하지 않고 있습니다. 슬롯을 사용하면 인스턴스 분리에 걸리는 시간을 대폭 단축하고, 프로토타이핑을 빠르게 할 수 있기 때문에 사용하는 것을 추천드립니다. 아래의 모달 예시를 봐주세요.



사용자는 슬롯 컴포넌트를 통해 다른 필드 타입으로 쉽게 전환할 수 있습니다.

팁: 컴포넌트의 유연성을 더 높이려면, 필드 슬롯 몇 개를 숨겨놓고 필요에 따라 필드를 쉽게 추가할 수 있도록 하세요.

¹ 고립된 환경에서 컴포넌트 UI 개발을 위한 오픈소스 툴

국내 1위 IT아웃소싱 플랫폼 위시켓에 프로젝트를 등록해보세요.

6만 여건의 데이터를 바탕으로 프로젝트 견적을 상담해 드립니다.