visionOS용 호버 상호 작용 설계하기

안녕하세요 Apple Design Team 디자이너 Nathan입니다 visionOS용 호버 상호작용 디자인 세션에 오신 것을 환영합니다 사람들이 보는 방향에 반응하는 새로운 방식으로 앱은 더욱 생동감 있고 마치 자신의 생각으로 경험하는 듯한 느낌을 주죠

오늘은 이렇게 진행할 예정입니다 눈 입력의 기본 개념을 살펴보고 맞춤형 효과도 알아봅니다 시선만으로 콘텐츠를 스크롤하는 법과 중요한 컨트롤을 유지하는 방법도 배워보죠 그럼 바로 시작할까요? 여러분도 아시다시피 visionOS는 눈과 손으로 조작합니다 한 요소를 바라본 뒤 손가락 탭으로 선택하죠 눈과 손으로 앱이 잘 작동할 수 있게 기억해두면 좋은 몇 가지 팁이 있습니다 가장 중요한 콘텐츠는 사용자 앞에 배치해 쉽게 볼 수 있게 하세요 상호작용형 요소의 경우 원, 캡슐 모서리가 둥근 사각형 등 부드러운 형태가 좋죠 이런 모양은 시선을 끌고 사용자의 시선을 형태의 중심으로 향하게 합니다

정밀한 조작을 위해서는 각 요소에 최소 60포인트 여백을 주세요 요소 자체는 더 작아도 괜찮지만 전체 공간은 60포인트 이상 확보하세요

고정된 스케일의 3D 객체에서 60포인트는 대략 2.5도 정도의 시야각에 해당합니다 1m 거리에서 봤을 때 약 4.4cm 크기죠

모든 상호작용형 요소에 하이라이트 효과를 적용하세요 이 메뉴처럼 표준 구성 요소는 자동으로 하이라이트됩니다

맞춤형 구성 요소는 직접 하이라이트 효과를 추가하고 콘텐츠의 형태와 일치하도록 만드세요

선택 가능한 3D 개체에도 하이라이트 효과를 적용하세요

기본 사항에 대해 자세히 알아보고 싶다면 2023년 세션 '공간 입력을 위한 디자인'을 참고하세요

이제 앱에 더 강력한 상호작용을 추가해 볼까요? 맞춤형 효과부터 시작하죠 표준 하이라이트 효과는 대부분 잘 작동하지만 자체 애니메이션으로 확장하거나 교체할 수도 있어요 이를 우리는 맞춤형 호버 효과라고 합니다 visionOS 전반에서 맞춤형 호버 효과를 사용하고 있죠

탭 바가 열리면 각 탭의 이름을 보여주고 뒤로 가기 버튼이 커지면 이전 페이지 제목을 표시합니다 슬라이더는 상호작용을 유도하는 노브를 보여주고

툴팁은 버튼 아래에서 해당 기능을 설명하죠

Safari에선 내비게이션 바가 확장돼 브라우저 탭을 표시합니다 홈 뷰에서는 환경 아이콘이 더 넓은 배경을 보여 줍니다

이런 맞춤형 효과를 앱에도 적용할 수 있습니다

앱의 개성과 피드백을 살리기에 딱이죠 앱의 분위기나 게임의 시각적 스타일도 유지하면서요 일단 이런 효과의 작동 방법을 알아볼까요? 개인정보 보호를 위해 시스템은 호버 효과를 앱 외부 프로세스에서 처리합니다 즉, 사용자가 보는 곳을 앱은 알 수가 없습니다 따라서 호버 이벤트에 직접 반응하는 대신 각각의 뷰는 기본 상태와 호버 상태 두 가지를 정의합니다 사용자가 뷰를 보거나 시선을 돌리면 시스템이 이 두 상태 사이를 애니메이션으로 전환합니다

지금까지 본 것처럼 애니메이션 표현에는 좋지만 맞춤형 효과로 앱 내에서 실제 동작 수행 시에는 불가하죠 무슨 뜻인지 예시로 보여 드릴게요 사진 감상 앱을 디자인한다고 가정해 보겠습니다 마음에 드는 사진 저장을 위해 다운로드 버튼을 추가하죠

그리고 시선이 닿았을 때 다운로드 용량을 보여주는 맞춤형 효과를 넣을 수도 있어요 이건 애니메이션일 뿐이거든요 하지만 바라보는 것만으로는 다운로드할 수 없습니다 앱은 효과가 적용됐다는 사실을 알지 못하기 때문이죠

그래서 사진을 저장하려면 사용자가 탭하는 제스처를 취해야 합니다

