페이지 구성의 최소 단위, 모듈유닛

모듈유닛이란?

• **모듈유닛(Module Unit)**은 SSG.COM 웹/앱에서 사용되는 최소 단위의 독립적인 UI 구성 요소입니다.
• 페이지를 이루는 기능 블록이며, 여러 모듈유닛이 모여 '모듈매장'이라 불리는 페이지를 구성합니다.
• 상품, 배너, 팝업 등 다양한 타입으로 존재하며, 고유 ID인 unitType으로 구분됩니다.
• API 응답에서 unitType을 기준으로 페이지에 필요한 모듈유닛을 결정하고 데이터를 전달하여 UI를 렌더링합니다.

모듈유닛의 개념적 출발

• 'Module'의 정의(독립적으로 동작 가능한 구성 요소)에서 출발했습니다.
• 새로운 매장/서비스 기획 시, 구성 요소를 매번 새로 만드는 대신 '모듈유닛'이라는 공통 단위를 활용하여 개발 및 운영 비용을 절감합니다.
• SSG.COM 메인 페이지는 상단 배너, 상품 목록 등 서로 다른 역할을 하는 여러 모듈유닛으로 구성됩니다.

모듈유닛의 장점

유지보수 용이성

• 모듈유닛 단위로 관리되어, 수정 시 페이지별 일괄 적용이 가능합니다.
• 예: 상품 가격 표시 방식 변경 시, 상품 유닛의 가격 컴포넌트만 수정하면 모든 관련 유닛에 자동 반영됩니다.
• SSG7CLUB 멤버십 런칭 시, 상품 유닛의 가격 영역에 적립금 표기 기능 추가를 한 번의 수정으로 일괄 적용했습니다.

모듈유닛 사용 시 고려사항

변경 영향 범위

• 모듈유닛은 여러 페이지와 매장에서 공통 사용되므로, 한 번의 변경이 여러 화면에 동시에 영향을 미칩니다.
• 신규 기획 시, 요구사항이 특정 페이지/유닛에 국한되는지 또는 공통 적용 가능한 정책인지 충분한 검토가 필요합니다.
• 기획자는 이러한 구조를 이해하고 정책 설계 시 이를 고려해야 합니다.

책임감 있는 변경

• 공통 사용되는 구조이므로, 변경의 영향 범위를 명확히 파악하고 책임감 있게 설계해야 합니다.
• 기획 리뷰를 통해 스펙 변경이 기존 모듈유닛 정책 위반 여부, 개발 공수 증가 등을 논의한 후 개발을 진행합니다.

결론

모듈유닛은 페이지 구성에 대한 '공통 언어'이자 관점으로, 프론트엔드 개발, 기획, 운영 전반에 걸쳐 효율성과 명확성을 제공합니다. 변경 용이성과 그에 따른 책임의 중요성을 동시에 강조합니다.