dynamic-subset font-wieght:600 사용시 폰트 깨짐 about pretendard

[hiddenest]

@hyohyoooo 안녕하세요! URL이 잘못된 것 같은데 혹시 확인 가능하실까요?

hiddenest 가 orioncactus로 바뀌어야 합니다!
https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css

[hyohyoooo]

@hyohyoooo 안녕하세요! URL이 잘못된 것 같은데 혹시 확인 가능하실까요?

hiddenest 가 orioncactus로 바뀌어야 합니다!
https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css

안녕하세요!
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');
위의 주소로 import 했으나 이슈가 발생하고있습니다ㅠㅠ

[kms0219kms]

@kms0219kms 1.2.9 버전이 나온 적이 있었던가요? 이 저장소에는 그런 태그가 없는 것 같고, cdnjs와 jsdelivr에서도 여전히 1.2.2 버전이 최신으로 표시되고 있습니다. #65 이슈 때문에 주요 CDN들이 1.3.0을 가져가는 데 실패하는 바람에 일부 서브셋 파일이 누락되거나 잘못 올라간 상태로 서비스중인 것은 아닌지 의심되네요.

태그를 잘못 확인했네요. 1.2.2로 사용해 주시는것이 정확합니다.

[kijin]

@orioncactus jsDelivr에서도 여전히 문제가 있습니다.

며칠 전 아래의 1번 URL에서 폰트를 로딩했을 때 일반적이지 않은 font-weight(400, 600 등)의 일부 글자가 이상하게 표시되는 현상이 있었고, 2번 URL로 변경하자 증상이 사라졌습니다.

실제로 두 파일의 크기와 내용이 다릅니다. jsDelivr에서는 1.2.2 버전이 최신으로 표시됨에도 불구하고, 버전 태그 없이 요청하면 1.3.0 버전을 제공하고 있습니다. (npm 용량 문제로 새 테그를 인식하지 못하는 듯)

1. https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css
2. https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.css

그러나 1.3.0 버전의 문제라기보다는, 장기간 캐싱되는 CDN을 사용하는 것 자체가 원인으로 생각됩니다.

이 문제를 재현하기 어려운 이유는 사용자 브라우저의 캐시 상태에 따라 증상이 다르기 때문입니다. dynamic subset 방식의 특성상 수백 개의 폰트 파일 중 필요한 것만 다운받아서 사용하므로, 과거에 어떤 내용의 페이지를 열람했는지에 따라 사용자마다 서로 다른 파일을 캐싱하여 갖고 있게 됩니다. 그런데 만약 새 버전에서 각각의 subset에 해당하는 코드 포인트의 범위가 달라졌다면, 예전 버전의 폰트 파일을 캐싱해 놓은 브라우저는 그 파일과 맞지 않는 코드 포인트를 찾으려다가 실패하고 다른 폰트로 대체하게 됩니다. 흔하지 않은 코드 포인트와 font-weight의 조합일수록 이런 현상이 더 자주 나타날 테고요.

즉, 버전 태그를 붙이지 않으면 CDN에서 제공하는 URL은 그대로이기 때문에, 예전 버전의 subset 파일과 새 버전의 subset 파일들이 사용자 브라우저의 캐시 내에서 뒤섞여 랜덤으로 문제를 일으키는 것 같습니다. 개발자도구를 켜고 캐시를 비우고 증상을 확인하려고 하면 당연히 재현이 안 되지요. CDN이 아닌 일반적인 서버에 폰트를 올려놓고 테스트해도 마찬가지로 재현이 안 되고요.

캐시 특성상 시간이 약이겠지만, 앞으로 또 이런 문제가 발생하는 것을 막으려면 dynamic subset 파일명에 버전을 붙여서 버전이 바뀔 때마다 캐시를 무효화시켜 주는 방법이 가장 확실할 듯 하고, 기존 subset이 담당하는 코드 포인트의 범위를 변경하지 않고 새로운 subset을 추가하기만 하는 방법도 있겠습니다. 저는 서버 엔지니어이지 폰트 개발자가 아니므로 후자가 얼마나 어려울지는 모르겠네요.^^

[orioncactus]

@kijin 안녕하세요! 이렇게 소중한 의견을 남겨주셔서 감사드립니다. 저도 관련 내용을 한번 정리해보았습니다.

