2016년이 이제 3시간도 남지 않았다. 이 글이 올해의 마지막 글이 될것 같다.
이번글도 역시 블로그의 꾸미기와 관련된 주제로 이모지 (Emoji) 에 관한 글로 마지막을 장식하려고 한다.
-
이모지 Emoji 의 발견
요즘 나는 스킨의 사이드바를 수정하면서 카테고리의 글 개수와 최근글의 댓글 수 부분을 손보고 있었다.
우선 숫자의 좌우에 괄호를 스크립트를 이용해 제거하고 그 부분에 아이콘 폰트나 문자를 삽입하려고 했다. 괄호는 쉽게 제거했는데 숫자 앞에 아이콘 폰트를 삽입하려고 하니 마음처럼 잘 되지 않는다. 스크립트로 삽입해 보기도 하고 백그라운드를 이용해 SVG 를 넣어보기도 했다. 하지만 댓글이 없는 부분까지 아이콘이 보여서 너무 지저분해졌다. before 를 이용해 숫자 앞에 아이콘 폰트를 삽입해 보기도 했지만 원하는 형태로 되지 않는다.
도저히 아이콘 폰트로는 쉽지 않을꺼 같아 우선 특수 문자를 이용해 그 자리를 대신해야 할것 같았다. 유니코드 특수 문자들을 한참 검색하다가 우연히 이모지 (Emoji) 를 발견하게 되었다. 사실 이모지는 그 동안 쉽게 볼 수 있는 아이콘인데 문자라는 생각을 전혀 하지 못했다. 그리고 종류가 다양하지 못하고 수준이 좋지 않은 이미지일거라는 선입견이 있어서 내겐 필요없을거라고 여기며 무시해왔다.
이모지는 최근 5.0 베타 버전까지 발표되었다.
아이콘의 목록을 보니 이전까지 생각했던 단순한 아이콘들의 모음이 아니라 엄청난 수의 아이콘들로 분야별로 왠만한 아이콘은 모두 준비되어 있다. 관련된 이미지끼리 모아서 어렵지 않게 찾을 수 있다.
Emoji 목록에서 내가 필요로 하는 아이콘을 찾아 간단히 복사하여 삽입하려던 위치에 붙혀넣었다. 아주 간단히 아이콘을 넣을 수 있었다.
문자 삽입
Emoji 삽입
-
Emoji 의 가능성
1. 아이콘 폰트에 비해 사용법이 간단해서 누구나 쉽게 사용할 수 있다.
2. 다양한 색상의 표현으로 사실적인 표현이 가능하다.
3. 아이콘 폰트나 문자와 마찬가지로 마우스 오버 효과 및 여러가지 애니메이션 효과를 이용할 수 있다.
4. 향후 아이콘의 추가 지원이 활발할 것으로 예상된다.
-
Emoji 의 한계
Emoji 아이콘을 사이드바에 손쉽게 삽입하기는 하였지만 이전까지 사용하던 아이콘 폰트와 비교하면 만족스럽지 못한 부분이 몇가지 있다.
1. 벡터 이미지를 사용하는 아이콘 폰트에 비해 선명하지 못하다. 평상시 수준에서는 큰 차이를 못 느끼지만 확대를 해보면 이미지의 선명도에 차이가 있다.
2. 아이콘 폰트는 필요하면 만들어서 추가하여 사용할 수 있지만 Emoji 는 이미 만들어진 아이콘 외에는 사용할 수 없다.
3. 대칭형 아이콘이 아니어서 애니메이션이 부자연스럽다. 만들때 좀 신경써서 만들었으면 좋았을텐데 아쉽다.
4. 누구나 쉽게 사용하다 보니 디자인에 개성이 없다.
5. 색상의 선택이 제한적이다.
6. 빈 공간을 이용한 투명 효과를 기대할 수 없고 겹쳐서 사용이 불가능하다. 이미지라서 어쩔 수 없을 듯 하다.
-
Emoji 와 아이콘 폰트 비교 [사용예]
1이모지 Emoji
1. 회전 애니메이션 효과
📀💿
2. 부들부들 마우스 오버 효과
🔔
3. 깜빡이는 애니메이션 효과
🔊
2아이콘 폰트
1. 회전 애니메이션 효과
2. 부들부들 마우스 오버 효과
3. 깜빡이는 애니메이션 효과
아직 Emoji 가 완벽하게 아이콘 폰트를 대체할 수는 없지만 아이콘 폰트와 함께 적절히 이용하면 스킨을 꾸미거나 글을 작성할때 큰 도움이 될것 같다.
이제 2016년이 2시간 정도 남았다. 모두 올 한해 수고하셨고 새해 복 많이 받으시길...
새해에 다시 만나요. ^_^;
헥헥.. 갑자기 계획하지 않았던 글을 쓰려니 글 하나 작성하기도 쉽지 않군...
