[iOS 12] 플랫 이모티콘 EmojiOne을 iOS에서 사용해보기

iOS 표준 이모티콘을 이런 느낌의 플랫 이모티콘으로 바꿉니다.


iOS 표준 이모티콘
EmojiOne 이모티콘






이 이모티콘은 이모티콘 능선에 의해 무료로 제공됩니다.
iOS 12 이상에서는 EmojiOne을 간단하게 앱에 통합할 수 있는 것 같습니다.

iOS 12에서 OpenType-SVG를 지원한 것 같습니다.

iOS 12부터 OpenType-SVG 형식의 컬러 글꼴을 지원한 것 같습니다.
UIKit과 TextKit에 대한 공식 발표는 찾을 수 없었습니다.

OpenType SVG

Added support for defining letterforms in OpenType fonts using SVG.

WebKit은 CoreText에 의존하는 것 같기 때문에, 어쩌면 CoreText 레벨에서의 변경에 의해, TextKit에도 영향이 있을지도 모릅니다.

그런데 OpenType-SVG는

OpenType-SVG는 OpenType 글꼴의 글자의 전부 또는 일부가 SVG(Scalable Vector Graphics) 아트웍으로 표현되는 글꼴 형식입니다. 이렇게 하면 한 글자로 여러 색상과 그라데이션을 표시할 수 있습니다. 이러한 기능을 통해 OpenType-SVG 글꼴을 "컬러 글꼴"이라고도 합니다.

What’s New in Safari – Adobe

라는 것으로, 1 문자에 복수의 칼라를 표시할 수 있는 폰트 같습니다.

EmojiOne 글꼴을 앱에 통합

앱에 사용자 정의 글꼴을 번들하여 EmojiOne을 사용할 수 있습니다.
먼저 EmojiOne 글꼴을 다운로드합니다.

OpenType-SVG 컬러 글꼴 에서 Open Type Font: emojione-svg.otf 링크에서 다운로드합니다.

EmojiOne SVG-based Color Fonts

다운로드한 emojione-svg.otf를 Xcode 프로젝트로 드래그 앤 드롭합니다.
다음과 같이 확인하여 리소스에 추가합니다.



이제 앱 내에서 EmojiOne을 사용할 수 있습니다.

인터페이스 빌더에서 사용

글꼴을 다음과 같이 지정합니다.

Font: Custom

Family: EmojiOne

코드에서 사용할 수 없습니까?

PostScript 이름을 지정하여

label.font = UIFont(name: "EmojiOneColor", size: 38)

또는 글꼴 패밀리를 지정하여

label.font = UIFont(name: "EmojiOne", size: 38)

이것으로 움직일 것이다.
라고 생각했습니다만, 왠지 시스템 폰트에 폴백해 버렸습니다.
그래서 이번에는 코드에서 글꼴 설정을 포기했습니다.

iOS 11에서 실행하면?

OpenType-SVG는 컬러 벡터 데이터뿐만 아니라 흑백 벡터 데이터도 가지고 있습니다.
iOS 11의 경우 흑백 글꼴로 폴백하는 것 같습니다.


iOS 12
iOS 11

EmojiOne 사용권 계약 정보

크리에이티브 커먼즈 라이센스입니다.
링크를 붙여서 사용할 수 있습니다.

EmojiOne's graphics are free to use for any project, commercial or personal, under a free culture Creative Commons License (CC-BY 4.0). Proper attribution (link back) is required for the rights to use the emoji in commercial projects.

이 그림은 에 의해 무료로 제공되고 있는 것을 이용했습니다.