#Frontend
페이지를 이루는 최소 기능 블록, 모듈유닛
01
Summary
SSG.COM의 효율적인 페이지 빌딩 전략, '모듈유닛'으로 개발 생산성 잡는 법
단순한 컴포넌트를 넘어 기획과 개발의 공통 언어가 된 UI 아키텍처의 핵심 원리를 공개합니다.
이 아티클은 SSG.COM이 수많은 기획전과 매장 페이지를 어떻게 효율적으로 관리하는지 다룹니다. 독립적으로 동작하는 최소 UI 단위인 '모듈유닛'의 개념부터 API를 활용한 동적 렌더링, 그리고 실제 서비스 적용 사례를 통해 대규모 이커머스 환경에서의 프론트엔드 구조 설계 인사이트를 제공합니다.
- 01독립적인 UI 구성 요소인 '모듈유닛'을 통한 페이지 조립형 아키텍처 구현
- 02API 응답 데이터의 unitType을 기준으로 동적 UI를 렌더링하는 시스템 구축
- 03멤버십 적립금 노출 등 공통 컴포넌트 수정을 통한 전체 서비스 일괄 업데이트 사례
- 04기획자와 개발자가 동일한 기준으로 소통할 수 있는 '공통 언어'로서의 가치 창출
- 05변경 범위와 정책 위반 여부를 사전에 조율하는 협업 프로세스 정립
RECOMMENDATION
복잡한 UI 구성 요소를 효율적으로 관리하고 싶은 프론트엔드 엔지니어와 기획 효율을 높이고 싶은 서비스 기획자에게 특히 추천합니다.
The Problem
신규 매장이나 서비스 출시 시 UI 구성 요소를 매번 새로 개발해야 함에 따라 개발 및 운영 비용이 증가하고, 기획자와 개발자 간의 소통 방식이 파편화되는 문제가 있었습니다.
The Solution
웹과 앱의 UI를 독립적인 최소 기능 단위인 '모듈유닛'으로 정의하고, API에서 내려오는 unitType을 기반으로 각 유닛에 필요한 데이터와 옵션을 전달하여 페이지를 동적으로 구성하는 아키텍처를 도입했습니다.
The Result
상품 가격 표시와 같은 공통 컴포넌트 수정 시 이를 사용하는 모든 모듈유닛에 변경 사항을 일괄 적용할 수 있게 되어 유지보수 효율이 비약적으로 향상되었습니다.
Trade-off
공통 모듈의 변경이 수많은 페이지에 동시에 영향을 미치므로, 개별 요구사항이 전체 정책을 위반하지 않는지 검토하는 기획 단계의 소통 비용과 변경에 따른 파급 효과를 관리해야 하는 책임이 커졌습니다.
03
Key Concepts
Continue reading · same source
