visionOS용 위젯 디자인하기

안녕하세요 visionOS를 위한 위젯 디자인에 잘 오셨습니다 저는 Jonathan이고 잠시 후 제 동료 Moritz가 위젯에 대한 많은 것을 공유하기 위해 함께할 예정입니다 위젯은 사용자에게 항상 필요한 정보를 한눈에 제공하여 앱을 직접 열지 않고도 중요한 일들을 놓치지 않도록 도와줍니다 날씨 확인, 캘린더 일정 확인 목표 달성률 추적 등 위젯을 통해 유용한 콘텐츠에 쉽고 빠르게 접근할 수 있습니다 이번 세션에서는 이것이 어떻게 visionOS로 확장되는지 알아보고 플랫폼의 공간적, 시각적 기능을 활용하여 생활 공간에 자연스럽게 어울리는 위젯을 디자인하는 방법을 보겠습니다 visionOS에서는 위젯이 새로운 형태로 나타납니다 위젯은 사용자 주변 환경에 어울리는 3차원 객체가 되죠 벽, 책상, 선반 등에 배치하여 앱 정보를 주변에 자연스럽게 배치하고 가까이에서 확인할 수 있습니다

이제 Moritz와 함께 이러한 위젯들을 생생하게 구현하는 디자인 시스템을 소개하겠습니다 이번 세션에서는 위젯이 공간 내에서 작동하는 원칙을 살펴보고 새로운 소재, 스타일, 크기를 활용하는 실질적인 팁을 공유하죠 위젯은 시각적으로 매력적이면서도 생활과 일과 휴식을 취하는 공간에 자연스럽게 조화될 수 있도록 합니다 이미 iPad 앱에 위젯을 포함하고 있다면 출발이 좋습니다 호환성 모드만 활성화하면 기존 위젯이 visionOS로 바로 이전되어 자동으로 새로운 공간적 시각적 스타일이 적용됩니다 이러한 처리 방식은 디자인에 깊이와 입체감을 더하고 위젯을 주변 환경에 쉽게 배치할 수 있도록 돕습니다

visionOS에 특화된 네이티브 위젯을 직접 제작할 수도 있습니다 네이티브 위젯을 사용 시 플랫폼에 특화된 크기와 시각적 스타일의 향상으로 위젯이 주변 환경과 더 자연스럽게 조화를 이룹니다 Music Poster 위젯은 화면 속 인터 페이스를 넘어 실제 방 안의 포스터처럼 느껴지도록 디자인된 훌륭한 예시입니다 디자인을 설명하기 위해 Vision Pro의 위젯을 뒷받침하는 네 가지 핵심 원칙을 자세히 살펴보겠습니다 제1원칙은 visionOS 위젯의 가장 중요 특징의 하나인 지속성입니다 사용자가 위젯을 공간에 배치하면 해당 위치에 고정되어 유지되는데 세션이 바뀌어도 방을 옮기거나 기기를 껐다 켜도 위젯은 항상 그 자리에 있습니다

이러한 지속성을 바탕으로 제2원칙은 고정된 크기입니다 위젯은 실제 세계와 일관된 크기를 유지해 어디에서도 적정 비율로 자연스럽게 느껴지도록 합니다 예를 들어 Music Poster 위젯은 초대형 템플릿 크기를 사용하여 실제 인쇄된 아트 프레임과 비슷한 친숙한 크기를 제공합니다 visionOS의 위젯은 지속성 고정 크기뿐만 아니라 앱 개발자와 사용자 모두를 위해 높은 수준의 맞춤 설정이 가능합니다 사용자는 공간에 맞춰 위젯을 자유롭게 맞춤화할 수 있으며 개발자는 다양한 공간에 자연스럽게 어울리는 스타일 옵션을 제공할 수 있습니다

