앱 아이콘, 타이포그래피, 재질, 생동감, 색 구성표 등의 구성 요소를 포함하여 Vision OS에서 직관적인 UI 경험을 제작하기 위한 필수 지침을 살펴보겠습니다.
Apple Vision Pro의 뮤직 라이브러리를 체험하는 소녀.
Apple Vision Pro를 경험해 보세요
앱 아이콘
환경에서 읽기 쉽고 사용 가능한 앱 아이콘과 인터페이스를 만들 때 고려해야 할 UI 기반과 디자인 원칙에 대해 살펴보는 것부터 시작하겠습니다.
Apple은 홈 뷰를 친숙하게 유지하기를 원했으며 한 단계 더 나아가 사용자 공간에서 앱 아이콘을 3차원적이고 사실적으로 만들었습니다. 사람들이 그것을 보면 확장됩니다. 그리고 시스템은 반사광 하이라이트와 그림자를 추가하여 레이어 사이의 미묘한 깊이를 강화함으로써 이러한 시각적 효과를 향상시킵니다.
Vision OS의 Notes 앱 아이콘 레이어 간 깊이입니다.
Notes 앱 아이콘의 레이어 간 깊이
그렇다면 훌륭한 아이콘을 어떻게 디자인할 수 있을까요? 우선, 여러 레이어를 사용해야 합니다.
다른 플랫폼에서는 레이어를 사용하여 시차 효과를 만듭니다. 여기서는 평면 레이어를 사용하기만 하면 시스템이 진정한 3D 효과를 만들 수 있습니다. 모든 앱 아이콘은 최대 3개의 레이어(배경 레이어, 상단의 최대 2개 전경 레이어)를 가질 수 있습니다.
앱 아이콘의 세 가지 레이어.
앱 아이콘의 세 가지 레이어
각 레이어는 정사각형 이미지이며 크기는 1024 x 1024 픽셀입니다. 두 전경 레이어 모두 배경이 투명해야 합니다. 디자이너는 배경 레이어를 가장자리에서 가장자리까지 정사각형 이미지로 디자인해야 합니다.
세 레이어의 1024 x 1024픽셀 정사각형 이미지입니다.
세 레이어의 1024 x 1024픽셀 정사각형 이미지
그러면 모든 레이어가 원형 마스크로 잘립니다.
마스킹 후 3겹.
마스킹 후 3겹
마지막으로 레이어가 서로 일치하면 유리 레이어가 자동으로 적용되어 깊이, 반사 하이라이트 및 그림자가 추가됩니다.
유리 레이어를 적용한 후의 Safari 앱 아이콘입니다.
유리 레이어 적용 후 앱 아이콘
그래픽을 중앙에 유지하십시오. 가장자리에 너무 가까우면 확장 시 중심에서 벗어난 것처럼 보일 수 있습니다. 반투명 픽셀의 큰 영역을 사용하지 마십시오. 불투명도가 감소된 레이어는 뒤에 투사된 그림자와 혼합됩니다. 이것이 바로 3차원 앱 아이콘을 쉽게 만들 수 있는 방법입니다.
불투명도 변경으로 앱 아이콘을 표현하는 올바른 방법과 잘못된 방법입니다.
불투명도 변경으로 앱 아이콘을 표현하는 올바른 방법과 잘못된 방법
재료
사람들이 앱 아이콘을 탭하면 대낮의 방, 비행기와 같은 작은 공간, 야간 등 다양한 장소에서 앱이 실행됩니다. 앱은 주변의 조명 조건에 적응해야 합니다. 사용자 주변 공간에 쉽게 배치할 수 있어야 하고, 어떤 거리에서도 쉽게 사용할 수 있어야 하며, 어떤 조명 조건에서도 쉽게 볼 수 있어야 합니다. 이것이 바로 Apple이 유리 소재라는 새로운 시각적 언어를 디자인한 이유입니다. 시스템이 정의한 이 아름다운 유리창은 사용자의 물리적 세계의 일부처럼 느껴집니다. 그리고 그 독특한 특성으로 인해 사람들의 주변 환경과 가상 콘텐츠에서 나오는 빛이 비춰질 수 있습니다.
유리 소재.
유리 소재
또한 반사광 하이라이트와 그림자는 공간에서의 규모와 위치를 강화합니다.
유리 재질의 반사 하이라이트 및 그림자.
유리 재질의 반사 하이라이트 및 그림자
또한 포함된 UI의 캔버스 역할을 하여 더 가벼운 느낌을 주고 물리적인 느낌을 더해줍니다. 또한 이 가벼운 자료는 사람들에게 다른 앱이나 사람처럼 창 뒤에 무엇이 있을지 알려줍니다. 뛰어난 공간 경험을 제공하려면 주변 환경을 인식하는 것이 중요합니다. 창문에는 단색을 사용하지 마세요. 불투명한 창이 너무 많으면 답답함을 느끼고 인터페이스가 무거워질 수 있습니다.
유리 재질의 창에 색상을 사용하는 예입니다.
유리 소재의 창문 색상 사용 예
Glass는 조명에 동적으로 반응하여 대비와 색상 균형을 조정하여 낮에서 밤으로의 전환과 같이 공간의 일부를 느끼게 합니다. iOS 및 macOS와 달리 이 플랫폼에는 뚜렷한 밝거나 어두운 모양이 없습니다. 대신 유리와 UI는 밝은 배경과 어두운 배경 앞에 배치될 때 자연스럽게 적응됩니다.
시스템 정의된 생생한 재질은 이 기능을 최대한 활용하여 다양한 시나리오와 조명 조건에서 앱이 멋지게 보이도록 보장합니다.
Glass는 조명에 동적으로 반응합니다.
유리는 조명에 동적으로 반응합니다.
소재를 만들어보자
먼저 유리창부터 시작합니다.
유리창.
유리창
사이드바와 같이 앱의 섹션을 분리하려면 더 어두운 재질을 사용하세요[1]. 또는 버튼 [2]과 같은 대화형 요소에 주의를 끌기 위해 더 가벼운 소재를 사용합니다. 또는 입력 필드[3]와 같은 표준 구성 요소의 대비를 높이기 위해 더 어두운 재료를 사용하는 것을 고려할 수도 있습니다.
유리 소재로 섹션을 분리하세요.
유리 재질의 별도 섹션
모든 UI 요소를 포함하는 음악 앱의 모습은 다음과 같습니다. 보시다시피 텍스트는 기본적으로 흰색으로 설정되어 있으며 Apple은 가독성에 영향을 미치고 대비를 줄이기 때문에 가벼운 소재를 서로 쌓는 것을 피했습니다.
모든 공간 UI 요소를 갖춘 음악 앱입니다.
모든 공간 UI 요소를 갖춘 음악 앱
타이포그래피
이제 타이포그래피가 이 플랫폼에 어떻게 적용되었는지 살펴보겠습니다.
친숙함을 유지하기 위해 모든 글꼴 스타일은 모든 플랫폼에서 작동하는 의미 체계 이름을 사용합니다. 포인트 기반 단위 시스템으로 조정되어 어떤 거리에서도 읽을 수 있습니다.
Apple은 또한 가독성을 높이기 위해 일부 글꼴 두께를 수정했습니다.
좀 더 자세히 살펴보겠습니다.
생생한 자료와 텍스트의 대비를 향상시키기 위해 글꼴 두께를 약간 더 무겁게 수정했습니다.
예를 들어 iOS에서 Apple은 본문 텍스트 스타일에 일반 가중치를 사용합니다. 이 플랫폼에서 Apple은 매체를 사용합니다. 제목의 경우 약간 굵은체 대신 굵은체를 사용하여 텍스트를 항상 명확하게 유지합니다.
결과적으로 가독성을 높이기 위해 추적이 약간 증가되었습니다. Apple은 여러 플랫폼에서 공유하는 잘 알려진 글꼴 스타일 외에도 사용자가 사용할 수 있는 넓은 편집 스타일 레이아웃을 활용하는 두 가지 새로운 글꼴 스타일을 추가했습니다.
공간 UI의 중간 및 굵은 텍스트 스타일.
공간 UI의 중간 및 굵은 텍스트 스타일
다음은 아케이드의 Extra Large 타이틀 1의 예입니다.
아케이드용 초대형 타이틀.
아케이드의 초대형 타이틀
창을 엄청나게 큰 크기로 확장할 수 있더라도 작거나 가벼운 사용자 정의 글꼴은 여전히 읽기 어려울 수 있습니다.
이를 개선하려면 무게를 늘리거나 시스템 글꼴과 같이 최적화된 가독성을 위해 디자인된 서체를 사용하는 것이 좋습니다.
활기
이는 시스템 전체의 가독성을 유지하는 데 가장 중요한 세부 정보 중 하나입니다. Vibrancy는 재질 위에 표시되는 전경 콘텐츠를 밝게 하고 뒤에 있는 것의 빛과 색상을 앞으로 끌어당겨 작동합니다. 이 플랫폼에서는 배경이 끊임없이 변할 수 있으므로 실시간으로 생동감이 업데이트되어 텍스트를 항상 읽을 수 있도록 합니다.
배경이 끊임없이 변화함에 따라 실시간으로 생동감이 업데이트됩니다.
배경이 끊임없이 변화함에 따라 실시간으로 생동감 업데이트
유리 소재 위에 생동감이 작용하여 가독성을 높이고 시스템 소재를 더욱 풍부하고 세련된 느낌으로 만듭니다. 가능하면 시스템 구성 요소를 사용하십시오. 기본적으로 이러한 생동감 효과를 활용합니다.
유리 소재 위에 생동감이 없습니다.
유리 소재 위에 생동감이 없음
유리 소재 위에 생동감을 더합니다.
유리 소재 위에 생동감을 더하다
방금 본 것처럼 생동감은 가독성을 높이고 재료의 모양을 향상시킵니다.
이제 어떻게 활용할 수 있는지 살펴보겠습니다. 활기를 사용하여 텍스트, 기호 및 채우기의 계층 구조를 나타낼 수 있습니다. 1차, 2차, 3차의 세 가지 모드가 있습니다. 표준 텍스트에는 기본을 사용하십시오. 설명 텍스트, 각주, 자막에는 보조를 사용하세요.
1차, 2차, 3차 진동 모드
그림 물감
유리 소재는 그 뒤에 있는 색상을 보여주기 때문에 다양한 색상이 있을 수 있다는 것을 보셨습니다. 유리 위에 있는 다채로운 요소는 유리 색상이 비슷한지 확인하기 어려울 수 있습니다.
대부분의 경우 항상 명확하게 표시되도록 흰색 텍스트나 기호를 사용하는 것이 좋습니다. 색상을 사용해야 하는 경우 사람들이 볼 수 있도록 배경 레이어나 전체 버튼에 사용하세요. 가능하다면 사용자 정의 색상 대신 시스템 색상을 사용하십시오. 시스템 색상은 가독성을 위해 보정되었으며 유리의 색상과 대비를 유지하도록 동적으로 조정되었습니다.
텍스트나 기호에 색상을 배치하는 잘못된 방법과 올바른 방법.
텍스트나 기호에 색상을 배치하는 잘못된 방법과 올바른 방법
이상으로 비전 OS에 대해 친숙하고 읽기 쉽고 사용하기 쉬운 디자인 경험을 위해 따를 수 있는 UI 구성 요소, 재질, 타이포그래피, 생동감 및 색상에 대한 지침을 마무리했습니다.
