기술스택 : Next.js, Typescript, Styled-Components, Recoil, Tanstack Query 1. Amplitude와 Clarity 툴을 도입하여 데이터 기반으로 클릭률 및 스크롤 비율 및 heatmaps 분석 Clarity의 스크롤 영역과 heatmaps을 통해, 대부분의 사용자가 스크롤 액션 없이 배너를 클릭 하여 바로 상세 페이지로 이동한 후 이탈하는 비율이 높다는 것을 확인했습니다. 이를 통해, 유저 들이 아직 AI 커스텀에 익숙하지 않으며, 신규 자사몰이라는 점 때문에 상세 페이지로 바로 이동하기보다는 다양한 제품을 구경할 수 있는 카테고리로 유도하는 것이 더 효과적일 것이라고 판단했습니다. 이 분석 결과를 바탕으로, 모바일 친화적인 자사몰에서 배너 사이즈가 뷰포트의 80% 이상을 차지하고 있다는 점을 파악하였습니다. 이를 개선하기 위해 배너 사이즈를 줄여, 사용자가 자사몰에 진입했을 때 배너와 다양한 제품 카테고리를 한눈에 볼 수 있도록 수정했습니다. 그 결과, 카테고리 클릭률을 40% 향상시킬 수 있었습니다. 2. 웹뷰를 도입하여, 웹과 앱에서의 동일한 구매 환경 제공 앱에서만 제공되는 AI 커스텀 기능의 높은 활용률, 직접 만든 커스텀 이미지를 제품으로 구매하고 싶은 유저의 요청이 지속적으로 생기고 있는 상황에서 이미 개발되어 있는 웹 쇼핑몰을 빠르게 앱에서도 경험할 수 있는 웹뷰를 제안하였고 그 결과 전체 매출의 30%는 웹뷰를 통해서 발생하고 있습니다. 네이티브앱에서는 웹뷰에서 발생하는 여러 에러들을 파악할 수 없는 앱과 웹 사이의 블랙박스를 개선하기 위해서, 웹인스펙터를 앱에서도 볼 수 있는 오픈소스 eruda 툴을 공유하고 적용하여 개발환경을 개선했습니다. 웹뷰 도입으로 인해, 동일한 구매 환경 뿐만아니라 자사몰에 업데이트 되고 있었던 새로운 기능을 적은 리소스로 웹과 앱에 배포를 할 수 있게 되었습니다. 3. 결제모듈을 도입하여 정상적인 주문 프로세스 확립 결제모듈 도입 전, 무통장 입금으로만 진행되던 주문 프로세스는 주문을 완료했음에도 결제가 진행 되지 않아 주문자 / 관리자 모두에게 혼란을 주고 있었습니다. 이러한 문제점을 파악하고 빠르게 PG 사조사부터, 개발, 결제 프로세스를 담당하고 진행하였습니다. 4. 커스텀 주문제작 어드민 시스템을 기획하고 개발 커스텀 주문제작 특성 상, 주문 이후에 AI 작업 확인 / 전문 디자이너의 후보정 / 완성된 제품 시안 확인의 과정이추가 되어야 했고, 이 모든 작업을 한눈에 볼 수 있는 채널의 부재로 소통 비용이 많 이 발생하고 있었습니다. 이러한 상황을 해소하기 위해서 고객에게 제품이 가기까지의 모든 과정을 통합적으로 관리할 수 있는 어드민 시스템을 기획하고, 개발하였으며 이를 통해 주문 누락 비율을 약 30% 개선하고 고객과의 원활한 소통과 업무 효율성을 높였습니다. 5. 자사몰 성능 최적화 작업을 통해 Lighthouse 75% 향상 번들 크기 분석 및 최적화: Bundle Analyzer를 활용해 자사몰의 번들 크기를 분석한 후, Dynamic Import를 통해 초기 빌드 시간을 줄이고, 더 효율적인 라이브러리로 대체하여 성능을 개선했습니다. 이미지 로딩 최적화: Next.js의 priority 속성이 무분별하게 사용된 사례를 파악하여, 이를 최적화함으로써 초기 로딩 시간을 줄이고 오프스크린 콘텐츠의 렌더링을 개선했습니다. 동적 컴포넌트 로딩: 모달 및 토스트 컴포넌트를 Dynamic Import로 처리하여 초기 로딩 성능을 향상시켰습니다. 웹폰트 최적화: 서브셋 폰트 사용 및 font-display: swap 속성을 적용해 웹폰트 로딩 시간을 최적화하고 사용자 경험을 개선했습니다.

더보기