웰로 · Wello · 2026.04
찾은 그대로 공유되는 통합검색
Wello PC 반응형 전환 및 통합검색 구축
PC 레이아웃 전환과 통합검색의 화면·상태·URL 동기화를 구축했습니다.
- 문제
- PC에서도 600px 고정폭 화면이 보였고, 정책·답례품·동네소식·기부사업은 메뉴마다 흩어져 있었습니다.
- 결정
- 화면을 PC로 확장하고, 검색 조건을 URL에 두어 공유·재진입이 되게 했습니다. 필터 상태는 PC와 모바일이 함께 씁니다.
- 결과
- 개편 전후 2주 GA4 단순 전후 비교에서 데스크톱 평균 참여 시간이 약 20% 증가했습니다.
결과 근거: 이력서 기재 내용(GA4 2주 단순 전후 비교). 이 페이지에서 측정한 값이 아닙니다.
구조
- PC 화면 · 확정
진입. 주요 화면을 PC 레이아웃으로 확장했습니다.
범례
- 임시·화면 계산
- 확정
- 문제 발생
- 대기
- 복구
판단
검색 조건을 어디에 둘 것인가
URL과 동기화
검색어·카테고리·필터가 공유·새로고침·뒤로가기 뒤에도 복원됩니다.
선택하지 않음 · 컴포넌트 안의 로컬 상태 — URL에 없으면 공유·새로고침·뒤로가기로 같은 검색 결과를 다시 볼 수 없습니다.
PC 사이드바와 모바일 드로어의 필터를 어떻게 만들 것인가
같은 상태 로직을 공유
화면 모양만 다르고 필터 상태는 하나라서 PC와 모바일의 결과가 어긋나지 않습니다.
문제와 해결
문제
PC에서도 600px 고정폭 모바일 화면이 노출됐고, 정책·답례품·동네소식·기부사업은 각 메뉴에 흩어져 있었습니다.
해결
주요 화면을 PC 레이아웃으로 확장하고 카테고리별로 찾는 통합검색을 두어 서비스별로 따로 찾던 흐름을 한 화면으로 모았습니다.
서비스 화면
현재 공개 화면입니다. 작업 당시 화면과 다를 수 있습니다.
Wello 공개 홈 PC 화면, 2026-10-12 촬영. PC 레이아웃 확장 이후의 현재 화면이며 당시와 다를 수 있습니다. 
Wello 공개 통합검색 모바일 화면, 2026-10-12 촬영. 필터는 PC 사이드바 대신 드로어로 열립니다.
이력서 원문
PC에서도 600px 고정폭으로 보이던 화면을 PC 레이아웃으로 확장하고, 흩어진 콘텐츠를 카테고리별로 찾는 통합검색을 만들었습니다. 검색 조건은 URL과 동기화해 공유와 재진입이 가능합니다.
문제
Wello는 PC에서도 600px 고정폭 모바일 화면을 노출했고, 정책·답례품·동네소식·기부사업은 각 메뉴에 흩어져 있었습니다. PC 사용자는 넓은 화면을 활용하지 못한 채 원하는 콘텐츠를 찾기 위해 서비스별로 다시 탐색해야 했습니다.
기여
주요 화면을 PC 레이아웃으로 확장하고, 흩어진 콘텐츠를 카테고리별로 찾는 통합검색을 구축했습니다. 검색어·카테고리·필터를 URL에 담아 공유하거나 새로고침하고 상세 화면에서 돌아와도 같은 결과가 복원되게 했습니다. 필터는 같은 상태와 동작을 PC 사이드바와 모바일 드로어에 함께 연결해 화면만 다르게 그렸습니다.
결과
정책·답례품·동네소식·기부사업을 서비스별로 따로 찾던 흐름이 통합검색 한 화면으로 모였습니다. 개편 전후 2주 GA4 단순 전후 비교에서 데스크톱 평균 참여 시간이 약 20% 증가했습니다.