배포 링크
실제 서비스 환경으로 이동합니다.
POISITON
프로젝트 담당 영역 - PDP, Footer, Review
- 공통 커머스 플랫폼 구조를 유지하면서도 브랜드별 요구사항을 독립적으로 확장할 수 있는 멀티 브랜드 구조를 설계했습니다.
- 실서비스 운영 환경에서 브랜드 확장 시 발생하는 중복 코드와 유지보수 비용 문제를 최소화하는 방향으로 아키텍처를 개선했습니다.
- 01
멀티 브랜드 아키텍처 설계 및 확장
공통 플랫폼 구조를 유지하면서 브랜드별 UI 및 기능 요구사항을 독립적으로 분리
- 02
3rd-party 리뷰 시스템 통합
외부 리뷰 서비스를 기존 PDP 구조에 안정적으로 통합
- 03
운영 환경 모니터링 및 사용자 행동 추적 체계 구축
실서비스 운영 안정성과 사용자 행동 데이터 기반 개선 환경 구축
Technical deep-dive
기술 상세
영역을 선택하면 사용한 기술과 구체적인 구현·협업 내용을 확인할 수 있습니다.
Tech stack
- Monorepo
- Turborepo
- Next.js
- React
Implementation & history
- 기존 Discovery 플랫폼 구조를 기반으로 MLB 브랜드를 Monorepo 환경에 확장 적용했습니다.
- 공통 컴포넌트와 브랜드 전용 UI를 분리하여 코드 재사용성과 운영 효율성을 동시에 확보했습니다.
- 브랜드별 요구사항 증가에 따라 발생할 수 있는 분기 복잡도를 줄이기 위해 공통 로직과 브랜드 전용 로직의 책임 범위를 명확히 구분했습니다.
- 향후 브랜드 추가 및 기능 확장을 고려한 구조로 설계하여 유지보수 비용 증가를 최소화했습니다.
Tech stack
- 3rd-party API
- SWR
- Axios
Implementation & history
- Crema 리뷰 서비스를 상품상세 페이지에 최초 도입하며 외부 서비스 연동 구조를 설계했습니다.
- 리뷰 데이터와 기존 PDP 상태 흐름을 분리하여 외부 서비스 변경이 전체 UI 구조에 영향을 주지 않도록 구성했습니다.
- API 응답 지연 및 예외 상황에서도 안정적으로 렌더링될 수 있도록 방어적인 UI 구조를 설계했습니다.
Tech stack
- GTM
- Sentry
Implementation & history
- GTM 기반 이벤트 트래킹 구조를 설계하여 사용자 행동 데이터를 수집할 수 있는 기반을 마련했습니다.
- 조회, 클릭, 구매 등 주요 사용자 흐름을 이벤트 단위로 추적하여 데이터 기반 개선이 가능하도록 구성했습니다.
- Sentry를 도입하여 런타임 에러를 실시간으로 추적하고 운영 이슈 대응 속도를 개선했습니다.
- 운영 중 발생하는 실제 사용자 환경 이슈를 빠르게 파악하고 대응할 수 있는 모니터링 체계를 구축했습니다.