멋진 visionOS 앱 디자인하기

안녕하세요, 디자인 에반젤리스트 Sarah입니다 지난해 전 세계에서 개최한 Vision Pro 랩에서 저희 팀의 멋진 팀원들을 만나 보셨을 겁니다 디자인 에반젤리스트는 Apple 플랫폼에서 작업하는 디자이너 및 개발자를 위해 기술과 지침을 알리는 일을 합니다 이 세션에서는 훌륭한 visionOS 경험의 요소와 그 이유를 설명하겠습니다 먼저 Apple과 협력한 개발자들의 앱을 살펴보며 독특하고, 사려 깊고 높은 품질 기준을 제시하는 경험의 특징을 다루겠습니다 팀원들이 직접 공유하는 인사이트와 교훈도 살펴보세요 다룰 내용이 많으니 그럼 바로 시작하겠습니다 앱 또는 게임의 핵심 아이디어는 목적이 분명하며 플랫폼에 적합해야 합니다 먼저 visionOS의 제품 솔루션을 개괄적으로 살펴보겠습니다 그 다음 몰입감 적용에 대해 설명하고 다양한 방식으로 몰입감을 극대화하는 솔루션을 보여드리겠습니다 visionOS는 사람 중심의 편안한 상호작용을 제공합니다 앱도 그래야 합니다 탁월한 visionOS 앱은 품질 기준을 향상하고 훌륭한 디테일과 함께 기분 좋은 경험을 제공합니다 먼저 visionOS가 어떻게 가능성의 세계를 여는지 살펴보겠습니다 Apple은 개발팀과 협업할 때 우선 ‘핵심 순간’, 즉 visionOS에 최적화된 앱의 순간을 찾도록 권장합니다 ‘마음 챙기기’ 앱이 그 예입니다 이 꽃은 부드러운 맥박으로 호흡과 집중을 유도합니다 꽃이 확장되면 장면에 생동감이 더해집니다 visionOS에서만 가능한 경험이죠 핵심 순간을 찾는 방법은 앱마다 다릅니다 공간 솔루션 구축을 위해 개발팀들이 채택한 다양한 전략을 살펴보겠습니다 한 가지 방법은 앱이 새로운 것을 실현하는 법을 떠올리는 것입니다

