[디자인블럭] he15 : 활용/레시피 – 상황별 맞춤 제안형 콘텐츠 블럭

 

 

 

 

 

✅ [디자인블럭] he15 : 활용/레시피 – 상황별 맞춤 제안형 콘텐츠 블럭

 

 

 

🔹 블럭 개요

 

he15는 제품의 활용도를 구체적인 장면과 함께 제시하여, 소비자가 ‘나도 이렇게 먹고 싶다’는 생각을 갖게 만드는 실용형 콘텐츠 블럭입니다.
이미지 중심 카드 구성으로, 요리 예시나 라이프스타일 제안에 효과적입니다.

---

 

🔸 사용 목적

• 제품의 활용도를 명확하게 보여주어 구매 후 사용 이미지를 구체화
• 타겟 고객의 다양한 소비 상황(식사, 캠핑, 요리 등)에 맞춘 제안 콘텐츠
• 상세페이지 하단에서 “어떻게 먹을 수 있을까?”라는 궁금증 해소
• 제품을 단순 재료가 아닌 '요리 경험'으로 승화시켜 브랜드 가치 강화

---

 

 

🎨 디자인 특징

• 3단 카드형 배치로 다양한 장면을 시각적으로 구성
• 이미지 상단에는 실제 사용 사례 또는 활용 상황을 대표하는 메인 컷
• 하단 텍스트 영역에는 제목(h4) + 보조 설명(p.desc)의 2단계 정보 구조
• 강조 문장은 <strong> 태그로 시선을 집중시키며 요리의 가치를 부각
• 카드별 독립형 콘텐츠로 다른 콘텐츠와 병치해도 조화롭게 사용 가능
• .box 단위로 구성되어 있기 때문에 항목 수 조절이 용이하며, 모바일 반응형도 안정적

---

 

 

📱 활용 예시

• 식단 제안용 콘텐츠
    – “든든한 한 끼 문어죽”
    – “샐러드와 함께 즐기는 고단백 식단”
    → 헬스푸드, 다이어트식, 건강식 중심 브랜드와 잘 어울리며
     식재료의 단백질/영양 강조용 콘텐츠에 활용 가능
  
  
• 요리 키트 / 프리미엄 식재료 소개
    – “셰프가 선택한 문어”
    – “숙회로 바로 먹는 고급 식재료”
    → 밀키트, 홈쿡 브랜드의 고급 요리 키트 설명에 적합
     디쉬 완성컷 중심의 상세 설명 블럭으로도 활용 가능
  
  
• 캠핑 / 아웃도어 제품 마케팅
    – “문어 캠핑 요리로 고기 대체”
    – “불멍+문어구이 조합 추천”
    → 캠핑용 숯불 구이 식재료, 간편 포장 제품 등과 연계 활용
     SNS용 바이럴 소재로도 적합
  
  
• 쇼츠 / 릴스용 콘텐츠 확장
    – 각 카드 구성 요소별로 개별 클립 제작 가능
    – 블로그 / 인스타그램 / 유튜브 쇼츠 등 쇼트폼 콘텐츠로 재가공
    → 상세페이지의 활용도 높이는 SNS 확장형 콘텐츠 구성에 적합

---

 

 

💻 HTML 설명

• 각 .box는 margin-bottom을 통해 간격을 확보한 독립형 콘텐츠 구조
• .imgArea는 요리 이미지에 전체 폭을 부여하여 시각적 강조
• .txtArea의 .desc는 기본 서체와 강조 <strong>을 병행하여 정보전달과 주목도 확보
• .h4는 노란 배경+흰색 텍스트로 주제별 메시지를 빠르게 인지하도록 설정
• 반응형 그리드로 1~3단 카드로 변형 가능
• 이미지·텍스트만 교체해도 타 품목에 쉽게 재활용 가능

---

 

 

🛠 확장성 있는 구성 아이디어

• 🎁 “선물용 문어 요리 추천” / “어버이날, 생신상 문어 플레이트”
• 🧘 “다이어터를 위한 저칼로리 고단백 메뉴”
• 🧑‍🎓 “자취생도 쉽게 먹는 프리미엄 요리”
• 👨‍👩‍👧 “아이와 함께 즐기는 문어요리 플레이트”
• 🍶 “와인 안주로 좋은 문어 카르파초”

각 카드 구성은 이미지 1장 + 타이틀 + 설명 문장 2~3줄로 규칙화되어 있어, 다양한 콘텐츠로 범용 확장이 용이합니다.

 

 

 

 

 

 

html

<!-- he15 : 활용/레시피 -->
<div class="he15">
  <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="imgArea">
            <span><img src="{{$template}}/img/_hes/he15/he15_img01.jpg" alt="문어 한 상차림"></span>
          </div>
          <div class="txtArea">
            <h4>든든한 한 끼엔 문어 한 상</h4>
            <p class="desc">
              진하게 우러난 문어죽부터<br>
              쫄깃한 숙회, 신선한 샐러드까지<br>
              <strong>밥상 위에서 건강을 채우는 해산물 밥상</strong>
            </p>
          </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="imgArea">
            <span><img src="{{$template}}/img/_hes/he15/he15_img02.jpg" alt="문어 데침 플레이팅 이미지"></span>
          </div>
          <div class="txtArea">
            <h4>셰프들이 먼저 알아본 재료</h4>
            <p class="desc">
              칼질만으로도 알 수 있는 식감의 차이<br>
              <strong>탱글함이 살아있는 숙회용 문어</strong><br>
              플레이팅에 올리는 순간, 이미 완성입니다.
            </p>
          </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="imgArea">
            <span><img src="{{$template}}/img/_hes/he15/he15_img03.jpg" alt="캠핑장에서 문어 숯불구이"></span>
          </div>
          <div class="txtArea">
            <h4>캠핑의 끝판왕은 이거지</h4>
            <p class="desc">
              불꽃 위에 구워지는 프리미엄 문어 다리<br>
              <strong>쫄깃하고 깊은 풍미로 캠핑 요리 격상</strong><br>
              고기 대신 문어, 지금 도전해보세요!
            </p>
          </div>
        </div>
      </div>
    </div>


  </div>
</div>

 

 

 

 

 

css

/*****************************************************************
he15 : 활용/레시피
*****************************************************************/
.he15 {
    padding: 0;
}

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

.he15 .box {
    overflow: hidden;
    margin-bottom: 50px;
    /* border-radius: 50px; */
    position: relative;
}

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

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

.he15 .imgArea {
    text-align: center;
}

.he15 .imgArea img {
    width: 100%;
    /* border-radius: 50px; */
}

.he15 .txtArea {
    background-color: #fff;
    text-align: center;
    padding: 10px 0;
}

.he15 .txtArea h4 {
    display: inline-block;
    margin: 5px 0;
    padding: 3px 10px;
    background-color: #eeae00;
    border-radius: 3px;
    font-weight: 700;
    font-size: 1.5em;
    color: #fff;
}

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

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

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