업무 · 리만코리아 · 엔더스

회원몰 백오피스

회원·제품·교환·반품 운영 기능을 개발하고, 계보 트리의 렌더링 병목을 개선했습니다.

기간
2021.03 - 2022.10
역할
프론트엔드 개발·운영
기술
Vue 3, TypeScript, WebSocket, Google Chart

주요 성과

  • 계보 트리 렌더링 약 40초 → 수초 이내

    레벨 기반 트리 테이블의 병목을 분석하고 레이지 로딩을 적용했습니다. 해당 계보 트리 화면에서 측정한 개선 결과입니다.

  • 실시간 고객 정보와 운영 화면 연동

    온피아 고객 응대 솔루션을 WebSocket으로 연결하고 회원 등급·계보를 Google Chart로 시각화했습니다.

  • 교환·반품 변경을 기능별 책임으로 분리

    운영 프로세스 변경에 맞춰 컴포넌트를 모듈화하고 개발 컨벤션을 문서화해 유지보수 구조를 정리했습니다.

모든 계층을 한 번에 렌더링하는 비용 줄이기

계보 트리 테이블에서 레벨 기반 렌더링에 약 40초가 걸렸습니다. 운영자가 필요한 정보를 보기 위해 전체 계층의 처리가 끝날 때까지 기다리는 구조를 개선해야 했습니다.

병목을 분석하고 레이지 로딩을 적용했습니다. 필요한 계층을 단계적으로 다루도록 바꿔 해당 트리 화면의 렌더링 시간을 수초 이내로 줄였습니다. 회원 등급과 계보는 Google Chart로 시각화했습니다.

운영 프로세스 변경의 영향 범위 좁히기

교환·반품 과정이 바뀔 때 여러 기능이 한 컴포넌트에 섞여 있으면 수정 범위를 파악하기 어려웠습니다. 기능을 운영 프로세스의 책임에 맞게 나눌 필요가 있었습니다.

컴포넌트를 모듈화하고 책임을 분리했습니다. 팀 개발 컨벤션도 문서화해 이후 수정자가 같은 기준으로 기능을 이해하고 변경할 수 있도록 정리했습니다.

고객 정보 스트림을 운영 화면에 연결하기

온피아 고객 응대 솔루션에서 전달되는 고객 정보를 운영 화면과 연결해야 했습니다. 외부 정보가 갱신되는 흐름을 화면에 반영하는 처리가 필요했습니다.

WebSocket 기반 정보 스트리밍을 연동해 실시간 고객 정보를 처리했습니다. 외부 솔루션 연동과 백오피스의 표시 로직을 함께 다뤘습니다.