좋아요, 맞춤형 효과 애니메이션을 구동합니다 그렇다면 어떤 애니메이션이 가장 효과적일까요? 보통 세가지 유형으로 나뉩니다 즉시형, 지연형, 점진형이죠 첫 번째는 '즉시형' 애니메이션입니다 사용자가 뷰를 바라보는 즉시 시작되죠

Mindfulness 앱에서는 버튼에 화살표 아이콘이 나타나 더 많은 옵션이 있다는 것을 알려 줍니다

그리고 표준 동영상 플레이어에서는 재생헤드를 바라볼 때 타임스탬프가 표시됩니다 이 추가 정보는 작고 상황에 따라 다르게 나타나며 상호작용은 하지 않습니다 때로는 즉시형 애니메이션이 너무 빨리 재생돼서 주위를 둘러볼 때 불필요한 움직임을 유발할 수 있죠 이럴 땐 '지연형' 애니메이션을 씁니다 짧은 시간이 지연된 후 더 많은 콘텐츠를 보여 줍니다

툴팁이 대표적인 예죠 지연 시간 덕분에 버튼을 바로 누를 수 있고 일정 시간 이상 응시할 경우에만 툴팁 제목이 표시 됩니다

또 다른 예는 Safari 프로필 버튼입니다 다른 레이아웃으로 동일한 패턴을 따릅니다

마지막으로 '점진형' 애니메이션입니다 지연형 애니메이션과 비슷하지만 시작 시 힌트를 주고 맞춤형 애니메이션 곡선을 사용해요 홈 뷰의 환경 아이콘을 한번 보세요 사용자가 아이콘을 바라보면 아이콘이 서서히 확대되기 시작합니다 그러다 확 열려 더 넓은 가상 공간이 드러납니다 이 확대 효과 덕분에 계속해서 바라보면 아이콘이 확장됨을 직관적으로 알 수 있고 시선이 명확하게 집중될 때만 완전히 열리게 됩니다 이렇게 하면 사용자가 그리드 전반을 살펴볼 때 아이콘이 갑자기 선택되는 일을 막을 수 있습니다

다른 예도 볼까요? 이처럼 시선에 따라 확장되며 전체 텍스트가 나타나죠 이런 점진형 애니메이션은 '즉시형'과 '지연형'의 중간 단계라고 볼 수 있어요 즉각적인 피드백은 주되 산만하지 않죠

점진형 애니메이션에서 이런 곡선을 시도해 보세요 처음엔 천천히 부드럽게 시작하다가 빠른 스프링 효과로 확 열리며 마무리됩니다 이 애니메이션 곡선은 뷰가 확장돼 더 많은 콘텐츠를 보여줄 때 특히 효과적입니다 이런 효과를 앱에 적용할 방법을 고민할 때 기억해두면 좋은 모범 사례들을 소개할게요 먼저, 앵커링 요소를 제공하세요 최고의 맞춤형 효과는 뷰의 일부를 고정 상태로 유지합니다 여기 제목처럼 움직이지 않는 요소는 사용자에게 맥락을 제공하고 새로운 정보를 이해하는 데 도움을 줍니다

뷰를 보고 있는데 시선 이동으로 텍스트가 이동하면 읽기에 방해가 될 수 있으니 텍스트를 고정된 위치에 유지하도록 하세요

또는 두 상태 간에 뷰가 완전히 달라진다면 지금 무엇을 보고 있는지 혼란스러워할 수 있습니다

호버 효과는 항상 눈에 보이는 요소에서 시작되어야 합니다 무엇이 어디에 있는지에 대한 힌트가 없다면 찾기 어렵거나 예상치 못한 화면 변경으로 인해 놀랄 수 있습니다 대신 숨겨진 요소가 있는 경우 사용자가 눈에 보이는 무언가를 바라볼 때 함께 보여주세요 예를 들어 창의 모서리를 바라보면 크기 조절 컨트롤이 나타납니다 이렇게 하면 필요한 컨트롤을 쉽게 찾을 수 있죠

다음으로 맞춤형 효과는 신중하게 적용해야 합니다

예를 들어 이런 나침반처럼 집중이 필요한 곳에 맞춤형 효과를 사용할 수 있습니다 위치 상태 같은 추가 정보를 보여주거나

실제 쏟아지는 폭포 등 즐거운 순간을 연출할 수 있죠

