대화형 스니펫 설계하기

안녕하세요, Apple 디자인 팀의 디자이너 Ray입니다 오늘은 대화형 스니펫 디자인 방법을 알아보겠습니다 대화형 스니펫은 앱 인텐트를 통해 표시되는 compact 보기입니다 최신 정보를 표시하고 앱에서 바로 빠른 동작을 수행할 수 있습니다 스니펫은 앱 인텐트가 지원되는 어디서나 나타날 수 있습니다

여기에는 Spotlight, Siri 단축어 앱이 포함됩니다 이 통합을 통해 앱의 도달 범위와 시스템 유용성이 확장됩니다 스니펫은 항상 화면 상단에 명확히 나타나며 콘텐츠 위에 표시되죠 따라서 맥락을 벗어나지 않고 유용하게 활용할 수 있습니다 스니펫은 확인하거나, 취소하거나 스와이프할 때까지 유지됩니다

따라서 스니펫을 사용하면 앱에서 간단하고 일상적인 작업과 정보를 표면화하기에 좋습니다 스니펫은 앱만의 정체성을 반영할 시각적 레이아웃이 풍부하죠 버튼과 같은 요소도 지원하며 업데이트된 정보를 표시하므로 앱 인텐트의 상호작용 수준이 한 차원 올라갑니다 그러면 이제 스니펫 콘텐츠 및 레이아웃의 모양을 이야기하겠습니다 또 간결하고 유용한 상호작용을 만드는 방법을 알아보겠습니다 마지막으로 결과, 확인 등 다양한 스니펫 유형을 사용하는 방법을 살펴보겠습니다 스니펫은 앱 인텐트로 디자인되어 빠르고 즉각적인 경험을 제공하죠 따라서 콘텐츠를 읽고 이해하기 쉽게 만드는 것이 중요합니다 스니펫을 한눈에 보는데 중요한 측면은 글꼴 크기입니다 스니펫의 텍스트는 시스템 기본값보다 큽니다 글꼴이 크면 가장 중요한 정보에 시선이 향하게 됩니다 레이아웃이 복잡해지지 않도록 요소 사이에 충분한 공간을 확보하세요 스니펫에 콘텐츠를 배열할 때는 레이아웃이 명확하게 보기 주변의 콘텐츠에 일정 여백을 유지하세요 스니펫이 체계적으로 정리되어 중요한 내용에 집중할 수 있습니다 ContainerRelativeShape API를 사용해 이러한 여백이 반응형으로 다양한 플랫폼과 화면 크기에 따라 올바르게 조정되게 할 수 있습니다

큰 텍스트를 사용하면 필연적으로 공간 제약이 생깁니다 높이가 340포인트를 넘는 콘텐츠를 포함하지 마세요 스크롤이 필요하고 예상치 못한 마찰이 발생할 수 있습니다 대신 가장 중요한 정보만으로 콘텐츠를 간결하게 유지하세요 더 많은 정보가 필요하다면 스니펫에 앱의 관련 보기를 링크해 필요한 내용을 표시할 수 있습니다 다른 콘텐츠 위에 나타나는 경험을 디자인할 때는 앱의 시각적 정체성을 기반으로 한 생생한 배경을 사용하면 스니펫이 한층 눈에 띕니다 하지만 이로 인해 콘텐츠를 읽기가 어려울 수 있습니다 멀리서 스니펫을 보는 상황에서는 대비를 확인하는 것이 특히 중요합니다 표준 대비를 넘어야 할 때도 있죠 콘텐츠를 읽기 어렵다면 레이아웃의 콘텐츠와 배경 사이의 대비를 높여 보세요 생생한 배경을 사용할 때도 스니펫을 명확히 유지 가능합니다 스니펫을 읽고 이해하기 쉽게 만드는 방법을 알아보았습니다 이제 상호작용을 살펴보겠습니다 상호작용으로 더 스테이플하고 실행 가능한 스니펫이 되죠 즉, 버튼을 통합하여 사용자가 인텐트를 사용할 때 직접 간단하고 관련성 있는 동작을 수행하도록 할 수 있습니다 스니펫은 앱의 최신 정보를 반영해 업데이트된 데이터도 표시할 수 있습니다

