Moetwemoji: 가벼운 애니메이션 이모지 (AVIF) - 포럼에 생기를 불어넣으세요

PixPin_2026-01-04_22-04-17

안녕하세요, 여러분! :waving_hand:

Discourse 커뮤니티에 더 많은 에너지와 역동적인 표현을 더하기 위해 새로운 플러그인을 만들었습니다. Moetwemoji는 상호작용을 더 생동감 있고 재미있게 만들어 주는 애니메이션 이모지 세트를 제공합니다.

:rocket: 주요 기능

  • 초경량: 모든 이모지는 AVIF 형식으로 인코딩되어 있습니다.

  • 높은 성능: 평균 파일 크기는 약 10KB에 불과하여 포럼이 빠르게 로드되면서도 훌륭한 시각적 효과를 제공합니다.

  • 유연한 배포: 필요에 따라 두 가지 다른 버전(Override 또는 Supplement)을 제공합니다.


:package: 버전 선택하기

포럼에 이 이모지들을 어떻게 통합하고 싶은지에 따라 두 가지 별도의 저장소를 준비했습니다.

옵션 1: Override 버전 (전체 교체)

기본적인 정적 Twemoji 세트를 이 애니메이션 이모지로 완전히 교체하고 싶다면 이 버전을 사용하세요. 시스템 기본값을 오버라이드하여 애니메이션을 표준 경험으로 만듭니다.

옵션 2: Pack 버전 (보충)

표준 이모지를 유지하면서 이모지 선택기에 이모지들을 추가 "Pack"으로 더하고 싶다면 이 버전을 사용하세요. 기본값에 영향을 주지 않고 이모지 선택기에 새로운 탭을 추가합니다.


19개의 좋아요

공유해 주셔서 감사합니다 :+1:

테스트를 해 보려고 했는데, app.yaml 파일에 저장소를 추가해도 작동하지 않습니다.

설정해야 할 항목이 있나요?

감사합니다

네, 수동 설치를 시도해 보세요

수동 설치 가이드 (오버라이드 버전)

이 가이드는 실행 중인 Discourse 컨테이너 내부에서 discourse-moetwemoji-twemoji-fakepng-override 플러그인을 수동으로 설치하고 적용하는 방법을 설명하며, 오버라이드 버전의 경우 완전한 리빌드가 필수적이지 않은 이유를 명확히 합니다.


1. Discourse 컨테이너 진입

서버에서 Discourse Docker 디렉터리(보통 /var/discourse)로 이동하여 실행 중인 컨테이너에 진입합니다:

cd /var/discourse
./launcher enter app

이제 컨테이너 셸 안에 있어야 합니다.


2. 오버라이드 플러그인 수동 클론

플러그인 디렉터리로 이동하여 저장소를 클론합니다:

cd /var/www/discourse/plugins
git clone https://github.com/constansino/discourse-moetwemoji-twemoji-fakepng-override.git

디렉터리가 존재하는지 확인합니다:

ls discourse-moetwemoji-twemoji-fakepng-override


3. 이모지 오버라이드 적용

Discourse 루트 디렉터리로 돌아갑니다:

su - discourse
cd /var/www/discourse

현재 상태를 확인합니다 (선택 사항이지만 권장됨):

RAILS_ENV=production bundle exec rake moetwemoji_twemoji:status

오버라이드를 적용합니다:

RAILS_ENV=production bundle exec rake moetwemoji_twemoji:apply

명령이 오류 없이 완료되면, Twemoji PNG 파일이 Moetwemoji로 대체되었음을 의미합니다.


4. 리빌드 관련 중요 사항 (영속성)

:red_exclamation_mark: 오버라이드를 작동시키기 위해 리빌드는 필요하지 않습니다

오버라이드 버전은 실행 중인 컨테이너 내 파일을 직접 교체하는 방식으로 작동합니다.
따라서:

  • :white_check_mark: ./launcher rebuild app을 실행할 필요가 없습니다

  • :white_check_mark: rake 작업을 실행한 직후 변경 사항이 즉시 적용됩니다

:warning: 그러나 변경 사항은 영속적이지 않습니다

이 작업이 컨테이너 파일 시스템 내부에서 수행되기 때문에:

  • 향후 ./launcher rebuild app 실행 시

  • 또는 컨테이너 재생성 / 업그레이드 시

