틀린 그림 찾기 온라인 이벤트, 모바일에서도 공정하게 만드는 UX

틀린 그림 찾기는 비슷한 두 이미지에서 서로 다른 부분을 찾는 관찰형 게임입니다.

이미지 A
+ 이미지 B
→ 다른 부분 찾기
→ 터치
→ 완료

사용 방법이 익숙하고 제품과 브랜드 이미지를 자연스럽게 오래 보게 만들 수 있습니다.

다음과 같은 캠페인에 활용할 수 있습니다.

• 신제품과 기존 제품 비교
• 리뉴얼 패키지 소개
• 팝업스토어 공간
• 시즌 룩북
• 캐릭터 캠페인
• 제품 기능 차이
• 브랜드 세계관

하지만 틀린 그림 찾기를 모바일 웹으로 만들면 공정성과 사용성 문제가 발생할 수 있습니다.

• 화면이 작은 기기에서는 차이를 보기 어렵습니다.
• 큰 기기에서는 더 쉽게 찾을 수 있습니다.
• 이미지 비율이 잘려 정답 위치가 달라질 수 있습니다.
• 손가락이 정답을 가립니다.
• 두 이미지가 세로로 멀리 떨어져 비교하기 어렵습니다.
• 터치 판정이 너무 좁습니다.
• 네트워크 속도에 따라 이미지가 늦게 나타납니다.
• 색상과 밝기가 기기마다 다르게 보입니다.
• 확대 기능이 사용자마다 다르게 작동합니다.

특히 경품과 점수, 순위가 연결된다면 기기 차이가 결과의 공정성에 영향을 줄 수 있습니다.

모바일에서도 공정한 틀린 그림 찾기를 만들려면 이미지 제작부터 배치, 터치 판정, 시간 측정, 힌트까지 함께 설계해야 합니다.

모바일 공정성에 영향을 주는 8가지 요소

1. 화면 크기
2. 이미지 배치
3. 이미지 해상도
4. 정답의 시각적 차이
5. 터치 판정 영역
6. 확대 기능
7. 타이머 시작 시점
8. 네트워크와 기기 성능

1. 정답 난이도를 기기 크기에 맞춘다

PC에서 쉽게 보이는 작은 차이가 모바일에서는 거의 보이지 않을 수 있습니다.

모바일에서 어려운 차이

• 2~3픽셀 크기 차이
• 아주 미세한 색상 차이
• 작은 글자의 변화
• 얇은 선 하나
• 화면 모서리의 작은 오브젝트
• 배경 패턴의 미세한 변화

모바일에 적합한 차이

• 오브젝트 추가·삭제
• 형태 변화
• 색상 차이
• 방향 변화
• 제품 패키지 요소 변화
• 캐릭터 표정 변화

모바일 사용자가 확대하지 않아도 기본적인 차이를 확인할 수 있어야 합니다.

2. 색상 차이만 정답으로 사용하지 않는다

기기마다 밝기와 색 표현이 다릅니다.

사용자의 시각 특성에 따라 색상 차이를 구분하기 어려울 수도 있습니다.

파란색
→ 조금 더 진한 파란색

이 차이만 정답으로 사용하면 공정성이 낮아질 수 있습니다.

색상과 형태를 함께 바꾸는 것이 좋습니다.

파란 원형 오브젝트
→ 빨간 사각형 오브젝트

또는 방향과 개수를 바꿀 수 있습니다.

색상만으로 정답 여부를 구분하지 않는 것이 좋습니다.

3. 이미지 배치 방식

좌우 배치

[이미지 A] [이미지 B]

PC에서는 비교하기 쉽습니다.

모바일에서는 각 이미지의 폭이 너무 작아질 수 있습니다.

적합한 경우

• 이미지 디테일이 단순함
• 가로형 화면
• 태블릿과 PC 중심
• 이미지 수가 적음

상하 배치

[이미지 A]

[이미지 B]

이미지를 더 크게 보여줄 수 있습니다.

하지만 두 이미지를 동시에 보기 어려워 스크롤을 반복해야 할 수 있습니다.

전환형 배치

하나의 공간에서 두 이미지를 전환합니다.

[원본]
[비교 이미지]

버튼이나 탭으로 빠르게 바꿉니다.

