아임웹 후기 슬라이드 만들기｜카카오톡 말풍선 스타일 HTML/CSS 코드

아임웹 후기 슬라이드 만들기｜카카오톡 말풍선 스타일 HTML/CSS 코드

홈페이지를 볼 때 방문자가 가장 빠르게 신뢰를 느끼는 요소 중 하나는 실제 고객 후기입니다.

특히 병원, 한의원, 법률사무소, 숙소, 스테이, 동물병원처럼 상담이나 예약이 중요한 업종은 후기 영역이 잘 보이는 것만으로도 문의 전환에 도움이 됩니다.

 

이번 글에서는 아임웹 HTML 위젯에 바로 넣어 사용할 수 있는 카카오톡 말풍선 스타일 후기 슬라이드 코드를 소개합니다.

HTML/CSS만으로 구현되기 때문에 별도의 JavaScript 없이도 자동으로 흐르는 리뷰 슬라이드를 만들 수 있습니다.

실제 구현 예시는 아래 페이지에서 확인할 수 있습니다.

 

실제 구현 URL

믓아 스튜디오

 

---

이 코드로 구현되는 기능 설명

이 코드는 홈페이지 안에 고객 후기 카드가 좌우로 자동 이동하는 슬라이드 영역을 만들어줍니다.

각 후기 카드는 별점, 말풍선 후기, 고객 이름으로 구성되어 있습니다.

📌 디자인 포인트
카카오톡 대화창처럼 노란색 말풍선을 사용해 친근한 느낌을 주고,
카드가 무한 반복되도록 같은 내용을 한 번 더 복제해 자연스럽게 흐르는 효과를 만들었습니다.
마우스를 슬라이드 영역에 올리면 애니메이션이 잠시 멈추기 때문에 방문자가 후기를 읽기에도 편합니다.

---

사용하면 좋은 상황

이 코드는 아래와 같은 홈페이지 제작에 잘 어울립니다.

사용 위치활용 예시

메인 페이지	고객 후기, 이용 후기, 제작 사례 강조
병원 홈페이지	예약 후기, 상담 후기, 치료 경험 소개
숙소 홈페이지	예약 문의 증가 후기, 방문 후기
법률사무소 홈페이지	상담 만족도, 진행 후기
웹디자인 포트폴리오	제작 후 고객 반응 소개

특히 홈페이지 첫 화면 아래쪽이나 문의 버튼 근처에 배치하면 방문자가 자연스럽게 신뢰를 느끼고 상담으로 이어질 가능성이 높아집니다.

---

적용 방법

아임웹에서 적용하는 방법은 간단합니다.

1. 아임웹 관리자에 접속합니다.
2. 디자인 모드로 이동합니다.
3. 원하는 위치에 HTML 위젯을 추가합니다.
4. 아래 전체 코드를 복사해 붙여넣습니다.
5. 저장 후 PC와 모바일 화면을 확인합니다.

코드는 HTML과 CSS가 함께 들어 있기 때문에 별도로 공통 코드에 나누어 넣지 않아도 됩니다.

단, 여러 페이지에서 반복해서 사용할 예정이라면 CSS는 공통 코드에 넣고, HTML 구조만 필요한 페이지에 넣어 관리해도 좋습니다.

---

전체 코드