1. 현재 버전 태그 없이 배포되는 jsDelivr URL 및 latest, 그리고 v1.3.0을 붙인 URL은 모두 동일한 에셋을 표시하는 것을 확인했습니다.
2. 자글거리던 다이나믹 서브셋 문제는, 정확히는 1.3.0 배포 후 jsDelivr에서 반영이 늦어 css까지만 새 버전으로 업데이트되어, 새로 업데이트된 css에 정의된 unicode-range와 아직 업데이트되지 않은 다이나믹 서브셋 에셋의 문자 목록이 서로 호환되지 않아 생겼던 문제입니다. (말씀하신 것처럼 로컬에 남아있는 캐시 문제는 제가 테스트 가능한 컴퓨터에서는 모두 캐시를 초기화했기 때문에, 뒤 5번에서 설명하는 해결 방법으로도 로컬에 남아있는 캐시로 문제가 생기는지는 확인해봐야 합니다.)
3. 이를 해결하기 위해서는, 근본적으로는 jsDelivr를 통해 Pretendard를 제공할 때 @v0.0.0과 같이 버전 태그를 붙였어야 하는 것이 맞습니다. 하지만 이미 버전 태그를 붙이지 않은 jsDelivr URL을 버전 태그를 붙인 새 URL로 안내하기에는, 이미 버전 태그가 없는 jsDelivr URL로 실사용 중인 서비스가 많으며, 버전 태그 추가 권장 안내를 어떻게 안내해야 서비스에서 빠르게 대응하고, 이번 이슈와 같은 상황이 발생하지 않을지가 그려지지 않는 상황입니다.
4. 따라서 근본적인 해결은 어렵더라도, 다른 방법으로 새 버전을 배포할 때 jsDelivr에 웹폰트 디렉터리를 purge하는 식으로 관리하고 있었으나, 1.3.0 버전 배포 당시 에셋에까지는 반영되지 않아 배포 후 약 7시간 정도 (오후 2시 쯤까지) jsDelivr를 통한 Pretendard 다이나믹 서브셋 표시에 문제가 있었습니다.
5. 당시 상황 파악 후 빠르게 jsDelivr에 purge하는 명령어를 에셋에까지 대응해 현재는 jsDelivr로 제공하는 최신 버전 Pretendard 다이나믹 서브셋 에셋에도 모두 반영이 된 상태입니다.
6. 다시 돌아가, 또 다른 방법으로 자글거리는 문제 해결을 위해 말씀하신 것처럼 unicode-range가 뒤바뀌지 않도록 관리하는 것이 있으나, Pretendard 다이나믹 서브셋은 기본적으로 Google Fonts에서 제공하는 Noto Sans Korean의 unicode-range를 바탕으로 하기 때문에, 새로 추가되는 글리프를 이전에 쓰지 않았던 영역에 추가하기에는 또 다른 관리 리스크가 있어 보입니다.
7. 그나마 다행인 것은, 이번 업데이트로 한글 글꼴에 필요한 웬만한 글리프가 추가되어 앞으로 unicode-range에 큰 변화가 없을 것이란 점인데요, 사실 이것도 예상이지 확정이 아니기 때문에, 장기적으로는 3번 방법을 실행하는 것이 가장 안정적이기는 합니다.

이야기가 길어졌는데요, 정리하면, jsDelivr를 통한 Pretendard를 사용하고 있는 서비스에서 @v1.3.0과 같이 버전 태그를 붙여달라고 안내하는 것이 백 번 맞지만, jsDelivr를 통한 Pretendard 다이나믹 서브셋을 사용하는 대부분의 서비스에 버전 태그를 붙이도록 안내할 수 있을까에 대한 걱정입니다 🥲 따라서 일단은 배포 후 jsDelivr에서 반영이 늦지 않도록 에셋 단위까지 purge하는 식으로 관리하고, 다음 업데이트에서 확인할 때 이전에 Pretendard 다이나믹 서브셋을 불러온 사용자가 새로 업데이트된 다이나믹 서브셋을 불러올 때 로컬에 남아있는 캐시로 인한 이슈가 있다면 그때는 근본적인 문제 해결을 위해 방법을 알아보려고 합니다.

긴 내용 읽어주셔서 감사합니다!

[kijin]

@orioncactus 자세한 설명 감사합니다.

jsDelivr에서 자체적으로 캐싱되는 것은 수동으로 purge하실 수 있지만, jsDelivr에서 css 및 폰트 파일을 다운로드한 사용자 브라우저의 캐시 기간은 그것보다 훨씬 깁니다. 오늘 기준으로 버전 태그가 없는 URL은 7일, 버전 태그가 붙은 URL은 최대 1년간 캐시에 보관하도록 지시하는 헤더가 붙는 것으로 보입니다. 문제가 발견된 지도 벌써 일주일 가량 지났으니 아마 곧 자연적으로 해결되지 않을까 싶네요.^^

