메시지와의 협업을 위한 디자인

♪ ♪

안녕하세요, Jaewoo입니다 저는 Apple Design 팀의 디자이너입니다 동료들과 키노트 프레젠테이션을 준비할 때나 친구들과 아이디어를 모을 때든 사람들은 매일 모든 것에 대해 협업을 합니다 우리는 최고의 협업 경험을 만들어 내기 위해 iOS 16과 macOS Ventura에 약간의 변화를 주었습니다 오늘 저는 메시지 앱을 협업 경험의 중심에 둔 이유에 대해 말씀드리고 종단간 협업 흐름으로 안내해 드리겠습니다 우리가 만든 변화들도 보여드리면서요 메시지 앱을 사용해 앱에서 최고의 협업 경험을 디자인하기 위해 도움이 될 내용도 공유해 드릴게요 자, 그럼 본론으로 들어가죠 이메일은 우리가 매일 사용하는 최고의 소통 툴 중 하나죠 많은 협업 앱에서는 주요 연락 방식으로 사용하고요 하지만 협업 중 이메일 대화는 즉각적이라는 느낌이 없습니다 이메일이 비동기 소통 툴로 디자인된 이유가 바로 이거죠 그래서 우리는 이를 보충하고자 메시지 앱을 가져왔습니다 사람들은 이를 통해 기존 대화를 사용하여 협업에 초대할 수 있습니다 이메일 주소를 물어볼 필요가 없죠 협업 성공의 열쇠는 효과적인 소통입니다 메시지 앱에는 이미 그걸 가능하게 하는 기능들이 있죠 메시지 앱 대화는 FaceTime Call 전환이 쉽게 가능합니다 FaceTime으로 대화하며 스크린 공유를 사용하면 더 생산적인 협업이 가능하죠 그럼 이건 다른 협력 앱들과 어떻게 어우러질 수 있을까요? 친구들과 저는 베이킹을 좋아합니다 그래서 종종 레시피를 고융하죠 저는 Pages 문서에 레시피를 만들어서 친구들과 공유하려고 합니다 먼저 도구 막대의 '공유(Share)' 버튼을 탭하는 것부터 시작될텐데요 새로운 시스템 팝오버를 통해 이 문서를 두 가지 방식으로 공유할 수 있습니다 새로운 협업을 시작하거나 복사본을 보내는 방식이죠 공유 방식을 택한다면 메시지 앱, 메일 앱, 기타 소통 앱을 통해 초대장을 보낼 수 있습니다 친구들과 'Cupcake Designers'라는 대화 그룹을 만들었는데요 이 팝오버에서는 제가 친구들과 자주 대화하는 걸 알고 여기서 그들을 대화 제안 대상으로 보여주죠 협업을 시작하기 위해 그룹을 선택해 보겠습니다 지금 메시지 앱 입력 필드에 초대장이 있는데요 발송 준비는 이미 완료됐습니다 '보내기(Send)' 버튼은 협업을 바로 시작하게 하죠 도구 막대를 보시면 Cupcake Designers 사진이 나타난 게 보이시죠? 이들과의 대화가 이 문서에 연결된 겁니다 제 친구 Lauren과 Chris가 합류해 있네요

이 그룹 대화 사진을 탭하면 협업 팝오버가 나타납니다 이 팝오버는 소통 툴에 쉽게 액세스하기 위해 추가됐고 신속한 전체 보기가 가능합니다 현재 이 문서에 누가 참여해 있는지 나타나네요 팝오버 안에 '메시지(Messages)' 버튼을 탭하면 공유 문서에 대한 메시지 앱의 대화가 나타납니다 그룹 대화에 빠르게 돌아가 이 문서에 대해 이야기할 수 있죠 FaceTime으로 대화를 해야 할 경우 '통화(Audio)'이나 '비디오(Video)' 버튼을 탭하시면 됩니다

이제 친구들과 문서를 실시간으로 수정할 수 있습니다 메시지 앱과의 끈끈한 결합으로 엄청난 기능이 생겨났는데요 메시지 앱에는 협업 앱 알림이 나타납니다

