이모지 검색 및 복사

이모지 검색 및 복사 도구란?#

이모지는 단일 문자처럼 보이지만, 그 이면에서 대부분은 그렇지 않습니다. 웃는 얼굴 😀은 하나의 Unicode 코드 포인트이고, 빨간 하트 ❤️은 두 개(기본 하트에 더해 색이 있는 이모지로 강제 렌더링하는 변형 선택자), 중국 국기 🇨🇳은 두 개의 지역 표시 문자가 붙어 있습니다. 이모지 자체가 필요할 때는 문제가 안 됩니다. 글리프를 붙여넣으면 그만이니까요. 하지만 문서를 위한 코드 포인트, 웹 페이지를 위한 HTML 엔티티, 문자열 리터럴을 위한 JavaScript 이스케이프, 또는 content: 규칙을 위한 CSS 이스케이프가 필요해지는 순간, UTF-16 단위로 자르는 단순한 도구들이 손상된 서러게이트 절반을 만들어냅니다.

이 페이지는 그 모든 것을 올바르게 처리하는 검색 가능한 이모지 카탈로그입니다. 언어로 이름이나 키워드로 검색하고, 아홉 개 카테고리를 돌아보고, 아무 이모지나 클릭해서 5가지 형식 중 하나로 복사합니다. 글리프, 코드 포인트, HTML, JavaScript, 또는 CSS. 각각은 글리프를 코드 포인트 단위로 걸어서 생성되므로 ❤️와 🇨🇳이 올바르게 나옵니다.

사용 방법#

레이아웃은 왼쪽의 사이드바(검색 + 카테고리)와 오른쪽의 그리드 + 세부 정보 패널입니다.

1. 이모지를 찾으세요. 검색 상자에 입력하거나 사이드바의 카테고리를 클릭합니다(표정과 감정, 사람과 신체, 동물과 자연, 음식과 음료, 활동, 여행과 장소, 사물, 기호, 국기). 검색은 해당 언어의 이름과 키워드에 매칭하고, 영어 이름과 코드 포인트에도 매칭하므로 heart나 1F600이 어떤 로케일에서도 작동합니다.
2. 그리드의 이모지를 클릭하세요. 그리드 아래의 세부 정보 패널이 글리프, 현지화된 이름, Unicode 버전으로 채워집니다.
3. 필요한 형식으로 복사하세요. 세부 정보 패널은 5개의 복사 버튼을 제공합니다.
   • 이모지 — 글리프 자체, 채팅, 문서 또는 디자인 도구용.
   • 코드포인트 — U+... 형식(여러 개일 때는 공백으로 연결), 문서 또는 Unicode 조회용.
   • HTML — 10진 숫자 문자 참조, 날것의 HTML에 붙여넣기용.
   • JS — ES2015 중괄호 이스케이프, JavaScript 또는 TypeScript 문자열 리터럴용.
   • CSS — CSS 이스케이프, content: 또는 ::after 규칙 안에서 사용용.

주요 특징#

• 5가지 복사 형식, 클릭 한 번에 하나씩. 글리프, 코드 포인트, HTML/JS/CSS 이스케이프 형식 사이의 수동 변환 없이, 모든 이모지가 5가지 모두로 가능합니다.
• 다중 코드 포인트 이모지에서 정확. 이스케이프는 UTF-16 단위가 아니라 Unicode 코드 포인트 단위로 글리프를 순회하여 생성됩니다. 빨간 하트 ❤️는 깨진 서러게이트 쌍이 아니라 깨끗한 \u{2764}\u{FE0F}를 만듭니다.
• 언어를 인식하면서도 언어를 가로질러 작동하는 검색. 이름과 키워드는 현지화되지만, 영어도 항상 색인되며, 날것의 코드 포인트도 함께요. 그래서 smile, 현지화된 단어, 또는 1F600이 모두 같은 이모지로 향합니다.
• 아홉 카테고리. 표준 Unicode 이모지 카테고리로, 사이드바에 대표 글리프가 있어 검색어가 없을 때 돌아볼 수 있습니다.
• 키보드와 스크린 리더 친화적. 그리드는 방향키 탐색이 가능한 목록 상자이고, 세부 정보 패널은 이동할 때 이름과 코드 포인트를 알려주는 aria-live 영역입니다.

실제 예시#

빨간 하트 ❤️를 5가지 형식 모두로 복사해 보세요. 기호 카테고리에서 클릭하거나(또는 heart 검색), 세부 정보 패널이 다음을 보여줍니다.

