워드프레스에 토스페이스(토스 이모지)를 적용하는 방법

최근 웹사이트 트렌드로 사용자 경험(UX)을 중요시하고 있는데요, 이에 따라 감각적이고 직관적인 디자인 요소가 더욱 중요해지고 있습니다. 특히 MZ세대에게 익숙한 브랜드 감성과 감정을 표현할 수 있는 방법 중 하나로, ‘토스 이모지’로 잘 알려진 토스페이스(Tossface)가 큰 주목을 받고 있습니다.

저도 워드프레스에서 토스페이스를 적용하고자 많은 노력 끝에 성공하게 되었는데요, 이 글에서 해당 내용을 다뤄볼까 합니다. 감각적인 스타일의 이모지로 웹사이트 분위기를 바꾸고 싶은 분들에게 유용한 정보가 되었으면 합니다 😎

1. 워드프레스 기본 이모지 비활성화하기

워드프레스는 기본적으로 트위터 이모지가 적용되어 있는데요, 이를 비활성화 하지 않으면 토스페이스가 적용되지 않고 충돌이 발생하기 때문에 반드시 비활성화를 해줘야합니다.

아래 PHP 코드를 워드프레스에 추가해 주세요. 코드를 추가하는 방법을 모르신다면 이 글을 참고해주세요 😆

function disable_wp_emojicons() {
  remove_action('wp_head', 'print_emoji_detection_script', 7);
  remove_action('admin_print_scripts', 'print_emoji_detection_script');
  remove_action('wp_print_styles', 'print_emoji_styles');
  remove_action('admin_print_styles', 'print_emoji_styles');

  remove_filter('the_content_feed', 'wp_staticize_emoji');
  remove_filter('comment_text_rss', 'wp_staticize_emoji');
  remove_filter('wp_mail', 'wp_staticize_emoji_for_email');

  add_filter('tiny_mce_plugins', function($plugins) {
    return is_array($plugins) ? array_diff($plugins, ['wpemoji']) : [];
  });
}
add_action('init', 'disable_wp_emojicons');

2. 토스페이스 웹폰트 불러오기

토스 이모지는 폰트 형식으로 되어있기 때문에 웹폰트를 불러와야 하는데요, 여기에는 두 가지 방법이 있습니다.

1. HTML

첫 번째로는 HTML을 이용해 토스페이스 웹폰트를 불러오는 방법이 있습니다. 아래 코드를 헤더 부분에 추가해주세요.

<link href="https://cdn.jsdelivr.net/gh/toss/tossface/dist/tossface.css" rel="stylesheet"/>

2. PHP

두 번째로는 PHP 코드 스니펫 추가를 통해 웹폰트를 불러오는 방법이 있습니다. 아래 코드 스니펫을 워드프레스에 추가해주세요.

function load_tossface_font() {
  wp_enqueue_style('tossface-font', 'https://cdn.jsdelivr.net/gh/toss/tossface/dist/tossface.css');
}
add_action('wp_enqueue_scripts', 'load_tossface_font');

3. Javascript를 이용해 이모지를 자동으로 .toss-emoji 클래스로 감싸기

토스페이스는 폰트 형식으로 배포가 되어있어 이를 워드프레스에 적용하면 이모지 뿐만 아니라 전체적인 폰트에도 영향을 주게 됩니다.

따라서, 기존 폰트는 유지하되 이모지만 토스페이스의 이모지를 사용하기 위해서는 페이지 내에 있는 이모지를 자동으로 찾아 .toss-emoji 클래스로 감싼 후 이모지에만 웹폰트를 적용하는 방법을 사용해야 합니다.

아래 이모지를 자동으로 감지해 클래스로 감싸주는 Javascript 코드를 워드프레스에 추가해주세요.

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const emojiRegex = /([\u203C-\u3299\uD83C-\uDBFF\uDC00-\uDFFF\u200D\uFE0F]+)/g;

    function wrapEmojis(node) {
      if (node.nodeType === 3) {
        const replaced = node.nodeValue.replace(emojiRegex, '<span class="toss-emoji">$1</span>');
        if (replaced !== node.nodeValue) {
          const wrapper = document.createElement('span');
          wrapper.innerHTML = replaced;
          node.replaceWith(...wrapper.childNodes);
        }
      } else if (node.nodeType === 1 && node.nodeName !== 'SCRIPT' && node.nodeName !== 'STYLE') {
        Array.from(node.childNodes).forEach(wrapEmojis);
      }
    }

    wrapEmojis(document.body);
  });
</script>

4. 이모지용 스타일 정의

마지막으로 .toss-emoji 클래스에만 토스페이스 웹폰트를 적용하면 됩니다. 아래 css코드를 추가해주세요.

.toss-emoji {
  font-family: 'Tossface', sans-serif;
}

이렇게 해서 워드프레스에 기존 폰트는 유지하면서 토스페이스 이모지를 적용하는 방법을 알아보았습니다. 토스페이스 적용을 통해 UI/UX에 색다른 감성을 더해보세요 🤗

질문이나 궁금한 점이 있으시다면 댓글로 통해 남겨주세요!

감사합니다 😊