검색 서비스에서 좋은 품질의 코드를 찾아가는 은하수 항해 기록

11번가 검색/추천 서비스 프런트엔드는 빠르게 바뀌는 정책과 UI 요구에 대응하기 위해, 기존 검색 코드의 구조를 민첩성과 유연성 중심으로 다시 설계했다. PC는 공통 컴포넌트 재사용 비중이 높았고, 모바일은 컬렉션별 독립 구현이 많아 서로 다른 장단점이 있었기 때문에, 단순한 공통화보다 검색 도메인에 맞는 책임 분리가 핵심 과제가 됐다.

검색 화면은 크게 리스팅과 컬렉션으로 나뉘며, 리스팅은 표준 상품 UI, 컬렉션은 목적별 큐레이션 UI다. 컬렉션이 늘어나면서 노출 방식과 크기가 제각각이 되고 좌우 스와이프, 전체보기 랜딩 같은 액션이 많아져 혼잡도가 높아졌고, 이를 줄이기 위해 2023년에는 리스팅과 컬렉션의 공통 가이드를 수립해 UI 일관성을 높이는 방향으로 개선을 진행했다.

설계의 출발점은 변경 단위를 잘게 나누는 일이었다. 상품 정보는 상품명, 가격 정보, 배송 정보 같은 정책의 최소 단위로 추상화했고, 변경이 자주 일어나는 영역과 그렇지 않은 영역을 구분해 컴포넌트 책임을 다시 배치했다. 특히 Props는 결합도와 재사용성을 동시에 좌우하므로, Props가 4개 이상이면 item 전체를 전달하고 그 외에는 필요한 값만 명시적으로 넘기는 기준을 세워, 유연성과 의존성 명확성 사이의 균형을 맞췄다.

노출 조건은 부모와 자식 중 어디에서 처리할지도 분리했다. 여러 자식 컴포넌트를 함께 제어해야 하거나 조건이 복잡한 경우에는 부모가 담당하고, 특정 자식의 동작에만 관련된 단순 조건은 자식 내부에서 처리하도록 했다. 이 원칙에 따라 CollectionVisibilityManager를 도입해 상품 종류와 탭별 노출 규칙을 한곳에서 관리했고, 상품 옵션처럼 동적으로 바뀌는 규칙도 일관되게 제어할 수 있게 했다.

컬렉션은 리스팅과 완전히 같은 구조를 억지로 재사용하기보다, 정책이 다르면 새 컴포넌트를 만드는 편이 유지보수에 유리하다고 정리했다. 반대로 가격 영역의 세부 요소처럼 변경 가능성이 낮은 최소 단위는 재사용해 중복을 줄였다. 마지막으로 Thumbnail, HeadLine, GridRow, GridColumn 같은 Wrapper 컴포넌트로 마크업 구조를 공통화해, 전사 공통 마크업 정책 변화에도 유연하게 대응할 수 있는 기반을 마련했다.