역동적인 '실시간 현황' 디자인하기

♪ ♪

'역동적인 실시간 현황 디자인하기'에 오신 걸 환영합니다 저는 맥입니다 이후 동료 챈이 합류할 건데요 오늘은 시스템 전반에 걸쳐 실시간 현황을 디자인할 때 고려해야 하는 모든 것에 대해 알아보도록 하겠습니다 우선 잠금 화면으로 시작해 볼게요 그 다음 스탠바이 모드를 잠시 살펴보고 Dynamic Island는 챈과 함께 자세히 보시겠습니다 각 내용을 살펴보면서 해당 공간에 특수하게 고려해야 할 사항과 이들 사이에서 디자인을 최적화하는 법을 살펴보겠습니다 시작하기 전에 '실시간 현황'부터 좀 얘기해 볼게요 우리의 목적은 알림의 한계에 계속해서 도전하던 기존 경험을 더 잘 수용해서 진행 중인 활동을 더 강력하고 직관적으로 따라가게 하는 시스템을 만드는 겁니다 실시간 현황은 정보를 보여주려 풍부한 그래픽 레이아웃을 쓰고 인라인의 매끄러운 업데이트를 재밌고 생생하게 해줍니다 스포츠, 차량 공유, 배달 추적 진행 중인 운동이 이런 기능을 이용할 수 있는 몇 가지 예시죠 허나 몇 분에서 몇 시간 동안 추적할 수 있는 건 바로 이 실시간 현황이고 탐구해 봄직한 흥미로운 아이디어가 굉장히 많습니다 그럼 시작해 보도록 하죠 잠금 화면에서 실시간 현황은 알림과 함께 목록 상단에 위치하고 있습니다 이렇게 다른 레이아웃을 사용하고 있다고 하더라도 요소들이 각 면에서 깔끔하게 정렬되고 목록을 쭉 훑어볼 때 일관적 시각 리듬 유지를 위해 각 가장자리 주변 여백은 14포인트로 설정돼 있습니다 잠금 화면 실시간 현황에서 정보를 제시할 때 알림 레이아웃을 복제하려고 하지 않는 게 중요합니다 오히려 개별적으로 특수한 레이아웃을 만들어 보여주고 있는 정보에 딱 맞아야 하죠 그래픽이 풍부한 레이아웃은 실시간 현황의 이점 중 하나라 이 단계에서 시간을 가지고 제대로 하는 것이 중요합니다 가장 유용한 것으로 보이는 정보를 생각해 보고 해당 요소들이 한눈에 들어올 수 있도록 크기 및 규모를 우선 조절해 주세요 타이머 실시간 현황에서는 제목과 남은 시간을 보여주고 타이머 정지 또는 취소를 빠르게 통제할 수도 있습니다 실시간 현황에서 상호적인 기능을 제공하는 가장 좋은 방법은 버튼이지만 버튼이 활동의 중요한 부분을 통제하는 경우에만 사용되어야 합니다 그렇지 않으면 유용한 정보를 보여줄 수 있는 공간을 많이 차지하게 되니까요 이제 실시간 현황의 성격에 대해 이야기해 보죠 그래픽 레이아웃을 디자인할 때 사용할 수 있는 앱의 색상이나 도해, 서체 같은 많은 속성들을 고려하세요 실시간 현황과 앱이 동일한 시각적 미와 성격을 공유하고 있다고 느끼는 것이 목표이자 최선의 결과입니다 앱 아이콘에서 영감을 끌어내는 건 누군가가 실시간 현황 디자인과 여러분의 앱을 연관 짓는 최고의 방법이죠 보시면 TV의 실시간 현황은 앱 아이콘과 동일한 배경색, 전경색을 가지고 있어 두 디자인을 연결 짓기 쉽습니다 이 연결성을 유지하는 게 중요합니다 시각적 연관성을 해친다면 라이트 모드와 다크 모드의 색상 구분을 하지 마세요 실시간 현황에 강렬한 색상을 사용하면 다른 것보다도 돋보일 수 있는 특별한 성격을 만드는 데에 도움이 됩니다 보다 역동적이고 매력적인 시각적 정보 제공을 위해 보여주고 있는 내용을 기반으로 색상을 바꿀 수도 있습니다