변경 사항이 삭제되고 이모지 오버라이드가 사라집니다.

:backhand_index_pointing_right: 리빌드 간 영속성이 필요하다면, app.yml 후크를 통해 플러그인을 설치하고 올바르게 리빌드해야 합니다.


5. CDN 및 브라우저 캐시 삭제 (매우 중요)

오버라이드를 적용한 후에도 캐싱으로 인해 이모지가 변경되지 않은 것처럼 보일 수 있습니다.

5.1 CDN 캐시 삭제 (예: Cloudflare)

Cloudflare와 같은 CDN을 사용 중인 경우:

  • 다음에 대한 캐시를 정화(Purge)합니다:

    • /images/emoji/*

    • 또는 필요 시 전체 캐시 정화 수행

그렇지 않으면, 이전 Twemoji PNG 파일이 계속 서빙될 수 있습니다.

5.2 브라우저 캐시 삭제

클라이언트 측에서:

  • 페이지를 강제 새로고침합니다 (Ctrl + F5 / Cmd + Shift + R)

  • 또는 브라우저 캐시를 삭제합니다

  • 또는 시크릿/개인 창에서 테스트합니다

CDN과 브라우저 캐시가 모두 삭제될 때까지 이모지 변경 사항이 표시되지 않을 수 있습니다.


6. 요약

  • 이 오버라이드 플러그인은 리빌드 없이 설치 및 적용할 수 있습니다

  • 수동 설치는 다음 경우에 유용합니다:

    • 테스트

    • 임시 사용

    • 디버깅

  • 단점은 영속성 부족입니다

  • 이모지 오버라이드를 적용한 후에는 항상 CDN 캐시 + 브라우저 캐시를 삭제해야 합니다


README에 설명된 대로 작업을 실행해 보셨나요?

이 README에는 두 가지 설치 방법을 제공합니다:

  1. 첫 번째 방법은 재빌드를 요구합니다.
  2. 두 번째 방법은 컨테이너에 수동으로 진입하여 GitHub에서 다운로드하는 것입니다.

두 방법 사이에 차이는 없으며, 전자가 단순히 더 영구적입니다. 첫 번째 방법을 사용하여 재빌드하는 동안 다운로드가 실패하면, 컨테이너 내에서 직접 설치하는 두 번째 방법을 시도해 보시기 바랍니다. 이는 기본적으로 기존 이모지 이미지를 다운로드하여 교체하기 때문입니다.

Readme에 설치 방법이 2가지로 설명되어 있지만, 다음과 같은 내용도 언급되어 있습니다:

cd /var/discourse
./launcher enter app

su - discourse
cd /var/www/discourse

RAILS_ENV=production bundle exec rake moetwemoji_twemoji:status
RAILS_ENV=production bundle exec rake moetwemoji_twemoji:apply

이는 Meta의 첫 번째 게시물에서 언급되지 않았습니다. 캐싱에 대한 정보도 마찬가지입니다. 그래서 누군가가 이 부분을 놓칠 수 있다고 생각했습니다.


참고로, 첫 번째 게시물에 있는 두 링크 모두 Google 검색으로 연결됩니다. GitHub로 직접 링크하지 않은 이유가 있나요?

1개의 좋아요

왜 애니메이션 이모지들이 공식적인 Google Noto 애니메이션 이모지인데도, 이름은 "moetwemoji"이고 이모지 폴더는 "twemoji"라고 불리는 것인가요?

이 내용은 이 파일에 언급되어 있으며, 여기서 출처 표시가 부족합니다. 해당 파일은 작업 중이라고 되어 있지만, 테마 구성 요소를 배포하기 이전에 출처 표시가 완비되어 있을 것으로 기대합니다. :face_with_tongue:

5개의 좋아요

죄송합니다. 제 게시글이 충분히 포괄적이지 못했던 것 같습니다. 나중에 수정하겠습니다. 수정해 주셔서 감사합니다.

2개의 좋아요

이 부분을 짚어주셔서 감사합니다 — 말씀하신 대로 맞습니다.

해당 명명은 역사적인 이유에서 비롯된 것으로, Discourse의 기본 이모지 구조에서 유래했지만, 실제 애니메이션 에셋은 Twemoji가 아닌 Google Noto Emoji에서 가져온 것입니다. 이 부분이 혼란스럽다는 점에 동의하며, 명확히 해야 할 필요가 있다고 생각합니다.

현재 진행 중인 작업은 다음과 같습니다:

  • Noto Emoji 라이선스에 완전히 부합하도록 출처 표기를 업데이트하는 중
  • README에서 에셋 출처를 명확히 하는 중
  • 혼란을 줄이기 위해 명명 규칙 및 폴더 구조를 검토하는 중

리뷰를 해주시고 이 문제를 지적해 주셔서 감사합니다.

2개의 좋아요

조작을 해봤지만 여전히 작동하지 않아서 기다릴게요. 참고로 제 Discourse는 Ubuntu Server에서 독립적으로 실행되고 있어요. 캐시에 대해 추가로 해야 할 작업이 있는지 모르겠네요.

아래 주소를 그냥 시도해 보세요
https://“yourdomain”/images/emoji/twemoji/hugs.png?v=15

그리고

https://“yourdomain”/images/emoji/twemoji/hugs.png?v=15&cache=0

두 URL 모두 매우 안정적이고 움직임이 없는 이모지를 제공합니다. 따라서 이걸 설치할 이유가 없다고 봅니다. 기기와 관련된 문제인가요?

저는 그 링크들이 플러그인을 설치한 후 테스트하는 용도로 사용된다고 생각합니다. 플러그인을 사용하지 않는 한, 플러그인이 대체할 이모지를 그대로 보게 될 것입니다.

사실 설치倒是 해봤는데, 아무것도 보이지 않아요. 어쩌면 Discourse 설정에서 다른 이모지를 사용하거나 다른 방법을 써야 할지도 모르겠네요. 잘 모르겠어요 [1]


  1. 개인적으로는 움직이는 요소들은 90년대에서 온 잔재라고 생각해요 :squinting_face_with_tongue: 그래서 더 깊이 파고들고 싶지 않아요. ↩︎

설치를 할 이유가 없다고 말씀하셔서, 설치하지 않은 것으로 오해했습니다.

플러그인 저장소의 README에 설명된 rake 태스크를 실행해 보셨나요? 링크를 통해 이모지에 접근하려고 했던 부분에 애니메이션 이모지를 표시하는 것이 바로 그 rake 태스크라고 생각합니다.

1개의 좋아요

죄송합니다. 휴대폰으로 보고 있어서 그때는 게을러서(지금은?) 쓰기를 게을리했습니다.

아니요, 저는 그렇게 하지 않았습니다.

수정.

저는 readme를 읽은 적이 없습니다. OP가 제공한 것은 (무용한) 구글 검색 링크뿐이었기 때문입니다. 이제 원래 저장소로 가서 OP에 있어야 하거나 있을 수 있는 정보를 찾기 위해 추가적인 단계를 거쳤습니다.

1개의 좋아요

“https://“votre_domaine”/images/emoji/twemoji/hugs.png?v=15” 주소를 통해 애니메이션 이모지를 잘 볼 수 있습니다. 하지만 채팅에서 이모지를 선택하려고 하면 작동하지 않습니다 :thinking:

복잡도를 줄이려면 컨테이너에 들어가 클론하는 것과 관련 없는 모든 내용을 제거하는 것을 권장합니다. 이는 불필요하며 플러그인을 관리하는 표준 방식이 아닙니다.

거의 모든 관리자는 주기적으로 재빌드를 수행하며, 지속성이 가장 중요한 요소이므로 app.yml 방식이 가장 좋습니다.

또한 표준 설명서로 링크를 걸고 고유한 단계만 자세히 설명할 수도 있습니다.

3개의 좋아요

저는 persistent 메서드를 사용 중입니다:

  1. app.yml 파일에 git clone 명령어를 추가했습니다.
  2. 컨테이너에 진입하여 rake 명령어 2가지를 실행했습니다.
  3. 제 사이트에서 “https://“your_domain”/images/emoji/twemoji/hugs.png?v=15” 링크가 정상 작동하는지 확인했습니다.
  4. 캐시를 비우고, Cloudflare 보호 수준을 dev로 설정하는 등 다른 조치도 취했습니다.
  5. 하지만 이모지를 살펴보니 여전히 원래 경로, 예: images/emoji/unicode/upside_down_face.png?v=15를 가리키고 있습니다.

무엇을 더 놓치고 있을까요? 기본 이모지를 이 이모지로 교체하는 방법은 무엇인가요?