여행 박람회 프로모션 웹
서비스 기획·UX/UI
D18 · WEB · BRAND
제품·시연 사례제공된 제품 화면 · 예시 데이터
AI 도구 검색·비교
AI 도구를 이름·설명·카테고리·태그로 찾고 가격 조건과 정렬 기준으로 좁혀보는 디렉터리 웹입니다. 트렌딩·신규 도구와 전체 목록, 상세 미리보기를 탐색 흐름으로 구성했습니다.
- 사례
- 검색과 필터로 좁혀가는 AI 도구 탐색
- 수행 유형
- 제품·시연 사례
- 작업 범위
- 전체 텍스트 검색 · 카테고리 · 가격 필터 · 정렬 · 트렌딩·신규 목록 · 상세 모달 · 상태·결과 수
- 자료
- 제공된 제품 화면 · 예시 데이터
목적과 가격 조건에 따라 검색
도구명·설명·카테고리·태그를 검색 대상으로 두고 카테고리와 무료·부분 유료·유료 조건으로 탐색 범위를 좁히도록 구성했습니다. 결과 수와 필터 초기화를 가까이에 표시하고 인기도·평점·최신순·이름순 정렬을 제공합니다.
발견에서 상세 정보 확인으로
트렌딩·신규 도구와 전체 디렉터리를 나누어 탐색하고, 선택한 도구는 상세 모달에서 이어서 살펴보도록 구성했습니다. 이미지·설명·분류·가격 유형·태그·주요 기능과 외부 사이트 이동을 한 화면에 모았습니다.
도구 데이터와 탐색 화면의 구성
React 19·TypeScript로 디렉터리를 구성하고 도구 데이터, 목록과 상세 표시를 분리했습니다. 반응형 레이아웃과 라우팅, 검색 결과·로딩·오류 상태까지 포함해 외부 AI 도구를 발견하고 비교하는 탐색 제품을 만들었습니다.
PROJECT INFO
- 제작: 쿤웍스
- 제품: 디렉터리 웹 프론트엔드
- 기술: React 19 · TypeScript · Vite · React Router · Tailwind CSS
비슷한 일을 준비 중이라면.이 사례 정보가 문의서에 함께 담깁니다.
MORE · WEB · BRAND
같은 분야의 다른 사례
우리 업무에 적용한다면.
이 사례 정보가 문의서에 함께 담깁니다.