장점

• 이미지를 크게 표시
• 같은 위치를 비교
• 모바일에 적합

단점

• 전환 기억 필요
• 전환 애니메이션이 느리면 불편

슬라이더 비교

사용자가 슬라이더를 움직여 두 이미지를 비교합니다.

제품 전후 비교에는 적합하지만 틀린 그림 찾기 게임에서는 조작 난이도가 높을 수 있습니다.

구역 확대형

이미지를 여러 구역으로 나눠 같은 구역의 두 이미지를 나란히 보여줍니다.

전체 지도
→ 구역 선택
→ 두 이미지 비교

복잡한 장면에 사용할 수 있습니다.

모바일 우선 추천

정답이 많고 이미지가 복잡하다면 전환형이나 구역형이 적합할 수 있습니다.

정답이 크고 단순하다면 좌우 배치도 가능합니다.

실제 모바일 화면에서 비교 시간을 측정해 봐야 합니다.

4. 이미지 비율을 고정한다

기기마다 이미지가 다른 방식으로 잘리면 정답 위치가 달라질 수 있습니다.

기기 A
→ 전체 이미지 표시

기기 B
→ 양옆 일부 잘림

정답이 잘린 영역에 있을 수 있습니다.

권장 방식

• 이미지 전체가 보이도록 비율 유지
• 잘라내기보다 여백 허용
• 정답 좌표를 이미지 비율 기준으로 저장
• 기기별 크기만 변경

원본 좌표 비율
→ x 35%, y 62%

화면 크기가 달라도 같은 위치를 판정할 수 있습니다.

5. 이미지 해상도를 충분히 제공한다

저해상도 이미지를 모바일에서 확대하면 흐릿하게 보입니다.

반대로 지나치게 큰 이미지는 로딩이 느려질 수 있습니다.

고려할 요소

• 기본 화면 크기
• 확대 배율
• 파일 용량
• 네트워크
• CDN
• 이미지 형식
• 기기 픽셀 비율

적절한 해상도의 이미지를 제공하고 모바일용으로 최적화해야 합니다.

6. 두 이미지의 로딩 시점을 맞춘다

이미지 A는 먼저 나타나고 이미지 B는 늦게 나타나면 타이머와 사용자 경험이 불공정해질 수 있습니다.

타이머 시작
→ 이미지 B 로딩 중

권장 흐름:

두 이미지 로딩 완료
→ 준비 화면
→ 사용자가 시작 버튼
→ 타이머 시작

또는 두 이미지가 완전히 로딩된 시점부터 시간을 측정할 수 있습니다.

경품과 순위가 있다면 로딩 시간과 플레이 시간을 분리해야 합니다.

7. 타이머는 사용자의 시작 이후에 작동한다

페이지에 들어온 순간 타이머가 시작되면 네트워크와 기기 성능에 따라 불리해집니다.

권장 구조

게임 리소스 로딩
→ 참여 방법 확인
→ [시작]
→ 타이머

사용자가 준비한 뒤 시작할 수 있게 합니다.

자동 시작이 필요한 경우

이미지 로딩 완료와 화면 표시가 끝난 뒤 타이머를 시작해야 합니다.

8. 터치 판정 영역을 실제 차이보다 넓게 만든다

정답 오브젝트가 작으면 손가락으로 정확하게 누르기 어렵습니다.

보이는 차이
→ 작은 단추

터치 영역
→ 단추 주변까지 포함

판정 영역 설계

• 원형
• 사각형
• 다각형
• 이미지 비율 좌표

정답마다 다른 크기의 판정 영역을 설정할 수 있습니다.

너무 넓으면 근처를 아무렇게나 눌러도 정답이 됩니다.

실제 모바일 기기에서 적절한 범위를 검수해야 합니다.

9. 양쪽 이미지 어디를 눌러도 정답 처리한다

사용자는 원본과 변경 이미지 중 어느 쪽을 눌러야 하는지 혼란스러울 수 있습니다.

이미지 A의 차이 위치
또는
이미지 B의 차이 위치
→ 모두 정답 처리

두 이미지에서 같은 상대 좌표를 정답으로 인정하면 사용성이 좋아집니다.

한쪽만 눌러야 한다면 시작 전에 명확하게 안내해야 합니다.

