유니코드 문자(이모지;Emoji) 활용하기

시대가 많이 바뀌었다.

ASCII, UTF-8을 넘어 이제는 UTF-8 MB4(Multi-Byte 4)라는 확장 UTF-8까지 광범위하게 사용되고 있다.

그런데, 남들이 사용하는 걸 보고 "어~" 하기만 하고 실제 쓰진 않았다.

(블로그 서명에는 써먹었지만... 오래전에 뭣도 모르고 썼고.)

막상 쓰려고 보니, 뭘 어디다가 어떻게 써야 하는지, 무슨 의미가 있는지 애매한 부분이 많았다.

그래서 정리해 봤다.

 

우선, 시작 단계에서 흥미를 끌기 위해서 접하는 사이트

>> 참조1: https://emojipedia.org/

📙 Emojipedia — 😃 Home of Emoji Meanings 💁👌🎍😍

원하는 이모지를 검색해서 찾을 수 있게 해 준다. 예를 들어 마침 장마철이라 비가 오니 "rain"으로 검색해 봤다. 혹시 달리는 사람 모양이라든가, 달리기에 관계된 이모지를 찾고 싶다면 "run"으로 검색해 보면 관련 이모지가 나오는 식.

아무튼 "rain"으로 나온 결과에서 두 번째 우산 모양을 선택해 봤다.

>> 참조2-1: https://emojipedia.org/umbrella-with-rain-drops/

☔ Umbrella with Rain Drops Emoji

페이지 가운데 있는 복사하기(Copy)를 눌러 바로 활용할 수도 있다. 웹 브라우저 주소창, 새 게시물 작성창, 메모장, 심지어 Visual Studio 코드 편집기 등 유니코드를 입력할 수 있는 거의 모든 곳에 바로 사용 가능하다. 그림 모양 그대로 붙여넣어진다! 

이렇게: [☔]

위 페이지에도 나와 있듯 브라우저 별로, 지원하는 도구 별로 모양은 천차만별이다. 당장 크롬과 IE만 비교해봐도 보이는 모양이 다른 것처럼. (이 페이지를 두 브라우저로 각각 띄워서 비교해 보면 확실히 알 수 있다.)

그런데, 그림 모양 그대로 복사해서 입력하는 방식이 아니라, 코드 형태로 입력할 수 있게 하는 방법을 찾고 싶을 때가 있다. 즉, 유니코드를 입력할 수 없는 환경에서도 입력해서 표시할 수 있도록. 그럴 때는 아래에 있는 코드포인트(Codepoints) 부분의 링크를 눌러보면 된다.

>> 참조2-2: https://emojipedia.org/emoji/%E2%98%94/

☔ Umbrella with Rain Drops Emoji

비오는 우산 모양은 U+2614라는 코드값이란다. 읭? 그게 뭐냐고?

비오는 우산 모양에 해당하는 유니코드값이 16진수로 2614라는 뜻이다... 그래서 어쩌라고?

프로그래밍 등에서 유니코드 문자열을 출력하려고 할 때는 "\u2614"로(utf-16 형식이다... 지원 안되면 표시x),

HTML 웹 페이지로 표시하려고 할 때는 "☔"로 쓰면 된다는 뜻이지 뭐. 자, 실제로 

이렇게: [☔]

(위 노란색으로 표시된 두 부분의 소스코드 보기를 눌러보면 다른 것을 알 수 있을 것이다. 티스토리가 입력한 대로 놔두진 않고 제 맘대로 다 유니코드 문자로 바꿔 버려서 비교가 제대로 안 된다. ㅉㅉㅉ. 암튼.)

 

어? 그런데, 위 링크 주소에서도 보이듯이, URL에 입력된 우산 모양은 주소 붙여넣기를 하니 희한하게도 "☔"에서 "%E2%98%94"로 바뀌어 버렸다. 이게 무슨 조화?

... 는 무슨, 걍 UTF-8 코드로 인코딩 된 것이 한번 더 URL 인코딩(Percent-encoded) 된 것뿐이다.

UTF-8 인코딩에 대한 상세 내용은 위키를 참조하면 되지만, 전문가들 영역이라 여기서는 생략...

걍 적당히 사용할 수 있을 줄만 알면 된다. 아래 유니코드 변환 사이트를 이용하면 쉽게 변환 가능하기도 하고.

