쇼핑몰 페이지를 구성할 때 가장 핵심적인 섹션은 바로 상품 리스트(Product List)입니다.
사용자는 이 영역에서 상품을 발견하고, 비교하고, 구매로 이어지기 때문에
상품 리스트의 UI 품질이 곧 전환율로 이어지는 매우 중요한 부분입니다.
이번 Part 3에서는 Cursor AI를 활용하여
반응형 상품 리스트와 상품 카드 UI를 실무 수준으로 구현하는 방법을 안내합니다.
이 글은 웹 개발에 익숙하지 않은 분들, 비전공자 분들, 그리고 AI를 활용해
웹사이트를 제작하고 싶은 분들 모두 이해할 수 있도록 구성했습니다.
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
1. Part 3에서 구현할 목표
이번 파트에서는 다음 요소들을 만들어갑니다.
① 반응형 그리드 레이아웃(Product Grid)
- 모바일: 2열
- 태블릿: 3열
- 데스크톱: 4열
(이 구조는 현대 쇼핑몰 UI에서 가장 많이 쓰는 형태입니다.)
② 상품 카드(Product Card) UI 요소
- 상품 이미지
- 상품명
- 가격, 할인율
- 무료배송/혜택 뱃지
- 장바구니 버튼
2. 시작하기 전에: 상품 카드 UI가 왜 중요한가?
상품 리스트 영역은 방문자가 “계속 둘러볼지 말지” 결정하는 핵심 지점입니다.
특히 쇼핑몰에서는 첫 화면에서 신뢰감을 주지 못하면 이탈이 바로 발생합니다.
상품 카드는 다음 세 가지 역할을 수행합니다.
1) 정보 전달
상품명, 이미지, 가격 등 핵심 정보가 즉시 눈에 들어와야 합니다.
2) 비교 용이성
상품 카드가 일정한 레이아웃으로 반복되어 구성되면
사용자는 빠르게 상품 간 비교가 가능합니다.
3) 구매 행동 유도
장바구니 버튼, 할인 표시, 혜택 뱃지는 전환율을 끌어올립니다.
이러한 이유 때문에 실무에서는 “카드 컴포넌트” 라는 개념을 사용합니다.
카드 컴포넌트는 재사용 가능한 UI 묶음이며, 쇼핑몰에서 가장 중요합니다.
3. 초보자도 이해하는 반응형 그리드 개념
반응형 웹이란 화면 크기에 따라 배치가 자동으로 변하는 웹 구조를 말합니다.
용어설명 – Grid System(그리드 시스템)
그리드 시스템은 화면을 일정한 칸으로 나누고
각 요소가 몇 칸을 차지할지 정의하는 방식입니다.
예를 들어, 모바일에서는 2칸씩, 데스크톱에서는 4칸씩 배치하도록 설정합니다.
쇼핑몰 개발에서 그리드를 잘 다루면
상품이 화면 크기에 따라 자동 정렬되므로 유지 보수도 편해지고 UX도 향상됩니다.
4. Cursor AI에 입력할 프롬프트 예시
아래 프롬프트는 초보자도 그대로 사용할 수 있는 형태로 정리했습니다.
반응형 쇼핑몰 상품 리스트 그리드 레이아웃을 HTML과 CSS로 만들어줘.
요구사항:
- 모바일 2열, 태블릿 3열, 데스크톱 4열
- 상품 카드는 이미지, 상품명, 가격, 할인율, 장바구니 버튼 포함
- 모던 쇼핑몰 스타일로 제작
- 전체 폭은 1200px 이하
- CSS는 가독성 있도록 정리
각 코드가 어떤 역할을 하는지 주석으로 알기 쉽게 설명을 달아줘.
이 한 줄만으로도 Cursor는 충분히 결과물을 생성합니다.
Part 3에서는 여러분이 이 코드를 이해할 수 있도록 구조 해설 중심으로 진행합니다.
독자의 이해를 돕기 위해 제공하는 이미지로 본인 화면 캡쳐입니다.
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
5. 상품 리스트 구조 이해하기
Cursor가 생성한 코드 분석
독자의 가독성을 위해 소스 코드는 일부분을 발췌하여 포스팅합니다.
전체 코드는 GitHub 저장소를 확인해주세요.
HTML 구조에서 가장 중요한 부분은 “상품 카드(Product Card)”입니다.
HTML 소스코드(부분발췌)
<!-- 상품 카드 1 -->
<article class="product-card">
<!-- 상품 이미지 영역 -->
<div class="product-image-wrapper">
<img src="https://via.placeholder.com/300x300?text=상품1" alt="프리미엄 상품 1" class="product-image">
<!-- 할인율 뱃지: 상품 이미지 위에 오버레이로 표시 -->
<span class="discount-badge">25%</span>
</div>
<!-- 상품 정보 영역 -->
<div class="product-info">
<h2 class="product-name">프리미엄 상품 1</h2>
<!-- 가격 정보: 할인 전 가격과 할인 후 가격을 함께 표시 -->
<div class="price-section">
<span class="current-price">₩29,900</span>
<span class="original-price">₩39,900</span>
</div>
<!-- 장바구니 버튼 -->
<button class="cart-button" aria-label="장바구니에 추가">
<span class="cart-icon">🛒</span>
장바구니
</button>
</div>
</article>
각 요소는 다음 역할을 수행합니다
1) img 태그
상품 첫인상을 결정하는 핵심 요소
2) alt 설명문구
SEO에도 중요하며, 이미지 로딩이 실패해도 정보 전달이 가능
예: “프리미엄 상품 1”
3) 상품명
상품 리스트에서 가장 먼저 시선이 가는 요소
4) 가격 + 할인율
판매 퍼포먼스에 매우 영향이 큼
실무에서는 할인율 배지, 쿠폰 표시를 추가하기도 함
5) 장바구니 버튼
사용자 행동을 유도하는 CTA(Call to Action)
6. SEO와 접근성을 강화하는 이미지 ALT 문구 작성법
초보자도 쉽게 이해할 수 있도록 실무 기준으로 정리했습니다.
(1) ‘무엇인지’ 명확하게
잘못된 예: image1.jpg
올바른 예: 여성용 데일리 패딩 상품 이미지
(2) SEO 키워드를 “자연스럽게” 포함
예: “남성용 러닝화 쿠션 스니커즈 상품 이미지”
(3) 스팸성 키워드는 절대 넣지 말 것
예: “러닝화 러닝화 러닝화 쿠폰 세일 최저가 image”
실제로 패널티가 발생할 수 있습니다.
7. Cursor가 생성한 코드 중 핵심 CSS 해설 (발췌)
/* ============================================
상품 그리드 섹션 스타일
============================================ */
/* 상품 그리드 컨테이너: CSS Grid를 사용하여 반응형 레이아웃 구현 */
.products-section {
display: grid;
/* 모바일 기본: 2열 그리드, 각 열은 최소 150px, 동일한 너비로 분배 */
grid-template-columns: repeat(2, 1fr);
/* 그리드 아이템 간 간격 설정 */
gap: 20px;
margin-bottom: 40px;
}
/* ============================================
태블릿 반응형 스타일 (768px 이상)
============================================ */
@media (min-width: 768px) {
/* 태블릿에서 3열 그리드로 변경 */
.products-section {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
/* 페이지 제목 크기 조정 */
.page-header h1 {
font-size: 2.5rem;
}
/* 부제목 크기 조정 */
.page-header .subtitle {
font-size: 1.125rem;
}
}
CSS 해설(초보자용)
display: grid;
요소들을 격자 형태로 배치하는 레이아웃 방식repeat(2, 1fr)
→ “1fr 칸 2개” 즉 2열을 의미
→ 모바일 2열 구성- 미디어 쿼리(@media)
→ 화면 넓이에 따라 레이아웃 변경
→ 반응형 구현의 핵심
본 이미지는 독자의 이해를 돕기 위해 제공하는 캡쳐화면이며 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
8. Part 3 마무리 및 다음 편 예고
이번 Part 3에서는 쇼핑몰의 핵심인 상품 리스트와 상품 카드 UI를
Cursor AI로 구현하는 과정을 실무 기준으로 안내해드렸습니다.
이 파트에서 배운 핵심은 다음과 같습니다.
- 반응형 그리드 구성의 실무적 의미
- 상품 카드 UI 구조
- 접근성(ALT 문구)의 중요성
- 코드 발췌 중심 + GitHub 연결 전략
- 초보자도 이해할 수 있는 CSS 레이아웃 개념
다음 Part 4에서는 쇼핑몰 기능에서 빠질 수 없는
검색 기능
필터 기능(카테고리/가격)
페이징(Pagination)
이 세 가지 기능을 Cursor AI로 구현해보겠습니다.
실제 쇼핑몰 수준으로 점점 가까워지는 단계이니
꼭 이어서 읽어보시길 추천드립니다.
이전 편 다시보기
AI 웹 개발 : 부업용 쇼핑몰 페이지 구조 기획 (초보자·비전공자 실무 강화) | 쇼핑몰 만들기 Part 1
AI 웹 개발 : Cursor로 반응형 쇼핑몰 페이지 구현하기 (초보자·비전공자 실무 강화) | 쇼핑몰 만들기 Part 2
AI 코딩 시리즈 다시보기
[HTML/CSS 입문] AI로 로그인 페이지 만들어보기 (GPT vs Cursor vs AntiGravity) | Part 1
[HTML/CSS 입문] AI로 반응형 로그인 페이지 개선하기 (GPT vs Cursor vs AntiGravity) | Part 2
[HTML/CSS 입문] AI로 반응형 로그인 페이지 확장하기 (GPT vs Cursor vs AntiGravity) | Part 3
[HTML/CSS 입문] AI로 로그인 페이지 레이아웃(탭 메뉴) 만들어보기(GPT vs Cursor vs AntiGravity) | Part 4
[HTML/CSS 입문] AI로 반응형 UI 만들어보기 (GPT vs Cursor vs AntiGravity) – Part 5
[HTML/CSS 입문] AI로 만드는 헤더·푸터·레이아웃 비교(Gpt vs Cursor vs AntiGravity) | Part 6
[HTML/CSS 입문] AI로 로그인 이후 ‘대시보드 UI’ 만들기 (GPT vs Cursor vs AntiGravity) | Part 7
[HTML/CSS 입문] AI로 대시보드 차트 UI 만들기(GPT vs Cursor vs AntiGravity) | Part 8
[HTML/CSS 입문] AI로 실시간 데이터·검색/필터·테이블/페이징 UI 만들기 (GPT vs Cursor vs AntiGravity) | Part 9
[HTML/CSS/JS 입문] AI로 만드는 ‘완성형 실무 대시보드’ (GPT vs Cursor vs AntiGravity) | Part 10