백오피스 디자인에서 폰트 선택의 중요성
노토산스 폰트? 스포카 산스?? PC에선 어떤 폰트를 사용해야 할까?
현재 나는 백오피스에서 UX/UI 디자이너로 회사 사내 통합 시스템을 런칭 준비 중에 있다. 그러다 폰트와 관련된 이슈가 터졌다.
기본적으로 무료 웹폰트로 많은 디자이너들이 노토산스, 스포카산스, 프리텐다드 폰트 이 3가지를 많이 활용한다. 각 폰트마다 장단점이 있다. 전 직장이 금융권이었기에, 숫자가 많이 보여지는 서비스였다. 그렇기에 숫자의 width 가변이 크지 않은 스포카산스를 선택하여 디자인을 진행했었다. 이러한 경험이 있기에 이번에도 “스포카 산스” 폰트를 선택했다. 회계업무나 재고 관리 등 통합 제조업체 백오피스를 만드는 것이기에 숫자가 많이 등장할 것이라 가정했기 때문이다.
이러한 근본에는 전 직장에서 폰트의 장단점들을 조사한 내 자료가 있다.
물론 위 캡쳐본 사진은 내가 2023년도 기준으로 비교한 내용이기에 현 시점(2025년도)과 조금 다를 수 있다. 이렇게 직접 사이트를 뒤져가며 정리했던 것으로, “스포카산스"는 “노토산스"를 개선한 폰트라는 점에서 “노토산스"는 고려해보지도 않고 “스포카산스"를 선택한 것도 있다.
하지만 이번에 B2B SI 프로젝트를 하면서 Web에서는 스포카산스가 맞지 않는다는 것을 알았다. 왜냐하면 우리는 데이터를 긁어와서 그리드에 데이터를 보여줘야 하는 환경이 많다. 품목 목록 페이지를 만든다고 생각하면 될 것 같다. 커머스의 수많은 품목들을 보여줘야 하는데, 그러다 보니 그냥 기업 홈페이지들처럼 큼직큼직하게 폰트 사이즈를 키울 수 없다.
많은 양의 정보를 가독성 있게 보여주려면 적어도 14px 이하로 내려갈 수 없었다. 어차피 기본적으로 회사 사내 회계팀, 영업팀의 업무 성향을 보니 해상도를 100%로 하는 분들보다 80%로 줄여서 더 많이 한 번에 보는 분들이 많았다. (User 사용성 분석)
그러려면 작은 글씨에도 깨지지 않고 가독성이 좋은 폰트여야 하는데, 모바일상에서는 괜찮지만 Web을 기반으로 한 시스템에는 맞지 않음을 QA를 하면서 발견했다.
우리 회사에서 나만(디자이너) 유일하게 맥을 사용하고 있다. 내 컴퓨터 환경에서는 깨지는 일 없이 다 확인을 해서 괜찮았지만, 우리 회사는 오래된 제조 회사다. 그리고 내가 가장 좋은 사양의 컴퓨터를 사용하고 있는 것이다. 다들 10년 넘은 Dell 모니터(작은 모니터)를 사용하고 있어서 정말 해상도가 좋지 않다.
이러한 환경에서 스포카가 노토산스의 단점을 개선했지만, 옛 해상도의 PC 환경에서는 깨져서 보여 가독성이 좋지 않다는 피드백을 받게 되었다.
그렇다면 노토는 어떨까? 먼저 전체 디자인 파일을 엎기 전 개발자 화면으로 폰트를 수정하고, font weight 값을 설정해보며 가장 낮은 해상도를 사용하고 있는 팀원의 모니터로 테스트를 해봤다.
노토는 무리가 없었다! 선명하게 잘 보이고, 피그마에서 내가 디자인했던 그대로 나오는 게 아닌가?!
왼쪽이 맥에서 스포카산스 굵기 체크한캡쳐본, 오른쪽이 윈도에서 확인한 캡쳐본이것으로 해상도, OS 영역이 아닌 폰트 문제라는 것을 발견했고, (왼쪽이 맥, 오른쪽이 윈도우에서 본 폰트 굵기) 스포카와 노토산의 자간이 다르기 때문에 다시 맞춰보며 Typo Foundation을 수정하여 전체 수정을 하였다.
노토산스와 스포카 산스의 차이가 무엇일까? 분명 스포카산스가 노토산스를 개선한 폰트면 더 좋아야 하지 않을까? 그럼에도 사방넷, 고도몰 등의 어드민 프로그램에서 스포카를 사용하지 않는 이유는 스포카가 최신이지만 이전 윈도우 기반까지 다 고려하지 않고 크롬 기반으로 최신만 고려했기 때문이라고 추측한다.
(Chat GPT에 물어본 결과)노토산스는 다양한 해상도에서 우수한 가독성을 제공하지만, 스포카산스는 저해상도 환경에서 문제가 발생할 수 있다고 한다.
일반 홈페이지를 만드는 데 이슈는 없다. 다만 백오피스를 만드는 데 왜 다 노토산스나 나눔고딕을 사용하는지 이번에 와서 확실히 알게 되었다.
[참고!! : Chat GPT로 물어본 두트의 차이점]
노토산스(Noto Sans)와 스포카산스(SPOTCA Sans) 폰트의 장단점 및 차이점은 다음과 같습니다.
1. 노토산스 (Noto Sans)
장점
- 다양한 언어 지원: 전 세계 다양한 언어를 지원하여 다국적 환경에서도 유용합니다.
-일관된 디자인: 균형 잡힌 글꼴로 가독성이 뛰어나며, 다양한 글자 크기에서도 선명하게 보입니다.
- 해상도에 강함: 저해상도 환경에서도 깨지지 않고 잘 보입니다.
단점
- 디자인의 보수성: 현대적이고 세련된 느낌보다는 전통적인 느낌이 강할 수 있습니다.
- 자간: 일부 사용자는 자간이 좁아 가독성이 떨어질 수 있다고 느낄 수 있습니다.
2. 스포카산스 (SPOTCA Sans)
장점
- 모던한 디자인: 현대적이고 세련된 느낌을 주며, 웹 환경에서 잘 어울립니다.
- 숫자 가독성: 숫자의 width 가변성이 작아 금융 관련 서비스에 적합합니다.
- 사용자 친화적: 사용자 경험을 고려하여 설계되어, 다양한 디바이스에서 잘 보입니다.
단점
- 저해상도에서의 가독성 문제: 오래된 모니터나 저해상도 환경에서는 가독성이 떨어질 수 있습니다. - 언어 지원의 한계: 특정 언어에 대한 지원이 부족할 수 있습니다.
3. 주요 차이점
- 디자인 스타일: 노토산스는 전통적인 느낌을 주는 반면, 스포카산스는 현대적이고 세련된 느낌을 줍니다.
- 가독성: 노토산스는 다양한 해상도에서 우수한 가독성을 제공하지만, 스포카산스는 저해상도 환경에서 문제가 발생할 수 있습니다.
- 지원 언어: 노토산스는 다양한 언어를 지원하는 반면, 스포카산스는 특정 언어에 대한 지원이 제한적일 수 있습니다.
