크롬 자간 letter-spacing 버그

퍼블리셔로 직업을 바꾼지 약 6개월, 취미가 직업이 되어 정식으로 퍼블리싱 공부를 한 적은 없기 때문에 농담삼아 내 코드에는 근본이 없다고 하는데(웃자고 하는 얘기지, 근본을 찾고자 노력 많이 했어요) 주 브라우저가 크롬이다보니 크롬 개발자 도구 활용을 많이 하는 편인다.

어쨋든 회사는 주 고객층이 역시나 IE를 쓰기 때문에 크롬을 보면서 만들고, 이후 IE 버전별로 테스트하고 넘기는 편인데 일단 초기작업을 크롬에서 보다보니까 letter-spacing:0px(pt or em 이하 생략)과 letter-spacing:-1px 사이의 값들, 그니까 예를 들면 letter-spacing:-0.5px 는 크게 의미가 없는 숫자라고 생각했었다.

근데 이번주 일 중 디자인의 글자들이 -0.5로 맞춰야되게 넘어왔고 그동안 이런 경우 몇번 있었지만 -1로 처리하거나 0으로 융통성 있게 바꿔서 넣었는데 이번엔 0으로 하자니 줄이 넘어가서 디자인에 맞지 않고, -1로 하자니 빽빽해서 애매한 상황이었다.

그러다 0.5로 그냥 넣어놨다가 alt+tab 몇번을 잘못해서 IE로 갔는데 이게 먹히는게 아닌가? 오? 하고 해보니 단위를 px대신 pt나 em으로 사용하면 IE 7버전까지도 문제 없이 됐다. 그러다 다시 alt+tab 몇번이 잘못 넘어가서 IE가 아닌 크롬으로 넘어왔고 자간이 다시 빽빽해진걸 확인하게 됐고, 이건 또 IE만 되는건가 파이어폭스, 사파리 확인해보니 다 되는데 크롬에서만 안된다.


바로 구글링 해보니 비단 이 문제는 나만 겪은게 아니었고, 아쉽게도 해결책은 못찾았다. 문제 투성이인 IE는 각종 팁과 최종방법 핵이라도 있는데 크롬은 어쩔 수가 없는듯. 이전 직장부터 파이어폭스파와 크롬파가 나뉠만큼 각각의 사용자가 한쪽 브라우저에 충성도(?)가 강했고 나는 크롬파였는데 몇년만에 크롬에게 크게 배신 당했던 날.

해결은 결국, 우리 고객층에 크롬 사용자 비율은 적지만 당연히 맞춰줘야 하므로 디자이너에게 상황을 설명하고 디자인을 수정했다.

(혹시 같은 문제로 해결책을 검색하신 분들껜 확실한 해결책이 없어 죄송합니다, 하지만 분명이 안된다는걸 알게 되는 것도 팁이라고 생각해요)