모바일 스크래치 쿠폰 UX, 손가락 제스처부터 결과 노출까지

모바일 스크래치 쿠폰은 사용자가 화면 위의 포일을 손가락으로 긁어 할인이나 경품 결과를 확인하는 이벤트입니다.

사용 방법이 익숙하고 짧은 시간 안에 참여할 수 있어 다음 캠페인에 활용할 수 있습니다.

• 신제품 출시
• 회원가입 보상
• 구매 고객 혜택
• 팝업스토어 QR
• 출석 이벤트
• 매장 쿠폰
• 브랜드 캐릭터 수집

하지만 스크래치 이벤트는 단순히 이미지 위를 지우는 기능만 구현하면 되는 것이 아닙니다.

모바일에서는 손가락 제스처와 페이지 스크롤, 화면 크기, 네트워크, 브라우저 상태를 함께 고려해야 합니다.

다음과 같은 문제가 자주 발생할 수 있습니다.

• 긁으려고 했는데 페이지가 움직인다.
• 손가락과 지워지는 위치가 어긋난다.
• 너무 많이 긁어야 완료된다.
• 모서리가 남아 결과가 열리지 않는다.
• 화면을 잠갔다 돌아오면 결과가 사라진다.
• 결과는 당첨인데 쿠폰이 발급되지 않는다.
• 작은 휴대전화에서 카드가 잘린다.
• 인스타그램 인앱 브라우저에서 느리다.
• 사운드가 갑자기 크게 재생된다.
• 긁기 전에 결과가 노출된다.

좋은 모바일 스크래치 UX는 사용자가 설명을 길게 읽지 않아도 자연스럽게 긁고 결과와 쿠폰을 확인할 수 있어야 합니다.

모바일 스크래치 UX의 전체 흐름

이벤트 진입
→ 참여 가능 여부 확인
→ 스크래치 카드 표시
→ 손가락 제스처
→ 완료 판정
→ 결과 공개
→ 쿠폰 발급
→ 저장·복사
→ 제품 또는 매장 이동

각 단계가 서로 연결되어야 합니다.

1. 스크래치 영역이라는 사실을 바로 알려야 한다

사용자는 일반 이미지와 스크래치 영역을 구분할 수 있어야 합니다.

시각적 단서

• 은박 또는 금박 질감
• SCRATCH HERE
• 손가락 아이콘
• 반짝임
• 일부 긁힌 흔적
• 짧은 튜토리얼 애니메이션
• 테두리와 카드 형태

안내 문구

은색 포일을 손가락으로 긁어
오늘의 할인 쿠폰을 확인하세요.

문구가 너무 길면 읽기 전에 이탈할 수 있습니다.

핵심 행동과 결과만 보여주는 것이 좋습니다.

긁어서 오늘의 혜택 확인

2. 첫 터치부터 바로 반응해야 한다

사용자가 화면을 긁었는데 아무 변화가 없으면 기능이 고장 났다고 생각할 수 있습니다.

첫 손가락 움직임부터 즉시 흔적이 나타나야 합니다.

확인할 요소

• 터치 시작 지점
• 손가락 이동 속도
• 지워지는 원의 크기
• 화면 배율
• 기기 픽셀 비율
• 카드 위치
• 스크롤 위치

손가락과 실제 지워지는 위치가 어긋나면 조작이 불편합니다.

특히 반응형 화면에서 카드 크기가 변경되면 좌표 계산이 달라질 수 있습니다.

3. 긁기 브러시 크기를 적절하게 정한다

지워지는 영역이 너무 작으면 반복해서 문질러야 합니다.

작은 브러시
→ 많은 손가락 움직임
→ 피로
→ 완료 전 이탈

반대로 너무 크면 한두 번의 터치로 결과가 모두 공개됩니다.

큰 브러시
→ 긁는 경험 부족

브러시 크기에 영향을 주는 요소

• 카드 크기
• 휴대전화 화면
• 손가락 크기
• 결과 레이아웃
• 원하는 플레이 시간
• 완료 비율

실제 기기에서 자연스럽게 2~5초 정도 긁어 결과를 확인할 수 있는지 테스트할 수 있습니다.

