직접 만든 스크래치 쿠폰, HTML로 구현해봤어요
긁으면 할인율이 나타나는 쿠폰
온라인에서도 이런 이벤트를 구현할 수 있을까?
정답은 "가능해요!"
HTML과 JavaScript, 그리고 <canvas>만으로 실제 긁는 듯한 인터랙션을 만들 수 있었어요.
1. 제가 만든 코드
다음 코드는 실제 긁으면 할인 이미지가 드러나는 구조예요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>스크래치 쿠폰</title>
<style>
body {
margin: 0;
padding: 0;
background: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: sans-serif;
}
.coupon {
position: relative;
width: 320px;
height: 200px;
background: linear-gradient(135deg, #f55f68, #ef7e5b);
border-radius: 16px;
padding: 20px;
box-sizing: border-box;
color: white;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
}
.coupon h2 {
margin: 0;
font-size: 20px;
text-align: center;
}
.coupon p {
font-size: 14px;
text-align: center;
margin-top: 120px;
}
#text-img {
position: absolute;
top: 70px;
left: 50%;
transform: translateX(-50%);
width: 220px;
height: 60px;
border-radius: 8px;
z-index: 1;
}
#canvas {
position: absolute;
top: 70px;
left: 50%;
transform: translateX(-50%);
width: 220px;
height: 60px;
border-radius: 8px;
z-index: 2;
}
</style>
</head>
<body>
<div class="coupon">
<h2>특별 할인</h2>
<img id="text-img" src="(내 이미지 URL)" alt="할인쿠폰" />
<canvas id="canvas" width="220" height="60"></canvas>
<p>긁어서 할인율을 확인하세요</p>
</div>
<script>
window.addEventListener("load", () => {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#ccc";
ctx.fillRect(0, 0, canvas.width, canvas.height);
let isDrawing = false;
const getPosition = (e) => {
const rect = canvas.getBoundingClientRect();
const x = (e.clientX || e.touches?.[0]?.clientX) - rect.left;
const y = (e.clientY || e.touches?.[0]?.clientY) - rect.top;
return { x, y };
};
const draw = (x, y) => {
ctx.globalCompositeOperation = "destination-out";
ctx.beginPath();
ctx.arc(x, y, 15, 0, Math.PI * 2);
ctx.fill();
};
canvas.addEventListener("mousedown", () => isDrawing = true);
canvas.addEventListener("mouseup", () => isDrawing = false);
canvas.addEventListener("mousemove", e => {
if (!isDrawing) return;
const pos = getPosition(e);
draw(pos.x, pos.y);
});
canvas.addEventListener("touchstart", () => isDrawing = true, { passive: false });
canvas.addEventListener("touchend", () => isDrawing = false, { passive: false });
canvas.addEventListener("touchmove", e => {
e.preventDefault();
if (!isDrawing) return;
const pos = getPosition(e);
draw(pos.x, pos.y);
}, { passive: false });
});
</script>
</body>2. 어떻게 만들었냐고요?
1. HTML 파일로 저장
- 메모장을 열고 위 코드를 붙여 넣어요.
- scratch.html로 저장합니다.
- 인코딩은 반드시 UTF-8로!
2. GitHub에 업로드
- 새 저장소를 만들고 scratch.html 파일을 올려요.
- Settings > Pages에서 GitHub Pages 활성화
3. 티스토리 글에 iframe 삽입
<iframe src="(발급된 GitHub Pages 주소)" width="100%" height="300" frameborder="0"></iframe>3. 활용 Tip
- 이벤트 페이지, 스마트스토어 배너, 영수증 QR 연결 등 다양한 실무 적용 가능
- 쿠폰 텍스트 이미지는 여러 개 만들어 랜덤 출력도 가능
- 긁는 모션 자체가 이목을 끄는 참여형 프로모션 도구가 돼요
'신입 마케터 성장하기 > 지역상권 마케팅' 카테고리의 다른 글
| 소상공인을 위한 스크래치 쿠폰 마케팅 (1) | 2025.05.06 |
|---|---|
| 온라인 마케팅에 스크래치 복권 활용하는 법 (0) | 2025.05.06 |
| 실전 QR코드 따라 만들기 (0) | 2025.05.06 |
| QR [마케터 전용 전략 소비 쿠폰] 만들기 (0) | 2025.05.06 |
| QR코드 만들기, 3분이면 끝나요 (0) | 2025.05.05 |
