[디자인블럭] he12 : 경쟁사와의 차이 – 글로벌 셰프 인증 스토리텔링형 블럭

 

 

 

 

 

✅ [디자인블럭] he12 : 경쟁사와의 차이 – 글로벌 셰프 인증 스토리텔링형 블럭

 

 

 

📌 블럭 개요

he12는 세계 유명 셰프들의 평가 및 활용 사례를 통해 제품의 품질과 차별성을 강조하는 글로벌 스토리텔링 블럭입니다.
국가별 플래그, 셰프 이름, 레스토랑 브랜드와 인용 문구를 조화롭게 배치하여 신뢰도 있는 내러티브형 콘텐츠로 활용됩니다.

---

 

 

🎯 사용 목적

• 수산물, 특산물, 프리미엄 제품에 대해 해외 셰프들의 추천 사례를 강조할 때
• 제품 신뢰도나 브랜드 위상을 글로벌 관점에서 부각시키고 싶을 때
• 브랜드 스토리, 셰프 인증, 경쟁력 있는 퀄리티 포인트 전달용
• 해외 시장 진출 제품 홍보, 수출 전용 상품 상세페이지 등에도 적합

---

 

 

🧩 디자인 특징

• 국가별 플래그 아이콘을 활용한 국가 정체성 시각화 구성
• 이미지와 설명 텍스트를 분리하여 읽기 쉬운 세로형 구조
• 각 카드마다 셰프 이름을 강조하고, 대표 메뉴와 인용구를 활용한 신뢰도 있는 브랜드 서사 전달
• 플렉스 기반 1~4단 대응 가능, PC와 모바일 환경에서 안정적 표시
• HTML 구조가 명확하여 타 콘텐츠와 연동·삽입·확장이 용이

---

 

 

📱 활용 예시

 

✔️  수산물/식품 카테고리

• 국내외 셰프의 실제 사용 사례를 보여주며 제품의 신선도·품질·신뢰성 강조
• “해외 셰프들도 선택한 제품”이라는 프리미엄 이미지 각인
• 문어, 전복, 굴, 새우, 한우 등 고급 원물 중심 상세페이지에 어울림

✔️ 화장품/뷰티

• 해외 유명 메이크업 아티스트, 뷰티 유튜버, 스킨케어 전문가 등장
  → “파리의 아티스트 클레르, 베이징의 뷰티 인플루언서 리우도 선택한 저자극 포뮬러”
• 글로벌 사용 후기를 스토리텔링 형태로 소개
  → 내 피부 고민을 공감하고 해결한 듯한 느낌 유도

✔️ 전자기기/가전

• 글로벌 기업의 실제 구매 사례 or 전문가 인터뷰 삽입
  → “독일의 유명 요리 스튜디오에서 사용하는 프리미엄 오븐”
  → “홍콩의 바리스타 챔피언이 선택한 커피머신”

✔️ 교육/서비스 플랫폼

• 해외 교육기관, 강사, 전문가가 직접 활용한 후기 중심 스토리 삽입
  → “일본 프로그래밍 교육기관에서도 이 콘텐츠를 수업에 활용 중”
  → “LA의 심리상담사도 추천하는 온라인 테라피 도구”

✔️ 패션/잡화/라이프스타일

• “파리 패션위크 백스테이지에서 사용된 뷰티 소품”
  → 국가별 브랜드 가치를 접목한 내러티브 구성
• 글로벌 셀럽/인플루언서의 경험을 에피소드처럼 전개
  → “홍콩 인플루언서가 이 신발을 신고 런던여행을 다녀왔다고?”

✔️ 브랜드 스토리 구성

• 국내외 사용처를 비교하면서 브랜드의 확장성과 신뢰성을 강조
  → “서울을 시작으로 도쿄, 파리, LA까지… 세계로 뻗어나가는 우리 브랜드”

---

 

 

💻 HTML 설명

• .txtArea는 국기 아이콘, 레스토랑명, 셰프명, 인용문 등 텍스트 중심 콘텐츠로 구성됨
• .step 요소에 <img> 태그를 사용하여 각국의 국기를 출력하며, 국기 이미지는 flagcdn.com에서 직접 호출
  • 예: https://flagcdn.com/w80/fr.png → 프랑스 국기
  • w80은 가로 80px 이미지 지정이며, ISO 국가코드를 소문자로 표기
  • 다양한 크기(w20, w40, w80 등)와 비율로 조정 가능하며, 서버리스 방식으로 별도 저장 없이 국기 사용 가능
