웹디자인에서 자간, 행간에 대한 고찰

디자이너와 개발자는 너무 다릅니다. 여러 가지 이유가 있겠지만, 작업 방식부터 다르기 때문이라고 생각합니다. 실제로 웹 개발실에서 일하면서도 많이 경험할 수 있었는데요. 그중 가장 문제가 많이 생기는 부분이 폰트라고 생각합니다.

서체의 경우, OS, 브라우저의 렌더링 스타일이나 유료폰트 구매 문제로 귀결됩니다. 하지만 자간과 행간은 맞출 수 있음에도, 디자이너분들과 소통하지 못했습니다. 저는 디자인을 전공했지만, 디자인을 정확하게 구현하고 싶은 마음에 개발을 시작했습니다. 하지만 초심과 다르게, 효율을 중시한 나머지 자간과 행간을 간과하는 경우가 많았습니다.

이 부분이 문제 제기되어 방법을 모색하게 되었는데요. 그 내용을 공유합니다.

여담이지만 디자인과 출신인 저도 자간, 행간에 대한 감각이 형편 없습니다.

자간과 행간의 기준은 디자이너들 사이에서도 많은 차이가 납니다. 모바일에서 잘 안 보인다고 만지지 않는 분이 있지만, 편집디자인처럼 세세하게 다 보시는 분도 있습니다.

다양한 디자인 의도를 정확하게 표현하기 위해, 가이드를 넘어 포토샵에 대한 이해가 필요합니다.

자간

포토샵에 자간을 작업하는 방식은 다음과 같습니다.

단위가.. 없네요

퍼블리싱 작업을 할 때 저 알 수 없는 단위를 어떻게 환산해야 할지 고뇌한 적이 많습니다. 솔직하게 말씀드리면 자간이 좁다고 생각되면 -1px로 처리했던 적이 많습니다. (디자이너분들에게 죄송합니다...)

저 단위 없는 자간의 정체는 무엇일까요? 어도비 공식사이트에는 다음과 같이 명세 되어 있는데요.

자간과 커닝은 모두 현재 문자 크기에 상대적인 측정 단위인 1/1000em으로 측정됩니다. 6포인트 글꼴에서 1em은 6포인트에 해당하고, 10포인트 글꼴에서 1em은 10포인트에 해당합니다. 커닝 및 자간은 현재 문자 크기에 정확하게 비례합니다.

쉽게 말씀드리면, 포토샵의 1000이 CSS의 1em(현재 폰트크기)과 일치합니다. (링크)

파이어폭스에서 구현된 자간. 거의 일치합니다.

가장 정확하게 렌더링하는 파이어폭스 기준으로 거의 일치하는데요.이제는 픽셀로 어설프게 맞추지 않아도 되겠네요. 

(*IE9 이하 등 구형브라우저에서는 소수점을 정수화 처리하기 때문에 정확하게 작동하지 않을 수도 있습니다. 링크)

행간

포토샵에서 행간을 넣는 방법은 이렇습니다.

자간과 비교하면 단위가 있어서 다행이네요.

하지만 포토샵과 CSS의 line-height의 방식은 다릅니다.

이처럼 포토샵은 글자의 가장 윗부분을 기준으로,

css의 line-height는 글자의 수직중앙을 기준으로 작동합니다.

결국, 이런 오차가 생길 수밖에 없는데요. 이 오차 때문에 가끔 글씨 위 아래로 애매한 여백이 생깁니다. 이 여백을 계산하는 공식((행간 - 폰트사이즈) / 2)을 사용하면 좀 더 정확하게 퍼블리싱 할 수 있습니다.  

행간과 자간을 디자이너의 의도와 비슷하게 맞추는 방법에 대해 알아봤습니다. 하지만 위와 같은 방법으로 해도, 아래의 예시와 같이 OS와 브라우저의 렌더링 방식에 따라 1~2px정도 오차가 있을 수 있습니다.

크롬에서 구현된 자간. 미세하게 오차가 있습니다.

웹디자인에서 자간과 행간의 문제는 개발자의 실력도 원인이 될 수도 있겠지만, 디자이너들과의 의사소통으로 간단히 해결할 수 있다고 생각합니다. 이런 소통을 통해 모두가 만족할 수 있는 프로젝트를 진행할 수 있었으면 좋겠습니다.

출처: Justin Marsan, 어도비 공식사이트

더 읽기 > 올바른 웹, 모바일 폰트 사용하기

by 원숭이발자국