home
UX 구축: 시선과 UI 오브젝트 연결하기

학습 기사

UX 구축: 시선과 UI 오브젝트 연결하기

시선추적을 통한 사용자 입력(UI)을 시도할 때가 왔다고 판단했습니다. 소니, 메타, 애플의 제품에서 시선추적 기술을 본 적이 있을 수도 있고, 눈 움직임으로 응용 분야를 제어하고 물체와 상호작용하는 모습을 상상하면서 "만약..."이라고 생각한 적이 있을 수도 있습니다. 결국, 한눈으로 물건을 선택하는 것보다 더 빠른 방법은 없을 것입니다.

시선 입력으로 실험을 시작하면 마우스나 터치스크린을 위한 디자인과는 다르다는 것을 알게 될 것입니다. 시선은 항상 움직입니다. 쉬고 있을 때(즉, 고정된 상태)에도 미세한 무의식적 움직임이 있으며, 이를 다음에서 알아볼 수 있습니다. 안구 운동: 유형 및 기능 설명.

또한 사용자가 실제로 보고 있는 위치와 아이 트래커가 보고 있다고 보고하는 위치 사이에는 항상 약간의 불확실성이 존재합니다. 오차의 정도는 시선추적 하드웨어와 추적 대상자의 특성에 따라 달라집니다. 이러한 시선 이동 및 입력 신호 품질의 특성은 시선 기반 인터페이스를 만드는 데 있어 고유한 과제를 추가합니다.

이 글에서는 포인팅이라는 기본 UI 개념이 눈 기반 입력으로 인터페이스를 만들 때 어떻게 특별한 처리가 필요한지 알아보겠습니다.

사용자가 무엇을 보고 있나요?

아이 트래커의 기본 기능은 사용자가 어디를 보고 있는지 시스템에 알려주는 것입니다. 일반적으로 이 정보는 눈에서 시작되는 공간의 벡터, 즉 시선 벡터에 의해 결정됩니다. 사용자의 시선은 화면의 한 점, 즉 시선 위치로 응용 분야에 제공될 수 있습니다. 시선 벡터가 인터랙티브 항목과 정렬되면 해당 항목에 초점이 맞춰집니다.

화면 기반 UI에서 시선 제어를 가장 간단하게 구현하는 방법은 마우스 위치 대신 시선 위치를 사용한 다음 제스처나 버튼 누름과 같은 활성화 메커니즘을 추가하는 것입니다. 3D에서 시선 제어의 가장 간단한 버전은 컨트롤러나 손이 아닌 시선 벡터에서 레이 캐스트하는 것입니다. 접근 방식은 간단하지만 시선이 손 기반 포인터 입력을 대체할 수 없는 데에는 몇 가지 이유가 있습니다.

몇 가지 중요한 차이점을 살펴보겠습니다:

시선은 마우스나 터치와 어떻게 다른가요?

시선

마우스 포인터

터치

사람 타겟팅 해상도

0.1~1도(1~10픽셀)

0.1도(단일 픽셀)

1도
(10픽셀 단위)

입력 해상도(정확도)

1 ~ 10도(10 ~ 100분의 1픽셀)

0.1도(단일 픽셀)

1도(10픽셀 단위)

입력 안정성(정밀도)

보통

매우 좋음

좋음

낮은 비자발적 움직임

보통

매우 좋음

좋음

포인팅 속도

매우 빠름

중간

빠름

부드러운 트레이싱 및 그리기

매우 느림

보통

매우 좋음

기본 UI 기능

스캔

포인트 클릭

최저 해상도 및 안정성 – 측정된 시선은 실제 시선과 다음과 같이 다를 수 있습니다.
몇도 이상. 터치 UI가 손가락 끝 크기의 입력을 수용하기 위해 마우스 기반 UI보다 더 큰 위젯이 필요한 것처럼, 시선 기반 UI는 각 위젯에 훨씬 더 많은 공간이 필요합니다. 일반적인 터치스크린 키보드는 스마트폰 너비 정도인 반면, 시선 인식 키보드는 풀사이즈 태블릿 화면에 걸쳐 있다고 생각해보세요.

Video thumbnail

