06. 아임웹 HTML 위젯 사용법｜초보자도 가능한 커스텀 코드 적용 방법
아임웹으로 홈페이지를 만들다 보면 기본 기능만으로는 원하는 디자인이나 기능을 구현하기 어려울 때가 있습니다.예를 들어,버튼을 더 예쁘게 만들고 싶을 때후기 슬라이드를 넣고 싶을 때문
meztahstudio.tistory.com
홈페이지를 제작할 때 가장 중요한 요소 중 하나가 바로 신뢰감입니다.
특히 병원 홈페이지 제작, B2B 기업 홈페이지, 랜딩페이지 제작처럼
“문의 전환”이 중요한 사이트에서는 후기 영역의 역할이 정말 큽니다.
이번 글에서는 아임웹 홈페이지에 바로 적용 가능한
프리미엄 후기 슬라이드 커스텀 코드를 공유합니다.
✔ 자동 무한 슬라이드
✔ 마우스 올리면 정지
✔ 좌우 흐림(블러) 효과
✔ 반응형 지원
✔ HTML/CSS만으로 구현 가능
실제로 아래 URL 형태의 구조로 제작된 디자인입니다.
코드 미리보기 :
https://meztahstudio.imweb.me/24?preview_mode=1
믓아 스튜디오
믓아 스튜디오는 브랜드의 본질을 시각적으로 재해석해, 감각적이고 구조적인 웹 경험을 만듭니다. 브랜딩 웹사이트, 클리닉·법률·기업 사이트, 크리에이티브 페이지 제작 전문.
meztahstudio.imweb.me
이 코드로 구현되는 기능
이 코드를 적용하면 아래 기능이 구현됩니다.
- 후기 카드가 자동으로 좌측 이동
- 무한 반복 슬라이드
- 카드 3개가 한 줄로 자연스럽게 노출
- 좌우 끝 카드가 흐리게 보이는 프리미엄 효과
- 마우스를 올리면 슬라이드 일시정지
- 모바일 반응형 자동 적용
- 후기 내용만 수정해서 바로 사용 가능
특히 “웹디자인 퀄리티”를 빠르게 올리고 싶을 때 굉장히 유용합니다.
사용하면 좋은 상황
이런 홈페이지 제작에 특히 잘 어울립니다.
- 병원 홈페이지
- 법률사무소 홈페이지
- B2B 기업 사이트
- 브랜드 랜딩페이지
- 포트폴리오 사이트
- 컨설팅 회사 홈페이지
- 아임웹 기반 기업 사이트
후기 섹션이 단순 텍스트만 있으면 다소 밋밋해 보일 수 있는데,
이런 슬라이드 구조를 넣으면 훨씬 전문적으로 보입니다.
적용 방법
적용 방법은 정말 간단합니다.
1. 아임웹에서 HTML 위젯 추가
아임웹 관리자 → 디자인 모드 → HTML 위젯 추가
2. 아래 전체 코드 붙여넣기
이번 글 하단의 전체 코드를 그대로 복사해서 붙여넣으면 됩니다.
별도의 JS 파일 연결 없이 바로 작동합니다.
3. 후기 문구만 수정하기
아래 부분만 수정하면 됩니다.
<p>“후기 문구 입력”</p>
<strong>카테고리 입력</strong>
예시:
<p>“상담 문의가 눈에 띄게 늘었습니다.”</p>
<strong>병원 홈페이지</strong>
전체 코드
<section class="motsa-review-section">
<!--
전체 후기 슬라이드 영역입니다.
- 가로 1280px 고정
- 배경색, 위아래 여백은 CSS의 .motsa-review-section에서 수정
-->
<div class="motsa-review-viewport">
<!--
실제로 화면에 보이는 슬라이드 창입니다.
overflow:hidden으로 바깥으로 나간 카드는 숨겨집니다.
-->
<div class="motsa-review-track">
<!--
카드들이 가로로 이어지는 줄입니다.
이 줄 전체가 왼쪽으로 움직이면서 슬라이드됩니다.
속도는 CSS의 animation: motsaReviewLoop 36s 에서 수정합니다.
-->
<!-- =========================
원본 카드 6개
실제 후기 내용은 여기 먼저 수정하세요.
========================== -->
<article class="motsa-review-card">
<div class="motsa-review-top">
<span class="motsa-review-badge">01</span>
<span class="motsa-review-stars">★★★★★</span>
</div>
<!-- 후기 문구 수정 위치 -->
<p>“첫 화면부터 신뢰감이 생기고, 문의 동선이 훨씬 명확해졌어요.”</p>
<!-- 후기 카테고리 수정 위치 -->
<strong>병원 홈페이지 제작</strong>
</article>
<article class="motsa-review-card">
<div class="motsa-review-top">
<span class="motsa-review-badge">02</span>
<span class="motsa-review-stars">★★★★★</span>
</div>
<p>“디자인만 예쁜 게 아니라 실제 고객이 이해하기 쉬운 구조로 바뀌었습니다.”</p>
<strong>B2B 기업 홈페이지</strong>
</article>
<article class="motsa-review-card">
<div class="motsa-review-top">
<span class="motsa-review-badge">03</span>
<span class="motsa-review-stars">★★★★★</span>
</div>
<p>“모바일에서 보기 편하고 상담 버튼까지 자연스럽게 이어져 만족합니다.”</p>
<strong>서비스 랜딩페이지</strong>
</article>
<article class="motsa-review-card">
<div class="motsa-review-top">
<span class="motsa-review-badge">04</span>
<span class="motsa-review-stars">★★★★★</span>
</div>
<p>“복잡했던 내용을 깔끔하게 정리해주셔서 브랜드가 훨씬 전문적으로 보여요.”</p>
<strong>컨설팅 브랜드</strong>
</article>
<article class="motsa-review-card">
<div class="motsa-review-top">
<span class="motsa-review-badge">05</span>
<span class="motsa-review-stars">★★★★★</span>
</div>
<p>“빠른 작업 속도와 디테일한 수정 반영이 특히 좋았습니다.”</p>
<strong>스타트업 홈페이지</strong>
</article>
<article class="motsa-review-card">
<div class="motsa-review-top">
<span class="motsa-review-badge">06</span>
<span class="motsa-review-stars">★★★★★</span>
</div>
<p>“기획부터 CTA까지 잡아주셔서 단순 제작보다 훨씬 만족도가 높았습니다.”</p>
<strong>전문직 홈페이지</strong>
</article>
<!-- =========================
복제 카드 6개
무한 슬라이드를 자연스럽게 만들기 위한 복사본입니다.
위 원본 카드와 내용이 반드시 같아야 합니다.
========================== -->
<article class="motsa-review-card">
<div class="motsa-review-top">
<span class="motsa-review-badge">01</span>
<span class="motsa-review-stars">★★★★★</span>
</div>
<p>“첫 화면부터 신뢰감이 생기고, 문의 동선이 훨씬 명확해졌어요.”</p>
<strong>병원 홈페이지 제작</strong>
</article>
<article class="motsa-review-card">
<div class="motsa-review-top">
<span class="motsa-review-badge">02</span>
<span class="motsa-review-stars">★★★★★</span>
</div>
<p>“디자인만 예쁜 게 아니라 실제 고객이 이해하기 쉬운 구조로 바뀌었습니다.”</p>
<strong>B2B 기업 홈페이지</strong>
</article>
<article class="motsa-review-card">
<div class="motsa-review-top">
<span class="motsa-review-badge">03</span>
<span class="motsa-review-stars">★★★★★</span>
</div>
<p>“모바일에서 보기 편하고 상담 버튼까지 자연스럽게 이어져 만족합니다.”</p>
<strong>서비스 랜딩페이지</strong>
</article>
<article class="motsa-review-card">
<div class="motsa-review-top">
<span class="motsa-review-badge">04</span>
<span class="motsa-review-stars">★★★★★</span>
</div>
<p>“복잡했던 내용을 깔끔하게 정리해주셔서 브랜드가 훨씬 전문적으로 보여요.”</p>
<strong>컨설팅 브랜드</strong>
</article>
<article class="motsa-review-card">
<div class="motsa-review-top">
<span class="motsa-review-badge">05</span>
<span class="motsa-review-stars">★★★★★</span>
</div>
<p>“빠른 작업 속도와 디테일한 수정 반영이 특히 좋았습니다.”</p>
<strong>스타트업 홈페이지</strong>
</article>
<article class="motsa-review-card">
<div class="motsa-review-top">
<span class="motsa-review-badge">06</span>
<span class="motsa-review-stars">★★★★★</span>
</div>
<p>“기획부터 CTA까지 잡아주셔서 단순 제작보다 훨씬 만족도가 높았습니다.”</p>
<strong>전문직 홈페이지</strong>
</article>
</div>
<!--
좌우 흐림 효과입니다.
왼쪽/오른쪽 끝 카드가 자연스럽게 흐려지게 만듭니다.
-->
<div class="motsa-edge motsa-edge-left"></div>
<div class="motsa-edge motsa-edge-right"></div>
</div>
</section>
<style>
/* =========================
전체 섹션 설정
========================== */
.motsa-review-section {
width: 1280px; /* 전체 슬라이드 가로 크기 */
margin: 0 auto; /* 가운데 정렬 */
padding: 80px 0; /* 위아래 여백 */
background: #f7f8fb; /* 전체 배경색 */
overflow: hidden; /* 튀어나온 요소 숨김 */
}
.motsa-review-viewport {
position: relative;
width: 1280px; /* 보이는 영역 가로 크기 */
overflow: hidden; /* 바깥 카드 숨김 */
}
/* =========================
슬라이드 움직임 설정
========================== */
.motsa-review-track {
display: flex; /* 카드를 가로 정렬 */
gap: 24px; /* 카드 사이 간격 */
width: max-content;
/*
36s = 슬라이드 한 바퀴 도는 시간
숫자가 클수록 느려지고, 작을수록 빨라집니다.
*/
animation: motsaReviewLoop 36s linear infinite;
will-change: transform;
}
/*
마우스를 올리면 슬라이드가 멈춥니다.
*/
.motsa-review-track:hover {
animation-play-state: paused;
}
/* =========================
카드 디자인 설정
========================== */
.motsa-review-card {
width: 410px; /* 카드 가로 크기 */
min-width: 410px; /* flex에서 카드 크기 고정 */
height: 250px; /* 카드 높이 */
padding: 30px; /* 카드 안쪽 여백 */
box-sizing: border-box;
border-radius: 26px; /* 카드 둥근 정도 */
background: #ffffff; /* 카드 배경색 */
border: 1px solid rgba(17, 24, 39, 0.08);
box-shadow: 0 18px 40px rgba(17, 24, 39, 0.06);
flex-shrink: 0; /* 카드가 줄어들지 않게 고정 */
}
.motsa-review-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 26px; /* 상단 정보와 후기 문구 사이 간격 */
}
.motsa-review-badge {
display: inline-flex;
align-items: center;
justify-content: center;
height: 30px;
padding: 0 12px;
border-radius: 999px;
background: #111827; /* 번호 배지 배경색 */
color: #ffffff; /* 번호 글자색 */
font-size: 12px;
font-weight: 700;
letter-spacing: -0.02em;
}
.motsa-review-stars {
font-size: 13px;
letter-spacing: 0.08em;
color: #f59e0b; /* 별점 색상 */
}
.motsa-review-card p {
margin: 0 0 26px;
font-size: 20px; /* 후기 문구 글자 크기 */
line-height: 1.65; /* 줄 간격 */
letter-spacing: -0.045em;
font-weight: 600;
color: #111827; /* 후기 문구 색상 */
}
.motsa-review-card strong {
display: inline-flex;
align-items: center;
height: 30px;
padding: 0 12px;
border-radius: 999px;
background: #eff4ff; /* 카테고리 배지 배경색 */
color: #2563eb; /* 카테고리 배지 글자색 */
font-size: 14px;
font-weight: 700;
letter-spacing: -0.03em;
}
/* =========================
좌우 가우시안 흐림 효과
========================== */
.motsa-edge {
position: absolute;
top: 0;
width: 180px; /* 흐림 영역 넓이 */
height: 100%;
z-index: 20;
pointer-events: none; /* 클릭 방해하지 않게 */
}
.motsa-edge-left {
left: 0;
/*
blur 숫자가 클수록 더 흐려집니다.
*/
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/*
배경색과 같은 색으로 자연스럽게 덮습니다.
섹션 배경을 바꾸면 여기 색상도 같이 바꿔야 합니다.
*/
background: linear-gradient(
90deg,
rgba(247,248,251,1) 0%,
rgba(247,248,251,0.92) 18%,
rgba(247,248,251,0.64) 52%,
rgba(247,248,251,0) 100%
);
mask-image: linear-gradient(
90deg,
#000 0%,
rgba(0,0,0,0.9) 25%,
rgba(0,0,0,0.45) 65%,
transparent 100%
);
-webkit-mask-image: linear-gradient(
90deg,
#000 0%,
rgba(0,0,0,0.9) 25%,
rgba(0,0,0,0.45) 65%,
transparent 100%
);
}
.motsa-edge-right {
right: 0;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: linear-gradient(
270deg,
rgba(247,248,251,1) 0%,
rgba(247,248,251,0.92) 18%,
rgba(247,248,251,0.64) 52%,
rgba(247,248,251,0) 100%
);
mask-image: linear-gradient(
270deg,
#000 0%,
rgba(0,0,0,0.9) 25%,
rgba(0,0,0,0.45) 65%,
transparent 100%
);
-webkit-mask-image: linear-gradient(
270deg,
#000 0%,
rgba(0,0,0,0.9) 25%,
rgba(0,0,0,0.45) 65%,
transparent 100%
);
}
/* =========================
무한 슬라이드 이동값
========================== */
@keyframes motsaReviewLoop {
0% {
transform: translateX(0);
}
/*
2604px 계산식:
카드 410px × 6개 = 2460px
카드 간격 24px × 6개 = 144px
총 2604px
카드 크기나 간격을 바꾸면 이 값도 같이 수정해야 합니다.
*/
100% {
transform: translateX(-2604px);
}
}
/* =========================
모바일 반응형
========================== */
@media (max-width: 1280px) {
.motsa-review-section {
width: 100%;
padding: 60px 20px;
box-sizing: border-box;
}
.motsa-review-viewport {
width: 100%;
}
.motsa-review-card {
width: 300px;
min-width: 300px;
height: auto;
padding: 26px;
}
.motsa-review-card p {
font-size: 18px;
}
.motsa-edge {
width: 80px;
}
}
</style>코드 수정 포인트
1. 슬라이드 속도 변경
아래 숫자를 수정하면 됩니다.
animation: motsaReviewLoop 36s linear infinite;
- 50s → 더 느리게
- 20s → 더 빠르게
2. 카드 크기 변경
width: 410px;
카드 가로 크기를 수정할 수 있습니다.
3. 배경색 변경
background: #f7f8fb;
후기 영역 전체 배경색입니다.
4. 카드 둥글기 변경
border-radius: 26px;
숫자가 클수록 더 둥글어집니다.
5. 별점 색상 변경
color: #f59e0b;
별 아이콘 색상을 변경할 수 있습니다.
자주 발생하는 오류와 해결 방법
1. 슬라이드가 움직이지 않아요
대부분 코드가 중간에 누락된 경우입니다.
특히 아래 부분이 빠지면 안 됩니다.
@keyframes motsaReviewLoop
2. 카드가 세로로 쌓여요
HTML 위젯이 아닌 일반 텍스트 영역에 넣은 경우가 많습니다.
반드시 “HTML 위젯” 안에 넣어주세요.
3. 모바일에서 카드가 너무 커요
아래 부분에서 크기를 줄이면 됩니다.
.motsa-review-card {
width: 300px;
}
마무리
후기 영역은 단순히 “리뷰를 보여주는 섹션”이 아니라
홈페이지의 신뢰도를 결정하는 핵심 요소입니다.
특히 아임웹 기반 홈페이지 제작에서는
이런 HTML/CSS 커스텀 코드만 잘 활용해도
퀄리티 차이가 굉장히 크게 느껴집니다.
앞으로도 홈페이지 제작, 웹디자인, 아임웹 커스텀 코드 관련 팁들을 계속 공유해보겠습니다 :)
💬 전환 중심 홈페이지 제작이 필요하신가요?
단순히 예쁜 디자인이 아니라,
방문자가 빠르게 이해하고 문의까지 이어지는 구조를 중요하게 생각합니다.
아임웹 기반 홈페이지 제작부터
HTML/CSS/JS 커스텀 코드, 랜딩페이지 설계, 인터랙션 디자인까지 함께 작업하고 있습니다.
홈페이지 제작 문의는 아래 링크를 통해 편하게 남겨주세요 :)
믓아 스튜디오
믓아 스튜디오는 브랜드의 본질을 시각적으로 재해석해, 감각적이고 구조적인 웹 경험을 만듭니다. 브랜딩 웹사이트, 클리닉·법률·기업 사이트, 크리에이티브 페이지 제작 전문.
meztahstudio.imweb.me
'아임웹 코드정리' 카테고리의 다른 글
| 아임웹 HTML 위젯 사용법｜초보자도 가능한 커스텀 코드 적용 방법 (0) | 2026.05.30 |
|---|---|
| 아임웹 입력폼 커스텀 | 입력폼을 하단 고정 문의바로 만드는 방법 (HTML/CSS/JS) (0) | 2026.05.29 |
| 아임웹 탭 메뉴 만들기｜버튼 클릭으로 섹션 전환하는 커스텀 코드 (0) | 2026.05.29 |
| 아임웹 기본 갤러리 커스텀 버튼 추가하는 방법 (HTML/CSS/JS 커스텀 코드) (0) | 2026.05.29 |
| 아임웹 홈페이지 접속 시 인트로 화면 만들기 | 아임웹 HTML/CSS/JS 코드 공유 (0) | 2026.05.27 |