–
오늘 소개할 페이지는 ‘UI Kit’를 한 곳에서 확인할 수 있는 노션 페이지입니다. 새로운 프로젝트를 시작하는 데 있어 사용자 경험이나 인터페이스 구성에 참고가 되었으면 하는 마음으로 제작된 공간이기도 한데요. 피그마 등에 무료로 공개된 내용을 모바일 앱, 웹 앱, 랜딩 화면 등의 타입과 서비스 종류에 따라 잘 정리해 둔 곳입니다.
왼쪽으로 내비게이션 역할을 하는 구성이 있는데, 이곳에서 타입과 서비스 종류를 각각 선택해 내용을 확인할 수 있도록 구성되어 있습니다. 리스트는 구성모습을 미리 살펴볼 수 있는 이미지와 이름 그리고 구성에 대한 태그로 이뤄져 있어요. 갤러리 타입을 사용하고 있기에 전반적인 내용을 확인하기가 더 편리합니다.
랜딩 페이지에 대한 UI Kit도 따로 살펴볼 수 있습니다. 실제 서비스에 대한 사례는 아니지만, 서비스 성격 등에 따라 화면 구성을 어떻게 하면 좋을지, 디자인 가이드를 어떻게 활용하면 좋을지에 대한 정보를 확인할 수 있습니다. 게다가 대부분 피그마로 연결되는 링크가 있어 파일을 다운로드하거나 별도 서비스에서 가입 후 확인 등의 과정을 거치지 않아도 된다는 점이 좋습니다.
저도 몇 가지 UI Kit을 실제 확인해 봤는데요. 위 이미지는 팟캐스트 앱을 피그마에서 확인할 수 있는 모습으로, 인터페이스 구성은 물론 디자인 가이드라인 등이 포함된 모습입니다. 피그마로 제공되는 파일은 이미지 단위가 아니라 버튼이나 텍스트 등의 구성요소를 그대로 활용할 수 있기에 초기 화면을 제작하는데 충분한 도움을 받을 수 있습니다.
같은 방법으로 주요 화면이 정리된 다양한 ‘UI Kit’를 확인할 수 있으며, 대부분 최근에 제작/공유 된 내용입니다. 서비스 성격에 따른 화면 구성과 디자인/스타일 가이드에 대한 정보를 이어서 확인하고 싶은 분들에게 특히 유용한 서비스가 아닐까 싶네요! 더 자세한 내용은 ‘링크’를 통해 확인해주세요.
–
