이모지를 사이트 디자인 요소로 사용할 경우 OS 마다 다르게 표현되는 단점이 있어서 이런 경우 트위터의 이모지 세트를 사용할 수 있는 방법을 찾았습니다. (개인적으로는 윈도우 이모지가 제일 마음에 드는데 웹폰트가 없더군요)
https://github.com/twitter/twemoji
사용법은
1. 헤드 태그에 추가
<head>
<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous">
</script>
</head>
2. 바디 태그 바로 아래에 추가
<script> + document.getElementsByTagName("body")[0].innerHTML=twemoji.parse(document.getElementsByTagName("body")[0].innerHTML)
</script>
(슬프게도 저는 바디 태그 바로 아래가 어딘지 못찾아서 레이아웃 적당히 말미에 넣었더니 되긴 되는데 일부 애드온이 미출력)
그리고 2단계까지만 적용하면 이모지 크기가 굉장히 커서 조정이 필요합니다.
img.emoji { height: 1.1em; width: 1.1em; margin: 0 .05em 0 .1em; vertical-align: -0.1em; }
--
장점은 OS나 브라우저를 가리지 않고 일관된 이모지 표현
단점은 관리자가 아닌 일반 사용자가 입력한 이모지와 출력되는 이모지가 다르겠죠.
