Genmoji로 앱에서 더욱 풍부한 표현 선보이기

안녕하세요, Input Experience 팀의 엔지니어인 Aaron입니다 오늘은 몇 가지 흥미롭고 새로운 방법을 공유하려고 합니다 이모티콘으로 앱의 표현력을 높이는 방법입니다 이 세션에서는 이모티콘 경험의 최신 업데이트 사항을 살펴보고 맞춤형 이모티콘을 전송하기 위한 새로운 API를 소개하며 얼마나 쉽게 앱에 도입할 수 있는지 알아봅니다 그런 다음 호환성 고려 사항을 자세히 살펴보고 맞춤형 텍스트 렌더링의 몇 가지 고급 사용 사례도 알아봅니다 이모티콘은 어디서나 볼 수 있죠! 그럴 만도 합니다

이모티콘은 표현력이 풍부하고 텍스트 단락 전체를 단 하나의 이모티콘으로 대신할 수 있죠!

또한 다재다능합니다 이모티콘 하나로 제대로 전달되지 않을 땐 적절한 조합을 찾으면 완벽해집니다!

텍스트와 결합되면 더 강력해지죠 이모티콘도 텍스트니까요! 이미지와 달리 이모티콘은 문장의 일부이며 주변 텍스트와 어울리도록 표현이 조정됩니다 올해 Apple은 다양한 업데이트로 더 멋진 이모티콘을 선보입니다! 업데이트된 이모티콘 키보드가 포함되는데 우리 모두가 잘 아는 표준 이모티콘을 맞춤형 콘텐츠와 결합합니다 이제 맞춤형 콘텐츠를 이모티콘처럼 사용할 수 있습니다

스티커, 미모티콘 애니모티콘 그리고 나만의 이모티콘을 만드는 새로운 방법인 Genmoji 등입니다

정말 멋진 강아지네요 이제 여러분이 무슨 생각을 하실지 알겠습니다 기존 이모티콘은 실제로 이미지가 아니라 일반 텍스트로 전송되는 표준화된 유니코드 문자 목록이며 보기 기기에 따라 적절한 이미지를 자체 서체로 렌더링합니다 다른 텍스트 콘텐츠와 마찬가지죠 반면에, Genmoji 같은 맞춤형 이미지는 고유하고 래스터화된 비트맵으로, 유니코드 텍스트 문자로 설명할 수 없습니다 그렇다면 어떻게 작동할까요? NSAdaptiveImageGlyph입니다 Genmoji와 다른 맞춤형 이미지를 표준 이모티콘처럼 사용할 수 있게 지원하는 새로운 API입니다 NSAdaptiveImageGlyph는 표준 이미지 형식으로 구동되며 정사각형 화면 비율과 다양한 해상도를 사용합니다 또 추가 메타데이터로 강화됩니다 고유하고 안정적인 전역 식별자 손쉬운 사용을 위해 사용될 수 있는 콘텐츠 설명 이미지의 적절한 레이아웃과 배치를 위한 정렬 지표 등입니다 일반 텍스트와 함께 사용되고 형식이 지정될 수 있습니다 Genmoji는 단독으로 사용하거나 텍스트와 결합할 수 있습니다 형식 지정, 복사, 붙여넣기와 스티커로 전송도 할 수 있습니다

서식 있는 텍스트를 지원하는 곳이라면 어디든 Genmoji와 표현력이 풍부한 이미지를 지원합니다

이제 애플리케이션에서 Genmoji를 얼마나 쉽게 지원할 수 있는지 살펴보겠습니다 NSAdaptiveImageGlyph는 서식 있는 TextView에서 기본 지원됩니다 따라서 앱에서 서식 있는 텍스트를 이미 지원하는 경우 supportsAdaptiveImageGlyph만 활성화하면 쉽게 시작 가능합니다

iOS에서는 텍스트 뷰에 이미 pasteConfiguration 또는 이미지를 지원하는 붙여넣기에 대한 대상 동작이 있는 경우 해당 활성화 없이도 구성이 Genmoji와 적응형 이미지 글리프에 대한 지원을 기본적으로 활성화합니다 macOS에서는 텍스트 뷰에서 importsGraphics를 선언하면 되죠 예제를 살펴보겠습니다

