[디자인블럭] he29 : 만족도 조사 – 데이터로 입증된 리얼 반응!

 

 

 

 

 

 

✅ [디자인블럭] he29 : 만족도 조사 – 데이터로 입증된 리얼 반응!

 

 

 

 

 

🔠 블럭개요

실제 고객 후기와 만족 수치를 시각화한 블럭입니다. 텍스트형 후기와 함께 퍼센트 수치를 그래프 형태로 보여줘 신뢰감을 극대화하며, 후기 기반 제품 설득에 강력한 도구로 활용됩니다.

 

 

 

 

 

📌 사용목적

• 고객의 실제 만족도 데이터를 시각적으로 강조
• 제품 신뢰도를 높이고 구매 결정에 도움 제공
• 수치 기반 후기 전달로 설득력 강화
• 후기 콘텐츠를 정돈된 형식으로 반복 활용 가능

 

 

 

 

 

🎨 디자인 특징

• 원형 퍼센트 뱃지와 바 그래프 동시 구성 – 시각적 신뢰 효과 배가
• 한 줄 리뷰 형태로 간결하면서 핵심만 전달
• 블럭 상단에 메인 타이틀 강조 – 후기 신뢰 메시지 전달
• 부드러운 베이지/골드 계열 컬러 조합 – 고급감 + 따뜻함 연출
• 10개 항목까지 대응 가능한 세로 리스트형 구성
• 반응형 구조 – 모바일에서도 자연스럽게 줄바꿈 정렬

 

 

 

 

 

❄️ 활용 예시

• 식품 브랜드 / 수산물 제품
“비린내 없고 식감 좋다는 말이 실제 고객 리뷰로 증명되니 신뢰됐어요.”
“포장이 깔끔하다는 후기 비율이 거의 99%여서 받기도 전부터 기대됐죠.”
→ 맛·식감·배송·포장 등 주요 소비 포인트에 대한 반응 수치화

 

• 뷰티 브랜드 / 클렌징/세럼
“피부 자극 없고 흡수력 좋다는 리뷰가 많아서 안심하고 주문했어요.”
“한 줄 후기지만 만족도 퍼센트가 옆에 있어 설득력이 훨씬 컸어요.”
→ 사용감, 성분 신뢰도, 재구매율 등 후기 기반 구매 설득에 최적

 

• 생활용품 / 주방도구 브랜드
“질기지 않고 부드럽다는 리뷰가 90% 넘는다니 써보고 싶어졌어요.”
“배송 후기까지 수치로 보여주니 쇼핑몰 자체 신뢰도도 올라갔어요.”
→ 실사용자 반응을 직관적으로 표현해 후기 검색 스트레스 감소

 

• 전자기기 / 소형가전
“한 줄로도 충분한 제품 만족도 정보! 숫자로 보이니 결정이 쉬워졌어요.”
“디자인, 성능, 포장 각각 만족도 퍼센트가 분리되어 있어 좋아요.”
→ 제품 성능, 조작성, 디자인 등 다양한 항목별 만족도 시각화

 

• 교육 / 강의 콘텐츠 브랜드
“이 강의를 듣고 좋았다는 비율이 96%면 저도 들어봐야겠죠.”
“후기 신뢰도가 바로 보여서 결제까지 오래 안 걸렸어요.”
→ 콘텐츠 만족도, 이해도, 실효성 등 학습자 후기 수치화로 설득력 강화

 

 

 

 

 

📢 마케팅 콘텐츠 확장 예시

• 상세페이지 후기 섹션에 배치
기존 한줄 후기 대신 퍼센트로 정리된 리뷰 블럭 삽입 → 전환율 증가

 

• SNS 후기 리포트 카드뉴스
“리뷰 만족도 TOP5” 콘텐츠 카드로 구성하여 바이럴 유도

 

• 리뷰 기반 블로그 콘텐츠
“실제 고객 만족도 데이터 공개!” 형식의 포스팅 콘텐츠에 적용

 

• 인스타그램 릴스/숏폼 영상
퍼센트 애니메이션 효과와 함께 후기를 짧은 영상으로 제작

 

• 구매 유도 팝업
“리뷰 만족도 98%! 지금 바로 확인하세요” 문구와 함께 팝업 노출

 

 

 

 

 

 

💻 HTML 설명

기본 구조
– .graphArea > li 형태로 한 줄당 한 후기 항목 구성
– 각 항목 내 info 텍스트, percent 수치 뱃지, bar 그래프로 구성됨

 

텍스트 구성
– .title : 상단 후기 섹션 제목으로 강조
– .info : 고객 후기 내용 (한 줄, 감성 + 기능 혼합 문구)
– .percent : 퍼센트 수치, 원형 뱃지로 시각적 강조

 

그래프 구성
– .bar > span : 퍼센트 수치에 따라 너비값 설정 (width: 98%)
– 색상은 #bfa156 (골드톤), 배경 바는 연회색(#ccc)

 

스타일 특징
– 원형 퍼센트 박스는 border-radius: 50%, 중앙 정렬
– 리스트 항목마다 border-radius: 999px로 카드형 디자인 유지
– 각 항목 여백 gap: 10px 적용으로 밀도 유지

 

반응형 구성
– 모바일 환경에서도 리스트 형태 유지되며 글자 가독성 확보
– 퍼센트 박스 크기 조절(@media screen and (min-width: 768px))로 반응형 완성

 

 

 

 

 