10. 정답을 찾았을 때 양쪽에 표시한다

사용자가 한쪽 이미지를 눌렀다면 두 이미지의 같은 위치에 표시를 보여줄 수 있습니다.

이미지 A
→ 원 표시

이미지 B
→ 원 표시

이미 찾은 정답을 다시 찾지 않게 합니다.

표시 방식

• 원
• 체크
• 테두리
• 반짝임
• 번호

제품 이미지가 가려지지 않도록 표시를 너무 크게 만들지 않는 것이 좋습니다.

11. 오답 터치 처리

오답 페널티 없음

제품 관찰과 누구나 완료가 목적일 때 적합합니다.

시간 감소

경쟁형 게임에 사용할 수 있습니다.

오답
→ 3초 추가

기회 차감

오답 3회
→ 게임 종료

모바일 오터치와 작은 화면을 고려하면 강한 페널티는 공정성을 낮출 수 있습니다.

브랜드 캠페인에서는 오답 횟수만 표시하거나 가벼운 피드백을 제공하는 방식이 적합할 수 있습니다.

12. 확대 기능의 공정성

확대 기능을 제공하면 작은 화면에서도 차이를 찾기 쉬워집니다.

하지만 확대 가능한 사용자와 그렇지 않은 사용자 사이에 차이가 생기면 안 됩니다.

모든 사용자에게 동일한 확대 기능을 제공해야 합니다.

확대 방식

• 핀치 줌
• 확대 버튼
• 영역 선택
• 자동 확대

확인할 내용

• 최대 확대 배율
• 확대 중 이미지 이동
• 터치 판정 좌표
• 두 이미지의 같은 위치 동기화
• 원래 크기 복귀

두 이미지를 함께 확대하고 같은 위치로 이동하게 만들면 비교가 쉽습니다.

13. 기기 방향

가로 화면이 비교에 유리할 수 있습니다.

하지만 갑자기 화면 회전을 강제하면 이탈할 수 있습니다.

더 편한 비교를 위해
휴대전화를 가로로 돌려주세요.

가로 모드는 선택적으로 제공하고 세로 모드에서도 참여할 수 있게 하는 것이 좋습니다.

가로 전용 게임이라면 시작 전에 명확하게 안내해야 합니다.

14. 안전 영역과 브라우저 UI

모바일에서는 주소창과 하단 브라우저 바, 노치가 화면을 가릴 수 있습니다.

확인할 항목:

• 상단 타이머
• 하단 버튼
• 이미지 높이
• 전체 화면
• 인앱 브라우저
• 화면 회전 후 레이아웃

타이머와 남은 정답 수가 브라우저 UI에 가려지지 않아야 합니다.

15. 정답 난이도를 균형 있게 배치한다

정답 5개가 모두 매우 어렵거나 모두 같은 위치에 있으면 게임의 리듬이 약합니다.

난이도 구성

쉬운 정답 2개
보통 정답 2개
어려운 정답 1개

첫 정답은 빠르게 발견하게 하고 마지막 정답에서 힌트를 사용할 수 있습니다.

위치 분산

• 왼쪽
• 중앙
• 오른쪽
• 상단
• 하단

화면 전체를 관찰하게 만들 수 있습니다.

다만 가장자리의 작은 정답은 모바일에서 어려울 수 있습니다.

16. 제품 디테일을 정답으로 사용할 때

신제품과 기존 제품의 차이를 정답으로 만들 수 있습니다.

예시:

• 패키지 색상
• 로고 위치
• 캡 모양
• 제품 버튼
• 소재
• 구성품
• 기능 아이콘

장점

• 제품 차이를 직접 관찰
• 리뉴얼 요소 전달
• 상세 페이지 체류 증가

주의점

실제 제품에 존재하지 않는 가상의 차이를 만들면 사용자가 제품 정보를 오해할 수 있습니다.

게임용 차이와 실제 제품 기능을 구분하거나 실제 변경 사항을 사용하는 것이 좋습니다.

17. 정답 발견 후 설명

새로운 캡 디자인을 발견했습니다.

한 손으로도 쉽게 열 수 있도록
형태가 변경되었습니다.

정답이 제품 설명으로 이어집니다.