Chris가 'Baking Recipes' 문서를 방금 수정했네요

이 배너로 문서를 바로 열어 업데이트 내용 확인이 가능하죠

이제 메시지 앱은 협업 앱과 강력하게 연결되어 협업 흐름을 더욱 간소화할 수 있습니다 이렇게 새로운 협업 경험의 예시를 살펴 보았는데요 협업의 시작은 '공유' 버튼과 시스템 공유 팝오버를 통해 간단하게 이루어집니다 기존 대화에서 쉽게 초대장을 보낼 수도 있는데요 협업 팝오버를 통해 메시지 앱 대화로 돌아가거나 FeaceTime 통화를 시작할 수 있습니다

협업 앱의 수정 알림을 통해 최신 정보를 알 수 있고요

메시지 앱과 다른 협력 앱이 어떻게 어우러지는지 보았으니 다음으로 앱에 협업을 디자인할 수 있는 실용적인 팁을 드리도록 하겠습니다 시스템 공유 시트부터 시작해 보죠 앱 사용자들은 시스템 공유 시트에 익숙합니다 웹사이트, 노래나 앨범, 사진, 다양한 콘텐츠를 공유하는 등 많은 것들을 위해 이 시트를 사용하죠 대화 제안을 통해서도 공유하고자 하는 콘텐츠의 수신 대상을 더 빠르게 찾고요 이 시트를 통해 협업을 쉽게 시작할 수 있습니다 앱에서의 협업을 더욱 일관적이고 친숙하게 해주죠 시스템 공유 시트를 이용하기로 하셨다면 그 다음은 앱에 '공유' 버튼을 배치하는 겁니다 쉽게 접근할 수 있는 곳에 버튼을 배치하세요 도구 막대도 좋은 후보입니다 이제 공유 시트를 필요에 따라 커스터마이징하는 법에 대해 더 자세히 살펴보죠 헤더의 팝업 버튼을 통해 공유 방식 선택이 가능합니다 복사본 보내기를 지원하지 않는 경우 이 팝업 버튼은 사라질 겁니다 그 아래 '모두 수정 가능(Everyone can make changes)'이라는 텍스트는 협업 허용 설정의 시작점입니다 앱이 지원하는 기본 설정을 설명하는 문구가 있어야 합니다 잘림 방지를 위해 가능한 간결하세 만들어 주세요 허용 설정 스크린은 이 텍스트를 탭하면 나타나는데요 스크린을 커스터마이징할 때 선택 구조를 단순해야 합니다 사람들이 옵션을 쉽게 훑어 빠르게 결정할 수 있도록요 macOS의 공유 팝오버는 '대화 제안'을 포함해 iOS와 iPadOS의 변화를 반영하여 다시 디자인되었습니다 드롭다운 메뉴를 통해 공유 방식 선택도 가능합니다 이 팝오버 내에서 허용 설정에도 접근할 수 있죠 여기서도 간결한 허용 문구를 사용하고 설정도 심플하게 유지하세요 다음으로 메시지 앱에서의 협업 시작 경험을 최적화하는 방법에 대해 말씀드리겠습니다 사람들은 공유 방식을 선택할 수 있지만 메시지 앱 입력 필드의 협업 설정도 바꿀 수 있습니다 공유 시트로 돌아가서 옵션을 바꿀 필요가 없습니다 메시지 앱 대화에 파일을 드래그 앤 드롭하여 추가하는 것도 협업 시작의 편리한 방법입니다 그러니 메시지 앱 입력 필드의 허용을 쉽게 설정할 수 있고 '보내기' 버튼만 눌러 협업을 시작할 수 있게 만드세요 사람들이 쉽게 찾을 수 있는 곳에 협업 버튼을 배치하는 것이 중요합니다 협업이 시작되면 협업 버튼이 앱에 나타날 겁니다 이 버튼은 협업 경험 전체에서 가장 중요한 UI 요소 중 하나입니다 사람들의 시선을 끌 수 있도록 눈에 띄는 곳에 배치하세요 '공유' 버튼 바로 옆이 최적의 위치입니다 '협업' 버튼의 모습은 협업 시작 방식에 따라 약간 달라질 겁니다 메시지 앱의 일대일 대화로 초대장을 보낸 경우 수신자의 그림이 버튼에 나타날 것이고 협업이 그룹 대화에서 시작되어 대화에 사진이 오고갔을 경우 시스템은 앱에서 그 사진을 보여줄 겁니다 그룹 대화 사진이 없다면 대신 시스템의 심볼이 사용될 거고요 '협업' 버튼 위치를 결정하셨다면 협업 팝오버를 커스터마이징할 차례입니다 협업 팝오버는 개별 섹션 3개로 구성됩니다 상단 섹션에는 협업 대상이 나타나고요 시스템은 연락처 앱에서 일치하는 프로필 사진을 찾아 여기에 보여줍니다 소통을 위한 버튼도 있는데요 문서와 연결된 메시지 앱 대화가 없다면 메시지 버튼이 문서에 연결할 수 있게 해줄 겁니다 중간 섹션은 모두 커스터마이징이 가능합니다 앱 사용자들에게 어떤 정보나 기능이 필요할 지 생각해 보세요 Pages는 디스플레이 설정에 활성 참여자 목록을 보여줍니다 반대로 메모(Notes) 앱은 두 개의 활성 버튼으로 최신 활동을 보여주죠 협력 팝오버에 너무 많은 정보나 버튼을 지나치게 많이 넣지 마세요 눈에 잘 들어와야 합니다 또한 추가하는 모든 것이 팝오버 내 다른 요소들과 시각적으로 일관되어야 합니다 이 팝오버에 보여줄 것이 없다면 중간 섹션은 빈 상태로 두셔도 좋습니다 미리 알림(Reminders) 앱이나 파일(Files) 앱 처럼요 팝오버 하단에는 '공유 파일 관리(Manage Shared file)' 버튼이 있습니다 필요할 경우 버튼 라벨을 커스터마이징할 수 있죠 이 버튼을 누르면 협력 관리 스크린이 나타납니다 참여자를 추가하거나 삭제할 수 있고 스크린의 다른 설정도 변경할 수 있습니다 CloudKit 공유를 사용하고 있다면 관리 스크린은 시스템에서 제공될 겁니다 CloudKit 공유를 사용하지 않는다면 관리 스크린을 직접 만드실 수 있고요