<div class="kakao-review-wrap">
  <div class="kakao-review-track">

    <div class="chat-card">
      <div class="rating">★★★★★</div>
      <div class="bubble">진짜 문의가 많이 늘었어요 😭</div>
      <div class="name">한의원 원장님</div>
    </div>

    <div class="chat-card">
      <div class="rating">★★★★★</div>
      <div class="bubble">홈페이지 오픈 후 예약 문의가 2배 이상 늘었습니다.</div>
      <div class="name">독채펜션 대표님</div>
    </div>

    <div class="chat-card">
      <div class="rating">★★★★★</div>
      <div class="bubble">디자인도 마음에 들고 수정 대응도 빨랐어요.</div>
      <div class="name">법률사무소 대표변호사</div>
    </div>

    <div class="chat-card">
      <div class="rating">★★★★★</div>
      <div class="bubble">제작 과정이 체계적이라 편하게 진행했습니다.</div>
      <div class="name">동물병원 원장님</div>
    </div>

    <div class="chat-card">
      <div class="rating">★★★★★</div>
      <div class="bubble">상담 전환율이 확실히 좋아졌어요.</div>
      <div class="name">스테이 운영자</div>
    </div>

    <!-- 무한 반복용 복제 -->
    <div class="chat-card">
      <div class="rating">★★★★★</div>
      <div class="bubble">진짜 문의가 많이 늘었어요 😭</div>
      <div class="name">한의원 원장님</div>
    </div>

    <div class="chat-card">
      <div class="rating">★★★★★</div>
      <div class="bubble">홈페이지 오픈 후 예약 문의가 2배 이상 늘었습니다.</div>
      <div class="name">독채펜션 대표님</div>
    </div>

    <div class="chat-card">
      <div class="rating">★★★★★</div>
      <div class="bubble">디자인도 마음에 들고 수정 대응도 빨랐어요.</div>
      <div class="name">법률사무소 대표변호사</div>
    </div>

    <div class="chat-card">
      <div class="rating">★★★★★</div>
      <div class="bubble">제작 과정이 체계적이라 편하게 진행했습니다.</div>
      <div class="name">동물병원 원장님</div>
    </div>

    <div class="chat-card">
      <div class="rating">★★★★★</div>
      <div class="bubble">상담 전환율이 확실히 좋아졌어요.</div>
      <div class="name">스테이 운영자</div>
    </div>

  </div>
</div>

<style>
.kakao-review-wrap{
    width:100%;
    overflow:hidden;
    padding:36px 0;
    background:linear-gradient(180deg,#fffef7 0%,#ffffff 100%);
}

.kakao-review-track{
    display:flex;
    gap:22px;
    width:max-content;
    animation:kakaoSlide 32s linear infinite;
}

.kakao-review-wrap:hover .kakao-review-track{
    animation-play-state:paused;
}

.chat-card{
    width:300px;
    flex-shrink:0;
    background:#ffffff;
    border-radius:26px;
    padding:18px;
    box-sizing:border-box;
    border:1px solid #f0ead7;
    box-shadow:0 10px 28px rgba(0,0,0,0.07);
    transition:transform .3s ease, box-shadow .3s ease;
}

.chat-card:hover{
    transform:translateY(-6px);
    box-shadow:0 16px 36px rgba(0,0,0,0.11);
}

.rating{
    display:inline-flex;
    align-items:center;
    margin-bottom:10px;
    padding:5px 10px;
    border-radius:999px;
    background:#fff8d7;
    color:#F5B800;
    font-size:14px;
    letter-spacing:1px;
    font-weight:700;
}

.bubble{
    background:#FEE500;
    color:#222;
    padding:16px 17px;
    border-radius:6px 20px 20px 20px;
    font-size:15px;
    line-height:1.65;
    position:relative;
    margin-bottom:14px;
    word-break:keep-all;
    box-shadow:inset 0 -1px 0 rgba(0,0,0,0.05);
}

.bubble:after{
    content:'';
    position:absolute;
    left:0;
    top:0;
    transform:translateX(-8px);
    border-top:9px solid #FEE500;
    border-left:9px solid transparent;
}

.name{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:12px;
    font-size:13px;
    color:#666;
    font-weight:700;
}

.name:before{
    content:'';
    width:26px;
    height:26px;
    border-radius:50%;
    background:linear-gradient(135deg,#f3f3f3,#ddd);
    display:inline-block;
}

@keyframes kakaoSlide{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(-50%); }
}

@media(max-width:768px){
    .kakao-review-wrap{
        padding:28px 0;
    }

    .chat-card{
        width:250px;
        padding:16px;
    }

    .bubble{
        font-size:14px;
    }

    .rating{
        font-size:13px;
    }
}
</style>

 

---

코드 수정 포인트

1) 후기 문구 수정

후기 내용은 아래 부분을 수정하면 됩니다.

업종에 맞게 병원 후기, 숙소 후기, 제작 후기, 상담 후기 등으로 바꿔 사용할 수 있습니다.

