[디자인블럭] he27 : 고객과의 약속 – 신뢰를 더하는 핵심 가치 카드 블럭

세로 4단형 블럭

 

 

 

 

✅ [디자인블럭] he27 : 고객과의 약속 – 신뢰를 더하는 핵심 가치 카드 블럭

 

 

 

 

 

🔠 블럭개요

고객에게 전달되는 서비스와 제품의 품질, 투명성, 신선도, 사후 대응까지 브랜드의 핵심 신뢰 요소를 카드 형태로 표현한 정보 블럭입니다. 각 항목은 아이콘과 제목, 설명이 결합된 형태로 일관된 시각적 구성으로 구성됩니다.

 

 

 

 

 

📌 사용목적

• 브랜드의 품질 철학 및 고객 대응 원칙을 명확히 전달
• 구매 전 고객의 신뢰도 향상 유도
• 스토리텔링 요소로 고객 공감 유도 및 차별화

 

 

 

 

 

🎨 디자인 특징

• 2단 카드형 구조로 모바일~데스크톱까지 반응형 대응
• 컬러 포인트 아이콘으로 시각적 관심 유도
• 부드러운 라운드 테두리와 깔끔한 여백 구성
• 각 카드별 강조된 제목과 설명의 정보 계층 구조

 

 

 

 

 

❄️ 활용 예시 (제품/브랜드 등)

– 식품 브랜드
“배송받은 새우가 정말 신선하고, 포장도 깔끔해서 믿음이 갔어요.”
“신선도 유지 시스템이 있다는 설명 덕분에 안심하고 주문할 수 있었습니다.”
→ 해산물, 냉동식품 브랜드에서 신선도 및 품질 관리 체계를 강조하는 설명용으로 활용

 

– 뷰티 브랜드
“제조 공정이 투명하게 설명되어 있어 믿음이 갔어요.”
“문제가 생겼을 때 빠르게 대응해줘서 고객 응대 책임제가 진짜라는 걸 느꼈습니다.”
→ 원재료부터 생산, 사후 대응까지 명확히 보여주어 신뢰 기반 형성

 

– 전자제품 브랜드
“품질에 대해 확신을 주는 항목 덕분에 바로 구매를 결정했습니다.”
“고객 응대에 대한 설명이 있어 안심됐어요.”
→ 고가 제품군의 품질/서비스 보증 강조용으로 효과적

 

– 교육 플랫폼
“학습 콘텐츠와 검수 과정을 투명하게 설명해줘서 신뢰가 생겼어요.”
“만족하지 않았을 때 대응이 빠르다는 점이 가장 좋았습니다.”
→ 교육 콘텐츠 품질 및 고객 케어에 대한 신뢰도를 전달하는 데 적합

 

– 생활용품 브랜드
“단순한 제품이지만 브랜드 철학이 느껴져서 더 신뢰할 수 있었어요.”
“투명한 생산관리라는 말이 정말 인상 깊었습니다.”
→ 일상 제품에 브랜드 가치를 부여하고 고객과의 약속을 강조

 

 

 

 

 

📢 마케팅 콘텐츠 확장 예시

• SNS(인스타그램/페이스북) / 카드 형태의 콘텐츠로 각 항목을 이미지 슬라이드로 구성하여 공유
• 블로그 콘텐츠 / “우리가 지키는 4가지 고객과의 약속” 시리즈형 포스팅
• 쇼핑몰 상세페이지 / 제품 설명 하단에 신뢰 요소 강조 블럭으로 배치
• 오프라인 인쇄물 / 리플렛, 패키지 등에 간단한 카드 구성으로 인쇄
• 이메일 마케팅 / 구매 후 안내 메일에 브랜드 약속 이미지 삽입으로 재신뢰 유도

 

 

 

 

 

💻 HTML 설명

.he27 클래스를 중심으로 2단 카드가 row 형태로 나열됩니다. 각 카드(.box)는 내부에 .iconArea와 .txtArea로 나뉘며, 아이콘(Material Icons)과 텍스트(제목/설명)를 분리하여 시각적 정돈감을 높입니다. 반응형 클래스(col-sm~xl)를 통해 어떤 디바이스에서도 일관된 배열을 유지하며, 카드 간 여백 및 라운드 스타일은 CSS로 처리되어 브랜드 일체감을 제공합니다.

 

 

 

 

 

👉 커스터마이징 팁

• 아이콘 변경: Material Icons 외 커스텀 SVG 아이콘으로 교체 가능
• 컬러 테마 조정: .material-icons의 color 속성으로 브랜드 컬러 적용
• 카드 수 조정: row 내부 카드 수 자유롭게 추가/삭제 가능
• 레이아웃 변경: 1단 구성으로 바꾸면 모바일 중심 캠페인에 적합
• 애니메이션 추가: 카드 hover 시 아이콘 컬러 변화 또는 확대 애니메이션 추가 시 주목도 향상

 

 

 

 

 

 

 

html

<!-- he27 : 고객과의 약속 -->
<div class="he27">
  <div class="row">


    <!-- 카드1 -->
    <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="iconArea">
            <i class="material-icons">verified</i>
          </div>
          <div class="txtArea">
            <h4>품질 우선 원칙</h4>
            <p class="desc">수산 전문가가 선별한 신선한 새우만을 엄격히 골라 담아드립니다.</p>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드2 -->
    <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="iconArea">
            <i class="material-icons">assignment</i>
          </div>
          <div class="txtArea">
            <h4>투명한 생산 관리</h4>
            <p class="desc">양식부터 가공, 출고까지 모든 과정을 투명하게 관리합니다.</p>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드3 -->
    <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="iconArea">
            <i class="material-icons">track_changes</i>
          </div>
          <div class="txtArea">
            <h4>신선도 유지 시스템</h4>
            <p class="desc">출고 즉시 냉장 포장하여, 신선한 상태 그대로 고객님께 전달됩니다.</p>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드4 -->
    <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="iconArea">
            <i class="material-icons">fact_check</i>
          </div>
          <div class="txtArea">
            <h4>고객 응대 책임제</h4>
            <p class="desc">상품 이상 발생 시 신속한 확인과 처리로 고객 불편을 최소화합니다.</p>
          </div>
        </div>
      </div>
    </div>


  </div>
</div>

 

 

 

 

 

css

/*****************************************************************
he27 : 고객과의 약속
*****************************************************************/
.he27 {
    padding: 0px 0;
}

.he27 .box {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 1px;
}

.he27 .box_inner {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
}

/*  */
.he27 .iconArea {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.he27 .iconArea .material-icons {
    font-size: 4.0em;
    color: #0093ce;
}

/*  */
.he27 .txtArea {
    flex-grow: 1;
}

.he27 .txtArea h4.title {
    font-size: 1.250em;
    font-weight: bold;
    color: #333;
}

.he27 .txtArea .desc {
    font-size: 1.0em;
    color: #aaa;
}

@media screen and (min-width: 768px) {
    /* .he27 .txtArea h4.title {
    font-size: 2.0em;
  }
  .he27 .txtArea .desc {
    font-size: 1.250em;
  } */
}