유동적인 웹 타이포그라피의 상황 (The State of Fluid Web Typography)

이 글은 Matej LatinThe State of Fluid Web Typography글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다

유동적인 타이포그래피(Fluid typography)는 웹 상에서 읽기 경험을 더 잘 디자인할 수 있는 많은 기회를 제공하지만, 동시에 글꼴 크기 조절이 불가능할 정도로 확장되는 문제와 잠재적인 접근성 문제를 야기합니다. 유동적인 웹 타이포그래프(Fluid Web Typography)를 사용할 준비가 되었습니까?
presentation
뷰포트(viewport) 단위에 대한 브라우저 지원이 한동안 양호했습니다. 지금 살펴보니 2013-2014년 이후 대부분의 브라우저가 이를 완벽하게 지원했습니다. Microsoft의 Edge는 2017년 10월에 출시된 Edge 16 버전 이후 이러한 Edge만 지원하므로 예외입니다(놀랄 것도 없습니다). 그래도 그 뒤 2년입니다. 다른 모든 주요 브라우저가 5-6년 동안 뷰포트 유닛을 지원하는데, 어떻게 웹 사이트에서 유동적인 타이포그래피(Fluid typography)를 더 자주 볼 수 없습니까? 웹 사이트가 뷰포트 변화에 어떻게 적응하는지 보기 위해 브라우저 창의 크기를 조정하는 사람 중 한 명이라는 것을 인정해야 합니다. 저도 그렇게 많이 하는데, 유동적인 웹 타이포그래피(Fluid Web typography)로 웹사이트를 마지막으로 본 게 언제인지 기억이 안 나요. CSS Tricks가 사용하는 것은 알지만 다른 예는 생각나지 않습니다. 그래서 저는 왜 이 멋진 웹 타이포그래피 기능의 채택이 더 널리 퍼지지 않았는지 궁금하게 생각합니다.
원인이 될 만한 단 한 가지도 없을 것 같아서 그 질문에는 대답하기 어렵습니다. 요약하면 다음과 같습니다.
  1. 응답성이 뛰어난 웹 디자인/개발은 여전히 어렵고 복잡합니다.
  2. 웹 타이포그래피(아직도)는 많은 디자이너/개발자로부터 중요한 것으로 인식되지 않습니다.
  3. 접근성 문제가 발생할 수 있습니다.
  4. 유동적인 웹 타이포그래피(Fluid Web typography)는 매우 까다로울 수 있습니다.
이 내용 하나하나 자세히 살펴보겠습니다.

응답성이 뛰어난 웹 디자인은 여전히 어렵고 복잡합니다.

많은 에너지와 노력이 위에 나열된 문제들 중 첫 번째 문제로 들어갑니다. 응답성이 뛰어난 웹 사이트를 구축하기 위해 우리가 마음대로 사용할 수 있는 툴은 지금까지 사용했던 것 중 최고입니다. 요즘에는 응답성이 뛰어난 웹 사이트를 구축하는 것이 훨씬 쉬워졌지만 여전히 상당한 노력이 필요합니다. 툴을 선택하고 테스트한 다음 채택하는 데 웹 설계 프로세스에서 많은 시간이 소요됩니다. 우리는 아직 웹사이트를 디자인하고 도구는 어느 정도 자동적으로, 대부분의 기기에서 잘 작동하도록 하는 수준에 이르지는 못했습니다. 예를 들어, 실제 최종 제품이 만들어지는 코드와 너무 다른 디지털 디자인 도구에서 웹 사이트를 설계(정적 이미지 그리기)합니다. 이러한 도구는 기본적인 응답성이 뛰어난 웹 디자인 기법을 거의 지원하지 않기 때문에, 우리는 그 안에 있는 유동적인 타이포그래피(Fluid typography)에 대해 말할 수도 없습니다.

웹 타이포그래피가 중요한 것으로 인식되지 않습니다.

두번째는 Better Web Type으로 도전해 보고자 하는 것입니다. 이미 많은 유형의 괴짜들이 있지만, 저는 웹에서 사용되는 타이포그래피의 질에 관심이 많은 사람들이 대부분이라는 것이 약간 슬프다고 생각합니다. 안타깝게도, 많은 웹 디자이너와 개발자들은 여전히 웹 타이포그래피를 글꼴을 선택하고 웹 사이트에 대한 텍스트 크기를 설정하는 것으로 생각합니다.

유동적인 웹 타이포그래피(Fluid Web typography)에는 접근성 문제가 있습니다.

