시각과 움직임을 고려한 디자인

♪ 감미로운 인스트루멘탈 힙합 ♪ ♪ 안녕하세요 저는 만다이고 Apple 비전 사이언스 팀 소속입니다 저는 허먼이고 연구 과학자로서 Apple에서 일합니다 3D 경험을 제작할 때는 깊이와 전체 시야와 같은 고유한 모달리티를 사용합니다 시각적 단서와 동작 정보를 통해 3D 콘텐츠에서 새로운 차원의 몰입감을 제공하는 방법을 소개하고자 합니다 또한 앱 사용자의 편안한 경험에 지장을 주는 인간의 한계에 대해서도 소개합니다 저희 지침은 편안하고 즐거운 경험을 만들 수 있도록 돕습니다 이번 영상에서는 시각적 깊이 단서와 콘텐츠 매개변수 눈의 수고 가상 객체의 동작 헤드락 콘텐츠 윈도우 내 동작 진동 동작에 대해 설명합니다 우선 콘텐츠 시청자에게 정확한 시각적 깊이 단서를 제공하는 것이 중요합니다 잘 디자인된 3D 콘텐츠를 보면 뇌는 깊이감을 인식하기 때문입니다 먼저 과학 이야기를 좀 하겠습니다 우리는 다양한 감각계를 통해 현실 세계와 가상 세계를 경험합니다 고도로 발달한 시각계는 여러분이 만든 콘텐츠에서 빛을 받아들여 그 정보를 해석하고 어떤 대상인지 인식합니다 즉, 여러분의 디자인 결정은 시청자의 시각적 편안함에 커다란 영향을 미칩니다 여러분이 의도한 깊이와 시청자가 인식하는 깊이가 일치해야만 시각적으로 편안함을 줄 수 있습니다 이미지의 깊이가 변화하면 뇌가 눈 근육을 움직여 이미지가 위치한 깊이에 시선을 고정합니다 단일 이미지는 이런 방식으로 인식할 수 있습니다 시선의 초점을 정확하게 맞추려면 적절한 시각적 깊이 단서가 필요합니다 깊이 단서가 누락되거나 어긋나거나 헷갈린다면 시각적 편안함에 영향을 미칠 수 있습니다 그래서 시청자는 복시, 눈의 피로 같은 불편을 느낄 수 있죠 이미지 단서로 시각적 편안함을 유지하는 방법을 살펴보겠습니다 여기 감귤류 과일 이미지처럼 깊이 정보를 전달하는 시각적 단서가 많이 누락된 이미지를 예로 들겠습니다 뇌는 적절한 깊이에 맞게 시선을 조정할 수 없어서 불편함이 유발될 수 있습니다 과일에 색깔이 들어가면 익숙한 크기를 찾는 단서가 되죠 녹색일 경우 전에 봤던 라임 크기에 따라 과일 조각이 얼마나 멀리에 떠 있는지 뇌가 판단합니다 그래서 뇌는 적절한 깊이에 시선을 집중시키죠 블러는 깊이 정보를 전달하는 또 다른 방식입니다 상대적인 크기 역시 정보가 적은 이미지에 깊이 단서를 추가합니다 둘 중에서 더 큰 조각이 보는 사람과 더 가깝게 느껴지죠 부드러운 동작도 어느 깊이에 시선을 집중할지 정보를 제공할 수 있습니다 콘텐츠에 동작을 사용하는 방법은 허먼이 자세히 설명할 것입니다 지금은 시선을 유도하는 단서를 몇 가지 더 설명하겠습니다 그 외에도 배경, 빛과 그림자, 오클루전 텍스처 밀도 등을 추가하면 시각적 깊이 단서가 더해집니다 상충하는 단서도 문제가 됩니다 아까 말했듯이 아래 조각이 상대적으로 커서 더 가까워 보입니다 앞쪽에 있다고 느껴져서 작은 조각보다 큰 조각에 시선이 집중되죠 하지만 상대적 크기 단서가 오클루전 단서와 상충해서 기대와 반대되는 정보가 뇌에 입력됩니다 깊이 단서끼리 상충하면 시각적으로 불편해질 수 있습니다 정보가 많은 이미지에서도 단서가 상충할 수 있습니다 상충이 늘어날수록 시각적으로 더욱 불편해집니다 따라서 콘텐츠의 모든 깊이 단서가 뇌에 올바른 정보를 제공해야만 시청자의 시선을 의도한 깊이에 집중시킬 수 있습니다 반복적인 패턴처럼 헷갈리는 시각적 깊이 단서를 수정하는 방법도 생각해 볼 수 있습니다 여기서 두 눈은 반복되는 패턴 중에서 같은 대상을 바라봅니다 잘됐네요! 하지만 여기서는 각각의 눈이 반복되는 패턴 중에서 다른 대상에 고정됩니다 각 눈에서 보이는 이미지를 뇌가 하나로 결합하려고 하면서 반복 패턴이 의도했던 것과 다른 깊이에 있다고 인식하게 되죠 이렇게 상충하는 현상을 줄이고 복시를 방지하려면 패턴 구역을 줄여서 사용하거나 다른 디자인을 더해 패턴을 깨면 됩니다 깊이 인식에 대한 마지막 설명입니다 3D 콘텐츠는 시각적 깊이 단서와 더불어 양 눈의 디스플레이 각각에 자동으로 적절히 렌더링되어 여러분이 의도한 깊이를 시청자가 볼 수 있게 합니다 예를 들어 스테레오 콘텐츠를 수동으로 렌더링해서 스테레오 영상을 제작할 때는 깊이 단서를 적절하게 제시하고 올바른 양안 시차를 사용하는 것이 매우 중요합니다 그래야 시각적인 불편을 유발하는 시각적 단서의 상충을 피할 수 있죠 좋습니다 크기, 대비와 같은 콘텐츠 매개변수로 넘어가겠습니다 시각적으로 편안한 콘텐츠에는 각각의 시각 경험에 적합한 매개변수가 있습니다 눈의 수고를 줄이는 매개변수를 선택하세요 몇 가지 예를 살펴보겠습니다 독서처럼 시선을 오래 고정해야 하는 콘텐츠가 시각적으로 가장 편안하게 느껴지려면 팔 길이보다 멀리에 배치되어야 합니다 또한 사용자가 콘텐츠 깊이를 조정하여 가장 편안하게 느껴지는 깊이를 직접 선택하게 할 수도 있죠 시청자와 거리가 가까운 콘텐츠는 짧은 순간만 시각적인 노력이 요구되거나 3D 공간에서 사람의 손이 아이템에 실제로 닿아서 직접적인 상호 작용을 유도하는 경우에만 사용하도록 하세요 이런 경우가 아니라면 투명도와 블러와 같은 시각적 단서로 시선을 더 멀리 유도해서 시각적으로 편안하게 만들 수 있습니다

