이커머스 프론트엔드 리뉴얼개발 및 유지보수

이커머스 프로젝트에 투입되기 전 정확한 날짜는 정해지지 않았지만 React를 이용하여 리뉴얼개발이 진행된다는 소식을 듣고 프로젝트에 투입되었어요. 홈페이지의 전체적인 흐름을 알아야 리뉴얼개발이 진행될 때 어려움없이 개발을 진행할 수 있기 때문이죠. 그렇기 때문에 먼저 유지보수 인력으로 투입되었죠. 해당 프로젝트는 크게 3개로 나뉘었어요. 이를 관리하고 신규 개발 건이 있을 경우 진행하였죠.

프론트엔드 유지보수/운영은 어떻게 하는거죠?

처음 프로젝트에 투입되었을 때 낯선 기술들이 정말 많았어요. 등 들어는 봤지만 한번도 접해보지 못한 기술들을 사용했어요. 또한 소스의 구조가 이해하기 힘들었고 데이터의 흐름이 정말 복잡하였죠. 해당 프로젝트의 회사의 본사는 일본에 있으며 국제적인 회사에요. 중국, 독일, 프랑스 등 여러 나라에 있죠. 일본에 있는 서버의 API를 이용하여 데이터를 받아오며 백엔드는 Php를 프론트엔드는 Javascript, Jquery 가 기본이 되며 Rxjs, Twig를 사용하고 있죠. 그러면 Rxjs와 Twig란 무엇일까요?

- Rxjs란?
JavaScript에서 사용할 수 있게 해주는 라이브러리입니다. 다양한 비동기 이벤트 스트림을 효율적으로 처리할 수 있도록 도와줍니다.

- Twig란?
Twig는 PHP를 위한 템플릿 엔진입니다. HTML 문서 안에 PHP 로직을 깔끔하게 삽입할 수 있도록 도와줍니다.

이 중 Rxjs의 개념을 익히고 이를 적용하는데에 시간이 오래걸린 것 같아요.

해당 프로젝트에 이전부터 계신 PM님께서는 자신의 밑에 있는 개발자들에게 자신이 원하는 수준까지 올라오지 않으면 일을 주지 않으셨어요. 저는 PM님에게 인정받고 싶어 정말 많이 노력한 결과 3~4개월 정도가 지나서야 개발을 할 수 있었죠. 이전에는 간단한 수정 건만 진행했다면 이후에는 하나의 파트를 맡아 책임을 질 수 있었어요. 새로운 개발 건이나 UI/UX 개선이 들어올 경우 일본에서 오는 문서를 확인하여 개발을 진행하였죠.

요청을 받았으면 일을 해야지!

한국미스미에 들어와서 가장 처음으로 맡았던 개발 건은 GA4 및 이에대한 이벤트 트래킹을 구축하는 것이었어요.

Universal Analytics 종료 그리고 GA4로의 전환
2023년 7월 Universal Analytics(UA) 서비스 종료 발표와 함께 Google Analytics 4(GA4)로의 전면 전환이었죠. 기존에 UA로 수집하던 모든 데이터를 GA4 방식으로 재구축해야 하는 상황이었어요.

처음에는 단순히 분석 도구만 바꾸는 정도로 생각했는데 막상 시작해보니 완전히 다른 데이터 수집 방식이라 거의 처음부터 다시 구축해야 하는 수준이었어요. UA는 세션 기반이었다면 GA4는 이벤트 기반이라 근본적인 접근 방식부터 달랐거든요.

* 페이지뷰(PV): 모든 페이지의 기본 방문 데이터
* 상품 관련 이벤트: 상품 조회, 상품 스펙 확인, 장바구니 추가
* 구매 관련 이벤트: 견적 요청, 주문 완료, 결제 프로세스
* 검색 이벤트: 사이트 내 검색어, 필터 사용, 정렬 기준 변경

지라 티켓을 통해 요구서와 정의서가 들어오고 해당 문서를 참고하여 개발을 진행했어요. 여기서 가장 큰 문제는 모든 문서가 일본어로 작성되어 있다는 점이었죠.

좀 더 정확하고 완벽하게 개발하려면 문서를 꼼꼼히 읽어야 하는데 언어 장벽 때문에 항상 "혹시 중요한 부분을 놓치고 있는 건 아닐까?"라는 불안감이 있었어요.

