728x90
디자인만 예쁘면 끝일까요?
쇼핑몰이나 브랜드 웹사이트에서는 디자인이 ‘구현’되어야 진짜 결과입니다.
특히 상세페이지는 모바일 최적화, 가독성, 구조적 마크업까지 고려해야 하기에
퍼블리싱 실력이 곧 디자이너의 역량으로 연결됩니다.
이 글에서는 실제 상세페이지 시안을 가지고,
HTML/CSS로 직접 구현하는 과정을 단계별로 알려드립니다.
🎯 실습 목표
- Figma로 디자인한 상세페이지 시안을
- HTML + CSS로 반응형 상세페이지로 완성
- 제품 설명 / 이미지 / CTA 구성 등 실무에 가까운 구조로 구현
🖼️ 예제 시안 구성
화장품 상세페이지 시안 (예시):
- 상단 비주얼 배너
- 제품 요약정보 (이름, 간단한 특징)
- 성분/특징 설명 섹션
- 사용방법 안내
- CTA(구매버튼) + 가격 정보
- 푸터
🧱 Step 1. HTML 기본 구조 설정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>상세페이지 퍼블리싱 실습</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="hero">
<img src="main-banner.jpg" alt="제품 메인 이미지" />
</section>
<section class="summary">
<h1>클린뷰티 올인원 토너</h1>
<p>민감성 피부도 걱정 없이! 진정 + 보습 + 각질 케어</p>
</section>
<section class="features">
<h2>주요 성분 & 효과</h2>
<ul>
<li>센텔라 아시아티카 추출물 65%</li>
<li>히알루론산 복합체</li>
<li>무향, 무색소, 저자극 인증</li>
</ul>
</section>
<section class="how-to">
<h2>사용 방법</h2>
<p>세안 후 화장솜에 덜어 피부결 방향으로 부드럽게 닦아냅니다.</p>
</section>
<section class="cta">
<p class="price">정가 29,000원 → <strong>19,000원</strong></p>
<button class="buy-btn">지금 구매하기</button>
</section>
<footer>
<p>ⓒ 2025 CleanBeauty. All Rights Reserved.</p>
</footer>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>상세페이지 퍼블리싱 실습</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="hero">
<img src="main-banner.jpg" alt="제품 메인 이미지" />
</section>
<section class="summary">
<h1>클린뷰티 올인원 토너</h1>
<p>민감성 피부도 걱정 없이! 진정 + 보습 + 각질 케어</p>
</section>
<section class="features">
<h2>주요 성분 & 효과</h2>
<ul>
<li>센텔라 아시아티카 추출물 65%</li>
<li>히알루론산 복합체</li>
<li>무향, 무색소, 저자극 인증</li>
</ul>
</section>
<section class="how-to">
<h2>사용 방법</h2>
<p>세안 후 화장솜에 덜어 피부결 방향으로 부드럽게 닦아냅니다.</p>
</section>
<section class="cta">
<p class="price">정가 29,000원 → <strong>19,000원</strong></p>
<button class="buy-btn">지금 구매하기</button>
</section>
<footer>
<p>ⓒ 2025 CleanBeauty. All Rights Reserved.</p>
</footer>
</body>
</html>
🎨 Step 2. CSS 스타일링 (style.css)
css
body {
font-family: 'Pretendard', sans-serif;
margin: 0;
color: #333;
background-color: #fefefe;
}
section {
padding: 2rem 1.5rem;
}
.hero img {
width: 100%;
display: block;
}
.summary h1 {
font-size: 1.8rem;
margin-bottom: 0.5rem;
}
.summary p {
font-size: 1.1rem;
color: #777;
}
.features h2,
.how-to h2 {
font-size: 1.3rem;
margin-bottom: 0.8rem;
}
.features ul {
list-style: disc;
padding-left: 1.2rem;
}
.cta {
background-color: #f0f8ff;
text-align: center;
padding: 2rem 1rem;
}
.cta .price {
font-size: 1.4rem;
margin-bottom: 1rem;
}
.buy-btn {
background-color: #007aff;
color: #fff;
padding: 0.8rem 2rem;
font-size: 1rem;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s;
}
.buy-btn:hover {
background-color: #005dc1;
}
footer {
text-align: center;
font-size: 0.9rem;
color: #aaa;
padding: 1rem 0;
}
font-family: 'Pretendard', sans-serif;
margin: 0;
color: #333;
background-color: #fefefe;
}
section {
padding: 2rem 1.5rem;
}
.hero img {
width: 100%;
display: block;
}
.summary h1 {
font-size: 1.8rem;
margin-bottom: 0.5rem;
}
.summary p {
font-size: 1.1rem;
color: #777;
}
.features h2,
.how-to h2 {
font-size: 1.3rem;
margin-bottom: 0.8rem;
}
.features ul {
list-style: disc;
padding-left: 1.2rem;
}
.cta {
background-color: #f0f8ff;
text-align: center;
padding: 2rem 1rem;
}
.cta .price {
font-size: 1.4rem;
margin-bottom: 1rem;
}
.buy-btn {
background-color: #007aff;
color: #fff;
padding: 0.8rem 2rem;
font-size: 1rem;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s;
}
.buy-btn:hover {
background-color: #005dc1;
}
footer {
text-align: center;
font-size: 0.9rem;
color: #aaa;
padding: 1rem 0;
}
📱 Step 3. 반응형 대응 추가
css
@media (max-width: 600px) {
.summary h1 {
font-size: 1.4rem;
}
.buy-btn {
width: 100%;
font-size: 1rem;
}
.features ul {
padding-left: 1rem;
}
}
.summary h1 {
font-size: 1.4rem;
}
.buy-btn {
width: 100%;
font-size: 1rem;
}
.features ul {
padding-left: 1rem;
}
}
🧪 실전 팁 – 실제 프로젝트에서 자주 쓰이는 기능
기능설명
| Lazy Load | 이미지에 loading="lazy" 속성 추가로 최적화 |
| Skeleton UI | 로딩 전 상태 표현 가능 |
| Scroll Animation | AOS 라이브러리 적용해도 좋음 |
| CSS 변수 사용 | 컬러, 여백 반복 요소 변수화 (예: --main-color) |
💡 디자이너 실습 팁
- Figma에서 컴포넌트별 간격, 컬러, 텍스트 스타일 확인
- 실제 코딩 전에 와이어프레임처럼 HTML만 먼저 작성해 보기
- 퍼블리싱 후 시안과 브라우저를 나란히 놓고 비교 확인
- 모바일에서의 간격/폰트 크기도 반드시 테스트!
🧭 마무리하며
상세페이지 퍼블리싱은 디자인 감각 + 구조화 능력 + 코드 이해력이 모두 필요한 작업입니다.
그러나 어렵게 생각하지 마세요.
한 섹션씩 쪼개고, HTML → CSS 순서로 쌓아가는 구조적 훈련만 하면 누구나 가능해집니다.
이 실습을 기반으로,
- 다단 구조
- 탭 인터페이스
- 쇼핑몰 상세페이지 모작
등으로 확장해보세요.
코드를 이해하는 디자이너가 진짜 실무형 디자이너입니다.
728x90
'★공유하는_디자인정보 > 디자인_퍼블리싱' 카테고리의 다른 글
| "디자이너를 위한 HTML/CSS 핵심 요약표 | 퍼블리싱 이해가 쉬워지는 기초 가이드" (0) | 2025.05.24 |
|---|