상품마스터 프로젝트는 이마트앱의 상품 영역 전반에 걸친 중요한 프로젝트입니다. 첫 MVP 배포 이후 전시카테고리, 브랜드관 등 다양한 프로젝트와의 연계가 필요하여 높은 유지보수성과 재사용성을 목표로 작업을 진행하였습니다. 다음은 주요 작업 내용입니다.
- MVP 배포
- 컴포넌트 추상화
- 템플릿 공통화
- 상품 객체 통일
- newBO 컴포넌트
1. 상품 상세 컴포넌트 추상화 기존의 200줄 이상의 상품 상세 컴포넌트 템플릿 코드를 80줄로 줄여 가독성을 대폭 향상시켰습니다. 이를 통해 코드의 이해도가 높아지고, 특정 영역에 템플릿을 커스텀하게 삽입할 수 있게 되었습니다. 이로 인해 상품 관련 개발 속도가 크게 증가할 것으로 기대됩니다.
2. 목록 좌우 스크롤 템플릿 공통화 이마트앱 전반에서 사용되던 좌우 스크롤 목록 컴포넌트를 별도로 존재하지 않아, 동일한 기능을 여러 곳에서 중복하여 사용하고 있었습니다. 이를 해결하기 위해 좌우 스크롤 템플릿을 컴포넌트화하여, 일반 상품 목록 및 기타 목록에서도 아이템만 삽입하여 사용할 수 있도록 개선하였습니다. 이를 통해 유지보수 및 기능 추가 시 소요되는 공수가 크게 감소할 것으로 기대됩니다.
3. 상품 객체 공통화 도메인마다 상품 객체 관련 API 키가 통일되지 않아, API 응답 후에 키를 재정의하는 불필요한 코드가 사용되었습니다. 이를 해결하기 위해 도메인에 상관없이 상품 객체를 통일하고, 인터페이스를 적용하여 상품 객체를 문서화하였습니다. 타입 시스템을 적용함으로써 유지보수가 용이해지고, 상품 관련 작업 시 생산성이 향상될 것으로 기대됩니다.
4. newBO 컴포넌트 개발 같은 기능을 하는 코드들이 중복되어 유지보수가 어렵고, 기능 추가 시 개발 시간이 많이 소요되었습니다. 백오피스 특성상 사용하는 레이아웃과 기능이 한정되어 있으므로, 공통으로 사용할 수 있는 컴포넌트 7개를 구현하였습니다. 이를 통해 상품마스터에 적용하여 30페이지에 달하는 기획 요구사항을 한 달 안에 소화할 수 있었습니다.
개선 사항 및 기대 효과
가독성 향상
200줄 → 80줄, 코드 이해도와 유지보수성 향상
재사용성 증가
공통 컴포넌트로 코드 중복 제거, 수정 공수 감소
생산성 향상
공통 상품 객체 + 인터페이스로 불필요한 키 재정의 작업 제거
개발 속도 개선
newBO 컴포넌트 7개로 30페이지 기획 요구사항을 1개월 내 소화
- 가독성 향상: 코드를 간결하게 함으로써 이해도와 유지보수성을 높였습니다.
- 재사용성 증가: 공통 컴포넌트를 통해 코드 중복을 줄이고, 기능 추가 및 수정 시 공수를 감소시켰습니다.
- 생산성 향상: 공통된 상품 객체와 인터페이스를 적용하여, API 응답 처리와 관련된 불필요한 작업을 줄였습니다.
- 개발 속도 개선: 추상화된 컴포넌트와 공통화된 템플릿을 통해 개발 속도가 향상되었습니다. ⠀이를 통해 이마트앱의 상품 영역 개발이 더욱 효율적이고 체계적으로 진행될 수 있을 것입니다.