스트리밍은 대부분의 브라우저와
Developer 앱에서 사용할 수 있습니다.
-
Spotlight 단축어 디자인하기
앱 단축어의 시각적 언어에 대한 최신 업데이트를 살펴보고, 단축어를 Spotlight에서 가장 연관성 높은 항목으로 표시되게 디자인하는 방법을 알아보세요. iOS 및 iPadOS에서 단축어가 나타나는 방식을 살펴보고, 단축어의 시각적 모습을 사용자화하는 방법, 단축어의 순서를 개인화하는 방법, 올바른 동작을 선택하는 방법, 검색 가능성을 높이는 방법을 알아봅니다.
챕터
- 1:35 - Principle 1: Focus on the essentials
- 2:04 - Principle 2: Prefer actionable shortcuts
- 2:30 - Principle 3: Design predictable and personal shortcuts
- 4:13 - Design icons for actions and entities
- 5:47 - Consider providing entity subtitles
- 6:03 - App icon colors
- 6:48 - Design your shortcut’s behavior: App launch, Live Activity, or snippet
- 8:23 - Supporting phrase synonyms to increase discoverability
- 8:52 - App name synonyms
리소스
관련 비디오
WWDC23
WWDC22
WWDC21
WWDC19
-
다운로드
♪ ♪
안녕하세요, 캐머런입니다 Apple 휴먼 인터페이스 팀의 디자이너죠 iOS 17에서 Spotlight의 단축어를 디자인하는 법을 알려 드리겠습니다 iOS에 내장된 Spotlight는 검색 유틸리티로서 어떤 검색이든 쉽게 시작할 수 있습니다 이제 앱을 검색할 때 가장 연관성 높은 항목에 단축어가 함께 나타납니다 iOS 17에서는 다양한 앱에 새 단축어가 생겼는데요 오늘은 여러분 앱의 단축어를 디자인하는 법을 알아보겠습니다 우선 달라진 점부터 살펴보죠 Spotlight 실행 시 앱이 제안되면 앱 단축어도 함께 제안됩니다 앱 단축어를 직접 검색하는 경우 색이 입혀진 가장 연관성 높은 항목에 나타나죠 iPad에서는 넓은 화면으로 최대 다섯 개의 앱 단축어를 표시합니다 검색만 되는 게 아닙니다 앱 단축어는 단축어 앱에도 나타나므로 사용자가 단축어를 살펴보고 조합해 홈 화면에 추가할 수도 있죠 iOS 17 앱 단축어의 달라진 점을 알았으니 Spotlight에 적합한 단축어를 만드는 법을 알아볼게요 단축어를 구상하는 법으로 시작해서 단축어의 시각적 외관 및 동작을 만드는 법을 알아봅니다 마지막으로 검색 시 단축어를 쉽게 찾을 수 있게 하는 간단한 팁으로 마무리하죠 그럼 구상부터 시작할게요 Spotlight용 단축어를 디자인할 땐 앱의 필수적이고 특유한 동작 및 콘텐츠에 초점을 맞추는 게 좋습니다 시계에는 앱 단축어가 두 개입니다 타이머 설정과 알람 추가죠 세계 시계의 '도시 추가'를 단축어에 포함할 수도 있지만 복잡하고 덜 습관적인 기능이라서 포함하지 않았습니다 억지로 공간을 채울 필요는 없어요 단축어가 한두 개만 있어도 괜찮습니다 또한 가능하면 단축어가 바로 동작을 수행하게 하세요 처음 떠오른 생각이 앱의 탭 막대를 그대로 단축어에 반영하는 것일 수도 있지만 더 나은 아이디어를 떠올려 보세요 사용자는 이미 앱의 주요 내비게이션을 알기 때문에 이게 최선은 아닐 겁니다 그러지 말고 앱의 주요 목적을 달성하는 단축어를 만드세요 전화 앱이라면 즐겨찾기나 최근 통화 연락처에 전화하는 거죠 마지막으로 단축어 디자인은 예측 가능하고 개인적이어야 합니다 Podcasts의 경우 현재 듣고 있거나 새 에피소드가 있는 쇼를 바로 보여 주는 거죠 하지만 사용자가 들은 적 없는 인기 팟캐스트를 홍보하면 안 돼요 앱 단축어는 즉시 알아볼 수 있어야 하고 새 콘텐츠를 둘러보는 건 앱 내에서 하는 게 좋습니다 예측이 가능해지려면 앱 단축어를 개인화해야 합니다 사용자가 앱 안에서 내린 결정을 기반으로요 메모 앱을 예로 들어 보죠 메모 앱의 작성 버튼은 항상 오른쪽 하단 도구 막대에 있으니 가장 연관성 높은 항목에서도 새 메모 버튼이 앱 아이콘의 오른쪽에 있는 건 예측 가능합니다 앱 안의 메모들은 시간 역순으로 정렬되므로 가장 연관성 높은 항목의 단축어에서도 그래야겠죠 예외로 고정된 메모는 앱에서 항상 맨 위에 표시됩니다 이는 사용자가 의도적으로 한 작업이니 앱 단축어의 순서에도 반영해야 합니다 단축어 순서는 사용자가 앱에서 내린 결정을 반영하고 예측 가능한 요소를 습관적으로 기억할 수 있게 해야 해요 요약하자면 구상할 때는 핵심에 집중하세요 습관적인 동작 몇 가지만 강조하면 되죠 복잡한 동작까지 전부 강조할 필요는 없습니다 또한 실행 가능한 단축어를 선택하세요 단순히 탭 막대가 아니라 주요 목적을 반영하는 단축어를 만들어야 해요 마지막으로 예측 가능해야 합니다 사용자가 앱 안에서 상호 작용 한 내용과 관련된 단축어를 만드세요 본 적 없는 내용 말고요 사용자가 습관적으로 기억할 수 있게 디자인하세요 앱 단축어를 구상했으니 이제 제작해 보겠습니다 우선 알아야 할 것은 모든 앱 단축어가 동작과 엔티티 중 하나로 이루어진다는 점입니다 동사와 명사로 생각할 수 있죠 구체적으로 말하면 Freeform에서 새 보드를 만드는 동작과 제 Big Idea 보드와 연결된 엔티티입니다 UI에서 동작은 항상 이런 원 안의 SF Symbols로 표시됩니다 기본적으로 엔티티도 모두 SF Symbols로 그려지죠 하지만 보통은 엔티티에 아이콘을 제공하는 게 좋아요 그러면 더욱 시각적이고 인식하기 쉽죠 필요시 동작 이름을 두 줄로 할 수 있습니다 하지만 이름을 간결히 지어서 끝이 잘리지 않게 하고 이미 UI에 표시된 앱 이름은 포함하지 않도록 유의하세요 이름은 최대한 짧으면서도 이해하기 쉬워야 합니다 앱 단축어의 아이콘은 작기 때문에 최대한 알아보기 쉽게 만드는 게 중요해요 엔티티의 아이콘을 그릴 때 단축어의 형태가 앱 내 해당 개념의 형태와 일치하도록 신경 써야 합니다 미리 알림 앱 내 목록이 원형이므로 앱 단축어도 원형입니다 사진 앱 내 앨범은 사각형이므로 앱 단축어도 사각형이죠 형태뿐만이 아닙니다 즐겨찾는 항목 커버에는 구석에 작은 하트가 그려져 있으니 해당 요소를 단축어 아이콘에도 반영했죠 이런 세부 사항이 시각적 힌트 역할을 하며 앱 단축어의 친숙함을 극대화합니다 사용자가 단축어를 직접 검색하면 부제목에 더 많은 정보를 표시할 기회가 생깁니다 이 기회를 활용해 결과물을 더 풍부하게 디자인할 수 있죠 즐겨찾는 항목 앨범 내 사진의 수를 앱과 똑같이 표시할 수 있습니다 이번에는 색상을 살펴볼게요 기본 설정에서는 앱 단축어가 이렇게 나타납니다 이는 앱 아이콘이 여러 색이거나 중간색이라면 적절하지만 메모 앱의 노랑처럼 아이콘의 그라디언트나 색상이 강렬한 경우에는 Spotlight의 연관성 높은 항목과 단축어 앱의 플래터에 색상을 주입할 수 있습니다 보완 색상을 정할 때는 사고 훈련을 해 보세요 앱 아이콘에서 그래픽을 빼고 그라디언트와 단색만 남기는 거죠 기본 설정에서는 기호가 흑백으로 표시됩니다 그런데 앱의 보완 색상이 어두우면 여러분의 브랜드처럼 느껴지지 않을 수 있죠 보조 색조를 제공해 두 가지 톤으로 나타내면 이를 해결할 수 있습니다 이번에는 단축어의 동작을 알아볼게요 여기에는 세 가지 선택지가 있습니다 앱 실행은 특정 화면으로 앱을 엽니다 실시간 현황은 실시간 현황이나 백그라운드 Audio Session을 시작하죠 마지막으로 스니펫은 간결한 형태로 질문하거나 약간의 정보를 표시합니다 가장 간단한 동작은 앱 단축어로 앱의 해당 화면을 여는 것입니다 이 동작은 쉽고 웬만하면 올바른 선택이죠 다음은 실시간 현황을 시작하는 건데요 전화 걸기나 타이머 시작처럼 앱 내 추가 작업이 필요 없는 간단한 동작에 좋은 선택지입니다 실시간 현황 디자인을 알아보려면 '동적 실시간 현황 디자인하기' 세션을 참고하세요 마지막으로 스니펫을 표시하여 간단한 질문을 하거나 사용자 지정 응답을 보여 줄 수 있습니다 하지만 복잡한 작업을 위해서는 앱을 여는 게 나을 때가 많죠 스니펫을 표시한 후에는 실시간 현황을 시작하거나 앱을 열게 할 수 있습니다 스니펫으로 디자인하는 방법을 더 알아보려면 이전 연도의 다음 세션들을 확인하세요 요약하자면 앱 단축어를 제작할 때는 아이콘이 앱 내용을 시각적으로 나타내도록 디자인해야 합니다 제목은 명확하고 간결히 지으세요 모호하지 않게요 엔티티에 부제목을 포함해 검색 결과를 향상해 보세요 필요한 경우 앱의 색상도 주입해 보시고요 또한 앱 단축어에 적절한 동작을 디자인하세요 마지막으로 Spotlight에서 앱 단축어를 쉽게 찾을 수 있도록 몇 가지 중요한 점을 검토해 보겠습니다 Spotlight에서는 다양한 방식으로 앱 단축어를 검색할 수 있어요 예를 들어 '문서 스캔하기' 단축어를 찾을 때 '파일 스캐너'를 검색할 수도 있죠 단축어 구문에 동의어를 추가하여 이를 지원할 수 있습니다 구문은 앱 이름을 포함하는 앱 단축어의 자연어 설명입니다 앱 단축어를 실행할 때 Siri에게 할 만한 말이기도 하죠 앱 단축어 구문에 동의어를 몇 가지 제공해야 사용자가 어떻게 검색하든 단축어를 찾을 수 있습니다 앱이 여러 이름으로 알려져 있다면 앱 이름 동의어를 제공해 보세요 예를 들어 iOS에 내장된 음악 인식 앱은 'Shazam'이라는 동의어를 제공합니다 이렇게 하면 다른 이름으로 검색해도 사용자가 해당 앱 단축어를 찾을 수 있죠 정리하자면 Spotlight에서 단축어를 쉽게 찾을 수 있도록 사용자가 다양한 방식으로 기능을 검색할 수 있게 하는 구문 동의어를 작성하세요 때에 따라 앱 이름 동의어를 제공할 수도 있죠 지금까지 앱 단축어를 구상 및 제작하고 Spotlight에 나타내는 법을 알아봤습니다 시청해 주셔서 감사해요 여러분이 iOS 17에서 만드는 앱 단축어가 기대됩니다 ♪ ♪
-
-
찾고 계신 콘텐츠가 있나요? 위에 주제를 입력하고 원하는 내용을 바로 검색해 보세요.
쿼리를 제출하는 중에 오류가 발생했습니다. 인터넷 연결을 확인하고 다시 시도해 주세요.