브랜드의 일부로 로고 마크를 사용한다면 앱 아이콘 전체에 사용하지 않고 레이아웃에서 뺀 채로 통합하는 게 좋습니다 실시간 현황이 제공하는 배경색과 전경색은 잠금 화면에서 실시간 현황을 지우려고 스와이프할 때 그에 맞는 '지우기' 버튼을 자동 생성하기 위해 사용되죠 그에 따라 나타나는 버튼이 어울리는지와 함께 디자인에 맞는 올바른 색상을 제공하고 있는지 확인하세요 다음으로 효율적인 레이아웃 공간 활용법에 대해 알아봅시다 잠금 화면에서는 한번에 수많은 정보를 보여줄 수 있죠 Music 플레이어, 알림 그리고 실시간 현황까지요 그래서 필요할 경우 사용할 추가 공간을 차지하지 않도록 레이아웃을 가능한 한 간결하게 만드는 게 중요합니다 더 잘 어울리고 간결하게 만들 수 있도록 각 요소들의 크기와 배치를 조정함으로써 디자인의 높이를 줄일 수 있는 방법을 찾아보세요 또다른 방법은 보여줄 정보가 더 많거나 적을 때와 같이 다양한 순간들에 나타나는 실시간 현황의 높이를 역동적으로 변경하는 것도 또다른 방법입니다 이번 예시는 이용 가능한 기사를 찾는 건데요 추가 상세 정보를 많이 보여주지 않아서 배차가 승인될 때까지 간결한 레이아웃이 유지되고 관련성이 생기게 되면 나머지 정보가 전환됩니다 이 경우에는 경기가 하프타임에 다다랐을 때 실황 중계가 더 이상 관련성이 없어지면서 경기가 재개될 때까지 이 부분이 접혀있을 수 있고요 이렇게 '전환'으로 우리를 이끌고 가네요

실시간 현황에서 이런 여러 순간 사이에 업데이트 시 레이아웃의 높이를 변경하는 것 말고도 개별 요소 자체에 전환을 적용할 수도 있습니다

숫자 콘텐츠를 이용해서 현황에서 중요한 숫자를 높이거나 줄여보세요 그래픽 요소와 텍스트 안팎으로 움직임을 주고 싶다면 콘텐츠 교체 전환을 사용해 보세요 이것들은 시스템에서 제공하는 기본 전환 예시들이고 요소의 규모, 불투명성, 위치에 다양한 애니메이션을 결합하여 나만의 전환을 만들 수도 있죠 '나의 친구 찾기' 예시인데요 지도가 업데이트 내용을 받으면 이 핀들은 새로운 위치로 매끄럽게 이동할 수 있습니다 업데이트에 따른 요소 이동에 움직임을 가미하면 실시간 현황을 더욱 시각적으로 잘 보여줄 수 있습니다 한 목록에 있는 항목의 위치를 움직일 때 요소가 겹치지 않게 새 위치로 이동하는 한 줄만 이동시키고 다른 것들은 희미해졌다 나타나게 하세요 다음으로 '알림'에 대해 이야기해 보죠 사용자의 관심을 필요로 하는 업데이트 내용을 알릴 때 실시간 현황을 이용해야 합니다 스크린이 밝아지고 기본 알림 소리가 재생되어 업데이트를 놓칠 수 없죠 이 전환이 일어나는 동안 레이아웃에 알림을 일으키는 정보를 강조하세요 끝으로 실시간 현황이 끝나고 더이상 관련성이 없는 경우 짧은 시간 후 잠금 화면에서 제거되도록 해주세요 알림이 너무 오래 지속되면 짜증이 나기도 하고 매번 일일이 알림을 지워줘야 하니까요 다음은 스탠바이 모드에 맞게 디자인을 적용하는 법입니다 스탠바이는 iPhone을 하나의 주변 정보 디스플레이로 사용할 수 있게 해주는 새로운 기능입니다 주방 카운터나 책상 침대에 두고서 보여주고 싶은 정보를 선택할 수 있기 때문에 자연스럽게 실시간 현황을 보여주기에 딱 좋은 겁니다 스탠바이 모드에서의 레이아웃은 레이아웃 콘텐츠를 기기의 센서 영역 아래에 그리지 않고도 최대 200% 크기 확대가 가능합니다 시스템은 실시간 현황에서 사용 중인 배경색을 자동으로 확장해 나머지 공간을 꽉 채우고 매끄러운 풀 스크린 디자인을 만듭니다 배경색이 확장될 때 실시간 현황 가장자리까지 늘어나는 그래픽 요소가 있다면 잘려서 끊어진 듯한 느낌이겠죠 구분선을 사용하거나 레이아웃의 다른 영역을 구별함으로써 이 문제를 피할 수 있습니다 실시간 현황에서 보여주는 정보가 뭔지에 따라 더 부드러운 주변 모습을 위해 주변 스탠바이 모드에서 배경색을 완전히 제거하고 레이아웃을 베젤에 자연스럽게 섞을 수도 있습니다 이랬을 때 또 다른 장점은 기기 센서 여백을 더 이상 고려할 필요가 없기 때문에 레이아웃을 약간 더 크게 보일 수 있도록 한다는 겁니다 스탠바이 모드에서의 실시간 현황 조정 방법은 더 많지만 가장 중요한 것 중 한 가지는 디자인에 사용하고 있는 모든 자산과 이미지가 더 큰 크기에서도 보일 만큼 높은 해상도여야 한다는 겁니다 또 다른 스탠바이 기능은 조도가 낮을 때 디스플레이를 붉게 전환하는 우아한 나이트 모드입니다 실시간 현황은 이렇게 자동으로 처리되기는 하지만 이 모드가 활성화됐을 때 색상이 충분히 대비되는지 확인하는 것이 좋습니다 다음은 Dynamic Island에 대해 이야기할 차례인데요 세부 내용은 동료 챈이 알려드릴 겁니다 고마워요, 맥 Dynamic Island는 우리에게 나타나는 다양한 알림과 지표에 통합된 홈을 제공하기 위해 만들어진 것인데요

