Variable font 사용시 특정 자음깨짐 현상

[KKimj]

안녕하세요.
ㄴ, ㅅ, ㅊ 와 같은 자음이 깨지는 문제를 겪고 있습니다.
다른 variable font 파일(Noto Serif Variable)에서는 발생하지 않아서 이슈 남겨봅니다.
감사합니다.

[orioncactus]

안녕하세요! Safari와 Chrome에서 가변 다이나믹 서브셋으로 제공하는 Pretendard를 썼을 때 이상 증상을 발견하지 못했습니다. 자세한 사용 환경을 알 수 있을까요?

• macOS, 브라우저 버전
• 웹폰트 종류(가변 다이나믹 서브셋 등)
• 증상 재현 가능한 예제 파일 또는 CSS 속성

제가 테스트해본 환경은 다음과 같습니다:

• arm64, macOS 14.2.1, Safari 17.2.1, Chrome 120.0.6099.234, 가변 다이나믹 서브셋 사용

safari-chrome.mov

[ksiom]

@orioncactus 스크린샷을 보니 Flutter화면으로 보이고, 저에게도 같은 증상이 있었습니다.

[kms0219kms]

저도 Flutter에서 재현됩니다.

[eunseoDev]

저도 플러터로 개발중이고 pretendardVaribale.ttf 파일 사용중입니다.
ios에서는 이런 증상이 없는데 android에서 깨지는 현상이 발생합니다.
굵은글자(700w)에서 발생하고 있어요.

[orioncactus]

모두 의견을 남겨주셔서 감사합니다! 이번주에 한번 확인해보고 알려드리겠습니다.

[kjw3676]

@orioncactus flutter에서 적용해 사용하고 있습니다. TextStyle 적용할 때 fontWeight 말고

fontVariations: [
FontVariation('wght', 700),
],

이런 식으로 적용하면 해결되긴 합니다.

[RealYoungk]

같은 이슈를 겪고 있습니다.

[emotionalboySY]

약 3개월이 지났는데요, 현재도 같은 문제가 발생하고 있습니다.

혹시 해당 이슈와 관련하여 수정 진행중인 부분이 있는지 확인 요청드려도 될까요?

[zoomkoding]

@orioncactus 제 플러터 프로젝트에서도 발생하는 이슈라 관련해서 해결 방법나 업데이트 공유 부탁드립니다😭

[orioncactus]

@zoomkoding @emotionalboySY 안녕하세요! 이제야 답장드려 너무나 죄송합니다.

제가 Flutter를 자세히 알지 못하나, 생성형 AI 도움으로 Pretendard Variable을 적용하고 테스트를 해보았는데요, 문제가 나타나지 않습니다. 혹시 문제를 확인할 수 있도록 제가 확인 가능한 리포지토리를 알려주실 수 있을까요?

2024-11-05.11.54.29.mov

[emotionalboySY]

@orioncactus 답글달아주셔서 감사합니다. 기다리고 있었습니다.
지금 구동하신 환경은 Flutter Web으로 확인됩니다.

혹시 Android Emulator 환경 또는 Windows 환경에서 테스트 가능하실까요? 오늘 밤에 따로 확인이 힘드신 경우, 제가 따로 windows에서 exe 형태로 구동할 수 있도록 예시 파일을 업로드 해놓겠습니다.

[orioncactus]

@emotionalboySY 빠르게 확인해주셔서 감사드립니다! Android 또는 Windows에서 문제가 발생하는군요! 오늘 밤에 Windows와 Android 환경에서 다시 확인해보고 알려드리겠습니다.

[orioncactus]

말씀하신 것처럼 증상이 재현되어 해결 방법을 살펴보았는데요, 배리어블 폰트에서 fontWeight를 잘 인식하지 않고 Fake Bold를 적용하는 것을 보아, Flutter에서 배리어블 폰트 속성으로 정의해야 하는 것은 아닐까 싶어서 둘러보니, 참고할 만한 아티클을 찾고, 코드를 아래와 같이 작성할 때 문제가 나타나지 않는 것을 확인했습니다.

style: TextStyle(
    fontFamily: 'PretendardVariable',
    fontVariations: <FontVariation>[
        FontVariation('wght', 400),
    ],
    ...,
),

이와 같이 적용했을 때 다음 영상과 같이 문제 없이 나타납니다.

2024-11-06.11.38.04.mov

이어서 프로젝트에 참고하실 수 있도록 feature/flutter 브랜치에서 flutter_pretendard 프로젝트에 문제가 없는 예시를 업데이트해두었습니다.

혹시나 위 코드로 적용했음에도 문제가 여전하다면 언제든지 알려주세요! 🔥

[emotionalboySY]

빠른 확인 및 답변 감사합니다.

제가 테스트한 소스는 여기에서 확인 가능합니다.

실행 결과에서 가장 아랫줄은 @orioncactus 님께서 작성하신 코드를 재활용한 Variable Fonts 속성이며,
가장 아랫줄을 제외한 나머지는 static Fonts를 사용한 결과입니다.

static font의 경우 fontWeight이 모두 설정되어있는데도 불구하고 모두 같은 굵기로 표시됩니다.
variable font의 경우 굵기 표시는 정상적이지만, 일부 구간에서 폰트 깨짐이 발생합니다.

첫 영상의 실행 환경은 windows, 두번쨰 영상의 실행 환경은 Android입니다.

bandicam.2024-11-07.01-06-00-177.mp4

Screen_Recording_20241107_011541.mp4

확인 후 회신 부탁드립니다.