[디자인블럭] he21 : 인증&수상내역 – 신뢰를 더하는 브랜드의 자부심!

 

 

 

 

 

 

✅ [디자인블럭] he21 : 인증&수상내역 – 신뢰를 더하는 브랜드의 자부심!

 

 

 

 

 

🔠 블럭개요

브랜드의 수상 이력, 공식 인증, 신뢰 지표 등을 시각적으로 강조하는 블럭입니다. 명확한 수치나 로고 없이도 고급스럽고 임팩트 있는 디자인으로, 소비자의 신뢰와 구매 설득력을 강화합니다.

 

 

 

 

 

📌 사용목적

• 브랜드 신뢰도 상승
• 제품/브랜드의 권위 있는 포지셔닝 구축
• 고객 후기나 품질 외에 제3자의 인증/수상 경력을 시각적으로 어필
• 소비자의 구매 결심을 돕는 심리적 신뢰 요소 제공

 

 

 

 

 

🎨 디자인 특징

• 다크 베이스 + 골드 포인트 컬러 – 고급감 & 프리미엄 이미지 연출
• 1장당 1수상 이미지 강조 – 간결한 정보 전달
• 이미지 중심 구성으로 텍스트 부담 최소화
• 카드형 레이아웃 – 최대 4개까지 유연하게 배치 가능
• 반응형 정렬 – 모바일에서도 자연스럽게 2단으로 전환
• .txtArea 사용 시 텍스트 오버레이 가능 (기본은 비노출 상태)

 

 

 

 

 

❄️ 활용 예시

• 식품 브랜드 / 수산물 프리미엄 몰
“2025 대곡마을 올해의 식품 브랜드 수상 소식을 보고 더욱 믿고 구매하게 됐어요.”
“브랜드가 수상도 받고 혜택까지 챙겨주니 진정성 느껴졌습니다.”
→ 지역, 품질, 소비자 평가 기반 수상 이력을 강조해 식품 신뢰도 확보

 

• 생활용품 / 친환경 브랜드
“환경인증 받은 제품이라서 안심하고 사용하고 있어요.”
“공식 수상 경력이 있는 브랜드라는 점에서 호감도가 높아졌어요.”
→ 인증마크나 수상 타이틀을 제품 상세에 시각적으로 강조

 

• 뷰티 브랜드 / 클린 뷰티
“수상 경력이 있는 제품이니 안심하고 피부에 사용할 수 있어요.”
“고객이 직접 뽑은 브랜드라는 점에서 신뢰가 생겼습니다.”
→ 클린 뷰티, 성분 중심 브랜드에서 신뢰 강조 요소로 활용

 

• 전자기기 / IoT 브랜드
“브랜드 수상 이력을 보니 기술력에 대한 신뢰가 생기네요.”
“혁신 제품 수상도 했다니 기능성 기대하게 됩니다.”
→ 기술력 기반 수상경력 강조로 고가 제품 설득력 강화

 

• 교육 / 출판 브랜드
“신뢰할 수 있는 수상 이력 덕분에 아이 교육도 맡기게 됐어요.”
“지역대상이나 교육 브랜드 어워드 수상 안내가 설득력 있어요.”
→ 엄마 타깃층을 위한 심리적 신뢰 강화 포인트로 적합

 

 

 

 

 

📢 마케팅 콘텐츠 확장 예시

• 메인 비주얼 배너
사이트 첫 화면에서 수상 이력을 강조하는 첫인상 구성으로 활용

 

• 이메일 뉴스레터
“감사합니다! 올해의 브랜드 대상 수상” 등의 제목으로 수상 콘텐츠 발송

 

• SNS 콘텐츠
수상 소식 카드 이미지로 브랜드 신뢰도를 높이는 콘텐츠 제작

 

• 오프라인 인쇄물/리플렛
패키지, 브로슈어 등에 그대로 사용해 브랜드 수상 이력 강조

 

• 이벤트 페이지 연동
수상 기념 이벤트 안내 시, 해당 블럭을 상단에 배치해 임팩트 강화

 

 

 

 

 

💻 HTML 설명

구성 구조
– .row > .col-* 형태로 2~4개 이미지 카드 정렬
– .imgArea 내 수상 이미지 삽입 (기본 텍스트 오버레이는 미노출 설정)

디자인 요소
– .box는 다크 배경에 border-radius: 12px 처리로 고급 이미지 구현
– .imgArea img는 border-radius 동일 적용으로 통일감 유지

텍스트 오버레이 옵션 (.txtArea)
– 기본 display: none; 처리
– 텍스트를 노출하고자 할 경우 .txtArea 스타일 내 display 속성 변경
– .title은 골드 그라데이션 텍스트로 주목도 강화 (웹킷 전용 스타일 포함)

반응형 처리
– .col-6~.col-xl-4 사용으로 모바일/태블릿에서도 정렬 깨짐 없이 자동 대응

 

 

 

 

👉 커스터마이징 팁

• 수상 타이틀 변경 – 연도, 지역, 부문에 맞게 텍스트/이미지 교체
• 텍스트 노출 활성화 – .txtArea 스타일에서 display: block으로 수정 시 정보 병렬 제공 가능
• 이미지 교체만으로 디자인 유지 – 다양한 수상 배너에 쉽게 응용 가능
• 수상 로고 추가 – .brandArea 활용해 인증 마크나 수상 엠블럼 삽입
• 애니메이션 효과 추가 – 스크롤 시 fade-in 또는 라이트 효과 등 적용 가능

 

 

 

 

 

 

 

html

<!-- he21 : 인증&수상내역 -->
<div class="he21">
  <div class="row">



    <!-- 카드 1 -->
<div class="col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he21/he21_img01.jpg" alt="브랜드 수상 이미지">
          </div>
        </div>
      </div>
    </div>



    <!-- 카드 2 -->
<div class="col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he21/he21_img02.jpg" alt="브랜드 수상 이미지">
          </div>
        </div>
      </div>
    </div>



    <!-- 카드 3 -->
<div class="col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he21/he21_img03.jpg" alt="브랜드 수상 이미지">
          </div>
        </div>
      </div>
    </div>



    <!-- 카드 4 -->
<div class="col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he21/he21_img04.jpg" alt="브랜드 수상 이미지">
          </div>
        </div>
      </div>
    </div>



  </div>
</div>

 

 

 

 

 

 

 

css

/*****************************************************************
he21 : 인증&수상내역
*****************************************************************/
.he21 {}

.he21 .row>div {
    padding: 1px;
}

.he21 .box {
    background-color: #000;
    border-radius: 12px;
    overflow: hidden;
    /* margin-bottom: 50px; */
}

.he21 .box_inner {
    position: relative;
}

.he21 .imgArea img {
    width: 100%;
    display: block;
    border-radius: 12px;
}

/* 텍스트 상단 중앙 고정 */
.he21 .txtArea {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    padding: 0 20px;
    z-index: 2;
    width: 65%;
    display: none;
}

.he21 .txtArea .info {
    font-size: 1.25em;
    font-weight: 600;
}

.he21 .txtArea .title {
    color: #FFD447;
    background: linear-gradient(90deg, #f7e199, #d4af37, #f5d682);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    line-height: 1.1;
    font-weight: 900;
    font-size: 2.0em;
}

.he21 .txtArea .desc {
    font-size: 1.125em;
    font-weight: 400;
    color: #fff;
}

/* 브랜드 하단 중앙 고정 */
.he21 .brandArea {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 2;
}

.he21 .brandArea .brand {
    font-size: 1em;
    font-weight: 300;
    color: #ccc;
}