이모지 유니코드 표 한눈에 보기 - 자주 쓰는 코드 포인트와 실전 활용법
개발자와 콘텐츠 제작자를 위한 이모지 유니코드 코드 포인트 카테고리별 정리. 복사해서 바로 쓸 수 있는 표와 입력 방법까지 한번에 확인하세요.
메신저에서 매일 쓰는 이모지가 사실 고유한 번호를 가진 문자라는 사실, 알고 계셨나요? 웹 개발이나 콘텐츠 작업을 하다 보면 이모지를 직접 코드로 입력해야 할 때가 생깁니다. 그런데 막상 필요한 이모지의 코드 포인트를 찾으려면 생각보다 번거롭습니다. 이 글에서는 이모지 유니코드 표를 카테고리별로 정리하고, 실제로 어떻게 활용하는지까지 다룹니다.
유니코드와 이모지의 관계
유니코드(Unicode)는 전 세계 모든 문자에 고유한 번호를 부여하는 국제 표준입니다. 현재 유니코드 16.0 기준으로 약 15만 개 이상의 문자가 등록되어 있으며, 이모지도 이 체계 안에 포함됩니다.
이모지는 유니코드의 특정 블록에 배정된 문자입니다. 예를 들어 하트 모양은 U+2764라는 코드 포인트를 가지고 있고, 웃는 얼굴은 U+1F600입니다. 이 번호는 어떤 운영체제, 어떤 브라우저에서든 동일하게 인식됩니다.
- BMP(Basic Multilingual Plane): U+0000~U+FFFF 범위. 초기 이모지 일부가 여기 포함됩니다
- SMP(Supplementary Multilingual Plane): U+10000~U+1FFFF 범위. 대부분의 이모지가 이 영역에 있습니다
- 코드 포인트 표기법: U+ 뒤에 16진수를 붙여 표현합니다 (예: U+1F4A9)
자주 쓰는 이모지 유니코드 표
아래는 실무에서 자주 사용되는 이모지를 카테고리별로 정리한 이모지 유니코드 표입니다. HTML 엔티티와 CSS 코드도 함께 표기했으니 용도에 맞게 복사해서 사용하세요.
| 카테고리 | 이모지 | 이름 | 유니코드 | HTML 엔티티 |
|---|---|---|---|---|
| 표정 | 😀 | 활짝 웃는 얼굴 | U+1F600 | 😀 |
| 표정 | 😢 | 우는 얼굴 | U+1F622 | 😢 |
| 표정 | 😍 | 하트 눈 얼굴 | U+1F60D | 😍 |
| 손동작 | 👍 | 엄지 척 | U+1F44D | 👍 |
| 손동작 | 👋 | 흔드는 손 | U+1F44B | 👋 |
| 기호 | ❤ | 빨간 하트 | U+2764 | ❤ |
| 기호 | ⭐ | 별 | U+2B50 | ⭐ |
| 기호 | ✅ | 체크 표시 | U+2705 | ✅ |
| 기호 | ⚠ | 경고 | U+26A0 | ⚠ |
| 날씨 | ☀ | 태양 | U+2600 | ☀ |
| 날씨 | 🌧 | 비구름 | U+1F327 | 🌧 |
| 화살표 | ➡ | 오른쪽 화살표 | U+27A1 | ➡ |
| 화살표 | 🔄 | 반시계 화살표 | U+1F504 | 🔄 |
| 사물 | 💻 | 노트북 | U+1F4BB | 💻 |
| 사물 | 📱 | 스마트폰 | U+1F4F1 | 📱 |
위 표는 전체 이모지의 극히 일부입니다. 유니코드 16.0 기준 등록된 이모지는 총 3,790개이며, 피부색 및 성별 변형을 포함하면 약 5,000개 이상의 조합이 존재합니다.
이모지 유니코드 입력 방법
이모지 유니코드 표에서 코드를 찾았다면, 실제로 입력하는 방법도 알아야 합니다. 사용 환경에 따라 입력 방식이 달라집니다.
HTML에서 입력
웹 페이지에서는 두 가지 방식으로 이모지를 넣을 수 있습니다.
- HTML 엔티티:
😀형태로 16진수 코드 포인트를 입력합니다 - 직접 붙여넣기: 이모지 문자를 그대로 HTML 소스에 넣어도 UTF-8 인코딩이라면 정상 표시됩니다
CSS에서 입력
CSS의 content 속성에서는 백슬래시 뒤에 코드 포인트를 적습니다. 예를 들어 content: '\1F600';으로 웃는 얼굴을 표시할 수 있습니다.
JavaScript에서 입력
자바스크립트에서는 \u{1F600} 형태의 유니코드 이스케이프 시퀀스를 사용합니다. ES6 이상에서 지원되며, BMP 바깥 문자도 중괄호 표기법으로 처리할 수 있습니다.
이모지 유니코드를 다룰 때 가장 흔한 실수는 서로게이트 페어를 고려하지 않는 것입니다. U+FFFF를 초과하는 이모지는 UTF-16에서 2개의 코드 유닛으로 표현되므로, JavaScript의.length가 2를 반환합니다. 문자열 처리 시Array.from()이나 스프레드 연산자를 사용하면 이 문제를 피할 수 있습니다.
이모지를 URL에 사용할 때 주의점
이모지를 URL 파라미터나 경로에 포함시키는 경우가 늘고 있습니다. SNS 공유 링크나 마케팅 캠페인 URL에 이모지를 넣으면 눈에 띄는 효과가 있기 때문입니다. 하지만 이모지는 URL에서 퍼센트 인코딩 과정을 거쳐야 합니다.
예를 들어 U+1F600 이모지는 UTF-8로 F0 9F 98 80이라는 4바이트로 변환되고, 이것이 URL에서는 %F0%9F%98%80으로 표기됩니다. 이 변환 과정이 번거롭다면 URL 인코더 같은 온라인 도구를 활용하면 이모지를 붙여넣기만 해도 인코딩된 결과를 바로 확인할 수 있습니다.
- 퍼센트 인코딩: 이모지의 UTF-8 바이트를 %XX 형태로 변환합니다
- Punycode: 도메인에 이모지를 사용할 경우 xn-- 접두사가 붙는 Punycode로 변환됩니다
- 호환성 주의: 일부 구형 서버나 CDN은 URL 내 이모지를 제대로 처리하지 못할 수 있습니다
플랫폼별 이모지 호환성 문제와 해결
같은 유니코드 코드 포인트라도 플랫폼마다 이모지의 모양이 다릅니다. Apple, Google, Microsoft, Samsung은 각자 고유한 이모지 디자인 세트를 사용합니다. 코드 포인트 U+1F600이 가리키는 문자는 동일하지만, 렌더링 결과는 제조사마다 미묘하게 다릅니다.
주요 호환성 이슈
| 문제 유형 | 원인 | 해결 방법 |
|---|---|---|
| 이모지가 네모로 표시 | 해당 유니코드 버전 미지원 | 대체 텍스트(alt text) 함께 제공 |
| 디자인이 다르게 보임 | 플랫폼별 글리프 차이 | Twemoji 등 통일된 이모지 폰트 사용 |
| ZWJ 시퀀스 미지원 | 복합 이모지 미구현 | 개별 이모지로 분리하여 표시 |
| 피부색 변형 미표시 | 수정자(modifier) 미지원 | 기본 노란색 이모지 사용 |
웹 프로젝트에서 이모지 표시를 통일하고 싶다면 Twitter에서 오픈소스로 공개한 Twemoji 라이브러리를 사용하는 것이 좋습니다. CDN으로 간단히 불러올 수 있고, SVG 기반이라 어떤 해상도에서도 선명하게 표시됩니다.
이모지 유니코드 표 활용 시 체크리스트
- HTML 문서의
<meta charset="UTF-8">선언을 반드시 확인하세요 - 데이터베이스 컬럼이
utf8mb4인코딩인지 점검하세요. 일반utf8은 BMP 바깥 이모지를 저장하지 못합니다 - JSON으로 이모지를 전송할 때는
\uD83D\uDE00같은 서로게이트 페어 표기도 유효합니다 - 이메일 제목에 이모지를 넣을 경우 스팸 필터에 걸릴 확률이 약 3-5% 높아진다는 점을 참고하세요
이모지 유니코드 표는 단순한 코드 목록이 아니라 디지털 커뮤니케이션의 기반입니다. 당장 해야 할 일은 두 가지입니다. 자주 쓰는 이모지의 코드 포인트를 즐겨찾기해 두는 것, 그리고 프로젝트의 데이터베이스 인코딩이 utf8mb4로 설정되어 있는지 확인하는 것입니다.