모든 종류의 알림과 지표 간 변화를 유기적으로 형성하는 시스템 레이어를 제공하는 하드웨어와 소프트웨어의 조합입니다 iPhone 배경에서 진행 중인 것들을 주시하고 빠르게 상호작용하도록 하는 것이 목적입니다 Dynamic Island의 모든 것은 모습, 느낌, 애니메이션 측면에서 매우 특수하게 디자인되었으면서도 동질감을 느끼게 합니다 모두를 특수하고 생동감 있는 경험으로 디자인함으로써 각각은 구별되는 정체성을 가지고 있습니다 그 경험의 다양성은 각각을 기억하게 하고 한눈에 구별지어야 하는 인지적 부담을 완화하죠 이러한 것들의 느낌과 행동도 중요한 측면입니다 Dynamic Island의 디자인은 생물체의 형태와 움직임의 영향으로 하드웨어가 구현하는 고정된 성질과 재밌게 대비되도록 하는 의도적인 신축성을 통해 하나의 생명체처럼 느껴집니다 따라서 여러분의 앱에도 동일 원리가 적용되죠 무슨 의미인지 알아보기 위해 사이클링 앱을 함께 봅시다 하나의 활동이 진행 중이라서 이 앱을 두고 다른 앱에 가면 Dynamic Island로 축소됩니다 이 앱이 실행 중이고 그 공간에 실제로 살고 있다고 느끼도록 디자인됐죠 이건 해당 앱의 특성과 정체성을 가져옵니다 이 예시에서 나타나는 경험들은 앱 그 자체만큼이나 다양하다고 느껴지지 않으면 안될 것으로 보이면서도 그 자체로 하나의 가족처럼 보입니다 애니메이션과 함께 데이터를 계속 업데이트하면 활기차지죠 둥글고 더 두꺼운 모양과 더 크고 무거운 무게감에 읽기 쉬운 텍스트도 아주 효과 있고 정체성을 보여주는 색상 사용도 좋습니다 Dynamic Island를 디자인할 때에는 모든 걸 이 안에 맞추는 게 절대적으로 중요합니다 모든 것의 모양과 배치를 이 안에 두려면 신중해야 하죠 이 모양과 조화를 이루면서도 개체와 정보를 이 안에 위치시키는 것은 특히나 중요합니다 Dynamic Island 내부에 딱 맞게 만들 때 중요한 것은 이 모양과 중심이 같아야 한다는 겁니다 여기서는 둥근 모양들이 서로의 안쪽에 위치하는데 주변 여백 조차도 마찬가지입니다 이 안에 둥근 모양이 딱 맞게 배치가 되었는지를 제대로 확인해 주셔야 합니다 이건 둥근 모양이 아닐 때에도 마찬가지고요 모양의 시각적 질량이나 중심은 Dynamic Island의 벽 내부에 딱 맞아야 합니다 가장 좋은 시각화 요령은 개체를 흐릿하게 만들어서 그 결과 나타나는 모양이 바깥 경계에 대해 가능한 한 중심에 있도록 만드는 겁니다 이렇게 하면 콘텐츠가 시각적으로 좋은 위치에 있어 Dynamic Island 내에서 최대한 편안하게 볼 수가 있죠 개체나 텍스트를 배치할 때 옆면에서 벗어나 코너로 튀어나가 시각적 긴장을 유발하지 않도록 중심 여백을 Dynamic Island의 둘레 안으로 유지해 주세요 콘텐츠를 안쪽으로 밀어 넣거나 컨테이너를 둥글게 만들어 전반적인 모양 안에 조화롭게 맞도록 말이죠

