og:title 및 og:description 잘라내기: 이모지, 우르두어, 마크업 깨짐 없이

(dev.to)

Dev.to WebDev2026년 10월 21일개발자 도구

og:title 및 og:description 잘라내기: 이모지, 우르두어, 마크업 깨짐 없이

오픈 그래프(OG) 태그 생성 시 발생하는 이모지 깨짐, 단어 중간 끊김, 마크다운 문법 노출 문제를 Intl.Segmenter와 정규식을 통해 해결하여 링크 프리뷰의 완성도를 높이는 기술적 방법을 제시합니다.

이 글의 핵심 포인트

1JavaScript의 .slice()는 UTF-16 코드 단위로 계산되어 이모지나 조합 문자를 깨뜨릴 수 있음
2Intl.Segmenter의 'grapheme' 모드를 사용하여 사용자 눈에 보이는 실제 글자 단위로 계산해야 함
3단어 중간이 끊기지 않도록 'word' 단위 세그멘테이션을 활용해 마지막 단어 경계를 찾아야 함
4마크다운 문법(**, [link] 등)이 프리뷰에 그대로 노출되지 않도록 정규식을 통한 텍스트 정제가 필요함
5글자 수 제한이 픽셀 너비를 보장하지 않으므로, 여유 있는 버젯 관리가 필요함

이 글에 대한 공공지능 분석

왜 중요한가?

링크 프리뷰는 사용자가 공유된 링크를 클릭하기 전 마주하는 서비스의 첫인상입니다. 이모지가 깨지거나 문법 기호가 노출되는 등의 작은 오류는 서비스의 기술적 완성도와 신뢰도에 부정적인 영향을 미칩니다.

어떤 배경과 맥락이 있나?

대부분의 서비스는 CMS나 사용자 생성 콘텐츠를 기반으로 텍스트를 자동 생성하며, 이때 단순히 문자열을 일정 길이로 자르는 `.slice()` 방식을 사용합니다. 하지만 이 방식은 유니코드의 복잡한 구조와 마크다운 문법을 고려하지 못해 심각한 텍스트 왜곡을 초래합니다.

업계에 어떤 영향을 주나?

정교한 텍스트 처리 로직을 도입함으로써 소셜 미디어 및 메신저 환경에서 클릭률(CTR)을 높이고, 브랜드의 디테일한 사용자 경험(UX)을 강화할 수 있습니다. 이는 단순한 기능 구현을 넘어 제품의 '폴리싱(Polishing)' 단계에서 매우 중요한 요소입니다.

한국 시장에 어떤 시사점이 있나?

한국어는 초성, 중성, 종성이 결합된 구조와 더불어 다양한 이모지 및 특수 문자가 빈번하게 사용됩니다. 따라서 글로벌 표준에 맞는 유니코드 처리 로직을 갖추는 것은 한국 서비스를 글로벌 시장으로 확장할 때 필수적인 기술적 기초가 됩니다.

이 글에 대한 큐레이터 의견

개발자나 창업자에게 이 글은 '디테일이 곧 제품의 품질'이라는 점을 상기시킵니다. 단순히 기능을 동작하게 만드는 것을 넘어, 사용자가 접하는 최종 출력물의 완성도를 높이는 것은 브랜드의 전문성을 결정짓는 핵심 요소입니다. 특히 이모지나 특수 문자가 깨지는 현상은 사용자에게 '관리가 안 되는 서비스'라는 인상을 줄 수 있는 치명적인 결함입니다.

다만, 모든 텍스트 처리에 `Intl.Segmenter`와 같은 복잡한 로직을 도입하는 데에는 트레이드오프가 존재합니다. 단순한 `.slice()`에 비해 연산 비용이 발생하며, 대규모 트래픽이 발생하는 환경에서는 텍스트 생성 로직의 성능 최적화가 추가적인 과제가 될 수 있습니다. 또한, 글자 수(Grapheme count)가 곧 픽셀 너비를 보장하지 않으므로, 폰트와 플랫폼별 렌더링 차이를 고려한 유연한 설계가 병행되어야 합니다.

결론적으로, 서비스의 규모와 성격에 따라 적절한 수준의 정교함을 선택하되, 브랜드 가치를 결정짓는 핵심 접점(Link Preview, Notification 등)에는 반드시 이와 같은 정교한 처리 로직을 적용할 것을 권장합니다.

원문 보기 →