프론트엔드 개발, 모듈유닛으로 효율 UP!
모듈유닛(Module Unit)은 신세계백화점 PC 메인 React 전환 과정에서 도입된, 페이지를 구성하는 최소 UI 구성 요소를 의미함
유닛 타입(Unit Type)과 데이터를 API로 받아와 UI를 구성하며, 유지보수성(Maintainability) 향상을 목표로 함
공통 컴포넌트(Common Component) 사용으로 변경 사항을 일괄 적용하여 개발 생산성(Development Productivity) 증대를 기대함
모듈유닛 아키텍처(Architecture)의 기본 원리
모듈유닛은 페이지를 구성하는 독립적인 UI 블록(Independent UI Block)으로, 재사용성(Reusability)과 유지보수성(Maintainability)을 높이는 데 기여한다. 각 모듈유닛은 고유한 unitType을 가지며, API 응답 데이터를 기반으로 렌더링된다.
단일 책임 원칙(Single Responsibility Principle): 각 모듈유닛은 하나의 기능에 집중하여 코드의 가독성(Readability) 및 유지보수성(Maintainability) 향상
컴포넌트 기반 개발(Component-Based Development): UI를 작은 단위로 쪼개어 관리함으로써, 변경 사항의 영향 범위를 최소화하고 개발 효율을 높임
데이터 중심 설계(Data-Driven Design): UI는 API에서 제공하는 데이터에 의존하므로, 데이터 구조 변경 시 UI 업데이트 용이
모듈유닛의 장점: 유지보수성(Maintainability) 향상
모듈유닛 아키텍처(Architecture)는 유지보수(Maintenance) 편의성을 극대화한다. 상품 가격 표시 방식 변경과 같은 요구사항 발생 시, 해당 기능을 담당하는 가격 컴포넌트(Price Component)만 수정하면 된다.
일괄 적용(Batch Application): 가격 컴포넌트를 사용하는 모든 상품유닛에 변경 사항이 자동으로 반영되어 수정 시간 단축
영향 최소화(Impact Minimization): 특정 페이지가 아닌, 공통 컴포넌트 수정으로 인해 변경 범위를 명확하게 관리
SSG7CLUB 멤버십 적립금 표기 기능 추가 사례: 상품유닛의 가격 영역에 적립금 표기 기능을 추가하여 개발 생산성(Development Productivity) 향상
결과적으로, 모듈유닛은 코드 변경의 파급 효과를 줄여 개발 효율성(Development Efficiency)을 높이는 데 기여한다.
모듈유닛 도입 시 고려사항
모듈유닛은 여러 페이지와 매장에서 공통으로 사용되므로, 변경 사항이 광범위한 영향(Wide Impact)을 미칠 수 있다. 따라서, 기획 단계에서부터 충분한 검토(Thorough Review)가 필요하다.
기획 리뷰(Planning Review): 변경 사항이 기존 모듈유닛 정책을 위반하지 않는지, 구조적 변경으로 인한 공수 증가는 없는지 확인
공통 정책(Common Policy): 공통으로 사용되는 모듈유닛의 경우, 변경 사항이 다른 매장이나 화면에도 동일하게 반영됨을 인지
책임 분담(Responsibility Sharing): 모듈유닛 기반 구조는 변경을 쉽게 만들지만, 변경의 영향 범위에 대한 책임(Responsibility)을 명확히 해야 함
결론적으로, 모듈유닛은 개발 효율성을 높이지만, 변경의 영향 범위를 고려하여 신중한 설계(Careful Design)가 필요하다.
