애플의 공간 UI 디자인(애플 비전 프로 디자인) 요약 정리 글

UI의 기본과 설계 원칙, 레이아웃 제작법, 앱 화면에서 공간으로 옮기기

 

Design for spatial user interfaces - WWDC23 - Videos - Apple Developer

디자인 원칙

1. 아이콘 

 

애플은 앱 아이콘을 3차원으로 제작, 앱 아이콘을 보면 확장됨, 레이어 사이에 빛 반사와 그림자를 추가했음

 

지켜야 할 것들

• 여러 개의 평면 레이어를 사용(최대 3개)
• 배경 레이어와 최대 2개의 전경 레이어
• 각 레이어는 정사각형(1,024X1,024픽셀)
• 모든 전경 레이어는 배경이 투명해야 함
• 배경 레이어는 구석까지 적용되어 있어야함
• 위 과정을 거친 후 모든 레이어가 원형 마스크로 크롭 됨
• 배경, 전경 레이어가 합쳐지면 자동으로 유리 레이어를 적용, 빛반사와 그림자를 추가함
• 반투명 픽셀 구역을 넓게 지정하지 말기

2. 소재

• 주변 공간에 쉽게 배치되어야 하며 어떤 거리에서도 쉽게 이용하고, 어떤 밝기에서도 잘 보여함 따라서 유리 소재, 즉 글래스모피즘을 사용한다.(가벼운 느낌을 주고, 윈도우 뒤 다른 앱이나 사람 같은 다른 요소를 궁금하게 함)
• 윈도우에 단색을 적용하지 말기, 불투명한 윈도우가 너무 많으면 답답한 느낌을 주고, 인터페이스가 무겁다는 인상을 준다.
• Mac os나 Ios와 달리 다크 모드가 없음. 대신 유리와 ui가 밝고 어두운 배경에 맞추어 자연스럽게 바뀜

유리 윈도우에서 시작하여

• 사이드바처럼 섹션을 분리하려면 어두운 소재를 사용해라 
• 버튼처럼 상호작용 요소를 강조하고 싶을 땐 밝은 소재 사용
  • 입력 영역처럼 일반적인 요소의 대비를 높일 수도 있음 
• 텍스트의 기본값은 흰색
• 유리 윈도우에서 더 밝은 버튼을 추가하고 싶다면 유리 소재 위에 배치하기!
  •  대비를 높이고 싶다면 뒤에 어두운 셀을 사용 > 밝은 소재가 뒤에 오는 등의 밝은 소재가 겹치는 건 피해야 함(가독성에 영향, 대비를 낮춤)

3. 타이포그래피

익숙함을 위해 모든 폰트는 모든 플랫폼에 사용되는 시맨틱 네임을 사용, 포인트 기반 단위 시스템에 폰트를 맞춰 모든 거리에서 가독성이 좋게 함 

 

• 휴대폰보다 폰트 가중치를 살짝 두껍게 조정함( Body : Ios에서는 Regular 비전 프로에서는 Medium, Title : Ios에서는 Semibold 비전 프로에서는 Bold) 따라서 텍스트가 언제나 또렷해짐, 가독성 향상
• 시스템 폰트를 사용하기를 추천함. 윈도우를 매우 큰 사이즈로 확대하더라도 작고 얇은 커스텀 폰트는 가독성이 떨어짐 이를 개선하기 위해서는 가중치를 높이거나 시스템 폰트처럼 가독성에 최적화된 폰트 사용을 고려해야 함

4. 활기

글라스 윈도우를 사용하는 애플 비전 프로에서는 활기를 이용한 UI디자인이 중요하다. 활기는 가독성을 높이며 시스템 구성 요소를 풍부하고 세련되게 표현한다 쉽게 말하자면 하얀색의 불투명정도로 이해하면 될 것 같다. 활기 효과는 시스템 요소에 기본값으로 적용되어 있는데 

 

활기를 사용하여 텍스트, 기호, 채우기 색의 상하 관계를 나타내면 되는데 3가지 모드가 있다.

1차는 기본적인 텍스트(Primart, 타이틀) 2차는 설명글, 주석, 자막 그리고 3차는 아마도 아예 활기가 없는 모드인 것 같다.

5. 색상

유리 소재는 뒤에 있는 요소가 비치기에 다양한 색상이 될 수 있다. 따라서 하얀 텍스트나 기호를 사용해야 한다. 색상을 쓴다면 배경 레이어나 전체 버튼 색상으로, 가능하면 커스텀 색상 대신 시스템 색상을 사용

레이아웃 

1. 보기에 편안하게 콘텐츠를 배치하는 법

