Post
목차
이모지 및 이모티콘에 대한 이야기 Cover Image

Markup

Markdown

이모지 및 이모티콘에 대한 이야기

2022. 3. 19.

2022. 3. 19.

이모지

이모지는 일본어 絵文字(えもじ, 絵/繪(그림) + 文字(문자))의 합성어로 그림 형태의 유니코드 문자입니다.
(사물의 형상을 본따서 만드는 상형문자 같은 경우도 이모지라고 볼 수도 있을 것 같네요...)

이모지 역사

예전 일본은 통신사간 단문 메시지 송수신이 불가능해서, 핸드폰에서 단문 메시지 대체용으로 이메일을 사용하였습니다.
1999년에 NTT 도코모라는 일본의 통신사가 자사 단말기에 최초로 이메일에 이모지를 도입하였으며 사용자가 많아지자 소프트뱅크 등 다른 통신사에서도 경쟁적으로 도입하기 시작했습니다.
그러나, 휴대폰에서만 이모지가 지원되었으므로, 휴대폰 외에는 이모지가 보이지 않는 현상이 발생하였습니다.
그래서 NTT 도코모와 심비안이 유니코드에 이모지 도입을 제안했지만, 당시 전세계적으로 이모지를 사용하는 추세는 아닌 터라 거절을 당했습니다.

이 후, 2008년 6월 애플이 일본에 아이폰을 출시하면서 소프트뱅크의 손정의가 아이폰에도 이모지 도입을 요청해서 iOS 2.2부터 애플도 이모지를 도입하게 되었습니다.
그러다 2008년 10월 구글도 Gmail에 이모지를 도입하면서 애플과 함께 유니코드에 이모지 도입을 제안하였으며 마침내 2010년 10월 유니코드 6.0에 수록되어 표준화 되었습니다.

이모지의 표준화

이모지는 유니코드 컨소시엄의 하위 부서인 이모지에서 주관하고 있습니다. 다만, 여기서 채택된 이모지의 이미지는 기본 이미지로 각 플랫폼에서 본인들의 아이덴티티에 맞게 이를 다시 구현하므로 플랫폼마다 이모지의 이미지가 조금씩 다릅니다. 또한, 플랫폼 별로 독자적인 이모지를 추가하기도 하는데 이런 경우 다른 플랫폼에서는 보이지 않습니다.
다만, 이런 경우 유니코드를 사용하지 않고 마크다운에서 Short Code를 이용하여 이미지를 직접 불러오는 방식으로 합니다.
대표적으로는 Github의 커스텀 이모지인 feel_so_good:feel_so_good:, octocat:octocat:, trollface:trollface: 등이 있습니다.

현재 Emoji Counts 문서에 따르면 유니코드에서 표준화된 이모지는 v14 기준으로 총 3633개가 있습니다.

이모지 결합

이모지는 다양한 방법으로 결합하여 새로운 이모지로 표현이 가능합니다.
아래에는 그 중 대표적인 방법 몇가지에 대해 소개합니다.
이 외에도 다양한 방법이 있으니 궁금하신 분들은 Design Guidelines에서 확인해 보시길 바립니다.

Variation Selector-16(VS16)

이전부터 있었던 텍스트 이모티콘을 Variation Selector-16 수정자와 결합하여 이미지 기반의 새로운 이모지로 표현할 수 있도록 하는 결합 방식입니다.
(VS16의 유니코드인 U+FE0F는 보이지 않는 수정자로 단독으로 사용하게되면 아무것도 표시되지 않습니다.)

예를 들어 ♥의 유니코드인 U+2764 바로 뒤에 VS16의 유니코드인 U+FE0F를 결합하면 ❤️ 로 변경됩니다.
HTML에서는 ♥❤ + ️ = ❤️❤️로 사용 가능합니다.

보다 자세한 사항은 Emoji Presentation Sequences에서 확인 가능합니다.

Emoji Modifiers