앞으로는 버전 태그를 붙여서 사용하도록 안내해 주신다면 비슷한 문제가 다시 발생하는 것을 피할 수 있을 것 같습니다. 단, 애써 만드신 새 버전을 더 많은 사람들이 빨리 사용해 준다면 좋을 텐데... 버전 태그를 붙인다면 그 부분에서는 다소 아쉬움이 있겠네요.

멋진 폰트를 배포해 주셔서 다시 한 번 감사드립니다.

[hiddenest]

@hyohyoooo
흠 그렇군요... 제 쪽에서는 잘 나오고 있어서 일시적인 캐시 문제가 아닐까 생각이 듭니다. (Chrome, Safari에서 확인)

1. 혹시 해당 화면을 확인할 수 있는 웹페이지 주소가 있을까요?
2. 시크릿 모드를 사용하셨을 때에도 혹시 동일한 문제가 발생하고 있을까요?
3. 만약 문제가 지속된다면, 일시적으로 눈누 등을 사용해보시는 것을 권장드립니다!

[kms0219kms]

@hyohyoooo 흠 그렇군요... 제 쪽에서는 잘 나오고 있어서 일시적인 캐시 문제가 아닐까 생각이 듭니다. (Chrome, Safari에서 확인)

1. 혹시 해당 화면을 확인할 수 있는 웹페이지 주소가 있을까요?
2. 시크릿 모드를 사용하셨을 때에도 혹시 동일한 문제가 발생하고 있을까요?
3. 만약 문제가 지속된다면, 일시적으로 눈누 등을 사용해보시는 것을 권장드립니다!

눈누는 현재 몇개월 전에 릴리즈된 구버전을 지원하고 있어 추천드리진 않고 있습니다.

혹시 아래와 같이 직전버전을 임포트 하고, 폰트 패밀리를 설정하실 수 있나요?

@import url('https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.2.2/static/pretendard.css'); /* 이전버전 프리텐다드 */

font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', Pretendard, Roboto, 'Segoe UI', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;

[kms0219kms]

@hyohyoooo

[kms0219kms]

혹 1.2.2 버전(위 URL)에서 이슈가 해결되면, 다이나믹 서브셋이 아닌 일반 버전으로 임포트 해보세요.

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

[kms0219kms]

계속 해결이 되지 않는 경우, 해당 URL을 본 이슈에 업로드 해주시면 확인 해 보겠습니다.

[kijin]

@kms0219kms 1.2.9 버전이 나온 적이 있었던가요? 이 저장소에는 그런 태그가 없는 것 같고, cdnjs와 jsdelivr에서도 여전히 1.2.2 버전이 최신으로 표시되고 있습니다. #65 이슈 때문에 주요 CDN들이 1.3.0을 가져가는 데 실패하는 바람에 일부 서브셋 파일이 누락되거나 잘못 올라간 상태로 서비스중인 것은 아닌지 의심되네요.

[orioncactus]

안녕하세요! 미리 답변해주신 @hiddenest님과 @kms0219kms님께 감사드립니다!

@kms0219kms님께서 말씀해주신 것처럼, 현재 1.3.0 버전에서 UNPKG와 cdnjs를 통한 서빙은 #65 이슈로 잠시 사용이 불가능하고, jsDelivr를 통한 사용만 정상적으로 가능한 상황입니다. 그러나 말씀하신 문제 같은 경우 다이나믹 서브셋으로 제공하는 Pretendard를 사용하는 Flex의 경우를 보았을 때 제대로 작동하고 있고, Pretendard에서 제공하는 jsDelivr URL 또한 정상적으로 작동하는 것으로 보아 디렉터리에서 발생하는 문제는 아닌 듯합니다.

혹시나 unpkg와 cdnjs를 사용하고 계시다면, #65 이슈가 해결되기 전까지는 당분간 1.3.0이 아닌 1.2.2 버전으로 사용하시는 것을 추천드립니다.

또한 @kijin님께서 알려주신 것처럼 1.2.9 버전은 없고, 1.3.0 버전 이전은 1.2.2 버전이 맞습니다 😂 참고 부탁드려요!

[orioncactus]

jsDelivr를 이용한 Pretendard 사용에는 문제가 없어 이 이슈는 종결로 처리하겠습니다. 혹시나 문제가 여전히 발생한다면 이 이슈를 다시 열어 언제든지 알려주세요!

[orioncactus]

오..! 버전 태그가 없는 URL은 캐시 기간이 7일로 되어있군요! 소중한 정보를 공유해주셔서 감사합니다. Pretendard를 보다 안정적으로 제공할 수 있는 다양한 방법을 확인해보겠습니다. 이렇게 의견을 남겨주셔서 다시 한 번 감사드립니다!