•  눈과 손으로 상호작용하기에 편안함과 안정감을 주는 걸 우선해야 함.
• 인체 공학적으로 의도적 콘텐츠 배치를 통해 눈과 목에 무리를 주지 않아야 함.
  • 사람들은 좌우가 상하로 움직이는 게 쉬움. 시야를 고려하여 너무 위나 아래쪽에 배치하지 말기.
  • 큰 캔버스가 필요하다면 높은 화면 대신 폭이 넓은 화면을 선택
• 가장 중요한 정보는 가운데에 배치

2. 콘텐츠의 크기 

• 좋아요 버튼 같은 상호 작용 요소는 탭 대상 범위가 최소 60pt x60pt 여야함
  • 기본 버튼과 같은 UI 요소를 44pt로 작게 만들어도 주변에 공간(여백)을 주면 됨
  • 여러 개의 버튼을 나란히 배치할 경우 최소 16pt의 간격을 확보해야 함
  • 숨김 메뉴와 같이 작은 요소를 사용한다면 28pt의 미니 버튼을 섹션 제목과 같은 영역에 사용(작아도 주변 영역과 합쳐 60pt이상이기에 쉽게 선택가능)

3. 포커스 피드백

UI의 어떤 요소가 사용자와 상호 작용하는지 미묘하게 밝은 효과나 호버 효과를 주어 보기만 해도 알게 한다. 비활성화된 항목은 아예 포커스 피드백을 주지 않는다. 따라서 레이아웃을 만들 때 호버효과를 고려해야 한다. 목록이나 메뉴를 만들 때 항목 사이에 4pt정도의 여유 공간을 주어 호버 효과가 안 겹치게 해야 함.

 

내부 요소 간 모서리 반지름(Radius)과 여유 공간의 중심점이 같도록 설정.

 

내부 요소의 모서리 반지름+외부 영역 사이의 간격(Padding)= 외부 영역의 모서리 반지름 

 

스크린에서 공간으로

 

1. 윈도우, 탭바, 사이드바

IOS에서는 가로, 아래에 위치해 있던 탭바가 수직이며 윈도우 왼쪽에 고정되어 있음. 가벼운 느낌을 주기 위해서는 항목을 최대 6개로 제한하는 것이 좋음. 좀 오래동안 탭바를 본다면 확장되어 각 섹션의 이름이 나타남, 시선을 돌리면 다시 줄어듬. 사진처럼 하위 메뉴가 필요하다면 윈도우 안에 사이드바가 탭바와 함께 제공됨

2. 오너먼트 

IOS에서 사진 앱에 년, 월, 일을 탐색할 수 있는 것을 아래쪽에 오너먼트로 배치하여 효과적으로 툴바를 보여주는 방식이 되기도 함. , 앱에 어느 메뉴에 있든 노출시켜 지속적인 제어가 가능하게 한다.

이렇게 경계가 없는 버튼을 사용하기에 좋음(사람들이 볼 때만 호버 효과가 적용되게)

  

• 오너먼트가 윈도우의 아래쪽에 지속 노출된다면 메인 윈도우의 아래 테두리와 20포인트 겹치게 배치해야 함. 이렇게 배치하면 메인 윈도우와 통합된 것처럼 보이면서 콘텐츠를 많이 가리지 않음 스크롤을 할 때 색깔도 바뀌어 보기에도 좋다.
• 오너먼트는 끄고 킬 수도 있다. (Ex. 영화를 볼 때 소리바나 재생바)
• 오너먼트를 확장하여 추가 콘텐츠를 보여주거나 자체적인 탐색 메뉴를 제공 가능

3. 메뉴, 팝오버, 시트

 

iPad에서 메뉴는 열었을 때 버튼이 흐려진다.

 팝오버는 선택 요소를 말하며 내비게이션 바가 비활성화된다.

 

비전 프로에서는 메뉴와 팝오버를 윈도우 밖으로 확장할 수 있다.

 

선택된 버튼은 항상 선택 상태로 바꾸어야 한다. 이 플랫폼에서는 선택된 버튼을 표시할 때 까만색 레이블과 하얀색 배경을 사용함

이렇게 해야 화살표 없이 무엇을 선택하고 있는지 사용자에게 명확하게 전달할 수 있다. 

선택되지 않은 버튼에는 하얀색 버튼을 사용하지 않는 것이 일반적인 규칙이다

 

시트는 모달 뷰로 제공되며 앱의 중앙에 위치하며, 메인 윈도우와 같은 Z값을 가진다. 그리고 메인 윈도우가 뒤로 밀리며 흐려진다.

 

시트를 하나 더 표시한다면 두 번째 모달이 앞에 표시되며 한번 더 흐려지며 다른 윈도우를 뒤로 민다.

시스템 규칙상 종료와 뒤로 가기 버튼이 항상 왼쪽 위에 위치한다.

 

 

📝글 읽어주셔서 감사합니다~!

이것도 참고해보세요!

Apple Design Resources - visionOS | Figma Community