캠페인에 따라 더 짧거나 길게 설계할 수 있지만 사용자가 반복 노동처럼 느끼지 않아야 합니다.

4. 페이지 스크롤과 긁기 동작을 구분한다

모바일 브라우저에서 손가락을 위아래로 움직이면 페이지가 스크롤됩니다.

스크래치 카드 위에서 긁을 때 페이지가 함께 움직이면 참여가 어렵습니다.

기본 원칙

스크래치 카드 내부
→ 긁기 동작

스크래치 카드 외부
→ 페이지 스크롤

카드 내부에서 제스처가 시작되면 해당 움직임을 스크래치로 처리할 수 있습니다.

주의할 점

페이지 전체의 스크롤을 완전히 막으면 사용자가 유의사항과 다음 내용을 볼 수 없을 수 있습니다.

스크래치 진행 중에만 제한하거나 카드 영역 안에서만 제어하는 방식이 필요합니다.

5. 카드 크기를 모바일 화면에 맞춘다

스크래치 카드는 너무 작아도 불편하고 너무 커도 한 화면에 들어오지 않습니다.

카드가 너무 작은 경우

• 긁기 영역이 작음
• 손가락이 결과를 가림
• 텍스트가 잘 안 보임
• 정확한 제스처 필요

카드가 너무 큰 경우

• 화면 밖으로 잘림
• 전체 결과를 한 번에 볼 수 없음
• 페이지 스크롤과 충돌
• 완료해야 할 영역이 커짐

모바일 세로 화면에서 주요 카드와 안내, 버튼이 자연스럽게 보이는지 확인해야 합니다.

화면 구성 예시

이벤트 제목
짧은 설명

[스크래치 카드]

참여 횟수·유의사항

핵심 카드가 첫 화면 아래로 너무 내려가지 않도록 할 수 있습니다.

6. 손가락에 결과가 가려지는 문제

사용자가 긁는 동안 손가락이 결과 문구를 가릴 수 있습니다.

특히 결과가 작은 글자로 중앙에만 배치되면 사용자가 무엇이 나왔는지 알기 어렵습니다.

개선 방법

• 결과 글자를 충분히 크게 사용
• 숫자와 핵심 혜택을 중앙에 배치
• 완료 후 카드 전체를 자동 공개
• 결과를 카드 아래에도 다시 표시
• 완료 모션 후 별도 결과 화면 제공

스크래치 카드
→ 결과 일부 발견
→ 완료
→ 별도 결과 패널

결과는 긁는 영역 안에서만 보여주지 않고 완료 후 명확하게 다시 안내하는 것이 좋습니다.

7. 완료 판정 기준을 설정한다

사용자가 어느 정도 긁었을 때 완료로 볼지 정해야 합니다.

면적 기준

전체 면적 중 70% 이상 지워짐
→ 완료

가장 일반적인 방식입니다.

특정 영역 기준

핵심 결과 문구가 있는 영역이 충분히 지워지면 완료할 수 있습니다.

시간 기준

일정 시간 동안 긁으면 자동 공개할 수 있지만 실제로 긁지 않아도 시간이 지나면 열릴 수 있으므로 주의해야 합니다.

적절한 완료 기준

완료 기준이 높으면 모서리까지 찾아서 긁어야 합니다.

완료 기준이 낮으면 한 번의 터치만으로 끝날 수 있습니다.

실제 사용자 테스트를 통해 조정하는 것이 좋습니다.

60%
70%
80%

기기와 카드 크기에 따라 체감이 달라집니다.

8. 완료 후 나머지 포일을 자동으로 제거한다

완료 기준에 도달하면 남은 영역을 자동으로 사라지게 할 수 있습니다.

70% 긁기
→ 완료 판정
→ 나머지 포일 페이드아웃
→ 결과 전체 공개

사용자는 남은 작은 조각을 찾지 않아도 됩니다.

자동 제거 시 모션이 지나치게 길면 결과 확인이 늦어질 수 있습니다.

짧고 명확하게 전환하는 것이 좋습니다.

