1. 이제는 설계에서 구현으로 넘어갈 단계입니다
지난 Part 1에서 우리는 쇼핑몰 페이지가 가져야 하는 구조를 기획하고, UX 흐름과 반응형 기준점(Breakpoint)을 설정했습니다.
이 과정은 초보자나 비전공자에게 특히 중요합니다. 왜냐하면 AI가 코드를 대신 작성해준다고 해도,
‘무엇을 만들 것인가’
는 사람이 정의해야 하기 때문입니다.
이번 Part 2부터는 기획했던 페이지 구조를 Cursor를 이용해 실제 반응형 HTML·CSS 코드로 구현하는 과정을 진행합니다.
(만약 본인의 취향이 AntiGravity 라면 AntiGravity를 사용하셔도 됩니다!)
특히, 다음과 같은 분들께 실질적인 도움이 되도록 구성했습니다.
- AI로 웹페이지를 만들고 싶지만 코드가 낯선 비전공자
- 부업용 웹 제작을 하고 싶은 초급 개발자
- Cursor 사용법을 실무 흐름으로 익히고 싶은 입문자
그리고 단순히 “코드를 따라 치는 튜토리얼”이 아니라, 실무에서 어떻게 AI와 협업하며 개발을 진행하는지를 중심으로 설명합니다.
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
2. Cursor로 개발을 시작하기 전에 알아야 할 핵심 개념
초보자들이 가장 많이 어려워하는 부분은
AI가 만든 코드의 구조를 이해하지 못하는 것입니다.
따라서 본격적인 개발을 시작하기 전에
이 글에서 반복적으로 등장할 핵심 개념을 정리해드립니다.
1) HTML 구조 (구조 뼈대)
웹페이지를 이루는 기본 틀.
Header, Hero, Product Section 같은 ‘구조 박스’를 만든다고 이해하면 됩니다.
2) CSS (디자인, 배치, 크기, 간격)
HTML로 만든 박스들을 예쁘게 정렬하고 색, 크기, 여백을 정하는 역할.
3) 반응형 (Responsive Design)
화면 크기(모바일, 태블릿, 데스크톱)에 따라 배치가 자동으로 달라지는 방식.
여기에서 등장하는 것이 Breakpoint 입니다.
예:
- 767px 이하 → 모바일
- 768~1199px → 태블릿
- 1200px 이상 → 데스크톱
4) Flex / Grid (레이아웃 핵심 기술)
상품 카드처럼 여러 요소를 반복적으로 배치할 때 사용되는 CSS 기술.
Cursor가 자동으로 잘 만들어주는 부분입니다.
이 정도만 이해하면 Cursor가 어떤 코드를 생성하든
수정이 가능해지고 불필요한 두려움도 줄어듭니다.
3. Cursor에 입력할 첫 번째 프롬프트
Part 2에서는 ‘기획 단계에서 정의한 구조’를 코드로 만드는 작업에 들어갑니다.
Cursor에서 새 프로젝트를 만들고 다음 프롬프트를 입력합니다.
[프롬프트 예시 — Part 2 구현용]
부업용 반응형 쇼핑몰 페이지의 기본 레이아웃을 만들어주세요.
헤더, 히어로 배너, 상품 카드 섹션, 푸터를 포함하고,
모바일 화면을 우선으로 한 반응형 구조로 구성해주세요.
각 섹션마다 HTML 주석을 달고, CSS도 파일로 분리해주세요.
이 한 줄로 Cursor는 프로젝트 전체 구조를 이해하고
HTML/CSS 두 파일을 생성합니다.
본 이미지는 독자의 이해를 돕기 위해 직접 제공하는 이미지로 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
4. 코드 구조 해설 (초보자용 설명 포함)
이 글을 보시는 독자분들의 가독성을 위해 전체 코드는 GitHub 저장소에 올려두었습니다.
전체 코드가 필요하신 분은 제 GitHub 저장소에서 확인해 보시면 되겠습니다.
여기서는 독자에게 중요한 핵심 부분만 발췌합니다.
4-1. Header 구조
<!-- 헤더 섹션 -->
<header class="header">
<div class="header-container">
<div class="logo">
<h1>🛍️ 부업몰</h1>
</div>
<nav class="nav-menu">
<ul class="nav-list">
<li><a href="#home">홈</a></li>
<li><a href="#products">상품</a></li>
<li><a href="#about">소개</a></li>
<li><a href="#contact">문의</a></li>
</ul>
</nav>
<div class="header-icons">
<button class="icon-btn" aria-label="검색">
<span>🔍</span>
</button>
<button class="icon-btn" aria-label="장바구니">
<span>🛒</span>
<span class="cart-badge">0</span>
</button>
<button class="icon-btn menu-toggle" aria-label="메뉴">
<span>☰</span>
</button>
</div>
</div>
</header>
여기서 알아야 할 실무 포인트
- header 태그는 상단 네비게이션 영역
- logo, menu 같은 클래스 이름은 수정하기 쉬운 단위
- 메뉴가 가로로 배치되는 기준은 CSS의 flex 때문
초보자들은 종종 Header 스타일을 잡다가 전체 레이아웃이 무너지는데,
이유는 “정렬 구조가 Flex로 되어 있다는 사실”을 모르는 경우가 많습니다.
4-2. Hero Section 구조
<!-- 히어로 배너 섹션 -->
<section class="hero-banner">
<div class="hero-content">
<h2 class="hero-title">특별한 상품을 만나보세요</h2>
<p class="hero-subtitle">최고의 품질과 합리적인 가격으로 여러분을 찾아갑니다</p>
<button class="cta-button">지금 쇼핑하기</button>
</div>
</section>
실무 포인트
- Hero는 브랜드 메시지를 주는 핵심 섹션
- CTA 버튼(Call To Action)은 클릭 유도 요소
- 이미지 배경은 CSS
background-image로 처리하는 방식이 깔끔함
4-3. Product Card 구조(일부 발췌)
<!-- 상품 카드 6 -->
<div class="product-card">
<div class="product-image">
<img src="https://via.placeholder.com/300x300?text=상품6" alt="상품 이미지">
<span class="badge sale">SALE</span>
</div>
<div class="product-info">
<h3 class="product-name">프리미엄 상품 6</h3>
<p class="product-description">합리적인 가격의 추천 상품</p>
<div class="product-price">
<span class="price">₩22,900</span>
<span class="original-price">₩32,900</span>
</div>
<button class="add-to-cart">장바구니 담기</button>
</div>
</div>
여기서 ALT 문구가 중요한 이유
SEO(검색 엔진 최적화)를 위한 기본 요소입니다.
이미지 설명을 넣지 않으면 검색 노출·접근성 모두 떨어집니다.
ALT 문구 잘 쓰는 법
- “하얀색 운동화”
- “여름용 반팔 티셔츠”
이런 식으로 실제 상품을 설명하는 형태가 좋습니다.
5. 반응형 구조는 어떻게 구성되는가 (실무 기준 )
다음은 Cursor가 생성한 CSS 코드입니다(일부발췌)
/* ============================================
데스크톱 반응형 (1024px 이상)
============================================ */
@media (min-width: 1024px) {
.products-grid {
grid-template-columns: repeat(3, 1fr);
}
.hero-banner {
padding: 6rem 1rem;
}
.products-section {
padding: 4rem 1rem;
}
}
초보자를 위한 쉬운 요약
- 모바일은 기본값 (1열)
- 태블릿은 2열
- 데스크톱은 4열
이런 식으로 Grid의 열 개수를 바꾸는 것 만으로도 깔끔한 반응형이 완성됩니다.
본 이미지는 독자의 이해를 돕기 위해 직접 제공하는 이미지로 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
6. 실무에서는 이 점을 놓치면 안 됩니다
아래 내용은 비개발자가 부업으로 페이지를 만들거나 초보 개발자가 실무에 들어갔을 때
가장 문제가 되는 부분들입니다.
1) 클래스 이름은 유지보수에 가장 중요한 요소
AI가 만든 클래스 이름이 마음에 안 든다고
함부로 바꾸기 시작하면 전체 스타일이 꼬입니다.
2) 동일한 요소는 컴포넌트화하기
상품 카드처럼 반복되는 요소는
AI에게 “컴포넌트로 만들어줘”라고 요청하면
나중에 유지보수가 훨씬 쉬워집니다.
3) 이미지, 텍스트, 여백은 기획 단계대로 유지하기
AI는 구조는 잘 잡지만 여백·정렬이 과하거나 부족한 경우가 많습니다.
이럴 때는 “padding을 16px로 줄여줘”처럼 요청하면 바로 수정됩니다.
7. 전체 파일 구조 GitHub 에서 확인하기.
독자 분들의 가독성을 위해 전체 코드는 GitHub에 업로드 해두었습니다.
- shop.html
- shop.css
본 포스팅에는 코드 전체를 올리지 않고,
읽기 편하게 핵심 부분만 발췌했습니다.
전체 구성·폴더 구조·완성본은 GitHub에서 확인하실 수 있습니다.
[GitHub 전체 코드 보기]
제로의 깃허브 저장소 바로가기
8. 마무리 및 다음 편 예고
Part 2에서는 기획한 구조를 실제 코드로 구현하는 과정을 Cursor와 함께 진행했습니다.
반응형의 기본 틀을 만들었다면, 다음 단계는 세부 완성도입니다.
Part 3에서는 아래 내용을 다룹니다.
- 모바일 → 데스크톱 순서대로 폴리싱
- Hover 효과, 간격, 폰트, 애니메이션
- 실무에서 많이 쓰는 반응형 패턴
- Cursor에 수정 요청하는 베스트 프롬프트
이제 기본 레이아웃이 완성되었으니, 다음 단계로 넘어갈 준비가 되었습니다.
다음 편에서 만나요!
이전 편 다시보기
AI 웹 개발 : 부업용 쇼핑몰 페이지 구조 기획 (초보자·비전공자 실무 강화) | 쇼핑몰 만들기 Part 1
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