공간 디자인의 원리

♪ 부드러운 힙합 연주곡 ♪ ♪ 우리의 세션인 공간 디자인의 원리에 오신 걸 환영합니다 저는 Nathan Gitter죠 저는 Amy DeDonato이며 Apple 디자인 팀의 디자이너입니다 오늘은 공간 운영체제를 설계하는 방법을 배울 겁니다 여러분의 주변 환경이 새로운 앱과 게임의 무한한 캔버스죠 깊이, 크기 자연적인 입력 방식과 공간 음향을 통해 이전에는 불가능했던 경험을 만들 수 있죠 주요 순간을 활용하여 기존 앱을 개선하거나 완전히 새로운 앱을 만들 수 있습니다 새로운 곳에 가거나 특별한 사람과 경험을 공유할 수 있죠 배울 게 많지만 여러분이 시작할 수 있도록 돕겠습니다 여러분의 아이디어를 현실로 만들고 사람들이 좋아하는 경험을 만들 수 있게 도울 겁니다 오늘은 멋진 공간 앱을 어떻게 만드는지 얘기해 보죠 기본부터 시작하여 앱의 익숙함을 유지하는 방법을 배울 겁니다 다음은 '인간 중심'의 의미를 다룰 예정이며 공간을 활용하기 위해 차원을 활용하는 법과 몰입감을 이용하여 앱을 발전시키는 법을 다룰 겁니다 마지막으로 플랫폼에 어울리는 앱을 만드는 법을 배울 예정이죠 바로 시작합시다 새로운 가능성이 열려 있지만 익숙한 것에 균형을 맞추세요 일반적인 요소인 사이드바, 탭, 검색 영역은 사람들이 원하는 음악을 찾게 해 주죠 공간 플랫폼에서도 사람들에게 익숙하고 사용 방법을 아는 요소로 음악을 검색할 수 있어야 합니다 윈도우 안에 인터페이스를 배치하여 사람들이 쉽게 보고 사용할 수 있도록 했죠 사람들은 앱 윈도우에 익숙하지만 이 플랫폼에서는 윈도우가 여러분의 공간에 있어 주변 환경의 일부처럼 느껴집니다 첫 번째 섹션에서는 윈도우에 관해 이야기하고 적절한 크기를 어떻게 정하는지 배우고 포인트 체계를 다루도록 하죠 윈도우부터 시작하겠습니다 우리는 새로운 시각적 언어로 윈도우를 설계했죠 유리 소재가 실제 세상과 대비를 이뤄 사람들이 주변 환경을 인지하게 해 주고 다양한 조명 조건에 적응합니다 시스템은 이동, 닫기 윈도우 크기 조절의 컨트롤을 제공하죠 사람들이 윈도우 바를 잡아서 원하는 곳으로 윈도우를 옮길 수 있습니다 움직여도 보는 사람을 향하도록 윈도우가 회전해 인터페이스를 쉽게 보고 사용할 수 있죠 윈도우를 놓으면 그 자리에 머뭅니다 다음은 윈도우의 크기를 정하는 법을 다루겠습니다 윈도우는 사람의 시야 안에 들어올 수 있도록 설계했지만 유연성이 높아 어떤 크기로도 늘릴 수 있죠 여러분의 콘텐츠에 맞는 윈도우 크기를 선택하세요 예를 들어 Safari는 윈도우가 높아서 웹 페이지를 더 볼 수 있게 했고 Keynote는 좌우로 넓어 프레젠테이션 크기에 맞췄습니다 윈도우를 여러 형태로 설정할 수도 있죠 여기 음악 앱처럼 탭 바와 툴바를 윈도우 밖으로 밀어낼 수 있습니다 컨트롤을 메인 윈도우 위에 겹치게 배치하여 언제든지 조작할 수 있고 주요 콘텐츠에 더 많은 공간을 제공하죠 아니면 여러 섹션을 이용하여 컨트롤과 콘텐츠를 분리합니다 Safari에서는 내비게이션 바를 웹 페이지와 분리하여 내용에 집중할 수 있죠 윈도우의 크기도 바꿀 수 있습니다 Safari에서 사이드바를 열면 윈도우가 커지고 더 많은 컨트롤을 보여 주지만 웹 페이지를 가리지 않죠 윈도우가 화면의 제약을 받지 않기 때문에 평소에는 작게 유지하여 시야를 가리지 않도록 해야 합니다 여러분의 앱이 유연하고 동적이어서 콘텐츠에 따라 모양과 크기가 변한다고 상상해 보세요 이 플랫폼을 위한 앱 설계가 정말 재미있습니다 더 큰 캔버스가 필요하면 더 큰 캔버스를 사용할 수 있죠 다른 플랫폼처럼 여러 윈도우를 띄울 수 있어 특정한 상황에 유용합니다 콘텐츠를 나란히 보여 줘서 여러 개의 웹 페이지를 한눈에 보거나 동시 사용이 유용한 두 기능을 보여 줄 수 있죠 Keynote에서 프레젠테이션을 재생할 때 큰 윈도우인 슬라이드가 멀리 떨어져 있고 작은 윈도우인 발표자 화면은 근처에 있습니다 사람들이 발표자 화면을 원하는 곳에 배치하면서 슬라이드를 크게 유지할 수 있죠 앱의 인터페이스는 단일 윈도우에 두는 게 이상적입니다 윈도우가 여러 개 있으면 관리가 힘들어질 수 있죠 다음은 포인트에 관해 얘기하겠습니다 인터페이스의 확장성을 위해 포인트로 설계했죠 익숙한 개념일 수도 있습니다 포인트를 통해 인터페이스 요소의 크기를 정의하고 인터페이스가 다른 화면에 적응할 수 있도록 개념을 확립하는 거죠 이 플랫폼에서는 사람들이 윈도우를 움직일 때 윈도우가 멀어지면 커지고 윈도우가 가까워지면 작아집니다 인터페이스의 가독성과 활용성을 높이죠 다른 플랫폼의 포인트에 익숙하다면 버튼과 같은 인터페이스 요소에 대한 크기 설정 방식이 비슷합니다 여러분이 알고 있는 단위를 사용하죠 포인트로 인터페이스를 설계하면 모든 거리에 적합합니다 인터페이스 설계에 대해 더 배우고 싶으면 '공간 사용자 인터페이스 설계' 세션을 확인하세요 다음은 인간 중심의 앱을 설계하는 방법을 이야기해 보겠습니다 좋은 설계는 언제나 인간 중심적이지만 여기에서는 완전히 새로운 의미를 갖죠 사람들은 기기를 몸에 착용하고 눈과 손을 이용하여 상호 작용하며 자기만의 시야와 공간에서 앱을 경험합니다 공간 앱을 설계할 때는 사람들이 볼 수 있는 것과 어떻게 움직여야 할지를 생각하세요 먼저 사람들이 볼 수 있는 걸 알아보죠 사람들이 기기를 착용하면 바로 앞에 있는 세상을 볼 수 있습니다 이게 사람들의 시야죠 중앙에 있는 걸 보기 쉬우니까 제일 중요한 콘텐츠를 여기에 배치하세요 시야의 폭이 넓으므로 가로 방향의 레이아웃을 쓰세요 예를 들어 보죠 Safari에서는 모든 탭을 한꺼번에 보고 싶으면 그리드 형태로 펼칩니다 사람의 시야에 맞게 레이아웃의 폭이 넓죠 탭의 크기를 줄여 중앙에서 너무 멀어지지 않고 양옆의 탭이 안쪽으로 돌려져 있어 쉽게 읽을 수 있습니다 하지만 사람들은 머리를 고정하지 않고 주변을 둘러보죠 그 말은 몰입감이 높은 경험을 위해 콘텐츠를 확장할 수 있다는 의미지만 주요 콘텐츠는 시야 안에 두는 게 좋습니다 안 그러면 한꺼번에 읽거나 이해하기 힘들죠 사람을 중심에 둔 설계는 인체 공학적인 설계를 의미하기도 합니다 여러분의 콘텐츠 배치가 사람들의 신체적 반응에 큰 영향을 주죠 따라서 모든 차원의 오브젝트를 편한 곳에 배치하세요 기본값으로 윈도우를 자연스러운 시선에 배치하여 건강하고 편안한 자세를 유도합니다 여러분의 콘텐츠를 배치할 때 사람의 머리와 보는 방향에 맞춰서 배치하세요 그러면 사람들이 콘텐츠를 보고 상호 작용할 수 있고 다양한 키에 맞출 수 있으며 소파에 기댄 자세 등 다양한 자세에 맞출 수 있죠 대개는 콘텐츠를 사람과 떨어뜨려 팔 길이보다 살짝 먼 곳에 배치하여 상호 작용하도록 유도하세요 몰입형 콘텐츠가 아니라면 사람 뒤에 콘텐츠를 배치하거나 너무 높거나 낮게 배치하지 마세요 모든 사람이 앱을 사용할 때 움직일 수 있는 자세로 앉아 있지 않을 테니까요 그리고 사람의 시야에 콘텐츠를 고정하지 마세요 갇혀 있다고 느끼게 하거나 혼란을 유발하죠 대신 사람들의 공간에 콘텐츠를 고정하세요 그럼 자연스럽게 둘러보는 선택권을 줄 수 있죠 기기를 착용한 상태에서 일어나서 걸을 수도 있지만 최소의 동작을 요구하는 정적인 경험을 만드는 것을 권장합니다 그래야 모두가 앱을 쉽게 사용할 수 있죠 앱 경험의 핵심이 아니라면 사람들이 움직이지 않고 앱을 이용할 수 있어야 합니다 때로는 사람들이 다른 곳에 앉거나 다른 곳을 향하기도 하죠 새로 자리를 잡으면 Digital Crown을 길게 눌러 중앙값을 재설정할 수 있습니다 이렇게 하면 콘텐츠가 다시 앞에 나타나죠 윈도우를 다시 불러오거나 화면을 리셋하는 특별한 방법을 앱이 제공할 필요가 없습니다 대신 시스템에 의존하여 여러분 앱의 콘텐츠를 재배치할 수 있죠 다음은 여러분 앱에 입체감을 주는 방법입니다 여러분 앱이 사용할 수 있는 공간에 관해 논하고 깊이감과 규모를 활용하는 방법을 살펴보죠 먼저 공간부터 살펴봅시다 좋은 앱은 사람들 주변의 공간을 활용하죠 물론 캔버스는 무한하지만 사람들의 물리적 공간은 제한적일 수 있습니다 여러분의 앱이 모든 공간에서 작동하도록 설계하세요 어디에서 사용할지 모르니까요 또한 가용할 수 있는 물리적 공간에 앱을 제한하지 마세요 TV 앱을 통해 어떻게 적용되는지 알아봅시다 여기서 움직인 윈도우가 방 안의 의자를 통과했죠 윈도우가 움직이는 동안 의자를 볼 수 있어 쉽게 배치할 수 있습니다 윈도우를 놓으면 콘텐츠를 볼 수 있고 사람들이 앱을 보고 사용할 수 있죠 윈도우가 누군가의 공간에 맞을지 걱정하지 않아도 됩니다 시스템이 알아서 해결하니까요 영화를 볼 시간이 되면 영상이 윈도우 전체에 나타나며 윈도우 뒤의 배경이 비치지 않습니다 딤 처리는 공간을 극대화하는 효과적인 방법이죠 영화가 실제 공간과 겹치더라도 딤 처리로 콘텐츠에 집중할 수 있습니다 훌륭한 균형이죠 사람들이 주변 공간을 인지할 수 있지만 공간의 제약을 느끼지 않습니다 사람들이 언제든 환경 기능을 사용하여 물리적 공간 너머로 차원을 확장할 수 있죠 만약 앱의 대규모 콘텐츠를 위해 공간이 더 필요하다면 여러분이 직접 실제보다 큰 경험을 만들 수 있습니다 여기서는 몰입형 환경인 커다란 영화관을 만들었죠 이와 같은 전체 공간 경험은 나중에 더 다루겠습니다 앱에 차원을 더하는 건 깊이감을 이용하는 거죠 공간 플랫폼에선 깊이가 새로운 변수입니다 상하 관계와 집중을 위한 강력한 도구죠 예를 살펴봅시다 깊이는 공간에 있는 물체를 인지하는 것에 영향을 주죠 멀리 있는 콘텐츠를 크게 표현하여 먼 거리에서의 상호 작용을 유도합니다 가까이 있는 물체는 상호 작용을 유도하며 여러 각도에서 살펴볼 수 있죠 작은 동작으로 물체를 모든 면에서 볼 수 있습니다 깊이를 잘 활용하면 상하 관계가 정립되죠 TV 앱을 한 번 더 살펴봅시다 몰입형 영화관에서 재생과 관련된 컨트롤이 가까운 곳에 작게 배치돼 있죠 비록 크기가 작지만 영화를 제어한다는 게 명확합니다 만약 영화 화면 위에 배치했다면 너무 크고 이상해 보였겠죠 가까이 있는 요소는 작게 유지할 수 있지만 멀리 있는 큰 오브젝트보다 시각적으로 우선합니다 깊이를 시각적 단서인 빛과 그림자 등으로 강화할 수 있죠 어떤 물체는 영화 화면처럼 빛을 냅니다 바닥과 천장에 빛이 남으로써 공간 내 위치를 강조하죠 빛을 내는 모든 물체는 근처에 있는 물체에 색을 비춰야 합니다 다른 물체들은 그림자를 드리워야 하죠 테이블 위에 있는 이 윈도우처럼요 이를 통해 고정된 물체처럼 보이고 공간에 통합된 느낌을 줍니다 여러분 앱의 커스텀 물체도 그림자를 드리워야 하죠 대개는 잔잔한 깊이감을 이용하세요 연출이 과하면 몰입을 방해하거나 비현실적으로 보일 수 있습니다 요소 사이에 잔잔한 깊이감으로도 사람들을 집중시킬 수 있죠 모달이 나타났을 때 창이 살짝 뒤로 밀리며 주의를 집중시킵니다 잔잔한 깊이감이지만 효과적이죠 모든 것에 깊이감을 적용하지 않아도 됩니다 예를 들어 텍스트는 3D로 표현했을 때 방해되고 읽기 힘들죠 정면이 아니면 특히 그렇습니다 인터페이스 요소라면 텍스트를 2차원으로 유지하세요 깊이감처럼 규모를 통해 콘텐츠를 강조할 수 있습니다 작은 물체는 개인적이고 가벼운 느낌이죠 호수 위에 띄운 커다란 화면처럼 큰 물체는 인상적입니다 규모를 키우면 영화의 느낌을 전혀 다르게 바꿀 수 있죠 어떤 물체는 실제 크기로 봤을 때 제일 좋습니다 예를 들어 쇼핑 앱의 경우 실제 크기와 동일하게 물건을 표시하는 게 낫겠죠 여러분의 콘텐츠에도 다양한 규모를 적용해 보세요 물체를 크게 키우거나 아주 작게 만들어서 규모에 따른 변화를 느껴 보세요 이제 앱을 한 단계 높여 몰입감을 활용할 시간입니다 자세한 내용은 전해 줄 Amy입니다 고마워요, Nathan 이제 여러분의 앱에 몰입감을 주는 방법을 얘기해 보죠 몰입형 경험은 윈도우를 너머 확장되며 주변 공간을 바꿉니다 몰입 스펙트럼을 살펴보고 몰입형 앱을 만드는 필수 비법을 다룬 뒤 편안함을 주는 방법을 알아보도록 하죠 먼저 몰입 스펙트럼입니다 이 플랫폼에서는 앱이 바뀔 수 있죠 여러 상태의 몰입 상태로 부드럽게 전환할 수 있습니다 사람들이 어떤 걸 경험하는지에 따라 다르죠 몰입 스펙트럼에는 다양한 수준이 있습니다 사람의 시야를 넓히거나 새로운 공간으로 데려가거나 그 사이의 모든 수준을 제공할 수 있죠 여러분의 앱은 공유 공간의 윈도우 안에 다른 앱과 있을 수 있습니다 만약 공간이 더 필요하다면 전체 공간에서 실행되어 다른 앱이 숨겨지죠 여러분의 앱을 공유 공간의 윈도우에서 시작하세요 이렇게 하면 사람들이 직접 몰입도를 정할 수 있습니다 예를 살펴보죠 Keynote에서 앱이 윈도우에서 실행됩니다 하지만 슬라이드쇼를 재생할 시간이 되면 딤 처리를 통해 프레젠테이션에 집중시키죠 딤 처리는 콘텐츠와 주변 환경을 대비시키는 간단한 방법이며 원래 공간을 유지할 수 있습니다 만약 프레젠테이션을 리허설할 시간이라면 사람들을 대형 무대로 초대하여 극장 안에 있는 것처럼 몰입시킬 수 있죠 실제 크기의 경험은 공간을 필요로 하므로 Keynote가 전체 공간을 차지했고 다른 앱은 숨겨져 있습니다 여기서 앱이 사람들을 새로운 공간으로 데려가며 주변을 전부 둘러볼 수 있죠 하지만 전체 공간을 실행해도 새로운 곳에 가지 않을 수 있으며 자체 공간에서 존재할 수도 있습니다 여기서는 바다 너머를 바라보는 것 같지만 현재 공간도 볼 수 있죠 풍성한 몰입형 경험을 설계할 때 전체 시야를 활용하지 않아도 됩니다 손으로 키보드나 컨트롤러를 조작하는 모습을 봐야 할 때 유용하죠 몰입형 앱으로 실제 공간과 연결된 느낌을 받을 수도 있습니다 여기서는 환영의 순간이 테이블 위에 그림자를 드리우는데 'hello'라는 글자가 실제로 있는 것 같죠 여러분의 콘텐츠가 실제 공간과 연관돼 있다면 유연한 설계가 필요합니다 모두의 공간이 다르고 시간에 따라 공간이 달라지므로 어느 곳에나 적용할 수 있는 콘텐츠를 만들어야 하죠 이제 몰입형 앱을 만드는 필수 비법을 다루겠습니다 몰입형 콘텐츠를 설계할 때 새로운 것을 고려해야 하죠 사람들이 주변을 둘러보며 다양한 것에 집중하지만 너무 많은 요소를 동시에 제공하면 압도당한 느낌을 받아 어쩔 줄 모를 수 있습니다 그러므로 가장 중요한 콘텐츠에 사람들의 관심을 유도해야 하는 거죠 마음 챙기기 앱에선 공중에 뜬 단일 물체에 집중하도록 합니다 다른 곳을 볼 수도 있지만 여러분의 관심이 움직임, 공간 오디오와 다채로운 소재에 집중되죠 더 깊은 성찰이 필요할 때는 꽃을 서서히 확장하여 여러분을 완벽히 감쌉니다 지금처럼 부드럽고 예상할 수 있는 화면 전환을 설계하여 콘텐츠의 상태를 매끄럽게 연결하세요 이를 통해 사람들이 편안함을 느끼고 무슨 일이 일어나는지 알 수 있습니다 또 하나의 중요한 비법은 현실과의 사려 깊은 융합이죠 앱이 전체 공간을 사용할 때 공간의 모양을 활용하여 콘텐츠를 고정하거나 물리적 상호 작용을 만들 수 있죠 타인의 주변 환경을 인지하여 여러분의 콘텐츠와 공간을 의미 있게 연결 지을 수 있습니다 전체 장면을 타인의 공간에 융합하는 경우 부드러운 가장자리로 앱을 매끄럽게 통합시키세요 이를 통해 갑작스러운 전환을 막고 사람들이 콘텐츠에 집중하게 해 줍니다 가장 인상적인 경험은 물체에 생동감을 부여하죠 미묘한 애니메이션은 장면에 활기를 주는데 호수에 퍼지는 동심원이나 하늘을 떠다니는 구름이 그렇습니다 미묘한 움직임이 정적인 경험을 활기 있고 동적인 경험으로 바꿔 주죠 몰입감을 더 높이기 위해서 소리로 환경을 창조하세요 공간 오디오를 통해 소리를 공간의 물체에 고정할 수 있으며... 사람들을 완벽히 둘러싼 소리의 풍경을 만들 수 있죠 자세한 내용을 배우고 싶으면 '몰입형 사운드 디자인 탐구'를 살펴보세요 마지막입니다 적은 노력으로 극대화하세요 작은 효과로 큰 영향을 줄 수 있죠 영화관에서는 바닥과 천장에 비치는 잔잔한 빛이 실제 공간이라는 느낌을 줍니다 실제 영화관의 세세한 부분을 그대로 재현해서 진짜 영화관의 느낌을 전달하지 않아도 되죠 마지막으로 사람들에게 안정감과 주도권을 주는 방법을 얘기해 보겠습니다 몰입형 앱을 움직여야 하거나 사람의 위치를 바꿔야 하면 크고 빠른 동작은 피하세요 혼란을 줄 수 있습니다 콘텐츠가 움직이는 중에는 페이드 아웃 처리했다가 자리를 잡은 뒤에 페이드 인 처리하세요 그러면 사람들이 안정감을 느낄 겁니다 만약 사람들이 직접 움직일 때도 몰입형 경험이 페이드 아웃 될 겁니다 사람들이 움직이는 중에는 실제 공간을 보여 주는 거죠