깊이와 마찬가지로 콘텐츠의 크기 및 대비를 고유한 시각적 경험에 맞게 디자인해야 눈이 편안할 수 있습니다 예를 들어 텍스트를 읽을 때는 텍스트의 대비를 높이며 다른 객체는 대비를 낮추고 투명도와 블러를 적용해 시선을 텍스트로 유도할 수 있습니다 서체 크기, 윈도우 크기와 깊이를 적절히 선택해 장시간 또렷하게 읽을 수 있게 합니다 편안하게 눈으로 훑으며 머리나 몸을 돌릴 필요가 없어야 하죠 콘텐츠 밝기도 중요한 매개변수입니다 이 이미지처럼 어두운 영역이 넓으면 밝은 화면으로 전환할 때 속도를 늦춰야 눈이 천천히 적응해서 시각적으로 불편하지 않습니다 시각적 편안함을 위해 마지막으로 유념할 사항은 눈에 필요한 노력입니다 시각 경험을 더욱 편안하게 만들려면 눈의 수고를 최소화해야 합니다 방법은 다음과 같습니다 콘텐츠 위치를 선택할 때 이 방향을 기억하세요 시선은 아래 방향이나 왼쪽에서 오른쪽으로 움직일 때 가장 편안합니다 가능하면 이 방향에 따라서 콘텐츠 위치를 선택하세요 대각선 위로 시선을 옮길 때 눈 근육을 가장 많이 움직여야 합니다 이러한 동작이 계속되면 눈이 피로해집니다 장시간 읽기 콘텐츠나 대상이 길쭉하게 늘어서 있는 콘텐츠에서는 시선 중앙과 약간 아래쪽에 대상을 배치해야 편안한 시각 경험을 제공할 수 있습니다 극단적인 각도로 시선을 이동해야 한다면 상호 작용 시간을 짧게 디자인하거나 시야의 중심으로 대상들을 옮기는 방법으로 시선 이동을 줄여 눈의 수고를 줄이세요 사용자가 눈을 쉬게 하기 위해서 휴식을 원할 수 있다는 점도 고려하세요 휴식 시간을 주려면 자연스러운 중단 지점을 디자인하세요 그동안 사용자는 눈을 쉴 수 있죠 시각적 편안함 설명은 여기까지입니다 이제부터 동료 허먼이 동작을 편안하게 디자인하는 법을 설명해 드리겠습니다 고마워요, 만다 다음으로 몰입형 앱에서 동작 정보가 사용자 경험에 미칠 수 있는 영향과 편안함에 방해가 되는 인간의 한계를 살펴보겠습니다 과학적 원리를 조금 알아보면서 시작하죠 인간은 다중 감각 기관을 사용하여 현실 세계와 가상 세계를 경험합니다 앞에서 봤듯이 시각계는 빛을 받아들이고 감지한 대상을 해석하는 역할을 합니다 눈으로 대상을 볼 때는 자신의 움직임도 감지하죠 내이의 전정계 역시 자신의 움직임을 감지합니다 일반적으로 시각적 움직임 정보는 전정계로 인지하는 움직임과 항상 일치합니다 하지만 시각적 움직임 정보가 누락되거나 전정계에서 인지한 정보와 충돌하면 움직임에 불편함을 느끼게 됩니다 어지러움이나 메스꺼움을 느낄 수 있죠 잘 디자인된 콘텐츠는 뇌가 세상을 고정된 대상으로 느끼게 합니다 그래야 안정감과 편안한 동작을 제공할 수 있습니다 몇 가지 예시를 들면서 동작을 편안하게 유지하는 법을 살펴보겠습니다 첫 번째 예시에서는 가상 객체의 동작을 다룹니다 여기 파란색 다면체처럼 하나 이상의 가상 객체가 시야에서 많은 부분을 뒤덮은 채로 이동한다고 생각해 보세요 관찰자의 뇌는 이러한 객체의 동작을 자신이 움직인다고 해석할 수 있습니다 안정감을 무너뜨리고 불편한 동작을 만들어 내는 현상입니다 이 현상을 개선하려면 움직이는 객체를 반투명하게 만들어서 객체가 움직이는 동안 배경을 확실하게 보여주면 됩니다 헤드락 콘텐츠는 가능한 한 사용하지 마세요 사용자 머리에 고정된 콘텐츠를 헤드락 콘텐츠라고 합니다 헤드락 콘텐츠는 사용자의 시야에서 항상 같은 위치에 있습니다 헤드락 뷰가 필요한 경우에는 윈도우 크기를 줄이고 시선의 중심선에 놓은 다음 관찰자에게서 멀리 떨어진 곳에 윈도우를 배치하세요 가능하면 월드락 뷰를 사용해서 콘텐츠가 따라다니는 듯한 느낌을 방지하세요 지연 팔로우 애니메이션을 사용하는 대안도 있습니다 시간의 흐름에 따라 목적지까지 천천히 이동시키는 것이죠 가상 윈도우에 표시되는 콘텐츠의 동작도 신경 써야 합니다 윈도우에서 가상 풍경과 같은 콘텐츠가 움직일 때