이모지 중에는 수정자 역할을 하는 이모지들이 있습니다.
대표적으로는 스킨 톤 이모지가 있습니다.

CharacterUnicodeCLDR
🏻U+1F3FB밝은 피부 톤
🏼U+1F3FC중간 정도의 밝은 피부 톤
🏽U+1F3FD중간 피부 톤
🏾U+1F3FE중간 정도의 어두운 피부 톤
🏿U+1F3FF어두운 피부 톤

위의 스킨 톤을 일반 이모지 뒤에 연결하면 해당 스킨 톤을 가진 이모지로 결합됩니다.
예를 들어 👨의 유니코드인 U+1F468 바로 뒤에 🏻의 유니코드인 U+1F3FB을 추가하여 U+1F468 U+1F3FB를 추가하면 👨🏻 이모지로 결합됩니다.
HTML에서는 👨👨 + 🏻🏻 = 👨🏻👨🏻로 사용 가능합니다.

보다 자세한 사항은 Emoji Modifiers에서 확인 가능합니다.

Zero Width Joiner(ZWJ)

유니코드 기반의 이모지는 폭 없는 접합자(Zero Width Joiner) 줄여서 ZWJ 유니코드 문자를 통해 이모지끼리 결합하여 새로운 이모지를 만들 수 있습니다.
이모지 유니코드 사이에 ZWJ의 유니코드인 U+200D을 추가하면 결합할 수 있으며, 결함되는 이모지의 갯수는 조합식에 따라 2개 이상이 될 수도 있습니다.
간단한 예로 ❤️ 의 유니코드인 U+2764 U+FE0F와 🔥의 유니코드인 U+1F525 사이에 ZWJ 의 유니코드인 U+200D을 추가하여 U+2764 U+FE0F U+200D U+1F525를 만들면 :heart*on_fire: 이모지로 결합됩니다.
HTML에서는 ❤️❤️ + ZWJ‍ + 🔥#x1F525; = ❤️‍🔥 ❤️‍🔥로 사용 가능합니다.

2개 이상의 조합 예로는 👨 + 👩 + 👧 + 👦 = 👨‍👩‍👧‍👦 이 있습니다.

CharacterUnicodeHTMLShort Code
👨U+1F468👨:man:
👩U+1F469👩:woman:
👧U+1F467👧:girl:
👦U+1F466👦:boy:
👨‍👩‍👧‍👦U+1F468 U+200D U+1F469 U+200D U+1F467 U+200D U+1F466👨 ‍ 👩 ‍ 👧 ‍ 👦:family_man_woman_girl_boy:

만약 조합식이 없거나 잘못된 경우 조합하려 했던 이모지들이 단순 나열되거나 부분적으로 조합됩니다.

  • 조합 실패: 👨 👩 👧 👦
  • 부분 조합: 👨‍👩‍👧 👦

ZWJ 조합식은 Emoji ZWJ Sequences에서 확인 가능합니다.

이모지를 HTML에서 사용하기

HTML에서 특수문자 사용 시 시작과 끝을 &, ;로 사용합니다.
여기서 유니코드를 사용하려면 # 기호를 &뒤에 추가해야 하고, 다시 유니코드 값을 16진수로 사용할 경우 x를 추가해줍니다. (10진수를 사용할 경우에는 추가하지 않습니다.)
따라서, 😀을 HTML에서 유니코드로 표현하려면 😀의 유니코드인 U+1F600에서 유니코드임을 알려주는 기호인 U+를 제외한 나머지 값1F600을 위에 알려준 방식대로 변환하면 😀이 되며,
이것을 HTML 문서에 작성하면 😀로 변환됩니다.

보다 자세한 내용은 Emoji Unicode Reference에서 확인 가능합니다.

이모지를 Markdown에서 사용하기

