brunch

매거진 공지

라이킷 14 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by uibowl Nov 13. 2024

유아이볼 uibowl 컴포넌트 필터 오픈

UI/UX 패턴 플랫폼, 유아이볼

안녕하세요! 인턴 디자이너 이미영입니다.

컴포넌트를 찾으실 때 어떤 방법을 사용하고 계신가요? 특히 국내 앱에서 실제로 사용되는 컴포넌트 UI를 다양하고 정확하게 찾기 어려운 경험이 있으셨나요? 유아이볼은 이러한 불편을 해소하고자 새롭게 컴포넌트 필터 기능을 도입했어요.

이번 포스팅에서는 컴포넌트 탐색의 효율성을 극대화할 수 있는 새로운 필터 기능을 소개하고, 이를 통해 어떻게 원하는 UI 컴포넌트를 더 쉽고 빠르게 찾을 수 있는지에 대해 자세히 살펴볼게요!

컴포넌트 필터 기능 도입의 필요성

1. 실제 사용자들의 니즈 확인

유아이볼에서는 지금까지 두 차례의 UT에서 다양한 사용자와의 심층 대화를 진행해 왔어요. 이 과정에서 여러 참가자들이 컴포넌트에 대한 명확한 니즈를 가지고 있음을 발견할 수 있었어요.

먼저, UT를 진행하며, 항상 사후 인터뷰에서 개선사항이나 원하는 기능에 대한 질문을 드렸는데요. 해당 질문에 여러 참가자분들이 컴포넌트 탐색 기능에 대한 요청을 주셨어요. 일부 사용자분들은 유아이볼 외에도 다른 레퍼런스 사이트를 이용하며 컴포넌트를 찾는 과정을 설명해 주셨는데요, 특히 타 사이트에서는 컴포넌트별로 필요한 레퍼런스를 쉽게 찾아볼 수 있어서 이를 자주 활용한다고 말씀해 주신 분들도 있었습니다. 또한, 유아이볼 내에서 에셋이나 컴포넌트를 필터링할 수 있을 것이라 기대하고 찾아봤지만, 현재 해당 기능이 없어 탐색에 어려움을 겪으셨다는 의견도 있었어요.

이와 같은 컴포넌트 필터에 대한 니즈는 사용자의 직무와 경험에 따라 다양하게 나타났습니다. 학생이나 취업 준비생부터 현업 디자이너에 이르기까지 여러 유형의 사용자들이 필요로 했으며, 단순히 컴포넌트 UI뿐만 아니라 UX 라이팅과 같은 세부 요소에 대해 필터링을 원하시는 분들도 계셨어요.

저희는 UT에서 예상치 못하게 많은 분들이 컴포넌트 필터 기능이 필요하다고 느끼고 계신다는 점을 알게 되었어요. 이번 컴포넌트 필터 기능은 이러한 사용자들의 기대와 요구를 반영해 유아이볼에서 더욱 편리하게 컴포넌트를 탐색할 수 있도록 도와드리고자 도입하게 되었습니다.

2. 명확하지 않았던 일부 이미지 분류의 문제

현재는 UI 패턴에서 컴포넌트를 '기타'로 분류하는 것을 지양하고 있지만, 이전에는 토스트 팝업, 툴팁, 바텀시트와 같은 특정 컴포넌트를 포함한 이미지들이 '기타' 항목으로 분류되곤 했어요. 이 컴포넌트들을 따로 모아보는 것이 유용할 것 같았지만, 정작 적절한 분류 항목이 없어서 '기타'로 묶일 수밖에 없었죠.

저희 역시 사용자가 컴포넌트도 더 쉽게 탐색할 수 있도록 레퍼런스를 제공하고자 했으나, 이러한 애매한 사례에서는 적절한 대안이 부족한 상황이었어요. 이와 같은 경우에 바로 컴포넌트 필터 기능의 필요성을 더욱 느끼게 되었고, 이를 통해 사용자들이 필요한 컴포넌트를 보다 직관적으로 찾을 수 있도록 돕고자 했습니다.

컴포넌트 항목 구성

컴포넌트 필터 항목을 구성하는 과정에서 가장 큰 고민은 사용자들이 직관적으로 탐색할 수 있는 항목 구성을 만드는 것이었어요. 이를 위해 리서치를 통해 사용자 니즈와 기대를 구체적으로 파악하고자 했습니다.

