다른 서비스
NEW
기획
디자인
개발
프로덕트
아웃소싱
프리랜싱
비즈니스
최근 검색어
전체 삭제
최근 검색어가 없습니다.

디자인

디자인 시스템에 필요한 UI 컴포넌트 모음

디자인 시스템에 대해 관심을 처음 갖게 된 2019년 초반, 레딧 커뮤니티에서 재미있는 글을 본 적 있습니다. ‘디자인 시스템이 디자이너를 대체할 것(Yes, design systems will replace design jobs)'이라는 내용이었는데, 대부분의 디자이너가 '디자인 시스템은 디자이너 포지션을 대체하지 못할 것!'이라고 댓글을 달았습니다.

 

이때 에어비앤비와 페이스북의 첫 디자인 시스템 프로젝트를 이끌었던 ‘Adam Michela'가 등장해 대부분의 디자이너들의 의견에 "아니!"라고 반박했습니다. 그는 “디자인 시스템은 공장의 ‘라인’과 같고, 교환 가능한 부품과 같다”면서 “앞으로 디자이너들은 디자인 시스템 내 구성된 컴포넌트를 어떻게 조합하면 좋을지 고민하는 프로덕트 매니저와 같은 역할을 하게 될 것”이라고 주장했습니다.

 

100% 동의할 수 없지만, 우리가 ‘디자인 시스템'을 어떻게 받아들이고 활용해야 하는 관점에서는 충분히 가치 있는 내용이라고 생각합니다. 불필요한 커뮤니케이션을 줄이고 프로덕트 디자인에 대한 일관성을 유지하기 위해 그리고 궁극적으로는 효율적인 업무를 위해 ‘디자인 시스템’이 필요합니다. 또한 국내에서도 이제 디자인 시스템을 자체적으로 구축하는 사례를 어렵지 않게 찾아볼 수 있습니다.

 

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

 

디자인 시스템의 UI 컴포넌트를 종류에 따라 확인

UI 컴포넌트

 

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

 

컴포넌트 갤러리

 

컴포넌트와 디자인 시스템 리스트를 확인하기 전, 원하는 내용을 직접 검색해 결과를 확인할 수도 있습니다. 검색 대상은 컴포넌트 이름, 디자인 시스템의 이름입니다. 이곳에서 다루는 컴포넌트의 범위가 넓어 대부분의 컴포넌트가 검색 대상에 포함되기에 필요한 내용이 있다면 먼저 검색 기능을 활용해 보시는 것도 도움이 될 것입니다.

 

컴포넌트 검색

 

확인 가능한 UI 컴포넌트는 총 53개로 날짜 입력, 파일 업로드, 아코디언, 얼럿, 아바타, 버튼, 카드, 배지 등 우리가 서비스를 설계하는 과정에 자주 쓰이는 것 위주로 구성되어 있습니다. 서비스에서 자주 쓰인다는 것은, 디자인 시스템 구성에 포함될 가능성이 높다는 것을 의미하기도 합니다.

 

컴포넌트 아코디언

 

53개 컴포넌트 중, 아코디언(Accordion)을 먼저 선택했습니다. 각 컴포넌트는 상세화면을 갖고 있으며, 상세화면에서는 전 세계 다양한 디자인 시스템에서 해당 컴포넌트를 어떻게 다루고 있는지 살펴볼 수 있습니다. 같은 아코디언이지만 서비스 성격이나 디자인 시스템에 따라 조금씩 다르게 적용되어 있어, 우리는 어떤 기준에 따라 활용하면 좋을지 여러 내용을 비교할 수 있습니다.

 

컴포넌트 리스트

 

컴포넌트에 해당하는 리스트는 언어(CSS, HTML, React 등), 확인 가능한 내용(접근성, 코드 예제, 오픈 소스 여부 등)에 따라 필터링할 수 있습니다. 원하는 조건에 따라 사례를 더 빠르게 찾아볼 수 있는 환경이 제공됩니다. 아무래도 여러 언어와 목적에 따라 구성된 컴포넌트라 전체를 살펴보기보다 우리에게 적합한 기준에 따라 먼저 살펴본 뒤 다른 사례를 차례로 확인하는 과정이 필요하다고 생각합니다.

 

 

리스트에는 디자인 시스템 이름과 구성에 사용된 언어, 그리고 연관 서비스 정보를 확인할 수 있습니다. 아코디언의 경우 우버, BBC 글로벌, 이베이, 모질라 등 여러 곳에서 만들어진 내용이 포함되어 있으며 하나를 선택하면 상세 정보를 확인할 수 있습니다. 예를 들어 아코디언 - 우버 디자인 시스템을 클릭하면 우버의 디자인 시스템 페이지로 이동해 아코디언에 대한 코드 예제, 샘플 등을 확인할 수 있도록 구성되어 있습니다.

 

컴포넌트 상세화면

 

