1. 문제 상황

웹페이지에 '🥲' 이모티콘을 추가했는데 특정 컴퓨터에 네모 모양(ㅁ)으로 보이는 현상이 있었다.

2. 원인

알고보니 window 10에서 발생했고 window 11은 정상적으로 보였다.
링크에 보면 window 10 업데이트에 지원되지 않는다고 한다.

여기에도 보면 저 이모지는 window10에는 없고 다음 업데이트인 window11 2021에서 확인할 수 있다.

3. 해결방법

방법1. 해당 이모지를 이미지 파일로 저장 후 사용

• 장점
  • 빠른 해결 : img파일 추가후 <img/> 사용하면 끝
• 단점
  • 나중에 다른 이모지로 동일한 문제가 생길 경우 추가할 이미지가 늘어남
  • 이모지 이미지 디자인이 사용자 기기의 이모지 디자인과 다를 수 있음
    (이런식으로 사용자 기기의 이모지 디자인은 조금씩 다르다)
    

방법2. 이모지 폰트 적용 : Noto Color Emoji

• 장점
  • 빠른 해결 : <link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji" rel="stylesheet"> 추가 후 font-family 적용하면 끝
  • 웹페이지 내 모든 이모지에 해당 폰트를 적용하면 통일된 디자인의 이모지 사용 가능
• 단점
  • 이모지 이미지 하나 추가하는 것보다 폰트 받는 용량이 클 수 있음

방법2를 사용했다.