[디자인블럭] he04 : Before & After 후기 – 눈으로 확인되는 실사용 변화를 강조하는 후기 블럭

 

 

 

 

 

 

✅ [디자인블럭] he04 : Before & After 후기 – 눈으로 확인되는 실사용 변화를 강조하는 후기 블럭

 

 

 

 

 

🔠 블럭개요

실제 사용자의 Before & After 사진과 후기 내용을 함께 배치해, 제품의 효과를 시각적으로 설득력 있게 보여주는 블럭입니다. 이미지 중심 레이아웃에 간결한 텍스트와 고객의 생생한 멘트를 결합해 구매 전환율을 높입니다.

 

 

 

 

 

📌 사용목적

• 제품 사용 전후의 변화를 명확하게 보여주고 싶은 경우
• 실사용자 후기 기반으로 신뢰도 있는 콘텐츠 구성
• 시각적 효과가 중요한 뷰티, 헬스, 패션, 기능성 제품의 효과 강조
• SNS 후기나 리뷰 콘텐츠의 연장선으로 활용 가능

 

 

 

 

 

🎨 디자인 특징

• 좌우 Before / After 이미지 비교 – 변화 포인트 즉각 인지
• .label 클래스를 이용해 이미지 하단에 Before/After 라벨 고정
• .highlight 클래스로 후기 내 핵심 문구 색상 강조
• 후기 사용자명을 실명 일부 마스킹 처리해 신뢰 + 개인정보 보호
• 카드형 개별 후기 박스 구조로 반복 배치에 유리
• .imgArea + .txtArea 구분으로 이미지와 텍스트 가독성 확보

 

 

 

 

 

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

• 뷰티 브랜드 (스킨케어/색조)
“확실히 붉은기 줄고, 피부결 매끈해져서 꾸준히 써보려구요!”
“화장 안 먹던 피부가 보송해져서 메이크업이 잘 먹어요.”
→ 여드름, 각질, 톤 개선 효과 등 시각적으로 전달 가능

 

• 생활용품 (발각질 제거, 미백 치약 등)
“각질이 사라지고 발이 진짜 부드러워졌어요!”
→ 사용 전후의 외관 차이를 이미지로 직접 설득

 

• 헬스/다이어트 제품
“전보다 붓기가 확 빠져 보이고, 라인도 예뻐졌단 소리 들어요.”
→ 체형 변화, 피부 상태 개선 등을 강조 가능

 

• 패션/속옷 브랜드
“보정 효과가 사진에서 바로 보이더라고요. 핏이 완전 달라요.”
→ 착용 전후 실루엣 변화로 제품 효과 직접 비교

 

• 헤어케어 제품 (탈모/윤기/볼륨)
“머리카락 볼륨이 달라졌고, 확실히 풍성해 보여요!”
→ 머리숱, 볼륨 개선 전후를 시각화로 표현 가능

 

 

 

 

 

📢 마케팅 콘텐츠 확장 예시

• SNS 릴스/쇼츠 콘텐츠
Before → After 순서로 변화를 보여주는 짧은 영상 콘텐츠 활용

 

• 상세페이지 전환 유도 구간
구매 직전 후기 구간에 배치해 실증 효과로 구매 설득

 

• 팝업/모달 리뷰 페이지
후기 이미지 확대 보기 가능하도록 팝업으로 구성

 

• 광고용 배너 시리즈
Before/After 한 컷만 따서 "변화를 경험하세요" 문구와 함께 배너로 사용

 

• 브랜드 블로그 후기 모음
실제 고객 후기와 연계해 콘텐츠 마케팅 자원으로 활용 가능

 

 

 

 

 

💻 HTML 설명

기본 구조
– .row 안에 .box 단위 카드 3개 구성 (그리드 기반)
– .titArea: 상단 제목 및 해시태그 문구 포함

 

이미지 구역
– .imgArea에 Before/After 비교 이미지 삽입
– .label.before와 .label.after를 사용해 이미지 하단에 라벨 배치

 

후기 텍스트 구역
– .desc: 후기 텍스트 본문
– .highlight: 후기 내 핵심 효과 부분 강조 처리 (컬러 및 굵기)
– .info: 작성자명은 마스킹 형태로 익명성 유지

 

디자인 요소
– 카드형 박스 .box에 border-radius와 그림자 효과로 부드러운 인상
– 라벨 색상: Before (블랙), After (딥그린 계열)로 구분
– .txtArea는 중앙 정렬 + 큰 폰트로 가독성 강화

 

