[디자인블럭] he10 : 문제제기 - 불신을 전환하는 소비자 경각심 유도형 카드 블럭

1단형

 

 

 

 

2x2단형

 

 

 

 

3단형

 

 

 

 

✅ [디자인블럭] he10 : 문제제기 - 불신을 전환하는 소비자 경각심 유도형 카드 블럭

 

 

📌 블럭 개요

 

he10은 제품 구매 전 소비자가 느낄 수 있는 의심·불신·오해 등의 감정을 먼저 끌어내는 문제제기용 블럭입니다.
각 카드에는 강렬한 문구, 설명, 시각적 이미지가 결합되어 있으며, 소비자의 주의를 환기시키고 이후의 신뢰·해결 콘텐츠로의 전환을 유도하는 데 효과적입니다.
카드 수량에 따라 1단~4단까지 자유롭게 확장 가능한 구조로 설계되어 있어 범용성이 뛰어납니다.

---

 

 

🎯 사용 목적

• 고객의 구매 전 심리에서 발생하는 불안 요인을 선제적으로 제시하고, 이어질 해결 콘텐츠와 자연스럽게 연결
• 경쟁 제품과 비교했을 때의 차별점 또는 문제점을 시각적으로 강조
• 소비자의 실망, 후회, 피해 사례 등을 스토리텔링 형식으로 풀어낼 수 있음
• 의심 → 공감 → 신뢰 → 구매 유도라는 전환 구조 내 서두 영역에 적합

---

 

 

🧩 디자인 특징

• 문제 상황을 카드형 콘텐츠로 구성해 한눈에 주요 이슈를 확인 가능
• 각 카드에는 check 번호, 강조 제목(h4), 경고 문구 포함 설명 텍스트, 배경 이미지 + 오버레이가 포함됨
• 텍스트와 이미지가 명확히 분리되어 있어 가독성과 메시지 집중력이 높음
• .step 클래스에는 강렬한 색상의 배지 스타일이 적용되어 강조 효과
• .imgArea 위에 .overlay-img를 덧씌우는 방식으로 시각 효과와 몰입감을 동시에 전달
• 카드 수에 따라 1단, 2단, 3단, 4단까지 자유 구성 가능하며, 모바일에서는 자동 1단 배치로 전환

---

 

 

📱 활용 예시

• 식품:
  “국산 둔갑”, “신선도 문제”, “냄새 문제”, “원산지 표기 오류” 등 실제 소비자 불만을 시각화
• 전자기기:
  “배터리 과장”, “실제 용량 미달”, “AS 지연”, “스펙 불일치” 등 구매 후 실망 요소 사전 제시
• 화장품/건강식품:
  “광고는 좋은데 트러블?”, “먹어도 효과 없어”, “성분이 다른데?” 같은 문제 상황 부각
• 교육 서비스/앱 플랫폼:
  “후기는 좋은데 왜 불만이 많지?”, “결제했는데 실망?”, “상담은 잘 안 되네?” 등 사용 경험 기반 접근
• 이 블럭은 소비자 심리를 건드리는 UX 전략 요소이므로,
  심리전환, 주의환기, 경쟁제품차별화 등의 추가 태그로도 확장 가능합니다.

※ 이 블럭은 단순히 ‘나쁜 사례’를 나열하는 것이 아니라,
브랜드가 이를 인지하고 해결하고자 하는 책임감 있는 메시지로 이어질 수 있도록 활용하는 것이 중요합니다.

---

 

 

💻 HTML 설명

• .he10은 전체 블럭 컨테이너이며, 내부 .row > div는 각 카드 영역을 담당
• .box_inner 안에 .txtArea와 .imgArea로 구성되어 있으며, Flexbox 기반의 세로 정렬 구조
• .txtArea: check 01, h4 제목, 설명 텍스트(desc)가 포함
• .step은 강조 배경 + 둥근 테두리 형태로 시각적 강조 효과를 줌
• .imgArea: 제품 이미지가 삽입되며, .overlay-img를 통해 강조 요소나 심볼을 겹쳐 삽입 가능
• 반응형으로 자동 그리드 정렬되며, col- 클래스 조합을 통해
  PC에서는 다단, 모바일에서는 자동 1단 배열로 유연하게 출력
• 4번째 카드는 CSS로 기본 display: none 처리되어 있으며, 주석 해제 시 즉시 노출 가능
• 카드 수 확장 시 .col- 블럭 복사로 간단히 추가 가능하고, 시각적 균형 유지

 

 

 

 

 

html