마크다운에서 이모지 사용 시 해당 이모지의 Short Code 앞, 뒤를 :으로 감싸 주면 됩니다.
예를 들어 😀 이모지의 Short Code는 grinning 으로 시작과 끝을 :grinning: 이렇게 감싸주면 됩니다.
다만, Short Code 같은 경우 표준화가 되어 있지 않다보니 사용하는 플랫폼에 따라 이모지가 보여지지 않을 수 있습니다.
예를 들어 여자 경찰(👮‍♂️) 이모지인 경우 Github에서는 Short Code가 :policeman:인 반면, Slack에서는 :female-police-officer:이고, Emojipedia에서는 :woman_police_officer:로 사용합니다.

Short Codes 관련해서 보다 자세한 내용은 Emoji Shortcodes에서 확인 가능합니다.

추가적으로 마크다운에서 이모지 조합은 플랫폼에 따라 사용이 불가할 수 있습니다. Slack에서는 :man::skin-tone-6: 방식으로 피부 스킨 조합이 가능하지만 Github에서는 불가능합니다.

마크다운에서 사용 가능한 Github 기반의 이모지 및 Short Code 모음은 깃허브 기반의 마크다운 이모지 모음 에서 다루었으니 이모지 모음집이 필요한 경우 해당 포스트에서 확인 바랍니다.

이모지의 방향성

현재는 전 세계 모든 플랫폼에서 사용한다고 해도 과언이 아닌 만큼 유니코드 재단에서도 국가, 종교, 인종, 성별을 떠나 정치적 올바름(PC)을 지향하고 있습니다. 그 일환으로 Skin Tone을 구현하여 다양한 인종을 표현할 수 있으며, ZWJ 결합으로 젠더 이슈도 원하는 방향으로 표현이 가능합니다.

  • 다양한 인종: 🧔‍♀️ 🧔🏻 🧔🏼‍♂️ 🧑🏻‍🦰 🧔🏿 🧑🏻‍🦱
  • 다양한 커플: 👩‍❤️‍👨 👨‍❤️‍👨 👩‍❤️‍👩
  • 다양한 종교: ⛪ 🕌 🕍 🕋 ⛩️
  • 다양한 가족: 👨‍👩‍👧‍👦 👨‍👨‍👧‍👦 👩‍👩‍👧‍👦 👨‍👧‍👦 👩‍👧‍👦

이모지 제안

이모지의 제안은 누구나 가능합니다.
본 포스트를 작성하면서 현재 어떤 제안들이 있는지 확인해 봤는데요.
손하트(손하트)가 2019년도에 L2/19‑327로 제안되어 있는 것을 확인하였는데 거부되었네요.. 😥
현재는 거부된지 2년도 지났거니와 손하트도 전세계적으로 위상이 높아졌으니 다시 제안을 해도 되지 않을까 싶습니다. 🤣

다시 본론으로 돌아와 제안은 누구나 할 수 있지만, 시기와 방식은 정해져 있습니다.

  • 시기: 매년 4월 4일부터 7월 31일까지
  • 제외: 현재 존재하거나, 제안 중이거나, 지난 2년 이내에 거부된 이모지는 제외

위에 서술한 것 외에도 다양한 요소들을 추가적으로 검토하고 있으니 자세한 사항은 Guidelines for Submitting Unicode® Emoji Proposals에서 확인 바랍니다.

여담으로 일전에 🎌:crossed_flags:에 대해 이모지 자체 의미 상으로는 교차된 깃발을 뜻하는데 일본국기가 그려져 있어서 이모지 의미 상 맞지 않다고 생각한 적이 있었습니다.
그래서 이를 개선하고자 ZWJ 조합을 이용헤서 깃발(국기) + ZWJ + 깃발(국기)로 조합을 하면 조합한 깃발(국기) 두개가 순서대로 교차되는 ZWJ 조합을 제안하려고 했었습니다.
예를 들면 🇰🇷 + ZWJ + 🇰🇷 = crossed_flags_kr_kr 이런식으로 ZWJ 조합식을 제안하려 했었습니다.

