CSS만으로 쿠폰 디자인 만드는 방법 완벽 가이드

웹 페이지에서 쿠폰이나 프로모션 카드를 만들 때 별도의 이미지 편집 도구 없이 CSS만으로도 충분히 세련된 디자인을 구현할 수 있습니다. 이 글에서는 점선 테두리, 둥근 모서리, 프로모션 코드 강조 등 쿠폰 특유의 디자인 요소를 CSS로 구현하는 방법을 단계별로 살펴보겠습니다.

CSS 쿠폰 예제 코드

아래는 HTML과 CSS를 활용해 실제 쿠폰 형태의 UI를 만드는 전체 코드입니다.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    img {
        width: 100%;
    }
    .couponContainer {
        border: 5px dashed #bbb;
        width: 80%;
        border-radius: 15px;
        margin: 0 auto;
        max-width: 600px;
    }
    .detailContainer {
        padding: 2px 16px;
        background-color: #d4d4d4;
    }
    .promo {
        background: rgb(104, 104, 104);
        color: white;
        padding: 10px;
    }
    .expiryDate {
        color: red;
        font-weight: bold;
    }
</style>
</head>
<body>
<div class="couponContainer">
<div class="detailContainer">
<h3>Food Inc &copy;</h3>
</div>
<img src="https://images.pexels.com/photos/376464/pexels-photo-376464.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<div class="detailContainer" style="background-color:white">
<h2>Worlds Best Pancakes</h2>
</div>
<div class="detailContainer">
<p>
Use code <span class="promo">Free24</span> to get 24% off on your next dish
</p>
<p class="expiryDate">Expires in 20 days</p>
</div>
</div>
</body>
</html>

핵심 CSS 속성 설명

1. 점선 테두리로 쿠폰 느낌 연출

border: 5px dashed #bbb; 속성은 실제 종이 쿠폰처럼 잘라내는 선을 표현합니다. 점선(dashed) 스타일은 쿠폰 디자인에서 가장 널리 사용되는 요소입니다.

2. 둥근 모서리 처리

border-radius: 15px;를 적용하면 쿠폰 모서리가 부드럽게 처리되어 전체적인 디자인이 한층 세련되어 보입니다.

3. 반응형 크기 조절

width: 80%와 max-width: 600px를 함께 사용하면 화면 크기에 따라 유연하게 조절되면서도 너무 커지지 않도록 제한할 수 있습니다. 또한 margin: 0 auto;로 쿠폰을 화면 중앙에 정렬했습니다.

4. 프로모션 코드 강조

.promo 클래스는 어두운 배경색과 흰색 텍스트, 여백(padding)을 조합하여 할인 코드가 눈에 잘 띄도록 만듭니다. 사용자가 코드를 쉽게 인식하고 복사할 수 있게 하는 중요한 UX 요소입니다.

5. 만료일 강조

.expiryDate 클래스는 빨간색과 굵은 글씨체를 사용해 마감 기한의 긴급함을 시각적으로 전달합니다.

실행 결과

위 코드를 실행하면 다음과 같은 쿠폰이 화면에 출력됩니다. 상단에는 회사명이 배치되고, 그 아래 대표 이미지와 상품 이름이 표시되며, 하단에는 할인 코드와 만료일이 강조된 형태로 나타납니다.

상단: 회사 로고 및 브랜드명 영역
중앙: 상품을 보여주는 이미지와 상품명
하단: 할인 코드(Free24)와 만료 안내 문구

마무리

이처럼 CSS의 dashed 테두리, border-radius, 배경색 조합만으로도 이미지 편집 없이 매력적인 쿠폰 UI를 만들 수 있습니다. 색상과 폰트를 브랜드에 맞게 변경하거나, 호버(hover) 효과를 추가하면 더욱 인터랙티브한 쿠폰 디자인으로 확장할 수 있습니다.