개요

블로그원의 awescnb 플러그인을 사용하며 지크 스킨 환경에서 이모티콘 기능을 개선하고 사용자 맞춤 설정하는 방법에 대해 설명합니다.

참고 링크

• 공식 설정 문서
• 온라인 이모티콘 검색 도구

설정 항목: `emoji`

기본 설정 예제

emoji: {
  enable: true,
  buttonIcon: "🍺",
  emojiList: [
    { value: '🤣', label: '웃다가 죽음' },
    { value: '😃', label: '큰 웃음' },
    { value: '😅', label: '땀 흘리는 웃음' },
    { value: '😆', label: '눈을 찌그러뜨린 웃음' },
    { value: '😏', label: '자랑스러운 미소' },
    { value: '😊', label: '따뜻한 미소' },
    { value: '😎', label: '멋진 분위기' },
    { value: '😍', label: '반하게 되는 감정' },
    { value: '🙂', label: '조용한 웃음' },
    { value: '🤩', label: '굉장히 존경함' },
    { value: '🤔', label: '생각 중' },
    { value: '🙄', label: '무심한 눈빛' },
    { value: '😜', label: '귀여운 장난감' },
    { value: '😲', label: '충격받은 상태' },
    { value: '😭', label: '울고 싶은 마음' },
    { value: '🤯', label: '머리가 터지는 느낌' },
    { value: '😰', label: '냉담한 땀' },
    { value: '😱', label: '비상 상황' },
    { value: '🤪', label: '아무 말도 안 하는 웃음' },
    { value: '😵', label: '어지러움' },
    { value: '😡', label: '화가 치솟음' },
    { value: '🥳', label: '축하해요' },
    { value: '🤡', label: '나는 소년이었어' },
    { value: '🤫', label: '조용히 해줘' },
    { value: '🐒', label: '원숭이' },
    { value: '🤭', label: '숨겨진 웃음' },
    { value: '🐂', label: '강한 친구' },
    { value: '🍺', label: '맥주' }
  ]
}

사용자 맞춤 설정 예시

emoji: {
  enable: true,
  buttonIcon: '<img src="https://images.cnblogs.com/cnblogs_com/zktww/2418533/t_240902093639_commentEmotionIcon.png" style="height: 16px; display: inline-block; vertical-align: middle;" />',
  emojiList: [
    { value: '🤣', label: '웃다가 죽음' },
    { value: '😃', label: '큰 웃음' },
    { value: '😅', label: '땀 흘리는 웃음' },
    { value: '😆', label: '눈을 찌그러뜨린 웃음' },
    { value: '😏', label: '자랑스러운 미소' },
    { value: '😊', label: '따뜻한 미소' },
    { value: '😎', label: '멋진 분위기' },
    { value: '😍', label: '반하게 되는 감정' },
    { value: '🙂', label: '조용한 웃음' },
    { value: '🤩', label: '굉장히 존경함' },
    { value: '🤔', label: '생각 중' },
    { value: '🙄', label: '무심한 눈빛' },
    { value: '😜', label: '귀여운 장난감' },
    { value: '😲', label: '충격받은 상태' },
    { value: '😭', label: '울고 싶은 마음' },
    { value: '🤯', label: '머리가 터지는 느낌' },
    { value: '😰', label: '냉담한 땀' },
    { value: '😱', label: '비상 상황' },
    { value: '🤪', label: '아무 말도 안 하는 웃음' },
    { value: '😵', label: '어지러움' },
    { value: '😡', label: '화가 치솟음' },
    { value: '🥳', label: '축하해요' },
    { value: '🤡', label: '나는 소년이었어' },
    { value: '🤫', label: '조용히 해줘' },
    { value: '🐒', label: '원숭이' },
    { value: '🤭', label: '숨겨진 웃음' },
    { value: '🐂', label: '강한 친구' },
    { value: '🍺', label: '맥주' },
    { value: '🍉', label: '수박' },
    { value: '☕', label: '따뜻한 음료' }
  ]
}

시각적 최적화

이모티콘 팝업 메뉴의 가독성을 높이기 위해 추가적인 스타일을 적용할 수 있습니다.

페이지 커스터마이징 CSS에 추가할 코드

.anim-scale-in {
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
}

이 스타일은 이모티콘 선택 박스에 부드러운 그림자 효과를 주어 배경과 구분이 쉽게 되도록 합니다.

최종 효과

설정 후 댓글 입력창에 정교한 이모티콘 버튼이 나타나며, 클릭 시 자연스럽게 확대되는 팝업 메뉴와 함께 사용자가 원하는 이모티콘을 빠르게 선택할 수 있습니다.