가독성 개선을 위한 최신 CSS 테크닉

우리는 다양한 방법으로 글을 읽습니다. 글을 읽는 목적도 어떤 필요에 의해서, 기술이나 언어 습득을 위해서, 습관적으로 등 다양합니다. 그리고 집에서 소설을 읽는 것은 기차에서 읽는 것과 다르고, 단순히 종이 신문을 읽는 것은 온라인 버전으로 뉴스를 읽는 것과 다릅니다. 다른 활동과 마찬가지로 무언가를 읽는 것도 빠르게 잘하려면 연습이 필요합니다. 보통 우리는 읽는 행위에 익숙해지면서 빠르고 효과적으로 읽을 수 있게 됩니다.

효과적인 읽기를 위해서 읽기 환경을 디자인하고, 개발하려면 어떤 점에 집중해야 할까요? 어떻게 하면 읽는 것에 어려움이 있는 사람이나 난독증이 있는 사람들을 포함한 모든 독자에게 쉽게 접근할 수 있고, 편하고 다양한 경험들을 제공할 수 있을까요?

공백, 글자, 문장 그리고 문단

단위

웹 페이지에는 글자 폰트를 설정해주는 여러 가지 단위가 있습니다. 먼저 웹 페이지상 텍스트 구조를 설계하기 위해서 이 단위들을 어떻게 이용할 수 있을지 알아야 합니다. 웹상의 읽기 환경을 위해서는 뷰포트와 사용자의 읽기 습관 같은 몇 가지 요소들을 고려해야 합니다. 유연성이 필요하기 때문에 주로 em과 rem이 쓰입니다. 예를 들어, 문단 사이에 공백을 설정할 때 em을 이용하면 글자 크기에 변화가 있어도 수직 정렬을 유지할 수 있습니다. 하지만 해당 위치에서 serif 폰트가 san-serif 폰트로 바뀔 때는 이슈가 될 수 있습니다. 폰트 크기가 같아도 눈으로 볼 때는 다르게 보일 수 있기 때문입니다. 일반적으로는 소문자 x 를 기준(x높이)으로 글자 크기를 구분해왔습니다.

폰트 크기 조정(font-size-adjust) 속성을 지정하면 소문자를 기준으로 높이를 맞춰주기 때문에 겉으로는 크기가 같아 보이게 할 수 있습니다. 단점은 이 속성이 최근에 적용되기 시작했기 때문에 파이어폭스와 크롬, 마이크로소프트 엣지에서만 지원된다는 것입니다. 이 속성은 @support 태그를 이용해서 언어가 해당 속성을 지원하지 않을 경우 자동적으로 다른 적절한 폰트를 출력해주는 방식^{progressive enhancement}으로도 이용할 수 있습니다.

See the Pen <a href=’https://codepen.io/books-webactually/pen/gOLOrrb’>gOLOrrb</a> by webactually (<a href=’https://codepen.io/books-webactually’>@books-webactually</a>) on <a href=’https://codepen.io’>CodePen</a>.

위 방식은 폰트가 지원되지 않을 때, 다른 적절한 폰트(예를 들어, 구글 폰트를 이용하는 것과 같이)를 원격으로 로드해서 바꿔주기도 합니다.

최적의 줄높이

우리는 글자를 검은색과 흰색의 조화라고 생각합니다. 글자는 흰색(···)이고, 그 흰색은 글자의 검은색 사이 공백입니다.
— 마시모 비넬리^{Massimo Vignelli}, “헬베티카^Helvetica“, 2007

글자는 검은색보다 흰색의 여백이 더 중요하기 때문에 웹 페이지나 웹 애플리케이션에 이 사항을 적용할 때도 문단과 줄바꿈 사이에 line-height, margin과 같은 여백을 주는 속성들을 고려해야 합니다.

소문자의 x높이를 기준으로 폰트 크기를 비교하는 것은 줄높이(line-height)를 자연스럽게 보이게 합니다.

브라우저에서 줄높이 기본값은 1.2 이고, line-height 속성 값이 아무것도 주어지지 않으면 폰트 비율에 맞게 적용됩니다. 다른 폰트가 아니라 Times New Roman에만 적합한 값은 어떤 것일까요? 또 줄높이가 폰트 크기에 비례해서 조정되지 않고, 텍스트 종류 같은 요소들로 변동된다는 것도 고려해야 합니다. 8포인트에서 14포인트 사이의, 일반적으로 긴 길이의 독해에서 많이 사용하는 크기로 테스트해보면서 지면상 소문자의 x높이와 맞는 최적의 줄간격 비율이 37.6 이라는 것을 알 수 있었습니다.