9. 결과는 긁기 전에 저장한다

실제 쿠폰과 경품이 연결되는 이벤트라면 결과를 스크래치 완료 후에만 결정하는 것은 위험할 수 있습니다.

권장 흐름:

참여 버튼
→ 서버에서 참여 자격 확인
→ 당첨 결과 결정
→ 결과 저장
→ 가려진 스크래치 카드 표시
→ 사용자가 긁어 확인

이렇게 하면 다음 상황에서도 결과를 유지할 수 있습니다.

• 앱 전환
• 화면 잠금
• 새로고침
• 네트워크 중단
• 브라우저 종료
• 재접속

사용자가 다시 접속하면 같은 결과를 보여줄 수 있습니다.

10. 결과가 긁기 전에 노출되지 않게 한다

결과 데이터가 브라우저에 전달되면 개발자 도구나 화면 구조에서 미리 확인될 가능성을 고려할 수 있습니다.

일반적인 쿠폰 이벤트에서 어느 수준의 보안이 필요한지는 경품 가치와 운영 방식에 따라 달라집니다.

최소한 일반 화면에서 다음 문제가 없어야 합니다.

• 이미지 로딩 전에 결과가 보임
• 포일이 늦게 나타남
• 접근성 텍스트로 결과 노출
• 페이지 소스에 쿠폰 번호 노출
• URL에 결과 포함

결과를 서버에서 안전하게 처리하고 화면에는 필요한 시점에 표시해야 합니다.

11. 사운드와 진동은 선택적으로 사용한다

스크래치 사운드는 실제 포일을 긁는 느낌을 강화할 수 있습니다.

사용 가능한 효과

• 긁는 소리
• 반짝임 소리
• 완료 사운드
• 당첨 사운드
• 가벼운 진동

주의할 점

• 사용자 조작 전 자동 재생 제한
• 큰 소리
• 이어폰 사용
• 사운드 끄기
• 기기별 진동 차이
• 배터리
• 성능

사운드가 재생되지 않아도 완료 상태와 결과를 시각적으로 알 수 있어야 합니다.

12. 중간에 앱을 나갔다 돌아오는 경우

사용자는 이벤트 중 다음 행동을 할 수 있습니다.

• 문자 인증 확인
• 메신저 확인
• 전화 수신
• 화면 잠금
• 다른 앱 이동

복귀했을 때 다음 중 하나로 처리할 수 있습니다.

진행 상태 유지

긁던 상태 그대로 복원

기술적으로 복잡할 수 있지만 경험이 자연스럽습니다.

결과 카드 재표시

참여 결과는 저장됨
→ 새 카드로 다시 긁기

사용자가 여러 번 긁을 수 있지만 결과는 동일합니다.

결과 바로 공개

이미 참여 완료 상태
→ 결과 화면 표시

캠페인 정책과 구현 난이도에 따라 선택할 수 있습니다.

중요한 것은 재접속할 때 결과가 바뀌지 않는 것입니다.

13. 쿠폰 발급과 스크래치 완료를 구분한다

스크래치 결과와 쿠폰 발급은 서로 다른 처리일 수 있습니다.

스크래치 결과
→ 20% 쿠폰 당첨

외부 쿠폰 API
→ 발급 실패

사용자에게 참여 실패로 보여주면 당첨 결과까지 사라진 것처럼 느낄 수 있습니다.

처리 상태

• 결과 결정
• 쿠폰 발급 중
• 쿠폰 발급 완료
• 발급 실패
• 재발급 완료

안내 예시

20% 할인 쿠폰에 당첨되었습니다.

현재 쿠폰 발급이 지연되고 있습니다.
결과는 정상적으로 저장되었으며
잠시 후 다시 확인할 수 있습니다.

관리자에서 발급 실패 목록을 확인하고 재처리할 수 있어야 합니다.

14. 결과 화면은 스크래치 카드와 별도로 보여준다

완료 후 다음 내용을 명확하게 안내해야 합니다.

• 당첨 결과
• 할인율
• 쿠폰 번호
• 사용 기간
• 적용 제품
• 최소 구매 금액
• 복사 버튼
• 제품 링크
• 재참여 가능일
• 배송 정보

