코딩&AI프로젝트
네이버 검색창과 유사한 검색 인터페이스를 구현한 TML/CSS/JavaScript 코드
mywarmstory
2024. 12. 6. 20:56
위의 코드는 네이버 검색창과 유사한 검색 인터페이스를 구현한 HTML/CSS/JavaScript 코드입니다. 주요 특징과 구조를 단계별로 설명하겠습니다.
1. HTML 구조
(1) 전체 컨테이너
- <div class="max-w-screen-md mx-auto bg-white shadow-md rounded-lg p-4">
- 화면 중앙에 배치된 검색 바 영역입니다.
- 배경색, 그림자 효과, 여백 등이 Tailwind CSS 클래스를 활용하여 지정되었습니다.
(2) 검색창 (Search Bar)
- 검색창은 flex를 이용해 아이콘, 입력 필드, 음성 아이콘이 한 줄로 정렬되었습니다.
- Search Icon
- SVG로 표현된 검색 아이콘이 왼쪽에 위치.
- text-green-500로 색상이 녹색으로 지정.
- 검색 입력 필드
- <input> 태그로 구현.
- oninput="showSuggestions()" 이벤트를 통해 사용자가 입력 시 추천 검색어를 표시.
- Mic Icon
- 음성 입력 아이콘으로, 오른쪽에 위치.
- text-gray-400 색상을 지정하여 비활성 상태처럼 보이도록 설정.
- Search Icon
(3) 추천 검색어 드롭다운
- <div id="suggestions">로 구성된 추천 검색어 표시 영역.
- 사용자가 검색어를 입력하면 해당 키워드를 포함하는 추천 검색어를 표시.
- 기본적으로 hidden 클래스를 사용해 숨겨져 있으며, 입력 이벤트가 발생하면 표시됩니다.
(4) 네비게이션 아이콘
- 아래쪽에는 네비게이션 아이콘들이 배치되어 있습니다.
- 메일, 카페, 블로그를 나타내는 버튼으로, 아이콘과 텍스트 설명이 함께 제공됩니다.
- 그룹(group)에 대해 호버하면 툴팁이 나타납니다.
- 예: "Mail", "Cafe", "Blog"와 같은 툴팁이 활성화.
2. CSS (Tailwind CSS 활용)
- Tailwind CSS가 사용되어 클래스를 기반으로 디자인과 스타일을 적용:
- bg-gray-100, text-gray-700 등으로 색상을 지정.
- rounded-full로 둥근 모서리를 적용하여 부드러운 UI 제공.
- hover:scale-110 같은 애니메이션 효과를 통해 사용자 상호작용 시 UI 반응을 추가.
디자인 포인트:
- absolute, relative를 이용하여 툴팁과 추천 검색어 위치를 적절히 지정.
- 호버 상태와 같은 상호작용을 쉽게 만들기 위해 group, hover 클래스를 활용.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search Bar Prototype</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-4">
<!-- Search Bar Section -->
<div class="max-w-screen-md mx-auto bg-white shadow-md rounded-lg p-4">
<div class="flex items-center border-2 border-green-500 rounded-full p-2 relative">
<!-- Search Icon -->
<div class="px-2 text-green-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 16l-4-4m0 0l4-4m-4 4h16" />
</svg>
</div>
<!-- Search Input -->
<input
type="text"
id="searchInput"
class="w-full outline-none text-gray-700"
placeholder="검색어를 입력해 주세요."
oninput="showSuggestions()"
/>
<!-- Mic Icon -->
<div class="px-2 text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v8m0 0V4m0 4H4m8 0h8" />
</svg>
</div>
<!-- Suggestions Dropdown -->
<div
id="suggestions"
class="absolute top-12 left-0 bg-white w-full border border-gray-300 rounded-lg shadow-md hidden z-10"
>
<ul class="text-gray-700">
<!-- Suggestions will appear here -->
</ul>
</div>
</div>
<!-- Navigation Icons -->
<div class="mt-4 flex justify-around">
<!-- Icon Set -->
<div class="text-center group relative">
<div class="bg-green-500 w-10 h-10 rounded-full mx-auto flex items-center justify-center text-white transform transition-transform hover:scale-110">
<span>N</span>
</div>
<p class="text-sm text-gray-700 mt-2">메일</p>
<!-- Tooltip -->
<div class="absolute bottom-12 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs rounded-lg py-1 px-2 opacity-0 group-hover:opacity-100 transition-opacity">
Mail
</div>
</div>
<div class="text-center group relative">
<div class="bg-green-300 w-10 h-10 rounded-full mx-auto flex items-center justify-center text-white transform transition-transform hover:scale-110">
<span>카</span>
</div>
<p class="text-sm text-gray-700 mt-2">카페</p>
<div class="absolute bottom-12 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs rounded-lg py-1 px-2 opacity-0 group-hover:opacity-100 transition-opacity">
Cafe
</div>
</div>
<div class="text-center group relative">
<div class="bg-green-200 w-10 h-10 rounded-full mx-auto flex items-center justify-center text-white transform transition-transform hover:scale-110">
<span>블</span>
</div>
<p class="text-sm text-gray-700 mt-2">블로그</p>
<div class="absolute bottom-12 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs rounded-lg py-1 px-2 opacity-0 group-hover:opacity-100 transition-opacity">
Blog
</div>
</div>
<!-- Additional icons with similar tooltip and hover effects -->
</div>
</div>
<script>
// Autofocus search bar on load
window.onload = () => {
document.getElementById('searchInput').focus();
};
// Example suggestions
const suggestionsList = ['검색어 예시 1', '검색어 예시 2', '검색어 예시 3'];
// Show suggestions based on input
function showSuggestions() {
const input = document.getElementById('searchInput').value;
const suggestions = document.getElementById('suggestions');
const ul = suggestions.querySelector('ul');
if (input.length > 0) {
// Filter suggestions
const filtered = suggestionsList.filter(suggestion => suggestion.includes(input));
ul.innerHTML = filtered.map(item => `<li class="p-2 hover:bg-gray-100 cursor-pointer">${item}</li>`).join('');
suggestions.classList.remove('hidden');
} else {
suggestions.classList.add('hidden');
}
}
</script>
</body>
</html>3. JavaScript 기능
(1) 검색창 자동 포커스
- window.onload 이벤트로 페이지 로드 시 검색창에 포커스를 자동으로 설정.
(2) 추천 검색어 표시
- suggestionsList 배열에 예시 검색어를 포함.
- 사용자가 검색창에 입력할 때 oninput="showSuggestions()" 이벤트가 발생:
- 입력 값을 기준으로 filter를 사용해 추천 검색어를 필터링.
- 필터링된 검색어를 <ul> 내부에 <li>로 추가.
- 추천 검색어는 기본적으로 숨겨져 있다가 입력값이 있을 때만 표시.
(3) 추천 검색어 드롭다운
- 사용자가 입력 값을 지우면 추천 검색어 목록이 다시 숨겨짐(classList.add('hidden')).
4. 추가적인 UX 요소
- 툴팁 애니메이션
- 네비게이션 아이콘은 group-hover:opacity-100로 툴팁의 투명도를 제어.
- 반응형 디자인
- max-w-screen-md, mx-auto 등을 사용해 작은 화면에서도 중앙 정렬이 유지.
5. 개선 및 확장 가능성
- 실제 API 연결
- 추천 검색어를 suggestionsList 대신 API로 받아오도록 개선.
- 음성 입력 기능
- Mic Icon을 클릭했을 때 음성 인식을 지원하는 이벤트를 추가.
- 다양한 네비게이션 아이콘
- 더 많은 서비스와 연결된 아이콘 추가 및 링크 연결.
이 코드는 Tailwind CSS의 강력함과 간단한 JavaScript 기능을 결합하여 현대적이고 반응형 검색 인터페이스를 구현한 예제입니다.
반응형