지면으로 읽는 것과 비교해보면, 화면에서 글을 읽는 것은 보통 행간의 여백이 조금 더 넓어야 합니다. 그래서 우리는 온라인 환경에서 비율을 32 정도로 조정해야 합니다. 실제 값은 CSS 에서 아래와 같은 방식으로 계산될 수 있습니다.

See the Pen <a href=’https://codepen.io/books-webactually/pen/rNWNeMd’>rNWNeMd</a> by webactually (<a href=’https://codepen.io/books-webactually’>@books-webactually</a>) on <a href=’https://codepen.io’>CodePen</a>.

글을 읽는 맥락상 이렇게 행간 여백의 비율을 속성으로 지정하는 것은 글자 속성을 적용할 수 없을 때나 디자이너가 설정한 폰트를 사용자가 임의로 덮어씌울 때는 물론, serif, san-serif 모두에 최적의 줄높이를 설정할 수 있도록 합니다.

비율 설정하기

폰트 사이즈를 조정하고, 높이를 계산하기 위해 기존 단위를 사용하면서 문단 사이 간격을 적절하게 설정하고, 가독성을 향상시키기 위해서 글자 크기의 비율을 정할 필요가 있습니다. 앞서 언급했던 것처럼 줄높이는 연속적으로 늘어나지 않고, 텍스트의 종류에 따라서만 변동됩니다. 글자 크기가 큰 타이틀의 경우라면 더 큰 비율의 줄높이가 적용될 수 있도록 해야 합니다.

See the Pen <a href=’https://codepen.io/books-webactually/pen/PoboNbP’>PoboNbP</a> by webactually (<a href=’https://codepen.io/books-webactually’>@books-webactually</a>) on <a href=’https://codepen.io’>CodePen</a>.

글자와 단어 간격

가독성을 개선하려면 난독증이나 학습 장애를 가진 독자도 고려해야 합니다. 발달성 난독증의 경우에는 읽기, 토론, 원인이 진행되는 것을 연구하는 연구 자료에도 영향을 주게 됩니다. 글을 읽을 때(크기나 모양, 색상 등)의 시각적 변화, 폰트상의 변화가 영향을 미친다는 것을 이해하기 위해 과학적인 연구들을 활용해보는 것도 매우 좋습니다.

예를 들어, 어떤 연구에서 우리 회사는 난독증 친화적인 폰트를 위한 가독성 테스트^{Testing Text Readability of Dyslexia-Friendly Fonts} 를 진행했는데 가독성을 높여주는 폰트 모양은 크게 도움이 되지 않지만 단어 사이에 간격^tracking을 두는 것은 도움이 된다는 사실이 밝혀졌습니다. 이러한 연구 결과는 또 다른 연구 자료 “시각적인 것은 독해에 얼마나 큰 영향을 주는가: 과복합세포와 발달성 난독 장애에 대한 흥미로운 사례^{How the Visual Aspects Can Be Crucial in Reading Acquisition: The Intriguing Case of Crowding and Developmental Dyslexia} “에 의해 증명되었습니다.

이러한 연구들은 간격을 조절해주는 것과 같은 효과적인 툴들을 제공하면서 웹 페이지의 유연성과 반응형을 뽑아내야 한다는 것을 의미합니다. 일반적으로 글자를 크게 보이도록 할 때 CSS 속성인  letter-spacing과 word-spacing으로 글자와 단어 사이 간격을 조정합니다.

See the Pen <a href=’https://codepen.io/books-webactually/pen/wvoBmeq’>wvoBmeq</a> by webactually (<a href=’https://codepen.io/books-webactually’>@books-webactually</a>) on <a href=’https://codepen.io’>CodePen</a>.

여기에서 문제점은 글자 간격이 무조건 적용되어 여백이 적절하게 적용되지는 않으면서 폰트의 흐름을 깬다는 것입니다. 또 다른 방법으로 폰트 렌더링을 조금 더 통제하기 위해서 폰트 변이^{variable fonts} 속성을 사용할 수도 있을 것입니다.  폰트 디자이너들은 간격을 변수로 두고 선형적이지 않은 방법으로 파라미터화^parameterize할 수 있고, 어떻게 하면 폰트 굵기와 글자 모양이 독자의 습관에 더 잘 맞춰질 수 있는지 판단할 수 있게 됩니다. 다음은 Amstelvar 폰트를 이용하면서 디자이너가 의도한 대로 시각적인 사이즈, 간격과 대비를 높일 수 있다는 것을 보여주는 사례입니다.