• 이모지: ❤️
• 코드포인트: U+2764 U+FE0F
• HTML: ❤️
• JS: \u{2764}\u{FE0F}
• CSS: \2764 \FE0F

코드 포인트가 하나가 아니라 둘인 것을 주목하세요. U+2764는 기본 하트(이모지가 존재하기 전으로 거슬러 올라가는 평문 텍스트 문자)이고, U+FE0F는 변형 선택자-16, 즉 렌더러에게 “선행 문자를 검은 텍스트 글리프가 아니라 색이 있는 이모지 형태로 표시하라”고 알리는 것이 유일한 임무인 너비 0 코드 포인트입니다. 선택자를 빼면 일부 플랫폼은 텍스트 형태의 하트를 보여주고, 유지하면 빨간 이모지를 얻습니다. 여기 모든 형식이 두 코드 포인트를 모두 보존하며, 그래서 HTML 엔티티를 페이지에 붙여넣어도 색이 있는 하트가 렌더링됩니다.

반면 웃는 얼굴 😀은 단일 코드 포인트(U+1F600)입니다. 그 형태는 😀, \u{1F600}, \1F600으로 접히며, 인코딩할 코드 포인트가 하나뿐이므로 이스케이프도 하나씩입니다. 둘 사이의 차이가 바로 (하나의 글리프가 하나의 코드 포인트와 같다고 가정하지 않고) 코드 포인트를 걷는 도구가 중요한 이유입니다.

FAQ#

제가 하려는 작업에 어느 형식을 복사해야 하나요?#

채팅 메시지, 문서 또는 디자인 목업에는 이모지를 복사하세요. 글리프는 보편적입니다. 특정 문자를 참조하는 기술 문서나 버그 보고서에는 코드포인트(U+1F600)를 복사하세요. 날것의 HTML 소스에는 HTML(😀)이 인코딩 문제로 망가질 수 없어 가장 안전합니다. JavaScript 또는 TypeScript 문자열에는 JS(\u{1F600}). CSS content: 값에는 CSS(\1F600).

빨간 하트가 왜 두 개의 코드 포인트를 보여주나요?#

❤️가 단일 문자가 아니라 시퀀스이기 때문입니다. 기본 코드 포인트 U+2764는 텍스트 하트이고, U+FE0F는 이모지 표시 스타일을 요청하는 변형 선택자입니다. 일부 이모지는 더 나아가 너비 0 결합자로 여러 글리프를 하나로 합칩니다(가족 이모지가 이렇게 만들어집니다). 국기는 항상 지역 표시 문자의 쌍입니다. 이 도구는 이스케이프를 생성하기 전에 코드 포인트 단위로 글리프를 걸으므로 시퀀스의 모든 코드 포인트가 보존됩니다.

\u{1F600}이 아니라 😀인 이유는?#

둘 다 같은 이모지의 유효한 JavaScript 표현이지만, 작동 방식이 다릅니다. 😀은 서러게이트 쌍입니다. 함께 쓰일 때만 의미가 있는 두 개의 UTF-16 코드 단위로, U+FFFF 너머의 문자를 인코딩하는 오래된 방법입니다. \u{1F600}은 ES2015 코드 포인트 이스케이프로, 실제 코드 포인트를 직접 쓰며 읽기 훨씬 쉽습니다. 이 도구는 모호하지 않고 현대적이어서 코드 포인트 형태를 내보냅니다. 서러게이트 형태가 필요하면 코드 포인트 값이 무엇을 변환해야 하는지 정확히 알려줍니다.

휴대전화와 컴퓨터에서 이모지가 다르게 보여요. 왜 그런가요?#

Unicode는 각 이모지가 무엇을 의미하는지를 정의하지만, 각 플랫폼(Apple, Google, Microsoft, Samsung)이 자신만의 아트워크를 그리므로, 같은 코드 포인트가 플랫폼마다 다른 그림으로 렌더링됩니다. 코드 포인트, HTML 엔티티, 모든 이스케이프는 플랫폼에 걸쳐 동일합니다. 다른 것은 픽셀뿐입니다. 정확한 시각적 일관성이 중요하다면(예: 브랜드 캠페인), 플랫폼 글꼴에 의존하지 말고 자체 이모지 이미지 세트를 배포하세요. 대부분의 용도에서는 플랫폼의 네이티브 렌더링이 원하는 것입니다.