결과 화면 예시

축하합니다.

LUNE CLUB 신제품
20% 할인 쿠폰이 열렸습니다.

쿠폰 번호:
LUNE20

사용 기간:
8월 31일까지

적용 제품:
SUMMER SKIN DROP

[쿠폰 복사]
[신제품 보러 가기]

결과 문구와 버튼을 카드 안에만 넣으면 작은 화면에서 읽기 어려울 수 있습니다.

15. 쿠폰 복사 UX

쿠폰 번호를 사용자가 직접 길게 눌러 복사하게 하지 않는 것이 좋습니다.

[쿠폰 복사]

복사 후 피드백을 보여줍니다.

쿠폰 번호를 복사했습니다.

자동 적용 링크

가능하다면 쿠폰이 자동 적용되는 쇼핑몰 링크를 제공할 수 있습니다.

[쿠폰 적용하고 구매하기]

쇼핑몰 시스템과 연동 여부에 따라 구현 방식이 달라집니다.

16. 미당첨과 기본 보상

스크래치 후 꽝만 표시하면 이벤트 경험이 부정적으로 끝날 수 있습니다.

미당첨 예시

아쉽게도 오늘의 특별 경품은 놓쳤습니다.

대신 모든 참여자에게
무료 배송 쿠폰을 드립니다.

재참여 예시

내일 새로운 카드가 열립니다.

다음 참여 가능:
8월 6일 00:00

제품 연결

오늘의 카드에 숨겨진 제품은
LUNE CALM SERUM입니다.

[제품 이야기 보기]

기본 보상이나 다음 행동을 제공할 수 있습니다.

17. 경품 배송 정보 입력

실물 경품 당첨자에게만 배송 정보를 받을 수 있습니다.

스크래치 참여
→ 실물 경품 당첨
→ 배송 정보 입력

일반 참여자에게 주소를 미리 받지 않아도 됩니다.

배송 정보 화면

• 이름
• 휴대전화
• 주소
• 상세 주소
• 입력 기한
• 개인정보 동의
• 수정 가능 여부

완료 안내

배송 정보가 등록되었습니다.

8월 20일부터 순차 발송할 예정입니다.

배송 정보를 나중에 다시 수정할 수 있는지 정해야 합니다.

18. 인앱 브라우저 테스트

스크래치 이벤트는 SNS 광고에서 많이 유입될 수 있습니다.

테스트할 환경:

• 인스타그램 인앱 브라우저
• 카카오톡 인앱 브라우저
• 네이버 앱 브라우저
• Android Chrome
• iPhone Safari
• 삼성 인터넷

확인할 항목

• 터치 이벤트
• 페이지 스크롤
• 캔버스 성능
• 이미지 로딩
• 사운드
• 쿠폰 복사
• 외부 쇼핑몰 이동
• 로그인 복귀
• 화면 잠금 후 복원

PC 브라우저의 모바일 미리보기만으로는 실제 제스처 문제를 확인하기 어렵습니다.

19. 저사양 기기와 네트워크

포일 입자와 반짝임, 애니메이션이 많으면 저사양 기기에서 끊길 수 있습니다.

최적화할 요소

• 포일 이미지 용량
• 캔버스 크기
• 브러시 계산
• 입자 효과 수
• 프레임 속도
• 배경 영상
• 웹폰트
• 외부 스크립트

사용자 기기의 성능이 낮더라도 기본적인 긁기와 결과 확인은 가능해야 합니다.

효과를 줄인 대체 모드를 사용할 수도 있습니다.

20. 접근성 대안

손가락 제스처를 사용하기 어려운 사용자도 있을 수 있습니다.

가능한 경우 다음 대안을 제공할 수 있습니다.

[버튼으로 결과 확인]

또는 일정 시간이 지난 뒤 버튼을 표시할 수 있습니다.

긁기가 어렵나요?
[결과 바로 보기]

캠페인의 정책과 공정성을 유지하면서 대체 참여 방식을 검토할 수 있습니다.

