본문 바로가기
UI & UX

진정한 반응형 폰트사이즈

by 시몽 2019. 11. 6.

개인적으로 미디어 쿼리로 폰트 사이즈를 정리하는 건 굉장히 불편하고 관리 포인트가 많이 늘어난다고 생각합니다. (특히 반응형 사이트!) 그렇기 때문에 디자인과 최종 결과물이 다르게 나오더라도 어느 정도 이해하는 편입니다. 퍼블리싱이 되고 만약 폰트나 텍스트 관련해서 수정이라도 발생하면 결과물이 점점 산으로 가거나 작업 시간도 늘어나고 관리도 힘들어집니다.

 

그렇기 때문에 실제 디자인된 사이트를 둘러보면 PC, Mobile 뷰 정도만 적극적으로 지원하는 경우가 많습니다. 그러나 앞으로 지원해야 할 디바이스의 비율이나 해상도가 다양(최근에 나온 갤럭시 폴드의 경우 거의 태블릿 정도)해질거라고 생각합니다. 결국엔 PC, Tablet, Mobile 뷰는 기본으로 지원해야 하며 세세하게 분류가 될 가능성이 높습니다. 이렇게 된다면 미디어 쿼리로 관리가 가능할까요?

 

다양한 디바이스 지원은 고통! - 이미지 출처(giphy)

 

궁극적으로 제가 하고자 하는 말은 아래의 아티클을 보시면 이해가 되실 겁니다.

https://medium.com/sketch-app-sources/truly-fluid-typography-257a2b434105

 

Truly fluid typography

3 approaches, using vw units

medium.com

아티클의 핵심은 폰트 사이즈를 vw로 사용하더라도 디바이스의 너비에 따라 폰트 사이즈가 과도하게 증감하는 문제가 있다는 겁니다. 예를 들어 360px 너비에서 12픽셀(body 폰트 사이즈 정도)로 나오게 설정한다면 1920px 너비에서는 대략 64픽셀(display 폰트 사이즈 정도) 정도로 나오게 됩니다. 결국 vw를 폰트 사이즈에 적용하는 건 비현실적입니다.

 

 

 font-size: calc(0.26vw + 11.08px); 

 //12px at 360, 16px at 1920            

 

하지만 calc()를 사용하여 vw + px 개념으로 접근하면 디바이스의 너비에 의한 영향을 줄일 수 있습니다. 위의 예제를 적용하면 360px 너비에서 12픽셀이지만 1920px 너비에서 16픽셀의 폰트 사이즈도 가능하다는 의미입니다. 이렇게 하면 미디어 쿼리 없이 하나의 설정값만으로 폰트 사이즈 관리가 가능합니다. 물론 360px과 1920px 사이의 너비에서도 알아서 폰트 사이즈가 조절됩니다. 폰트 사이즈뿐만 아니라 간격 등에도 적용 가능합니다.

 

마치며

물론 익숙한 개념도 아니라, 실제로 저런 방식을 사용하니 디자인과 퍼블리싱이 쉽지는 않았습니다. 다음 개인 포트폴리오 사이트를 작업할 때 사용해보고 싶지만 조금 더 연구가 필요해 보입니다. 그럼 원하는 설정값은 어떻게 구할까요? 선형 방정식이 필요한데 일일이 계산하는 게 너무 힘들어서 제가 개인적으로 직접 작업한 사이트를 링크하겠습니다. 개인 용도로 작업했다 보니 사용자 경험이 좋지 않을 수 있습니다.

 

https://font-size-generator.now.sh/

'UI & UX' 카테고리의 다른 글

2020 UI/UX 디자인 툴 스택  (0) 2019.12.22
서비스 경험기 - 집토스  (0) 2019.12.11
Lorem Ipsum이란 무엇인가  (0) 2019.11.04
Lottie란 무엇인가  (1) 2019.11.02
톤 앤 매너란 무엇인가  (0) 2019.11.01