마지막으로 근접성 인식 원칙이 있습니다 visionOS의 위젯은 사용자와의 거리에 따라 외관과 레이아웃을 자동으로 조정하므로 멀리서 보든 가까이에서 보든 항상 적절한 수준의 정보를 제공하죠 각 원칙을 하나씩 살펴보죠 먼저 지속성이 공간에서 위젯의 동작 방식에 어떤 영향을 미치는지 살펴보죠 위젯은 방에 배치되면 그 위치에 영구적으로 남아 사용자의 실제 환경 속에서 맥락을 인식하고 지속적으로 존재하는 경험을 설계할 수 있는 기회를 제공합니다 자세한 내용을 살펴보기 전에 visionOS에서 위젯에 대한 접근 방식의 이해는 매우 중요합니다 visionOS에서는 홈 그리드의 위젯 앱으로 위젯을 쉽게 찾고 배치하며 이를 통해 다양한 공간에 위젯을 손쉽게 추가할 수 있습니다 위젯 앱에서 위젯을 추가하면 처음에는 라이브러리 창 옆에 분리된 상태로 표시됩니다 위젯을 실제 공간에 고정하려면 수평 또는 수직 표면에 배치해야 합니다 이때 위젯의 위치는 영구적으로 고정됩니다 책상, 테이블, 선반과 같은 수평면에 위젯을 배치할 경우 위젯은 사용자를 향해 약간 기울어지는데 이러한 미묘한 각도는 가독성도 높여 줍니다 공간에 고정된 듯한 느낌을 주기 위해 그림자를 드리우기도 합니다

특히 벽에 배치할 경우 벽면에 딱 맞게 정렬될 뿐만 아니라 액자처럼 현실감 있는 그림자를 만들어 냅니다 visionOS 위젯은 프레임 내에 항상 표시되므로 디지털 콘텐츠와 주변 환경을 자연스럽게 연결합니다

visionOS에 적용할 위젯 종류를 고민하거나 디자인을 시작할 때 위젯을 사용자가 배치할 공간의 일부로 고려하면 도움이 됩니다

따라서 디자인 시 항상 주변 환경과의 맥락을 고려하세요 위젯은 단순한 플로팅 요소가 아니라 주방, 거실, 사무실 등 실제 공간에 위치합니다 위젯의 모양과 사용 방식은 주변 환경에 따라 결정되므로 초기 단계에서 이를 고려하면 더 나은 경험을 제공할 수 있죠

예를 들어 visionOS의 날씨 위젯은 큰 창문과 유사한 형태를 사용합니다 이 디자인은 현재 날씨를 명확히 보여주는 데 초점을 맞추어 창밖을 보는 듯한 느낌을 주고자 합니다 텍스트 크기는 방 안 어디에서든 한눈에 들어오도록 설계되어 벽에 걸었을 때도 가독성이 좋습니다 크기와 모습의 변화는 위젯이 실제 공간에 조화롭게 적응하고 그 공간들을 더욱 돋보이게 하는지를 잘 보여주는 예시입니다 visionOS에서는 위젯을 한 번 배치하면 그 자리에 유지되지만 사용자는 여러 개의 위젯을 배치할 수 있습니다 즉 동일 위젯을 한 공간에 여러 번 추가하는 멀티 인스턴스 기능이죠 벽에 여러 위젯을 배치하면 익숙한 그리드 레이아웃 배열이 되고 크로스 플랫폼 디자인 가이드라인을 준수하면 위젯이 그리드 내 다른 위젯과 자연스레 어울리도록 만들 수 있죠

보다 일반적인 위젯 디자인 가이드가 필요하다면 제 동료 Mac의 '멋진 위젯 디자인하기' 세션을 참고하세요