웹 사이트를 설계하고 구축할 때 접근성에 대해 생각하는 사람은 매우 적습니다. 저는 이 탐사를 하면서 이것을 구체적으로 보고 싶습니다. 전에 유동적인 웹 타이포그래피(fluid web typography)에서 몇 가지 접근성 문제를 발견했지만 아무도 이것에 대해 말하지 않았습니다. 여기 저기서만 언급됩니다.

유동적인 웹 타이포그래피(fluid web typography)는 까다롭습니다.

글꼴 크기를 설정하는 데 뷰포트 단위를 사용하는 것은 어렵습니다. 저는 사람들이 저에게 유동적인 타이포그래피(fluid typography)로 실험을 했지만 실제로 그것을 라이브 웹사이트에서 사용한 적은 없다고 말하는 이메일을 많이 받습니다. 하지만 유동적인 웹 타이포그래피(fluid web typography)는 까다로울 필요가 없습니다. 우리는 단지 그것을 쉽게 얻을 수 있고 더 잘 만들 수 있는 방법들이 필요합니다. 그리고 많은 똑똑한 사람들이 그것을 가능하게 합니다. 이제 몇 가지 접근법을 살펴봅시다. 어떤 방법이 가장 효과적이고, 어떤 방법이 유동적인 웹 타이포그래피(fluid web typography)를 덜 까다롭게 하고, 관리하기 쉽고, 더 낫게 만드는지 알아보겠습니다. 따라서 이 접근 방식도 사용할 때 접근성 문제가 있는지 살펴봅니다.

반응형 타이포그래피

