Spoqa Han Sans is a custom font based on Noto Sans and Lato to fit multilingual UI of Spoqa’s products. We now unveil the new version which has evolved in many ways. 스포카 한 산스는 스포카의 제품의 다국어 UI에 대응하기 위해 노토 산스와 라토를 바탕으로 커스텀한 글꼴입니다. 여러모로 개선을 거쳐 진화한 스포카 한 산스를 공개합니다.


2015년 한글날 공개한 커스텀 글꼴,
스포카 한 산스

다양한 언어 환경에서의 사용성을
극대화했습니다.
한국과 일본의 웹, 앱에서 두루 활용해야 했기에 국문, 영문, 일문에 모두 대응하는 오픈소스 글꼴 노토 산스를 커스텀했습니다.
숫자를 많이 쓰는 서비스의 특성이
반영되어있습니다.
휴대폰 번호를 활용하는 멤버십 서비스이기에 사용성을 고려해 숫자를 커스텀했습니다. 라토 서체 특유의 둥근 획의 끝을 다듬어 노토 산스의 국문과 어울리게 변경했습니다.
용량 다이어트를 감행해 웹 페이지에서도
부담 없이 사용할 수 있습니다.
노토 산스를 포함한 한글꼴은 전체 용량이 크기 때문에 웹에서 사용하기에 좋지 않습니다. 이에 11,172자에서 한글꼴 완성형의 최소 단위인 2,350자로 줄였습니다. 첫 버전의 용량은 16MB에서 441KB 수준으로 줄었습니다.
기존 스포카 한 산스를 개선한
두 번째 버전을 공개합니다.
스포카 한 산스를 처음 공개하고 많은 사랑을 받았습니다.
그만큼 다양한 피드백을 들었고, 내부적으로 직접 사용하면서도 개선의 필요성을 느꼈습니다.
이를 반영해 개선한 스포카 한 산스를 공개합니다.

진화한 스포카 한 산스를 공개합니다.


숫자의 폭이 같은 너비를 지니는 고정폭이 되면 한눈에 숫자의 단위를 알아보기 쉬워집니다. 도도 포인트를 포함한 도도의 서비스는 숫자를 많이 쓰고 있으므로, 사용자의 편의를 높이기 위해 스포카 한 산스의 숫자들을 모두 고정폭으로 조정하였습니다.

영문 로마자 Q, a, y의 모양을 변경했습니다. 노토 산스 한글의 딱딱한 인상에 맞춰 스포카 한 산스로 커스텀하면서 숫자 및 일부 글리프를 딱딱한 느낌으로 변경했습니다. 대문자 Q의 곡선형태의 꼬리를 없애고 좀 더 단호한 인상을 주었고, 소문자 y도 마찬가지의 의도로 곡선적인 꼬리를 곧게 폈습니다. 소문자 a도 조금 더 각진형태로 변경했습니다.

Regular와 Thin의 사이 폰트 스타일인 Light를 추가했습니다. 웹 페이지에서 큰 글자 텍스트에 Thin을 쓰기에는 지나치게 얇고 또 Regular는 다소 두껍습니다. 이제, 스포카 한 산스 Light를 사용하시면 됩니다. 큰 글자 크기에서도 Regular와 비슷한 회색도로 보여줄 수 있습니다.

“더보기”나 “뒤로” 레이블과 함께 쓰는 화살표(caret) 글리프를 PUA(Private Use Areas)에 추가했습니다. 보통 > (U+003E)로 사용되곤 하는데 완결된 형태의 아이콘을 넣어 UI 요소로서의 완성도를 높이고자 했습니다.

눈사람 글리프(U+2603)에 도도 포인트의 캐릭터인 포포와 푸이를 추가했습니다. Thin과 Light에는 푸이가, Regular와 Bold에는 포포가 들어가 있습니다.

한글 완성형 글꼴에 추가 글자를 넣어 사용성을 개선했습니다. 노민지, 윤민구 님의 논문인 “KS 코드 완성형 한글의 추가 글자 제안”을 참고했습니다. 두 번째 버전의 서브셋은 KS 완성형에 추가 글자 224자를 더해 총 2,574자를 제공합니다.

기예메의 모양을 다른 글자와 어울리게 변경했고, 전각으로 되어있던 낫표와 괄호를 디자이너가 아닌 일반 사용자도 범용 애플리케이션과 웹 환경에서 미세 조정 없이 반각으로 사용할 수 있게 조정했습니다.

스포카 한 산스 써보기

아래 섹션에 원하는 글자를 입력해 스포카 한 산스를 웹 페이지에서 써보세요!
원하는 글자 굵기를 선택할 수 있으며, 글자 크기, 글줄 사이, 글자 사이 및 색상을 변경할 수 있습니다.

스포카 한 산스 내려받기

서브셋의 경우 국문버전은 총 2,574의 글리프를, 일문 버전은 상용한자 6,335자를 지원해
오리지널 보다 가볍게 사용하실 수 있습니다.

스포카 한 산스는 개인 및 기업 사용자를 포함한 모든 사용자에게 무료로 제공되며
오픈 폰트 라이선스로 자유롭게 사용, 수정 및 재배포하실 수 있습니다.


웹폰트로 사용하기

스포카 한 산스를 웹폰트로 사용하시려면 두 가지 방법이 있습니다.

스타일 시트에 아래의 코드를 넣거나,

@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-jp.css);

혹은 HTML의 <head> 태그 안에 아래의 코드를 넣어주세요.

<link href='//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css' rel='stylesheet' type='text/css'>
<link href='//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-jp.css' rel='stylesheet' type='text/css'>

그후 <style> 태그 안에 font-family를 설정해주세요.

* { font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-serif'; }

웹폰트로 사용할 때 위 방법을 사용하시면 무료로 서브되는 버전이기에 불러오는 속도가 느릴 수 있습니다. 가능하면 직접 서브해서 사용하길 추천합니다. 조금 더 자세히 알고싶다면 스포카 한 산스 웹폰트로 사용하기 포스트을 참조하세요.


어느 서비스에서 스포카 한 산스를 사용하고 있을까요?

스포카 한 산스는 명료한 숫자 모양 덕분에, 숫자를 많이 써야 하는 서비스의 사랑을 받고 있습니다. 또한, 무료로 배포하고 있어 비영리 행사나 예술계 행사의 웹 페이지에서도 자주 쓰입니다. 어떤 곳에서 어떻게 스포카 한 산스를 사용하는지 아래 링크를 눌러 확인해보세요.