주요 기능 개발

FILA 코리아 공식 온라인 스토어(fila.co.kr)의 전면 리뉴얼입니다. 프론트엔드 개발자로 상품 목록·상품 상세·검색·매장 안내·메인 화면을 담당했습니다.

가장 크게 손댄 곳은 상품 목록 페이지입니다. 고객이 옷을 고르는 첫 화면인데 뜨는 데 2초가 넘게 걸렸고, 원인은 특정 기능이 아니라 화면을 그리는 방식 자체에 있었습니다. 구조를 바꿔 0.5초로 줄였습니다.

1. 상품 목록과 검색

상품 목록을 그리는 과정을 세 단계에서 한 단계로 줄였습니다. 외부 검색 서비스를 거쳐 완성된 화면을 받아오던 방식을 버리고, 필요한 데이터만 받아 브라우저가 직접 카드를 그리도록 바꿨습니다.

• 자체 상품 조회 API를 붙여 중간 단계와 재정렬 작업을 제거
• 검색 결과 페이지도 같은 방식으로 전환해 두 화면의 동작을 하나로 통일
• 화면이 뜨는 속도와 클릭 반응 속도가 목록 페이지 전반에서 함께 개선

2. 보는 사람에 따라 달라지는 가격

이 쇼핑몰은 임직원·지인·일반 고객의 할인율과 볼 수 있는 상품이 각각 다릅니다. 이 판단을 브라우저가 아니라 서버에서 끝내도록 설계했습니다.

• 로그인 정보로 등급을 판별해 가격 계산과 노출 여부를 서버가 처리하고, 완성된 결과만 내려보냄
• 브라우저에서 걸러내면 임직원 전용 상품과 할인가가 응답에 그대로 남아, 개발자 도구만 열어도 보이기 때문
• 컬렉션 하나에 상품이 100개가 넘어 계산이 무거운 만큼, 같은 요청은 다시 계산하지 않도록 캐싱을 적용

3. 상품 상세

구매 직전 화면이라 망설임을 줄이는 쪽에 집중했습니다. 색상을 바꿀 때 멈칫하던 문제를 없애고, 고르는 데 필요한 정보를 상세 페이지 안에서 끝낼 수 있게 배치했습니다.

• 다른 색상 정보를 미리 받아두어 색상 스와치를 누르면 즉시 전환
• 같은 라인의 다른 모델을 한 화면에서 비교하는 섹션
• 핏·사이즈 가이드를 상세 안에 배치 — 반품 사유의 상당 부분이 사이즈이기 때문

4. 매장 안내·메인·공통 영역

"지금 내 근처에 이 상품이 있는 매장이 있는가"에 답하는 것이 매장 안내의 목표였습니다. 메인과 헤더·푸터는 브랜드 캠페인을 보여주는 자리로 다시 구성했습니다.

• 네이버 지도 연동, 내 위치에서 가까운 순서로 매장 정렬, 브랜드·지역 필터
• 상품별 주변 매장 재고를 그 자리에서 확인하는 모달
• 메인 히어로 슬라이드쇼와 기획 모달 3종, 모바일 메뉴 정비
• 목록과 상세가 서로 다르게 판단하던 품절 표시를 상품 데이터 한 곳으로 일원화

트러블 슈팅 경험

1. 상품 목록이 뜨는 데 2초가 넘게 걸리던 문제

컬렉션 페이지를 열면 상품이 보이기까지 2초 이상 걸렸습니다. 쇼핑몰에서 옷을 고르는 첫 화면이라 이탈에 직접 영향을 주는 구간이었습니다.

원인

느린 원인이 특정 기능에 있지 않았습니다. 화면 하나를 그리는 데 서버가 세 단계를 거치고 있었습니다. 외부 검색 서비스를 왕복해 완성된 화면 조각을 받아오고, 그것을 페이지에 끼워 넣은 뒤, 정렬을 맞추려고 이미 그려진 카드를 다시 옮겨 다는 식이었습니다. 그래서 사용자는 화면이 한 번 그려진 뒤 또 한 번 흔들리는 것을 보게 됐습니다.

해결

기능을 하나씩 최적화하는 대신 과정 자체를 줄였습니다. 자체 상품 조회 API로 필요한 데이터만 받고, 브라우저가 그 데이터로 카드를 직접 그리도록 바꿨습니다. 중간 단계가 사라지니 왕복 지연도 재정렬 로직도 함께 없어졌고, 결과는 2초 이상 → 0.5초였습니다. 같은 구조 문제를 안고 있던 검색 페이지도 함께 전환했습니다.

2. 색상을 바꿀 때마다 화면이 멈칫하던 문제

상품 상세에서 색상을 누르면 그 색상의 이미지와 정보를 새로 받아오는데, 누를 때마다 지연이 생겨 화면이 끊기는 느낌을 줬습니다.

원인

색상을 누른 뒤에야 요청을 보내는 구조였기 때문입니다. 색상 선택은 구매 직전에 여러 번 반복되는 동작이라, 한 번의 지연이 그대로 여러 번 반복돼 체감이 커졌습니다.

해결

다른 색상의 화면 조각을 미리 받아두고 저장해 두도록 바꿨습니다. 이미 받아둔 색상은 클릭 즉시 전환되고, 같은 색상을 다시 눌러도 요청이 생기지 않습니다. 요청을 빠르게 만드는 대신 요청 시점을 클릭보다 앞으로 옮긴 방식입니다.

3. 품절 표시가 페이지마다 다르게 나오던 문제

같은 상품인데 목록에서는 구매 가능해 보이고 상세로 들어가면 품절인 경우가 있었습니다. 반대로 어긋나는 경우도 있었습니다.

원인

목록과 상세가 각자 다른 기준으로 품절을 판단하고 있었습니다. 한 화면을 고치면 다른 화면이 어긋나는 상태라, 개별 화면을 수정하는 방식으로는 끝나지 않는 문제였습니다.

해결

판단 기준을 화면에서 걷어내고 상품 데이터 한 곳으로 일원화했습니다. 목록도 상세도 같은 값을 보고 표시하므로, 이후 품절 정책이 바뀌어도 고칠 곳이 한 군데입니다.