안녕하세요, 커뮤니케이션디자인 전공 3학년 학생입니다. 학교 과제로 웹사이트 시안을 만들면서 인쇄물 하던 버릇대로 본문 서체를 골랐는데, 같이 하는 친구가 웹폰트로 올리면 로딩이 느려질 수 있다고 하더라고요. 저는 글자 모양이랑 자간만 보고 정했지 파일 용량까지는 생각해본 적이 없어서 감이 잘 안 잡혀서요… 실무에서는 서체 후보를 좁힐 때 개발 쪽 부담도 같이 보시는 편일까요? 선배님들은 어떻게 하셨는지 조심스럽게 여쭤봅니다.
웹폰트 용량 때문에 서체 선택이 달라지나요?
9.15 11:10조회수 0댓글 7
신기하네요, 저는 그 반대 순서로 데였거든요. 웹 시안 넘길 때 본문에 가변폭 있는 서체 얹어서 줬다가, 개발자분이 굵기 네 개 다 받으면 용량이 어떻게 된다고 표를 만들어 보내주시더라고요. 그때 제가 고른 근거가 "자간이 예뻐서"밖에 없었던 게 좀 웃픈데, 결국 바꾼 건 서체가 아니라 굵기 개수였어요. 본문 하나 제목 하나로 줄이니까 그쪽에서 더 안 잡더라고요. 다만 저는 인쇄물 쪽이 본업이라 로딩이 실제로 얼마나 체감되는지는 답을 못 드리겠어요. 개발 하시는 분들 답변이 저도 궁금하네요.
혹시 웹폰트 용량은 개발자분이 먼저 얘기해주시는 편일까요…? 저도 인쇄물 쪽으로 배워서 서체 고를 때 글자 모양이랑 자간부터 봤거든요 🥲 회사에서도 아직 웹 시안은 맡아본 적이 없어서 딱 잘라 말씀드리긴 어려운데, 인쇄물은 용량 대신 별색이나 감리 같은 게 걸리는 거라 이서님 친구분 말씀 듣고 "아 웹은 또 다른 제약이 있구나" 싶어서 좀 놀랐어요 😳 그래서 저도 궁금한 게, 용량 때문에 후보에서 빠진 서체가 있으면 그걸 대신할 비슷한 인상의 서체는 어떻게 찾으시는 걸까요…? 저는 그 상황이 오면 아예 감이 안 잡힐 것 같아서요 ㅠㅠ
저도 아직 학생이라 확실하게 말씀드리긴 어려운데요… 저는 친구 얘기 듣고 나서 원래 쓰려던 서체를 그냥 포기하는 대신, 그 서체에서 제가 좋아했던 게 정확히 뭔지부터 적어봤어요. 획 끝이 각진 건지, 속공간이 넓어서 작은 크기에서도 안 뭉개지는 건지요. 그렇게 적고 보니까 조건이 두세 개로 줄어서, 무료 웹폰트들 본문 크기로 같은 문장 깔아놓고 비교하니 그나마 감이 잡히더라고요. 자간이나 인상은 결국 눈으로 봐야 알겠더라고요…
저는 그 반대로, 용량부터 보지는 않는 편이에요. 프로덕트라 본문에 쓰는 서체는 이미 시스템에서 정해져 있는 경우가 많아서 후보를 좁힐 일 자체가 잘 없거든요. 그래서 개발 부담을 미리 계산하기보다, 확정 화면 넘길 때 어떤 굵기를 실제로 썼는지 정리해주는 쪽에 손이 더 갔던 것 같아요. 시안에서 습관적으로 400, 500, 700 섞어 쓰면 파일이 그만큼 늘어나는데 정작 500은 한 화면에만 있고 그런 식이라서요. 학교 과제면 서체를 바꾸는 것보다 지금 고른 걸 몇 종으로 쓰고 있는지부터 세보는 게 감 잡기엔 나을 수도 있겠네요. 다만 저는 새로 서체를 올려본 경험이 거의 없어서, 실제로 후보 단계에서 걸러보신 분 얘기가 저도 궁금합니다.
용량까지 보면서 서체 고른다는 발상 자체가 3학년 때 나온다는 게 좀 놀랍네요. 저는 BX라 웹 구축을 직접 하진 않는데요, 브랜드 전용서체 만들고 나서 웹 적용 단계에서 개발팀이랑 붙었던 적은 있습니다. 결론부터 말하면 후보를 좁힐 때 용량을 보는 게 아니라, 넘길 때 기준을 같이 정리해서 넘깁니다. 본문은 Regular, Medium 두 웨이트만 쓰고 제목은 이미지로 처리 가능하다 같은 식으로요. 웨이트 다섯 개 얹어놓고 나중에 빼라는 소리 들으면 위계가 통째로 무너지거든요. 서체 이름 하나 던지는 것보다 어디에 몇 개 쓸지를 같이 주면 대화가 굴러갑니다. 궁금한 게 있는데, 지금 시안에 웨이트를 몇 개나 쓰고 계신가요?
세어보니 지금 시안에 네 개 쓰고 있었어요. 본문 Regular, 소제목 Medium, 제목 Bold에 인용구만 Light로요. 인쇄물 하던 버릇대로 위계가 필요할 때마다 하나씩 늘린 거라, 왜 네 개인지는 저도 설명을 못 하겠더라고요… 말씀해주신 것처럼 어디에 몇 개 쓸지부터 적어보려고 하는데, Light를 빼면 위계가 무너지는 게 아니라 제 눈에 심심해 보이는 게 걸려서요. 이런 건 그냥 감수하고 줄이는 편이 맞을까요?
세어보니 네 개였다는 거, 그 자각이 이미 절반입니다. 저도 브랜드 가이드 짤 때 Light 빼는 게 아까워서 붙잡고 있었거든요. 근데 심심해 보이는 건 굵기가 부족해서가 아니라 여백이랑 크기 차이로 안 벌어져 있어서인 경우가 8할이었어요. Light 빼고 제목만 두 단계 키우거나 소제목 위 여백을 확 벌려보세요. 그러고도 심심하면 그때 다시 넣으시면 되고요. 감수하고 줄이는 게 아니라, 줄인 자리를 다른 변수로 메우는 거라고 보셔도 됩니다.