[디자인블럭] he13 : 선택해야 할 이유 - 임팩트 중심 내러티브형 강조 블럭

 

 

✅ [디자인블럭] he13 : 선택해야 할 이유 - 임팩트 중심 내러티브형 강조 블럭

 

 

🔹 블럭 개요

 

he13은 감성적인 문구와 시각적 임팩트를 통해 구매 욕구를 강하게 자극하는 ‘스토리텔링 강조형’ 디자인 블럭입니다.
비주얼과 카피를 조화롭게 배치해 브랜드 매력이나 제품 차별점을 감성적으로 어필할 수 있습니다.

---

🔸 사용 목적

• "왜 이 제품을 선택해야 하는가?"에 대한 감성적 설득 근거 제시
• 고객의 공감을 유도하며 브랜드 팬덤을 자연스럽게 형성
• 상세페이지 중간 또는 하단부에 임팩트를 주는 콘텐츠로 활용
• 리뷰 전환을 유도하거나 CTA(구매 클릭)를 자연스럽게 연결

---

🎨 디자인 특징

• 화면 중심에 배치된 강력한 메시지 타이틀과 짧은 내러티브 문장
• 배경 이미지와 텍스트가 겹쳐지는 구조로 몰입감 극대화
• 텍스트 강조를 위한 진한 컬러 박스와 강조어 스타일링
• 하단에는 3개의 포인트 키워드를 원형 이미지와 함께 제공
• 카드형 레이아웃 없이도 균형 잡힌 배치 구조로 시선 집중
• 감성적인 문구를 통해 제품의 ‘필연성’을 강조하기에 적합

---

📱 활용 예시

• 🍊 농산물/과일: “왜 우리가 탱탱한가요?”, “당도, 품종, 유통까지 모두 다릅니다”
• 🐟 수산물: “싱싱함이 다릅니다”, “한 입 먹으면 팬이 되는 맛”
• 💄 뷰티: “왜 이 성분이어야 할까?”, “처음 쓰면 계속 찾게 되는 이유”
• 🧴 생활용품: “우리가 만든 이유”, “기존 제품에서 부족했던 것들”
• 🧑‍🍳 밀키트/간편식: “왜 이 맛이어야 하는가?”, “한 입이면 끝나는 고민”
• 🎁 정기구독: “한 번 써본 사람은 끊지 못하는 이유”
• ✍ 브랜드소개 페이지 내 인트로용 or 철학 소개용 콘텐츠

---

💻 HTML 설명

• .txtArea는 position: absolute로 이미지 중앙에 겹쳐지며, 텍스트 중심 배치로 시선을 집중시킴
• .title은 크고 두꺼운 폰트로 강조되어 메시지의 무게감을 전달
• .desc는 강조 문구를 strong 태그로 감싸고, 어두운 배경에 흰 글씨로 시각 대비 강조
• 하단 .event 영역은 display: flex를 사용해 3개의 포인트 키워드를 수평 배치
• .event_inner는 원형 이미지와 짧은 문구로 구성된 간결한 보조 정보 영역
• 전반적으로 레이아웃은 position: absolute + flex를 혼합하여 모바일·PC 모두 대응 가능

👉 커스터마이징 팁

• 포인트 키워드는 2~4개로 조절 가능하며, 이미지·텍스트 교체만으로도 손쉽게 수정 가능
• .title 문구는 브랜드 특유의 톤앤매너에 따라 편하게 수정 가능 (유머/진지/감성 모두 어울림)
• .desc strong의 스타일만 수정해도 분위기를 확 바꿀 수 있음 (버튼형 강조 또는 밑줄형 등)

 

 

 

 

 

 

html

<!-- he13 : 선택해야 할 이유 -->
<div class="he13">
  <div class="row">


    <!-- 카드 1 -->
    <div class="col-sm-12 col-md-12 col-lg-12">
      <div class="box">


        <div class="txtArea">
          <p class="sub">입안 가득 퍼지는 싱그러운 과즙</p>
          <p class="title">선택 이유?<br>우리여야 하는가?</p>
          <button class="btn">오늘의 과일, 신선함 한가득 🍊</button>
        </div>


        <div class="listArea">
          <div class="listItem">
            <div class="thumb">
              <img src="{{$template}}/img/_hes/he13/he13_icn01.png" alt="싱싱한 껍질과 상큼한 풍미의 귤">
            </div>
            <p>상큼한 향, 입안 가득<br>귤 그대로의 달콤함</p>
          </div>
          <div class="listItem">
            <div class="thumb">
              <img src="{{$template}}/img/_hes/he13/he13_icn02.png" alt="촉촉한 열대과일 망고">
            </div>
            <p>부드럽고 진한 맛<br>과즙 가득 프리미엄 망고</p>
          </div>
          <div class="listItem">
            <div class="thumb">
              <img src="{{$template}}/img/_hes/he13/he13_icn03.png" alt="샤인머스캣 황금빛 포도">
            </div>
            <p>껍질째 먹는 달콤함<br>샤인머스캣의 황금 매력</p>
          </div>
        </div>



        <div class="imgArea">
          <img src="{{$template}}/img/_hes/he13/he13_img01.jpg" alt="김이 피어오르는 문어 커팅 장면">
        </div>


      </div>
    </div>


  </div>
</div>

 

 

 

 

 

css

/*****************************************************************
he13 : 선택해야 할 이유
*****************************************************************/
.he13 {
    margin: 0;
    padding: 0;
    position: relative;
    background-color: #000;
}

.he13 .row>div {
    padding: 0;
}

.he13 .box {
    position: relative;
    width: 100%;
    /* height: 100vh; */
    overflow: hidden;
}

.he13 .imgArea {
    width: 100%;
    position: relative;
}

.he13 .imgArea img {
    width: 100%;
    display: block;
    height: auto;
}

/* 텍스트 영역 */
.he13 .txtArea {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    text-align: center;
    z-index: 2;
    padding: 10px 0;
}

.he13 .txtArea .sub {
    margin-bottom: 10px;
    font-weight: 300;
    font-size: 2.0em;
    color: #111;
}

.he13 .txtArea .title {
    margin-bottom: 15px;
    line-height: 1.0;
    font-weight: 900;
    font-size: 3.0em;
    color: #111;
}

.he13 .txtArea .btn {
    display: inline-block;
    padding: 3px 10px;
    background: #111;
    border-radius: 5px;
    font-weight: 500;
    font-size: 1.5em;
    color: #fff;
}

/* 3단 리스트 영역 */
.he13 .listArea {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 80%));
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    text-align: center;
    width: 100%;
    max-width: 960px;
    padding: 30px 10px;
    z-index: 2;
}


.he13 .listArea .listItem {
    flex: 0 0 30%;
    margin-bottom: 20px;
    align-items: top;
}

.he13 .listArea .thumb {
    margin: 0 auto 10px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;
}

.he13 .listArea .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.he13 .listArea .listItem p {
    line-height: 1.2;
    font-weight: 500;
    font-size: 1.250em;
    color: #222;
}


/* */
@media screen and (min-width: 768px) {}