실제 스크래치 쿠폰을 디자인하거나 제작 의뢰할 때,
긁는 영역이 어디에 위치하느냐에 따라 전달력이 확 달라져요.
그래서 직접 눈으로 비교하면서 볼 수 있도록,
아래처럼 HTML로 간단한 시각화 페이지를 만들어봤어요.
1. 이렇게 생긴 구조예요
- HTML과 CSS만 사용해서 제작
- 가로형(90×50mm)과 세로형(50×90mm) 쿠폰에 위치별로 스크래치 박스를 배치
- 실측은 아니지만, 디자인 구조 확인용으로 충분해요
2. 내가 작성한 코드
아래 코드를 복사해서 .html 파일로 저장하면 바로 확인할 수 있어요.
<!DOCTYPE html>
<html>
<head>
<style>
.scratch-container {
width: 100%;
max-width: 800px;
margin: 0 auto;
font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}
.scratch-title {
text-align: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.scratch-content {
background-color: #f5f5f5;
padding: 30px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.scratch-area {
display: flex;
flex-direction: column;
align-items: center;
}
.scratch-label {
font-size: 14px;
margin-bottom: 10px;
}
.scratch-box {
border: 1px solid #000;
background-color: white;
position: relative;
}
.scratch-mark {
position: absolute;
border: 1px solid #000;
background-color: white;
}
</style>
</head>
<body>
<div class="scratch-container">
<div class="scratch-title">스크래치 영역 안내</div>
<div class="scratch-content">
<!-- 90×50mm 우측 중앙 -->
<div class="scratch-area">
<div class="scratch-label">90×50mm 우측 중앙</div>
<div class="scratch-box" style="width: 180px; height: 100px;">
<div class="scratch-mark" style="width: 40px; height: 10px; right: 20px; top: 45px;"></div>
</div>
</div>
<!-- 90×50mm 우측 하단 -->
<div class="scratch-area">
<div class="scratch-label">90×50mm 우측 하단</div>
<div class="scratch-box" style="width: 180px; height: 100px;">
<div class="scratch-mark" style="width: 40px; height: 10px; right: 20px; bottom: 15px;"></div>
</div>
</div>
<!-- 90×50mm 중앙 하단 -->
<div class="scratch-area">
<div class="scratch-label">90×50mm 중앙 하단</div>
<div class="scratch-box" style="width: 180px; height: 100px;">
<div class="scratch-mark" style="width: 40px; height: 10px; left: 70px; bottom: 15px;"></div>
</div>
</div>
<!-- 50×90mm 중앙 하단 -->
<div class="scratch-area">
<div class="scratch-label">50×90mm 중앙 하단</div>
<div class="scratch-box" style="width: 100px; height: 180px;">
<div class="scratch-mark" style="width: 40px; height: 10px; left: 30px; bottom: 15px;"></div>
</div>
</div>
</div>
</div>
</body>
</html>3. 실무 활용 Tip
| 상황 | 추천 위치 |
| 고객이 긁는 재미를 강조하고 싶다면 | 중앙 하단 |
| 정보 전달이 핵심일 때 | 우측 하단 or 중앙 정렬 |
| 쿠폰 크기가 작을 경우 | 세로형(50×90mm) 추천 |
| 프린트 인쇄 시 편집 작업이 많은 경우 | HTML 구조로 시뮬레이션해서 제작 |
'마케터 실무도구 > Genspark 이미지 생성 AI' 카테고리의 다른 글
| AI 영상 시점과 시선 변화, 회전 효과 활용하기 (0) | 2025.05.07 |
|---|---|
| AI 영상 시점 종류 한눈에 보기 (0) | 2025.05.07 |
| 감성쿠폰 만들기 (0) | 2025.05.05 |
| 반응형 인테리어 쇼핑몰 디자인: 카테고리 메뉴와 제품 그리드 구성하기 (0) | 2025.05.05 |
| [Genspark Ai Slide] 관련 상품 팝업 슬라이드 만들기 (1) | 2025.05.05 |
