[디자인블럭] he20 : 쿠폰 – 혜택을 눈에 띄게! 구매 전환을 빠르게!

 

 

 

 

 

✅ [디자인블럭] he20 : 쿠폰 – 혜택을 눈에 띄게! 구매 전환을 빠르게!

 

 

 

 

 

🔠 블럭개요

회원 가입 후 즉시 사용 가능한 쿠폰과 적립금을 시각적으로 강조하여 혜택 중심의 구매 유도를 극대화하는 블럭입니다. 쿠폰 디자인 형식으로 직관성과 주목도를 높이며, 금액 조건별 다양한 쿠폰을 한눈에 보여주는 구성입니다.

 

 

 

 

 

📌 사용목적

• 신규 고객 회원가입 유도
• 구매 전 장바구니 유입 및 결제율 향상
• 할인 혜택 강조로 빠른 전환 유도
• 적립금 등 비구매 혜택 노출로 만족도 증대

 

 

 

 

 

🎨 디자인 특징

• 실물 쿠폰을 연상시키는 컬러 티켓형 디자인
• 쿠폰 금액 중심의 타이포 강조 – 시각적 임팩트 강화
• 금액별 조건 명확하게 구분 – 구매 유도 전략 최적화
• 카드형 4분할 레이아웃 – 각 쿠폰별 혜택 한눈에 확인 가능
• 중앙 배치된 타이틀로 혜택 메시지를 단번에 전달
• 반응형 구성 – 모바일에서도 2단 카드로 자연스럽게 정렬

 

 

 

 

 

❄️ 활용 예시

• 식품 브랜드 / 프리미엄 식자재몰
“회원 가입만 했는데 5천원 할인 쿠폰이 바로 발급돼서 만족스러웠어요.”
“20만원 이상 구매 예정이라 1만원 쿠폰으로 알뜰하게 장 봤어요.”
→ 객단가가 높은 제품군에서 매우 유용, 단계별 쿠폰으로 추가 구매 유도

 

• 뷰티 브랜드 / 스킨케어 쇼핑몰
“가입하자마자 적립금 3천원 들어와서 당장 클렌저부터 담았어요.”
“쿠폰 조건이 명확하게 나와 있어 장바구니 조절하기 좋았어요.”
→ 신규 진입 장벽 낮추고, 구매 유도 포인트로 활용 가능

 

• 생활용품 / 리빙 브랜드
“5만원 이상 구매 쿠폰 보고, 주방세트까지 같이 주문했어요.”
“디자인이 눈에 띄어서 바로 클릭했어요. 할인 폭도 꽤 괜찮네요.”
→ 생활잡화, 세트 구성 등 묶음 상품 유도에 효과적

 

• 전자기기 / 스마트기기 쇼핑몰
“고가 제품 구매 전 마지막 한 번 더 고민할 때, 쿠폰이 구매 결정을 도와줘요.”
“20만원 이상 쿠폰은 특히 VIP 대상에게 매력적인 혜택 같아요.”
→ 고가 제품 판매 시 결제 직전 전환율을 높이는 전략으로 활용

 

• 교육 / 키즈 콘텐츠 브랜드
“강의 구매 전 쿠폰 조건이 한눈에 보여서 부모 입장에서 편리했어요.”
“적립금까지 바로 들어와서 다음 구매에도 유용하겠더라고요.”
→ 학습자료, 온라인 강의 등 반복구매 유도에 최적화

 

 

 

 

 

📢 마케팅 콘텐츠 확장 예시

• 쇼핑몰 메인 팝업
회원가입 혜택을 이미지 팝업으로 띄워, 첫 방문 고객에게 강력한 CTA 유도

 

• SNS 광고 배너
"지금 가입하면 10,000원 쿠폰 지급!" 식으로 쿠폰 디자인 활용한 광고 콘텐츠 제작

 

• 이메일 마케팅
신규 가입 고객에게 쿠폰 이미지 포함 뉴스레터 발송

 

• 블로그 및 상세페이지 혜택 섹션
혜택 안내 영역에 본 블럭을 삽입해 시각적 포인트 강조

 

• 이벤트 페이지 연동
회원가입 후 쿠폰 자동 발급 프로세스 안내 시 본 블럭 활용하여 UX 개선

 

 

 

 

 

💻 HTML 설명

기본 구조
– .row > .col-* 구조로 4개의 쿠폰 카드 구성
– 상단에는 .titArea로 타이틀 메시지 및 해시태그 강조

 

쿠폰 카드 구조 (.box_inner)
– .txtArea : 쿠폰 유형(sub), 금액(title), 조건(etc) 정보를 절대 좌표로 가운데 배치
– .imgArea : 실물 쿠폰을 연상시키는 배경 이미지 삽입

 