하지만 Flags 및 Evidence of Frequency 등 제안서의 기준에 못미치는거 같아 접었었는데 본 포스트를 작성하면서 다시 한번 제안해볼까 생각하고 있습니다.
혹시나 제안을 하게되면 관련 내용으로 포스트를 써보도록 하겠습니다.

이모지 커스텀

위에 잠깐 언급한 바와 같이 특정 플랫폼에서는 유니코드를 사용하지 않고 마크다운에서 Short Code를 이용해서 이미지를 직접 불러오는 방식으로 커스텀 이모지를 사용합니다.
유니코드를 이용하지 않는 이유는 특정 유니코드를 특정 플랫폼에서만 특정하게 사용하게 되면 다른 플랫폼에서는 보여지지 않거나 다른 이미지가 표시되어 혼동이 발생하기 때문입니다.
실례로 토스에서 제작한 토스페이스 같은 경우 유니코드에 등록된 고유 문자의 설명을 무시하고 임의대로 변경하여서 다른 플랫폼에서 다른 의미의 이미지가 나와 플랫폼 별 소통에 혼란을 야기시킬 수 있는 문제점이 지적되었고, 화면을 제대로 볼 수 없는 사람을 위해 화면을 낭독해 주는 스크린 리더 같은 경우에도 유니코드에 등록된 설명을 기준으로 낭독하게 되어 있는데 토스페이스의 바뀐 이모지는 이를 반영하기 어렵다는 지적이 있습니다.

https://news.v.daum.net/v/20220305160004827 기사 참조

현재는 피드백을 받아들여 유니코드에 등록된 의미에 맞게 전수 검사할 예정이라고 트위터에 공식 입장문을 발표한 상태입니다.

이모지 관련 추천 사이트

아래 추천드리는 사이트들은 이모지 관련된 사이트로 각 플랫폼 별로 사용하는 이미지, 사용 가능 여부, 사용법등을 알 수 있거나 이모지의 사용 빈도, 추세 등을 알 수 있는 사이트들로 필자가 이모지에 대해 알아가면서 많은 도움이 된 사이트 들로 이모지에 관심 있으신 분들에게 추천 드립니다.

이모티콘

이모티콘은 Emotion(감정)과 Icon(아이콘)의 합성어로 문자를 이용해 그림을 그린 형태로 이모지와는 반대되는 성격으로 유니코드 문자를 조합해 그림을 그리는 방식입니다.
(옛날 상대방에게 숫자만 전달할 수 있었던 삐삐시절에 38317이 독일어로 사랑을 뜻하는 LIEBE를 거꾸로 했을 때와 비슷하다고 해서 사랑한다는 뜻으로 쓰였었는데 이것도 이모티콘의 일종이라고 볼 수도 있지 않을까 생각합니다. ㅋ)

서양 같은 경우 옆으로 누워있는 가로형 이모티콘:-)을 주로 사용하고 있으며, 동양은 세로형 이모티콘(^_^)을 주로 쓰고 있는데, 제 생각으로 글자의 모양 및 조합 방식의 차이로 인한 것이라고 생각합니다.
(알파벳은 철자끼리 합쳐질 수 없고 하나씩 가로로 늘어쓰는 방식인데 반면, 한글과 한문 같은 경우 철자(문자)끼리 합쳐져서 새로운 문자를 만들 수 있는 방식이다 보니 이모티콘을 만드는데 방향이 큰 영향을 주지 않은 것 같습니다.)

이모티콘의 역사

개인적인 생각으로는 글자를 이용해 감정을 표현하는 행위는 아마 인간이 문자를 사용하던 때부터 하지 않았을까 합니다.
흔히 우리가 말하는 이모티콘은 컴퓨터 상에서 글자를 조합해 그림을 그려 감정을 표현하는 것이므로 컴퓨터 환경으로 국한을 두었을 때 제가 생각하는 최초의 사용은 1982년 9월 19일 스콧 팔맨 교수가 카네기 멜론 대학교의 컴퓨터 과학 게시판에 감정을 나타내는 용도로 :-)와 :-(를 제안했을 때가 아닌가 합니다.
아래는 그때의 게시글 내용입니다.

19-Sep-82 11:44 Scott E Fahlman :-)
From: Scott E Fahlman <Fahlman at Cmu-20c>