Vision을 사용할 때 위젯은 실제 세계에 존재하는 듯한 느낌을 줍니다 위젯은 모든 가상 콘텐츠 뒤에 표시되어 주변 공간과의 연결감을 높입니다 또한 실제 물리적 표면에만 고정되므로 가상 환경에 부착되거나 유지되지 않습니다 위젯이 공간에 고정되는 방식을 이해했으니 이제 공간 내에서 위젯 크기를 조정하는 방법에 대해 알아보죠 이제 두 번째 원칙인 고정된 크기에 대해 알아봅시다 디지털 콘텐츠는 실제 사물과 함께 존재할 때 적절한 크기로 보이는 것이 중요합니다 visionOS의 위젯은 명확하고 일관된 크기를 갖추고 있어 집 안 어느 곳이든, 즉 벽, 책상, 선반 등에 배치해도 자연스럽게 조화를 이룹니다

visionOS는 다른 플랫폼과 유사하게 다양한 위젯 템플릿을 제공합니다 중요한 차이점은 크기가 실제 치수와 연결되어 있다는 점입니다 선택한 위젯 크기가 공간에서 물리적으로 나타남을 의미하므로 신중한 선택이 필요합니다 위젯을 어디에 배치할지 벽에 걸지, 작업 공간 옆에 둘지 고려하여 주변 환경에 가장 적합한 크기를 선택하세요 실제 사물과 함께 공간을 공유하는 만큼 레이아웃 디자인이 더욱 중요해졌습니다 프린트 또는 길 찾기 디자인 원칙을 염두에 두고 디자인하되 명확한 계층 구조, 인상적인 타이포그래피, 신중한 크기 조절로 다양한 거리에서 콘텐츠를 명확하게 볼 수 있도록 해야 하죠 크기가 맥락을 효과적으로 지원 하는 방법을 보여주는 예시인데요 생산성을 높이는 데 중점을 둔 위젯을 디자인할 때는 책상에 두고 사용하기 편리하도록 작은 템플릿 크기가 좋아요 이러한 접근 방식은 특히 할 일 목록 같은 위젯에 적합하죠 이 위젯은 Mac 가상 디스플레이 옆에 배치되어 작업을 하면서도 한눈에 쉽게 확인할 수 있습니다 반면에 Vision Pro를 사용하여 시각적으로 풍부한 예술 작품이나 사진으로 공간을 꾸미고자 한다면 초대형 템플릿 크기를 고려해 보세요 이렇게 하면 위젯이 단순한 인터페이스를 넘어 마치 벽에 걸린 예술 작품처럼 존재감 있는 오브젝트가 됩니다 우리는 지금까지 적절한 템플릿 크기 선택이 위젯이 여러 환경에 자연스럽게 통합되는 데 어떻게 기여하는지 살펴보았습니다 템플릿 크기는 완전히 고정된 것이 아니므로 사용자가 직접 조절할 수 있습니다 코너 조절점을 사용해 각 템플릿 크기를 75%에서 125%까지 자유롭게 조정하면서도 레이아웃을 유지할 수 있습니다 따라서 위젯의 크기 조절이 가능 하고 근접해서 볼 수 있다는 점을 고려하여 항상 고해상도 애셋을 사용하는 것이 중요합니다 이제 제 동료 Moritz가 위젯을 더욱 개인화하고 표현력을 높이며 다양한 환경에 적응할 수 있도록 만드는 방법을 안내해 드릴 것입니다 안녕하세요 저는 Moritz입니다 visionOS에서 위젯이 사용자가 또 개발자 여러분이 제공하는 옵션을 통해 어떻게 개인화될 수 있는지 보여드리게 되어 기쁩니다 이러한 선택지를 통해 사용자는 환경과 취향에 맞춰 위젯을 자연스럽게 꾸밀 수 있습니다

