[디자인블럭] he11 : 해결방안 제시 - 문제 인식 후 신뢰 확보를 위한 단계별 대응 방식 구성형 블럭

해결방안 제시

 

 

 

 

 

✅ [디자인블럭] he11 : 해결방안 제시 - 문제 인식 후 신뢰 확보를 위한 단계별 대응 방식 구성형 블럭

 

 

 

📌 블럭 개요

 

he11은 제품이나 서비스에 대한 소비자의 불안 요소를 해소하고, 신뢰를 얻기 위한 해결책을 시각적으로 정리하는 콘텐츠 블럭입니다. 각 카드마다 이미지와 텍스트가 좌우로 배치되며, 정형화된 흐름을 통해 설득력을 강화합니다.

---

 

 

🎯 사용 목적

• 소비자의 불안 요소(품질, 원산지, 신선도 등)에 대한 해결책을 구체적으로 제시하고 싶을 때
• 텍스트 중심이 아닌, 이미지 기반의 신뢰 구축용 콘텐츠를 구성할 때
• 고객이 우려하는 핵심 포인트에 대한 ‘보증/대응’ 메시지를 단계별로 전달할 때
• 상품 설명 이후 브랜드의 품질관리 시스템을 강조하고자 할 때

---

 

 

🧩 디자인 특징

• 이미지와 텍스트를 좌우 교차로 배치한 카드형 구조로, 가독성과 시각적 흐름이 우수함
• 각 카드에 **번호 강조(01, 02...)**를 통해 전달 흐름을 유도
• 카드 순서에 따라 정보 신뢰도를 단계별로 심화시킬 수 있음
• 강조 텍스트는 굵은 서체와 컬러 하이라이트를 활용하여 핵심 메시지를 직관적으로 전달
• 이미지 영역은 유연한 크기로 구성되어 다양한 상품 이미지 대응 가능
• .reverse 클래스를 활용하여 이미지/텍스트 위치를 번갈아 배치할 수 있음

---

 

 

📱 활용 예시

• 식품/수산물: 산지 인증 → 신선도 보장 → 포장 시스템 → 검수/촬영 서비스
• 전자제품: 정품 인증 → 품질 테스트 → 포장 안정성 → 설치 후 품질 보증
• 뷰티: 원료 인증 → 무첨가 테스트 → 패키징 구성 → 출고 전 상태 검사
• 교육/서비스: 강사 인증 → 커리큘럼 소개 → 피드백 시스템 → 성과 보증 등

---

 

 

💻 HTML 설명

• .row > div 요소는 카드 단위로 구성되며, 상하단에 점선 구분선을 적용하여 흐름 강조
• .box는 흰색 배경과 라운딩, 박스 그림자 처리를 통해 카드 형태를 명확히 구분
• .box_inner는 flex 기반으로 이미지와 텍스트를 나란히 배치
• reverse 클래스를 부여하면 이미지/텍스트 위치가 바뀌며, 시각적으로 지루하지 않은 흐름을 구성
• .step은 회색 톤의 숫자를 크게 강조하여 단계 구조를 시각화
• .imgArea는 이미지 영역으로, 40% 비율을 기본으로 함
• .txtArea는 콘텐츠 설명 영역이며, h4, .desc, <strong> 등을 활용해 강조 구문을 구분
• 반응형 구조로 모바일에서도 안정적인 스택 구조 유지
• 카드 수(1~4개 이상) 및 순서 구성은 유동적으로 조정 가능

 

 

 

 

 

 

html

<!-- he11 : 해결방안 제시 -->
<div class="he11">
  <div class="row">


    <!-- 카드 1 -->
    <div class="col-sm-12 col-md-10 col-lg-8 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he11/he11_img01.jpg" alt="국내산 활문어">
          </div>
          <div class="txtArea">
            <p class="step">01</p>
            <h4><strong>국내산 인증</strong>만을 고집합니다</h4>
            <p class="desc">
              통영·남해·흑산도 해역에서 잡은<br>
              <strong>진짜 자연산 돌문어</strong>만 선별.<br>
              원산지 속일 틈 없는 빠른 유통.
            </p>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 2 -->
    <div class="col-sm-12 col-md-10 col-lg-8 mx-auto">
      <div class="box">
        <div class="box_inner reverse">
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he11/he11_img02.jpg" alt="문어 신선도">
          </div>
          <div class="txtArea">
            <p class="step">02</p>
            <h4>비린내 없는<br><strong>싱싱한 활문어</strong></h4>
            <p class="desc">
              당일조업 → 당일발송 시스템<br>
              <strong>쫄깃함과 고소한 풍미</strong> 유지.<br>
              생물이라면 이런 맛이죠.
            </p>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 3 -->
    <div class="col-sm-12 col-md-10 col-lg-8 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he11/he11_img03.jpg" alt="문어 품질 포장">
          </div>
          <div class="txtArea">
            <p class="step">03</p>
            <h4><strong>신선수산</strong>만의 포장 시스템</h4>
            <p class="desc">
              내용물 확인 가능한 <strong>투명 포장</strong><br>
              진공포장으로 <strong>신선도 유지</strong><br>
              믿을 수 있는 비주얼!
            </p>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 4 -->
    <div class="col-sm-12 col-md-10 col-lg-8 mx-auto">
      <div class="box">
        <div class="box_inner reverse">
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he11/he11_img04.jpg" alt="문어 검수 시스템">
          </div>
          <div class="txtArea">
            <p class="step">04</p>
            <h4>배송 전 확인하는<br><strong>촬영 검수 서비스</strong></h4>
            <p class="desc">
              고객 수령 전 사진 전송,<br>
              <strong>실물 확인 후 출고</strong>로 안심 구매.<br>
              수산 전문가가 직접 검수합니다.
            </p>
          </div>
        </div>
      </div>
    </div>


  </div>
</div>

 

 

 

 

css

/*****************************************************************
he11 : 해결방안 제시
*****************************************************************/
.he11 {
}

.he11 .row>div {
    padding: 0px;
    background-color: #eee;
    border-bottom: 1px dashed #fff;
    width: 100%;
}

.he11 .box {
    border-radius: 20px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    margin: 20px 20px;
    
}

.he11 .box_inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px;
}

.he11 .box_inner.reverse {
    flex-direction: row-reverse;
}

/*  */
.he11 .imgArea {
    flex: 0 0 40%;
    padding: 10px;
}

.he11 .imgArea img {
    width: 100%;
    border-radius: 10px;
}

/*  */
.he11 .txtArea {
    flex: 0 0 60%;
    padding: 10px;
    text-align: left;
}

.he11 .txtArea .step {
    line-height: 1.0;
    font-weight: 900;
    font-size: 4.0em;
    color: #ddd;
    /* display: none; */
}

.he11 .txtArea h4 {
    margin-bottom: 10px;
    font-weight: 800;
    font-size: 2.0em;
    color: #222;
}

.he11 .txtArea h4 strong {
    color: #ff7b00;
}

.he11 .txtArea .desc {
    font-size: 1.125em;
    color: #444;
    line-height: 1.4;
}

.he11 .txtArea .desc strong {
    font-weight: 700;
    color: #111;
}

/*  */
@media screen and (min-width: 768px) {
}