샵 검색과 상품 탐색의 첫 구조
상품 목록, 검색어, 카테고리, 할인 화면을 통해 Tangly의 커머스 탐색 흐름을 만든 기록입니다.
Code notes
코드에서 확인한 구현 포인트
배포 기준 2026.01.14
관련 파일
apps/web/app/api/shop/products/route.tsapps/web/app/api/shop/search-keywords/route.tsapps/web/app/admin/shop-search-keywords/page.tsxapps/mobile/app/shop/search.tsx구현 메모
상품 API는 market, category, query, limit, offset을 받아 샵 탐색에 필요한 목록을 반환한다.
검색 키워드 API는 활성 키워드를 정렬 순서대로 가져오고, 캐시를 두어 반복 요청 부담을 줄였다.
관리자 검색어 화면을 통해 운영자가 추천 검색어를 바꿀 수 있어 샵 첫 탐색을 유도한다.
샵은 상품보다 탐색 경험이 먼저다
상품 데이터가 많아져도 사용자가 찾지 못하면 의미가 없다. 그래서 샵 기능은 상품 목록뿐 아니라 검색, 카테고리, 할인, 즐겨찾기 같은 탐색 흐름을 함께 고려해야 했다.
Tangly의 샵은 피부 분석과 추천에서 이어지는 목적형 탐색이 될 가능성이 크다. 사용자는 그냥 상품을 보는 것이 아니라 자신의 고민과 연결된 제품을 찾고 싶어 한다.
검색어 관리가 필요한 이유
검색창은 비어 있으면 차갑게 느껴진다. 운영자가 추천 검색어나 인기 키워드를 관리할 수 있으면 사용자는 무엇을 찾아볼지 힌트를 얻는다.
검색어 관리 기능은 작은 운영 도구지만, 샵의 첫 클릭을 만드는 데 도움이 된다. 나중에는 실제 검색 데이터와 연결해 더 똑똑하게 만들 수 있다.
수익 모델과의 연결
샵 탐색은 광고와도 연결될 수 있다. 특정 카테고리나 검색 맥락에 맞는 배너가 자연스럽게 들어가면, 광고가 방해가 아니라 정보처럼 느껴질 수 있다.
Keep reading
다른 글 이어서 보기
Commerce
2026.01.11
7 min read
세일 알림을 콘텐츠처럼 관리하기
샵 경험을 강화하기 위해 세일 알림 카테고리와 이벤트를 나누고, 운영자가 직접 관리할 수 있게 만든 과정입니다.
Debugging
2026.05.05
6 min read
GitHub 푸시 후 Vercel 배포가 Blocked가 되었을 때
커밋은 올라갔지만 Vercel 자동 배포가 막혔던 상황에서, GitHub 작성자와 프로젝트 권한을 확인해 해결한 기록입니다.
Writing
2026.05.04
5 min read
블로그를 제품 기억장치로 쓰기
나중에 다시 봤을 때 왜 그렇게 만들었는지 떠올릴 수 있도록 블로그를 개발 기록으로 남기기 시작했습니다.