<!-- he10 : 문제제기 -->
<div class="he10">
  <div class="row">


    <!-- 카드 1 -->
    <div class="col-sm-12 col-md-12 col-lg-6 col-xl-4 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="txtArea">
            <p class="step">check 01</p>
            <h4>포장만 바꿔 국산 둔갑?</h4>
            <p class="desc">
              겉은 태극기, 속은 중국산?<br>
              <strong>눈속임 택갈이, 이젠 소비자가 피해자입니다</strong><br>
              정직한 수산물, 표기만 믿지 마세요.
            </p>
          </div>
          <div class="imgArea">
            <span><img src="{{$template}}/img/_hes/he10/he10_img01.jpg" alt="포장을 벗기면 드러나는 중국산 표시"></span>
            <span class="overlay-img">
              <img src="{{$template}}/img/_hes/he10/he10_overlay01.png" alt="오버레이 아이콘">
            </span>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 2 -->
    <div class="col-sm-12 col-md-12 col-lg-6 col-xl-4 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="txtArea">
            <p class="step">check 02</p>
            <h4>냄새부터 의심되는 생물?</h4>
            <p class="desc">
              겉은 멀쩡해도 뚜껑 열면 ‘악취’ 작렬!<br>
              <strong>신선도 놓치면, 바로 냄새부터 티납니다</strong><br>
              비린내에 식욕까지 잃기 전에 확인하세요.
            </p>
          </div>
          <div class="imgArea">
            <span><img src="{{$template}}/img/_hes/he10/he10_img02.jpg" alt="비린내 나는 문어를 본 남성의 불쾌한 표정"></span>
            <span class="overlay-img">
              <img src="{{$template}}/img/_hes/he10/he10_overlay02.png" alt="오버레이 아이콘">
            </span>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 3 -->
    <div class="col-sm-12 col-md-12 col-lg-6 col-xl-4 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="txtArea">
            <p class="step">check 03</p>
            <h4>싱싱한 줄 알았는데 물컹?</h4>
            <p class="desc">
              선명한 살결, 탄탄한 촉감이 생물의 기준!<br>
              <strong>촉감부터 탱글한지 확인해보셨나요?</strong><br>
              물컹한 수입산은 씹는 순간 티 납니다.
            </p>
          </div>
          <div class="imgArea">
            <span><img src="{{$template}}/img/_hes/he10/he10_img03.jpg" alt="물방울이 뚝뚝 떨어지는 신선한 문어"></span>
            <span class="overlay-img">
              <img src="{{$template}}/img/_hes/he10/he10_overlay03.png" alt="오버레이 아이콘">
            </span>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 4 -->
    <div class="col-sm-12 col-md-12 col-lg-6 col-xl-4 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="txtArea">
            <p class="step">check 04</p>
            <h4>정말 국내산 맞습니까?</h4>
            <p class="desc">
              마트 진열대 위 'KOREA' 표기,<br>
              <strong>하지만 생산지는 따로 확인해야 합니다</strong><br>
              신뢰 가능한 판매처, 직접 따져보세요.
            </p>
          </div>
          <div class="imgArea">
            <span><img src="{{$template}}/img/_hes/he10/he10_img04.jpg" alt="마트 진열된 문어 제품, 국내산 표기 강조"></span>
            <span class="overlay-img">
              <img src="{{$template}}/img/_hes/he10/he10_overlay04.png" alt="오버레이 아이콘">
            </span>
          </div>
        </div>
      </div>
    </div>


  </div>
</div>

 

 

 

 

 

css

/*****************************************************************
he10 : 문제제기
*****************************************************************/
.he10 {
    padding: 0;
}

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

.he10 .box {
    overflow: hidden;
    margin-bottom: 50px;
    /* border-radius: 50px; */
    position: relative;
    /* background-color: #aaa; */
    /* padding: 10px; */
}

.he10 .box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: 0;
    pointer-events: none;
}

.he10 .box_inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/*  */
.he10 .imgArea {
    position: relative;
    margin: auto;
    text-align: center;
    padding: 0px;
    width: 100%;
}

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

/*  */
.he10 .imgArea .overlay-img {
    position: absolute;
    top: 0%;
    left: 0%;
    /* transform: translate(-50%, -50%); */
    z-index: 2;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

.he10 .imgArea .overlay-img img {
    width: 100%;
    height: auto;
    opacity: 1.0;
}

/*  */
.he10 .txtArea {
    background-color: #fff;
    text-align: center;
    padding: 10px 0;
    /* border-radius: 50px 50px 0px 0px; */
}

.he10 .txtArea .step {
    display: inline-block;
    background-color: #d80000;
    border-radius: 10px 0px 20px 0px;
    border: 1px solid #fff;
    /* border-width: 1px 5px 1px 5px; */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    line-height: 1.0;
    font-weight: 900;
    font-size: 1.5em;
    color: #fff;
}

.he10 .txtArea h4 {
    padding: 10px 0 0 0;
    font-weight: 700;
    font-size: 2.5em;
    color: #d80000;
}

.he10 .txtArea .desc {
    font-size: 1.250em;
    color: #333;
}

.he10 .txtArea .desc strong {
    font-size: 1.125em;
    color: #111;
}

/*  */
@media screen and (min-width: 768px) {
    .he10 .row>div {
        /* padding: 5px; */
    }

    .he10 .box {
        margin-bottom: 100px;
    }
}

/* he10 블럭 내 카드 4번 숨김 처리 */
.he10 .row>div:nth-of-type(4),
.he10 .row>div:nth-of-type(4) {
    /* display: none; */
}