관찰자의 뇌는 이러한 시각적 동작을 자신이 움직인다고 해석할 수 있습니다

최고로 편안한 동작을 생성하려면 카메라 동작에 주의를 기울여야 합니다 우선 윈도우 콘텐츠의 수평선을 윈도우 외부의 수평선과 일치시키세요 모든 픽셀이 시작되는 것처럼 보이는 점을 '확장 초점'이라고 부릅니다 관찰자는 이 점을 향해 이동하며 사람들은 자연스럽게 확장 초점을 바라보는 경향이 있습니다 카메라를 움직일 때는 확장 초점이 예측 가능한 방향으로 천천히 움직여야 합니다 그리고 확장 초점의 위치를 시야에서 벗어나지 않게 유지하세요 즉, 빠른 방향 전환이나 단순 회전 동작을 피해야 합니다 이러한 경우에 확장 초점이 시야 밖으로 이동하죠 빠르게 회전하는 대신에 빠르게 페이드아웃하면서 방향을 즉각 전환하는 대안을 사용할 수 있습니다 동작을 편안하게 최적화하려면 큰 객체가 가까운 범위에서 지나가지 않게 하세요 오른쪽이 불편한 예입니다 왼쪽처럼 객체 크기를 줄이고 멀리 두는 것이 좋습니다 그리고 가능한 한 휘도 대비를 낮추고 일반 텍스처를 사용하세요 그래야 눈으로 감지되는 동작이 줄어듭니다 마지막으로 주의해야 할 동작 유형은 객체와 애니메이션의 지속적인 진동입니다 편안한 경험을 만들기 위해서는 일반적인 진동 동작을 피하세요 특히 약 0.2Hz의 진동수를 피해야 합니다 5초에 1회 오가는 진동이죠 진동하는 동작을 피할 수 없다면 진폭을 낮게 유지하고 콘텐츠를 반투명하게 만드세요 왼쪽에서 보이듯이 눈으로 감지되는 동작이 훨씬 줄어듭니다 '동작 줄이기' 접근성 설정에서 진동이 없는 대안을 제공하는 방법도 좋습니다 동작을 편안하게 디자인할 때 주의 사항을 정리하며 마무리하겠습니다 안정감을 주기 위해 노력하고 헤드락 콘텐츠는 피하세요 카메라를 부드럽게 움직이고 진동을 최대한 피하세요 공간 디자인의 원리를 더욱 자세히 알아보고 비전 및 모션 지침이 실제로 적용되는 예를 보려면 여기 나열된 세션을 확인해 보세요 여기까지입니다 여러분이 얼마나 멋진 경험을 만들어 낼지 기대되네요! 시청해 주셔서 감사합니다! ♪