국내에서도 이제 디자인 시스템 사례를 확인하는 것이 어렵지 않은 상황이 되었어요. 오늘 소개할 서비스는 전 세계 다양한 디자인 시스템을 기반으로 활용 가능한 컴포넌트를 종류에 따라 확인 할 수 있는 ‘The Component Gallery’입니다. 원하는 컴포넌트 중 특정 케이스를 선택하면 해당 디자인 시스템으로 이동, 예제를 확인하고 적용 할 수 있어요.

The Component Gallery‘에서는 크게 2가지 구분에 따라 내용을 확인 할 수 있어요. 하나는 컴포넌트, 또 하나는 디자인 시스템입니다. 전 세계 다양한 서비스 및 브랜드의 디자인 시스템 내 컴포넌트를 분류에 따라 정리해주기 때문인데요. 종류가 꽤 세분화 되어 있어 원하는 컴포넌트를 찾기에 충분하다는 생각이 드는 곳이기도 합니다.

여러 컴포넌트 중 ‘Alert’을 선택했을 때 화면입니다. 총 66개 예제를 볼 수 있는데요. 알리바바-앤트 그룹의 Ant Design부터 Atlassian 디자인 시스템까지 실제 우리에게도 잘 알려진 출처들을 확인 할 수 있습니다. 이 중 하나를 선택하면 해당 디자인 시스템 중 ‘Alert’ 또는 ‘Notification’등의 상세 페이지로 바로 이동하도록 구성되어 있어요.

Ant Design의 메시지 화면으로 이동한 모습이에요. 디자인 시스템을 하나씩 찾아 들어가 원하는 라이브러리를 찾는 구조가 아니라 특정 컴포넌트에 해당하는 샘플을 한 눈에 살펴본 뒤 바로 진입 할 수 있는 구조라는 점에서 상대적으로 빠르게 확인 할 수 있다는 장점이 있습니다.

이번에는 Atlassian의 디자인 시스템 중 메시지에 해당하는 페이지로 이동한 모습이에요. 확실히 ‘얼럿’에 대한 예제만 빠르게 확인 할 수 있었습니다.

이번에는 ‘Card’에 해당하는 컴포넌트 상세 페이지를 확인해봤어요. 총 50개의 예제가 등록되어 있으며 마찬가지로 원하는 예제를 선택하면 상세 화면으로 바로 이동할 수 있습니다. 또 코드 예제가 제공 되는지 접근성에 대한 정보가 있는지 등 예제에 대한 추가 정보도 함께 확인 할 수 있습니다.

그 중, BBC Design Patterns의 Cards를 확인한 모습이에요. 컴포넌트에 따라 최소 30개 이상의 예제가 잘 정리되어 있어 이 곳만 즐겨찾기 해도 대부분의 컴포넌트를 살펴볼 수 있습니다.

서비스를 구성하는 대부분의 요소들이 포함되어 있어 이 곳을 알게 된 후 다양한 예제를 확인하는 즐거움에 한참을 보냈는데요. 이 자체는 ‘The Component Gallery‘의 가장 큰 장점이 되기도 합니다.

뿐만 아니라, 이렇게 디자인 시스템을 별도로 확인 할 수 있어요. 컴포넌트 예제 리스트와 마찬가지로 코드 예제가 제공 되는지 등에 대한 정보도 포함되어 있어 특정 디자인 시스템을 확인하고자 할 때 많은 도움을 받을 수 있습니다.

검색을 통해 원하는 컴포넌트나 디자인 시스템을 찾는 것도 가능한 ‘The Component Gallery‘. 서비스 구성 및 구현에 필요한 내용을 빠르게, 다양하게 찾아볼 수 있다는 점에서 정말 매력적인 서비스라는 생각이 듭니다. 더 자세한 내용은 이 곳을 통해 확인해주세요!

함께 읽어보세요!

00:00 뉴스레터 안내

지난 뉴스레터 주제는 ‘모바일 앱 내 에디터 기능‘이었어요. 브런치, 포스타입, 삼성과 애플 기본 메모, 노션 등 다양한 서비스 내 에디터를 살펴봤습니다. 다음 주제는 ‘활동/운동 기록’ 서비스 분석이에요. 삼성과 애플이 기본 제공하는 헬스 앱은 물론 운동 등 우리가 하는 행동 데이터를 바탕으로 다양한 기능을 제공하는 서비스 6개를 자세히 들여다 볼 예정입니다. 다음 주제도 많은 기대 부탁드려요! (뉴스레터 구독)