같은 방법으로 53개 컴포넌트에 포함된 내용을 하나씩 둘러볼 수 있습니다. 이번에는 ‘버튼' 컴포넌트 상세 화면의 모습입니다. 아코디언과 마찬가지로 사용된 언어와 확인 가능한 내용에 따라 리스트를 구성할 수 있으며, 원하는 카드를 클릭하면 상세 정보를 확인할 수 있습니다.

 

컴포넌트 시스템확인

 

필요한 컴포넌트는 물론, 컴포넌트에 대한 정보를 제공하는 특정 디자인 시스템 확인까지 한곳에서 가능해 디자인 시스템을 먼저 찾고, 원하는 컴포넌트나 구성 방법을 찾는 과정보다 훨씬 간편하게 느껴집니다. 게다가 등록된 디자인 시스템과 컴포넌트 수가 많아 다른 곳을 참고하지 않아도 꽤 많은 정보를 얻을 수 있다는 점이 이곳의 가장 큰 매력입니다.

 

컴포넌트 설명

 

각 컴포넌트 화면 하단에는 해당 컴포넌트가 어떤 의미를 갖고 있는지에 대한 설명도 제공됩니다. 위 이미지는 ‘버튼' 컴포넌트에 대한 설명으로 버튼 유형의 속성, 버튼처럼 설계된 텍스트 링크 등에 대한 내용이 포함되어 있습니다. 컴포넌트 별 기본 구성 방법과 유의사항 등이 포함되어 있어 함께 참고하기 좋은 자료로 활용할 수 있습니다.

 

컴포넌트 사용가이드

 

사용 가이드도 제공되는데, 이 공간에는 함께 읽어보면 좋은 ‘아티클'이 포함되어 있습니다. 컴포넌트 예제, 설명, 그리고 구성에 참고할 만한 아티클, 마크업, 스타일링에 대한 정보를 차례로 확인할 수 있습니다. 53개 컴포넌트에 위 정보들은 모두 동일하게 포함되어 있어 초기 학습 과정에도 도움이 될 수 있다고 생각합니다.

 

컴포넌트 일반모드

 

저는 다크 모드로 보는 것을 선호하지만, 일반 모드를 통해 내용을 확인할 수도 있으니 이용 과정에 참고하셨으면 합니다.

 

 

81개 디자인 시스템 정보를 한 곳에서!

앞서 말씀드린 것처럼, ‘The Component Gallery’에서는 컴포넌트 단위가 아닌, 디자인 시스템 단위의 정보 확인도 가능합니다. 현재 81개 디자인 시스템이 등록되어 있으며, 리스트를 통해 기본 정보를 확인한 뒤 클릭 시 각 디자인 시스템 메인 화면으로 이동할 수 있습니다.

 

디자인 시스템

 

디자인 시스템 기본 구성 모습입니다. 대표 이미지와 함께 이름, 제작한 곳, 사용된 언어 등의 구분, 오픈 소스 등 특징을 정보로 확인할 수 있습니다. 컴포넌트와 같은 방법으로 필터링을 할 수 있어 81개 디자인 시스템을 원하는 조건에 따라 살펴볼 수 있습니다.

 

어도비 시스템

 

디자인 시스템 리스트 중 어도비 디자인 시스템을 확인해 이동한 모습입니다. 컴포넌트에 포함된 내용은 디자인 시스템 중 해당 컴포넌트 정보를 바로 확인할 수 있도록 연결되지만, 디자인 시스템 단위에서는 메인 화면으로 이동해 전반적인 내용을 확인할 수 있게 구성되어 있습니다.

 

디자인 큐레이션

 

처음 이곳을 알게 되었을 땐, 디자인 시스템을 큐레이션 해주는 목적이 강했는데 그 수가 많이 늘어났을 뿐만 아니라 다양한 컴포넌트 단위로 시스템을 볼 수 있어 저도 자주 찾는 공간입니다.

 

 

어떻게 활용하면 좋을까?

디자인 시스템에 대한 관심이 생겼을 때, 처음엔 구글 등을 통해 단순 검색으로 정보를 찾고 눈에 띄는 내용은 스프레드시트 등에 정리 후 팀에 공유했습니다. 참고할 만한 컴포넌트가 있거나 디자인 시스템 페이지 자체를 잘 구성한 것 등으로 구분했던 기억이 납니다. 하지만 이제 53개 컴포넌트와 81개 디자인 시스템이 모여 있는 곳을 알게 되어 컴포넌트 단위로의 검색이나 내용 확인을 더 편하게 할 수 있게 되었습니다.

 