JigSpace는 데모 및 발표 자료용 3D 애셋을 시각화하는 데 도움이 되는 앱입니다 이 제트 엔진을 보세요 매우 디테일하며 내부의 전기 배선을 보고 모델을 조각별로 분해할 수도 있습니다 기본적으로 애셋은 사진처럼 현실적이며 고품질의 시각화를 제공해야 설득력 있고 매력적입니다 새로운 것을 실현하려면 콘텐츠에 생동감을 더해 보세요 화면의 배기팬 내 기류 시뮬레이션처럼 애니메이션으로 실제 상황을 모방해 보세요 또는 현실에서는 번거로울 수 있는 모델 조작 방법을 제공할 수도 있습니다 예를 들어 부품 분해, 재료 교체 실시간 디자인 변경처럼요 훌륭한 솔루션은 구축에 시간이 걸리며 반복 실행 및 프로토타이핑이 필요합니다 이 앱은 Loona입니다 편안한 활동, 스토리텔링 분위기 있는 사운드와 근사한 애니메이션 장면을 제공하여 심리 안정 또는 수면을 도와주는 iOS 앱입니다 이 UI를 visionOS에서 윈도우 경험으로 제공하는 것도 나쁘지 않지만 Loona 팀은 좀 다른 방식을 채택했습니다 Loona의 공동 창립자 Sergey Gonchar입니다 우리는 visionOS에서 구현할 수 있는 최상의 경험을 찾기 위해 수많은 프로토타입을 만들어야겠다고 생각했습니다 Loona 팀의 초기 스쿠터 컨셉 스케치를 보죠 입체적인 2D 프로토타입을 어서 분해해 보고 싶은 느낌이 듭니다 시간이 걸렸지만 이 스케치는 수많은 재미와 놀라운 디테일 정교한 애니메이션을 선보이는 3D 모델로 발전했습니다 Vision Pro에서 Loona는 차분한 공간 게임으로 명상을 도와주는 3D 퍼즐이 생동감 넘치는 애니메이션 장면으로 변신합니다 이 게임은 모든 표준 제스처를 사용합니다 탭하여 조각을 집어 들고 해당 위치로 가져가 제자리에 놓으면 됩니다 퍼즐을 완성할 때마다 장면이 생생하게 움직여 성취감이 느껴집니다 Loona는 iOS 버전과 약간 다르게 접근하여 공간 플랫폼을 위해 인터랙티브 요소와 3D 장면을 재밌고 적절하게 적용했습니다 목적이 분명한 경험을 위해 마지막으로 고려해 볼 사항은 보완적인 요소를 구축하는 것입니다 앱에 visionOS와의 관련성이 크지 않은 대규모 기능 세트가 있는 경우 이 접근법을 채택해 보세요 Lowe's가 좋은 예입니다 이 기업의 iPad 및 iOS 앱은 재고, 매장 지도 제품 계산기 등 다양한 기능을 가득 제공합니다 Vision Pro에서는 visionOS 맞춤형 앱인 ‘Lowe's Style Studio’를 선보였습니다 몰입형 3D 주방 장면에서 벽면부터 가전제품까지 모든 것을 맞춤화할 수 있습니다 가상 공간에서 이러한 경험을 활용하면 여러 아이디어를 테스트하고 다양한 가전제품을 적용해 보며 디자인의 방향과 스타일을 구체화할 수 있습니다 Lowe's는 플랫폼 간 통합으로 소비자 여정을 완성했습니다 스타일 보드는 여러 기기에 저장되어 연속성을 유지합니다 여기에서 개별 상품 구입, 재고 확인 또는 가까운 매장 제품 검색 등이 가능합니다 JigSpace, Loona, Lowe's는 서로 매우 다른 제품들입니다 각 팀은 경험을 Vision Pro로 전환할 때 신중하게 접근했습니다 접근 방식에 목적이 분명했던 겁니다 visionOS용 빌드에서는 ARKit 및 RealityKit 등의 네이티브 프레임워크를 고려하여 기기의 기능을 최대한 활용하세요 앱 아이디어를 미리 구축하고 테스트하여 visionOS에서 성능을 가장 잘 발휘하는 방법을 알아보세요 훌륭한 Vision Pro 앱은 몰입감의 수준을 고려합니다 여러 가지 방법이 있는데 그중 3가지 사례를 보겠습니다

몰입감 넘치는 앱은 완전한 몰입을 통해 사용자를 새로운 공간으로 초대합니다 Fifth Star Labs의 Sky Guide는 이를 탁월하게 활용합니다 사용자가 밤하늘을 바라보면 별자리가 생생하게 살아 움직이는 특별한 천문관이 펼쳐집니다 천문 관측 위치는 전 세계 어디든 설정할 수 있으며 북극광도 볼 수 있습니다 하늘에서 별자리를 잡아당겨 자세한 정보를 볼 수 있고 손을 쌍안경처럼 사용하여 확대할 수도 있습니다 훌륭한 환경은 쉽게 알아볼 수 있고 관련성이 높은 생생한 공간으로 사용자를 안내하기 위해 심도와 규모를 정확히 재현합니다 하지만 맞춤형 환경이 모든 Vision Pro 앱에 적합한 것은 아니므로 이것이 몰입도를 높이는 유일한 방법이라고는 할 수 없습니다 종종 간과되는 부분이지만 사용자의 실제 환경과 통합하는 것도 좋은 방법입니다 Halfbrick의 Super Fruit Ninja를 보겠습니다 손으로 과일을 자르면 과즙이 튀고 여기저기 묻습니다 과일의 잔여물은 실제 배경의 표면에서 튀어 오릅니다 기기의 센서가 주변 벽과 표면을 스캔하기 때문에 게임에서 매번 재밌고 독특하며 반응성이 뛰어난 느낌을 받을 수 있습니다 또한 돼지 캐릭터 ’Truffles'처럼 캐릭터가 사용자 및 공간과 상호작용하는 방식도 세심하게 고려했습니다 Super Fruit Ninja의 리드 게임플레이 프로그래머 Samantha Turner입니다 Truffles는 과일을 따라다니기도 하고 사용자와 함께 노는 등 실제 세계에 탁월하게 통합됩니다 Truffles가 침대나 책상 위로 뛰어오르는 모습을 본 적도 있는데 매우 귀엽고 재미있어요 몰입감은 사용자에게 확장된 앱 또는 게임 경험으로 느껴지도록 설계해야 합니다 몰입감을 활용하는 또 다른 방법은 섬세한 사운드 디자인으로 의미 있는 청각적 순간을 제공하는 것입니다 사운드를 몰입감에 활용하기 위해 먼저 visionOS가 사운드를 처리하는 방식을 살펴보겠습니다 Vision Pro의 센서는 방의 크기, 재질 등 실제 공간의 특성을 파악합니다 시스템은 사용자가 상호작용하는 사물이 실제로 옆에 있는 것처럼 들리도록 잔향을 추가합니다 이렇게 정교한 수준의 인식과 정확한 재생 덕분에 Vision Pro는 강력한 공간 오디오를 선보입니다 iOS에서 햅틱으로 피드백을 제공할 수 있는 것처럼 오디오도 단순한 주변 음악이 아니라 사용자를 안내하고 격려하며 보상을 제공할 기회입니다 Shapes and Stories의 퍼즐 게임 Blackbox가 대표적인 예입니다 각 버블의 독특한 퍼즐은 기기의 기술을 활용하며 사용자의 탐험을 장려합니다 이 게임은 정교하고 창의적이며, 때때로 퍼즐이 어려워 약간 당황스럽기도 합니다 직접 플레이해 보면 이해하실 겁니다 사운드는 근본적으로 경험의 일부입니다 Blackbox의 사운드 디자이너 Gus Callahan이 말합니다