상호작용 사용 방법을 확인하고자 물 추적 인텐트의 예를 살펴보겠습니다 간단한 물 추가 버튼을 추가하면 가벼운 경험을 유지하면서 정보를 더 효과적으로 활용할 수 있습니다

데이터는 크기 조절과 블러로 업데이트되며 동작에 대한 명확한 시각적 피드백을 제공합니다 스니펫 자체 내의 데이터를 업데이트하여 동작이 성공했는지 확인하면 일상에서 앱 인텐트에 대한 사용자의 신뢰가 쌓입니다 스니펫에는 동시에 여러 개의 버튼과 업데이트된 콘텐츠가 포함될 수 있습니다

예를 들어 이퀄라이저 스니펫은 업데이트된 오디오 설정을 표시하는 동시에 선택 가능한 몇 가지 프리셋을 제공합니다 스니펫이 주요 작업을 보완하는 명확하고 관련성 있는 동작을 제공하도록 하세요 상호작용이 없더라도 스니펫은 앱의 최신 정보로 애니메이션화될 수 있습니다

이제 스니펫 유형을 보겠습니다 스니펫에는 결과, 확인과 같이 두 가지 유형이 있습니다 결과 스니펫은 확인의 결과인 정보 또는 추가 동작이 필요하지 않다는 정보를 제공하죠 여기서는 후속 작업이나 결정이 필요하지 않으므로 보기 하단에 있는 유일한 버튼은 “완료”입니다 결과 유형은 주문 상태 확인 등의 스니펫에 적합합니다 다음은 확인 스니펫입니다 인텐트에서 결과를 표시하기 전에 동작이 필요할 때 확인을 사용하죠 예를 들어 이 커피 주문 인텐트를 살펴보겠습니다 에스프레소의 양을 변경하는 버튼이 있지만 이 스니펫은 확인 유형입니다 사용자가 동작을 취하기 전까지는 커피 주문이 접수되지 않으니까요 버튼의 동작 동사는 “주문”처럼 다음 단계를 명확히 표시합니다 확인의 동사는 사전에 작성된 옵션으로 변경할 수도 있고 인텐트에 맞지 않는다면 직접 작성할 수도 있습니다

2샷 에스프레소 라테와 같은 주문이 확인되고 나면 결과 스니펫은 그러한 선택의 결과를 표시합니다 이 패턴으로 사용자는 인텐트를 시작했음을 이해할 수 있으며 인텐트의 완료를 보게 됩니다 이제 대화를 표시할 시점을 볼까요 대화는 앱 인텐트에 대해 Siri가 말하는 내용입니다 음성 우선 상호작용에서는 필수죠 예를 들어 AirPods 사용 중에 화면을 보고 있지 않더라도 결과 또는 확인에 대한 답변의 대화를 들을 수 있습니다 스니펫은 대화와 함께 나타날 수 있지만 대화가 표시되거나 들리지 않아도 스니펫 자체로 이해가 되도록 최대한 만들어 보세요 스니펫은 대화에 의존하지 않고도 인텐트의 목적을 명확하게 전달해야 합니다 이렇게 하면 중복이 해소되며 더 직관적인 스니펫이 완성됩니다

동작 요청 또는 결과 표시에 확인 및 결과를 사용하세요 지금까지 학습한 내용과 다음 내용을 정리해 보겠습니다 한눈에 보이는 모양, 간단한 상호작용, 알맞은 스니펫 유형으로 가볍고 일상적인 스니펫을 디자인하세요 단축어 및 Spotlight용 앱 인텐트 빌드에 대한 새로운 사항을 자세히 알아보려면 앱 인텐트가 있는 단축어 및 Spotlight 개발하기 세션과 앱 인텐트의 새로운 업데이트 살펴보기 세션을 참고하세요 여러분의 스니펫이 기대됩니다! 감사합니다!