발견 팝업이 너무 길면 게임 흐름이 끊길 수 있으므로 짧게 보여주고 상세 정보는 결과 화면에 모을 수 있습니다.

18. 힌트 시스템

텍스트 힌트

제품이 놓인 테이블 근처를 살펴보세요.

영역 힌트

특정 구역이 짧게 반짝입니다.

자동 확대

정답 주변을 확대합니다.

정답 직접 표시

마지막 단계에서 사용할 수 있지만 게임의 의미가 줄어듭니다.

힌트 사용과 점수

순위형 이벤트라면 힌트 사용 시 시간을 추가하거나 점수를 낮출 수 있습니다.

누구나 완료하는 캠페인이라면 페널티 없이 제공할 수 있습니다.

19. 점수와 순위를 사용할까?

순위형

완료 시간
+ 오답
+ 힌트
→ 점수

장점:

• 경쟁
• 재참여
• 공유

주의점:

• 기기 성능
• 네트워크
• 화면 크기
• 부정 참여
• 자동화

완료형

모든 차이 찾기
→ 동일 보상

제품 관찰과 브랜드 경험이 목적이라면 완료형이 더 공정하고 운영하기 쉬울 수 있습니다.

20. 여러 난이도를 제공한다

EASY
→ 큰 차이 5개

HARD
→ 작은 차이 7개

난이도별 보상이 다르면 사용자의 기기와 시각 조건에 따라 불리할 수 있습니다.

기본 보상은 동일하게 제공하고 어려운 난이도는 선택적인 추가 콘텐츠로 둘 수 있습니다.

21. 재참여와 이미지 세트

같은 이미지를 다시 플레이하면 정답을 기억할 수 있습니다.

반복 참여가 필요하다면 여러 검수된 이미지 세트를 사용할 수 있습니다.

세트 A
세트 B
세트 C

무작위로 정답을 자동 생성하기보다 난이도와 모바일 화면을 검수한 세트를 제공하는 것이 좋습니다.

22. 성과 지표

• 게임 진입
• 시작
• 첫 정답 시간
• 정답별 발견률
• 완료 시간
• 오답 수
• 힌트 사용
• 완료율
• 재참여
• 제품 정보 클릭
• 쿠폰 발급

기기별 데이터

iPhone 완료율
Android 완료율
작은 화면 완료율
큰 화면 완료율

기기별 차이가 크다면 이미지와 판정 영역을 조정해야 합니다.

기획 양식

캠페인 목적:
이미지 장면:
정답 수:
정답 유형:
제품 연결:
이미지 배치:
모바일 방향:
확대:
터치 판정:
오답 페널티:
타이머:
힌트:
난이도:
보상:
재참여:
성과 지표:

QA 체크리스트

[ ] 모바일 기본 화면에서 정답을 확인할 수 있다.
[ ] 색상만으로 만든 정답이 없다.
[ ] 이미지 전체가 기기별로 잘리지 않는다.
[ ] 두 이미지가 모두 로딩된 뒤 시작한다.
[ ] 타이머가 로딩 시간과 분리된다.
[ ] 양쪽 이미지 어디를 눌러도 정답 처리된다.
[ ] 터치 판정 영역이 충분하다.
[ ] 찾은 정답이 양쪽 이미지에 표시된다.
[ ] 확대 상태에서 좌표가 정확하다.
[ ] 오답 페널티가 모바일 오터치를 고려한다.
[ ] 모든 정답의 난이도가 검수되었다.
[ ] 작은 화면과 큰 화면의 완료율 차이를 확인한다.
[ ] 인앱 브라우저에서 레이아웃이 정상이다.
[ ] 제품 설명과 실제 제품 정보가 일치한다.

마무리

모바일 틀린 그림 찾기의 공정성은 모든 사용자에게 같은 이미지를 보여주는 것만으로 확보되지 않습니다.

화면 크기
+ 이미지 비율
+ 터치 판정
+ 확대
+ 타이머
+ 기기 성능

이 조건을 함께 맞춰야 합니다.

점수 경쟁보다 제품 관찰이 목적이라면 강한 시간 제한과 오답 페널티를 줄이고, 누구나 충분히 찾을 수 있는 차이와 힌트를 제공하는 것이 좋습니다.