스타일 요소
– .title 금액 텍스트에 형광 노랑(#d2e900) 컬러 적용으로 시선 집중
– 쿠폰 바코드, 코드 등 실제 쿠폰 이미지 느낌 강조
– .txtArea 텍스트는 모두 white 컬러로 이미지 위에서도 가독성 유지

 

반응형 구성
– 모바일 기준으로는 2단 카드 배치
– 텍스트 크기 축소(font-size: 0.750em)로 모바일 최적화

 

 

 

 

👉 커스터마이징 팁

• 금액 조건 수정 – 3천원, 7천원, 15천원 등 다양한 가격 정책으로 조정 가능
• 쿠폰 유형 변경 – 생일 쿠폰, 재구매 쿠폰, 리뷰 작성 쿠폰 등 다양한 형태로 응용
• 디자인 교체 – 브랜드 컬러와 일치하는 쿠폰 배경 이미지 사용 가능
• 기간 한정 효과 – 타이틀 위에 "이번 주만!" 등의 배너 삽입으로 긴급성 부여
• 쿠폰 자동 발급 연동 – 쇼핑몰 플랫폼에 맞춰 발급 시스템 연결 시 더욱 효과적

 

 

 

 

 

html

<!-- he20 : 쿠폰 -->
<div class="he20">
  <div class="row">


    <!-- 타이틀 영역 -->
    <div class="col-12">
      <div class="titArea">
        <h3 class="title">
          바로 사용 가능한<br>
          특별 쿠폰 혜택!
        </h3>
        <p>
          #회원전용 #즉시할인 #혜택챙기기
        </p>
      </div>
    </div>


    <!-- 카드 1 -->
    <div class="col-12 col-md-6 col-lg-4">
      <div class="box">
        <div class="box_inner">
          <div class="txtArea">
            <p class="sub">회원가입 감사 쿠폰</p>
            <p class="title">10,000원</p>
            <p class="etc">20만원 이상 구매시</p>
          </div>
          <div class="imgArea">
            <div class="imgWrap">
              <img src="{{$template}}/img/_hes/he20/he20_icn01.png" alt="쿠폰 이미지 1">
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 2 -->
    <div class="col-12 col-md-6 col-lg-4">
      <div class="box">
        <div class="box_inner">
          <div class="txtArea">
            <p class="sub">회원가입 감사 쿠폰</p>
            <p class="title">5,000원</p>
            <p class="etc">10만원 이상 구매시</p>
          </div>
          <div class="imgArea">
            <div class="imgWrap">
              <img src="{{$template}}/img/_hes/he20/he20_icn02.png" alt="쿠폰 이미지 1">
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 3 -->
    <div class="col-12 col-md-6 col-lg-4">
      <div class="box">
        <div class="box_inner">
          <div class="txtArea">
            <p class="sub">회원가입 감사 쿠폰</p>
            <p class="title">2,000원</p>
            <p class="etc">5만원 이상 구매시</p>
          </div>
          <div class="imgArea">
            <div class="imgWrap">
              <img src="{{$template}}/img/_hes/he20/he20_icn03.png" alt="쿠폰 이미지 1">
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 4 -->
    <div class="col-12 col-md-6 col-lg-4">
      <div class="box">
        <div class="box_inner">
          <div class="txtArea">
            <p class="sub">적립금</p>
            <p class="title">3,000원</p>
            <p class="etc"> </p>
          </div>
          <div class="imgArea">
            <div class="imgWrap">
              <img src="{{$template}}/img/_hes/he20/he20_icn04.png" alt="쿠폰 이미지 1">
            </div>
          </div>
        </div>
      </div>
    </div>


  </div>
</div>

 

 

 

 

 

 

css

/*****************************************************************
he20 : 쿠폰
*****************************************************************/
.he20 {
    padding: 0px 0;
}

.he20 .row {
    padding: 50px 10px;
    background-color: #fff;
}

.he20 .row>div {
    padding: 5px;
}

.he20 .box {
    position: relative;
    overflow: hidden;
}

.he20 .box_inner {
    position: relative;
    width: 100%;
}

/* 타이틀 영역 */
.he20 .titArea {
    margin: 20px 0;
    text-align: center;
}

.he20 .titArea .title {
    font-weight: 700;
    font-size: 3.0em;
}

.he20 .titArea p {
    font-weight: 500;
    font-size: 1.50em;
    color: #666;
}

/* 텍스트 영역 */
.he20 .txtArea {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% - 10%), -50%);
    width: 100%;
    padding: 20px 10px;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    z-index: 2;
}

.he20 .txtArea .sub {
    margin-top: 5px;
    font-weight: 700;
    font-size: 1.5em;
    color: #fff;
}

.he20 .txtArea .title {
    font-size: 3.5em;
    font-weight: 700;
    color: #d2e900;
}

.he20 .txtArea .etc {
    margin-top: 5px;
    font-weight: 500;
    font-size: 1.250em;
    color: #fff;
}

/* 이미지 영역 */
.he20 .imgArea {}

.he20 .imgArea img {
    width: 100%;
}

/* 반응형 여백 조정 */
@media screen and (min-width: 768px) {
    .he20 .txtArea {
        font-size: 0.750em;
    }
}