이 게시물은 텍스트 접근성 개선 프로젝트와 그로 인한 제품 성과를 공유하는 글입니다.

문제

• 앱 내에서 기기 글자 크기 설정이 반영되지 않아 많은 사용자에게 가독성 문제 발생
• 서버 렌더링 시 기기 설정을 모르는 상태에서 생성된 HTML로 인해 초기 로드에서 글자 크기 변경이 발생하는 FOUT 문제 존재

해결 방법

• 디자인 토큰의 font-size를 CSS 변수로 치환하여 단계별 가변 글자 크기 체계 도입
• React Native에서 웹뷰 요청에 Cookie로 fontScale 전달하고 Next.js SSR에서 해당 값을 읽어 data-dynamic-typography로 서버 사이드 렌더링 적용
• CSR/SSG/SSR별로 useLayoutEffect와 렌더 지연 로직을 조합해 렌더링 방식에 구애받지 않는 동작 보장

성과

• AB 테스트에서 거래액, 주문 횟수, ARPU 상승과 CTR 및 유저당 클릭수 증가 확인
• 특히 글자 크기 XLarge 이상 사용자 그룹에서 효과가 큼