–

컴포넌트는 UI(사용자 인터페이스)를 구성하는 중요한 단위 중 하나입니다. 버튼, 인풋박스, 체크박스 등 화면의 목적에 따라 다양하게 활용되기도 하는데요. 최근에는 프로덕트 단위로 디자인 시스템을 자체 구축해 이런 컴포넌트 등을 활용할 수 있도록 준비하는 경우도 있지만, 알리바바그룹의 디자인 시스템 Ant Design 등을 활용하는 경우도 자주 만나볼 수 있습니다. 후자의 경우에는 각 디자인 시스템에 따라 어떤 모습을 띄고 있으며, 어떻게 활용하면 좋을지에 대한 비교나 분석이 필요할 수 있는데요. 오늘 소개할 서비스는 자주 쓰이는 디자인 시스템을 기준으로 동일한 컴포넌트를 쉽게 비교하고 공식 문서 등을 통해 활용 방법이나 정보를 바로 확인할 수 있도록 도와주는 곳입니다.

–

디자인 패턴이라는 이름을 지닌 이곳에 들어가면, ‘완벽한 컴포넌트를 찾을 수 있다’는 내용을 가장 먼저 확인할 수 있습니다. 컴포넌트를 탐색하는 방법은 크게 세 가지로, 하나는 컴포넌트 이름을 검색하는 방법이며 또 하나는 주요 디자인 시스템에 따라 확인하는 방법 마지막으로 컴포넌트를 기준으로 찾아보는 방법입니다.

저는 디자인 시스템을 자주 찾아봤던 편은 아니라 먼저 ‘컴포넌트 타입’을 기준으로 탐색을 하게 되었습니다. 현재 등록된 타입은 다섯 가지로 버튼, 인풋, 셀렉트 박스, 체크박스, 스위치 등입니다. 원하는 컴포넌트를 선택하면 이곳에 등록된 다양한 디자인 시스템에서 해당 컴포넌트만 모아서 확인할 수 있습니다.

컴포넌트 타입 중, ‘버튼’을 선택한 모습입니다. 컴포넌트에 해당하는 버튼 모양을 미리 확인할 수 있으며, 각 버튼이 어떤 디자인 시스템에 포함되어 있는지 아이콘 형태로 확인이 가능합니다. 버튼명 아래로는 문서 확인하기 버튼이 포함되어 있는데, 클릭하면 공식 문서로 이동해 사용 방법 등을 자세히 살펴볼 수 있습니다.

이번에는 컴포넌트 타입이 아닌, 디자인 시스템을 기준으로 주요 컴포넌트를 확인해 봤는데요. 해당 디자인 시스템에 대한 간략한 설명과 함께 최신 버전 정보, 깃헙 스타, 웹사이트 링크 등이 적용되어 있습니다. 컴포넌트는 갤러리 형태의 리스트로 확인할 수 있는데, 컴포넌트 종류와 모습 그리고 해당 컴포넌트에 대한 자세한 내용 확인이 가능한 문서 바로가기 링크가 포함되어 있습니다. 배지, 아바타 등은 컴포넌트 타입으로 아직 묶여있지 않아서, 전체 컴포넌트 탐색이 필요한 경우에는 이 방법을 활용하는 편이 더 좋습니다.

공식 문서에서도 컴포넌트를 하나씩 확인할 수 있지만, 문서 전체에서 원하는 컴포넌트에 대한 정보를 바로 찾기 어려운 경우가 많은데요. 원하는 컴포넌트를 리스트 형태로 빠르게 찾고 관련 정보로 바로 이동할 수 있는 경로를 제공하기에 탐색이 더 편리하게 느껴집니다. 게다가 여러 방법으로 찾아볼 수 있고요.

디자인 시스템을 직접 구축해야하는 상황이라면 주요 컴포넌트를 비교해보는 방법으로, 특정 컴포넌트를 적용해야 하는 상황이라면 잘 알려진 디자인 시스템 내 동일 내용을 빠르게 확인하고 정보를 얻는 방법으로 사용하는데 도움이 되지 않을까 싶습니다. 현재 이곳에 등록된 디자인 시스템은 총 8개이며, 컴포넌트 타입은 5개입니다. 아래 내용과 함께 살펴보시면, 디자인 시스템에 대해 더 다채로운 정보를 확인하실 수 있습니다.

–

 ’10년 차, IT 기획자의 노트’ 출간 안내

제가 업무를 하면서 꾸준히 관리하고 있는 노트와 기록이 있어요. 책에 정리된 9개의 노트를 하나씩 나열하면 《배움 노트》 《리뷰 노트》 《기획 노트》 《스펙 노트》 《운영 매뉴얼》 《기능 가이드》 《백로그》 《회고 노트》 《피드백 노트》입니다. 책은 9개의 노트에 대한 제 경험과 작성 방법은 물론 성장에 대한 갈증으로 시작한 사이드 프로젝트 〈지금 써보러 갑니다〉 〈팁스터 뉴스레터〉를 어떻게 시작하게 되었는지, 이로 인해 얻게 된 것이 무엇인지도 포함되어 있습니다.

이미 충분한 메모와 기록을 평소에 해오고 있는 분이라면 한 번 비교해 볼 요량으로, 반대로 그동안 별다른 기록 없이 일해온 분이라면 어떻게 시작하면 좋을지 참고 삼아 보는 출발점으로, 이 책이 쓰였으면 좋겠습니다. 업무 공간 한쪽에 두고 사수가 고플 때, 이렇게 하는 게 맞나 초조하거나 불안한 마음이 들 때, 꺼내 볼 수 있는 책이 되기를 바라는 마음이에요. 책에 대한 보다 자세한 내용은 링크를 참고해주세요!

–

Post Views: 592

RELATED ARTICLESMORE FROM AUTHOR