콘텐츠가 있는 블록을 분리시킬 때 전체를 컨테이너 가장자리로 끌고 가지 말고 콘텐츠를 삽입 형태로 두거나 구분선을 사용하세요 Dynamic Island에는 세 가지 크기 규모가 있습니다 가로로 늘어나서 축소 뷰가 되고 이렇게 부풀어 더 큰 확장 뷰가 됩니다 마지막으로 작은 최소 뷰도 있고요 축소 뷰는 가장 흔하게 나타나는 뷰입니다 이 뷰의 목적은 사람들이 전화를 사용하면서도 현황 주시를 가능케 하는 거죠

단순히 앱으로 돌아가는 정적인 링크가 아니라 정보성이 있어야 합니다 해당 활동에서 가장 중요한 부분을 알려줘야 하죠 앱의 정체성 또한 깔끔하게 반영해야 하고요 여기서 중요한 목표는 낭비하는 공간 없이 캡슐을 가능한 한 좁게 만드는 겁니다 콘텐츠가 센서 영역에 딱 맞게 만들어야 하죠 그럼 Dynamic Island가 이 이상 넓을 필요가 없습니다 그리고 가능한 한 뷰를 콘텐츠로 꽉 채우세요 왼쪽에 있는 빈 공간에 주목하세요 구성 단위 같은 걸 자르거나 줄여주세요 안 그러면 데이터의 정확도가 떨어지니 너무 넓거나 불균형이 되는 건 피해 주세요

앱이 진행 중인 여러 세션을 한 번에 보여주고자 한다면 그들이 나타나는 속도에 차이를 두어서 사용자가 진행 중인 모든 걸 볼 수 있도록 해주세요 세션 진행 중에 사용자에게 이벤트에 대해 알려야 한다면 푸시 알림을 보내는 대신 가능하다면 Dynamic Island를 확장해 해당 정보를 보여주세요 Dynamic Island도 알림과 같이 앱 위에 있는 하나의 레이어에 떠 있는다는 것을 기억하세요 Dynamic Island를 가리키거나 상호작용하는 UI는 안 되죠 '확장 뷰'에 대해 이야기해 봅시다

알림을 주는 것 외에도 Dynamic Island를 눌러서 화면을 확대하고 더 많은 정보와 중요한 통제 기능에 접근할 수 있습니다 너무 적게 또는 너무 많이 보여주지 말고 활동의 본질만 보여주려고 하세요 이건 앱의 특성을 가져와서 살짝 들여다 보고 있다는 느낌을 느끼게끔 할 수 있는 가장 좋은 기회입니다 정체성 구축을 위해 둥글고 두꺼운 모양과 자유로운 색상 사용을 강조하여 Dynamic Island의 조화를 이루는 게 중요합니다 앱이 작은 버전으로 이 공간에 살고 있다고 느껴져야 해요

확장 뷰를 제시할 때에는 두 개의 뷰에서 모든 것의 관련성 있는 배치를 유지하세요 그렇게 하면 일관성이 있을 겁니다 확장 뷰에는 더 많은 콘텐츠를 보여주기 위한 높은 뷰에서부터 더 간결한 뷰를 위한 짧은 높이의 뷰까지 있습니다 필요한 공간은 결정하기 나름이지만 이 사이의 가장자리에 오는 높이는 피해 주세요

콘텐츠를 제시할 때는 센서 영역에 주의를 끄는 상단 '이마' 부분에 배치하는 것은 피해 주시고요 대신 해당 센서와 가능한 한 밀착시켜서 그 주변 전체를 콘텐츠로 감싸주세요 거의 센서에 집중하지 않을 수 있게 됩니다 Dynamic Island에도 최소 크기 뷰가 있습니다 한번에 여러 세션을 왔다갔다 할 때 나타나죠 로고만 보여주는 건 피하시고 세션이 어떻게 최소 크기의 상태에서도 정보를 전달할 수 있을지 생각해 보세요 오늘 이야기한 것과 같이 Dynamic Island는 앱에 대한 특수한 시스템 레이어입니다 디자인할 때 고려해야 할 게 굉장히 많죠 Dynamic Island 내에서 편안함을 느끼면서도 여러분의 앱에서만 느낄 수 있는 방식으로 앱의 정체성을 이 공간에 맞추는 것처럼 말입니다 Dynamic Island의 둥근 모양과 조화를 이루도록 요소들의 딱 맞는 배치를 위해 고려해야 할 것들도 있습니다 Dynamic Island 내에 구축하는 모든 경험들은 새로운 멀티태스킹 유형이자 앱과의 새로운 상호작용 방식으로 여겨질 수 있고 전에는 불가능했던 기기 사용 경험과 방식을 드러냅니다

여러분이 이걸 어떻게 활용하실지 기대되네요 대단히 감사합니다!