각 요소가 어떻게 조화롭게 어우러지는지 자세히 살펴보죠 위젯을 디자인할 때 전체적인 외관은 두 가지 스타일 중에서 선택하여 정의할 수 있습니다 Paper 스타일은 프린트처럼 견고하고 주변 환경의 일부로 보이는 스타일입니다 Glass 스타일은 더 가볍고 레이어가 겹쳐진 듯한 느낌을 주어 전경과 배경 사이에 심도와 시각적 분리를 더합니다 각 스타일은 공간에서 뚜렷한 존재감을 드러내므로 원하는 경험에 맞는 스타일 선택이 중요합니다 먼저 Paper 스타일을 살펴보면 인쇄물과 같은 느낌을 주어 실제 방 안의 오브젝트처럼 보이게 하고 싶을 때 적합합니다 이 스타일은 위젯 전체가 주변 조명에 반응하여 자연스럽게 환경에 녹아들도록 합니다

예를 들어, Music Poster 위젯은 Paper 스타일을 사용하여 앨범과 플레이리스트를 벽에 걸린 액자처럼 보여 줍니다

Paper 스타일의 시각적인 특징은 몇 가지 핵심 요소로 이루어집니다

시스템이 제공하는 프레임 사용자의 디자인 및 제어 콘텐츠 그리고 이 모든 것을 연결하여 주변 조명에 반응성을 더하는 섬세한 반사 코팅의 조합입니다 Paper 스타일이 공간에 자연스럽게 녹아드는 데 중점을 두는 반면 Glass 스타일은 명확성과 대비를 강조합니다 Glass 스타일은 특히 정보량이 많은 위젯에 적합하며

전경 요소가 항상 선명한 전체 색상으로 표시되어 주변 조명에 영향을 받지 않고 주요 콘텐츠를 하루 종일 또렷하게 유지할 수 있습니다

또한 Glass 스타일은 전경과 배경 사이에 시각적 분리를 통해 개발자가 어떤 부분을 환경에 반응하도록 하고 어떤 부분을 일관되게 유지할지 결정할 수 있도록 합니다

예를 들어 뉴스 위젯에서 편집 이미지는 은은하게 배경에 자리 잡은 듯한 인쇄물 느낌을 주며 헤드라인은 전면에 배치되어 항상 선명하고 읽기 쉽게 유지됩니다

이처럼 Glass 스타일은 여러 레이어가 조화롭게 작용하여 공간에서 심도, 명확성 그리고 존재감을 만들어냅니다

시스템이 제공하는 프레임은 위젯을 특정 표면에 고정합니다 배경이나 뒤판은 콘텐츠 뒤에 배치 되며 자유롭게 정의할 수 있습니다

UI Duplicate Layer는 인터페이스에 미묘한 심도를 더해 메인 콘텐츠 바로 뒤에 어둡고 그림자 같은 형태로 나타납니다

UI Layer에는 텍스트, 글리프 그래프 등 핵심 콘텐츠가 있으며 이 레이어의 요소들은 밝고 선명해 높은 가독성을 유지합니다

마지막으로 Coating Layer는 부드럽고 반사되는 마감 처리를 더해 실내 조명에 반응하도록 하죠 여러 레이어가 결합하여 Glass 스타일 시각 구조를 형성해 선명함, 입체감 유연성을 제공합니다

이제 위젯의 시각적 구조가 완성되는 과정을 살펴보았으니 색상부터 시작하여 사용자가 위젯 외관을 개성적으로 꾸밀 수 있는 방법을 알아보겠습니다 visionOS는 다양한 환경에 잘 어울리도록 설계된 풍부한 시스템 팔레트를 제공합니다 라이트 모드와 다크 모드를 각각 7개씩 제공하여 사용자가 원하는 스타일에 맞춰 위젯 색상을 자유롭게 설정해 어디에서도 위젯이 돋보입니다 위젯을 디자인할 때는 시스템 색상 팔레트에서 콘텐츠가 어떻게 보이는지 반드시 테스트해야 합니다

위젯은 보정 없이 디자인된 원래 색상으로 시작합니다

사용자는 위젯을 배치한 후 설정 UI에서 원하는 색을 직접 선택하여 맞춤화할 수 있습니다