사운드 측면에서는 버블의 탄성을 통해 새로운 공간 감각을 전달하는 방법을 고민했습니다 버블이 늘어나면 사운드도 함께 늘어나 플레이어가 마치 악기처럼 연주할 수 있도록 했습니다 이러한 모든 디자인 요소가 통합되면 일대일 감각적 경험에 매우 가까워집니다 사운드는 앱에 몰입감과 생동감을 더하고 강한 인상을 남길 수 있는 좋은 도구입니다 visionOS의 기본적인 설계 요소는 입력, 편안함 사용성입니다 이 요소들이 왜 중요하며 앱에 어떻게 적용하는지 알아보겠습니다

오늘 소개하는 모든 앱은 사용자가 최소한의 신체 움직임으로 즐길 수 있는 앱입니다 Vision Pro는 머리에 쓰고 눈으로 제어하는 기기이므로, 앱이 실제로 어떤 공간에서 사용될지 예측할 수 없습니다 Super Fruit Ninja의 경험이 활동적으로 느껴지는 이유는 과일을 자를 때 직접 몸을 움직이기 때문인데요 플레이어가 주변을 걸어 다닐 필요는 없었죠 플레이 공간에는 바닥에 기하학적인 가이드가 있어 플레이어가 게임 플레이 중에 경계선 안에 머물도록 유도합니다 이동이 필요하지 않다는 것을 사용자에게 알리는 영리한 방법입니다 JigSpace에서 볼 수 있는 실물 크기의 F1 자동차 모델은 사용자가 주변을 돌아다닐 수 있고 공간 제약 때문에 이동할 수 없는 경우 모델을 축소할 수도 있습니다 움직임을 최소화하는 건 사용자 주변에 통제 불가능한 변수가 있음을 이해하고 사용자의 안전을 지키기 위함입니다 앱을 인체공학적으로 편안하게 만들려면 필요한 윈도우 수를 최소화하고 인터페이스의 일관성을 유지하세요 훌륭한 Vision Pro 앱은 무한한 가능성의 공간을 효과적으로 활용합니다 즉, 앱이 화면 크기에 얽매이지 않는다는 의미입니다 이는 훨씬 더 많은 유연성을 제공하지만 앱의 일관성을 유지하고 혼란을 피하기 위해 고려해야 할 제한 사항도 여전히 존재합니다 앱의 콘텐츠와 UI는 윈도우 안에 포함되어야 합니다 탭 막대 및 도구 모음 등 제어기는 윈도우 밖에 배치해도 되지만 뷰에 고정해야 합니다 이렇게 하면 사용자가 앱의 콘텐츠와 탐색 방법을 명확하게 파악할 수 있으며 실제 공간에서 보다 편안하게 위치를 변경하고 정렬할 수 있습니다 공간 앱이라고 해서 버튼과 UI를 사용자의 시야에 임의로 띄워야 하는 것은 아닙니다 PGA Tour는 무한한 가능성의 공간을 활용하여 더욱 향상되고 일관된 경험을 디자인했습니다 앱의 메인 윈도우에는 실시간 스트리밍과 토너먼트 정보가 표시됩니다 볼륨은 관련 코스와 샷 트레일의 리플레이를 표시합니다 증강 현실을 상황에 맞게 활용하여 향상된 스포츠 엔터테인먼트를 제공하는 데 중점을 둔 훌륭한 솔루션입니다 또한 앱에 이러한 콘텐츠를 위한 별도의 윈도우가 필요하지 않아 시청자가 콘텐츠를 정리하고 이동해야 하는 번거로움이 없다는 점도 마음에 듭니다 이 락업은 일관적이며 관리가 쉽습니다 시각적으로 편안한 경험은 visionOS 및 실제 세계와 조화를 이룹니다 윈도우에 사용하는 ‘Glass’ 머티리얼처럼요 visionOS에는 라이트, 다크 모드의 개념이 없기 때문에, Glass는 시스템을 통해 렌더링되고 사용자의 환경에 따라 스마트하게 적응합니다 브랜딩에 관한 논의도 많이 있었습니다 Red Bull은 독보적인 인지도와 확고한 브랜딩을 자랑합니다 Red Bull의 수석 제품 디자이너인 Kelly FitzGerald가 말합니다 Red Bull TV의 TV와 모바일 앱에서는 진한 파란색 배경을 일관된 브랜딩 요소로 사용했는데요 Vision Pro를 채택하면서 패스스루를 사용하게 되었습니다 따라서 눈에 잘 띄는 브랜딩 요소와 사용성 중 어느 쪽을 우선할지 결정해야 했습니다 Red Bull TV 앱은 자사 브랜드와 관련성이 큰 고품질 이미지를 브랜딩에 활용하기로 결정했습니다 하지만 메인 뷰를 스크롤할 때는 윈도우의 나머지 부분에 단색 배경색이 아닌 Glass 배경이 적용됩니다 이렇게 편안함이나 사용성을 저해하지 않으면서 브랜딩을 통합하는 방법을 찾아보세요 윈도우에 단색 배경을 사용하면 시각적으로 산만하고 불편할 수 있습니다 이런 배경은 주변 조명에 적응하지 못하고 주변 환경을 보는 시야를 가리기 때문입니다 Red Bull 팀의 또 다른 사려 깊은 접근 방식이 있습니다 이미지를 로딩할 때 우리 브랜드의 진한 파란색을 잠시 표시할 수 있는 기회를 포착했습니다 이렇게 작은 브랜딩 순간이 쌓이면 전체 브랜드를 구축할 수 있습니다 또한 visionOS 요소에 호버 효과를 적용하세요 호버 효과는 사용자의 시선에 피드백을 주는 하이라이트 효과입니다 Carrot Weather는 재밌고 유쾌한 날씨 예보 앱입니다 개성이 뚜렷하며 여러 플랫폼에 잘 맞게 제작되었는데요 인터페이스에 많은 데이터와 정보를 담고 있지만 호버 효과를 적절히 사용하여 훌륭한 경험을 제공합니다 시간별 온도 등 세부 정보를 제공하는 대화식 요소는 모두 호버 효과를 사용합니다 그러나 일몰, 일출 세부 정보처럼 정독해야 하는 데이터는 호버 효과가 필요하지 않습니다 이런 요소에 호버 효과를 주면 오히려 인터페이스가 혼란하고 복잡해집니다 대화식 요소에는 충분한 탭 타겟이 필요하므로 최소 60포인트 이상의 공간을 사용하세요 호버 효과가 너무 작으면 사용자가 앱을 아주 정확하게 터치해야 한다고 느낄 수 있으며 이는 답답하고 불편하게 느껴질 수 있습니다 호버 효과를 적절하게 디자인하면 자연스럽고 자유로운 상호작용을 지원할 수 있습니다 이제 앱 하나를 살펴보며 뛰어난 디자인이 사용자에게 얼마나 큰 기쁨을 주는지 알아보죠 제가 가장 좋아하는 visionOS 앱 중 하나인 Algoriddim의 DJay입니다 기분 좋은 경험은 현실에 대한 사용자의 기대와 일치하며 사용자의 공간 인식을 존중합니다 DJay는 디제잉 앱의 교과서와도 같습니다 레코드용 턴테이블 2개와 톤암, 템포 싱크 기능을 갖춘 훌륭한 디제잉 환경이죠 턴테이블은 손이 닿는 정면에 배치되어 사용자가 직접 상호작용하도록 유도합니다 레코드를 스크래칭하고 톤암을 움직이고 실제 턴테이블처럼 템포를 조절할 수 있죠 사용자는 손이 닿는 위치에 객체가 있으면 상호작용이 가능하다고 생각합니다 공간 경험을 디자인할 때 지켜야 할 중요한 원칙입니다 대화식 콘텐츠는 사용자 가까이 배치하세요 사용자가 콘텐츠를 움직일 수 있거나 상호작용이 간접적인 경우에도요 사용자 주변의 콘텐츠에 대한 인식은 애니메이션과 모션에 크게 좌우됩니다 DJay 앱을 실행하면 우선 트랙을 선택해야 합니다 음악 아이콘 주위의 윤곽선이 박동하듯 강조됩니다 음악 라이브러리를 탭하도록 유도하는 세심한 방법입니다 간단한 디테일이지만 큰 임팩트를 줍니다 움직임과 애니메이션은 사용자의 주의를 끌고 대화식 콘텐츠를 알리는 좋은 도구입니다 사람은 선천적으로 움직임에 민감하기 때문입니다 DJay 앱은 실제 세계와 동일한 맞춤형 제스처를 구축하여 앱의 상호작용을 사용자와 친숙한 경험에 연결했습니다 DJ가 헤드폰을 한 쪽 귀에 대고 있는 모습을 본 적이 있으신가요? 현재 재생 중인 곡과 다음 곡의 원활한 믹스를 준비하기 위해 트랙을 미리 들으려고 하는 것인데요 DJay 앱에서도 이 동작을 할 수 있습니다 한 쪽 손을 귀에 대면 해당 스피커에 다음 곡이 재생됩니다

