Search Logic: 검색 기능 하나가 블로그 구조를 바꾸기까지

하나의 기능, 네 번의 진화

처음에는 단순했다. “내 블로그에 검색 기능이 있으면 좋겠다.” Astro와 같은 정적 사이트(Static Site)에서 검색을 구현하는 방법은 다양하다. 무거운 확장 서비스를 붙일 수도 있지만, 나는 Matcha Logic의 가벼움을 유지하고 싶었다.

그래서 순수 자바스크립트(Vanilla JS)로 실시간 필터링 기능을 만들기로 했다. 하지만 이 작은 결정은 나비효과처럼 블로그의 구조 전체를 흔들어 놓았다.

처음엔 /search라는 별도 페이지를 만들었다. 중앙에 커다란 검색창이 있고, 입력하면 아래에 결과가 뜨는 심플한 구조였다. 기능은 완벽했지만, 사용자 경험(UX) 측면에서 의문이 들었다.

“사용자가 검색을 하려고 굳이 메뉴를 눌러서 검색 페이지로 이동해야 할까?“

검색은 ‘특수 기능’이 아니라 ‘탐색의 도구’여야 한다. 그래서 별도의 검색 페이지를 없애고, 글 목록이 있는 Brewing 페이지(blog/index.astro)에 검색창을 이식했다.

이 과정에서 URL 파라미터(?tag=...) 연동 기능을 추가했다. 덕분에 주소를 공유해도 검색 결과가 유지되는 진짜 ‘기능’이 되었다.

검색 기능을 넣고 나니 기존의 2열/3열 카드 그리드(Card.astro)가 어색해 보였다. 검색 결과는 보통 ‘훑어보는(Scanning)’ 용도인데, 시선이 지그재그로 움직이는 그리드 배치는 피로감을 주었다.

그래서 결단을 내렸다.

Before

After

이를 위해 PostRow.astro라는 가로형 컴포넌트를 새로 만들었다. 결과적으로 ‘Brewing Log’라는 이름에 걸맞은, 훨씬 차분하고 정돈된 서가(Archive)의 느낌을 낼 수 있었다.

검색 기능을 만들며 잡은 디자인 레이아웃(중앙 정렬 헤더 + 입력창)은 버리기 아까울 정도로 집중도가 좋았다. 나는 이 디자인을 다른 곳에도 적용하기로 했다.

404 페이지: “길을 잃으셨나요?”라는 메시지와 함께, 검색창을 두어 이탈하려는 사용자를 다시 붙잡았다. (여기에 ‘움직이는 낙엽’ 아이콘으로 재미를 더했다.)
Ingredient Room (tags.astro): 태그만 모아보는 페이지를 만들었다. 검색 페이지의 레이아웃을 그대로 가져오되, 입력창 대신 ‘태그 구름’을 배치했다.

처음엔 input 태그 하나를 넣으려던 작업이었다. 하지만 그 과정에서 페이지의 역할(Role)을 다시 정의하게 되었고, 컴포넌트의 재사용성을 고민하게 되었으며, 결과적으로 블로그 전체의 톤앤매너가 통일되었다.

코딩은 단순히 기능을 구현하는 것이 아니라, 요소들 간의 관계를 맺어주는 과정임을 다시 한번 느낀다.

이것이 내가 생각하는 Soft Logic이다.