좋아요, 그럼 오늘 가장 흔한 것부터 시작하죠. 유체 웹 타이포그래피를 탐구하는 이 여정의 출발점은 실제로 반응하는 웹 타이포그래피입니다. 오늘날 웹 디자인에 가장 일반적인 접근 방식(반응형 웹 디자인)을 채택하여 모바일 레이아웃과 글꼴 크기로 시작하고 기본 글꼴 크기를 설정하고 이를 기반으로 다른 크기를 정의하는 것이 인기입니다. 이는 다음과 같이 간단할 수 있습니다.
html { font-size: 100%; // Usually 16 pixels }
h1 { font-size: 3rem; // 3 × base font size (3 × 16px) }
여기서는 기본 글꼴 크기를 브라우저의 기본 글꼴 크기(일반적으로 16px)와 일치하도록 설정합니다. 이 단계는 접근성을 염두에 둔 웹 사이트를 만들 때 중요한 단계입니다. 나중에 다시 살펴보겠습니다. 하지만 다른 장치와 화면 크기에 대해 생각해 보고 웹 사이트의 레이아웃을 다시 정렬하고 그에 따라 글꼴 크기를 다시 정의해야 합니다. 따라서 미디어 쿼리를 사용하여 레이아웃과 글꼴 크기가 변경되는 breakpoints를 정의합니다.
html { font-size: 100%; @media and (min-width: 768px) { font-size: 112.5%; } }
h1 { font-size: 3rem;
@media and (min-width: 768px) { font-size: 3.5rem; } }
위의 예에서는 기본 글꼴 크기를 다시 정의하고 일반적인 태블릿 화면에서 볼 수 있는 크기로 늘렸습니다. 화면이 더 넓어지면 작업할 공간이 더 넓어지므로 글꼴 크기의 변화가 더욱 뚜렷해질 수 있습니다. 따라서 기본 3rem이 아닌 1번 방향의 크기를 3.5rem으로 늘립니다.
CodePen에 대한 기본적인 반응형 타이포그래피 예를 살펴봅니다. 이 기능은 모든 브라우저에서 지원되며 액세스에 문제가 없습니다. 그렇다면 왜 우리는 그것을 개선할 필요가 있을까요? 많은 사람들이 글꼴 크기 조정은 우리가 정의한 breakpoints에서만 일어난다는 사실에 대해 걱정하고 있습니다. 위의 예에서, 우리 웹사이트의 독자는 화면 너비 768픽셀까지 16픽셀로 설정된 텍스트 단락을 볼 수 있습니다. 태블릿으로 웹 사이트를 읽는 경우 기본 글꼴 크기는 18픽셀(112.5%)입니다. 이런 사고방식의 가장 큰 문제는 사용자들에게 초점을 맞추는 것이 아니라 자기 자신의 관점에 너무 많이 집중하는 것이라고 생각합니다. 브라우저 창의 크기를 조정하면 다음과 같은 항목이 표시됩니다.
presentation
예, 글꼴 크기는 정의한 breakpoints에서만 변경되지만 사용자가 장치의 설정을 통해 텍스트 크기를 완전히 제어할 수 있다는 사실을 잊고 있습니다. 데스크톱 컴퓨터에서 웹 사이트에 액세스하는 경우 18픽셀 기본 글꼴 크기가 충분하지 않으면 CSS에서 픽셀과 같은 비관계 단위를 사용하여 기본 글꼴 크기를 재정의하여 이 컨트롤을 제거하지 않으면 웹 사이트의 크기를 쉽게 조정할 수 있습니다.

장점

  • 사용자는 접근성 문제 없이 글꼴 크기를 제어할 수 있습니다.
  • 좋은 접근 방식을 사용하면 몇 개의 미디어 쿼리를 통해 다양한 화면 너비의 많은 부분을 처리할 수 있습니다.

단점

  • 글꼴 크기는 대부분 정적이며 변경 내용은 미리 정의된 breakpoints(화면 폭)에 연결됩니다.
  • 큰 화면의 많은 화이트 스페이스, 글꼴 크기는 적응하지 못합니다. 결국 중앙의 한 열 레이아웃을 사용하는 웹 사이트가 됩니다.

완전히 유동적인 웹 타이포그래피(fluid web typography)

좋아요, 그럼 반응형 타이포그래피 접근법이 이상적이지 않다는 결론을 내릴 수 있겠네요. 효과가 있긴 한데 더 나은 걸 원해요 우리가 통제할 수 있는 뭔가가 있어요 특정 모바일 화면, 태블릿 화면, 바탕 화면뿐만 아니라 모든 화면 크기에 이상적인 글꼴 크기를 원합니다. 구조 방법은 유동적인 웹 타이포그래피(fluid web typography)입니다! 글쎄요, 그건 두고 볼게요.
뷰포트 유닛이 조금 전에 도입되었습니다. 아이디어는 간단합니다. 뷰포트 높이와 뷰포트 폭 단위를 사용하여 CSS의 모든 크기를 정의할 수 있습니다. 글꼴 크기를 포함합니다. 제 생각에, 뷰포트 유닛은 세바스찬 에버렐린이 해커 눈 글에서 설명한 것과 유사하게 구체적이고 대부분 고정된 유형의 웹사이트 레이아웃을 확장하는 방법으로 소개되었습니다.
그러나 그럼에도 불구하고 뷰포트 유닛은 오랫동안 글꼴 크기를 유연하게 확장하는 방법으로 사용되어 왔습니다. Chris Coyier는 2012년에 이것에 대해 썼고 그것에 대해 흥분했습니다. 왜냐하면 우리는 한 줄의 이상적인 너비가 약 80자이고 "이 장치들은 여러분이 그것을 완벽하게 느끼고 그 경험을 어떤 크기로든 확장시킬 수 있게 해준다"는 것을 알기 때문입니다.
그건 다 좋은데 실제로 그렇게 간단하지는 않아요. 다음과 같은 작업을 수행한다고 가정해 보겠습니다.
html { font-size: 1.3vw; }

h1 { font-size: 3vw; }
뷰포트 폭 단위로 기본 글꼴 크기를 정의합니다. 즉, 응답성 타이포그래피의 경우와 같이 사전 정의된 중단점뿐만 아니라 화면 너비의 변경 시마다 글꼴 크기가 조정됩니다. 그러나 화면 너비의 변화가 매우 현저하기 때문에(노트북 및 데스크톱 컴퓨터에 비해 모바일 크기) 글꼴 크기가 매우 빠르게 변경됩니다. CodePen에서 이 유동적인 타이포그래피(fluid typography) 예를 살펴보고 브라우저 창의 크기를 조정해 봅니다. 다음과 같은 것을 볼 수 있습니다.
presentation
글꼴 크기가 더 작은(supposedly mobile) 화면 크기에서 얼마나 작아지는지 알 수 있습니까? 너무 작아요, 어떻게 고칠 수 있죠?

장점

  • 실제로, 저는 이 접근법을 반응형 타이포그래피와 결합하지 않고는 사용할 수 있는 어떤 장점도 보지 않습니다.

단점

  • 글꼴 크기를 정의하는 데 Viewport 단위를 사용하는 것의 한 가지 단점은 글꼴 크기에 액세스할 수 없다는 것입니다(사용자가 특정 브라우저에서 글꼴 크기를 제어할 수 없음).
  • 글꼴 크기에 대해 뷰포트 단위를 사용하면 사용자의 기본 글꼴 크기(브라우저에서 설정)가 재정의되며, 또 다른 접근성 문제가 발생합니다.
  • 제어할 수 없는 글꼴 크기는 극에서 극으로 빠르게 확장됩니다.

미디어 쿼리를 많이 추가하여 작동합니다.

따라서 완전히 유동적 웹 타이포그래피(fully fluid web typography) 방식은 분명히 작동하지 않습니다. 아이러니하게도, 이것을 작동시키는 유일한 방법은 빠르게 변화하는 글꼴 크기를 조절하기 위해 반응하는 타이포그래피 기술을 사용하는 것입니다. 그러나 응답성 있는 웹 타이포그래피 방식과는 달리, 이 경우에는 글꼴 크기를 제한하기 위해 많은 미디어 쿼리가 필요합니다. 그래서 우리는 다음과 같은 일을 할 수 있습니다.
$breakpoint-1: 25em; $breakpoint-2: 35em; ...

html { font-size: 1.3vw; }

h1 { font-size: 3vw; }

@media and (min-width: $breakpoint-1) { html { font-size: 2vw; }

h1 { font-size: 6vw; } }

@media and (min-width: $breakpoint-2) { ... }
CodePen의 이 유동적이고 응답성이 뛰어난 웹 타이포그래피 예를 살펴보고 브라우저 창의 크기를 조정해 봅니다. 위의 완전한 유동적 접근 방식보다 더 낫다는 것을 알 수 있을 것입니다. 우리는 이것이 효과가 있다고 말할 수 있습니다. (제가 7개의 breakpoints을 사용했습니다.)
presentation
당신에 대해서는 잘 모르지만, 제게는, 이것은 우리가 그 대가로 받는 몇 가지 혜택에 대해 너무 많은 일과 수고를 끼친 것 같습니다. 네, 글꼴 크기는 응답성이 뛰어난 웹 타이포그래피 방식보다 더 나은 방식으로 확장되지만 다른 문제도 야기합니다. 접근성 문제까지 포함해서요.

장점

  • 글꼴 크기는 각 화면 너비에 맞게 적절하게 조정됩니다.

단점

  • 글꼴 크기를 정의하는 데 Viewport 단위를 사용하는 것의 한 가지 단점은 글꼴 크기에 액세스할 수 없다는 것입니다(사용자가 특정 브라우저에서 글꼴 크기를 제어할 수 없음).
  • 미디어 쿼리를 사용하여 글꼴 크기의 배율을 제어하기 때문에 브라우저 창의 크기를 조정할 때도 이러한 점프를 사용할 수 있습니다.
  • 글꼴 크기에 대해 뷰포트 단위를 사용하면 사용자의 기본 글꼴 크기(브라우저에서 설정)가 재정의되며, 또 다른 접근성 문제가 발생합니다.

CSS 잠금 장치가 있는 유기적 타이포그래피(Fluid Typography)입니다.

다른 사람들은 유동적인 웹 타이포그래피(fluid web typography) 접근방식에서 글꼴 크기에 대한 제어력이 부족하다는 문제점을 발견했습니다. 그들은 미디어 쿼리를 많이 추가하는 것이 바람직하거나 이상적이지 않다는 것을 알고 대안을 찾으려고 했습니다. Mike Riethmuller, Tim Brown, Geoff Graham 모두 결국 CSS 잠금이 있는유동적인 타이포그래피(fluid typography)가 아마도 가장 좋은 방법일 것이라는 결론에 도달했습니다.
이것은 흥미로운 기술입니다. 최소 글꼴 크기를 설정하고 사용할 화면 너비, 최대 글꼴 크기 및 사용할 화면 너비 및 둘 사이의 모든 유체 글꼴 크기를 설정합니다. 글꼴 크기 확장의 문제를 우아하게 해결하며, 이를 위해 기본 산수를 사용합니다. 이 접근 방식은 아래 이미지와 함께 가장 잘 설명되어 있습니다. 글꼴 크기는 왼쪽과 오른쪽 칸에서 변경되지 않고 중간 칸에서만 크기가 조정됩니다. 하단 게이트는 최소 화면 크기이며 고정 글꼴 크기를 적용하며, 최대 화면 크기인 상부 게이트에도 동일하게 적용합니다.
presentation
이 작업을 수행하기 위한 공식은 비교적 간단합니다. 최소 크기, 최대 크기, 최소 뷰포트 폭 및 최대 뷰포트 폭의 4개의 변수가 필요합니다.
body { font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); }
CodePen에 CSS 잠금이 있는 유동적 타이포그래피(fluid typography)의 라이브 예를 보고 브라우저 창의 크기를 조정해 보면 다음과 같은 결과가 나옵니다.
presentation
이것은 만족스러울 정도로 좋습니다. 글꼴 크기는 화면 너비가 최소값과 최대값 사이일 때 적절하게 조정됩니다. 화면 폭이 최소값보다 작거나 최대값보다 크면 고정 글꼴 크기로 전환합니다. 이론적으로, 이것은 매우 효과적입니다. 그러나 Chrome에서 브라우저의 기본 글꼴 크기를 변경하려고 해도 위의 CodePen 예제에는 영향을 미치지 않았습니다. 이는 이 접근 방식이 여전히 사용자의 기본 글꼴 크기를 무시하여 접근성 문제를 야기한다는 의미이기 때문에 문제가 됩니다. 또한 특정 브라우저에서는 사용자가 웹 사이트의 크기를 조정하려고 할 때(Mac의 경우) 웹 사이트의 글꼴 크기 크기를 조정하지 않습니다.

장점

  • 브라우저 창의 크기를 조정할 때 글꼴 크기를 조정할 수 없습니다.
  • 글꼴 크기는 최소 화면 폭보다 작거나 최대 화면 너비 이상으로 확장되지 않습니다.

단점

  • 글꼴 크기를 정의하는 데 Viewport 단위를 사용하는 것의 한 가지 단점은 글꼴 크기에 액세스할 수 없다는 것입니다(사용자가 특정 브라우저에서 글꼴 크기를 제어할 수 없음).
  • 글꼴 크기에 대해 뷰포트 단위를 사용하면 사용자의 기본 글꼴 크기(브라우저에서 설정)를 재정의할 수 있습니다.

결론입니다. 유동적 타이포그래피(Fluid Typography)를 사용해야 합니까?

먼저 CSS 잠금 접근 방식이 가장 좋아 보입니다. 글꼴 크기 확장 문제를 통제할 수 없이 해결합니다. 적은 수의 미디어 쿼리만 사용하며 글꼴 크기를 크게 조정하지 않습니다. 모든 유동적 웹 타이포그래피(fluid web typography) 기법의 문제는 브라우저에서 설정된 사용자의 기본 글꼴 크기를 모두 재정의한다는 것입니다 (내 테스트에서는 Chrome에만 해당됨). 또한 일부 브라우저에서는 뷰포트 단위가 사용되기 때문에 사용자가 글꼴 크기를 조정할 수 없습니다. 즉, 접근성 측면에서 이러한 솔루션 중 어느 것도 완전히 규정을 준수하지 않습니다.
유동적 타이포그래피(Fluid typography)는 기본 브라우저 글꼴 크기에서 제대로 작동하지 않으므로 변경될 때까지 사용하면 안 됩니다.
완전히 유동적인 타이포그래피 방식을 쓸 때, 저는 이렇게 썼습니다. "우리는 우리의 글꼴 크기가 작은 모바일 화면, 태블릿 화면, 데스크탑뿐만 아니라 모든 화면 크기에 이상적이기를 바랍니다." 저는 이 접근법이 완전히 잘못된 것이라고 생각합니다. 모든 화면 너비에 맞게 글꼴 크기를 적절하게 확장하는 데 집중해서는 안 됩니다. 우리는 우리의 텍스트를 모든 사용자들에게 쉽고 재미있게 읽도록 해야 합니다. 이것은 웹 인쇄술에 대한 통제권을 그들의 손에 맡긴다는 것을 의미합니다. 지금 이 순간, 유체 웹 타이포그래피가 너무 많은 것을 방해합니다. 기본 브라우저 글꼴 크기와 잘 어울렸다면 그대로 사용할 수 있지만 그렇지 않기 때문에 사용해서는 안 됩니다. 적어도 지금은 아닙니다. 제가 책에서 유동적 타이포그래피을 탐구했을 때 말했듯이, 저는 여전히 반응성 있는 웹 타이포그래피을 고수하고 있습니다.
presentation
방금 읽은 거 재미있었어요? 좋아요, 제가 쓴 웹 타이포그래피에 관한 제 책에 이런 것들이 훨씬 더 많이 있어요. 웹 디자이너와 개발자들에게 인기가 많으니 꼭 확인해 보세요.

이 글은 번역 글입니다. 원본 링크입니다.


안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp