최종 목표: 사용자가 버튼을 밀면 쿠팡 상품 페이지로 이동하는 인터랙티브한 버튼을 만드는 것.
구성 요소:
- HTML: 버튼의 구조와 텍스트를 만듭니다.
- CSS: 버튼의 모양, 색상, 크기, 그리고 움직이는 효과를 만듭니다.
- JavaScript: 사용자의 마우스/터치 움직임을 감지해서 버튼이 밀리게 하고, 끝까지 밀었을 때 쿠팡 링크로 이동하게 합니다.
1. CSS 코드 (버튼의 디자인과 애니메이션 담당)
이 코드는 블로그 전체에 적용되는 디자인 규칙이므로, 워드프레스의 ‘추가 CSS’ 기능에 넣어주는 것이 가장 좋습니다.
📍 넣는 곳: 워드프레스 관리자 페이지 > ‘외모’ (Appearance) > ‘사용자 정의하기’ (Customize) > ‘추가 CSS’ (Additional CSS)
📋 CSS 코드:
/* 슬라이드 투 구매 버튼 전체 컨테이너 */
.swipe-to-buy-container {
width: 300px; /* 버튼 전체 너비 */
height: 50px; /* 버튼 전체 높이 */
background-color: #f0f0f0; /* 배경색 */
border-radius: 25px; /* 둥근 모서리 */
overflow: hidden; /* 넘치는 내용 숨기기 */
position: relative; /* 자식 요소 위치 기준 */
margin: 20px auto; /* 중앙 정렬 및 여백 */
cursor: pointer; /* 마우스 커서 변경 */
box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 그림자 효과 */
}
/* 슬라이드 트랙 (손잡이가 움직이는 배경) */
.swipe-track {
width: 100%;
height: 100%;
background-color: #e0e0e0;
border-radius: 25px;
position: absolute;
left: 0;
top: 0;
}
/* 슬라이드 손잡이 (사용자가 미는 부분) */
.swipe-handle {
width: 150px; /* 손잡이 너비 (컨테이너의 절반) */
height: 100%;
background-color: #4CAF50; /* 기본 녹색 */
color: white;
text-align: center;
line-height: 50px; /* 텍스트 세로 중앙 정렬 */
border-radius: 25px;
position: absolute;
left: 0;
top: 0;
cursor: grab; /* 마우스 커서 변경 */
transition: background-color 0.3s ease, left 0.3s ease; /* 부드러운 전환 효과 */
user-select: none; /* 텍스트 드래그 방지 */
font-weight: bold;
font-size: 1.1em;
}
/* 손잡이 드래그 중 커서 */
.swipe-handle:active {
cursor: grabbing;
}
/* 구매 완료 시 나타날 텍스트 */
.swipe-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-weight: bold;
font-size: 1.2em;
opacity: 0; /* 기본적으로 숨김 */
transition: opacity 0.3s ease; /* 부드러운 전환 효과 */
pointer-events: none; /* 숨겨져 있을 때 클릭 이벤트 무시 */
}
/* 슬라이드 완료 시 컨테이너 상태 변화 */
.swipe-to-buy-container.completed .swipe-track {
transform: translateX(100%); /* 트랙 숨기기 */
transition: transform 0.3s ease;
}
.swipe-to-buy-container.completed .swipe-handle {
transform: translateX(100%); /* 손잡이 숨기기 */
transition: transform 0.3s ease;
}
.swipe-to-buy-container.completed .swipe-text {
opacity: 1; /* 구매 완료 텍스트 나타나게 */
}
📋 수정된 CSS 코드:(CDN활용시, 카트 이모티콘)
css/* 슬라이드 투 구매 버튼 전체 컨테이너 - 쿠팡 느낌의 배경과 그림자 */
.swipe-to-buy-container {
width: 320px; /* 너비 살짝 늘림 */
height: 60px; /* 높이 살짝 늘림 */
background-color: #f0f0f0; /* 밝은 배경 */
border-radius: 30px; /* 더 둥근 모서리 */
overflow: hidden;
position: relative;
margin: 30px auto; /* 여백 늘림 */
cursor: pointer;
box-shadow: 0 8px 15px rgba(0,0,0,0.2), 0 0 0 2px rgba(255,255,255,0.5) inset; /* 깊이감 있는 그림자 + 내부 테두리 */
transition: all 0.3s ease; /* 모든 변화에 부드러운 전환 */
}
/* 컨테이너에 마우스 올렸을 때 (PC) */
.swipe-to-buy-container:hover {
box-shadow: 0 10px 20px rgba(0,0,0,0.3), 0 0 0 3px rgba(255,255,255,0.7) inset;
transform: translateY(-2px); /* 살짝 떠오르는 효과 */
}
/* 슬라이드 트랙 (손잡이가 움직이는 배경) - 쿠팡 느낌의 검정색 */
.swipe-track {
width: 100%;
height: 100%;
background-color: #333; /* 어두운 배경 */
border-radius: 30px;
position: absolute;
left: 0;
top: 0;
z-index: 1; /* 배경이므로 가장 아래 */
transition: transform 0.4s ease; /* 트랙 움직임도 부드럽게 */
}
/* 슬라이드 손잡이 (사용자가 미는 부분) - 쿠팡 주황색과 아이콘 */
.swipe-handle {
width: 160px; /* 손잡이 너비 (컨테이너의 절반) */
height: 100%;
background-color: #FF5F00; /* 쿠팡 주황색 */
color: white;
text-align: center;
line-height: 60px; /* 텍스트 세로 중앙 정렬 */
border-radius: 30px;
position: absolute;
left: 0;
top: 0;
z-index: 2; /* 손잡이가 배경 위로 올라오도록 */
cursor: grab;
transition: all 0.3s ease; /* 모든 변화에 부드러운 전환 */
user-select: none;
font-weight: 700; /* 더 굵은 폰트 */
font-size: 1.2em; /* 폰트 크기 키움 */
letter-spacing: 0.5px; /* 자간 살짝 넓힘 */
box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* 손잡이에도 그림자 */
font-family: 'Noto Sans KR', sans-serif; /* 폰트 변경 (워드프레스에 Noto Sans KR이 로드되어 있어야 함) */
display: flex; /* 아이콘과 텍스트 정렬을 위해 flexbox 사용 */
align-items: center; /* 세로 중앙 정렬 */
justify-content: center; /* 가로 중앙 정렬 */
gap: 8px; /* 아이콘과 텍스트 사이 간격 */
}
/* 손잡이 드래그 중 커서 */
.swipe-handle:active {
cursor: grabbing;
box-shadow: 0 2px 4px rgba(0,0,0,0.5); /* 클릭 시 그림자 변화 */
transform: scale(0.98); /* 클릭 시 살짝 줄어드는 효과 */
}
/* 구매 완료 시 나타날 텍스트 - 더 눈에 띄게 */
.swipe-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #343a40; /* 진한 회색 */
font-weight: 800; /* 아주 굵은 폰트 */
font-size: 1.3em; /* 폰트 크기 키움 */
letter-spacing: 1px; /* 자간 넓힘 */
opacity: 0; /* 기본적으로 숨김 */
z-index: 3; /* 완료 텍스트가 가장 위로 */
transition: opacity 0.4s ease;
pointer-events: none; /* 숨겨져 있을 때 클릭 이벤트 무시 */
font-family: 'Noto Sans KR', sans-serif;
}
/* 슬라이드 완료 시 컨테이너 상태 변화 */
.swipe-to-buy-container.completed .swipe-track {
transform: translateX(100%); /* 트랙 숨기기 */
transition: transform 0.4s ease;
}
.swipe-to-buy-container.completed .swipe-handle {
transform: translateX(100%); /* 손잡이 숨기기 */
transition: transform 0.4s ease;
}
.swipe-to-buy-container.completed .swipe-text {
opacity: 1; /* 구매 완료 텍스트 나타나게 */
}
2. HTML & JavaScript 코드 (버튼의 구조와 움직임 담당)
이 두 코드는 함께 작동해야 하므로, 워드프레스 글/페이지 편집기 내의 하나의 ‘사용자 정의 HTML’ 블록에 같이 넣어주는 것이 가장 좋습니다.
📍 넣는 곳: 워드프레스 글/페이지 편집 화면 > ‘+’ 버튼 클릭 > ‘사용자 정의 HTML’ (Custom HTML) 블록 추가 > 아래 코드 전체 붙여넣기
📋 수정된 HTML & JavaScript 코드:
html<!-- HTML 코드 시작 -->
<div class="swipe-to-buy-container">
<div class="swipe-track"></div> <!-- 배경 바 -->
<div class="swipe-handle"><i class="fas fa-shopping-cart"></i> 밀어서 구매</div> <!-- 움직이는 손잡이 -->
<div class="swipe-text">쿠팡으로 이동 중...</div> <!-- 완료 시 나타나는 텍스트 -->
</div>
<!-- HTML 코드 끝 -->
<!-- JavaScript 코드 시작 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const container = document.querySelector('.swipe-to-buy-container');
const handle = document.querySelector('.swipe-handle');
if (!container || !handle) { // 요소가 없으면 스크립트 실행 중단
return;
}
let isDragging = false;
let startX = 0;
let handleInitialLeft = 0;
const handleWidth = handle.offsetWidth;
const containerWidth = container.offsetWidth;
const maxDrag = containerWidth - handleWidth; // 손잡이가 최대로 움직일 수 있는 거리
// 드래그 시작 이벤트 핸들러 (마우스 또는 터치)
function startDrag(e) {
isDragging = true;
// 마우스 이벤트 또는 터치 이벤트에 따라 시작 X 좌표 설정
startX = (e.type === 'touchstart') ? e.touches[0].clientX : e.clientX;
handleInitialLeft = handle.offsetLeft; // 현재 손잡이의 왼쪽 위치 저장
handle.style.transition = 'none'; // 드래그 중에는 CSS transition 비활성화 (부드러운 움직임)
container.classList.remove('completed'); // 완료 상태 초기화 (다시 밀 수 있도록)
handle.innerHTML = '<i class="fas fa-shopping-cart"></i> 밀어서 구매'; // 텍스트 초기화 (아이콘 포함)
}
// 드래그 중 이벤트 핸들러 (마우스 또는 터치)
function doDrag(e) {
if (!isDragging) return; // 드래그 중이 아니면 아무것도 안 함
// 현재 X 좌표 설정
const currentX = (e.type === 'touchmove') ? e.touches[0].clientX : e.clientX;
let deltaX = currentX - startX; // 시작점으로부터 이동한 거리
// 손잡이의 새 위치 계산 (0px ~ maxDragpx 사이로 제한)
let newLeft = Math.max(0, Math.min(handleInitialLeft + deltaX, maxDrag));
handle.style.left = newLeft + 'px'; // 손잡이 위치 업데이트
}
// 드래그 종료 이벤트 핸들러 (마우스 또는 터치)
function endDrag() {
if (!isDragging) return; // 드래그 중이 아니면 아무것도 안 함
isDragging = false;
const finalLeft = handle.offsetLeft; // 드래그 종료 시 손잡이의 최종 위치
if (finalLeft >= maxDrag * 0.9) { // 손잡이가 거의 끝까지 밀렸을 경우 (90% 이상)
// 쿠팡 링크로 이동하는 로직!
handle.style.left = maxDrag + 'px'; // 손잡이를 끝까지 이동
container.classList.add('completed'); // 'completed' 클래스 추가하여 CSS 애니메이션 트리거
handle.textContent = '이동 중...'; // 텍스트 변경 (아이콘 없이)
// ⭐⭐⭐ 이 부분에 실제 쿠팡 상품 링크를 넣어주세요! ⭐⭐⭐
const coupangLink = 'YOUR_COUPANG_PRODUCT_LINK_HERE'; // <-- 이 부분을 수정하세요!
window.open(coupangLink, '_blank'); // 새 탭에서 링크 열기 (권장)
// 만약 현재 탭에서 이동하고 싶다면: window.location.href = coupangLink;
} else {
// 끝까지 밀지 못했으면 원래 위치로 되돌리기
handle.style.left = '0px';
handle.innerHTML = '<i class="fas fa-shopping-cart"></i> 밀어서 구매'; // 텍스트 초기화 (아이콘 포함)
}
handle.style.transition = 'left 0.3s ease'; // CSS transition 다시 활성화
}
// 이벤트 리스너 등록
handle.addEventListener('mousedown', startDrag);
document.addEventListener('mousemove', doDrag);
document.addEventListener('mouseup', endDrag);
handle.addEventListener('touchstart', startDrag);
document.addEventListener('touchmove', doDrag);
document.addEventListener('touchend', endDrag);
// 터치 드래그 시 기본 스크롤 동작 방지 (부드러운 드래그를 위해)
handle.addEventListener('touchmove', (e) => { e.preventDefault(); }, { passive: false });
});
</script>
<!-- JavaScript 코드 끝 -->
‘간지나는’ 슬라이드 버튼 (쿠팡 느낌 + 아이콘) 구현 가이드
준비물:
- Font Awesome 아이콘 라이브러리: 버튼에 쇼핑 카트 아이콘을 넣기 위해 Font Awesome을 사용할 거예요. 워드프레스 사이트에 Font Awesome을 로드해야 합니다.📍 Font Awesome 로드 방법: 워드프레스 관리자 페이지 > ‘외모’ (Appearance) > ‘사용자 정의하기’ (Customize) > ‘추가 CSS’ (Additional CSS) 에 아래 코드를 추가합니다. (또는 ‘Insert Headers and Footers’ 같은 플러그인을 사용해서
<head>태그 안에 직접 넣을 수도 있습니다.) - html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" />- 참고: 위 CDN 링크는 예시이며, 최신 버전의 Font Awesome CDN 링크는 Font Awesome 공식 웹사이트에서 확인하여 사용하시는 것이 좋습니다.
구현 단계별 요약:
- CSS 코드 복사: 위에 있는 CSS 코드를 복사하여 워드프레스 관리자 페이지의 ‘외모’ > ‘사용자 정의하기’ > ‘추가 CSS’ 에 붙여넣고 ‘게시’ 버튼을 클릭하여 저장합니다.
- HTML & JavaScript 코드 복사: 위에 있는 HTML 코드와 JavaScript 코드를 통째로 복사합니다.
- 워드프레스 글/페이지에 삽입:
- 새 글/페이지를 작성하거나 기존 글/페이지를 수정하는 화면으로 이동합니다.
- 버튼을 넣고 싶은 위치에 ‘+’ 버튼을 클릭하여 ‘사용자 정의 HTML’ 블록을 추가합니다.
- 복사한 HTML & JavaScript 코드를 이 블록 안에 붙여넣습니다.
- 쿠팡 링크 수정: JavaScript 코드 내의
const coupangLink = 'YOUR_COUPANG_PRODUCT_LINK_HERE';부분에서'YOUR_COUPANG_PRODUCT_LINK_HERE'대신 실제 쿠팡 상품 링크를 넣어주세요. - 저장 및 확인: 글/페이지를 ‘업데이트’ 또는 ‘게시’ 한 후, 실제 블로그 페이지에서 버튼이 잘 작동하는지 확인합니다.
Font Awesome 라이브러리를 워드프레스 웹사이트에 로드(버튼에 쇼핑 카트 아이콘 활용법)
단계별 설명:
- 워드프레스 관리자 페이지에 로그인합니다. (사용자님의 워드프레스 사이트 뒷마당으로 슝슝~ 이동해주세요!)
- ‘외모’ 메뉴를 클릭합니다. 좌측 메뉴 바에서 ‘외모’ (Appearance) 라는 메뉴를 찾아서 클릭해주세요.
- ‘사용자 정의하기’를 클릭합니다. ‘외모’ 메뉴를 클릭하면 나타나는 하위 메뉴 중에서 ‘사용자 정의하기’ (Customize) 를 클릭합니다. (이 메뉴는 웹사이트의 디자인을 실시간으로 미리 보면서 변경할 수 있는 곳이에요!)
- ‘추가 CSS’ 메뉴를 찾아서 클릭합니다. ‘사용자 정의하기’ 화면으로 들어가면 왼쪽에 여러 가지 테마 설정 메뉴들이 쭉 나타날 거예요. 이 메뉴들을 아래로 스크롤해서 보면 ‘추가 CSS’ (Additional CSS) 또는 ‘사용자 정의 CSS’ 라는 이름의 메뉴가 보일 거예요! 이걸 클릭합니다.
- Font Awesome CDN 링크 코드를 붙여넣습니다. ‘추가 CSS’ 메뉴를 클릭하면 오른쪽에 CSS 코드를 입력할 수 있는 빈 칸이 나타날 거예요. 이 칸에 아래 코드를 복사해서 붙여넣습니다.html🔑
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" /> - ‘게시’ 버튼을 클릭하여 저장합니다. 코드를 붙여넣은 후, 화면 왼쪽 상단이나 오른쪽에 있는 ‘게시’ (Publish) 버튼을 클릭하여 변경사항을 저장합니다. 이 버튼을 눌러야만 웹사이트에 실제로 적용된답니다!
⚠️ 중요 주의사항:
- 코드 삽입의 위험성: 이 방법은 워드프레스에 직접 커스텀 코드를 삽입하는 것이므로, 항상 사이트를 백업한 후 진행하시고, 문제가 발생할 경우를 대비해야 합니다.
- 성능 및 충돌: 너무 많은 커스텀 스크립트는 사이트 로딩 속도를 저하시키거나 다른 플러그인/테마와 충돌을 일으킬 수 있습니다.
- 고급 사용자 팁: JavaScript 코드를 ‘사용자 정의 HTML’ 블록에 직접 넣는 것은 간단하지만, 더 안전하고 효율적인 방법은 ‘Code Snippets’ 같은 플러그인을 사용하거나, 테마의
functions.php파일을 통해 별도의.js파일로 등록하는 것입니다. (이 방법들은 좀 더 전문적인 지식이 필요합니다.) - 반응형 디자인: 위 CSS 코드는 기본적인 디자인을 제공하며, 모바일 등 다양한 기기에서 최적화된 모습을 보이려면 추가적인 CSS 조정이 필요할 수 있습니다.
이제 사용자님의 블로그에 멋진 ‘밀어서 쿠팡으로 이동’ 버튼을 구현할 수 있을 거예요! 😉 방문자들이 신기해하고 클릭률도 높아질 수 있답니다!
밀어서 구매
쿠팡으로 이동 중…