macOS의 협업 팝오버 구조는 iOS 구조와 동일합니다 macOS UI 구성 컴포넌트와 디자인 패턴을 중간 섹션을 커스터마이징할 때 사용해 보세요 마지막으로 메시지 앱 내 배너 모양을 특히 중요하게 생각하실 텐데요 이 배너들은 앱이 협력자들에게 중요한 변화를 알릴 수 있는 방법입니다 문서를 열지 않고도 새로운 업데이트 내용을 알 수 있게 해주죠 메시지 앱에서는 배너 템플릿 선택이 가능한데요 편집 모드, 추가 코멘트, 언급 내역 파일 수정까지 보여주고 싶은 최신 정보 유형을 결정하세요 그 최신 정보들을 통해 적절한 대화가 이어질 겁니다 여러 사람들이 다양한 문서에서 편집을 여러 번 하면 어떨지 궁금하실텐데요 메시지 앱에서는 어떻게 처리할까요? 너무 많은 배너로 어수선하게 만들지 않도록 메시지 앱은 배너들을 하나로 통합합니다 '보기(View)' 버튼을 탭하면 모든 최신 내용을 한 곳에 보여주죠 그럼 확인하고 싶은 것만 선택할 수 있습니다 오늘 이렇게 메시지 앱을 사용해 최고 협업을 디자인할 수 있는 방법에 대해 알아보았는데요 시스템 공유 시트를 새로 선택하고 협업 팝오버를 커스터마이징하여 소통 툴과 좋은 전체 보기를 제공해 보세요 메시지 앱 통합으로 생산적이고 성공적인 협업이 가능해질 겁니다 더 나은 경험을 디자인하기에 도움이 되셨길 바라며 시청해 주셔서 감사합니다