[디자인블럭] he28 : CTA 행동유도 – 지금 사야 하는 이유, 단 10초 만에 설득!

 

 

 

 

 

 

✅ [디자인블럭] he28 : CTA 행동유도 – 지금 사야 하는 이유, 단 10초 만에 설득!

 

 

 

 

 

🔠 블럭개요

강력한 문구와 감성적인 이미지가 결합된 CTA(Call to Action) 유도 블럭입니다. 구매 망설임을 줄이고, 즉시 행동을 유도하는 직관적인 레이아웃으로, 전환율을 높이기 위한 핵심 장치로 활용됩니다.

 

 

 

 

 

📌 사용목적

• 제품 구매 유도, 장바구니 추가 등 즉각적인 행동 유도
• 긴박감 및 한정성 강조로 ‘지금 사야 하는 이유’ 전달
• 반복되는 행동 메시지를 통해 무의식적 설득 유도
• 고객 감성과 FOMO(놓치면 안 될 두려움)를 자극

 

 

 

 

 

🎨 디자인 특징

• 이미지 + 텍스트 반반 배치의 안정적인 좌우 구조
• .reverse 클래스 활용으로 교차형 레이아웃 적용
• 헤드라인은 배경 포함된 버튼형 스타일로 시선 집중
• 하단 문구는 굵은 폰트와 짧은 문장으로 행동 유도 최적화
• 총 10개 카드로 다양한 심리 키워드 대응
• 모바일에서도 가독성 높은 세로 스택 구조로 자동 정렬

 

 

 

 

 

❄️ 활용 예시

• 뷰티 브랜드 / 스킨케어 신제품
“피부가 반응해요, 당신의 피부가 기다려온 단 하나”
“3일만 써보면 이유를 알게 돼요 – 진짜가 나타났다”
→ 효능 중심의 제품 특성을 빠르게 설득하는 데 효과적

 

• 건강식품 / 이너뷰티 브랜드
“하루만 지나도 품절될 수 있어요 – 내일은 늦어요”
“놓치면 평생 후회할지도 몰라요 – 지금이 마지막”
→ 긴급성과 한정성을 통해 빠른 클릭 유도 가능

 

• 전자기기 / 뷰티디바이스
“피부가 변할 기회는 지금뿐입니다 – 놓치면 후회!”
“오늘 주문하면 내일 광채 납니다 – 내일이 달라져요”
→ 배송 리드타임과 기능성을 강조해 기대감 고조

 

• 패션 / 시즌 한정 아이템
“한정 수량, 지금 아니면 끝입니다 – 마지막 찬스”
“10만명이 선택한 수분폭탄, 지금”
→ 사회적 증거 + 한정성 결합 전략에 적합

 

• 교육 / 콘텐츠 브랜드
“망설인 그 순간이 결과에 남습니다 – 망설이지 마세요”
“진심이라면 지금 시작하세요 – 피부에 진심이라면”
→ 타깃 고객의 결심을 돕는 마무리 유도용 문구로 효과적

 

 

 

 

 

📢 마케팅 콘텐츠 확장 예시

• SNS 광고 카드 시리즈
10개 문구를 활용한 슬라이드 광고 시리즈 구성 → 클릭율 상승

 

• 랜딩페이지 마감 카운트존
구매 버튼 상단에 CTA 블럭 배치 → 전환율 극대화

 

• 이메일 배너 CTA
“오늘이 마지막 기회!”라는 문구로 시각적 집중 유도

 

• 스마트스토어 상세페이지 말미
제품 소개 후 하단에 행동 유도 CTA 배치 → 구매 결정 도달

 

• 팝업 배너 활용
진입 시 “지금이 마지막 기회” 이미지 팝업으로 행동 촉구

 

 

 

 

 

💻 HTML 설명

기본 구조
– .row > .col-* 구조로 10개 카드 개별 박스 구성
– .box_inner 내부에 이미지와 텍스트가 반반 배치된 형태

 

교차 레이아웃 적용
– .reverse 클래스가 포함된 카드들은 flex-direction: row-reverse 설정
– 시각적 리듬감과 집중도 향상

 

텍스트 구성
– h4 : 감성 문구 + 배경 포함된 CTA 버튼형 스타일
– .desc : 굵은 강조 문구로 구체적 행동 유도

 

디자인 요소
– 텍스트 부분은 중앙 정렬 + border 처리로 영역 구분
– 이미지 부분은 50% width 고정 + 반응형 처리
– 전체 카드별 구성 반복 가능

 

반응형 구성
– 모바일 환경에서는 세로 정렬로 자동 변환
– .box_inner.reverse 설정도 모바일에서 순서 재정렬 유지

 

 

 

 

 

👉 커스터마이징 팁

• 문구 교체 – 제품 특성에 맞는 공감형 또는 위기감 조성형 문구로 대체 가능
• 개수 조절 – 4~6개 카드만 사용해도 충분한 임팩트 가능
• 텍스트 강조 – 특정 단어를 <strong> 처리해 가독성 상승
• 이미지 변경 – 사용자의 실제 모습이나 제품 연출 컷으로 신뢰감 강화
• 버튼 연결 – 텍스트 영역에 CTA 버튼 추가로 실질 클릭 유도 가능

 

 

 

 

 

 

html