디자인 시스템 구축을 위한 사례 확인 시 가장 적합하게 쓰일 수 있는 웹서비스입니다. 무엇보다 컴포넌트 단위로의 검색 및 사례 확인이 가능하다는 점은 우리가 만들 디자인 시스템에 핵심으로 포함될 내용을 다채롭게 확인하는데 많은 도움이 될 수 있습니다. 이미 디자인 시스템을 갖추고 있는 상황에서도 버전을 올리거나 페이지 구성 등을 참고할 때 원하는 사례만 빠르게 훑어볼 수 있다는 점에서 도움이 될 수 있다고 생각합니다.

 

<참고 자료>

The Component Gallery

 

요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.

댓글 1
댓글이 삭제 되었습니다.

지금 써보러 갑니다

작지만 가치 있는 변화를 이끌어내는 서비스를 만들기 위해 노력하고 있습니다. 국내외 다채로운 IT 서비스와 트렌드를 살펴보는 것이 좋아 '지금 써보러 갑니다'를 운영하고 있어요.

다양한 컬러 생성과 활용으로 색 조합을 도와주는 ‘Coolors’

디자인

배경, 효과 등을 마음대로 조합해 아이콘을 만드는 ‘Iconray’

디자인

디자인 아이디어를 구체화할 수 있는 캔버스 ‘Easel’

디자인

이미지를 중심으로 다양한 피드백을 주고받는 ‘Picflow’

디자인

스크린샷을 목업 이미지로 편집하는 서비스, ‘Pika’

디자인

2억 개 이상 조합이 가능한 3D 아바타 생성 서비스, ‘Peeps’

디자인

업무에 바쁜 당신을 위한 기본 아이콘 제공 서비스, ‘heroicons’

디자인

앱 설치율을 높이기 위한 스크린샷 제작 서비스, PWA Screenshots Generator

디자인

“특정 주제 이미지를 한 번에!”…스톡 이미지 제공 사이트 모음

디자인

선택이 어려운 당신을 위한 컬러 조합 서비스, Reverb

디자인

구글 폰트보다 더 빠르고 쾌적하게, Bunny Fonts

디자인

여섯 가지 디자인 패턴을 제작하는 웹 서비스, Heazy Studio

디자인

다섯 가지 프로필을 쉽게 생성하는 피그마 플러그인, Avatarg

디자인

정적인 SVG 파일에 생동감을 더해주는, Designstripe

디자인

당신의 ‘선’ 작업을 돕는 2가지 서비스

디자인

레퍼런스 수집 및 관리가 쉬워지는, Substratum

프로덕트

커버 이미지 제작이 쉬워지는 서비스, Coverview

디자인

애니메이션이 포함된 목업 제작 서비스, ‘Animockup’

디자인

다양한 종류의 화살표 제작을 돕는, 'Fffuel'

디자인

프로필 제작을 위한 매력적인 툴 ‘Boringavatars’와 ‘Avvvatars’

디자인

핸드 스케치를 위한 만능 툴, ‘Printables’와 ‘Sneakpeekit’

디자인

디자이너가 원하는 컬러를 손쉽게, 'Atmos'

디자인

웹 페이지 구성 도우미 ‘Shuffle’

디자인

다양한 UI 설정을 실시간으로 적용하는 서비스 ‘셰이퍼’

디자인

보다 쉬운 웹 접근성을 위한 도우미 : The A11Y Project

디자인

취향에 맞게 아이콘과 일러스트 편집이 가능한: Shape

디자인

원하는 폰트 조합을 쉽게 찾을 수 있는: Archetype

디자인

디자인 패턴 제작 시 유용한 서비스들

디자인

디자인 작업 시 유용한 아이콘 제공 서비스들

디자인

다양한 그래픽 콘텐츠를 제작할 수 있는: Mega Creator

디자인

박스 디자인을 쉽게 생성할 수 있는: Box Shadow Art

프로덕트

웹에서 이미지 및 영상 편집을 쉽게 하고 싶다면?

디자인

피그마 작업 시 유용한 플러그인 Top3

디자인

빠른 목업 제작을 위해 알아두면 좋은 서비스들

디자인

웹사이트와 문서에 대한 피드백을 손쉽게! : Punchlist

프로덕트

디자인 작업 효율을 높여주는 크롬 확장 프로그램 5

디자인

원하는 스타일에 따른 컬러 조합 확인이 가능한: Huemint

디자인

특정 웹페이지의 벡터 콘텐츠를 확인하는: SVG Gobbler

디자인

컬러와 물결 패턴으로 배경을 만드는: Wicked Backgrounds

디자인

다섯 가지 컬러 조합으로 웹디자인 구성을 돕는: Happyhues

디자인

바우하우스 스타일의 패턴 디자인 생성: Bauhaus Art Generator

디자인

글래스모피즘 디자인 구현을 위한 CSS 생성 서비스: Glass UI

디자인

같은 분야를 다룬 글들을 권해드려요.

요즘 인기있는 이야기들을 권해드려요.

일주일에 한 번!
전문가들의 IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.

일주일에 한 번! 전문가들의 요즘IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.