공간 UI 디자인하기

♪ 부드러운 힙합 연주곡 ♪ ♪ 안녕하세요 Miquel Estany Rodriguez입니다 저는 Lorena Pazmino입니다 Apple 디자인 팀 소속이죠 이 세션에서는 공간 UI 디자인에 대해 이야기하겠습니다 이 플랫폼에 적응할 수 있도록 기존 플랫폼의 일관성과 친숙함을 유지한 시각적인 언어를 구축하면서 일부 요소를 발전시켜 몰입감 넘치는 공간 경험을 선사하고자 했습니다 먼저 알아볼 수 있고 환경에서 사용할 수 있는 앱 아이콘과 인터페이스를 제작하기 위해 여러분이 고려해야 할 UI의 기본과 설계 원칙을 알아보겠습니다 그다음에는 핵심 개념과 모범 사례를 통해 인체공학적이고 탐색이 쉬운 레이아웃 제작법을 알아보죠 마지막으로 이 플랫폼을 통해 여러분의 앱을 화면에서 공간으로 옮기는 방법과 Apple의 시스템 요소를 전부 소개할 텐데 대부분 여러분이 익숙한 내용이며 일부 요소는 전혀 새로운 내용입니다 먼저 UI의 기본에 관해 자세히 살펴보죠 이번 섹션에서 다룰 핵심 설계 원칙입니다 먼저 앱 아이콘에 관해 얘기해 보죠 먼저 홈 뷰를 익숙하게 설계했고 한 단계 더 나아가서 앱 아이콘을 3차원으로 제작해 여러분의 공간에 있는 것처럼 표현했습니다 앱 아이콘을 보면 아이콘이 확장되고 시스템이 시각 효과를 통해 빛 반사와 그림자를 추가하여 레이어 사이의 미묘한 깊이감을 주죠 좋은 아이콘은 어떻게 디자인할까요? 먼저 여러 개의 레이어를 사용하세요 다른 플랫폼은 레이어를 통해 시차 효과를 만들지만 여기서는 평평한 레이어를 사용하여 시스템이 3D 효과를 만들어 내죠 앱 아이콘의 레이어는 최대 3개까지 가능하며 배경 레이어와 최대 2개의 전경 레이어를 얹을 수 있습니다 각 레이어는 정사각형 이미지이며 크기는 1,024x1,024픽셀입니다 모든 전경 레이어는 배경이 투명해야 하죠 배경 레이어는 구석까지 적용된 정사각형 이미지로 디자인하세요 이후에 모든 레이어가 원형 마스크로 크롭됩니다 마지막으로 모든 레이어가 하나로 합쳐지면 유리 레이어를 자동으로 적용하여 깊이감과 빛 반사, 그림자를 추가하죠 그래픽을 중앙에 맞추세요 가장자리에 너무 가까우면 확대했을 때 불균형해 보입니다 반투명 픽셀 구역을 넓게 지정하지 마세요 불투명도를 낮춘 레이어가 뒤에 적용된 그림자와 섞이죠 이렇게 쉬운 방법으로 3차원 앱 아이콘을 만들 수 있죠 다음은 소재에 관해 얘기하겠습니다 사람들이 여러분의 앱 아이콘을 탭하면 다양한 공간을 배경으로 앱이 실행되죠 지금 제가 있는 한낮의 방일 수도 있고 비행기처럼 좁은 공간이나 밤일 수도 있습니다 앱이 여러분 주변의 조명 조건에 적응해야 하죠 여러분의 주변 공간에 쉽게 배치할 수 있어야 하고 어떤 거리에서도 쉽게 이용하고 어떤 밝기에서도 잘 보여야 합니다 그래서 새로운 시각적 언어인 유리 소재를 설계했죠 시스템에서 정의한 아름다운 유리 윈도우가 실제 세계의 일부처럼 느껴집니다 유리의 독특한 특성을 통해 주변 환경의 조명이나 가상 콘텐츠가 비쳐 보이죠 또한 빛 반사와 그림자가 유리 윈도우의 크기와 공간 내 위치를 알게 해 줍니다 여러분 앱 UI의 캔버스 역할을 하여 더 가벼우면서도 진짜 같은 느낌을 선사하죠 가벼운 느낌의 소재를 통해 윈도우 뒤의 다른 앱이나 사람 같은 다른 요소를 궁금하게 합니다 멋진 공간 경험을 제공하려면 주변을 잘 아는 것이 중요하죠 윈도우에 단색을 적용하지 마세요 불투명한 윈도우가 너무 많으면 답답한 느낌을 주며 인터페이스가 무겁다는 인상을 주죠 유리가 조명에 실시간으로 반응하며 여러분 공간의 일부로 느껴지도록 대비와 색 균형을 조정하는데 이런 식으로 낮에서 밤으로 전환됩니다 iOS, macOS와 달리 이 플랫폼은 라이트 모드와 다크 모드가 없죠 대신 유리와 UI가 밝고 어두운 배경에 맞춰 자연스럽게 바뀝니다 시스템에서 제공하는 멋진 소재가 이 기능을 활용하여 여러분의 앱이 다양한 환경과 조명 조건에서 멋져 보이게 하죠 지금 살펴봅시다 먼저 유리 윈도우로 시작하죠 사이드바처럼 섹션을 분리하고 싶으면 어두운 소재를 사용하세요 버튼 같은 상호작용 요소를 강조하고 싶을 땐 밝은 소재를 사용하세요 아니면 어두운 소재를 사용하여 입력 영역처럼 일반적인 요소의 대비를 높일 수도 있죠 모든 UI 요소가 적용된 음악 앱의 모습입니다 보이는 것처럼 텍스트의 기본값은 흰색이죠 이런 모양의 록업을 디자인한다고 가정했을 때 더 밝은 버튼을 추가하고 싶다면 유리 소재 위에 배치하는 것이 좋습니다 만약 대비를 높이고 싶다면 뒤에 어두운 셀을 사용하세요 밝은 소재끼리 겹치는 건 피해야 합니다 가독성에 영향을 주고 대비를 낮추죠 이제 이 플랫폼에 타이포그래피가 잘 적용된 걸 보여드리겠습니다 익숙함을 위해 모든 폰트는 모든 플랫폼에 적용되는 시맨틱 네임을 사용하죠 포인트 기반 단위 시스템에 폰트를 맞춰 모든 거리에서 가독성이 좋게 했습니다 해당 주제에 관해 자세히 다루는 '공간 디자인의 원리' 세션을 참고하세요 가독성을 높이기 위해 폰트 가중치도 조정했죠 더 자세히 알아보겠습니다 밝은 소재에 대한 텍스트의 대비를 높이기 위해 폰트 가중치를 살짝 두껍게 조정했죠 예를 들어 iOS에서는 본문 텍스트에 레귤러 가중치를 사용합니다 이 플랫폼에서는 미디엄 가중치를 사용하죠 제목의 경우 세미볼드 대신 볼드를 사용하여 텍스트가 언제나 또렷합니다 결과적으로 폰트의 굵기를 살짝 두껍게 해서 가독성을 높였죠 모든 플랫폼에서 사용하는 잘 알려진 폰트에 2개의 새로운 폰트를 추가하여 넓은 편집 스타일 레이아웃에 사용할 수 있도록 했습니다 Arcade에 적용된 초대형 타이틀의 예시입니다 멋지죠? 윈도우를 매우 큰 사이즈로 확대하더라도 작고 얇은 커스텀 폰트는 가독성이 떨어질 수 있습니다 이를 개선하기 위해 가중치를 높이거나 시스템 폰트처럼 가독성에 최적화된 폰트의 사용을 고려하시기 바랍니다 이제 활기에 관해 얘기해 보죠 시스템 전반에 걸쳐 가독성을 유지하기 위해 제일 중요한 항목입니다 활기는 소재 위에 표시되는 전경의 콘텐츠를 밝게 해 주는데 배경의 빛과 색상을 전경으로 끌어오는 원리죠 이 플랫폼에서는 배경이 계속 바뀌므로 활기가 실시간으로 변경되어 텍스트의 가독성을 보장합니다 직접 보여드리기 위해 예를 살펴보죠 활기는 유리 소재의 앞면에 적용되며 가독성을 높이고 시스템 구성 요소를 풍부하고 세련되게 표현합니다 가능하면 시스템 요소를 활용하세요 활기 효과를 사용하는 것이 기본값으로 설정돼 있습니다 잠깐 멈추고 활기 기능을 꺼 보죠 지금 본 것처럼 활기가 가독성을 높이고 소재의 느낌을 개선합니다 계속 켜고 끄면서 차이점을 보여드리죠 이제 여러분이 이 기능을 어떻게 활용할지 살펴봅시다 활기를 사용하여 텍스트, 기호, 채우기 색의 상하 관계를 나타내세요 세 가지 모드가 있습니다 1차, 2차, 그리고 3차죠 1차는 기본적인 텍스트에 사용하세요 2차는 설명글, 주석, 자막에 사용할 수 있습니다 유리 소재는 여러 색으로 바뀔 수 있는데 소재 뒤에 있는 색깔이 비치기 때문이죠 유리 위에 있는 다채로운 요소의 색상과 유리의 색상이 비슷하면 알아보기 힘들 겁니다 대개 하얀 텍스트와 기호를 사용하여 언제나 알아볼 수 있도록 하세요 색깔을 사용해야 하면 배경 레이어나 전체 버튼 색상으로 적용하여 볼 수 있도록 하세요 가능하면 커스텀 색상 대신 시스템 색상을 사용하는 게 좋은데 가독성을 위해 설정되어 있어 유리에 대한 색조와 대비를 유지하도록 동적으로 변화합니다 지금까지 디자인 원칙과 핵심 요소의 수정 사항인 소재, 타이포그래피, 활기를 살펴봄으로써 이 플랫폼에서 앱을 개선하는 방법을 알아봤죠 이어서 Lorena가 여러분의 앱을 화면에서 공간으로 옮기는 과정에서 탐색이 쉬운 인체공학적 레이아웃을 소개합니다 고마워요, Miquel 일단 보기에 편안한 방식으로 콘텐츠를 배치하는 법을 알아보고 콘텐츠의 크기를 적절하게 조절하여 쉽게 탐색하는 방법을 보여드리죠 마지막으로 새롭고 멋진 아이 포커스 피드백을 통해 기능적인 레이아웃 구성 방법을 보여드리겠습니다 이 플랫폼에서는 주로 눈과 손으로 상호작용하기 때문에 사람들에게 물리적으로 편안함과 안정감을 주는 걸 우선해야 합니다 그 어느 때보다 인체 공학성을 고려해서 의도적인 콘텐츠 배치를 통해 눈과 목에 무리를 주지 않아야 하죠 예를 들어 목의 가동 범위가 있어서 사람들이 고개를 돌릴 때 좌우로 돌리는 것이 상하로 움직이는 것보다 쉽습니다 사람들의 시야를 고려하여 UI를 설계하고 너무 위나 아래쪽에 배치하지 마세요 만약 앱에 큰 캔버스가 필요하다면 높은 화면 대신 폭이 넓은 화면을 선택하세요 예를 들어, Freeform에서는 캔버스가 수직이 아닌 수평으로 확장합니다 앱에서 제일 중요한 정보를 중앙에 배치하여 편안하게 콘텐츠를 볼 수 있도록 하세요 콘텐츠 배치의 모범 사례를 살펴봤으니 콘텐츠의 크기에 관해 얘기해 보죠 모든 사람은 독특하며 우리의 눈은 사람마다 다르므로 크기를 이용하여 쉽게 탐색할 수 있어야 하죠 자세히 알아보겠습니다 상호작용 요소는 탭 대상 범위가 최소 60포인트여야 쉽게 선택할 수 있습니다 그 말은 기본 버튼과 같은 UI 요소를 44포인트로 작게 만들어도 주변에 공간을 추가하면 됩니다 이 버튼의 경우 주변에 여백을 최소 8포인트로 설정해야 선택 영역의 최소 조건인 60포인트를 만족할 수 있죠 쉽게 기억할 수 있도록 알려드리자면 여러 개의 버튼을 나란히 배치할 경우 최소 16포인트의 간격을 확보해야 합니다 이제 숨김 메뉴와 같이 더 작은 요소를 사용해야 한다고 가정하죠 그때는 28포인트 크기의 미니 버튼을 섹션 제목과 같은 영역에 사용할 수 있습니다 비록 버튼이 작아 보이지만 주변 영역이 60포인트여서 쉽게 선택할 수 있죠 다른 예를 알아보겠습니다 여기 이 버튼은 공간이 충분합니다 옆에 있는 텍스트가 상호작용적이지 않기 때문이죠 비슷한 예로 대형과 특대형의 버튼은 여백을 적게 요구합니다 항상 기억하세요 모든 상호작용 요소는 최소 60포인트의 공간이 필요합니다 레이아웃의 요소 크기를 다뤘으니 포커스 피드백으로 넘어가죠 포커스 피드백은 강력한 도구로 플랫폼의 모든 상호작용 요소에 구축되어 있습니다 사람들이 시스템에서 제공하는 요소를 바라보면 미묘하게 밝은 효과나 호버 효과를 자동으로 제공하죠 호버 효과를 통해 UI의 어떤 요소와 상호작용할 수 있는지 보기만 해도 알 수 있습니다 공유 버튼처럼 비활성화된 항목은 포커스 피드백을 제공하지 않습니다 사용자가 원하는 요소에 집중하고 있다는 확신을 제공함으로써 손가락으로 탭하여 선택할 수 있게 하죠 레이아웃을 만들 때 호버 효과를 고려하는 것이 중요합니다 예를 들어 목록이나 메뉴를 만든다면 항목 사이에 여유 공간을 설정하여 호버 효과가 겹치는 상황을 피해야 합니다 권장 간격은 4포인트죠 록업을 디자인할 때는 모양을 설정하면 사용자가 항목에 집중했을 때 시스템을 통해 호버 효과가 나타납니다 여기에는 이미지와 아래 텍스트가 있는데 각 록업은 단일의 상호작용 요소입니다 사용자 지정 영역을 정의해야 해당 항목을 봤을 때 환해지죠 이를 통해 전체 영역이 단일 선택 요소라는 사실을 전달할 수 있습니다 각 형태 사이에 간격을 띄우는 걸 기억하세요 하나 더 고려해야 할 것은 내부 요소 간 모서리 반지름과 여유 공간의 중심점이 같도록 설정하는 겁니다 모서리의 크기를 설정할 때는 간단한 공식을 사용하세요 내부 요소의 모서리 반지름과 외부 영역 사이의 간격을 더한 값이 외부 영역의 모서리 반지름입니다 기억하세요 모서리를 둥글게 유지하려면 모서리가 계속 이어지도록 설정해야 합니다 시스템 전반에 걸쳐 모든 요소가 다른 요소와 중심이 같으며 이는 윈도우부터 구석 요소에까지 적용되죠 내부 요소의 중심이 같도록 설정해야 하나의 요소로 인지하게 됩니다 이제 레이아웃을 만드는 모범 사례를 살펴봤으니 여러분이 사용하게 될 요소들을 자세히 살펴보죠 이 섹션에서는 기존 플랫폼의 지식을 공간 컴퓨팅에 적용하는 법을 보여드릴 겁니다 우리의 입력 모델을 간단하게 살펴보고 핵심 구조 설정 방법으로 넘어가서 앱의 윈도우, 탭바, 사이드바를 다루도록 하죠 그다음에는 새로운 방식의 콘텐츠 제공 방식을 논하고 마지막으로 모달리티를 살펴보죠 입력부터 시작하겠습니다 앞서 언급했던 것처럼 기기와 상호작용할 때 눈, 손, 목소리를 사용하죠 이를 위해 요소를 보고 먼 거리에서 손가락을 탭합니다 터치하여 요소를 직접 선택하는 것도 가능하죠 또한 키보드나 트랙패드를 연결하여 다양한 입력 방식으로 시스템과 상호작용할 수 있습니다