I propose that the following character sequence for joke markers:
:-)
Read it sideways. Actually, it is probably more economical to mark things that are NOT jokes, given current trends. For this, use
:-(

이모지와 이모티콘

이모지(絵文字:Emoji), 이모티콘(Emoticon)은 각각, 일본어, 영어의 합성어로 전혀 다른 문화의 언어들로 만들어졌는데도 불구하고 발음이 비슷한게 참 신기하다고 생각했습니다.

세상에는 다양한 문자와 다양한 언어들이 존재합니다. 따라서, 문자로는 소통에 불편이 있을 수 밖에 없었으며 같은 언어, 같은 문자를 사용한다고 하더라도 문자로 감정을 전달하기에 부족한 점이 많다고 생각합니다.
다행히도 만국 공통으로 쉽게 이해하고 감정을 교류할 수 있는 것이 있으니 제가 봤을 때 그것은 음악과 그림인 것 같습니다.

예전 휴대폰이 발달하지 않아 컴퓨터로만 인터넷을 하던 시절에는 데이터가 지금처럼 많지도 않았고, 빠르지도 않아서 그림과 음악으로 교류하기에는 상당한 제약이 있었습니다. 또한, 일반 사람에게는 다가가기 힘들 예술의 영역이기도 하고요.
그러다가 그러한 제약들을 모두 없앨 수 있는 문자로 그림을 그리기 시작하면서 이모티콘의 전성기가 찾아온 것 같습니다. 그때 당시 PC로만 인터넷이 가능했기에 넉넉한 자판도 한몫한 것 같다는 생각도 들고요.

세상에 존재하는 셀 수도 없는 수만가지 글자들을 조합하여 이모티콘을 만들 수 있었기에 이모티콘으로는 어떠한 것도 표현할 수 있었다고 해도 과언이 아니라고 생각합니다.

ξ(✿ ❛‿❛)ξ (˵⚈ε⚈˵) ๑•‿•๑ (˵¯͒〰¯͒˵) ๑◕‿‿◕๑ (¬‿¬) (ง ͠ ͠° ل͜ °)ง ✪‿✪ (⌬̀⌄⌬́) (๑•͈ᴗ•͈) (ˊ•͈ ◡ •͈ˋ)

그러다 점차 휴대폰이 발달하게 되면서 작은 자판으로는 그 자유분방한 이모티콘을 자유자재로 사용할 수 없게 되었고, 또한 감정을 담아내기에는 짧은 단문으로는 부족하다 보니 하나의 이미지로 여러 감정을 표현할 수 있는 이모지로 자연스레 넘어온 것 같습니다.

현재 이모티콘 및 이모지의 사용처를 보면 이모지는 카톡이나 문자 같은 단문 및 가볍지 않은 글들에서 자주 쓰이며, 이모티콘 같은 경우 커뮤니티 게시판의 게시글 및 답글에서 주로 쓰이는 것으로 보입니다.

앞으로도 이러한 형태는 꾸준히 이어질 것 같습니다.

Ascii Art                     ⊂_ヽ
                              　 ＼＼  Λ＿Λ
                              　　 ＼( ‘ㅅ’ ) 두둠칫
                              　　　 >　⌒ヽ
                              　　　/ 　 へ＼
                              　　 /　　/　＼＼
                              　　 ﾚ　ノ　　 ヽ_つ
                              　　/　/두둠칫
                              　 /　/|
                              　(　(ヽ
                              　|　|、＼
                              　| 丿 ＼ ⌒)
                              　| |　　) /
                              `ノ )　　Lﾉ

참고한 사이트

Comments

Sub Category

Markdown (3)