개요
핵심 요약
- 코오롱몰은 남성·여성 의류, 스포츠, 골프웨어, 라이프까지 아우르는 패션 커머스 플랫폼이다.
- 첫 화면은 3장짜리 모델 컷 배너로 시작하고, 그 아래 아울렛·남성·여성·스포츠·골프·라이프 카테고리를 아이콘으로 나눠 배치한다.
- 상품 그리드는 가격보다 스타일링 사진을 우선해, 옷·가방·신발을 한 화면 안에 코디처럼 묶어 보여주는 방식을 반복한다.
- 테마별 기획전(‘신상품’, ‘가치소비’, ‘출근룩’ 성격의 미니 컬렉션)을 세로로 여러 개 이어 붙여, 하나의 롱 스크롤 화면으로 구성했다.
- 프레임워크 힌트로 Next.js와 Swiper 캐러셀 컴포넌트가 확인된다.
코오롱몰은 남성·여성 의류부터 스포츠, 골프웨어, 라이프 카테고리까지 아우르는 패션 커머스 플랫폼이다. 첫 화면은 모델 컷 세 장을 이어 붙인 배너로 시작하고, 바로 아래 아울렛·남성·여성·스포츠·골프·라이프를 아이콘으로 나눈 카테고리 바가 이어진다. 메뉴만 보면 전형적인 종합몰 구조지만, 그 아래 상품 구획의 화법은 다르다.
스크롤을 내리면 가격 배지가 촘촘히 붙은 일반적인 상품 그리드 대신, 코디 사진처럼 옷과 소품을 함께 배치한 그리드가 테마별로 반복된다. 신상품 소개, 가을 준비 관련 기획, 출근룩 성격의 컬렉션 등 수십 개의 미니 구획이 세로로 길게 이어지며 하나의 롱 스크롤 페이지를 이룬다. 이번 리뷰에서는 가격보다 스타일링을 앞세운 그리드 구성과, 그것이 만드는 탐색 경험을 살펴본다.
브랜드 & 메시지
브랜드 화법의 핵심은 ‘안목을 넓히는 새로운 시선’이라는 타이틀 문구에서 드러난다. meta description도 ‘코오롱몰은 새로운 시선으로 한끗 다른 멋이 있는 일상을 만들어갑니다’로 같은 톤을 유지한다. 가격 할인율을 앞세우는 대신 ‘시선’, ‘안목’ 같은 단어로 브랜드를 설명하는 방식은, 상품 그리드에서 가격 배지보다 스타일링 사진을 우선하는 실제 화면 구성과도 일치한다.
다만 종합몰 특유의 정보량 문제는 여전하다. 수십 개의 테마별 기획전이 세로로 이어지면서, 각 구획의 제목이 ‘신상품’, ‘기획전’ 류의 짧은 표현에 그치는 경우가 많아 어떤 기준으로 상품을 묶었는지 한눈에 파악하기 어려운 구간도 있다. 에디토리얼한 톤을 유지하면서도 각 구획의 큐레이션 기준을 한 줄로 더 명확히 밝히면 탐색이 쉬워질 것이다.
UX/UI 관점
강점은 다섯 가지다. 첫째, 첫 화면 카테고리 바를 아울렛·남성·여성·스포츠·골프·라이프 아이콘으로 압축해, 종합몰임에도 진입 경로를 단순하게 유지했다. 둘째, 상품 그리드에서 단일 상품 컷 대신 코디 사진을 섞어, 상품을 낱개가 아니라 스타일 단위로 인지하게 만든다.
셋째, 테마별 기획전을 세로로 이어 붙인 롱 스크롤 구조가 종합몰 특유의 방대한 카테고리를 별도 페이지 이동 없이 한 화면 흐름에서 훑게 해준다. 넷째, 각 기획전 구획마다 ‘더보기’ 버튼을 일관된 위치에 배치해, 관심 있는 구획만 골라 상세로 이동할 수 있다. 다섯째, Swiper 기반 캐러셀로 히어로 배너와 일부 상품 구획을 슬라이드 처리해, 제한된 화면 폭 안에서도 더 많은 상품을 노출한다.
IA·SEO 전략
페이지 타이틀은 ‘코오롱몰 | 안목을 넓히는 새로운 시선’, meta description은 ‘남성/여성의류·스포츠·골프웨어·라이프까지! 코오롱몰은 새로운 시선으로 한끗 다른 멋이 있는 일상을 만들어갑니다’로 취급 카테고리와 브랜드 톤을 함께 담았다. canonical 태그가 설정돼 있고, og:title·og:description·og:url·og:image·og:type이 모두 지정돼 있으며 og:image는 별도 이미지 CDN 도메인을 쓴다. 최초 응답 HTML에서 JSON-LD 구조화 데이터도 확인된다.
사이트는 Next.js 기반으로 보이며 Swiper 캐러셀을 함께 쓰는 구조다. 메타 정보는 충실한 편이지만, 홈 화면에 수십 개의 기획전 구획이 이어지는 만큼 각 기획전이 별도 URL과 고유한 타이틀·설명을 갖췄는지가 중요하다. 코디 중심 화법이 강점인 만큼, 상품 상세 페이지에 Product·Offer 구조화 데이터(가격, 재고, 리뷰)를 촘촘히 적용하면 검색 결과에서 가격·재고 정보가 함께 노출돼 클릭률에 도움이 될 수 있다.
성능·접근성
모델 컷 배너와 코디 사진 중심 그리드가 페이지 전반에 반복되는 구조라, 이미지 수 자체가 많다. 특히 롱 스크롤로 이어지는 수십 개 기획전 구획은 페이지 하단으로 갈수록 이미지가 누적되므로, 뷰포트에 들어오기 전 구획에는 지연 로딩 적용 여부가 전체 체감 속도를 좌우한다.
Swiper 캐러셀이 여러 구획에 쓰이는 만큼, 캐러셀 전환 애니메이션이 저사양 기기에서도 끊기지 않는지 확인할 필요가 있다. 코디 사진 안에 여러 상품이 함께 담기는 그리드 방식은 개별 상품명을 이미지 밖 텍스트로도 함께 제공해야 접근성과 검색 양쪽에 유리하다. 가격 정보가 상대적으로 절제돼 있으므로, 스크린리더 사용자를 위해 상품별 가격·할인 정보가 대체 텍스트나 인접 텍스트로 명확히 노출되는지도 점검할 부분이다.
자주 묻는 질문
코오롱몰은 어떤 카테고리를 취급하나요?
남성·여성 의류, 스포츠, 골프웨어, 라이프 카테고리를 아우르는 종합 패션 커머스 플랫폼입니다. 첫 화면 카테고리 바에서 아울렛·남성·여성·스포츠·골프·라이프로 나눠 진입할 수 있습니다.
패션 쇼핑몰 홈페이지는 상품을 어떻게 배치하는 것이 효과적인가요?
코오롱몰처럼 개별 상품 컷 대신 코디 사진을 섞은 그리드를 쓰면, 상품을 낱개가 아니라 스타일 단위로 인지시킬 수 있습니다. 다만 각 구획의 큐레이션 기준을 짧게라도 명시해야 탐색이 쉬워집니다.
종합몰 홈페이지에서 수십 개의 기획전을 한 화면에 배치해도 괜찮나요?
롱 스크롤 자체는 문제가 아니지만, 뷰포트 밖 이미지에 지연 로딩을 적용하지 않으면 로딩 부담이 커집니다. 코오롱몰처럼 구획마다 더보기 버튼을 일관되게 배치하면 필요한 부분만 선택적으로 볼 수 있어 유리합니다.
커머스 사이트가 AI 답변 엔진에서 상품 정보로 인용되려면 무엇이 필요한가요?
상품 상세 페이지에 Product·Offer 구조화 데이터로 가격, 재고, 리뷰 정보를 명시하는 것이 기본입니다. 코디 중심 그리드처럼 시각적으로 우수한 구성이라도, 기계가 읽을 수 있는 가격·재고 데이터가 없으면 답변 엔진의 인용 대상이 되기 어렵습니다.
디지털 파트너 더블루캔버스
패션 종합몰의 홈페이지는 방대한 카테고리를 한 화면에 담아야 하는 과제와, 그럼에도 브랜드 톤을 잃지 않아야 하는 과제를 동시에 안는다. 여기에 검색엔진과 AI 답변 엔진이 상품 정보를 정확히 읽을 수 있어야 한다는 과제까지 더해진다. 세 가지를 한 번에 잡기는 쉽지 않다.
The Blue Canvas(더블루캔버스)는 커머스 사이트에서 스타일링 중심의 화면 구성과, 상품 단위의 구조화 데이터 설계를 함께 다룬다. 보기 좋은 그리드와 검색·AI 답변에서 발견되는 상품 페이지를 동시에 만드는 것이 이런 사이트의 핵심 과제다.
마무리와 다음 스텝
코오롱몰의 홈페이지는 가격 배지보다 스타일링 사진을 앞세운 그리드로 종합몰 특유의 방대한 정보량을 감성적으로 풀어냈다. 압축된 카테고리 바와 구획별 더보기 버튼이 탐색을 도우며, 메타 정보와 구조화 데이터도 기본기를 갖췄다.
실행 제안은 셋이다. 첫째, 세로로 이어지는 수십 개 기획전 구획 각각에 큐레이션 기준을 짧게라도 명시해 탐색 편의를 높인다. 둘째, 뷰포트 밖 이미지에 지연 로딩을 적용해 롱 스크롤 페이지의 초기 로딩 부담을 줄인다. 셋째, 상품 상세 페이지의 Product·Offer 구조화 데이터를 점검해 가격·재고 정보가 검색과 AI 답변에서 함께 노출되게 한다. 지금의 화법이라면, 구조화 데이터를 촘촘히 다지는 쪽이 다음 성장 구간이다.