시스템과의 상호작용이 마법처럼 느껴지지만 각 요소가 여러 방식에 대한 적절한 피드백을 제공해야 합니다 모든 시스템 요소는 각 입력 방식을 지원할 수 있게 설계돼 있죠 시스템 요소를 사용하세요 인터페이스를 빠르게 만드는 걸 도와주고 새로운 플랫폼에서 앱의 독창성을 찾게 해 주죠 입력 방식에 관해 더 알아보고 싶다면 '공간 입력을 위한 설계' 세션을 참고하세요 이제 예시를 살펴보죠 iOS에 익숙하다면 이 플랫폼의 요소도 대부분 익숙할 겁니다 먼저 윈도우, 탭바, 사이드바부터 시작하죠 iOS 앱의 핵심 구조부터 살펴보겠습니다 먼저 윈도우가 필요한데 불투명한 소재이며 위에 표시되는 모든 요소의 캔버스를 제공하죠 Miquel이 말했던 것처럼 윈도우는 유리 소재로 만들어졌으며 아래 윈도우 바가 있어서 여러분의 앱을 부드럽게 움직일 수 있습니다 비슷한 방식으로 소재 위에 콘텐츠가 나오죠

iPhone은 윈도우 아래에 수평으로 탭바 컨트롤러가 있어서 주요 메뉴로 이동하거나 앱의 주요 목적지로 한 번의 탭으로 이동할 수 있는 메뉴를 제공합니다 여기서는 탭바가 수직이며 윈도우 왼쪽에 고정돼 있죠 방해되지 않는 위치지만 쉽게 접근하도록 설계하여 언제든지 볼 수 있고 주요 콘텐츠를 방해하지 않으면서 현재 위치를 알 수 있습니다 일반적으로 가벼운 느낌을 주고 싶다면 항목을 최대 6개로 제한하는 게 좋죠 사용자는 탭바를 봤을 때 항목을 빠르게 선택할 수 있습니다 조금 더 오래 보고 있으면 자동으로 확장되어 각 섹션의 이름이 나타나죠 사용자가 시선을 돌리면 자동으로 메뉴가 닫히고 콘텐츠에 집중할 수 있도록 합니다 이 예시처럼 앨범과 같은 하위 메뉴가 필요하다면 윈도우 안에 사이드바가 탭바와 함께 제공되죠 이렇게 하면 어떤 메뉴를 탐색 중인지 알 수 있습니다 이제 앱의 핵심 구조를 살펴봤으니 새로운 콘텐츠 제공 방식인 오너먼트에 관해 알아보죠 사진 앱에는 상단 중앙에 있는 메뉴로 년, 월, 일을 탐색할 수 있습니다 이 플랫폼에는 화면의 경계가 없으므로 해당 메뉴를 아래쪽에 오너먼트로 배치했으며 윈도우보다 살짝 앞에 있죠 이를 통해 지속적인 제어가 가능하며 깊이감으로 상하 관계를 형성해 쉽게 접근할 수 있습니다 오너먼트는 툴바를 보여 주는 멋진 방식입니다 사람들이 편리한 위치에서 콘텐츠와 관련된 행동을 빠르게 실행할 수 있으며 앱에 깊이감을 더하죠 오너먼트는 주로 버튼의 모음이며 전용 유리 소재에 표시되는데 경계가 없는 버튼을 사용하기에 완벽합니다 이 사례는 상호작용 요소라는 걸 명확하게 보여 주며 사람들이 보면 호버 효과가 나타나죠 음악 앱에서 사용할 수 있는 오너먼트의 예를 보여드릴게요 '지금 재생 중' 컨트롤을 오너먼트로 표시하여 앱의 어느 메뉴에 있든 계속 노출됩니다 이를 통해 사람들이 다음 노래를 검색하면서 재생 중인 음악을 제어할 수 있죠 오너먼트가 윈도우의 아래쪽에 지속 노출된다면 메인 윈도우의 아래 테두리와 20포인트 겹치게 배치하세요 그러면 오너먼트가 메인 윈도우와 통합된 것처럼 보이면서 콘텐츠를 많이 가리지 않죠 스크롤할 때 유리를 통해 콘텐츠 색깔이 비쳐서 보기에도 좋습니다

