[디자인블럭] he23 : 제조/생산 소개 – 농가 철학과 신뢰를 담은 내러티브 카드형 구성

 

 

 

 

 

 

 

✅ [디자인블럭] he23 : 제조/생산 소개 – 농가 철학과 신뢰를 담은 내러티브 카드형 구성

 

 

 

📌 블럭 개요

생산 현장의 정성과 철학을 감각적인 이미지와 함께 전달하는 중앙 배치형 텍스트 오버레이 블럭입니다. 배경 이미지 위에 중심 정렬된 문구를 배치해, 브랜드의 스토리와 생산자의 철학을 임팩트 있게 표현할 수 있습니다.

---

 

🎯 사용 목적

• 고객에게 제품의 정체성과 신뢰도를 자연스럽게 어필할 수 있도록 구성
• 내러티브 스토리텔링을 활용해 브랜드 가치와 생산자의 철학을 강조
• 시각적으로 집중도 높은 반응형 카드 레이아웃으로 설득력 강화

---

 

🧩 디자인 특징

• 반투명 오버레이 처리된 배경 위에 핵심 메시지와 아이콘이 겹쳐진 내러티브 카드형 구조
• 이미지와 텍스트의 중심 배치를 통해 모바일에서도 높은 가독성 확보
• icon + title + 설명의 3단계로 시각/텍스트 메시지를 단계적으로 설득
• 카드마다 고유의 정체성과 의미를 담을 수 있어 브랜드 철학 전달에 적합

---

 

📱 활용 예시

• 브랜드 소개 콘텐츠
  • 자사 과일 브랜드의 차별화된 생산방식을 시리즈 카드로 전달
  • “우리는 이렇게 재배합니다” / “품질은 철학에서 나옵니다” 등 슬로건 강조
• 농가/제조사 상세 콘텐츠
  • 실제 농장 또는 제조업체 기반 브랜드의 스토리텔링형 콘텐츠로 활용
  • 고객 신뢰를 얻기 위한 브랜드 히스토리 및 인증 배경 설명과 함께 구성
• 쇼츠/릴스용 나레이션 영상
  • 각 카드별로 스크립트를 구성하여 슬라이드 영상 시리즈화 가능
  • “철저한 수확 관리 → 생산자의 약속” 식의 흐름으로 브랜드 내러티브 강화
• 패키지 브로셔, 행사 부스 등 오프라인 확장
  • 4컷 카드 구성을 인쇄/배너용 비주얼에도 그대로 활용 가능

---

 

💻 HTML 설명

• .he23은 카드마다 .box 요소를 사용하여 2단 그리드로 구성되며, 각 카드 내부에는 .txtArea와 .imgArea가 포함됩니다.
• 텍스트는 .txtArea 내부에서 중앙 정렬 + 아이콘 + 타이틀 + 설명 순으로 출력됩니다.
• .imgArea는 **배경 이미지를 깔고 어두운 오버레이(.imgArea::before)**를 적용해 텍스트 가독성을 높였습니다.
• 모든 카드 이미지는 동일한 스타일로 통일되며, 각 이미지 상단에 .icn 클래스로 아이콘을 별도 표시합니다.

 

 

 

 

 

html

<!-- he23 : 제조/생산 소개 -->
<div class="he23">
  <div class="row">


    <!-- 카드1 -->
    <div class="col-md-12 col-lg-6 col-xl-6 mx-auto">
      <div class="box">
        <div class="txtArea">
          <p class="icn">
            <img src="{{$template}}/img/_hes/he23/he23_icn01.png" alt="icon">
          </P>
          <p class="title">정성 가득한 재배</p>
          <p class="desc">건강한 토양에서 시작된 재배, 일조량과 수분을 고려한 세심한 농법으로 키워낸 과일입니다.</p>
        </div>
        <div class="imgArea">
          <img src="{{$template}}/img/_hes/he23/he23_img01.png" alt="Freshly harvested Shine Muscat grapes">
        </div>
      </div>
    </div>


    <!-- 카드2 -->
    <div class="col-md-12 col-lg-6 col-xl-6 mx-auto">
      <div class="box">
        <div class="txtArea">
          <p class="icn">
            <img src="{{$template}}/img/_hes/he23/he23_icn02.png" alt="icon">
          </P>
          <p class="title">철저한 수확 관리</p>
          <p class="desc">가장 맛있을 때를 골라 수확하고, 손상 없이 신속히 선별∙포장합니다.</p>
        </div>
        <div class="imgArea">
          <img src="{{$template}}/img/_hes/he23/he23_img02.png" alt="Freshly harvested Shine Muscat grapes">
        </div>
      </div>
    </div>


    <!-- 카드3 -->
    <div class="col-md-12 col-lg-6 col-xl-6 mx-auto">
      <div class="box">
        <div class="txtArea">
          <p class="icn">
            <img src="{{$template}}/img/_hes/he23/he23_icn03.png" alt="icon">
          </P>
          <p class="title">브랜드 스토리</p>
          <p class="desc">단순한 상품을 넘어, 자연과 사람을 잇는 농장의 철학이 담겨 있습니다.</p>
        </div>
        <div class="imgArea">
          <img src="{{$template}}/img/_hes/he23/he23_img03.png" alt="Freshly harvested Shine Muscat grapes">
        </div>
      </div>
    </div>


    <!-- 카드4 -->
    <div class="col-md-12 col-lg-6 col-xl-6 mx-auto">
      <div class="box">
        <div class="txtArea">
          <p class="icn">
            <img src="{{$template}}/img/_hes/he23/he23_icn04.png" alt="icon">
          </P>
          <p class="title">생산자의 약속</p>
          <p class="desc">내 가족이 먹는다는 마음으로, 매년 정직하게 같은 품질을 지키고 있습니다.</p>
        </div>
        <div class="imgArea">
          <img src="{{$template}}/img/_hes/he23/he23_img04.png" alt="Freshly harvested Shine Muscat grapes">
        </div>
      </div>
    </div>


  </div>
</div>

 

 

 

 

 

css

/*****************************************************************
he23 : 제조/생산 소개
*****************************************************************/
.he23 {
    margin: 0;
    padding: 0;
    position: relative;
    /* background-color: #fff; */
}

.he23 .row>div {
    /* padding: 0px; */
}

.he23 .box {
    margin: 0 0 10px;
    display: flex;
    position: relative;
    width: 100%;
    border-radius: 30px;
    overflow: hidden;
}

/*  */
.he23 .txtArea {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
    /* 필요에 따라 유지 */
    text-align: center;
    box-sizing: border-box;
    z-index: 2;
    border-radius: 0px;
    padding: 20px 10px;
}

.he23 .txtArea .icn {
    margin: 0 0 10px;
}

.he23 .txtArea .icn img {
    width: 15%;
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
}

.he23 .txtArea .title {
    margin-bottom: 10px;
    line-height: 1.1;
    font-weight: 900;
    font-size: 2.0em;
    color: #fff;
}

.he23 .txtArea .desc {
    font-weight: 500;
    font-size: 1.250em;
    color: #fff;
}

.he23 .txtArea .desc strong {
    color: #ffb311;
    font-weight: 700;
}

/*  */
.he23 .imgArea {
    width: 100%;
    position: relative;
}

.he23 .imgArea::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* 검정색 50% 투명 */
    z-index: 1;
    /* 필요 시 조정 */
}

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

@media screen and (min-width: 768px) {
    /* .he23 .txtArea .sub {
    }
    .he23 .txtArea .title {
    }
    .he23 .txtArea .desc {
    } */
}