<!-- he28 : CTA 행동유도 블럭 -->
<div class="he28">
  <div class="row">


    <!-- 카드 1 -->
    <div class="col-12 col-sm-12 col-md-12 col-lg-6">
      <div class="box">
        <div class="box_inner">
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he28/he28_img01.jpg" alt="제품을 들고 있는 손">
          </div>
          <div class="txtArea">
            <h4>놓치면 후회!</h4>
            <p class="desc">
              피부가 변할 기회는<br>
              지금뿐입니다
            </p>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 2 -->
    <div class="col-12 col-sm-12 col-md-12 col-lg-6">
      <div class="box">
        <div class="box_inner reverse">
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he28/he28_img02.jpg" alt="얼굴에 제품 바르는 모습">
          </div>
          <div class="txtArea">
            <h4>내일은 늦어요</h4>
            <p class="desc">
              하루만 지나도<br>
              품절될 수 있어요
            </p>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 3 -->
    <div class="col-12 col-sm-12 col-md-12 col-lg-6">
      <div class="box">
        <div class="box_inner">
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he28/he28_img03.jpg" alt="예시 이미지">
          </div>
          <div class="txtArea">
            <h4>피부가 반응해요</h4>
            <p class="desc">
              당신의 피부가<br>
              기다려온 단 하나
            </p>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 4 -->
    <div class="col-12 col-sm-12 col-md-12 col-lg-6">
      <div class="box">
        <div class="box_inner reverse">
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he28/he28_img04.jpg" alt="예시 이미지">
          </div>
          <div class="txtArea">
            <h4>망설이지 마세요</h4>
            <p class="desc">
              망설인 그 순간이<br>
              피부에 남습니다
            </p>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 5 -->
    <div class="col-12 col-sm-12 col-md-12 col-lg-6">
      <div class="box">
        <div class="box_inner">
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he28/he28_img05.jpg" alt="예시 이미지">
          </div>
          <div class="txtArea">
            <h4>진짜가 나타났다</h4>
            <p class="desc">
              3일만 써보면<br>
              이유를 알게 돼요
            </p>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 6 -->
    <div class="col-12 col-sm-12 col-md-12 col-lg-6">
      <div class="box">
        <div class="box_inner reverse">
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he28/he28_img06.jpg" alt="예시 이미지">
          </div>
          <div class="txtArea">
            <h4>내일이 달라져요</h4>
            <p class="desc">
              오늘 주문하면<br>
              내일 광채 납니다
            </p>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 7 -->
    <div class="col-12 col-sm-12 col-md-12 col-lg-6">
      <div class="box">
        <div class="box_inner">
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he28/he28_img07.jpg" alt="예시 이미지">
          </div>
          <div class="txtArea">
            <h4>지금이 마지막</h4>
            <p class="desc">
              놓치면 평생<br>
              후회할지도 몰라요
            </p>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 8 -->
    <div class="col-12 col-sm-12 col-md-12 col-lg-6">
      <div class="box">
        <div class="box_inner reverse">
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he28/he28_img08.jpg" alt="예시 이미지">
          </div>
          <div class="txtArea">
            <h4>10만 명의 선택</h4>
            <p class="desc">
              10만명이 선택한<br>
              수분폭탄, 지금
            </p>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 9 -->
    <div class="col-12 col-sm-12 col-md-12 col-lg-6">
      <div class="box">
        <div class="box_inner">
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he28/he28_img09.jpg" alt="예시 이미지">
          </div>
          <div class="txtArea">
            <h4>마지막 찬스</h4>
            <p class="desc">
              한정 수량,<br>
              지금 아니면 끝입니다
            </p>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 10 -->
    <div class="col-12 col-sm-12 col-md-12 col-lg-6">
      <div class="box">
        <div class="box_inner reverse">
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he28/he28_img10.jpg" alt="예시 이미지">
          </div>
          <div class="txtArea">
            <h4>진심이라면 지금</h4>
            <p class="desc">
              피부에 진심이라면,<br>
              지금 시작하세요
            </p>
          </div>
        </div>
      </div>
    </div>


  </div>
</div>

 

 

 

 

 

 

css

/*****************************************************************
he28 : CTA 행동유도
*****************************************************************/
/* he28 : CTA 행동유도 블럭 */
.he28 {
    padding: 0;
    margin: 0;
}

.he28 .row {}

.he28 .row>div {
    padding: 0px;
}

.he28 .box {
    background-color: #fff;
    display: flex;
    height: 100%;
}

.he28 .box .box_inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
}

.he28 .box .box_inner.reverse {
    flex-direction: row-reverse;
}

.he28 .box .box_inner .imgArea {
    flex: 0 0 50%;
}

.he28 .box .box_inner .imgArea img {
    width: 100%;
    height: auto;
    display: block;
}

.he28 .box .box_inner .txtArea {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    /* 상하 정렬 */
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    height: 100%;
    border: 1px solid #ddd;
}

.he28 .box .box_inner .txtArea h4 {
    background-color: #94894a;
    border-radius: 5px;
    padding: 5px 10px;
    margin-bottom: 10px;
    line-height: 1.0;
    font-weight: 500;
    font-size: 1.0em;
    color: #fff;
}

.he28 .box .box_inner .txtArea .desc {
    line-height: 1.1;
    font-weight: 700;
    font-size: 1.750em;
    color: #111;
}

.he28 .box .box_inner .txtArea .desc strong {
    font-weight: 700;
    color: #000;
}

/* 반응형 처리 */
/* 짝수 카드 새 줄 강제 */
@media (min-width: 992px) {
    .he28 .box .box_inner.reverse {
        flex-direction: row;
    }

    .he28 .box .box_inner .txtArea {
        border: 1px solid #ddd;
        margin-top: 1px;
    }
}