오너먼트는 통째로 켜고 끌 수 있는데 단일 콘텐츠에 집중할 때만 해당 동작을 사용하세요 예를 들어 사진이나 영화를 본다고 하죠 이 예에서는 탭 한 번이면 사용자가 중요한 기능에 빠르게 접근하면서도 주요 콘텐츠에 계속 집중할 수 있습니다 또한, 오너먼트를 확장하여 추가 콘텐츠를 표시하거나 자체적인 탐색 메뉴를 제공할 수도 있죠 여러분의 앱에 오너먼트를 적용해 보세요 유연하면서도 앱에 깊이감을 제공하고 콘텐츠를 가리지 않습니다 이제 오너먼트를 살펴봤으니 메뉴, 팝오버, 시트로 넘어가죠 iPad에서 메뉴는 선택한 버튼에 맞춰 메뉴를 정렬하며 메뉴가 열렸을 때 버튼이 흐려집니다 팝오버는 선택 요소를 가리키며 내비게이션 바가 비활성화되죠 이 플랫폼에서는 메뉴와 팝오버를 윈도우 밖으로 확장할 수 있습니다 중앙에 나타나는 것이 기본값이며 사용자가 보고 있는 곳에 콘텐츠가 나타나죠 항상 기억해야 할 것은 선택된 버튼을 선택 상태로 바꾸는 겁니다 이 플랫폼에서는 선택된 버튼을 표시할 때 까만색 레이블과 하얀색 배경을 사용하죠 그렇게 해야 화살표 없이 선택 중인 버튼을 명확하게 전달할 수 있습니다 이 플랫폼의 일반적인 규칙은 선택되지 않은 버튼에 하얀색 버튼을 사용하지 않는 거죠 마지막으로 시트에 관해 얘기하겠습니다 이 시스템에서는 시트를 모달 뷰로 제공하며 앱의 중앙에 나타나죠 모달은 메인 윈도우와 같은 Z값을 가집니다 메인 윈도우가 뒤로 밀리며 흐려지죠 이렇게 하면 시트에 집중할 수 있고 시트를 종료할 때까지 메인 윈도우와 상호작용하는 걸 막을 수 있습니다 시트를 하나 더 보여 줘야 한다면 두 번째 모달이 앞에 표시되며 한 번 더 흐려지면서 다른 윈도우를 뒤로 밀죠 측면에서 다시 보겠습니다 모든 요소가 Z축에 쌓이므로 하위 윈도우가 나타날 때 푸시 내비게이션을 사용하세요 모달에서 사용하는 푸시 내비게이션의 예입니다 두 번째 윈도우는 종료 대신 뒤로 가기 버튼이 있죠 종료와 뒤로 가기 버튼이 왼쪽 위에 있는 것도 눈여겨보세요 시스템의 규칙상 종료 버튼은 항상 왼쪽 위에 배치합니다 이제 앱을 구축하는 기본 원칙과 시스템 요소의 사용을 이해했으니 여러분 앱의 특별한 점을 생각해 보고 윈도우 밖의 공간을 활용하여 풍부한 공간 경험을 제공하세요 예를 들어 사진 앱에서는 검색 기능을 익숙하게 유지했지만 여러분의 사진을 새롭게 경험할 수 있도록 공간 캡처 기능을 추가하여 추억을 되살리고 콘텐츠를 경험하는 몰입형 경험을 독특하고 특별하게 제공합니다 지금까지 주변 환경과 동화되는 소재를 사용하여 접근이 쉽고 익숙하고 직관적인 앱을 설계하고 개발하는 방법을 다뤘습니다 깊이감과 무한한 요소를 활용한 인터페이스는 시각적으로 매력적일 뿐만 아니라 새로운 플랫폼에서 사용하기에 익숙하고 쉽죠 우리의 시스템 요소는 다양한 입력 방식을 지원할 수 있도록 설계했으며 다른 Apple 생태계와 일관성을 유지했기 때문에 앱의 설계자나 개발자 여러분이 획기적인 몰입형 공간 경험 제공에 집중할 수 있도록 합니다 시청해 주셔서 감사합니다 안녕! ♪