오늘은 39개의 디자인 시스템 등을 참고해 유저 인터페이스 가이드라인을 정리해 주는 곳을 소개하고자 합니다. 토글 버튼, 얼럿, 컬러 피커 등 서비스에서 자주 사용되는 유저 인터페이스에 대한 여러 예제는 물론, 디자인 시스템에 따라 어떤 명칭으로 사용되며, 실제 구성 시 참고해야 하는 내용은 무엇인지 자세한 내용을 확인할 수 있는 곳이기도 합니다.

‘uiguideline’에는 42개의 유저 인터페이스 관련 가이드가 등록되어 있습니다. 서비스에 따라 별도로 제공되는 기능이 아닌 이상, 이곳에 등록된 유저 인터페이스 기본 구성요소만 살펴봐도 어떻게 구성하면 좋을지에 대한 정보를 확인할 수 있다는 점이 가장 큰 장점입니다.

등록된 유저 인터페이스 내용을 리스트로 확인한 뒤, 하나를 선택하면 상세화면을 통해 자세한 정보를 확인할 수 있는데요. 위 이미지는 ‘리뷰’를 선택해 상세화면으로 이동한 모습입니다. 가장 먼저 살펴볼 수 있는 정보는 주요 서비스가 리뷰 기능의 유저 인터페이스를 어떻게 활용하고 있는지에 대한 내용입니다. 에어비앤비와 레드핀(미국의 프롭테크 서비스), 로튼 토마토 등의 사례를 볼 수 있어요.

이어서 리뷰라는 유저 인터페이스를 각 디자인 시스템이나 프레임워크에서 어떻게 표현하고 있는지 확인할 수 있습니다. 리뷰는 ‘Rating’라는 이름으로 많이 쓰인다는 사실을 알 수 있네요. 유저 인터페이스를 구성함에 있어 명칭 역시 고민되는 부분이기에 여러 디자인 시스템을 종합해 하나의 데이터로 볼 수 있다는 점은 많은 도움이 됩니다.

리뷰 기능을 적용하는데 있어 필요한 사이즈 등에 속성 정보도 확인할 수 있습니다. 위 이미지는 정보가 펼쳐지지 않은 상태지만, 특정 내용을 클릭하면 최소, 중간, 최대 사이즈를 확인할 수 있습니다. 또 0부터 0.5 단위의 데이터가 어떻게 반영되는지도 함께 볼 수 있어요.

또 하나 매력적인 부분은 각 유저 인터페이스 단위로 레이어 구성이 어떻게 되는지 피그마를 통해 자세히 살펴볼 수 있다는 점입니다. 설명이 충분히 제공된다 하더라도 적용 시 어떤 방법으로 구성하면 좋을지에 대한 이해는 부족할 수 있는데요. 피그마 미리보가 적용되어 있어 훨씬 구체적인 이해가 가능합니다.

체크박스, 파일첨부, 사이드바, 드롭다운, 탭 구성 등 다양한 유저 인터페이스의 가이드에 해당하는 내용을 살펴볼 수 있다는 점에서 충분한 활용 가치가 있는 곳이라고 생각합니다. 더 자세한 내용은 ‘링크’를 통해 확인해주세요!

–

Post Views: 561

RELATED ARTICLESMORE FROM AUTHOR