Datatype - 텍스트를 차트로 변환하는 가변 폰트

xguru · 2026-05-19T09:31:02+09:00

"데이터를 타이포그래피로(data as type)" 라는 컨셉으로, JS/이미지/렌더링 라이브러리 없이 텍스트만으로 차트 표시 OpenType 합자 치환을 활용해 {b:30,70,50,90} 같은 단순 텍스트 표현을 인라인 차트로 변환 막대/라인/파이 3가지 차트 유형 지원 막대 차트: {b:30,70,50,90,64,27,72,42} 콤마로 구분된 값(각 0–100), 최대 20개 막대 스파크라인: {l:10,50,30,80,20,15,48,72,37} 콤마로 구분된 값(각 0–100), 최대 20개 포인트 파이 차트: {p:69} {p:43} 0–100 사이의 단일 백분율 값 폰트 크기와 두 개의 가변 축으로 시각적 조정 Width(wdth): 50–150, 간격 조절, 기본값 100 Weight(wght): 100–900, 선 두께 조절, 기본값 400 글자 사이에서도 렌더링 가능해서 본문 중간, 표 안, 로그 메시지 등 텍스트가 들어가는 모든 곳에 그대로 동작 테이블/대시보드/리포트 등에도 쉽게 삽입 가능 웹에서는 3줄 CSS만으로 도입 가능 @font-face로 폰트 로드 → font-family: 'Datatype' 지정 → HTML에 {l:20,40,70} 작성 font-variation-settings로 wdth 등 추가 조정 옵션 제공 데스크톱: TTF 설치 후 OpenType 합자 지원 앱(Adobe 등)에서 사용 가능 Google Fonts에서도 배포 중이라 별도 호스팅 없이 사용 가능 15개 Named 인스턴스 제공 (표준 Weight 9개 + 커스텀 너비 조합 6개) Thin UltraCondensed(50/100), SemiBold Condensed(75/600), Medium Expanded(125/500), Black ExtraExpanded(150/900) 등 용도별 프리셋 포함 글리프 수 마스터당 10,850개, 총 9개 마스터 구성 파일 크기: TTF 4.0MB / WOFF2 78KB, 유니코드 커버리지는 Google Fonts Latin Core 브라우저 지원: Chrome 62+, Firefox 62+, Safari 11+, Edge 17+ 동작 설명 OpenType 합자 치환(ligature substitution) 기능을 활용함 원래 합자는 fi, fl 같은 글자 조합을 하나의 글리프로 치환하는 기능 Datatype은 이를 응용해 {b:30,70,50,90} 같은 패턴 전체를 하나의 차트 글리프 {b:30,70,50,90} 로 치환 브라우저나 앱이 폰트 합자 기능만 지원하면 자바스크립트 실행 없이 즉시 렌더링 SIL Open Font License 1.1 Specimen 사이트에서 실제 적용 사례 확인 가능

(github.com/franktisellano)

23P by xguru 3시간전 | ★ favorite | 댓글 10개

"데이터를 타이포그래피로(data as type)" 라는 컨셉으로, JS/이미지/렌더링 라이브러리 없이 텍스트만으로 차트 표시
OpenType 합자 치환을 활용해 {b:30,70,50,90} 같은 단순 텍스트 표현을 인라인 차트로 변환
막대/라인/파이 3가지 차트 유형 지원
- 막대 차트: {b:30,70,50,90,64,27,72,42} 콤마로 구분된 값(각 0–100), 최대 20개 막대
- 스파크라인: {l:10,50,30,80,20,15,48,72,37} 콤마로 구분된 값(각 0–100), 최대 20개 포인트
- 파이 차트: {p:69} {p:43} 0–100 사이의 단일 백분율 값
폰트 크기와 두 개의 가변 축으로 시각적 조정
- Width(wdth): 50–150, 간격 조절, 기본값 100
- Weight(wght): 100–900, 선 두께 조절, 기본값 400
글자 사이에서도 렌더링 가능해서 본문 중간, 표 안, 로그 메시지 등 텍스트가 들어가는 모든 곳에 그대로 동작
- 테이블/대시보드/리포트 등에도 쉽게 삽입 가능
웹에서는 3줄 CSS만으로 도입 가능
- @font-face로 폰트 로드 → font-family: 'Datatype' 지정 → HTML에 <span class="chart">{l:20,40,70}</span> 작성
- font-variation-settings로 wdth 등 추가 조정 옵션 제공
데스크톱: TTF 설치 후 OpenType 합자 지원 앱(Adobe 등)에서 사용 가능
Google Fonts에서도 배포 중이라 별도 호스팅 없이 사용 가능
15개 Named 인스턴스 제공 (표준 Weight 9개 + 커스텀 너비 조합 6개)
- Thin UltraCondensed(50/100), SemiBold Condensed(75/600), Medium Expanded(125/500), Black ExtraExpanded(150/900) 등 용도별 프리셋 포함
글리프 수 마스터당 10,850개, 총 9개 마스터 구성
파일 크기: TTF 4.0MB / WOFF2 78KB, 유니코드 커버리지는 Google Fonts Latin Core
브라우저 지원: Chrome 62+, Firefox 62+, Safari 11+, Edge 17+
동작 설명
- OpenType 합자 치환(ligature substitution) 기능을 활용함
- 원래 합자는 fi, fl 같은 글자 조합을 하나의 글리프로 치환하는 기능
- Datatype은 이를 응용해 {b:30,70,50,90} 같은 패턴 전체를 하나의 차트 글리프 {b:30,70,50,90} 로 치환
- 브라우저나 앱이 폰트 합자 기능만 지원하면 자바스크립트 실행 없이 즉시 렌더링
SIL Open Font License 1.1
Specimen 사이트에서 실제 적용 사례 확인 가능

▲

winterjung 3시간전 [-]

{p:75} {l:40,10,10,40} {p:75}

답변달기

▲

shakespeares 1시간전 [-]

{p:75} {l:40,10,10,40} {p:75}
우와..

답변달기

▲

xguru 2시간전 [-]

이런 활용법이?!

ㅋㅋㅋㅋㅋㅋㅋ

bichi 27분전 [-]

ㅋㅋㅋㅋㅋ

답변달기

▲

xguru 3시간전 [-]

긱뉴스에 잘 어울리는 거 같아서, 소개하면서 한번 베타 기능으로 도입해봤습니다. 크기가 작아서 직접 호스팅해도 부담이 없네요.
{b:30,70,90,64,27,42} {b:30,70,90,64,27,42} 나 {l:10,50,30,80,20} {l:10,50,30,80,20} 처럼 입력하면 요 문자열만 캐치해서 폰트로 둘러쌉니다.
백틱(`) 없이 문자열만 입력해야 합니다.

와 짱신기해요 ㅋㅋㅋㅋㅋ

xguru 3시간전 [-]

긱뉴스는 이미지를 가능 하면 안쓰고 있어서, 이런 텍스트 기반 경량 솔루션이 나오면 가능하면 도입해보고 있습니다.
구글, 흑백 이모지 폰트 Noto Emoji 공개 도 적용된지 4년째인데 아직 잘 쓰고 있네요 😀😃😄😁😆😅😍🥰😘

답변달기

▲

kimjeongwonn 2시간전 [-]

{b:90,100,100,90,20,10,0,10,20,90,100,100,90}