<div class="bubble">진짜 문의가 많이 늘었어요 😭</div>

 

 

2) 고객 이름 수정

고객 이름은 아래 부분에서 수정합니다.

실제 이름을 노출하기 부담스럽다면 “한의원 원장님”, “스테이 운영자”, “브랜드 담당자”처럼 업종명으로 처리하는 것도 좋습니다.

<div class="name">한의원 원장님</div>

 

3) 카드 크기 수정

후기 카드의 가로 크기는 아래 코드에서 변경할 수 있습니다.

카드를 더 크게 보이게 하고 싶다면 320px, 더 작게 보이게 하고 싶다면 260px 정도로 조정하면 됩니다.

.chat-card{
    width:300px;
}

 

4) 슬라이드 속도 수정

슬라이드 속도는 아래 코드의 32s 부분을 수정하면 됩니다.

숫자가 작을수록 빠르게 움직이고, 숫자가 클수록 천천히 움직입니다.

예를 들어 40s로 바꾸면 더 느리게 흐릅니다.

animation:kakaoSlide 32s linear infinite;

 

5)말풍선 색상 수정

카카오톡 느낌의 노란색 말풍선은 아래 색상값으로 설정되어 있습니다.

브랜드 컬러에 맞게 변경하면 홈페이지 전체 톤과 더 자연스럽게 어울립니다.

단, 말풍선 꼬리 색상도 함께 바꿔야 합니다.

background:#FEE500;

border-top:9px solid #FEE500;

 

---

자주 발생하는 오류와 해결 방법

1. 슬라이드가 끊겨 보이는 경우

무한 슬라이드처럼 보이려면 후기 카드 세트를 한 번 더 복제해야 합니다.

현재 코드처럼 같은 카드들이 두 번 들어가 있어야 자연스럽게 이어집니다.

후기를 추가할 때도 첫 번째 세트와 복제 세트의 개수를 맞춰주는 것이 좋습니다.

 

2. 모바일에서 카드가 너무 크게 보이는 경우

모바일 화면에서는 아래 코드가 적용됩니다.

@media(max-width:768px){
    .chat-card{
        width:250px;
    }
}

모바일에서 더 작게 보이게 하고 싶다면 230px 정도로 줄이면 됩니다.

 

3. 말풍선 꼬리 색상이 다르게 보이는 경우

말풍선 배경색을 바꿨다면 .bubble:after의 border-top 색상도 같이 변경해야 합니다.

두 색상이 다르면 말풍선 꼬리만 다른 색으로 보일 수 있습니다.

 

4. 아임웹에서 여백이 이상하게 보이는 경우

아임웹 섹션 자체에 기본 여백이 들어가 있을 수 있습니다.

이 경우 코드 문제가 아니라 섹션 설정에서 상하 여백을 확인해야 합니다.

HTML 위젯 내부 여백은 아래 부분에서 조정할 수 있습니다.

.kakao-review-wrap{
    padding:36px 0;
}

 

---

 

홈페이지 제작 상담

믓아 스튜디오

홈페이지 제작에서 고객 후기는 단순한 장식 요소가 아닙니다.

방문자가 “이 업체에 맡겨도 괜찮을까?”라고 고민하는 순간, 실제 후기 섹션은 신뢰를 보완해주는 역할을 합니다.

이번 카카오톡 말풍선 스타일 후기 슬라이드는 아임웹 HTML 위젯에 바로 적용할 수 있고, HTML/CSS만으로 구현되기 때문에 초보자도 비교적 쉽게 사용할 수 있습니다. 웹디자인을 조금 더 자연스럽고 신뢰감 있게 만들고 싶다면 메인 페이지, 상담 유도 영역, 포트폴리오 하단 등에 활용해보시길 바랍니다.

 

아임웹 카드 호버 인터랙션 만들기

카드 호버 인터랙션 만들기 | HTML CSS만으로 구현하는 프리미엄 카드 디자인

 

아임웹 커버 스크롤 만들기

아임웹 커버 스크롤 만들기 | 애플 홈페이지 같은 섹션 덮기 효과 구현