본문 바로가기

Technology

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



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


서체의 경우, 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 원숭이발자국



  • 궁금한점 2015.07.21 12:48

    em 이 브라우저상에서 렌더링 되기 위해서는 결국 px로 계산이 되어지기 때문에 소수점 표현은 결국 브라우저에 따라 반올림/내림/올림등의 처리에 의해 정수화 되어지는 것으로 알고 있는데
    위 이야기는 포토샵의 단위를 CSS로 옮겼을때 발생되는 소수점의 처리까지 정확하게 맞출 수 있다는 건가요???

    크롬에서 실제로 http://lab.justinmarsan.com/letter-spacing/ 를 렌더링 해보면
    0.005em, 0.001em, 0.025em 이 동일해 보이고, 0.05em, 0.075em, 0.1em이 동일해 보이는데요...

    • slowalk 2015.07.21 14:29 신고

      의견 감사합니다! 확인 후 다시 댓글로 말씀드리겠습니다.

    • slowalk 2015.07.21 17:48 신고

      안녕하세요. 이 글을 작성한 원숭이발자국입니다.

      테스트 페이지 http://slowalk.co.kr/letter-spacing 를 만들었습니다.
      크롬(버전 43.0.2357.134)과 같은 최신 브라우저에서는 정확히 작동하는 것을 확인했습니다.
      다만 구형 브라우저(ie9 이하 등)에서는 말씀하신대로 소수점 단위를 정수화하기 때문에
      구현이 잘 되지 않는 것으로 확인되었습니다.

      다시 한번 소중한 의견에 감사드립니다.

  • 문의 2016.03.22 17:28

    궁금한 점이 있습니다. 타이틀 같은 경우는 font-size:30px일 경우 line-height의 기준이 어떻게 되는지
    궁금합니다. 문단이 아니니 디자인 시안에서도 line-height가 적용이 안되어있는데...

    • slowalk 2016.03.23 17:52 신고

      안녕하세요. 이 글을 작성한 원숭이발자국입니다.

      1. 브라우저별로 line-height 렌더링하는 방식은 다릅니다.
      아래 링크를 참고하시면 도움될 거에요.
      http://webdical.com/blog/136

      2. 타이틀이 2줄이 넘어갈수도 있는데 2줄 넘는 디자인이 없는 경우,
      디자이너분에게 그 상황에 맞는 가이드를 요청하는 것이 맞다고 생각합니다.

      감사합니다. :)

    • 문의 2016.03.24 14:37

      참고로 주신 사이트 잘 보았습니다. 항상 line-height/font/여백이 맞지않아 항상 고민되는 부분이었는데, 원숭이발자국님 정리로 많은 부분이
      고민들이 해소되었습니다. 감사드려요. 종종 찾아와 글도 보고 하겠습니다. 즐거운 봄날 되세요~