사운드 없이도 상태를 알 수 있어야 하고 색상만으로 당첨과 미당첨을 구분하지 않는 것이 좋습니다.

모바일 스크래치 화면 상태

참여 가능

오늘의 카드를 긁어보세요.

진행 중

손가락을 움직여 결과를 확인하세요.

완료

오늘의 혜택이 열렸습니다.

이미 참여

오늘은 이미 참여했습니다.

내일 0시에 새로운 카드가 열립니다.

[오늘 결과 확인]

이벤트 종료

이벤트가 종료되었습니다.

발급받은 쿠폰은 마이페이지에서 확인할 수 있습니다.

오류

네트워크 연결이 불안정합니다.

참여 결과에는 영향을 주지 않았습니다.
다시 시도해 주세요.

데이터와 성과 측정

스크래치 이벤트에서는 다음 단계를 구분해서 측정할 수 있습니다.

페이지 방문
→ 스크래치 카드 노출
→ 첫 터치
→ 완료
→ 결과 확인
→ 쿠폰 복사
→ 제품 클릭
→ 구매

확인할 지표

• 스크래치 시작률
• 완료율
• 평균 완료 시간
• 결과별 인원
• 쿠폰 발급
• 쿠폰 복사
• 제품 클릭
• 구매
• 재참여
• 기기별 오류
• 브라우저별 완료율

완료율이 특정 브라우저에서 낮다면 제스처와 성능 문제를 확인해야 합니다.

스크래치 QA 시나리오

1. 정상 참여
2. 첫 터치 후 앱 이동
3. 긁는 도중 화면 잠금
4. 새로고침
5. 네트워크 중단
6. 쿠폰 API 실패
7. 이미 참여한 사용자
8. 이벤트 시작 전
9. 이벤트 종료 후
10. 경품 소진
11. 작은 화면
12. 저사양 Android
13. iPhone Safari
14. 인스타그램 브라우저
15. 카카오톡 브라우저

QA 체크리스트

[ ] 스크래치 영역을 바로 이해할 수 있다.
[ ] 첫 터치부터 흔적이 나타난다.
[ ] 손가락과 지워지는 위치가 일치한다.
[ ] 브러시 크기가 적절하다.
[ ] 카드 내부에서 페이지가 움직이지 않는다.
[ ] 카드 밖에서는 스크롤할 수 있다.
[ ] 작은 화면에서도 카드가 잘리지 않는다.
[ ] 결과 글자가 손가락에 가려지지 않는다.
[ ] 완료 기준이 적절하다.
[ ] 완료 후 남은 포일이 자동 제거된다.
[ ] 결과가 긁기 전에 서버에 저장된다.
[ ] 새로고침해도 결과가 유지된다.
[ ] 쿠폰 발급 실패를 복구할 수 있다.
[ ] 쿠폰 복사 버튼이 정상 작동한다.
[ ] 결과 화면의 사용 조건이 명확하다.
[ ] 미당첨 후 다음 행동이 있다.
[ ] 실물 경품 당첨자만 주소를 입력한다.
[ ] 주요 인앱 브라우저에서 테스트했다.
[ ] 저사양 기기에서도 참여할 수 있다.
[ ] 스크래치 시작과 완료를 측정한다.

마무리

모바일 스크래치 쿠폰의 핵심은 예쁜 포일 효과가 아닙니다.

사용자가 불편 없이 다음 과정을 완료할 수 있어야 합니다.

긁기 시작
→ 자연스러운 제스처
→ 적절한 완료 판정
→ 명확한 결과
→ 쿠폰 발급
→ 복사 또는 구매

특히 다음 요소가 중요합니다.

• 스크롤과 긁기 충돌 방지
• 손가락 위치와 흔적의 일치
• 적절한 브러시와 완료 비율
• 결과 사전 저장
• 재접속 시 결과 유지
• 쿠폰 발급 실패 복구
• 실제 모바일과 인앱 브라우저 QA

이 기준을 충족하면 스크래치를 단순한 효과가 아니라 짧고 직관적인 모바일 브랜드 경험으로 만들 수 있습니다.