터치 레이아웃 / 액티브 지오메트리
활성 영역을 측정하십시오.
주변 건물들을 살펴보세요.
아트워크, 입력 영역 및 레이아웃 여유 공간은 각각 다른 질문에 대한 답을 제공합니다.
소개
자판기 제어 장치는 큰 이미지를 표시하지만 실제로는 작은 부분만 탭에 반응할 수 있습니다. 또 다른 제어 장치는 작아 보이지만 실제로 작동하는 영역은 더 넓을 수 있습니다. 구매자는 화면 사진만으로는 이러한 경우를 정확하게 구분할 수 없습니다. 구매 시 고려해야 할 사항은 단순히 화면 대각선이나 아이콘 디자인이 아니라 입력 대상 영역과 그 주변 영역입니다.
W3C WAI의 WCAG 2.2 성공 기준 2.5.8 '대상 크기(최소)'에 대한 이해 페이지에서는 포인터 대상의 최소 크기를 24x24 CSS 픽셀로 설명하고 있으며, 다섯 가지 예외 사항을 제시합니다. 또한 크기가 작은 대상에 대한 간격 평가 방법도 설명합니다. 이는 웹 콘텐츠에 대한 개념 설명이며, 자판기 터치스크린에 적용할 수 있는 물리적 밀리미터 단위의 규격이 아닙니다.
이 가이드는 정보 제공용 설명을 공급업체 검증 질문으로 변환합니다. 기기 목표 크기, 터치 정확도 또는 접근성 구현은 테스트되지 않았습니다. 공개된 WEIMI 제품은 소매업체의 제품 후보 목록일 뿐입니다. 적용 가능성, 구현 측정 및 모든 공식적인 결론은 실제 공급된 구성에 대한 평가에 포함됩니다.
빠른 답변
공급업체에게 확인된 각 제어 장치의 실제 포인터 활성 영역, 인접 대상 및 관련 인터페이스 상태를 식별해 달라고 요청하십시오.웹 콘텐츠 평가가 필요한 경우, CSS 픽셀 기하학 정보와 예외 사항에 대한 설명을 요청하십시오. 물리적 사용성 검토는 해당 측정과 별도로 진행해야 하며, 하드웨어 변환을 새로 만들어내서는 안 됩니다.
출처에 따르면 페이지 축에 맞춰 정렬된 24x24 CSS 픽셀 크기의 정사각형이 대상 영역 안에 완전히 들어가야 크기 요구 사항을 충족한다고 합니다. 하지만 특히 모서리가 둥글거나 특이한 모양의 경우, 해당 크기의 경계 상자만으로는 충분하지 않을 수 있습니다. 중요한 것은 실제 형상 자체이며, 가장 바깥쪽 점 사이의 거리만이 아닙니다.
크기가 작은 대상의 경우, 간격 예외 처리는 대상의 경계 상자를 중심으로 하는 가상의 지름 24 CSS 픽셀 원을 사용합니다. 이 원은 다른 대상이나 크기가 작은 다른 대상의 원과 교차해서는 안 됩니다. 이는 특정한 기하학적 조건을 검사하는 것이지, 모든 곳에 임의의 간격을 추가하라는 일반적인 지침이 아닙니다.
비교표
| 공개 형식 | 목표 질문 | 증거를 요청합니다 |
|---|---|---|
| 음료 보관용 AI 비전 스마트 냉장고 (1도어) | 확인된 접근 및 체크아웃 제어에서 활성화된 영역은 무엇입니까? | 제공된 인터페이스 상태 및 인접 대상 형상 |
| WM22 스낵 및 음료 자판기 | 실제 터치스크린 대상 영역은 아트워크와 어떻게 다른가요? | 입력 영역 증거는 순서대로 빌드하는 데 사용됩니다. |
| 두 개의 진열대, 더 다양한 선택: 스낵 및 음료 자판기 | 제시된 메뉴/결제 방식에 어떤 목표가 포함되어 있습니까? | 관련 부문 전반에 걸쳐 재고 관리가 확인되었습니다. |
이 제품들에 대해서는 목표 크기, 응답 영역 또는 적합성 결과가 검증되지 않았습니다. 최종 후보 목록은 소매 판매 방식을 비교한 것입니다. 목표 평가를 수행하기 전에 공급업체에 실제 고객 제어 방식을 확인하도록 요청하십시오. 사진으로 촬영한 캐비닛으로는 입력 영역의 기하학적 구조를 파악할 수 없습니다.
이 제품은 누가 구매해야 할까요?
터치스크린 레이아웃을 승인하거나, 연결된 결제 페이지를 검토하거나, 공급업체 인터페이스 시연을 비교할 때 이 브리핑 자료를 활용하세요. 사진과 디스플레이 사양을 받았지만, 인접한 고객 제어 장치가 예측 가능한 방식으로 작동할 수 있는지에 대한 증거가 필요한 구매자에게 도움이 됩니다.
인터페이스 소유자, 장비 구매자 및 연결 서비스 제공업체를 참여시키십시오. 적절한 평가자가 웹 기준의 범위를 결정해야 하며, 실제 시범 운영은 의도된 하드웨어와 환경에서 수행해야 합니다. 디자인 내보내기, 브라우저 미리보기 및 제공된 터치스크린은 각각 다른 증거를 제공합니다. 각 결론을 뒷받침하는 증거를 명시하십시오.
대상의 기하학적 구조는 제스처 조작 및 취소와 다릅니다. 컨트롤은 넓은 활성 영역을 가질 수 있지만 드래그로는 접근할 수 없는 영역이 있을 수 있으며, 탭으로 조작할 수 있는 옵션을 제공하면서도 다른 대상과 밀접하게 배치될 수 있습니다. 이전의 포인터 시연을 레이아웃의 완전한 증거로 간주하지 말고, 기하학적 구조 문제를 별도로 검토하십시오.
스마트 자동판매기를 평가하는 방법
저희는 공개된 제품 형식을 비교하고 W3C Understanding 설명을 활용하여 증거 요청을 구성합니다. 기기를 측정하거나 이벤트 영역을 검사하거나 사용자를 테스트하지는 않았습니다. "최고"는 조건부 소매업체 후보 목록을 추려낸 후 순서대로 정렬된 인터페이스를 검토한 결과이며, 독립적으로 검증된 접근성 순위가 아닙니다.
활성 대상을 찾습니다
제공업체에 확인된 컨트롤의 입력 영역을 보여달라고 요청하십시오. 보이는 아이콘, 아이콘을 감싸는 컨테이너, 그리고 실제 입력 영역을 구분해 주십시오. 필요한 경우, 스크린샷과 함께 구현 관련 측정 자료를 요청하십시오. 큰 장식 테두리는 활성 영역과 무관할 수 있으며, 작은 아이콘이라도 확장된 입력 영역이 있을 수 있으므로 이를 입증할 자료를 요청해야 합니다.
간격 예외를 신청하기 전에 크기를 평가하십시오.
해당 웹 콘텐츠에 대해 축 정렬된 정사각형이 대상 영역 안에 들어가는지 확인합니다. 들어가지 않으면 크기 부족 상태를 기록하고 관련 예외를 평가합니다. 이 설명은 지름이 24 CSS 픽셀인 원형 대상이 필요한 정사각형을 포함할 수 없는 경우를 보여줍니다. 지름과 정사각형의 크기를 서로 바꿔 사용할 수 없습니다.
이웃 국가와 변화하는 상태를 포함시키세요.
간격 평가에는 하나 이상의 독립적인 컨트롤이 필요합니다. 크기가 다른 컨트롤을 포함하여 해당 컨트롤의 위, 아래 및 옆에 있는 인접 타겟을 식별하십시오. 메뉴 또는 대화 상자가 나타난 후 관련 뷰를 다시 확인하십시오. 출처에 따르면 새로 나타나는 콘텐츠의 타겟은 해당 요구 사항의 적용을 받지만, 가려진 아래쪽 타겟은 가려져 있는 동안에는 제외됩니다.
주요 구매 요인
1. CSS 단위 및 물리적 조건
인용된 측정 기준은 CSS 픽셀입니다. 인터페이스가 어떻게 구현되었는지, 그리고 해당 자료가 어떤 렌더링 환경을 설명하는지 확인하십시오. 제공된 디스플레이, 설치 및 의도된 입력 조건을 적절한 방법을 통해 별도로 검토하십시오. 이 문서에서는 물리적 목표 치수를 설정하지 않으며 CSS 픽셀과 캐비닛 화면 하드웨어 간의 관계에 대한 어떠한 가정도 하지 않습니다.
2. 간격은 2차원적인 평가입니다.
설명의 원형 테스트는 인접한 대상을 고려하며, 여기에는 크기가 작은 다른 대상의 원형 영역도 포함됩니다. 행에 수평 여유 공간이 충분하더라도 바로 위나 아래에 문제가 있는 컨트롤이 있을 수 있습니다. 다음 행을 가리는 잘린 행이나 겹치는 동작이 아닌 실제 주변 레이아웃을 요청하십시오.
3. 큰 이웃도 여전히 포함됩니다
해당 자료에는 작은 컨트롤이 더 큰 활성 영역에 닿거나 겹치는 예시가 포함되어 있습니다. 작은 영역의 간격 원은 주변에 다른 작은 원이 없더라도 더 큰 영역과 교차할 수 있습니다. 공급업체에 두 활성 영역을 모두 식별해 달라고 요청하십시오. 또한, 큰 제품 이미지가 단순한 배경이 아니라 별도의 링크일 수도 있습니다.
4. 예외 사항에 대해서는 구체적인 증거가 필요합니다.
설명에는 간격, 동일 페이지의 동등한 컨트롤, 인라인 대상, 수정되지 않은 사용자 에이전트 컨트롤 및 필수적인 표현 방식이 나열되어 있습니다. 주장된 각 예외 사항에 대한 실제 이유를 요청하십시오. 별도의 컨트롤은 동등한 기능과 적절한 기하학적 구조를 가져야 합니다. 필수적인 예외 사항은 단순히 화면 밀도를 높이는 것을 선호하는 것이 아니라 기능이나 정보에 대한 평가를 필요로 합니다.
5. 확대/축소는 측정 방법을 대체할 수 있는 방법이 아닙니다.
출처에 따르면 CSS 픽셀 크기는 페이지 확대/축소에 따라 변하지 않으며, 사용자가 확대/축소하는 것만으로는 해당 요구 사항을 충족할 수 없다고 합니다. 적절한 확대 배율로 시연할 경우 원래 CSS 형상이 가려져서는 안 됩니다. 렌더링 조건을 보존하고, 주장하는 측정 방식과 별도로 레이아웃 동작을 검토해야 합니다.
6. 최소 요구 사항을 충족한다고 해서 사용성이 보장되는 것은 아닙니다.
설명에서는 매우 작고 고립된 목표물이 활성화하기 어려운 상태를 유지하면서도 간격 예외 조건을 충족할 수 있다고 언급합니다. 또한 더 큰 목표물을 사용하는 것이 바람직하다고 권장하며, 더 엄격한 강화 기준을 제시합니다. 해당 강화 기준은 본 평가에서 다루어지지 않았습니다. 구매자는 추가적인 사용성 목표를 지정할 수 있지만, 최소 소스 요구 사항과는 별도로 명시해야 합니다.
최고의 스마트 자동판매기
다음은 실제 공개된 제품 목록으로, 소매점 형태를 설명합니다. 목표 매장 구조, 간격 또는 터치 성능은 검증되지 않았습니다. 프로젝트에 적합한 소매점 형태를 선택한 후, 실제로 제공된 인터페이스에 필요한 증거를 확보하십시오.
음료 보관용 AI 비전 스마트 냉장고 (1도어)
AI 비전 냉장고(단일 도어형) 제품 설명에는 포장 음료 및 호환 가능한 스낵, 카메라 기반 계산대, 5단 선반 및 5개의 바구니가 포함되어 있습니다. 상단 스크린 또는 라이트박스와 선택 사양인 냉각 기능도 제공됩니다. 주스 제조 기능은 없습니다. 제공되는 디스플레이, 고객 접근 방식 및 결제 방식을 확인하십시오.
접근 및 체크아웃 제어를 확인하려면 공급업체에 활성 영역과 인접 대상을 보여달라고 요청하십시오. 카메라 인식은 대상의 크기를 파악하거나 모든 고객 입력을 차단하지 않습니다. 소매 기술 이름만 보고 결론을 내리기보다는 실제 연결된 인터페이스를 검토하십시오.
WM22 스낵 및 음료 자판기
WM22 제품 설명은 냉장 및 재고 관리 기능을 갖춘 터치스크린 방식의 스낵 및 음료 소매 시스템을 소개합니다. 나선형, 컨베이어, 직접 분사식, 행잉식 디스펜싱 방식 등 다양한 디스펜싱 옵션을 선택할 수 있습니다. 모든 옵션을 하나의 가상 구성으로 가정하기보다는 견적서에 포함된 메커니즘과 인터페이스를 반드시 확인하십시오.
주문한 터치스크린 구성에 대해서는 실제 메뉴와 확인된 오버레이를 포함하는 입력 영역 목록을 요청하십시오. 디스플레이 크기만으로는 개별 목표 크기를 결정할 수 없습니다. 사진은 배열을 보여줄 수 있지만, 결론을 뒷받침하기 위해서는 구성별 기하학적 정보와 구체적인 증거가 필요합니다.
두 개의 진열대, 더 다양한 선택: 스낵 및 음료 자판기
이중 캐비닛 구성은 메인 디스플레이와 나선형 통로가 보이는 보조 섹션으로 이루어져 있으며, 메뉴/결제 구성에 따라 두 개의 판매 공간을 제공합니다. 실제 경로 및 설치 세부 정보는 확인하십시오. 본 구성에는 독립적인 냉각 구역이나 특정 소프트웨어 아키텍처가 포함되어 있지 않습니다.
제시된 메뉴/결제 방식에 대해 각 관련 화면에 어떤 컨트롤이 속하는지, 그리고 레이아웃을 누가 제공하는지 문의하십시오. 두 개의 캐비닛이 두 개의 독립적인 인터페이스 또는 하나의 공유 카트를 구성하는 것은 아닙니다. 실제 제공된 여정에서 확인된 목표만 측정하십시오.
기능 비교
| 상품 리뷰 | 공급업체 증빙 자료 | 경계 |
|---|---|---|
| 액티브 셰이프 | 입력 영역은 아이콘 및 컨테이너와 구분됩니다. | 작품만으로는 충분하지 않습니다. |
| 최소 크기 | 대상 내의 축 정렬된 정사각형 | 경계 상자만으로는 오해를 불러일으킬 수 있습니다. |
| 간격 | 인접 목표물에 대한 원형 평가 | 보편적인 격차는 추론되지 않았습니다. |
| 동등한 제어 | 동일한 기능을 가진 동일 페이지 경로 | 대안을 제시하려면 실행 증거가 필요합니다. |
| 새로운 콘텐츠 | 관련 메뉴/대화 상자 대상 및 주변 상태 | 가려진 기본 제어는 별도로 처리됩니다. |
이 매트릭스는 수치적인 제품 점수가 아닌 증거 요청 자료로 활용하십시오. 소프트웨어 릴리스, 연결된 서비스 소유자 및 데모 환경을 보존하십시오. 해결되지 않은 형상은 일반적인 "터치 친화적" 문구로 대체하는 대신 승인 기록에 그대로 표시되어야 합니다.
비용 및 투자수익률 분석
본 검토는 예산 규모를 예시로 보여주는 것이며, 모든 수치와 결과는 가정에 기반합니다.구매자가 재고 관리에 350달러, 형상 및 상태 검토에 500달러, 현장 시범 관찰에 250달러를 할당한다고 가정합니다. 초기 지출은 1,100달러입니다. 연간 후속 비용은 300달러라고 가정합니다. 장비, 구현 및 공식 평가 비용은 제외됩니다.
민감도 분석 예시로, 추가 구매 완료와 관련된 연간 총 공헌이익이 1,400달러, 800달러 또는 250달러라고 가정해 보겠습니다. 이는 측정된 이익이나 예측치가 아닙니다. 가정된 연간 검토 비용을 차감하면 순 공헌이익은 1,100달러, 500달러 또는 -50달러가 됩니다. 실제 모델에서는 공헌이익과 수익을 구분해야 합니다.
| 가정된 연간 총 기여금 | 연간 300달러 검토 후 | 1,100달러에 대한 단순 회수 기간 |
|---|---|---|
| 1,400달러 | 미화 1,100달러 | 1.00년 |
| 800달러 | 500달러 | 2.20년 |
| 250달러 | -미화 50달러 | 이 모델에서는 긍정적인 투자 수익이 발생하지 않습니다. |
첫 해 검토 비용은 미화 1,400달러입니다. 단순 회수 기간 계산은 초기 지출을 예상되는 연간 순이익으로 나누는 방식으로 이루어지며, 시기, 자금 조달 및 기타 비용은 고려하지 않습니다. 실제 시범 사업에서는 목표 매장 배치 효과를 교통량, 상품 구색, 인터페이스 수정 및 결제 안정성과 구분해야 합니다. 이러한 가상 계산은 장비 회수 또는 인과적 개선을 입증하지 않습니다.
시나리오별 최적의 선택
포장 제품 카메라 결제:제품 구성에 적합한 형태라면 단문형 냉장고를 최종 후보 목록에 올리십시오. 원하는 형태를 요청하기 전에 제공된 접근 및 계산 방식에서 실제 고객이 사용하는 제어 방식을 파악하십시오.
터치스크린 방식의 간식 및 음료:주문한 메커니즘이 적합하면 WM22를 후보 목록에 추가합니다. 실제 빌드에서 활성 영역 및 인접 대상에 대한 증거(확인된 메뉴 또는 대화 상자 포함)를 요청합니다.
판매 가능한 공간 두 곳:현장 배치에 적합한 경우 이중 캐비닛 스테이션을 최종 후보로 고려하십시오. 캐비닛 개수를 기준으로 제어 구조를 추론하기 전에 실제 메뉴/결제 과정 및 제공업체 소유권을 확인하십시오.
응용 프로그램
견적 검토
입력 형상, 크기 증거, 인접 요소 및 관련 상태를 포함하는 대상 인벤토리를 첨부하십시오. 제안된 제어 사항은 포함된 기능과 별도로 표시하십시오. 공급업체에게 각 예외 사항을 문서화하고 평가 환경을 명시하도록 요청하십시오. 하드웨어 시범 운영 요구 사항은 웹 장치 측정값과 분리하여 관리하십시오.
파일럿 승인
적절한 방법과 의도된 하드웨어를 사용하여 합의된 조건 하에서 레이아웃이 작동 가능한지 검토하십시오. 관찰 결과를 완전한 적합성 결과로 제시하지 않고 기록해 두십시오. 이 문서에는 사용자 테스트, 오작동률 또는 기계 측정 결과가 포함되어 있지 않습니다.
레이아웃 변경
메뉴, 언어 표시 방식, 오버레이 또는 연결된 서비스가 변경될 경우 영향을 받는 검토를 반복하십시오. 기본 아이콘이 동일하게 유지되더라도 레이블 크기가 커지거나 인접한 작업이 추가되면 주변 레이아웃이 변경될 수 있습니다. 승인 증거를 실제 버전 및 검토 상태와 연결하십시오.
자주 묻는 질문
큰 아이콘은 큰 활성 표적임을 나타내는가?
아니요. 관련 대상은 포인터 입력을 받는 영역입니다. 공급업체는 해당 영역을 식별해야 합니다. 아트워크 이미지만으로는 해당 영역의 기하학적 구조를 파악할 수 없습니다.
웹 임계값은 밀리미터 단위의 하드웨어 치수인가요?
인용된 설명은 CSS 픽셀을 사용합니다. 이 문서에서는 해당 웹 측정값을 물리적 기기 요구 사항으로 변환하지 않습니다. 실제 인터페이스와 하드웨어 조건은 별도로 평가해야 합니다.
지름이 24픽셀인 원이 정사각형 크기 규칙을 충족합니까?
해당 자료에 따르면 크기 요구 사항은 대상 내부에 완전히 포함된 축 정렬된 24x24 CSS 픽셀 크기의 정사각형입니다. 24픽셀 직경의 원형 대상은 해당 정사각형을 포함할 수 없지만, 간격을 조정하면 예외가 될 수 있습니다.
사용자가 요구 사항을 충족하기 위해 확대/축소할 수 있습니까?
설명에 따르면 확대/축소 기능은 CSS 픽셀 크기를 변경하지 않으므로 목표 크기 또는 간격을 충족하는 데 사용할 수 없습니다. 실제 목표 및 문서화된 조건을 검토하십시오.
동등한 제어 방식을 통해 예외를 발생시킬 수 있습니까?
해당 소스 코드는 동일 페이지에서 동일한 기능을 수행하고 기준을 충족하는 다른 컨트롤을 제공합니다. 결론을 내리기 전에 실제 동일 기능과 구현 방식을 확인하십시오.
목록에 있는 자판기들은 측정 또는 인증을 받았습니까?
측정 대상 기기는 없었으며 접근성에 대한 결론도 내려지지 않았습니다. 공개된 목록에는 소매 형식이 설명되어 있으므로, 제공된 정확한 인터페이스에 대한 증거를 요청합니다.
최종 권고
소매 형식을 선택한 다음 제공된 인터페이스에서 포인터 활성 영역에 대한 증거를 요청하십시오. 아트워크, 대상 모양 및 인접 컨트롤을 분리하십시오. 적용 가능한 예외 사항과 변경 상태를 문서화하십시오. 웹 CSS 임계값을 지원되지 않는 하드웨어 사양으로 변환하지 않고 적절한 방법을 통해 물리적 사용성을 검토하십시오.
원천:W3C WAI, SC 2.5.8 이해: 목표 크기(최소)본 내용은 2026년 10월 10일 기준이며, 2026년 5월 11일에 업데이트되었습니다. 참고용 웹 안내 자료이며, 연계 기술, 강화된 기준 및 전체 규범 표준은 평가되지 않았습니다. 제품 설명은 연계된 공개 목록과 동일 날짜에 기록된 증거를 기반으로 합니다. 기계 테스트, 적합성 확인 또는 상업적 이익을 주장하지 않습니다.
CTA
구성별 목표 및 레이아웃 증빙 자료를 첨부하여 WEIMI 견적을 요청하십시오.제품 구성, 제공되는 고객 여정 및 관련 서비스에 대해 설명하십시오. 포인터 입력이 가능한 영역, 인접 대상 검토 방법, 공급업체가 시연할 수 있는 인터페이스 상태에 대해 문의하십시오.