하지만 사용자가 주위를 둘러볼 때 너무 많은 맞춤형 효과가 나타나면 안 됩니다 각 핀 이름이 다 보이게 되면 콘텐츠에 집중하기 어렵고 시각적으로 불편함을 유발할 수도 있습니다 심지어 작은 확대 효과라도 툴바 버튼이나 테이블 셀처럼 자주 사용하는 뷰에서는 방해 요소가 될 수 있습니다 사람들이 보려고 하는 것을 움직이게 하기 때문이죠 이런 뷰에는 기본 하이라이트 효과를 사용하는 게 좋습니다

효과는 가능한 작게 유지하세요

좋은 맞춤형 효과는 섬세하고 작은 뷰에도 잘 어울립니다 앞에서 보셨던 다운로드 버튼처럼 말이죠 전체 사진 같은 큰 뷰에는 맞춤형 효과를 넣지 마세요 움직임이 많아지고 사용자는 무슨 일이 있는지 알기가 어려울 수 있습니다 이런 이미지에는 색을 흐리게 하는 효과도 피해야 하죠

좋은 방법은 즉각적인 피드백을 주는 하이라이트 효과를 쓰고 잠시 후 자연스럽게 사라지게 해서 사진의 본래 색감을 잘 보여주는 것입니다 그리고 이 식물 같은 3D 개체에도 하이라이트된 다음 사라져 원래 색상을 보여 줍니다

마지막으로 예상치 못한 움직임은 피하세요 이건 제가 자주 겪는 문제인데요 처음엔 좋은 아이디어라고 생각하지만 나중에 예상치 못한 부작용이 생기곤 합니다 그 예를 보여드리죠 Safari 탭 미리보기는 열린 탭을 그리드로 표시해요 이때 이렇게 생각하실 수도 있습니다 기본적으로 닫기 버튼을 숨기고 탭을 바라볼 때만 닫기 버튼을 보여주면 어떨까? 훨씬 깔끔해 보이죠? 그런데 탭을 바라보면 버튼이 갑자기 나타나고 눈은 본능적으로 그쪽으로 가게 됩니다 이 때문에 탭을 선택하려고 하다가 실수로 닫기 버튼을 누를 수 있죠 시선이 닫기 버튼에 있고 탭 제스처를 할 때 그 위치에서 실행되기 때문이죠 대신 다른 방식으로도 시도해 볼 수 있어요 탭을 바라보면 버튼이 절반 정도 천천히 페이드 인되고 버튼을 직접 바라볼 때 완전히 나타나도록 합니다

이렇게 하면 시각적 혼잡도는 줄이면서도 큰 탭 그리드에서 실수로 탭을 닫는 일을 방지할 수 있습니다 이런 효과는 실제 기기에서 반드시 테스트 해보세요! 영상만으로는 그 느낌을 제대로 알기 힘듭니다 시선에 따라 반응하는 효과이기 때문이죠 물론 저도 visionOS 시뮬레이터를 정말 좋아하지만 실제 기기에서의 테스트를 완전히 대체하지는 못합니다 그건 절대 잊지 마세요

맞춤형 효과 디자인은 인터페이스의 다른 부분보다 더 많은 반복과 실험이 필요한 작업입니다 여러 방향으로 시도하면서 감을 익혀가야 합니다 최적의 결과를 위해 세밀하게 조정해야 하죠

시간이 지나면 무엇이 좋은지 알 수 있게 될 거예요 그러다가 좋은 아이디어가 떠오르면 꼭 시도해보세요 꽤 잘 맞을 수 있으니까요 다음은 또 하나의 강력한 상호작용인 바라봐서 스크롤하기입니다 바라봐서 스크롤하기로 시선만으로 스크롤할 수 있죠 여기 Safari에서는 페이지 하단을 바라보면 자연스럽게 위로 스크롤됩니다

또는 음악 앱에서 마지막 재생목록을 바라보면 해당 항목이 중앙으로 스크롤됩니다

눈이 콘텐츠를 따라가듯 자연스럽게 이동하게 해서 훨씬 쉽게 탐색할 수 있죠 손으로 스크롤할 때와도 작용하는 가벼운 상호작용이죠

스크롤은 스크롤 뷰의 가장자리 근처를 바라볼 때 시작됩니다 세로 스크롤 뷰에서는 위나 아래를 가로 스크롤 뷰에서는 좌우 가장자리를 바라보면 됩니다

앱에는 스크롤 뷰가 여러 개 있을 수 있습니다 바라봐서 스크롤하기는 기본 비활성화되어 있어 어떤 뷰에 이 기능을 적용할지 직접 선택해야 합니다 결정할 때 몇 가지를 고려해 보세요

