디자이너와 개발자는 너무 다릅니다. 여러 가지 이유가 있겠지만, 작업 방식부터 다르기 때문이라고 생각합니다. 실제로 웹 개발실에서 일하면서도 많이 경험할 수 있었는데요. 그중 가장 문제가 많이 생기는 부분이 폰트라고 생각합니다.
서체의 경우, OS, 브라우저의 렌더링 스타일이나 유료폰트 구매 문제로 귀결됩니다. 하지만 자간과 행간은 맞출 수 있음에도, 디자이너분들과 소통하지 못했습니다. 저는 디자인을 전공했지만, 디자인을 정확하게 구현하고 싶은 마음에 개발을 시작했습니다. 하지만 초심과 다르게, 효율을 중시한 나머지 자간과 행간을 간과하는 경우가 많았습니다.
이 부분이 문제 제기되어 방법을 모색하게 되었는데요. 그 내용을 공유합니다.
자간과 행간의 기준은 디자이너들 사이에서도 많은 차이가 납니다. 모바일에서 잘 안 보인다고 만지지 않는 분이 있지만, 편집디자인처럼 세세하게 다 보시는 분도 있습니다.
다양한 디자인 의도를 정확하게 표현하기 위해, 가이드를 넘어 포토샵에 대한 이해가 필요합니다.
자간
포토샵에 자간을 작업하는 방식은 다음과 같습니다.
퍼블리싱 작업을 할 때 저 알 수 없는 단위를 어떻게 환산해야 할지 고뇌한 적이 많습니다. 솔직하게 말씀드리면 자간이 좁다고 생각되면 -1px로 처리했던 적이 많습니다. (디자이너분들에게 죄송합니다…)
저 단위 없는 자간의 정체는 무엇일까요? 어도비 공식사이트에는 다음과 같이 명세 되어 있는데요.
자간과 커닝은 모두 현재 문자 크기에 상대적인 측정 단위인 1/1000em으로 측정됩니다. 6포인트 글꼴에서 1em은 6포인트에 해당하고, 10포인트 글꼴에서 1em은 10포인트에 해당합니다. 커닝 및 자간은 현재 문자 크기에 정확하게 비례합니다.
쉽게 말씀드리면, 포토샵의 1000이 CSS의 1em(현재 폰트크기)과 일치합니다. (링크)
가장 정확하게 렌더링하는 파이어폭스 기준으로 거의 일치하는데요.이제는 픽셀로 어설프게 맞추지 않아도 되겠네요.
(*IE9 이하 등 구형브라우저에서는 소수점을 정수화 처리하기 때문에 정확하게 작동하지 않을 수도 있습니다. 링크)
행간
포토샵에서 행간을 넣는 방법은 이렇습니다.
자간과 비교하면 단위가 있어서 다행이네요.
하지만 포토샵과 CSS의 line-height의 방식은 다릅니다.
이처럼 포토샵은 글자의 가장 윗부분을 기준으로,
css의 line-height는 글자의 수직중앙을 기준으로 작동합니다.
결국, 이런 오차가 생길 수밖에 없는데요. 이 오차 때문에 가끔 글씨 위 아래로 애매한 여백이 생깁니다. 이 여백을 계산하는 공식((행간 – 폰트사이즈) / 2)을 사용하면 좀 더 정확하게 퍼블리싱 할 수 있습니다.
행간과 자간을 디자이너의 의도와 비슷하게 맞추는 방법에 대해 알아봤습니다. 하지만 위와 같은 방법으로 해도, 아래의 예시와 같이 OS와 브라우저의 렌더링 방식에 따라 1~2px정도 오차가 있을 수 있습니다.
웹디자인에서 자간과 행간의 문제는 개발자의 실력도 원인이 될 수도 있겠지만, 디자이너들과의 의사소통으로 간단히 해결할 수 있다고 생각합니다. 이런 소통을 통해 모두가 만족할 수 있는 프로젝트를 진행할 수 있었으면 좋겠습니다.
원문: 슬로워크