>> 참조: https://www.branah.com/unicode-converter

Unicode Converter - Decimal, text, URL, and unicode converter

(맨 위 Unicode text 부분에 우산 모양을 붙여 넣으면 각 코드값이 자동으로 다 계산되어 나온다. 쉽다.)

 

여기서 끝이면 좋겠지만, 조금 더 보자.

다음으로, 피자 모양을 찾기 위해 "pizza"를 검색해 봤다.

>> 참조3-1: https://emojipedia.org/pizza/

🍕 Slice of Pizza Emoji

페이지 가운데 있는 복사하기(Copy)를 눌러 이렇게 [🍕] 바로 활용할 수도 있고, 아래에 있는 코드포인트(Codepoints) 부분의 링크를 눌러서 코드를 확인한 다음, 피자 모양에 해당하는 U+1F355라는 코드값을 활용해도 된다.

>> 참조3-2: https://emojipedia.org/emoji/%F0%9F%8D%95/

🍕 Slice of Pizza Emoji

 

그런데,

프로그래밍 등에서 유니코드 문자열을 출력하려고 할 때는 "\u1f355"로 쓰면 될 것 같지만, 안타깝게도 안 된다.

UTF-16으로 표시 가능한 문자는 2바이트까지다, 당연하지만.

0x1F355는 2바이트의 최대값인 0xFFFF를 넘어가는 범위라 UTF-16 문자로도 두 개로 표현해야 하고... 생성 방식은 복잡하다. 걍 여기서는 "\uD83C\uDF55"더라... 정도로만 알고 넘어가자.

문자 한 개로 표현하려면 UTF-32를 써야 한다... "u+0001F355"가 되겠다.

HTML 웹 페이지로 표시하려고 할 때는 걍 간단하게 "🍕"로 쓰면 된다. 이렇게: [🍕]

이번 피자 모양은 16진수로 0x10000이 넘어가는 값이라 UTF-8이나 %인코딩 값이 좀 길고 복잡해 졌다. 4바이트나 된다.

직접 인코딩 값을 계산해서 만들어 보려는 뻘짓 말고, 위에 링크 건 유니코드 변환 사이트를 활용하는 것이 좋을 듯.

 

 

참고로,

오래 전에 이 블로그에 서명으로 만들어 붙였던 "떼르미.🐮Thermidor™🎗️.열월"는 코드값으로 표시하면 아래와 같다.

🐮 = U+1F42E

™ = U+2122

🎗️ = U+1F397, U+F20F (무려 8바이트다!: https://emojipedia.org/reminder-ribbon/)

🎗️ Reminder Ribbon Emoji

 

 

위키 페이지에 전체 유니코드 목록이 잘 정리되어 있다. 한번에 훑어보고 찾기에는 위키도 좋다.

>> 참조: https://en.wikipedia.org/wiki/List_of_Unicode_characters

List of Unicode characters - Wikipedia

 

 

또는, 내가 좋아하는 사이트, w3schools.com에도 있다.

>> 참조: https://www.w3schools.com/charsets/ref_utf_symbols.asp

HTML Unicode UTF-8

여기나,

>> 참조: https://www.w3schools.com/charsets/ref_emoji.asp

HTML Emoji Reference

여기를 참조해서 보는 것도 좋을 것 같다.

 

 

끝... 이 아니라,

한 가지 더 재미있는 기능까지 소개하고 끝내 보겠다.

바로, 글을 오른쪽에서 왼쪽으로 쓰게 하는 방법. 일부 아랍권 문자가 그렇다 보니 생긴 특수기능(?) 쯤 되는건데, 이것 역시 유니코드 문자의 일종이라 할 수 있다. 코드로 보면 U+202E. HTML Escaped 문자열로는 "‮" 또는 "‮" 뒤에 글을 쓰면 그 뒤에 쓰는 글이 거꾸로 순서가 뒤집힌다.

>> 참조: https://www.w3schools.com/charsets/ref_utf_punctuation.asp

HTML Unicode UTF-8

 

예를 들어 

‮ 거꾸로 글쓰기를 한번 해 본다.

이렇게 쓰면,

‮ 거꾸로 글쓰기를 한번 해 본다.

이렇게 되는 식.

 

위 사이트에 들어가 보면 의외로 재미있는 기능들이 많이 있다.

 

 

끝.