See the Pen <a href=’https://codepen.io/books-webactually/pen/xxRbWYK’>xxRbWYK</a> by webactually (<a href=’https://codepen.io/books-webactually’>@books-webactually</a>) on <a href=’https://codepen.io’>CodePen</a>.

Web.dev의 게시 글 “다양한 웹 폰트 입문^{Introduction to Variable Fonts on the Web}“에서는 웹 폰트에 어떤 종류가 있는지, 또 어떻게 이용하는지를 알려줍니다.  Variable Fonts 툴을 활용해서 폰트가 어떻게 적용되는지 확인해봅시다.

너비와 정렬

글을 읽는 환경을 최적화하기 위해서는 문장의 글자 수와 공백으로 이루어진 문단 한 줄의 너비도 신경 써야 합니다. 글을 읽는 동안 우리의 눈, 안구 내부의 중심와(foveatio: 황반의 한 부분. 물체를 바라볼 때 중심와의 역할이 활성화됩니다)가 여덟 개 글자에 집중하게 됩니다. 우리 눈은 한 번에 연달아 있는 몇 개의 글자만 인식하기 때문입니다. 이런 이유로 문장의 행갈이가 중요합니다.  글을 읽으면서 마주할 수 있는 가장 복잡한 동작은 문장의 끝에서 다음 문단의 시작으로 초점을 옮길 때입니다. 눈은 글의 종류에 따라 적절한 글자 수를 계속 유지하는데 기본적인 문단에서 한 문장은 보통 60~70개의 글자로 이루어집니다. 이 값은 ch 단위로 문단의 너비를 설정합니다.

See the Pen <a href=’https://codepen.io/books-webactually/pen/qBqEooE’>qBqEooE</a> by webactually (<a href=’https://codepen.io/books-webactually’>@books-webactually</a>) on <a href=’https://codepen.io’>CodePen</a>.

또한 justification 속성도 문장을 독해할 때 중요한 역할을 합니다. 하이픈을 지원하는 언어라도 브라우저마다 최적의 상태로 적용되는 것은 아니기 때문에 항상 확인이 필요합니다. 하이픈 없이 justified text 속성을 사용하면 공백이 생기게 되고, 문장 중간에 공백이 있으면 읽기에 방해가 되기 때문에 하이픈을 설정하지 않고 justified 속성만 사용하는 경우는 피해야 합니다.

See the Pen <a href=’https://codepen.io/books-webactually/pen/ZEBYxxw’>ZEBYxxw</a> by webactually (<a href=’https://codepen.io/books-webactually’>@books-webactually</a>) on <a href=’https://codepen.io’>CodePen</a>.

하이픈 내장을 지원하지 않는 언어에서는 수동으로 하이픈을 지정해 사용할 수 있습니다. 클라이언트와 서버에서 엔터티 코드(‐)를 주입할 수 있는 몇 가지 알고리즘이 있습니다. 이 하이픈 기호는 한 단어 내에 어느 부분이 분절되어야 하는지 알려줍니다. 이 코드는 하이픈으로 변환되기 때문에 한 줄의 가장 끝에 위치하지 않는 한 코드 그대로 보이지는 않을 것입니다. 이러한 역할을 잘 적용시키기 위해서 hyphens라는 속성을 명시적으로 설정하는 것이 좋습니다.

전경의 대비

배경과 글자나 단어의 대비는 가독성을 형성하는 기본 요소입니다. 웹콘텐츠접근성지침^{WCAG; Web Content Accessibility Guidelines}은 글자와 배경의 대비를 관리하면서 서로 다른 기준(A, AA, AAA)을 세우고 가이드라인을 명문화해왔습니다. 텍스트와 배경 간 대비는 디자인과 개발 환경에서 서로 다른 툴로 측정될 수 있습니다. 자동 유효성 검사가 지원된다는 것을 기억하고, 실제와 같은 결과를 낼 거라고 확신하지 맙시다.

CSS 변수와 calc 속성을 사용하면 배경과 비교해서 가장 효과적인 색상이 무엇인지 계산해 사용할 수 있습니다. 배경 색상에 따라 테마별로 색상을 변환하면서 사용자에게 sepia, light gray, night mode 등과 같은 다양한 타입의 보색을 보여줄 수 있습니다.

See the Pen <a href=’https://codepen.io/books-webactually/pen/mdOyxLW’>mdOyxLW</a> by webactually (<a href=’https://codepen.io/books-webactually’>@books-webactually</a>) on <a href=’https://codepen.io’>CodePen</a>.