인간과 입력 해상도 간의 차이 - 눈은 마우스 포인터처럼 미세한 부분에 초점을 맞출 수 있지만 시선추적은 마우스의 정확도를 따라갈 수 없습니다. 기존의 온스크린 마우스 포인터는 거의 항상 사용자가 보고 있는 곳에서 오프셋되어 초점 영역 근처에서 시각적 산만함을 유발하기 때문에 시선 입력에 사용하기에 부적절합니다. 어쨌든 사람들은 자신이 어디를 보고 있는지 알려줄 필요가 없습니다.

Video thumbnail

시선은 시각 정보를 스캔하는 주된 역할로 인해 사방으로 이동하는 경향이 있기 때문에입력은 스캔에 부차적입니다. 사용자 피드백 및 활성화 메커니즘은 스캔 활동과 호환되어야 사용자가 의도치 않게 물체를 응시하여 활성화하는 '마이다스 터치' 문제를 방지할 수 있습니다.

Video thumbnail

시선추적을 사용한 UI 디자인에 대한 자세한 내용은 다음에서 확인할 수 있습니다.
인터랙션 디자인 기초.

아이 트래커의 부정확성에 대처하는 가장 좋은 방법은 무엇인가요?

시선추적 정확도가 낮고 사용자가 스스로 수정할 수 있는 눈에 보이는 포인터가 없을 때 사용자의 불만을 피하는 방법이 궁금할 수 있습니다. 부정확한 시선 정보를 처리하는 몇 가지 기술을 살펴보겠습니다.

솔루션 #1 – 더 큰 중앙 가중치 대상

타겟이 클수록 초점을 맞추기 쉽지만, 경계선 근처의 시선 위치는 여전히 타겟 밖으로 벗어날 위험이 있습니다. 따라서 시각적으로 가장 눈에 띄는 특징은 대상의 중앙에 배치하여 사용자의 시선이 가장자리에서 멀어지도록 유도해야 합니다.

장점

  • 쉽고 직관적인 구현

단점

  • UI 미학에 영향을 미쳐 컨트롤이 더 두꺼워 보입니다.

  • 더 많은 화면 공간을 차지함

  • 3D UI에서 거리가 멀어질수록 효과 감소 - 거리에 따라 타겟이 축소됨

사용 시기

디자인이 유연하다면 간단하고 강력한 솔루션입니다.

솔루션 #2 - 히트 지역 확대

시선 대상의 활성 영역이 보이지 않게 확대되어 시각적 경계 바로 바깥에 있는 시선 위치를 캡처합니다. 이 기술은 2D 및 3D 인터페이스에서 작거나 불규칙한 모양의 타겟을 더 쉽게 활성화할 수 있도록 하는 데 사용됩니다. 확장된 영역은 투명하므로 겉으로 보이는 대상의 크기는 변하지 않습니다.

장점

  • 보이지 않는, 시각적 디자인 존중

  • 활성 여백을 추가하거나 3D 콜리전 메시를 확대하여 쉽게 구현 가능

단점

  • 겹치거나 간격이 좁은 타깃에는 적합하지 않음 – 타깃 주변의 빈 공간이 인터랙티브 영역이 됩니다.

  • 3D에서 오브젝트 주변의 빈 공간을 확보하기 어려움 – 전경의 투명한 콜리전 메시가 보이는 배경 타깃을 가릴 수 있음

  • 적절한 여백/콜리더 스케일을 얻으려면 실험이 필요합니다.

사용 시기

액티브 여백은 대상이 겹치거나 닿지 않는 2D 그리드 기반 UI에 이상적입니다. 주의 사항이 허용되는 경우 3D에서도 사용할 수 있습니다.

솔루션 #3 – 시선 방향 표시

위에서 언급한 이유로 문제가 되지만, 시선 방향을 시각화하는 것은 UI 조작이 시선 오프셋을 허용하는 경우와 같은 특정 상황에서는 의미가 있을 수 있습니다.

장점

  • 사용자 피드백을 제공하면 일반적으로 사용 전략이 강화됩니다.

단점

  • 산만하고 부자연스러움

  • 시선 위치 오프셋이 큰 사용자에게 불쾌감을 줄 수 있음

  • 득보다 실이 많을 수 있음

사용 시기

드문 경우이긴 하지만요. 예를 들어 화면의 특정 영역을 강조 표시하는 등 인터랙션 디자인에서 대략적인 시선 추정이 도움이 되는 경우, 시선 위치에 스포트라이트 효과를 표시하면 UI 조작에 대한 피드백을 제공하는 동시에 주의 산만을 제한할 수 있습니다. 강조 표시된 영역은 사용자의 실제 시선을 포함할 수 있을 만큼 충분히 커야 합니다.

