20240219-dynamic-og-image/

[giscus[bot]]

20240219-dynamic-og-image/

https://tech.inflab.com/20240219-dynamic-og-image/

[front-zero]

글 잘 읽었습니다!
다름이 아니라, 혹시 이모지가 잘 출력이 되나요?? 이모지가 안나오는데 해결이 안되네요 ㅠㅠ

[yoongdy]

답변을 너무 늦게 확인했네요 ㅠ 글 읽어주셔서 감사합니다 🙏

저희도 작업 당시 같은 문제를 확인했는데요. 수강평이나 질문·답변의 텍스트 자체가 핵심 정보라고 판단해, 이모지는 필터링하여 노출하지 않는 방식으로 대응했습니다.

이모지 출력 문제는 sharp 라이브러리의 텍스트 렌더링 관련 이슈로 확인되었는데요. 필요하다면 아래 자료들을 참고하시면 도움이 될 것 같습니다! 감사합니다.

• SVG: Color emoji not rendered lovell/sharp#2506
• https://dev.to/opensauced/how-to-implement-emojis-in-vercelsatori-2no5

[CaesiumY]

저는 이모지 미렌더링 이슈를 폰트를 추가하여 해결했습니다!

• https://github.com/CaesiumY/CaesiumY.github.io/blob/7d7300fee1e7d28fa324ee2c4aa8ebd774d5a049/src/utils/loadLocalFont.ts#L53

Noto Emoji를 선택하여 og 이미지의 분위기를 살렸습니다. 아래는 이모지를 살린 예시 이미지입니당

https://caesiumy.github.io/posts/show-me-the-lucky-meme-retrospect/index.png

[erados]

대단하네요

[CaesiumY]

이런 노하우는 다 어디서 어떻게 알게 되신 걸까요...!!

[yoongdy]

안녕하세요! 글 읽어주셔서 감사합니다.

대부분은 실제 서비스 개발 과정에서 마주친 문제들을 해결하면서 쌓인 경험인데요. 내부에서 시도한 방법과 시행착오를 정리해두면 다른 분들께도 도움이 될 수 있겠다 싶어 글로 공유하게 되었는데, 도움이 되셨길 바래요 🙏