👉 커스터마이징 팁

• 항목 개수 조절 – 5개만 사용해도 미니멀하게 구성 가능
• 퍼센트 수치 애니메이션 – JS 활용해 수치 증가 효과 적용 시 시각적 몰입도 향상
• 컬러 커스터마이징 – 브랜드 컬러에 맞게 그래프 컬러(#bfa156) 수정 가능
• 기준 설명 추가 – 퍼센트 산출 기준 하단에 공지형 문구 삽입 가능
• 리뷰 필터링 – 제품 카테고리별(맛, 포장, 배송 등)로 분리해 활용하면 더 효과적

 

 

 

 

 

 

html

<!-- he29 : 만족도 조사 -->
<div class="he29">
  <div class="row">
    <div class="col-12 col-md-12 col-lg-8 mx-auto">
      <div class="box">
        <div class="box_inner">


          <div class="txtArea">
            <p class="title">
              한 번 먹어본 사람들의<br>
              <strong>리얼 후기</strong>
            </p>
          </div>


          <ul class="graphArea">
            <li>
              <p class="info">탱글탱글한 식감이 진짜 최고였어요</p>
              <p class="percent">98<span class="symbol">%</span></p>
              <div class="bar"><span style="width: 98%;"></span></div>
            </li>
            <li>
              <p class="info">비린내 하나도 없고 깔끔해서 놀랐어요</p>
              <p class="percent">94<span class="symbol">%</span></p>
              <div class="bar"><span style="width: 94%;"></span></div>
            </li>
            <li>
              <p class="info">양념이 속까지 잘 배어 있더라고요</p>
              <p class="percent">89<span class="symbol">%</span></p>
              <div class="bar"><span style="width: 89%;"></span></div>
            </li>
            <li>
              <p class="info">질기지 않고 부드러워서 먹기 편해요</p>
              <p class="percent">91<span class="symbol">%</span></p>
              <div class="bar"><span style="width: 91%;"></span></div>
            </li>
            <li>
              <p class="info">비주얼부터 신선함이 느껴졌어요</p>
              <p class="percent">95<span class="symbol">%</span></p>
              <div class="bar"><span style="width: 95%;"></span></div>
            </li>
            <li>
              <p class="info">포장이 깔끔해서 받자마자 기분 좋았어요!</p>
              <p class="percent">99<span class="symbol">%</span></p>
              <div class="bar"><span style="width: 99%;"></span></div>
            </li>
            <li>
              <p class="info">배송 진짜 빨랐어요, 감동이에요</p>
              <p class="percent">97<span class="symbol">%</span></p>
              <div class="bar"><span style="width: 97%;"></span></div>
            </li>
            <li>
              <p class="info">가격 생각하면 퀄리티가 진짜 대박</p>
              <p class="percent">88<span class="symbol">%</span></p>
              <div class="bar"><span style="width: 88%;"></span></div>
            </li>
            <li>
              <p class="info">다음에도 꼭 다시 시킬 거예요!</p>
              <p class="percent">96<span class="symbol">%</span></p>
              <div class="bar"><span style="width: 96%;"></span></div>
            </li>
            <li>
              <p class="info">원산지 정보도 믿음직해서 안심</p>
              <p class="percent">90<span class="symbol">%</span></p>
              <div class="bar"><span style="width: 90%;"></span></div>
            </li>
          </ul>


        </div>
      </div>
    </div>
  </div>
</div>

 

 

 

 

 

 

css

/*****************************************************************
he29 : 만족도 조사
*****************************************************************/
.he29 {}

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

.he29 .box {
    padding: 50px 0;
    background-color: #eee;
}

.he29 .box_inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.he29 .txtArea {
    padding: 30px 0 30px;
}

.he29 .txtArea .title {
    position: relative;
    text-align: center;
    line-height: 1.1;
    font-size: 2.5em;
    font-weight: 700;
    color: #7a5b28;
}

.he29 .txtArea .title strong {
    font-weight: 800;
    color: #7a5b28;
}

.he29 .txtArea .rate {
    font-size: 2em;
    color: #bfa156;
    font-weight: 800;
    margin-left: 10px;
}

.he29 .graphArea {
    list-style: none;
    padding: 0;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 90%;
}

.he29 .graphArea li {
    position: relative;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 999px;
    padding: 20px 20px;
}

.he29 .graphArea li .info {
    margin: 5px 100px 5px 10px;
    line-height: 1.2;
    font-size: 1.250em;
    font-weight: 500;
    color: #222;
    white-space: normal;
    word-break: keep-all;
}

.he29 .graphArea li .percent {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 80px;
    height: 80px;
    background-color: #bfa156;
    color: #fff;
    font-size: 1.750em;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.he29 .graphArea li .percent .symbol {
    margin: 2px;
    font-weight: 700;
    font-size: 0.5em;
    color: #fff;
}

.he29 .graphArea li .bar {
    background-color: #ccc;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    margin: 5px 100px 5px 10px;
}

.he29 .graphArea li .bar span {
    display: block;
    height: 100%;
    background-color: #bfa156;
    border-radius: 3px;
}

/*  */
@media screen and (min-width: 768px) {
    .he29 .graphArea li .percent {
        width: 90px;
        height: 90px;
    }
}