네이버 검색 영역 | UI 디자인 사전

설명

네이버와 다음이 자리 잡게 만든 한국 검색 UI입니다. 검색창 위에 통합과 이미지, 블로그, 카페, 뉴스, 지도, 동영상 같은 영역 탭이 놓이고, 검색창에 입력하면 좌측에 검색어 자동완성이, 우측에 트렌드와 추천 키워드가 두 영역으로 갈라져 펼쳐져요. 영어권의 Google이나 DuckDuckGo가 검색창 하나만 두는 것과 다르고, 한국 사용자는 '먼저 영역을 고르고 검색한다'는 흐름에 익숙합니다.

🖼️ 미니어처

통합 블로그 이미지 뉴스 지도

검색어 추천

💬 AI에게 이렇게 말하세요

네이버식 검색 영역을 만들어 주세요. 검색창 위에 카테고리 탭 5~7개(통합·블로그·이미지·뉴스·지도). 활성 탭은 텍스트 굵게 + 하단 초록 라인.
검색창에 입력하면 좌측에 검색어 자동완성 8개, 우측에 '인기 검색어' 또는 '추천' 5개를 보여주는 2단 패널을 띄워 주세요.
검색창 폭은 데스크톱 720px·모바일은 풀와이드. 좌측 검색 아이콘 + 우측 '검색' 버튼.

왜 "카테고리 먼저"인가요

한국 포털은 '하나의 검색어로 여러 영역(블로그·이미지·뉴스·지도)에서 다른 결과'라는 멘탈 모델로 사용자가 학습돼 있어요. 그래서 검색창에 들어가기 전에 영역을 선택하는 게 자연스럽고, '통합 검색' 결과는 모든 영역을 섞어 보여주는 별도의 결과 화면을 가집니다. AI 챗 UI에 '검색 모드, 연구 모드, 이미지 모드' 같은 카테고리 탭을 두는 패턴도 이 영향을 크게 받았어요.

⚡ 사용 예 (한 줄)

<Tabs defaultValue="all"><TabsList>{categories.map(...)}</TabsList></Tabs><Command>...</Command>

🧩 컴포넌트 매핑

shadcn/ui Tabs와 Command(cmdk) 조합을 권장해요. 자동완성 2단 분리는 Command의 CommandGroup 두 개로 만들 수 있어요. 모바일에서는 Sheet로 풀스크린 검색 모달 패턴을 적용합니다.

🚫

이렇게 하지 마세요

Google처럼 검색창 하나만 두고 카테고리는 결과 페이지에서만 보여 주면 한국 사용자에게 어색하게 느껴집니다. 한국 사용자는 무엇을 찾고 싶은지 먼저 정한 다음 검색창에 들어가는 경향이 있어, 진입 단계에 카테고리 탭이 있는 편이 훨씬 편해요.

🇰🇷

국내 UI 특징

데스크톱은 카테고리 탭이 검색창 위에 오고, 모바일은 검색창 아래에(또는 검색에 진입한 뒤 분리해서) 배치하는 변형이 흔해요. 자동완성 우측의 '인기 검색어'는 한국 포털의 오랜 특징이었지만, 최근에는 사회적 논란이 있어 일부 서비스가 제거했습니다. AI 검색 UI에서는 후속 질문 칩(Suggested Replies) 형태로 대체하는 걸 권장해요.