• .imgArea는 실제 셰프와 요리 장면을 담은 사진을 아래 배치하여 감성적 몰입도 유도
• .box_inner는 flex-direction: column 으로 구성되어, 카드 내 콘텐츠 흐름이 위에서 아래로 자연스럽게 정렬됨
• 각 카드는 .col-sm-12 col-md-12 col-lg-6 col-xl-4로 구성되어, 반응형 1~4단 구성이 유연하게 적용 가능
• 셰프 이름은 .desc strong 클래스로 컬러 강조 (#0088d6) 처리되어 가독성과 포인트 전달이 우수

 

 

 

 

 

 

 

html

<!-- he12 : 경쟁사와의 차이 -->
<div class="he12">
  <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"><img src="https://flagcdn.com/w80/fr.png" alt="프랑스 국기"></p>
            <h4>프랑스 파리<br>Hotel Lumière</h4>
            <p class="desc">
              세계 1% 셰프의 선택<br>
              미슐랭 셰프 <strong>Jean-Pierre Leblanc</strong>이 극찬한<br>
              "식감과 풍미가 완벽한 문어"
            </p>
          </div>
          <div class="imgArea">
            <span><img src="{{$template}}/img/_hes/he12/he12_img01.jpg" 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"><img src="https://flagcdn.com/w80/hk.png" alt="홍콩 국기"></p>
            <h4>홍콩 센트럴<br>Dragon Ember</h4>
            <p class="desc">
              불꽃 속, 살아남은 식감<br>
              셰프 <strong>Raymond Chow</strong>의 강한 불맛 요리에도<br>
              문어의 탱탱한 질감은 그대로!
            </p>
          </div>
          <div class="imgArea">
            <span><img src="{{$template}}/img/_hes/he12/he12_img02.jpg" 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"><img src="https://flagcdn.com/w80/kr.png" alt="한국 국기"></p>
            <h4>서울 전통 한식당<br>청연(靑然)</h4>
            <p class="desc">
              한국의 미(味)를 담다<br>
              셰프 <strong>박성일</strong>이 말하는 비밀 재료는<br>
              “쫄깃함과 감칠맛의 끝, 바로 신선수산 문어죠.”
            </p>
          </div>
          <div class="imgArea">
            <span><img src="{{$template}}/img/_hes/he12/he12_img03.jpg" 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"><img src="https://flagcdn.com/w80/us.png" alt="미국 국기"></p>
            <h4>라스베가스<br>FLAME Bar & Grill</h4>
            <p class="desc">
              쇼의 주인공이 되어...<br>
              셰프 <strong>Alex Rios</strong>의 화려한 플람베 연출에도<br>
              "문어가 메인이 되는 건 당연한 일"
            </p>
          </div>
          <div class="imgArea">
            <span><img src="{{$template}}/img/_hes/he12/he12_img04.jpg" alt="플람베 중 불꽃이 타오르는 문어 요리"></span>
          </div>
        </div>
      </div>
    </div>




  </div>
</div>

 

 

 

 

 

 

css

/*****************************************************************
he12 : 경쟁사와의 차이
*****************************************************************/
.he12 {
    padding: 0;
}

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

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

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

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

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

.he12 .imgArea img {
    width: 100%;
    border-radius: 0px;
}

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

/*  */
.he12 .txtArea .step {
    line-height: 1.0;
    font-weight: 900;
    font-size: 6.0em;
    color: #ddd;
    /* border: 1px solid #f00; */
}

.he12 .txtArea .step img {
    vertical-align: middle;
    height: auto;
    width: 80px;
    border: 1px solid #ddd;
}

.he12 .txtArea h4 {
    padding: 10px 0;
    font-weight: 700;
    font-size: 2.5em;
    color: #111;
    z-index: 10;
}

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

.he12 .txtArea .desc strong {
    font-size: 1.125em;
    color: #0088d6;
}

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

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