또한 몰입형 콘텐츠에 진입하고 나갈 수 있는 방식을 명확하게 표시하세요 작지만 도움이 되는 레이블이나 확장 및 축소 화살표처럼 알아볼 수 있는 기호로 안내하세요 마지막 원리입니다 플랫폼에 어울리는 앱을 만드는 방법을 얘기해 보죠 멋진 앱 경험을 만들 때 기기의 독특한 기능을 활용하는 것이 중요합니다 이 플랫폼에서는 사람들의 공간을 잘 활용하는 풍성한 몰입형 콘텐츠가 최고의 앱이죠 앱은 잠깐 들어가서 경험하는 게 아닙니다 예를 들어 Freeform은 넓고 창의적인 공간에 들어가서 여러분의 모든 콘텐츠를 한눈에 보고 프로젝트에 집중할 수 있죠 재미를 느끼며 몰입할 수 있으며 독창적인 콘텐츠를 만들어 사람들의 공간에서 이용하도록 유도하세요 마치기 전에 오늘 영상에서 다룬 항목을 여러분 앱에 적용해 보세요 새로운 아이디어에서 시작하거나 기존의 앱을 새 플랫폼으로 확장할 수도 있죠 수많은 가능성이 있으니까 여러분의 앱이나 게임에서 공간적이거나 몰입적인 면을 찾아 그 특징에 집중해 보세요 그러려면 공간에서만 경험할 수 있는 핵심적인 순간을 찾아야 합니다 사진 앱에 어떻게 적용했는지 살펴보죠 우리는 사람들이 기존 플랫폼에서 익숙하게 사용하는 사진 앱의 핵심 기능을 살펴봤습니다 사진 라이브러리를 검색하고 특별한 순간을 재발견하고 파노라마를 통해 공간을 다시 느끼죠 우리는 좋아하는 사진을 찾는 것이 쉬워야 한다고 생각했습니다 윈도우 인터페이스와 익숙한 탐색 도구가 여러분이 원하는 걸 빠르게 찾도록 도와주죠 만약 특별한 사진을 찾으면 여러분의 공간에서 사진이 커지고 주변 환경의 조도를 낮춥니다 iPhone에도 있는 멋진 기억이지만 실물 크기로 보는 건 정말 환상적이죠 파노라마 사진을 볼 때는 핵심 순간을 통해 특별한 장소에 실제로 간 듯한 느낌을 선사합니다 여기서는 파노라마 사진이 무한 공간에서만 가능한 방식으로 여러분을 이동시키죠 여러분 앱의 핵심 순간을 생각해 보세요 하나의 특별한 기능에 집중하여 이미 가지고 있는 콘텐츠로 독특하고 기억에 남는 경험을 만들 수 있습니다 깊이감과 규모를 통해 순간을 향상시키거나 누군가의 공간을 바꿀 수 있나요? 사람들을 과업에 집중시키거나 감정을 유발할 수 있나요? 과거의 순간을 재현하거나 다른 사람 관점에서 보는 것처럼 기억에 남는 경험을 만들 수 있습니다 고화질 영상과 고성능 오디오가 진짜 같은 느낌을 주죠 새로운 내용을 많이 다뤘습니다 사람들의 주변 공간을 활용하여 독특하지만 익숙한 몰입형 경험을 만들어 내는 방법을 배웠죠 공간 디자인에 관해 더 배우고 싶다면 입력 방식, 사용자 인터페이스 SharePlay와 사운드 등 다양한 주제를 더 깊이 다루는 세션이 있습니다

새로운 가능성이 열려 있습니다 오늘 다룬 원리가 여러분의 여정을 이끌기 바라죠 함께해 주셔서 감사합니다 ♪