공간 입력을 위한 디자인

♪ 감미로운 인스트루멘탈 힙합 ♪ ♪ 안녕하세요 '공간 입력을 위한 디자인'에 잘 오셨습니다 저는 이즈리얼이고 유진과 함께 나와 있습니다 저희는 Apple 디자인 팀의 디자이너입니다 오늘 이야기할 주제는 눈과 손을 위한 상호 작용 디자인입니다 새로운 입력 방식의 특징과 이 플랫폼에서 최대한 활용하는 법을 다룹니다 모든 가능한 입력 방식을 간단히 살펴보겠습니다 공간 입력을 사용하면 버튼을 바라보며 손가락을 탭하여 선택할 수 있고 팔은 편하게 무릎 위에 놓을 수 있습니다 저희 시스템은 멀리서 UI와 편하게 상호 작용할 수 있게 디자인되었습니다 요소와 직접 상호 작용할 수 있는 경우도 있죠 예를 들면 손가락을 이용해 가상 키보드에 타이핑할 수 있습니다 손을 공중에 들고 있으면 피로할 수 있지만 직접적 상호 작용이 더 적합한 작업도 있습니다 눈과 손은 새로운 공간 입력 방식입니다 하지만 익숙한 다른 입력 방식도 사용할 수 있죠 타이핑하지 않고 목소리로 검색하는 것처럼요 또한 키보드나 트랙패드처럼 확실한 입력 방식도 있죠 마지막으로 게임 컨트롤러를 연결해 좋아하는 게임을 할 수도 있습니다 저희는 가장 새롭고 가장 흥미로운 공간 입력인 눈과 손에 집중하겠습니다 눈과 손을 사용하여 상호 작용을 하는 것은 몇 가지 측면에서 특수합니다 첫째로 개인적이라는 점입니다 시선과 손동작은 개인적인 행동입니다 기기 내부와 외부에 있는 카메라가 자연스러운 움직임의 세세한 부분까지 모두 개인정보를 보호하면서 캡처합니다 다음은 편안하다는 점입니다 손을 편하게 내려놓을 수 있습니다 기기가 주변의 넓은 영역을 볼 수 있기 때문이죠 마지막으로 공간 상호 작용이 정확해진다는 점입니다 기기는 모든 데이터를 필터링하고 앱에서 사용할 수 있는 정확한 상호 작용으로 변환하죠 그래서 공간 입력은 개인적이고 매우 편안하면서 정확한 상호 작용을 제공하는 방식입니다 오늘은 눈과 손을 사용해서 앱과 자연스럽게 상호 작용하는 방법을 알아봅니다 눈부터 시작하죠 눈은 공간 경험에서 주 타기팅 메커니즘입니다 시스템의 모든 인터페이스가 바라보는 곳에 반응하죠 아무리 멀리 있더라도 바라보는 것만으로 어떤 요소든 쉽게 타기팅할 수 있습니다 이제부터 알아볼 내용은 상호 작용하기 편안한 앱을 만드는 방법과 눈으로 쉽게 타기팅할 수 있게 만드는 방법 바라보는 곳에 반응하는 인터페이스를 만들면서도 개인정보를 보호하는 방법 그리고 눈의 의도가 레이아웃을 단순화하고 특수한 보조 기능을 제공하는 방법입니다 눈에 편안한 앱을 빌드하기 위해서는 콘텐츠가 기기에서 어떻게 표시되는지 고려해야 합니다 고려해야 할 첫 번째 사항은 앱의 캔버스는 무한하지만 시야에 들어오는 콘텐츠만 볼 수 있다는 점입니다 시야 내에서는 중앙을 보는 것이 가장 편안하며 가장자리를 보는 것은 덜 편안합니다 그러므로 시야에 맞는 앱을 디자인하고 목과 몸의 움직임을 최소화해야 합니다 눈에 가장 편안한 영역인 시야의 중앙에 주요 콘텐츠를 배치하세요 시야의 가장자리를 보는 것은 눈이 피로할 수 있으므로 항상 필요하지는 않은 콘텐츠를 그 영역에 사용하세요 예를 들면 사용할 수는 있지만 주요 콘텐츠를 방해하지 않는 보조 작업이 있습니다 언제나 눈과 목의 편안함을 극대화해야 하므로 시야 내에 콘텐츠를 배치해야 합니다 또한 눈의 편안함을 생각해서 깊이도 고려해야 합니다 깊이는 공간 경험의 독특한 특징인데 콘텐츠를 가까이 혹은 멀리 배치하면 프로젝트에서 다른 느낌이 듭니다 하지만 눈은 한 번에 하나의 거리에만 초점을 맞추므로 초점 거리를 자주 변경하면 눈이 피로해질 수 있습니다 UI 간에 이동하는 것이 쉽도록 상호 작용하는 콘텐츠를 동일한 깊이로 유지하세요 예를 들어 모달 뷰를 표시하면 메인 뷰가 z축으로 밀려 나가고 모달이 원래 거리에 배치됩니다 같은 z축 위치를 유지하면 눈이 새로운 거리에 적응할 필요가 없습니다 이제 깊이의 미묘한 변화를 이용해 계층 구조를 전달할 수 있습니다 예를 들어 탭 막대가 왼쪽에 있고 세그먼트 컨트롤이 아래에 있으면 깊이를 사용하는 데 의미가 있고 눈은 불편하지 않습니다 앱을 편안하게 만드는 방법을 살펴봤으니 눈으로 사용하기 쉽게 만들어 봅시다 눈은 매우 정확하지만 눈이 UI 요소를 잘 타기팅하는 데 도움이 되는 특성들도 있습니다 눈은 자연스럽게 객체의 중앙에 초점을 맞춥니다 눈을 돕기 위해 원형 모양을 사용하세요 원, 타원, 모서리가 둥근 사각형 등을 사용하세요 모서리가 각진 모양은 사용하지 않도록 합니다 각진 모서리를 사용하면 눈이 외부에 초점을 맞춰서 정확도가 떨어집니다 또한 평평한 모양을 사용하고 두꺼운 윤곽선은 피하며 모서리에 주의를 집중시키는 이펙트는 피하세요 마지막으로 텍스트와 글리프를 중앙에 배치하고 패딩을 넉넉하게 사용합니다 언제나 UI 디자인이 요소의 중앙으로 눈을 이끌게 하세요 요소의 중앙에 관심이 가게 됐으니 컨트롤의 적절한 크기를 알아봅시다 눈의 타기팅을 위한 최소 영역은 60pt입니다 하지만 요소는 60pt보다 작아도 되죠 크기와 간격을 고려해서 최소 타기팅 영역을 설정할 수 있습니다 레이아웃에서 넓은 간격을 두고 요소를 배치하세요 이렇게 하면 빠르고 정확하게 눈으로 타기팅할 수 있습니다 눈으로 사용하기 쉽고 훌륭한 UI를 만들려면 크기와 간격을 조합해서 최소 타기팅 영역인 60pt를 준수해야 합니다 기본적으로 표준 컴포넌트는 타기팅하기 쉬운 크기입니다 가능한 한 이런 컴포넌트를 사용하세요 자체 컴포넌트를 사용하려면 크기 지침을 따라야 합니다 포인트와 레이아웃에 대해 더 알아보려면 '공간 사용자 인터페이스를 위한 디자인' 세션을 참고하세요 눈의 타깃 영역이 얼마나 중요한지 알았으니 공간 내의 모든 위치에서 이 타깃 영역을 유지해야 합니다 이를 위해 UI의 크기를 조절하는 법을 알아야 하죠 두 가지 다른 스케일 메커니즘을 살펴보겠습니다 시스템은 앱 윈도우에 동적 스케일을 제공합니다 윈도우가 멀어질수록 커지고 가까워질수록 작아지는 것을 볼 수 있죠 동적 스케일은 UI를 같은 시야 영역에 맞추고 타깃 영역의 크기를 유지합니다 윈도우가 어디에 위치하든 상관없죠 고정 스케일을 사용하는 경우 UI는 멀어질수록 작아집니다 고정 스케일은 인터페이스의 크기를 변경해서 앱이 눈으로 사용하기 어려워질 수 있습니다 옆으로 놓고 비교해 봅시다 동적 스케일은 UI와 타깃 영역을 같은 크기로 유지하고 고정 스케일은 크기를 변경하여 타깃 영역이 너무 작아집니다 사용자 지정 UI를 만들 때는 동적 스케일을 사용하여 눈으로 모든 컨트롤을 타기팅할 수 있게 하세요 스케일 외에 방향 또한 앱을 사용하는 데 영향을 줍니다 인터페이스가 기울어져 있으면 읽고 사용하기 어렵습니다 그래서 시스템 윈도우가 항상 사람을 향하는 겁니다 앱의 사용자 지정 윈도우를 만들 때는 언제나 UI가 사용자를 향하도록 해야 합니다 방금 보았다시피 윈도우의 올바른 스케일과 방향은 눈의 정확성을 높이기 위해 필수적입니다 이 플랫폼에서 윈도우가 어떻게 동작하는지 알아보려면 '공간 디자인 원칙' 세션을 참고하세요 눈은 매우 혁신적인 입력 방식으로 인터페이스가 눈에 반응하는 것이 매우 중요합니다 상호 작용 요소가 하이라이트로 표시되면 눈과 상호 작용 하고 있다는 것을 알 수 있죠 버튼 그룹을 바라보면 어떻게 되는지 봅시다 각 버튼을 바라볼 때마다 하이라이트로 표시됩니다 모든 상호 작용 요소는 하이라이트로 표시되어야 하는데 이를 호버 이펙트로 표시합니다 하지만 눈은 빠르게 움직이기 때문에 이펙트는 과하지 않아야 하고 모든 콘텐츠 위에서 작동해야 하죠 좋아하는 사진을 바라볼 때처럼 인지한 것은 보이지만 두드러지지는 않아야 합니다 호버 이펙트 덕분에 시스템에서 제공하는 컨트롤은 바라보면 하이라이트로 표시됩니다 앱에 사용자 지정 요소를 더한다면 호버 이펙트를 사용해서 눈의 피드백을 추가하고 요소가 응답하는 느낌을 줄 수 있게 하세요 눈의 의도는 매우 민감한 정보입니다 눈 데이터를 다룰 때는 개인정보 보호가 가장 중요하죠 호버 이펙트는 앱의 프로세스 외부에서 일어나서 여러분이 받게 되는 정보는 제스처에 의해 요소와 상호 작용 했을 때 초점을 받은 요소의 정보뿐입니다 눈으로 요소에 호버링하는 것은 의도를 나타냅니다 무언가를 오랫동안 바라보면 관심이 있다는 걸 알 수 있죠 더 많은 정보를 보여줄 수 있는 훌륭한 기회입니다 예를 들어 버튼에 툴팁을 추가할 수 있는데 바라보면 나타납니다 또한 탭 막대에 초점을 맞추면 확장되어 각 탭에 대한 레이블을 보여줍니다 마지막으로 시스템 제공 검색 필드 내의 마이크 글리프에 초점을 맞추면 Speak to search 기능이 활성화되어 이 레이어가 보이고 눈과 음성만을 사용하여 검색할 수 있습니다 시스템 요소는 필요할 때 추가 정보를 제공하며 초점에서 벗어나면 깔끔한 UI를 유지합니다 앱을 개발할 때 이런 부분을 활용하세요 또한 개인정보 보호를 고려하여 빌드되어서 초점 정보가 앱으로 전송되지 않습니다 눈의 의도는 보조 기술에도 좋은 기회를 줍니다 예를 들어 Dwell Control 기능을 사용하면 눈만으로 콘텐츠를 선택할 수 있습니다 이 예시에서는 버튼에 잠시 초점을 맞추면 Dwell Control UI가 표시되고 버튼을 선택합니다 손으로 탭 제스처를 할 필요가 없죠 지금까지 우리는 눈을 위한 상호 작용 디자인에 대해 무엇을 배웠을까요? 눈에 편안한 앱을 만드는 방법을 배웠습니다 콘텐츠를 시야 내부와 사용자 앞에 배치하고 깊이를 제대로 사용하는 방법을 살펴봤죠 그리고 사용하기 쉬운 인터페이스 디자인 방법과 요소의 중앙으로 눈길을 끄는 법을 알게 됐습니다 또한 컨트롤의 최소 타깃 영역인 60pt를 준수하는 것이 중요하다는 점을 이야기했습니다 언제나 원활한 상호 작용을 위해 앱의 요소에 호버 이펙트를 추가하여 타기팅을 확실히 하는 게 좋습니다 마지막으로 눈의 의도에 따라 추가 정보를 보여주는 UI 요소의 활용 방법을 다뤘습니다 좋은 세션이었지만 아직 더 많은 내용이 있습니다 눈은 훌륭한 타깃팅 메커니즘이며 손과 함께하면 훨씬 강력해집니다 이제 그 이야기를 해줄 유진에게 차례를 넘기겠습니다 고마워요, 이즈리얼 이제 손을 이야기해 봅시다 타기팅을 위해 눈과 함께 사용되는 손 제스처는 시스템 전체에서 주 상호 작용 방법입니다 손가락을 모아 쥐는 것은 휴대폰 화면을 누르는 것과 같은 동작입니다 시스템은 익숙한 다른 제스처도 지원합니다 예를 들어 핀치, 드래그해서 스크롤하거나 양손 제스처로 줌과 회전이 가능합니다 이 모든 경우에 UI 피드백은 손의 움직임을 따라가서 제스처와 연결된 느낌을 줍니다 제스처는 시스템 전체에서 같은 방식으로 작동하며 Multi-Touch 제스처와 비슷한 논리입니다 즉 사람들이 상호 작용 방법을 고민할 필요 없이 경험에 집중할 수 있다는 뜻입니다 그러므로 경험을 디자인할 때 이런 익숙한 패턴을 활용하고 사람들이 기대하는 방식대로 제스처에 응답해야 합니다 사용자 경험의 일부가 특수한 동작이라 표준 제스처로 쉽게 표현되지 않는 경우도 있습니다 이럴 때는 사용자 지정 제스처를 만들 수 있습니다 사용자 지정 제스처를 성공적으로 만들기 위한 팁을 몇 가지 알려드리겠습니다 먼저, 사람들이 사용법을 빨리 익힐 수 있도록 설명하고 수행하기 쉬운 제스처를 만들어야 합니다 또한 제스처 간의 충돌을 피하는 것도 중요합니다 사용자 지정 제스처는 표준 시스템 설정이나 일상 대화에서 사용하는 보편적인 손동작과 명확하게 구별되어야 합니다 사용자가 노력하거나 지치는 일 없이 지속해서 반복할 수 있어야 하고 잘못 작동할 확률이 낮아야 합니다 보조 기술을 사용하여 상호 작용을 하는 사람들을 염두에 두고 그럴 때 사용자 지정 제스처가 어떻게 작동할지 고려하세요 접근성에 대해 더 알아보려면 '접근성 높은 공간 경험 생성하기' 세션을 참고하세요 또한 제스처가 다른 사람들에게는 다른 의미를 지닐 수 있으므로 사용자 지정 제스처가 의도하지 않은 메시지를 전달하지 않도록 주의하세요 이 모든 것의 균형을 잡기는 어려울 수 있으므로 UI 어포던스를 대체재로 고려해 보세요 입력 모델의 가장 흥미로운 점 중 하나는 눈이 의도를 나타낸다는 점입니다 눈의 방향과 손 제스처를 결합하면 정확하고 만족스러운 상호 작용을 만들 수 있어서 타 플랫폼에서는 불가능한 기능을 제공할 수 있죠 이를 설명하기 위해 다시 줌 제스처를 살펴보겠습니다 제스처가 시작될 때 줌의 시작점은 이미지 내에서 눈이 초점을 맞춘 위치입니다 줌인하면 해당 영역이 확대되고 중앙에 위치하게 됩니다 단순히 주위를 바라보고 간단한 제스처를 하는 것만으로 쉽게 이미지를 탐색할 수 있습니다 아주 놀라우면서도 완전히 예상할 수 있습니다 여러분이 주목하는 지점이 자연스럽게 상호 작용의 의도를 보여주죠 또 다른 예는 Markup에서의 포인터 이동입니다 그림을 그리기 위해서 마우스 포인터처럼 손으로 브러시 커서를 움직이는데 캔버스 반대쪽을 바라보고 탭하면 정확히 보고 있는 곳으로 커서가 이동합니다 그러므로 정확도가 높아지고 큰 캔버스를 빠르게 활용할 수 있습니다 이러한 상호 작용은 눈의 방향을 활용해서 단순한 동작을 더 정확하고 만족스럽게 만듭니다 눈은 요소를 타기팅하는 이외에도 상호 작용을 위해 더 구체적인 위치를 제공하는 데 사용됩니다 이는 저희 입력 모델이 강력한 이유이며 상호 작용에 더 지능적으로 응답할 수 있습니다 이제 직접 터치에 대해 이야기해 보겠습니다 시스템 전체에서 손끝을 사용하는 상호 작용을 지원합니다 예를 들어 Safari를 가까이 가져다 놓고 페이지를 직접 스크롤할 수 있습니다 양손을 사용하여 가상 키보드에 타이핑할 수도 있죠 더 공간적인 경험을 하려면 팔의 도달 범위 내에서 3D 콘텐츠를 조작할 수 있습니다 눈으로 컨트롤을 타기팅하기 쉽기 때문에 원격 상호 작용은 오래 편하게 사용할 수 있습니다 손은 쉬면서 최소한의 제스처만 수행하면 되죠 직접 상호 작용을 디자인할 때는 손을 계속 공중에 들고 있으면 지칠 수 있다는 것을 염두에 두어야 합니다 그렇지만 몇몇 앱은 팔의 도달 범위 내에 콘텐츠를 배치하는 것이 유리합니다 가까운 거리에서 조사하거나 물체를 조작할 때 혹은 실제 근육 기억을 기반으로 하는 상호 작용을 수행할 때 그리고 일반적으로 물리적 행동이 경험의 중심일 때도 해당합니다 직접적 상호 작용을 위해 디자인할 때는 촉각적 반응이 없다는 점도 고려해야 합니다 물리적 세계에서는 무언가를 만질 때마다 손이 다양한 감각적 피드백을 받는데 이는 인식에 필수적입니다 손을 뻗어서 가상 콘텐츠를 만질 때는 그 모든 일이 일어나지 않죠 그래서 상호 작용을 가능하게 하려면 누락된 감각 정보를 다른 유형의 피드백으로 보완해야 합니다 저희가 대응한 방법을 키보드 버튼을 통해 확인해 보겠습니다 사실 버튼이 판보다 높게 위치해서 직접 누를 수 있습니다 손가락이 키보드 위에 있는 동안 버튼은 호버 상태와 하이라이트를 표시해 버튼 표면에 다가갈수록 밝아집니다 근접했다는 것을 알려주며 손가락으로 타깃을 찾는 데 도움을 주죠 접촉 순간에는 빠르게 변화하고 응답하며 적합한 공간 음향 효과가 함께 발생합니다 이런 추가적인 피드백은 누락된 촉각 정보를 대신하는 데 매우 중요하며 신뢰할 수 있고 만족스러운 직접적 상호 작용이 가능해집니다 입력과 가상 콘텐츠를 연결하는 데에 오디오는 특별한 역할을 합니다 자세한 내용을 알아보려면 '몰입형 사운드 디자인 살펴보기' 세션을 참고하세요 손을 활용하는 상호 작용을 디자인하는 방법에 대한 요약은 다음과 같습니다 시스템과 일관된 제스처 언어를 사용하여 사람들이 상호 작용이 아니라 콘텐츠에 집중할 수 있게 합니다 표준 설정으로 원하는 동작을 설정할 수 없을 때만 사용자 지정 제스처를 도입해야 합니다 의도를 보여주는 신호로 눈을 활용해서 상호 작용을 개선할 방법을 찾아보세요 직접적 상호 작용은 경험의 핵심 요소일 때만 사용하세요 사용한다면 감각 정보의 부족을 보완하기 위해 상세한 피드백을 제공해야 합니다 오늘은 눈과 손으로 하는 공간 상호 작용에 대한 디자인 원칙을 이야기해 봤습니다 편안함과 인체 공학에 대해 많은 이야기를 했죠 이 플랫폼에서는 소프트웨어의 외관 및 동작과 입력에 반응하는 방식이 매우 다양하기 때문에 디자이너와 개발자는 이러한 경험을 편안하고 접근하기 쉽게 만들어야 합니다 여러분의 앱을 기기에서 실행하면 사용자는 자신의 공간에서 집중하며 앱을 즐깁니다 소프트웨어는 더 이상 화면 안에 국한되지 않습니다 이제는 사용자의 물리적 환경에서 더 큰 부분을 차지하며 자연스러운 신체 움직임에 반응합니다 가상 콘텐츠와 손으로 상호 작용하는 건 대부분 사람들에게 새로운 일입니다 그래서 명확한 피드백을 제공하고 가능하면 익숙한 상호 작용 패턴을 사용하는 것이 매우 중요하죠 다른 플랫폼을 위해 디자인할 때는 훌륭한 입력 경험은 생각할 필요가 없었습니다 소프트웨어의 반응은 신체 움직임과 자연히 연결되며 상호 작용의 의도와 완벽하게 일치합니다 눈을 입력 모델로 사용하면 놀라운 정확도로 상호 작용에 응답하게 됩니다 이는 매우 강력한 기능입니다 여러분이 공간 미디어에서 즐겁고 독창적인 상호 작용을 만들기 바랍니다 이번 세션에서 참고한 다른 세션들도 확인해 주세요 시청해 주셔서 감사합니다 또 만나요 ♪