사용자 중 한 분에게 인스턴스의 텍스트 크기를 늘려 달라는 요청을 받았습니다. 다행히도 해당 사용자는 인터페이스 설정을 통해 개인적으로 쉽게 이를 조정할 수 있습니다(참고: https://meta.discourse.org/my/preferences/interface).
해당 사용자는 다른 사이트와 앱에서는 기기에 큰 글꼴이 선택되어 있으면 자동으로 이러한 조정이 이루어진다고 알려 주었습니다.
Discourse는 이전에 다크 모드를 사용자가 직접 선택하도록만 되어 있었지만, 지난 1년간 올바르게 구성하면 자동으로 적용되도록 변경되었습니다. 텍스트 크기에도 동일한 동적 기능이 적용되면 좋겠습니다. 실제로 이는 훨씬 더 중요한 문제입니다. 시각 장애인은 텍스트가 작으면 해당 설정을 찾기 어렵기 때문입니다.
@awesomerobot 님, 이건 라이트/다크 모드처럼 자동 감지할 수 있는 건가요? 잘 모르겠어서요.
웹 브라우저에서 font-size를 조정하면 Discourse는 다른 웹사이트와 마찬가지로 자동으로 크기가 조정되어야 합니다… 하지만 iOS에서 운영체제의 글꼴 크기를 조정하면 앱의 크기는 영향을 받지만, 웹사이트 글꼴 크기는 반드시 영향을 받지 않는 것 같습니다.
font: -apple-system-body;를 사용하면 시스템(애플에서는 이를 Dynamic Type이라고 부름)과 함께 자동으로 크기를 조정할 수 있습니다. Android는 이를 자동으로 처리한다고 생각하며, 변경 사항이 필요 없을 것 같습니다… 하지만 한 번 더 확인해 보겠습니다.
여기서 시도해 보겠습니다:
PR에 언급했듯이 우회해야 할 몇 가지 특이한 사항이 있지만, 예상대로 작동할 것 같습니다.
Android에는 추가 조치가 필요하지 않습니다. 브라우저가 이미 시스템 설정에 따라 글꼴 크기를 자동으로 조절하기 때문입니다.
Apple iOS Safari에서 모든 웹사이트에 적용할 기본 확대 배율을 설정하는 방법은 다음과 같습니다:
설정 → Safari → 웹사이트 설정 → 페이지 확대 → 기타 웹사이트:
50/75/85/100/125/150/175/200/250/300%
참고: How to Make Text Bigger in Safari for iOS - MacRumors
Discourse 웹사이트에만 기본값으로 font: -apple-system-body;를 적용하면, 일반적으로 단락에 널리 사용되는 기본 font-size: 15px과 완전히 다른 결과가 나옵니다.
이로 인해 모든 Discourse 웹사이트에 대해 특수한 상황이 발생하게 됩니다: 글꼴이 너무 커집니다.
그리고 모든 사용자가 Discourse 웹사이트 도메인에 대해 예를 들어 85%와 같은 특수한 확대 배율을 설정해야 합니다.
또는 사용자가 Safari에서 예를 들어 150%와 같은 더 높은 확대 배율을 이미 설정해 두었다면, 이제 Discourse 도메인에만 이 값을 예를 들어 125%로 설정해야 합니다.
이 기능을 구현하지 않는 것을 강력히 권장합니다!
이 PR의 병합을 되돌려 주십시오.
iPhone iOS에서 시스템 글꼴 설정이 약 150% 수준이고 Safari 페이지 확대가 150%로 설정되어 있을 때 어떤 일이 일어나는지 확인해 보십시오:
font: -apple-system-body;를 적용하면 225%(= 150% * 150%)가 될 수 있습니다.제 지식으로는 Android의 Chrome은 그렇지 않습니다: 시스템 설정에 의해 확대되는 것은 Chrome 인터페이스뿐입니다.
웹사이트 글꼴 크기 확대를 위해 Chrome을 열고 설정 → 접근성 → 텍스트 확장으로 이동하십시오.
여기서 단락만 확대되고, 제목 및 기타 모든 텍스트 요소는 여전히 작은 크기로 남아 있습니다!
이것은 텍스트의 일부만 확대하는 Chrome의 특별한 동작입니다 – "Font Boosting"을 검색하거나 다음을 확인하세요:
iOS에서는 text-size-adjust를 정규화(normalizing)해야 할 수 있습니다:
이것이 Meta에 배포된 후 몇 가지 의도하지 않은 부작용을 발견했습니다. 개발 환경에서는 왜 다르게 작동했는지 확실하지 않으니, 되돌린 후 더 자세히 살펴보겠습니다… 지금은 아마도 이 작업을 수행할 수 없을 것 같습니다… font-size 외에도 너무 많은 부분에 영향을 미치기 때문입니다.
접근성 일반 사항:
단락의 기본 글꼴 크기를 모든 브라우저의 기본 font-size로 설정된 16px로 유지하는 아이디어를 좋아합니다.
이렇게 하면 텍스트 크기가 6~7% 증가합니다(16px/15px = 1,0666).
스마트폰이나 태블릿 같은 모바일 기기에서는 괜찮아 보입니다. 하지만 데스크톱에서는 약간 크고 비정상적으로 보일 수 있습니다.
이 방향으로 진행한다면, 터치 기능이 없는 기기에 대해 15px 기본 글꼴을 사용하도록 특별한 규칙을 구현하는 것도 고려해 볼 수 있습니다. (터치 기능이 없는 기기를 확인하는 방식은 터치스크린이 있는 노트북을 놓칠 수 있으며, 이 경우 더 큰 글꼴 크기가 적용됩니다.)
iOS 기기에서도 여전히 문제가 있나요? 글꼴 크기는 키울 수 있지만, 줄바꿈 위치는 변하지 않습니다. 안드로이드 폰/태블릿에 접근할 수 없어 테스트를 해볼 수 없었습니다.