먼저, 컴포넌트 필터를 제공하는 주요 경쟁사들의 사례를 분석하여, 각 사이트에서 공통적으로 제공하고 있는 컴포넌트 항목들을 조사했습니다. 이를 통해 가장 대중적이고 자주 사용되는 컴포넌트를 식별하였고, 이후 이들 항목을 빈도에 따라 분류하여 1차적으로 우선순위를 매겼어요.

그러나 많은 종류의 컴포넌트를 고려하게 되면서, 오히려 사용자가 탐색 시 혼란을 겪고 탐색 시간이 길어질 수 있다는 우려가 있었어요. 이에 따라 정보의 가독성을 높이고 탐색 효율성을 개선하기 위해, 항목들을 대분류로 한 번 더 묶어 구조화했습니다. 이렇게 구성함으로써 항목 간의 관계와 계층 구조를 명확히 하여 사용자가 각 컴포넌트를 쉽게 인식하고 이해할 수 있도록 했어요.

(밑줄은 웹에만 존재하는 항목이에요.)

최종적으로, 사용자가 쉽게 이해할 수 있도록 사용자와의 상호작용이 중심인 컴포넌트를 ‘컨트롤’, 화면 위에 중첩되는 컴포넌트를 ‘오버레이’, 현재 페이지의 상태를 전달하는 컴포넌트를 ‘상태’, 정보 전달을 주목적으로 하는 컴포넌트와 그래픽 요소를 ‘뷰’로 대분류 하였습니다.

이후, 각각의 컴포넌트 항목을 이러한 대분류에 따라 적절히 배치함으로써, 전체 컴포넌트 필터의 구조가 완성되었어요.

필터 디자인 작업

현재 유아이볼에는 기존 필터가 MAU, UI 패턴, 카테고리 유형, 컬러까지 총 4가지가 있는데요. 기존에도 필터를 다양하게 제공 중이다 보니, 새로운 필터를 어디에 위치해야 할지 고민이 많았습니다.

기존 필터의 위치에는 현재도 항목이 포화가 된 상태이기 때문에 새로운 위치에 필터를 두어야 했고, 저는 페이지 상단에 고정하여 구성을 했습니다. 1. 기존 필터만큼이나 바로바로 빠르게 자주 사용할 수 있어야 하고 2. 하단의 레퍼런스 이미지를 가리거나 방해하지 않는 위치가 페이지 최상단이라고 판단했습니다.

이제 UI의 위치는 정했으나, 이 많은 항목들을 어디에 위치하고, 어떻게 보여야 효과적으로 담을 수 있을지 고민했어요. 현재 상시 노출되고 있는 기존 필터의 항목도 많은 가운데, 다량의 컴포넌트 항목들까지 모두 노출한다면 매우 혼란스러울 것이라 생각하였고, 사용자가 원할 때에만 노출이 가능한 드롭다운을 이용하여 항목을 배열했습니다.

추가로, 필터의 성격 자체가 목적성을 가진 사용자가 주로 필터를 사용하기 때문에 많은 항목들을 더욱 빠르게 탐색할 수 있도록 검색 기능을 배치했어요. 일치하는 항목이 없을 경우에는 문의하기 버튼을 배치하여 다른 항목 요청을 쉽게 진행할 수 있도록 하였습니다. 혹시 찾는 항목이 없으시다면, 문의하기를 통해 공유해 주시면 개선에 반영하도록 하겠습니다.

항목의 대분류는 보편적인 서비스 사용 흐름에 따라 배열을 했습니다. 사용자와 상호작용이 가능하여 사용자 경험에 핵심적인 부분을 차지하는 '컨트롤'을 가장 먼저 배치하였고, '컨트롤'에 따라 페이지의 상태가 변화하기 때문에 '상태'를 그다음에 배치, 그리고 이에 따른 부가적인 반응이 '오버레이' 속 컴포넌트를 통해 주로 이루어지기 때문에 세 번째에는 '오버레이'를 배열했습니다. 마지막으로, 부가적인 그래픽 요소가 포함된 '뷰'를 가장 후순위에 배열했어요.