위젯 배경에 색상 틴팅을 적용할지 여부를 선택할 수 있으며 사진이나 일러스트의 색상 유지를 위해 틴팅을 적용하지 않을 경우 선택한 색상 팔레트와 배경의 조화를 확인해야 합니다 위젯의 프레임은 항상 색상 틴팅을 받으며 이를 제외할 수 없다는 점을 기억하세요 색상과 스타일은 위젯이 공간에 어울리도록 돕지만 조명이 하루 동안 변하듯이 재질도 위젯의 느낌에 중요합니다

Paper는 조명에 따라 어두워져 시각적으로 통합된 느낌인 반면 Glass는 낮은 조도에서도 전경 요소를 밝고 읽기 쉽게 만듭니다 이처럼 소재가 다양한 조명에서 위젯을 자연스럽게 만드는 것처럼 장착 스타일은 위젯의 주변 공간과의 연결을 결정합니다

위젯의 벽 배치 방법에 따라 단순한 전시 오브젝트로 보이거나 다른 공간으로 이어지는 창문처럼 보일 수도 있습니다 visionOS에서는 사용자가 선택할 수 있는 두 가지 장착 방식 즉 Elevated과 Recessed를 제공합니다

Recessed 방식은 벽을 잘라낸 듯한 착시를 일으켜 콘텐츠가 공간 안으로 들어간 것처럼 보이게 합니다 날씨나 에디토리얼 비주얼처럼 몰입감이나 분위기 있는 콘텐츠에 이상적이고, 심도가 더해지면 경험은 더욱 풍부해집니다

Elevated 스타일은 위젯을 벽면에 배치하여 액자처럼 걸린 듯한 느낌을 주어 알림이나 미디어 데이터를 한눈에 보여주는 콘텐츠처럼 시각적으로 두드러져야 하는 요소에 적합합니다

위젯은 기본적으로 Elevated 스타일을 사용하는데 수직 및 수평 표면 모두에서 잘 어울려 대부분의 위젯 유형에 적합하기 때문이죠

특히 위젯이 책상이나 테이블과 같은 수평 표면에 놓일 때 Elevated 스타일이 적용되어 일관성 있고 친숙한 느낌을 줍니다

Recessed 스타일은 독특한 심도를 만들어내는데 날씨 위젯에서 마치 다른 장소로 통하는 창처럼 느껴지는 것이 그 예입니다 이 효과는 정렬에 따라 달라지므로 테이블이나 책상처럼 수평면이 아닌 수직면에서만 사용합니다 Recessed 스타일을 사용 않거나 단독으로 사용할 수 있습니다 그럴 경우, 수평면 배치 기능은 사용할 수 없습니다 사용자가 위젯 모양을 맞춤화하는 또 다른 방법은 프레임 두께를 조정하는 것입니다

프레임 두께는 템플릿 크기와 별개로 설정할 수 있으며 얇은 것부터 두꺼운 것까지 5가지 옵션이 있습니다

모든 너비에서 레이아웃을 테스트해 균형을 확인해 보세요 단, Recessed 스타일에서는 프레임 두께가 고정되어 있어 임의로 변경할 수 없다는 점을 유념해야 합니다

프레임 두께, 장착 방식 틴팅 등의 모든 요소는 사용자 지정 UI에서 통합적으로 관리할 수 있으며 사용자는 자신의 공간과 스타일에 최적화된 위젯을 만들 수 있습니다

시스템은 표준 옵션을 처리하지만 UI를 확장하여 디자인에 맞는 맞춤 설정을 추가할 수도 있습니다

예를 들어, Music Poster 위젯을 사용하면 사용자가 앨범 아트에서 생성된 밝고 어두운 테마를 선택하거나 시간대에 따라 자동으로 색조가 조정되는 옵션을 선택합니다