사용자가 반려동물에 대한 추억을 만들고 공유할 수 있는 앱입니다 기본 텍스트 영역은 이미 서식 있는 텍스트 뷰이며 지속성 모델에서 서식 있는 텍스트 데이터로 뒷받침됩니다 따라서 Genmoji 지원이 기본적으로 활성화되고 제대로 작동합니다

SecureCoding, Pasteboard 같은 모든 시스템 직렬화 프레임워크가 NSAdaptiveImageGlyph를 기본 지원하게 업데이트되었기 때문이죠 실제로, 텍스트 콘텐츠가 이미 NSAttributedString으로 뒷받침돼 더 해야 할 작업이 없으므로 바로 개성을 표현할 수 있습니다! 다른 서식 있는 텍스트처럼 텍스트 뷰의 콘텐츠를 RTFD 데이터 객체로 직렬화하고 데이터베이스에 저장하면 됩니다 해당 콘텐츠를 다시 표시해야 할 경우 프로세스를 역으로 수행하여 이전에 저장한 데이터로부터 속성이 지정된 문자열을 생성하기만 하면 됩니다 정말 쉽습니다! 하지만 Genmoji는 유니코드가 아니라는 사실을 기억해야 합니다 텍스트 전용 항목에 사용하기에는 적절하지 않을 수 있습니다 예를 들면 이메일 주소 전화번호 등입니다 하지만 사용자가 생성한 블로그 게시물, 제목 메시지 같은 콘텐츠는 이미지 글리프에 대한 지원 덕분에 생생하게 표현될 수 있습니다 예를 들어 맞춤형 이모티콘으로 이 제목을 돋보이게 하고 싶지만 해당 데이터는 현재 일반 텍스트로 저장되며 백엔드 서버와 공유되죠 백엔드 서버에서는 웹 브라우저에 표시될 수 있죠 어떻게 하면 될까요? 일반 텍스트나 RTF 외 기타 데이터 저장소 사용 시 한 가지 솔루션은 현재 인라인 이미지 지원 방식으로 이미지 글리프도 처리하는 겁니다 예를 들어 유니코드 첨부 문자를 적절한 텍스트 위치에 일반 텍스트 데이터 필드의 이미지 글리프 식별자 참조와 함께 저장하고 해당 이미지를 이미지 저장소에 추가할 수 있습니다 contentIdentifier는 고유하고 안정적이기 때문에 이미 이 식별자를 사용해 이미지 글리프를 저장했다면 다시 저장할 필요가 없습니다 이 세션에 첨부된 코드에서 속성이 지정된 문자열을 분해하고 재구성하는 방법의 예를 확인할 수 있습니다 이러한 변경 사항을 활용해 제목에 Genmoji를 추가하고 기본 항목과 목록에 표시되는 것을 확인할 수 있습니다 제가 앞에서 언급했던 웹 인터페이스라면 어떨까요? 정말 쉽습니다 HTML에서 이미지를 표시하려면 앞서 사용했던 data-from-range로 RTFD로 변환하되 이번에는 HTML 문서 유형을 요청합니다 서로 호환되는 HTML이 생성되므로 Webkit 등 ’apple-adaptive-glyph’ 유형을 지원하는 첨단 엔진이 이미지를 텍스트와 함께 인라인으로 표시합니다 마치 표준 이모티콘처럼요 이미지 글리프를 지원하지 않는 엔진의 경우 이 대체 이미지가 대신 표시됩니다 여기에 나와 있는 alt 텍스트는 NSAdaptiveImageGlyph의 콘텐츠 설명에서 가져온 것으로 궁극적으로 브라우저에 표시되는 소스에 관계없이 적용됩니다 앱에서 통신 알림을 사용하는 경우 알림에 Genmoji와 기타 이미지 글리프를 포함할 수도 있습니다 새 UNNotificationAttributedMessageContext API를 사용해서요 푸시 알림의 경우 페이로드는 서식 있는 텍스트 표현을 포함해야 하며 여기에는 이미지 글리프가 포함될 수 있습니다 알림서비스 확장프로그램으로 서식 있는 텍스트 분석, 애셋 다운로드 속성이 지정된 본문 생성, 알림 콘텐츠 업데이트를 합니다 이미지 글리프를 포함하는 속성이 지정된 문자열에서 알림 메시지를 만들고 attributedContent로 전달하여 맥락을 생성하기만 하면 됩니다 그 맥락으로 요청을 업데이트하고 마지막으로 핸들러를 호출합니다 NSAdaptiveImageGlyph의 고급 사용을 살펴보기 전에 잠시 앱을 위해 중요한 호환성 고려 사항을 알아보겠습니다