해결 방법 #4 - 명시적 모호성 제거

확인 대화 상자와 마찬가지로 시스템에서 사용자의 의도가 불확실한 경우 사용자에게 명확히 설명하거나 확인하라는 메시지가 표시됩니다.

장점

  • 타겟 클러스터링이 불가피한 어려운 경우 처리

  • 익숙한 인터랙션 패턴으로 쉽게 학습 가능

  • 잘 설계하면 잠재적인 시그니처 순간

단점

  • 설계 및 개발 복잡성

사용 시기

시각적 대상의 레이아웃을 제어할 수 없고 UI 대화 상자 기능을 사용할 수 있는 경우에 이 기법을 고려하세요. 설명은 음성이나 몸짓과 같은 비시선 입력 메커니즘을 사용할 수 있습니다. 또한 상황에 맞는 동작을 통해 후보 대상을 식별하고 필터링하여 대화 상자의 복잡성을 최소화할 수 있습니다.

솔루션 #5 – 머신러닝 알고리즘

이 기술은 알고리즘을 사용하여 시선 입력과 장면 정보를 수신하여 사용자가 어떤 물체를 보고 있는지 파악합니다. 이 알고리즘은 다양한 위치에서 다양한 크기의 물체가 움직이고 있을 수 있는 다양한 시나리오를 처리할 수 있도록 조정하는 것이 이상적입니다.

Video thumbnail

장점

  • 보이지 않는, 시각적 디자인 존중

  • 최소 타겟 크기, 클리어 영역 또는 겹치는 타겟과 관련된 UI 제약이 없습니다.

  • 최상의 결과를 위해 디자인 매개변수를 조정할 필요가 없습니다.

단점

  • 추가 자료가 필요할 수 있는 계산 부하 추가

  • 알고리즘은 블랙박스이며 반드시 이식 가능한 것은 아닙니다.

사용 시기

알고리즘을 사용할 수 있고 응용 분야에 계산적으로 적합한 경우 이 솔루션은 빠르게 구현할 수 있으며 즉시 사용자 경험. 이 기술의 한 가지 구현은 토비의 G2OM (시선 오브젝트 매핑)을 Unity 응용 분야에서 사용할 수 있습니다.

요약

시선에 기반한 사용자 상호작용은 인간적인 컴퓨팅 경험의 자연스러운 진화입니다. 인간의 자연스러운 시선 움직임과 시선추적 디바이스의 다양한 신호 품질은 효과적인 UI 디자인을 위한 새로운 과제를 만들어냅니다. 디자이너와 개발자는 시선 입력에 특화된 UI 기술을 구현하여 사용자의 성공과 효율성, 편의성을 향상시킬 수 있습니다.

작성자

로렌스 야우

읽기 시간

12분

작성자

  • Lawrence Yau

    Lawrence Yau

    세일즈 솔루션 아키텍트, 토비

    Lawrence는 현재 토비의 XR, 화면 기반, 자동차 산업 통합 영업팀의 솔루션 아키텍트로서 주의 집중 컴퓨팅이 기술의 역량과 인간의 의도를 융합하는 방식에 대한 그의 흥분과 노하우를 공유하고 있습니다.토비에서 로렌스는 시선추적이 자연스러운 디지털 경험을 가능하게 하고, 자신과 타인을 개선할 기회를 제공하며, 보다 만족스럽고 지속 가능한 삶을 위해 행동을 변화시킬 수 있는 다양한 방법에 매료되었습니다.이러한 혁신적인 목표를 가지고 시선추적 기술을 탐구하고 도입하는 사람들의 성공에 투자하고 있습니다.그는 자신의 지식과 열정을 XR 커뮤니티와 공유하게 되어 기쁘게 생각합니다.기술을 인간화하는 데 대한 끊임없는 호기심으로 시선추적 기술 통합 기능 촉진, 대화형 AI 에이전트 개발, 데이터 거버넌스 응용 분야의 사용자 경험 설계, e-러닝 전달 및 개발 도구 구축 등 다양한 경력을 쌓았습니다. 로렌스는 쿠퍼 과학 예술 발전 연합에서 전기 공학 학사 학위를, 카네기 멜론 대학교의 인간-컴퓨터 상호작용 연구소에서 인간-컴퓨터 상호작용 학사 학위를 받았습니다.

또한 다음을 즐길 수도 있습니다.