SVG Emoji를 써보고 싶었습니다...

마스킷 프로젝트를 기획하면서 제일 처음에 생각했던 필요한 기능이었습니다.

'맛집에서 친구와 밥을 먹으면서 찍었던 사진들, 여행지를 소개하는 사진들에서 얼굴을 가리고 싶을 때 사용하면 좋겠다'

모든 이모지들을 이미지파일로 제공하기에는 무리가 있어서, OS별로 기본지원을 하는 기본 이모지 폰트를 사용하려고 했었는데 개발과정 중에 맥에서 쓰이고 있는 이모지가 SVG형태가 아닌 것을 알게 되었습니다.

이모지들을 SVG파일로 전체를 제공하는 방법 말고, 모두가 동일한 SVG 이모지를 쓸 수 있는 방법이 없을까?라는 생각을 하다가 구글 폰트에서 'Noto Color Emoji'를 보게 되었습니다. 이 이모지 폰트를 웹폰트로 제공하면 모든 문제를 해결할 수 있을 것 같아서 바로 적용을 해보았습니다.

처음에는 모든 이모지를 다 사용해보려고 했으나, 너무 많은 선택지를 주면 사용하기에 더 불편할 것 같아서 카테고리별로 자주 사용할 만한 이모지들로 골라서 데이터로 저장해 두고 이모지 패널에서 선택하도록 했습니다.

emojis 변수에 데이터를 담을 때는 시스템 기본적인 이모지를 이용해서 "\uD83D\uDE0A" 이렇게 코드로 보관하고, 이모지 선택 패널에서는 웹폰트를 이용해서 해당 부분을 랜더링 하게 했습니다.