게임패드 테스트
브라우저에서 게임패드 버튼, 스틱, 트리거, 십자 방향키, 진동을 테스트하세요
왼쪽 스틱
오른쪽 스틱
트리거
진동 테스트
이벤트 기록
게임패드 테스트란?
게임패드 테스트는 W3C Gamepad API를 통해 컨트롤러가 브라우저에 보내는 신호를 읽어 실시간으로 보여 줍니다. 모든 버튼 누름, 아날로그 스틱 위치, 트리거 누름 깊이, 십자 방향키 방향, 진동 모터까지 한눈에 확인할 수 있습니다. 게임 시작 전 컨트롤러가 정상인지 점검하고, 눌림이 뭉치는 면 버튼을 잡아내고, 오래된 패드의 스틱 드리프트를 발견하고, 진동 모터 두 개가 모두 작동하는지 확인하는 가장 빠른 방법입니다. 페이지는 Xbox 스타일 화면 배치에서 각 입력을 하이라이트하고, 스틱과 트리거의 원시 값을 표시하며, 짧은 이벤트 기록을 남깁니다. Gamepad API는 사용자가 게임패드 버튼을 누른 뒤에야 컨트롤러를 노출하므로, 페이지는 먼저 아무 버튼이나 누르라고 안내합니다. 이는 브라우저 보안 규칙이지 고장이 아닙니다. 모든 동작은 브라우저에서 로컬로 처리되며, 입력 데이터는 기기를 떠나지 않습니다.
사용 방법
사용 방법
- USB 또는 Bluetooth로 게임패드를 연결하세요
- 게임패드의 아무 버튼이나 눌러 활성화하세요
- 버튼을 누르거나 스틱을 움직이면 화면 배치가 켜지는지 확인하세요
- 진동 버튼으로 진동 모터를 테스트하세요
- 이벤트 기록을 확인해 모든 누름이 인식되었는지 점검하세요
팁
- 초록 하이라이트는 입력이 브라우저에 정상적으로 도달했음을 의미합니다
- 컨트롤러는 버튼을 누른 뒤에만 나타납니다. 이는 브라우저 보안 규칙입니다
- 진동 지원은 브라우저와 게임패드에 따라 다릅니다. Firefox가 가장 폭넓게 지원합니다
- 스틱이 가만히 있을 때 0이 아닌 값이 나오면 드리프트 태그가 스틱 드리프트를 경고합니다
- 여러 게임패드가 연결된 경우 슬롯 칩으로 전환할 수 있습니다
활용 사례
기술 원리
브라우저는 W3C Gamepad API로 게임패드를 노출합니다. 컨트롤러는 navigator.getGamepads()로 얻는 Gamepad 객체로 표현되며, 이 함수는 최대 네 개의 슬롯을 반환합니다. 각 gamepad는 id 문자열(벤더와 제품), mapping 필드(Xbox 배치 기기는 'standard', 그 외는 빈 문자열), buttons 배열, axes 배열을 가집니다. 표준 매핑에서 buttons는 17개 항목을 가집니다. 면 버튼 4개(A/B/X/Y), 범퍼 2개(LB/RB), 아날로그 트리거 2개(LT/RT), Select/Start, 스틱 클릭 2개(L3/R3), 십자 방향키 4방향, Home/Guide 버튼입니다. 각 버튼은 .pressed(불린)와 .value(0에서 1, 트리거는 아날로그, 디지털 버튼은 0 또는 1)를 노출합니다. axes 배열은 -1에서 1 범위의 값을 네 개 가집니다. 왼쪽 스틱 X/Y, 오른쪽 스틱 X/Y 순입니다. 이 API는 이벤트 기반이 아니라 폴링 기반입니다. 페이지는 requestAnimationFrame 루프를 돌며 매 프레임 새 스냅샷을 읽습니다. 게임패드가 가만히 있을 때 불필요한 리렌더를 막기 위해 gamepad.timestamp가 바뀔 때만 상태를 갱신합니다. 이 타임스탬프는 새 입력 리포트가 올 때마다 증가합니다. 연결과 해제는 window의 gamepadconnected, gamepaddisconnected 이벤트로 전달됩니다. 보안상 gamepad 객체는 사용자가 게임패드 버튼을 누르기 전까지 null로 남아, 페이지가 방금 꽂은 패드를 소리 없이 읽을 수 없습니다. 진동은 선택 기능입니다. gamepad.vibrationActuator가 존재하면 playEffect('dual-rumble', { duration, weakMagnitude, strongMagnitude }) 호출로 두 모터를 구동합니다. Safari와 일부 Chromium 빌드는 이를 구현하지 않아, 페이지는 기능을 감지하고 지원하지 않으면 버튼을 비활성화합니다.
- navigator.getGamepads()는 최대 네 개의 슬롯을 반환합니다. 패드는 버튼을 누른 뒤에만 null이 아닙니다.
- 표준 매핑: buttons[0-3] 면 버튼, [4-5] 범퍼, [6-7] 아날로그 트리거, [8-9] Select/Start, [10-11] L3/R3, [12-15] 십자 방향키, [16] Home.
- axes[0-1]은 왼쪽 스틱(X, Y), axes[2-3]은 오른쪽 스틱이며, 범위는 -1에서 1입니다.
- 폴링 모델: requestAnimationFrame 루프가 스냅샷을 읽으며, gamepad.timestamp로 게이트하여 유휴 프레임은 아무 작업도 하지 않습니다.
- 진동은 gamepad.vibrationActuator.playEffect('dual-rumble', ...)로 동작합니다. 기능 감지가 필요하며 모든 브라우저가 지원하지 않습니다.
- gamepadconnected / gamepaddisconnected 이벤트로 연결과 해제를 알립니다. 패드의 .index가 슬롯을 식별합니다.
예시
면 버튼 누름
A 누르기 -> buttons[0].pressed = true, value = 1.0왼쪽 스틱 기울이기
왼쪽 스틱을 우상으로 밀기 -> axes[0] = 0.71, axes[1] = -0.68트리거 당기기
RT 절반 당기기 -> buttons[7].value = 0.50, pressed = false (임계값 미만)자주 묻는 질문
게임패드를 꽂아도 인식이 안 되는 이유는?
Gamepad API는 페이지가 연결된 기기를 소리 없이 핑거프린팅하지 못하도록, 사용자가 게임패드 버튼을 누르기 전까지 컨트롤러를 숨깁니다. USB나 Bluetooth로 패드를 연결하고 이 탭에 포커스를 둔 뒤 아무 버튼이나 누르면 상태 패널이 '연결됨'으로 바뀝니다. 이 활성화 단계는 브라우저 보안 규칙이지 고장이 아닙니다.
어떤 컨트롤러를 지원하나요?
브라우저가 표준 매핑으로 노출하는 모든 컨트롤러입니다. Xbox One/Series 컨트롤러, DualShock 4와 DualSense(대부분 시스템이 표준으로 매핑), 일반 USB 게임패드 대부분이 해당합니다. Bluetooth나 USB 어느 쪽이든 브라우저가 동일한 17버튼·4축 배치로 정규화합니다. 비표준 패드도 동작하지만 버튼 순서가 화면 라벨과 다를 수 있습니다.
진동이 작동하지 않는 이유는?
진동 지원은 환경에 따라 다릅니다. Firefox가 가장 폭넓게 지원하고, Chrome과 Edge는 최신 버전에서 지원하며, Safari는 구현하지 않습니다. 게임패드 자체도 gamepad.vibrationActuator를 노출해야 합니다. 페이지는 이를 감지하고 지원하지 않을 때 '지원되지 않음' 알림을 명확히 보여 주므로, 진동이 안 되는 것은 브라우저나 하드웨어 한계이지 이 도구의 버그가 아닙니다.
스틱을 안 만졌는데 값이 뜹니다. 고장인가요?
0에 가까운 작은 값은 정상적인 데드존 노이즈입니다. 가만히 둔 상태에서 어느 축이든 약 0.12를 넘기면 드리프트 태그가 주황색으로 바뀝니다. 이것이 전형적인 스틱 드리프트로, 가변저항 모듈 마모가 원인이며 보통 시간이 갈수록 악화되는 하드웨어 문제입니다. 게임을 탓하기 전에 이 도구로 먼저 확인할 수 있습니다.
데이터가 서버로 전송되나요?
아니요. Gamepad API는 브라우저에서만 읽습니다. 버튼 누름, 스틱 위치, 진동 명령은 기기를 떠나지 않으며 기록되거나 전송되지 않습니다.
DualSense 적응형 트리거, 터치패드, 자이로도 테스트할 수 있나요?
아니요. 표준 Gamepad API는 버튼, 축, 기본 진동만 노출합니다. DualSense 적응형 트리거, 정전식 터치패드, 모션 센서는 웹 표준에 포함되지 않습니다. 일부는 브라우저 지원이 매우 부족한 실험적 확장 뒤에 숨어 있어 브라우저에서는 안정적으로 테스트할 수 없습니다.