이를 해결하기 위해 조금씩 일본어 공부를 시작했고 회사에 일본어를 할 줄 아시는 분들께 애매한 부분을 조심스럽게 물어보며 개발을 진행하게 되었어요. 시간이 지날수록 문서 이해도가 높아지면서 더 정확한 개발을 할 수 있게 되었죠.

UI/UX를 좀 더 맛있게 만들어 봐

UI/UX는 이커머스 사이트에서 사용자 경험은 곧 매출과 직결되는 부분이에요. 아무리 좋은 상품이 있어도 사이트가 불편하면 고객들은 금세 다른 곳으로 떠나버리거든요. 그래서 이번 리뉴얼에서는 단순히 디자인만 예쁘게 바꾸는 게 아니라 실제 사용자의 행동 패턴을 분석해서 불편한 지점들을 하나씩 개선해나가는 데 집중했어요. 작은 애니메이션과 인터랙션 효과들이 사용자 경험에 미치는 영향은 생각보다 크다고 생각해요. 버튼을 클릭했을 때의 호버 효과, 로딩 상태를 보여주는 스피너, 성공/실패 상태를 알려주는 토스트 메시지 등 마이크로 인터랙션을 뜻하죠.

특히 상품을 장바구니에 담을 때 작은 애니메이션과 함께 "장바구니에 담겼습니다"라는 메시지가 나타나도록 했는데 이런 작은 피드백이 사용자의 만족도를 크게 높였어요. 이커머스 사이트는 정보량이 방대하기 때문에 정보 우선순위에 따른 시각적 계층 구조가 정말 중요해요. 사용자의 시선이 자연스럽게 중요한 정보부터 훑을 수 있도록 레이아웃을 설계가 필요하죠.

이커머스의 특성상 사용자마다 권한과 할인율이 다르기 때문에 사용자 권한에 따른 UI 분기 처리가 필수였어요. 일반 사용자, 기업회원, 구매연계계정 등 각각의 권한에 따라 메인페이지가 달라져요. 또한 이전 구매 이력이나 관심 카테고리를 바탕으로 메인페이지의 추천 상품 영역을 개인화해서 보여주는 기능도 추가했어요. 같은 페이지라도 사용자마다 다른 경험을 제공할 수 있게 된 거죠.

그루비 API를 이용한 상품 추천 배너 기능

그루비 API의 장점은 이것이죠 실시간 데이터 학습과 다양한 추천 알고리즘을 제공한다는 점이 매력적이었죠. 추천 시스템의 정확도는 결국 데이터의 품질과 양에 달려있어요.

그루비 API의 데이터는 가장 먼저 상품 데이터를 그루비측에서 수집해 가야해요. 이벤트를 통해 그루비측에 상품 데이터를 전달하고 그 데이터를 기반으로 각 영역에 상품을 추천하는 것이죠.

* 상품 조회 이벤트: 어떤 상품을 몇 번 봤는지
* 구매 이벤트: 실제 구매로 이어진 상품들의 연관성
* 장바구니 이벤트: 함께 담은 상품들의 패턴
* 검색 이벤트: 검색어와 클릭한 상품의 관계

1// 그루비 API 전송 예시
2let payload = {
3	name: '',
4	code: '',
5	amt: 0,
6	prc: 0,
7	salePrc: 0,
8	cnt: 0,
9	brandNm: '',
10};
11groobeeAPI.push(payload);
12
13groobee('XX', {
14	goods: payload,
15});

그렇게 수집했던 데이터를 통해 상품을 추천하는 것이죠 각 영역마다 다른 추천 알고리즘을 적용하고, 배너의 디자인과 문구도 맥락에 맞게 다르게 구성했어요.

상품 상세 페이지: "이 상품을 본 고객들이 함께 구매한 상품"
상품 카테고리 페이지: "이 카테고리에서 인기 있는 상품"
검색창: "이 검색어로 찾은 다른 고객들이 함께 본 상품"

추천 기능 도입 약 2개월 후 성과를 분석해보니 새로운 기분을 느꼈어요. 재방문율 15% 증가, 상품 전환율 23% 향상 등 제가 개발했던 추천 영역을 통해 매출이 늘어난다는 것이 너무 신기하고 새로웠어요.

무엇보다 이 기능을 통해 데이터 기반 개발의 중요성을 다시 한번 깨달을 수 있었어요. 단순히 기능을 만드는 것을 넘어서 실제 비즈니스 임팩트까지 측정하고 개선해나가는 경험이 정말 보람찼던 것 같아요.