[CSS] 유동형 타이포그래피
뷰포트에 반응하며 타이포그래피와 이미지를 함께 관리하기
출처: https://www.b3multimedia.ie/10-typography-trends-to-watch-for-in-2019/퍼블리싱 작업을 하다보면 이미지 위에 타이포그래피를 요청받는 경우가 있습니다. 이 경우에 가장 큰 문제는 타이포그래피 영역이 디바이스의 뷰포트에 반응하는게 쉽지 않다는 점입니다. 이번 글에선 어떻게 이미지와 타이포그래피가 균형을 맞추며 멋지게 표현될 수 있는지 알려드리겠습니다.
1. 미디어쿼리 사용
가장 쉬운 방법은 미디어쿼리를 통해 특정 break-point마다 조정하는 방법입니다. break-point를 설정할 때는 대표적인 디바이스 width 값을 통해 진행합니다. 모바일의 경우 360px를 기준으로 잡습니다. 최신 스마트폰의 경우 360px보다 조금 더 큰 경우가 많은데(아이폰 X의 경우 375px) 아이폰 5처럼 320px인 경우도 있기 때문에 저는 360px을 기준으로 작업을 한 후 추가적으로 320px에서의 느낌도 보는 편입니다.
태블릿의 경우 범위가 더 다양합니다. 하지만 일반적으로 768px를 기준으로 사용하는 경우가 많은데 이 너비가 아이패드의 너비이기 때문입니다. 아이패드 프로는 1024px를 가지는데 보통 태블릿 범위의 최대치로 여겨지곤 합니다.
마지막으로 데스크탑의 경우 1920px, 1440px, 1280px 정도를 고려합니다. 하지만 대부분의 프로토타이핑 툴을 통해 완성된 웹 디자인은 기본값인 1920px를 기준으로 많이 제작하므로 보통은 미디어쿼리를 이부분에 적용하진 않습니다. 바꿔말하면 디자인 기본이 웹이기 때문에 수정할 필요가 없습니다.
break-point를 알아봤는데 그럼 이 break-point마다 어떤 식으로 디자인을 수정해야할까요? 타이포그래피와 배경 이미지가 어울리기 위해선 필수 조건이 몇 개 있는데, 이 점을 최우선으로 해결해야합니다.
1.1 줄바꿈 문제
화면 크기가 작아지면서 원치 않는 줄바꿈이 생길 수 있습니다. 줄바꿈을 허용하는 방법도 있겠지만 word-break: keep; 을 사용하지 않는 경우 글자 단위로 끊기면서 가독성이 안 좋아질 수 있고, 타이포그래피의 심미적인 아름다움이 많이 깨질 수 있습니다. 그렇기 때문에 줄바꿈이 바뀌지 않도록 뷰포트 사이즈에 따라 폰트 크기를 조정해주면 됩니다. 각각의 뷰포트에 대응하는 폰트 크기에 대해선 아래에서 더 자세히 다룹니다.
1.2 자간 문제
자간의 경우 특별한 경우가 아니라면 조정할 필요는 없습니다. 자간을 조정하게 되면 타이포그래피의 느낌이 많이 달라질 수 있기 때문입니다. 자간을 조정하는 경우는 글자 사이즈를 줄이기 힘들 때(가독성을 위해), 글자 크기는 유지하면서 줄바꿈을 방지하기 위해 사용합니다. 자간은 css에서 letter-spacing 값으로 조정할 수 있습니다.
1.3 줄간격 문제
줄간격도 자간과 비슷한 맥락으로 이해할 수 있습니다. 이미지의 height를 초과하는 타이포그래피가 발생하는 것을 막기 위해서 제한적으로 사용해야 합니다.
위의 세가지 문제는 각각의 값이 px 또는 정적인 값일 때 생기는 문제입니다. 그렇다면 이를 더 근본적으로 해결할 방법은 무엇일까요? 바로 비율을 사용하는 것입니다.
2. 일괄 크기 관리
CSS에는 비율을 표기하는 여러 방법이 있습니다. %, em, rem 등 비율값을 사용해 타이포그래피를 관리하는 방법입니다. 이 방법은 타이포그래피의 사이즈를 일괄적으로 관리하기 때문에 뷰포트 사이즈에 따라 타이포그래피에 들어가는 텍스트의 크기 이슈를 효과적으로 해결해줍니다. 하지만 이 방법 역시 단점은 존재합니다.
2.1 가독성 문제
위의 이미지는 데스크탑에서는 글자가 잘 보이지만, 화면이 작아지면 글씨가 읽기 어려워지는 문제가 발생합니다. 데스크탑을 기준으로 14~16px 수준의 비율 기반 폰트 크기는 모바일에서 거의 읽히지 않는 수준으로 작아질 수 있습니다. 일괄적으로 사이즈를 줄이면 비율은 유지되겠지만, 도리어 어색하고 읽기 힘든 결과물을 보여줄 수 있습니다.
그럼 비율값은 어떻게 쓰는게 좋은걸까요?
2.2 미디어쿼리와의 조율
각각의 텍스트 디폴트 크기를 비율 값으로 넣은 후 미디어 쿼리에서 추가적으로 조정해주면 됩니다. 이 경우 디바이스에 따라 타이포그래피의 느낌은 상이하겠지만 더 나은 내용 전달이 가능해집니다. 또한 뷰포트 사이 구간에서 비율로 반응하기 때문에 각 구간별 중간 사이즈에서 동일한 비율로 보여줍니다.
2.3 폰트 사이즈 이외의 값에도 비율 사용
타이포그래피에는 폰트 사이즈 이외에도 많은 스타일이 복합적으로 들어갑니다. 당연하게도 padding, line-height, margin도 비율값을 사용하는게 좋습니다. 해더 엘리먼트에는 기본적으로 정해진 margin과 padding이 존재하는데 이를 대응하기 위해서 꼭 비율을 사용하면 되고, 이 값 역시 미디어 쿼리를 사용해 뷰포트에 따라 조정해주는게 좋습니다.
3. 라이브러리 사용
1번과 2번의 사항을 통해 미디어쿼리 및 비율을 잘 활용하라는 건 기초 지식이라 볼 수 있습니다. 기초가 탄탄해졌다면 좀 더 쉽고 빠르게 사용하기 위해 라이브러리를 사용해봅시다. 몇가지 툴이 있지만 대표적으로 jQuery에선 FitText가 있습니다.
그 밖에도 팀 브라운의 Molten leading을 통해 유동적인 행간, 자간을 관리해보는 방법도 있습니다.
4. vw, vh, vmin 사용
라이브러리를 사용하는 방법도 괜찮지만 이것이 귀찮다면 뷰포트 기준의 사이즈 관리를 사용해도 좋습니다. 많은 퍼블리셔들이 애용하는 vw와 vh는 뷰포트 기준으로 1%의 너비와 1%의 높이를 뜻합니다. vmin의 경우 1vw와 1vh 중 더 작은 값을 뜻합니다.
vh의 경우 화면에서 가지는 높이 영역을 통제하는데 매우 유리하기 때문에 타이포그래피의 높이와 조합된 이미지의 높이를 함께 관리할 때 매우 유용할 것입니다. 마찬가지로 vw도 너비를 통제할 수 있습니다. 그럼 이 방법의 단점은 무엇일까요? 아무래도 극단적인 상황일 것입니다.
4.1 화면이 매우 넓거나 긴 경우
사용자가 폭 넓은 모니터를 쓰는 경우 1vw는 퍼블리셔의 예상보다 무척이나 넓을 겁니다. 그러면 타이포그래피의 너비 - 높이의 비율이 깨진 것처럼 표기될 수 있습니다. 그렇기 때문에 최대값을 제한하는게 필요합니다. 최대값을 max-width, max-height 등으로 통제할 수 있는데 각각의 타이포그래피에 이 값을 넣는 것은 비효율적입니다. 대상 타이포그래피의 부모 엘리먼트를 관리하거나, 레이아웃 엘리먼트를 제한하는 방법으로 최대 너비와 최대 높이를 통제하시면 됩니다.
5. 미리보기 기반의 빌드
마지막으로 기본이자 가장 좋은 방법을 소개드리고자 합니다. 바로 미리보기를 적극 사용하는 겁니다. CSS 적용이 생각대로 다 되지 않는 경우가 많으니 에디터에서 preview 확장 프로그램을 설치해서 보면 좋습니다. 만약 핫리로드가 적용되지 않거나 오래 걸리는 환경이라면 타이포그래피 부분만 HTML을 떼서 codepen과 같은 서비스를 사용하시면 됩니다.
영문 버전: https://www.nomcss.com/css/css-flow-typography
