텍스트 접근성을 개선했더니 거래액이 올랐습니다.

문제 상황

• 기기 글자 크기 설정이 앱에 반영되지 않아 가독성과 접근성 저하
• 글자 확대 시 레이아웃 붕괴와 렌더링 방식별 불일치 문제 발생

원인 분석

• 웹뷰와 Next.js 구조에서 서버는 기기 글자 크기 값을 알 수 없음
• SSR, SSG, CSR마다 HTML 생성 시점이 달라 초기 화면 불일치와 FOUT 발생

해결 방법

• 글자 크기를 단계화하고 CSS 변수로 텍스트 토큰에 반영하는 구조 설계
• Cookie로 글자 크기 값을 서버에 전달해 SSR에서 미리 반영
• SSG, CSR은 렌더링 지연과 useLayoutEffect로 초기 불일치 최소화

적용해볼 점

• 접근성 개선을 단순 UI 변경이 아니라 탐색성과 거래 성과까지 연결된 문제로 볼 필요
• 렌더링 방식이 다른 환경에서도 동일한 기준을 유지하는 공통 레이어 설계 필요