See the Pen <a href=’https://codepen.io/books-webactually/pen/jOVEzxp’>jOVEzxp</a> by webactually (<a href=’https://codepen.io/books-webactually’>@books-webactually</a>) on <a href=’https://codepen.io’>CodePen</a>.

또한 prefer-color-scheme 미디어 쿼리가 도입되고, 브라우저가 지원하면서 사용자 환경^{user preference}에 따라 화면의 라이트 모드에서 다크 모드로의 변환이 용이해졌습니다.

더 나아가기

읽기 환경을 최적화하기 위해 디자인하고 개발하는 데는 많은 분야의 전문적인 작업과 지식이 필요합니다. 팀에 이러한 지식이 확산될수록 사용자 환경은 더욱 개선될 수 있습니다. 다음 내용에서는 좋은 결과로 이끌어주는 몇 가지 포인트를 소개합니다.

디자이너를 위한 팁

• 프로젝트의 일환으로 기술적인 디테일보다 시멘틱한 구조를 고려하세요
• 도큐먼트의 레이아웃과 폰트 메트릭스를 고려해서 왜, 어떻게 해당 레이아웃과 폰트를 선택하게 됐는지 생각해보세요. 개발자들이 디자인을 올바르게 적용할 수 있도록 도와줄 겁니다.
• 가능한 한 글자 베리에이션을 최소화하세요(폰트 패밀리, 스타일, 변이를 줄이세요).

개발자를 위한 팁

• 왜 이러한 디자인으로 결정되었는지, 어떻게 적용할지 이해하기 위해서 타이포그래피의 원리를 파악하세요.
• 사용자가 선호하는 환경에 따라 반응형 레이아웃(paddings, margins, gaps)이 적용될 수 있도록 폰트 사이즈 비율에 맞는 단위를 사용하세요.
• 폰트 메트릭스를 임의적으로 조작하는 것은 피하세요. 폰트의 규범이 지켜지지 않으면 가독성이 떨어집니다.

팀을 위한 팁

• WCAG 의 원칙을 읽고 알아두세요.
• 프로젝트 밖의 독립적인 이슈가 아니라 프로젝트의 일환으로 웹 접근성과 호환성을 고려하세요.

읽기는 단순한 활동이 아닙니다. 웹 타이포그래피와 개선 방법의 연구 결과들에 대한 많은 자원이 있음에도 불구하고, 가독성을 향상시키기 위한 마술적인 방법은 없습니다. 대부분 감당할 수 있는 것들이지만 보다 다양한 변수들을 고려하는 것이 훨씬 좋은 방법일지도 모릅니다.

폰트 사이즈, 폰트 패밀리와 같이 사용자가 설정해 쓰고 있는 브라우저 설정 사항들을 배려해 문단 간 줄높이를 설정할 때는 ex 단위를 사용하고, 문단의 너비는 ch 단위를 이용해서 적절하게 적용할 수 있습니다. 더불어 글자와 단어들 사이의 여백을 조정하기 위해서 폰트 변수를 사용할 수 있습니다. 또 시각적 장애나 난독증이 있는 독자들을 위해 글자와 배경 대비를 높이기 위해서 글자의 두께를 조정할 수도 있을 것입니다. CSS 변수를 사용해서 사용자가 선호하는 테마를 제공함과 동시에 자동적으로 글자와 배경 간 대비를 높일 수도 있습니다.

위 내용은 모두 사용자의 필요와 선호에 맞게 최적화된 동적 페이지들을 만들게 해줍니다. 마지막으로, 사소한 구현이나 기술적 세부 사항 하나하나가 큰 차이를 만들 수 있다는 점을 감안해 최종 결과물을 이용하여 사용자의 읽기 성능을 테스트하는 것이 필수적입니다.

관련 자료

• 제시카 갈리우시^{Jessica Galliussi}, 루치아노 페론디^{Luciano Perondi}, 쥬세페 치아^{Giuseppe Chia}, 월터 가비노^{Walter Gerbino}, 파올로 베르나디스^{Paolo Bernardis}의 “난독증의 텍스트 가독성 측정 – 친화적인 폰트^{Testing Text Readability Of Dyslexia-Friendly Fonts}“(2020)
• 시몬느 고리^{Simone Gori}, 안드레아 파코에티^{Andrea Facoetti}의 “시각적인 것은 독해에 얼마나 큰 영향을 주는가: 과복합세포와 발달성 난독 장애에 대한 흥미로운 사례^{How The Visual Aspects Can Be Crucial In Reading Acquisition: The Intriguing Case Of Crowding And Developmental Dyslexia}“(2015)