이때 실제 헤드폰을 착용할 필요가 없습니다 그저 친숙한 디제잉 동작을 모방하면 되죠 이 경험을 인터프릿하는 과정에서 흥미로운 과제가 발생합니다 사용자가 머리를 고치거나 Vision Pro 스트랩을 조정하는 등 다른 이유로 손을 드는 경우를 구분해야 할 필요가 생긴 것인데요 Algoriddim의 CEO이자 공동 창립자인 Karim은 이 문제에 이렇게 접근했습니다 수많은 사용자 테스트를 거쳤습니다 제스처가 정확하게 인식되는지 확인하기 위해 피드백을 수집했죠 사용자 피드백은 매우 중요합니다 사용자가 앱을 사용하는 방식이나 특정 동작은 개발자의 예상과 많이 다를 수 있습니다 인터프릿을 추상화하여 경험의 접근성은 높이고 복잡성은 줄일 기회를 찾아보세요 DJay 앱의 턴테이블을 살펴보겠습니다 턴테이블은 꽤 오랫동안 아날로그 형태로 존재해 왔지만 이를 둘러싼 기술은 비약적으로 발전했습니다 예를 들어 기존 하드웨어에서는 템포를 맞추고 트랙을 싱크하는 게 복잡할 수 있습니다 디제잉에 익숙하지 않은 사람에게는 진입 장벽이 있죠 Algoriddim 팀은 이를 기회로 여겼습니다 ‘3D 환경에서 DJ가 템포를 수동으로 맞출 필요가 있나? 완전히 자동화할 수 있는데’라고 생각했죠 이러한 추상화는 복잡성을 줄일 뿐만 아니라 사용자가 디제잉에 집중할 수 있도록 도와줍니다

복잡성을 제거하면 사용자가 앱이 제공하는 기쁨을 효과적으로 즐길 수 있습니다 마무리하기 전에 visionOS 앱 빌드에 유용한 리소스를 소개합니다

Apple의 휴먼 인터페이스 가이드라인은 최신 모범 사례를 제공합니다 패턴이나 구성 요소에 대해 궁금한 점이 있으면 먼저 여기에서 최신 지침을 확인하세요 Apple 디자인 리소스를 활용하면 프로토타입을 빠르게 제작할 수 있습니다 Figma 및 Sketch 키트에는 기본 구성 요소가 포함된 광범위한 라이브러리가 있으므로 에셋을 직접 다시 빌드할 필요가 없습니다 오늘 소개한 모든 앱은 App Store에서 Vision Pro용 앱으로 제공됩니다 직접 사용해 보세요 시청해 주셔서 감사합니다