스마트디자인으로 만든 상품 상세 페이지 완성기

안녕하세요, 5년차 풀스택 개발자 여러분! 이번에 Cafe24 스마트디자인 모듈을 활용해 상품 상세 페이지를 만들었는데요, 지금부터 그 이야기를 들려드리겠습니다.

TL;DR

Cafe24 스마트디자인 모듈을 활용해 상품 상세 페이지 구현. 상품 이미지, 가격, 옵션 선택, 구매/장바구니 버튼 등 핵심 요소 적용. 상품 상세설명, 상품평(리뷰), Q&A 탭 영역도 구현.

오늘 뭘 만들었나

최근 우리 쇼핑몰에 새로운 상품이 추가됐는데, 기존 상품 상세 페이지가 너무 낡아서 전면 개편이 필요했어요. 디자인도 업데이트하고 기능도 확장하고 싶었죠. 그래서 Cafe24 스마트디자인 모듈을 활용해 보기로 했습니다.

상품 상세 페이지 만들기

처음엔 Cafe24 모듈 문서를 보면서 핵심 영역들을 하나씩 적용해 나갔죠. 상품 이미지, 가격, 옵션 선택, 구매/장바구니 버튼 등 구매 흐름의 중심이 되는 부분부터 작업했습니다. 그리고 상품 상세설명과 상품평, Q&A 탭도 만들었네요. (처음엔 영역 배치가 좀 헷갈렸지만 결과적으로 깔끔하게 나왔습니다.)

<div module="Product_menupackage">
    <!-- 상품 이미지, 가격, 옵션 선택, 구매 버튼 -->
</div>

<div module="product_detail">
    <!-- 상품 상세설명, 상품평, Q&A -->
</div>

로고/헤더 적용하기

상품 상세 페이지 구현 중에는 로고와 헤더 영역도 신경 써야 했죠. 다행히 Cafe24에서 제공하는 모듈들이 많아서, 쇼핑몰 로고 상단형과 하단형, 그리고 회사정보/푸터 모듈을 적용하는 데 큰 어려움은 없었습니다. (다만 처음엔 모듈 코드가 좀 헷갈리더라구요.)

<div module="Layout_LogoTop"></div>
<div module="Layout_Footer"></div>

삽질 & 교훈

처음에는 Cafe24 모듈을 연결할 때 상품코드(P0000FRF 등)를 바로 적용했는데, 나중에 알고 보니 실제로는 'Product_menupackage'나 'Layout_LogoTop' 같은 모듈 속성명을 써야 했더라고요. (그 전까지는 상품코드가 맞다고 생각했죠. 허탈했네요.)

또 다른 삽질은 상품평 리스트를 구현하다가 생긴 건데, 처음엔 jQuery로 개별 DOM 조작을 하다가 결국 Cafe24가 제공하는 'product_review' 모듈을 쓰는 게 편하더라고요. 그래도 모듈 속성명만 제대로 찾으면 대부분 잘 작동합니다. (생각보다 Cafe24 모듈이 잘 되어있더라고요.)

결과물

결과적으로 Cafe24 스마트디자인 모듈을 활용해 상품 상세 페이지를 깔끔하게 구현할 수 있었습니다. 기존 페이지보다 디자인이 훨씬 깔끔해졌고, 기능도 잘 동작하네요. 개발 기간도 생각보다 줄었고요. 이제 고객 반응이 기대돼요! (이번에도 개발자가 좀 편해졌군요.)