리듬 설계 / 설계 해설
리듬게임 화면의 가독성, 색과 방향·입력 영역의 설계
노트의 색과 화살표가 각각 무엇을 뜻하는지부터 살펴보자. 손·방향·입력 시점을 나누면 색과 효과를 바꿨을 때 남아야 할 정보가 분명해진다. 실제 게임 표시에서 출발해 대체 단서·대비·포인터 활성 영역의 검수로 연결한다.
기사 요약
- 화살표와 색이 전달하는 행동 정보를 각각 적는다.
- 대비는 필수 UI·그래픽의 인접색과 상태를 기준으로 본다.
- 표시 크기·활성 범위·손가림과 실제 조작을 나눠 확인한다.
Beat Saber · 공식 PC판 소개 화면
블록 색과 흰 방향 표식을 각각 읽어 보자. 손/세이버 선택과 베는 방향은 나누어 분석할 행동 정보다. 이 사진은 제품 전체의 설정과 접근성 평가를 대신하는 자료로 사용하지 않는다.
행동에 필요한 정보를 먼저 목록으로 만든다
Beat Saber 사진에는 블록 색과 흰 방향 표시가 함께 보인다. 색이 가리키는 손/세이버와 화살표가 가리키는 절단 방향은 서로 다른 정보다. 어떤 표시가 어떤 행동을 맡는지 분해하면 설정을 바꾼 뒤 남아야 할 정보도 정할 수 있다.
편집부 가상 노트는 손·방향·입력 시점을 요구한다. 손을 색으로만 구분한 경우 색을 줄인 뒤 손을 알 수 있는지, 방향 표시는 그대로 읽히는지 각각 확인한다. 다른 윤곽·문자·고정 위치 같은 추가 단서는 같은 행동 정보를 담도록 설계한다.
손·방향·시각마다 전달 경로를 확인한다
편집부 작성 도표 · 가상 노트의 정보 연결도. 색을 줄이면 손 정보에 대응할 단서를 추가로 확인한다.
축 대신 행동 정보→복수 표시 단서→보조 단서의 연결을 사용한다. 손 구분과 방향·시각 정보는 각각 설계한다.
작은 화면에서는 도표를 좌우로 밀어 볼 수 있다. 도표 크게 보기 ↗
도표의 값과 읽는 순서
- 손:색 → 문자L/R·윤곽 등 후보
- 방향:화살표
- 시각:목표선과 남은 거리
설정 변화 뒤 빠진 정보를 찾는다
색·음량·효과를 하나씩 바꾸고 손·방향·시각의 어느 정보가 줄었는지 적는다. 화살표가 남아 방향을 읽어도 손의 구분은 별도로 살펴야 한다. 제공 설정과 대체 단서는 실제 제품 안내에서 확인한다.
CAT BEAT 하루 화면의 A/D 글자, 대상 그림과 행동 문장은 같은 구분을 전달하는지 비교할 자료다. 회색 변환은 한 가지 확인 도구로 사용하고 관련 이용자의 실제 조작 관찰과 연결한다.
정보 손실을 찾는 질문
| 바꿀 조건 | 남아야 할 정보 | 대조할 자료 |
|---|---|---|
| 색 | 손/대상 구분 | 문자·윤곽·고정 위치 |
| 보상 효과 | 다음 목표의 방향/시점 | 같은 패턴의 프레임 |
| 배경 밝기 | 필수 그래픽 경계 | 인접색·상태·측정 조건 |
| 입력 방식 | 활성 대상과 다음 신호 | CSS영역·좌표·손가림 |
CAT BEAT : 비트를 깨워 · 개발 중 실제 화면
A 캣닢 먹기·장애물 쳐내기 D의 글자와 그림, 좌우 표식을 볼 수 있다. 보이는 원의 크기와 실제 활성 범위는 본문의 별도 설계도에서 나눈다.
다음 목표와 결과 효과의 우선순위를 정한다
다음 입력의 방향·윤곽·목표선이 필수 정보라면 보상 효과와 배경이 그 영역을 덮는 프레임을 조사한다. 같은 패턴·카메라에서 효과 강도를 바꾸는 비교와 배경 밝기를 바꾸는 비교를 따로 둔다.
SC1.4.11 해설의 3:1은 필요한 UI 식별·상태와 의미 그래픽을 인접색에서 구별하는 기준이다. 전체 사진의 평균 밝기보다 어떤 부분이 어떤 색과 맞닿는지 기록한다. 색값·상태·방법을 정하고 움직이는 장면의 인식은 별도 관찰한다.
관련 원자료: W3C WAI · SC1.4.11 Non-text Contrast ↗
보이는 원과 실제 포인터 대상을 나눈다
노트 그림이 작아도 화면 절반이 활성 영역일 수 있고, 큰 그림 안의 작은 버튼만 반응할 수도 있다. 표시 범위·실제 활성 범위·손가락 가림을 각각 표시하면 다음 신호와 조작의 충돌을 읽기 쉽다.
SC2.5.8 해설은 포인터 대상 24×24 CSS px 또는 간격 등 예외를 다룬다. 동등 기능·인라인·사용자 에이전트·필수 표현 등의 적용 조건도 함께 확인한다. 장식 노트, 키보드 과제와 VR 공간의 대상은 실제 입력 방식에 맞춰 평가한다.
관련 원자료: W3C WAI · SC2.5.8 Target Size Minimum ↗
그림·활성 영역·손가림의 세 층
편집부 작성 도표 · 가상 모바일 화면의 표시 원과 포인터 활성 영역, 가림 범위를 구분한 도식이다.
축척 없는 개념도. 실선 사각형=활성 영역, 작은 원=표시, 반투명 타원=가림 예시. 실제 크기는CSS px와 기기에서 확인한다.
작은 화면에서는 도표를 좌우로 밀어 볼 수 있다. 도표 크게 보기 ↗
도표의 값과 읽는 순서
- 화면 분할 입력과 개별 버튼 입력은 다른 활성 범위다.
- 24×24 CSS px는 포인터 대상과 예외를 함께 읽는다.
설정 조합과 입력 방식을 기록한다
소리·색 보조·효과·키보드 등 제공 기능을 정하고 각 조합에서 필수 정보가 남는지 검사한다. 대비 기준 검토와 빠른 반복 조작의 읽기성은 각각 확인할 과제다.
실제 활성 영역을 개발 화면에 표시하고 입력 좌표와 손가림, 대상 간격을 대조한다. 사용자 관찰에서는 필요한 정보 때문에 생긴 오류와 의도한 타이밍 도전을 나누어 기록한다. 접근성 설정이 게임 규칙과 어떤 관계를 갖는지도 안내한다.
같은 정보가 다른 단서로도 전달되는지 확인한다
검수표에는 요구 행동, 원래 단서, 설정 변경 뒤 남은 단서, 실제 수행을 적는다. 손·방향·시점을 따로 질문하면 표시 개수보다 전달 내용에 집중할 수 있다.
이번 게임 사진은 실제 표시의 관찰 자료이고, 활성 사각형과 손가림 도식은 편집부의 모바일 설계 모형이다. 기준·형상·이용자 관찰을 함께 남기고 개별 제품의 적합성 평가는 실제 적용 범위와 시험 근거에서 수행한다.
행동 정보별 검수표
| 요구 행동 | 원래 단서 | 변경 뒤 확인 |
|---|---|---|
| 손 선택 | 색·L/R 문자·위치 | 색이 달라도 같은 손을 고르는가 |
| 방향 선택 | 화살표·대상 모양 | 모양과 의미가 일관되는가 |
| 입력 시점 | 거리·목표선·소리 | 무음/효과 감소 뒤 남는 단서는 무엇인가 |
| 포인터 입력 | 실제 활성 범위 | 가림·간격·반복 조작이 가능한가 |
출처·확인 범위
2026.10.17 두 Understanding 문서의 대상·수치·인접색과 예외를 확인했다. 손/방향 분해와 모바일 범위는 자체 설계 모형이다. 실제 제품의 설정·활성 영역, 움직임 인식과 관련 이용자의 수행은 별도 조사·검증에서 기록한다.