페이지를 구성하는 최소 기능 블록, 모듈유닛

모듈유닛은 SSG.COM 웹과 앱에서 쓰는 최소 단위의 독립적인 UI 구성 요소다. 여러 모듈유닛이 모여 하나의 페이지를 이루며, 이렇게 구성된 페이지를 모듈매장이라고 부른다.

페이지는 사용자에게 하나의 화면처럼 보이지만, 실제로는 상단 배너, 상품 목록, 카드 배너처럼 서로 다른 역할의 영역들로 나뉜다. 프론트엔드에서는 이 영역들을 각각 독립적인 기능 단위로 보고, 이를 모듈유닛으로 관리한다.

모듈유닛은 상품, 배너, 팝업 등 다양한 타입으로 나뉘며, API 응답의 unitType으로 구분된다. 예를 들어 TITLE_UNIT, LAYER_ROLLING_BANR, IMG_ITEM 같은 값으로 어떤 유닛을 내려보낼지 판단하고, 각 유닛에 필요한 데이터만 전달해 화면을 구성한다. 구조상 itemList, banrList, hasImgRightAngle 같은 렌더링 데이터와 UI 옵션, 트래킹 로그 데이터도 함께 다룬다. 2025년 12월 기준 SSG 홈 매장은 약 20개 정도의 모듈유닛으로 구성된다.

이 구조의 가장 큰 장점은 유지보수성이다. 예를 들어 상품 가격 표시 방식이 바뀌면 페이지마다 개별 수정할 필요 없이, 공통으로 쓰는 가격 컴포넌트만 고치면 그 컴포넌트를 사용하는 모든 상품유닛과 다른 모듈유닛에 변경이 일괄 반영된다.

실제 사례로는 SSG7CLUB(쓱세븐클럽) 런칭 때 상품유닛의 가격 영역에 적립금 안내를 추가한 일이 있다. 모든 상품유닛이 같은 가격 컴포넌트를 쓰고 있었기 때문에, 한 번의 수정으로 전체에 적용할 수 있었다.

다만 모듈유닛은 공통 단위인 만큼, 한 번의 변경이 여러 화면에 동시에 영향을 줄 수 있다. 그래서 새로운 기획을 할 때는 특정 페이지에만 필요한 요구인지, 공통 정책으로 적용해도 되는지 먼저 따져봐야 한다.

기획 리뷰 단계에서부터 기존 모듈유닛 정책을 위반하지 않는지, 구조 변경으로 공수가 커지지 않는지 충분히 검토한 뒤 개발을 진행한다. 결국 모듈유닛은 변경을 쉽게 만드는 동시에, 그 변경의 영향 범위와 책임을 더 명확하게 드러내는 공통 언어다.