첫째, 뷰가 주로 읽기나 탐색용이라면 바라봐서 스크롤하기를 사용하는 것이 좋습니다 Safari 앱에서 기사를 읽거나 TV 앱에서 다음 콘텐츠를 찾을 때 유용하죠

하지만 설정 같은 앱에서는 사용자는 원하는 항목을 빠르게 훑어보기를 원하고 목록을 한 줄씩 읽어 내려가진 않기 때문에 바라봐서 스크롤하기가 적합하지 않습니다 일반적으로 뷰에 UI 컨트롤이 주로 있다면 바라봐서 스크롤하기를 활성화하지 않는 것이 좋습니다

다음으로 콘텐츠의 성격을 고려하세요 바라봐서 스크롤하기는 앱의 주요 콘텐츠 영역에 적합하죠 예를 들어 메모 앱에서는 메모 본문은 시선을 가장자리에 두면 스크롤되지만 왼쪽의 리스트는 스크롤되지 않습니다 이건 앞서 살펴본 설정 앱과 동일한 패턴입니다

마지막으로 앱 내부의 일관성도 중요합니다

TV 앱에서 관련 콘텐츠 리스트는 메인 라이브러리의 리스트와 모양이 똑같기 때문에 바라봐서 스크롤하기가 될 거라 기대하게 되죠

이제 어떤 스크롤 뷰에 적용할지 감이 잡히셨다면 자연스럽고 예측 가능하게 만드는 방법을 살펴보죠

바라봐서 스크롤하기가 적용된 스크롤 뷰는 창의 전체 너비나 높이를 사용하는 게 이상적입니다 이렇게 하면 스크롤 공간이 넉넉하고 사용자가 시선을 둘 수 있는 가장자리도 명확해집니다

만약 스크롤 뷰가 창 안쪽에 위치한다면 경계를 명확히 해 응시해야 할 곳을 알 수 있게 하세요

스크롤 위치로 콘텐츠를 다른 속도로 애니메이션화하거나 시차 효과나 맞춤형 애니메이션을 적용한다면 기본 스크롤 속도에 맞춘 디자인 조정도 고려해 보세요 또는 바라봐서 스크롤하기가 적합하지 않을 수도 있습니다

하지만 스크롤 뷰가 창을 가득 채우고 경계가 명확하며 기본 속도로 스크롤된다면 탐색 작업은 원활하고 예측 가능하게 느껴질 것입니다 앱을 더욱 완성도 높게 만드는 지속형 컨트롤을 살펴볼게요 아주 미묘하지만 사용자 경험에는 큰 차이를 만들죠 이건 visionOS의 기본 동영상 플레이어입니다 재생 컨트롤은 탭으로 표시되거나 숨겨지고 표시된 경우에는 일정 시간 후 자동으로 사라집니다 이 방식도 잘 작동하지만 문제가 있습니다 컨트롤을 보고 있을 때 사라질 수도 있기 때문이죠 이제는 컨트롤을 바라보는 동안에는 그대로 표시되고 영상으로 시선을 돌리면 사라지게 만들었습니다 자연스러워서 처음에는 눈치채지 못할 수도 있습니다

앱에서 기본 비디오 플레이어를 쓴다면 인라인, 윈도우, 몰입형 모두 이 기능이 자동으로 적용됩니다 하지만 맞춤형 비디오 컨트롤을 사용한다면 이 행동을 활성화해야 합니다 이 기능은 비디오 앱에만 국한되지 않죠 FaceTime은 통화 컨트롤이

Mindfulness에선 세션 컨트롤이 지속적으로 유지됩니다 자동으로 사라지는 UI에서 이 지속형 동작을 적용하세요 비디오든, 몰입형 경험이든 상관 없습니다 이 기능을 적극 활용해 보세요 지금까지 다양한 방법을 살펴봤습니다 호버 상호작용으로 앱에 생동감을 더하는 법 맞춤형 효과로 인터페이스를 애니메이션화하고

시선만으로 스크롤을 구현하며

미디어 컨트롤을 자연스럽게 유지하는 것까지

이런 기능을 염두에 두고 앱을 설계할 때는 간단한 아이디어부터 시도하고 직접 테스트하세요 앱에서 맞춤형 호버 효과의 적용 기회를 찾아보세요 SwiftUI나 RealityKit으로 직접 구현할 수 있고 2024년의 세션을 통해 더 많은 구현 방법도 배울 수 있습니다 바라봐서 스크롤하기와 지속형 컨트롤을 활성화하려면 developer.apple.com/kr에서 공식 문서를 확인하세요 감사합니다 즐겁게 작업하세요!