함께 표시되는 텍스트처럼 이미지 글리프는 중요한 의미를 가지며, 제대로 전달되지 않으면 해당 의미가 손실 또는 변경되므로 지원되지 않는 맥락에서 대체 동작을 처리할 때 주의해야 합니다 이 중요한 정보가 누락되지 않는 것이 중요합니다 앱이 인라인 이미지를 지원하지 않는 경우 contentDescription의 텍스트 표현 사용을 고려해 보세요 더 근본적인 비호환성의 경우 지원되지 않는 시스템에선 문서를 열지 않는 것을 고려합니다

RTFD 형식의 이미지 글리프는 이전 버전과 호환되도록 인코딩돼 이미지 글리프를 인식 못하는 뷰 등 모든 서식 있는 텍스트 뷰와 호환됩니다 오래된 운영 체제에서 실행되는 이전 버전 앱 등 지원되지 않는 환경에서 RTF 문서를 공유하는 경우 이미지 글리프가 표준 텍스트 첨부로 자동으로 대체됩니다 서식 있는 텍스트를 지원하여 Genmoji를 시작하면 가장 간편하겠지만, 이미지 글리프는 타사 데이터 형식과 완전한 맞춤형 텍스트 엔진에서 완벽히 지원될 수 있습니다 모든 Apple 플랫폼에 걸쳐 텍스트 뷰, 콘텐츠 편집 가능한 WebView, SwitfUI 텍스트 등 기존 UI 텍스트 요소에서 이미지 글리프를 지원하는 것 외에 TextKit, CoreText 같은 기존 Apple 프레임워크로 제작된 맞춤형 텍스트 엔진은 업데이트된 텍스트 렌더링 API를 활용하여 Genmoji를 위한 맞춤형 솔루션을 제공합니다 맞춤형 조판 솔루션의 경우 CoreText는 NSAdadptiveImageGlyph를 적응형 이미지 제공자로 사용하는 메서드를 제공하며, 이에 대해 현재 서체의 지표에 따라 적절한 인쇄 경계를 쿼리할 수 있습니다 현재 맥락의 특정 지점에 이미지를 렌더링하는 방법도 제공합니다 어떻게 작동하는지 더 자세히 살펴보겠습니다 CTFontGetTypographicBoundsForAdaptiveImageProvider는 선 레이아웃에 필요한 지표를 반환하며, 여기에는 기준치에서 이미지 글리프의 원점 기준 고급 너비가 포함됩니다 드로우할 때가 되면 CTFontDrawImageFromAdaptiveImageProviderAtPoint가 해당 경계 내에 이미지를 배치합니다 그러면 모두 마무리됩니다

지금까지 모든 Apple 플랫폼에서 사용 가능한 이모티콘 경험의 흥미로운 변경 사항 중 일부를 간략히 살펴봤습니다 새 이모티콘 키보드, Genmoji를 사용한 맞춤형 이모티콘 생성 앱에서 NSAdaptiveImageGlyph를 사용해 표현력 풍부한 이미지를 지원하는 다양한 방법 등입니다 표준 서식 있는 텍스트 뷰를 사용하는 경우든, 완전한 맞춤형 조판 솔루션을 관리하는 경우든 최신 SDK를 확인하고 앱에서 Genmoji로 개성을 표현하는 새로운 환경을 얼마나 쉽게 구현할 수 있는지 알아보시기 바랍니다 시청해 주셔서 감사합니다!