반응형 디자인
– .col-12 col-md-6 col-lg-4 구조로 모바일 1단, 데스크탑 3단 구성

 

 

 

 

 

👉 커스터마이징 팁

 

• .highlight 컬러를 브랜드 컬러로 바꾸면 통일감 UP
• 카드 수를 조정하거나 슬라이드 형태로 변형 가능
• .label 라벨 위치를 상단으로 옮겨서 시각적으로 더 강조할 수도 있음
• 후기 텍스트 영역을 말풍선 형태로 꾸며 사용자 리뷰 느낌 부각
• 이미지 대신 영상 Before/After 클립도 적용 가능 (GIF 활용 포함)

 

 

 

 

 

 

 

html

<!-- he04 : Before & After 후기 -->
<div class="he04">
  <div class="row">


    <!-- 타이틀 영역 -->
    <div class="col-12">
      <div class="titArea">
        <h3 class="title">
          먼저 사용해 보신 분들의<br>
          100% 실제 사용 후기
        </h3>
        <p>
          #리얼리뷰 #확실한 효과
        </p>
      </div>
    </div>


    <!-- 카드 1 -->
    <div class="col-12 col-md-6 col-lg-4">
      <div class="box">
        <div class="box_inner">
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he04/he04_img01.jpg" alt="Before After 비교 이미지">
            <div class="label before">Before</div>
            <div class="label after">After</div>
          </div>
          <div class="txtArea">
            <p class="desc">
              남편 다리 모공각화증 때문에 샀는데 진짜 효과 있어요.<br>
              <span class="highlight">붉은 거 거의 없어졌고</span>, 요즘 반바지 잘 입고 다녀요!
            </p>
            <p class="info">- 오****님 -</p>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 2 -->
    <div class="col-12 col-md-6 col-lg-4">
      <div class="box">
        <div class="box_inner">
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he04/he04_img02.jpg" alt="Before After 비교 이미지">
            <div class="label before">Before</div>
            <div class="label after">After</div>
          </div>
          <div class="txtArea">
            <p class="desc">
              여드름 흉터가 연해졌고 각질이 덜 생겨요.<br>
              <span class="highlight">피부결이 확실히 부드러워졌어요.</span>
            </p>
            <p class="info">- 박****님 -</p>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 3 -->
    <div class="col-12 col-md-6 col-lg-4">
      <div class="box">
        <div class="box_inner">
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he04/he04_img03.jpg" alt="Before After 비교 이미지">
            <div class="label before">Before</div>
            <div class="label after">After</div>
          </div>
          <div class="txtArea">
            <p class="desc">
              발뒤꿈치 각질이 갈라졌었는데<br>
              <span class="highlight">이젠 매끈해서 맨발로도 당당해요!</span>
            </p>
            <p class="info">- 김****님 -</p>
          </div>
        </div>
      </div>
    </div>


  </div>
</div>

 

 

 

 

 

 

css

/*****************************************************************
he04 : Before & After
*****************************************************************/
.he04 {}

.he04 .row {
    padding: 50px 0px;
    background-color: #eee;
}

.he04 .row>div {
    padding: 0px;
    width: 100%;
}

.he04 .box {
    margin: 20px 20px;
    border-radius: 20px;
    overflow: hidden;
    background-color: #fff;
}

/*  */
.he04 .titArea {
    margin: 20px 0;
    text-align: center;
}

.he04 .titArea .title {
    font-weight: 700;
    font-size: 3.0em;
}

.he04 .titArea p {
    font-weight: 500;
    font-size: 2.0em;
    color: #666;
}

/*  */
.he04 .imgArea {
    position: relative;
}

.he04 .imgArea .label {
    position: absolute;
    bottom: 0;
    transform: translateY(0%);
    padding: 5px 10px;
    font-size: 1.250em;
    font-weight: 500;
    background-color: #111;
    color: #fff;
    z-index: 2;
}

.he04 .imgArea img {
    border-radius: 20px;
}

.he04 .imgArea .before {
    left: 0;
    border-top-right-radius: 10px;
    background-color: #111;
}

.he04 .imgArea .after {
    right: 0;
    border-top-left-radius: 10px;
    background-color: #246b5f;
}

/*  */
.he04 .txtArea {
    text-align: center;
    margin: 30px 10px;
}

.he04 .txtArea .desc {
    font-size: 1.5em;
    color: #333;
}

.he04 .txtArea .desc .highlight {
    color: #4CAF50;
    font-weight: 700;
}

.he04 .txtArea .info {
    margin-top: 10px;
    font-size: 1.0em;
    color: #666;
}

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