# 버튼 아트뿐만 아니라 히트 영역도 테스트해 보세요. > 대화형 경계에서 시각적 아트워크를 분리하고 터치 장치에서 크기, 간격 및 겹침을 확인하여 게임 컨트롤을 더 쉽게 맞출 수 있습니다. - URL: https://oneshotgems.ai/ko/topics/game-touch-targets - 카테고리: 게임 개발자용 - 유형: 가이드 - 업데이트일: 2026년 10월 5일 컨트롤은 크게 보일 수 있지만 실제 히트 영역은 아트워크의 아주 작은 부분입니다. 브라우저 게임에서는 대화형 범위를 의도적으로 정의하고 정확한 마우스 포인터뿐만 아니라 손가락을 사용하여 테스트합니다. 올바른 대상은 역할, 간격 및 주변 동작에 따라 다르지만 명중 영역이 명확하면 실수로 인한 실수가 줄어들고 입력을 추론하기가 더 쉬워집니다. ## 적중 영역에서 보이는 모양을 분리합니다. 일시 중지 버튼과 같은 작은 아이콘의 경우 클릭 가능한 컨테이너가 그려진 기호 너머로 확장되도록 합니다. 손가락이 모호하게 활성화되지 않도록 인접한 작업을 충분히 멀리 유지하십시오. 캔버스 게임에서는 개체를 그리고 동일한 레이아웃 데이터에서 개체의 히트 영역을 계산합니다. 별도의 코드 경로에 좌표를 복제하면 드리프트가 발생합니다. WCAG 2.2 성공 기준 2.5.8은 간격 및 동등한 컨트롤을 포함하여 정의된 예외와 함께 최소 24 x 24 CSS 픽셀을 사용합니다. 설계 상한이 아닌 접근성 요구 사항으로 평가하십시오. 움직이는 대상이나 주요 작업에는 더 많은 영역이 필요할 수 있습니다. 터치가 인식되는 위치를 표시하기 위해 색상이나 미묘한 테두리에만 의존하지 마세요. ## 실제 화면 크기에서 적중 테스트 확인 각 가장자리와 모서리 근처, 인접한 컨트롤 사이, 게임 영역이 확대·축소될 때 탭을 시험하세요. 화면에 보이는 컨트롤, DOM의 히트 영역, 게임 월드 좌표가 같은 동작을 가리키는지 확인합니다. 작고 움직이는 객체는 위험 요소와 충분히 떨어지도록 하면서 그림보다 히트 영역을 넓게 설정할 수 있습니다. 터치로 다양한 뷰포트 크기를 시험하세요. 마우스 포인터는 손가락보다 더 정밀하게 목표를 가리킬 수 있습니다. 포인터 좌표를 게임 영역의 좌표계로 변환하고 크기를 바꾼 뒤에도 올바른지 확인하세요. W3C 설명은 해당 기준과 예외를 다룹니다. ## 자주 묻는 질문 **모든 게임 목표를 최소 24픽셀로 만들어야 하나요?** WCAG 2.2 성공 기준 2.5.8은 포인터 입력 목표에 최소 24 × 24 CSS 픽셀을 요구하며 예외도 규정합니다. 기준을 확인하고 게임 상황에 따라 더 넓은 히트 영역을 선택하세요. **히트 영역이 그림보다 커도 되나요?** 네. 작은 아이콘 주변의 인터랙티브 영역을 넓히면 누르기 쉬워집니다. 다만 가까운 컨트롤을 명확히 구분하고 예측 가능한 결과를 제공해야 합니다. ## 궁금한 것을 더 찾아보세요 - [웹 게임의 터치 컨트롤 설계하기](https://oneshotgems.ai/ko/topics/touch-controls-for-web-games): 브라우저 제스처, 알아보기 쉬운 피드백, 명확한 포인터 상태를 고려해 터치 입력을 설계하면 휴대폰에서도 게임이 예측 가능하게 반응합니다. - [브라우저 게임의 반응형 레이아웃 만들기](https://oneshotgems.ai/ko/topics/responsive-game-layouts): 시뮬레이션 상태를 화면 크기에 연결하지 않고 게임 표면을 해당 컨테이너에 적용하고 변경되는 뷰포트에서 레이아웃을 테스트합니다. - [엄지 하나로 플레이하는 모바일 게임 설계](https://oneshotgems.ai/ko/topics/one-thumb-mobile-game-design): 엄지 하나로 가능한 조작으로 간추리고, 손의 위치와 화면을 가리는 범위를 고려한 뒤 실제로 휴대폰을 쥔 상태에서 플레이를 시험하세요. ## 추가 읽을거리 - [W3C: 대상 크기(최소)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum) - [MDN: 포인터 이벤트](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) --- 대표 페이지: https://oneshotgems.ai/ko/topics/game-touch-targets