[WWDC24] Genmoji로 앱에서 더욱 풍부한 표현 선보이기
[WWDC24] Genmoji로 앱에서 더욱 풍부한 표현 선보이기
Whats' New
- New Emoji keyboard
- Genmoji
- NSAdaptiveImageGlyph
Intro
Express yourself
- 이모티콘을 사용하여 앱의 표현력을 향상 시킬 수 있는 방법
Emogi enhancements
- 이모티콘 환경에 대한 최신 업데이트
NSAdaptivelmageGlyph
- 맞춤 이모티콘전송 API 소개
Adopting in your app
- 우리 앱에 얼마나 쉽게 적용하는지 소개
Compatibility
- 호환성 고려사항
Advanced usage
- 사용자 정의 텍스트 렌더링에 대한 일부 고급 사용 사례
Express yourself with emoji
Expressive
- 표현력 매우 풍부함
Versatile
- 여러조합으로 가능
Playful
- 텍스트 이기 떄문에 텍스트와 결합하면 더욱 강해짐
Enhances text
- 이미지와 달리 이모티콘은 문장의 일부이며 주변 텍스트에 맞게 표현 조정
Emogi enhancements
올해 애플은 이모티콘 더욱 향상시키기 위해 다양한 업데이트를 선보일 예정
standard emoji > 우리가 기존에 사용하던 이모지
Personalized content
- Sticker
- Memoji
- Animoji
- Genmoji (NEW)
기존 이미지는 실제 이미지가 아니라 일반 텍스트로 전송된 표준화된 유니코드 문자 목록
- 기존이미지는 다른 텍스트 콘텐츠와 마찬가지로 적절한 이미지를 자체 글꼴로 렌더링하는 것은 디바이스에 달려 있음.
- 반면 Genmoji같은 개인화 된 이미지는 유니코드 텍스트 문자로 설명할 수 없는 고유한 rasterized(래스터) 된 비트맵.
NSAdaptivelmageGlyph
Genmiji 및 기타 개인화된 이미지를 사용하는 새로운 API.
NSAdaptivelmageGlyph는 여러 해상도의 정사각형 가로세로비(종횡비)의 표준 이미지 형식으로 구동되며, 전역적으로 고유하고 안정적인 식별자, 접근성(Acessibility)에 사용할 수 있는 컨텐츠에 대한 설명, 적절한 레이아웃과 배치를 허용하는 정렬 측정항목과 같은 메타데이터로 강화
이미지를 사용하여 일반 텍스트와 함께 사용하고 서식을 저장할 수 있음.
Genmoji를 단독으로 사용하거나 텍스트와 결합하여 사용 가능.
서식을 저장하고, 복사하고, 붙여넣고, 스티커로 보낼 수 있음.
서식 있는 텍스트를 지원할 수 있는 곳이라면 어디에서나 Genmoji 사용 가능와 표현력이 풍부한 모든 이미지를 지원.
Adopting in your app
이제 애플리케이션에서 Genmoji를 지원하는 것이 얼마나 쉬운지 설명
기본적으로 TextView에서 지원됨.
따라서 앱이 이미 서식 있는 텍스트를 지원하는 경우 supportAdaptiveImageGlyph를 활성화하는 것만으로 간단하게 시작 가능.
iOS에서 텍스트 뷰에 이미 이미지를 지원하는 붙여넣기용 페이스트 구성 사용 또는 대상 작업이 있는 경우 해당 구성을 통해 기본적으로 Genmoji 및 적응형 이미지 글리프를 지원.
macOS에서는 텍스트 뷰에 importsGraphics를 선언하는 것과 동일한 작업을 수행.
모든 시스템 직렬화 프레임워크가 기본적으로 NSAdaptivelmageGlyph를 지원하도록 업데이트 되었기 때문에 잘 작동함.
실제로, 텍스트 콘텐츠가 이미 NSAttributedString에 의해 지원되고 있다면 따로 세팅할 필요 없음
-> 알아서 표현됨.
텍스트 뷰의 내용을 RTFD 데이터 객체로 직렬화하고 이를 DB에 저장.
콘텐츠를 다시 표시해야 할 경우 프로세스를 거꾸로 진행하고, 이전에 저장한 데이터에서 attribedString 문자열 생성해서 저장.
하지만 쉬운만큼 Genmoji는 유니코드가 아님
> ❌ 이메일 주소, 전화번호 등 텍스트 전용으로 된 항목과 함께 사용하는데 적합하지 않을 수 있음.
> ✅ 블로그 게시글, 제목, 메시지 같은 사용자 생성 콘텐츠에는 이미지 글리프 지원을 통해 실제로 생생하게 표현할 수 있는 종류의 컨텐츠임.
아래의 케이스를 생각해보기
- 제목을 개인화 된 이모티콘으로 돋보이게 만들고 싶음.
- 하지만 데이터는 현재 일반 텍스트로 저장되어 결국 웹 브라우저에 표시될 수 있는 벡엔드 서버와 공유될 것임.
우린 어떻게 해야 할까?
일반 텍스트 또는 기타 비RTF 데이터 저장소를 사용할 때 한가지 솔루션은 현재의 인라인 이미지를 이미 지원하는 것과 동일한 방식으로 이미지 문자 모양을 처리하는 것.
> RTF파일이란? 서식이 있는 텍스트 형식
예를 들면, 일반 텍스트 데이터 필드의 이미지 문자 식별자에 대한 참조와 함께 적절한 텍스트 위치에 유니코드 첨부 문자를 저장하고, 이미지를 이미지 저장소에 추가 할 수 있음.
ContentIdentifier는 고유하고 안정적이므로 해당 아이디를 사용하여 ImageGlyph를 이미 저장한 경우 다시 저장할 필요 없음.
해당 세션에 첨부된 코드를 통해 이러한 특성을 가진 문자열들을 부해하고 재구성하는 방법에 대한 예를 찾을 수 있음.
> 위의 제안을 통해 Genmoji를 사용할 수 있음.
하지만 웹 인터페이스도 대응해야 함.
이미지를 HTML 형식으로 표시하려면 이전에 RTFD로 변환하는데 사용한 것과 동일한 데이터 처리 방법을 사용.
해당 예제 케이스에서는 HTML DocumentType.html을 사용할 예정.
이는 상호 호환되는 HTML을 내보내므로 Webkit과 같은 "apple-adaptive-glyph" type을 지원하는 고급(?) 엔진은 이미지를 표준 이모티콘인 것처럼 텍스트와 함께 인라인으로 표시.
이미지 글리프를 지원하지 않는 엔진의 경우엔 alt = "dot in a spacesuit"가 대체 이미지로 대응된다.
대체 텍스트는 NSAdaptiveImageGlyph의 콘텐츠 description에서 가져온 것이며 최종적으로 브라우저에 표시되는 소스에 관계없이 적용된다.
앱이 INSendMessageIntent 사용하는 경우
새로운 "UNNotificationAttibuted MessageContext API"를 사용하여 알림에 Genmoji 및 기타 이미지 문자를 포함할 수 있음.
푸시 알림의 경우 페이로드에는 이미지 글리프를 포함할 수 있는 서식 있는 텍스트 표현만 포함하면 된다.
우선 해당 rich text(서식이 있는)가 있는 parse(분석)하고 리소스를 다운하고 속성이 저장된 attibuted body(본문)을 만들고, 알림 콘텐츠를 업데이트 하려면 Notification Service Extension을 사용하는 것이 좋음.
이미지 글리프가 포함된 속성 문자열에서 알림 메시지를 생성, 이를 attributeContent로 전달하여 컨텍스트를 생성하기만 하면 됨.
해당 컨텍스트로 요청을 업데이트하고 마지막으로 핸들러를 호출. nsadaptivelmageglyph의 몇 가지 고급 사용법을 살펴보기 전에
Compatibility
몇 가지 고급 사용법을 살펴보기 전에 호환성에 대해서 알아보기.
함께 표시되는 텍스트와 마찬가지로 이미지 글리프는 제대로 전달되지 않을 경우 손실되거나 변경될 수 있는 중요한 의미론적 의미를 전달.
지원되지 않는 컨텍스트에서 대체 동작을 처리할 때는 주의를 기울여야 함.
중요한 정보를 단순히 삭제하지 않는 것이 중요함.
앱이 인라인 이미지를 지원하지 않는 경우 contentDescription에서 가져온 텍스트 표현을 그대로 사용하는 것이 좋음.
보다 근본적인 비호환
성을 해결하려면 지원되지 않는 시스템에서 문서를 아예 열지 않는 것이 좋음.
RTFD 형식으로 저장된 이미지 문자는 이미지 문자를 인식하지 못하는 항목을 포함하여 모든 서식이 있는 텍스트 콘텐츠와 역호환 되도록 인코딩 되어 있음.
이전 운영체제에서 실행되는 앱(호환되지 않는 앱)에서 RTF 문서를 공유하는 경유 이미지 글리프는 자동으로 표준 텍스트 파일로 대체된다.
콘텐츠 편집이 가능한 WebView 및 SwiftUI 텍스트를 포함한 모든 Apple 플랫폼에서 기존 UI 텍스트 및 요소의 이미지 문자 모양을 지원하는 것 외에도 TextKit 및 CoreText와 같은 기존 Apple 프레임워크로 구축된 사용자 정의 텍스트 엔진은 업데이트 된 텍스트 렌더링 API를 활용해 제공할 수 있음. Genmoji를 위한 맞춤형 솔루션 제공 가능.
CoreText는 현재 글꼴의 메트릭을 기반으로 적절한 인쇄 범위를 쿼리할 수 있는 적응형 이미지 Provider로 NSAdaptiveImageGlyph를 사용하는 방법을 제공.
또한 현재 컨텍스트의 특정 지점에서 이미지를 렌더링하는 방법도 제공합니다.
CTFontGetTypographicBoundsFroAdaptiveImageProvider는 기준선의 이미지 글리프 원점을 기준으로 너비를 포함하여 선 레이아웃에 필요한 측정항목을 반환.
그릴때가 되면 point를 경계선에 배치