이처럼 매개변수를 노출하면 콘텐츠에 특화된 의미 있는 사용자 정의를 제공하여 위젯을 표현력이 풍부하고 적응력이 뛰어나게 됩니다 지금까지 위젯을 맞춤화하고 스타일을 적용하여 어떤 공간에도 자연스럽게 배치하는 방법을 살펴보았습니다 visionOS 위젯의 또 다른 핵심 기능은 근접 인식인데 이 기능은 위젯에 사용자와의 거리에 대한 정확한 정보를 줍니다 덕분에 정보 밀도를 실시간으로 조정하여 멀리서 보든 가까이서 보든 위젯을 항상 읽기 쉽고 적절히 유지하며 적절한 정보를 제공할 수 있습니다

visionOS는 디자인에 활용 가능한 두 가지 주요 임계값을 제공합니다

가까이에서 볼 때 적용되는 기본 상태와 멀리서 볼 때 적용되는 단순화 상태가 그것입니다 두 상태를 모두 지원하기 위해 전체를 새로 디자인할 필요 없으며 레이아웃을 신중하게 조정하여 디테일을 줄이거나 글자 크기를 변경하는 방식으로 어느 거리에서든 콘텐츠를 한눈에 보기 쉽고 효과적으로 전달합니다

예를 들어 스포츠 위젯의 경우 멀리서 볼 때는 가장 필수적인 정보만 표시되지만

가까이 다가가면 현재 경기의 자세한 정보가 나타납니다

부드럽고 일관된 사용자 경험을 제공하기 위해 두 거리 임계값 모두에서 공통 요소를 유지하는 것이 좋습니다

이렇게 하면 레이아웃이 연속적으로 느껴지는 동시에 각 요소가 어느 거리에서든 적절한 크기로 표시되어 읽기 쉬워집니다 레이아웃을 조정하는 것도 중요하지만 근접성은 사용자가 위젯과 상호 작용하는 방식에도 영향을 줍니다

위젯은 가볍고 한눈에 볼 수 있는 상호작용을 지원합니다 예로, 라이브 야구 경기 정보를 더 보여주는 버튼을 추가합니다

근접 인식을 활용하여 사용자가 위젯에 가까이 있든 멀리 있든 상호 작용 영역을 쉽게 선택할 수 있도록 디자인하세요 위젯에 상호작용 기능이 없다면 탭할 때 앱이 즉시 실행되는 단축어로 작동합니다

그렇다면 근접 인식은 어떻게 활용해야 할까요? 모든 위젯에 필수적인 기능은 아니지만 거리에 따라 위젯의 표시 방식을 조정해 가독성을 크게 높입니다

이는 반응형 디자인과 유사한데 화면 크기 대신 거리에 따라 보이는 크기가 변하는 것과 같습니다 레이아웃은 적절한 수준의 세부 정보를 표시하도록 조정됩니다

이제 visionOS 위젯이 공간에 자연스럽게 나타나고 환경에 반응하며 거리에 따라 조정되는 방법을 살펴보았으므로

레이아웃, 재료, 상호 작용 사용자 정의를 통해 유용하면서도 개인적인 경험을 만들 수 있는 기회가 많습니다

마지막으로 시작할 때 기억해야 할 몇 가지 중요한 점을 정리하죠

콘텐츠가 이 새로운 환경에서 어떤 역할을 할지 고민해 보고 이미 앱에 위젯이 있다면 사용자의 공간에 배치되었을 때 어떤 새로운 의미를 갖게 될지 생각해 보세요 visionOS에 최적화된 네이티브 경험을 만들고 있다면 하루 종일 사용자에게 실질적인 가치를 제공할 수 있는 지속적인 콘텐츠는 무엇일지 고려해 보세요

기술적인 세부 사항과 앱에 위젯 구현하기에 대해 더 알고 싶으시면 'WidgetKit의 새로운 기능'을 확인해 보세요

visionOS는 이제 위젯을 위한 새로운 가능성을 열어줍니다 여러분이 어떤 것을 만들어낼지 기대하고 있겠습니다! 시청해 주셔서 감사합니다 여러분의 아이디어, 감각, 멈출 때를 아는 판단력을 발휘해 보세요 감사합니다!