–
툴팁, 버튼, 알림(토스트 등), 텍스트필드, 아바타(프로필), 체크박스, 모션, 팝오버, 라디오 버튼 등의 공통점은 대부분의 서비스에 적용될 수 있는, 자주 쓰이는 UI 컴포넌트라는 점입니다. 오늘 소개할 서비스는 이처럼 우리가 기본적으로 고려해야 할 UI 컴포넌트를 어떻게 구성해야 하며 고려해야 할 내용은 무엇인지 자세히 정리해 주는 곳입니다.
‘UI 플레이북’의 기본 화면입니다. 컴포넌트를 검색할 수 있는 검색창이 먼저 보이고, 아래로 우리가 확인할 수 있는 UI 컴포넌트 리스트를 살펴볼 수 있어요. 사실 9개의 컴포넌트를 확인할 수 있고, 1개는 업데이트 예정으로 되어 있어 검색 기능을 사용할 일은 아직 많지 않습니다. 다만, 개수는 적어도 내용은 우리가 하나의 UI 컴포넌트를 구성하는 데 있어 한번쯤 고려해봐야 할 내용이 잘 정리되어 있어 참고하기에 좋습니다.
메인 화면에서 등록된 UI 컴포넌트에 대한 기본 정보를 확인할 수 있습니다. 컴포넌트 이름만 포함된 것이 아니라 실제 쓰이는 모습을 볼 수 있습니다. 라디오 버튼은 곧 추가될 예정이라는 사실 또한 알 수 있는데, 이렇게 계속 UI 컴포넌트가 추가될 예정이라고 하네요.
그럼 이제 상세 내용을 살펴보겠습니다. 먼저 ‘알림’에 대한 내용으로, 상세 화면으로 이동하면 해당 UI 컴포넌트가 어떤 역할을 하는지에 대한 내용을 확인할 수 있어요. 사용자에 대한 알림(또는 피드백)은 화면 하단에 일시적으로 등장하는, 일정한 시간이 지나면 자동으로 비활성화될 수 있다는 등의 내용이 담겨있습니다.
기능 관점에서의 내용 아래로는 어떻게 활용할 수 있는지에 대한 내용이 작성되어 있습니다. 메시지는 한눈에 이해하기 쉽게 작성되어야 하며, 정보 제공과 동시에 사용자가 연관 행동을 할 수 있는 구성을 고려해야 한다는 내용도 포함되어 있습니다. 메일 발송이 완료되었다는 메시지에 발송 취소 버튼이 함께 포함되는 것이 대표적인 사례라고 할 수 있겠네요.
이번에는 체크박스에 대한 내용입니다. 앞서 살펴본 알림과 동일하게 기본적으로 어떻게 활용할 수 있는지, 고려해야 할 내용은 무엇인지 등에 대한 내용을 차례로 확인할 수 있습니다. 자주 쓰이고, 기본적인 UI 컴포넌트라는 판단에 자칫 놓칠 수 있는 내용을 확인하기 좋은 역할을 해준다고 생각합니다.
또 응용해서, 함께 활용하기 좋은 방법에 대한 내용도 확인할 수 있습니다. 체크박스는 한 개 단위로도 사용할 수 있지만, 하위 속성을 포함하는 경우도 있어 이런 상황에서는 어떻게 구성해야 하는지 알 수 있어요.
UI 컴포넌트별 접근성에 대한 내용도 확인할 수 있습니다. 접근성 관련 더 자세한 정보를 확인할 수 있는 링크도 제공되는 모습이네요. 정리해 보면, 하나의 컴포넌트 단위로 간단한 설명, 활용도, 주요 사례, 접근성 안내, 구현 방법 등을 확인할 수 있습니다.
이메일을 등록하면 뉴스레터를 통해 새로운 컴포넌트가 등록되었을 때 관련 내용을 바로 받아볼 수 있습니다. 아직 업데이트 주기는 정확히 알 수 없지만, 우선은 미리 등록된 9개의 UI 컴포넌트를 확인하는 것만으로도 많은 도움을 받을 수 있는 공간입니다. 더 자세한 내용은 ‘링크’를 참고해 주세요!
- 코딩 없이, 다양한 스타일의 컴포넌트를 맞춤형으로 활용할 수 있는 곳
- 무료 피그마 컴포넌트를 카테고리에 따라 확인하고 복사할 수 있는 곳
- 다양한 종류의 컴포넌트와 디자인 시스템 확인이 가능한 : The Component Gallery
–
