MenuMate 검색창 UI 설계

 

본 프로젝트에서 검색 기능은 주요 기능이기에 검색창 UI 설계 부분에 고민을 많이 했습니다.

UI 자체는 primary컬러인 주황색을 사용한 단순한 디자인입니다. 하지만, 해당 UI에 어떻게 구성할지는 기획을 처음해보고 검색창을 처음 구현해보는 저에게 있어서는 어려운 문제였습니다.

이번 글에서는 설계를 하며 고민한 점과 진행 사항을 정리하고자 합니다.

 

초기 구상

 

처음에는 단순히 검색어를 사용자가 입력하고 엔터를 치면 검색 결과로 이어주는 검색창을 구상했습니다. 그림으로 대강 표현할 수 있을 정도로 간단했습니다.

[  검색어 input	]

 

 

고민 및 수정 사항

 

하지만 구글이나 네이버 등을 참고하다보니 제가 초기에 구상한 설계는 엔터 이외에는 검색을 완료할 수 없다는 것을 깨달았습니다.

마우스만 사용하는 사용자나 모바일 이용자에게 클릭으로 검색을 완료할 수 없다는 것은 사용자 경험에 큰 악영향을 줄 것이 분명했습니다. 

일반적인 경우, 검색창 좌측이나 우측에 돋보기 모양 아이콘이 있고 검색어를 입력 후 해당 아이콘을 눌러 검색이 완료되도록 설계(네이버 등)하거나 검색어를 입력 시 하단 드롭다운에 연관 검색어가 뜨고 해당 검색어를 클릭하여 검색이 완료되도록 설계(구글 등)하는 것으로 보였습니다. 

처음 구현하는 것이므로 좀 더 직관적으로 만들 수 있을 거 같은 아이콘 클릭 버전을 채택하기로 했습니다.

[검색어 input	(검색 버튼 아이콘)]

 

 

DOM구조 설계

 

AI와 위의 고민사항들을 함께 상의하며 검색창의 대략적인 DOM 구조를 설계해 봤습니다.

// searchBar.tsx

<form aria-label="메뉴 검색">
  <div> // input과 button을 감쌈으로써 하나 처럼 보이게 하는 래퍼 역할
    <input aria-label="메뉴 검색어 입력" />
    <button aria-label="검색 버튼">
      <Search />  // 추후 돋보기 아이콘이 될 자리
    </button>
  </div>
</form>

 

 

해당 DOM구조의 핵심은 input과 button을 감싸주는 div 태그입니다.

 

1. 하나처럼 보이기 쉬움

wrapper에 border와 radius를 주면
input과 button이 같은 껍데기 안에 들어간 것처럼 만들 수 있습니다.

 

2. 포커스 제어가 쉬움

나중에 focus-within을 쓰면
input에 포커스가 갔을 때 검색창 전체 테두리를 강조할 수 있습니다.

 

3. 접근성에 유리

input은 입력 역할, button은 실행 역할이 분리됩니다.

 

 

태그들의 역할 정리

form

 

• 검색 제출
• Enter 검색 처리
• 전체 width 관리

 

div

실질적인 검색창 외형 담당

 

• background
• border
• radius
• 높이
• padding
• focus 강조

 

input

 

• 텍스트 입력
• 남은 공간 채우기

 

button

input과 붙어 있지만 별도 인터랙션 영역

 

• 돋보기 클릭 영역
• 아이콘 포함
• padding 기반 클릭 영역

 

 

 

 

 

검색창 UI의 최종 목표

 

• Enter 검색 가능
• 버튼 클릭 가능
• Tab 이동 가능

 

이 세 가지를 모두 챙기는 사용자 접근성을 확실히 고려한 검색창을 만드는 것이 해당 검색창 UI의 최종 목표입니다.

그리고 관심사 분리와 유지보수 측면에서 검색창(SearchBar) 컴포넌트는 UI 중심의 프레젠테이셔널 컴포넌트로 유지하고 검색어 상태와 검색 실행은 상위 컴포넌트가 담당하도록 할 것입니다.