텍스트가 차트로 변신하는 마법, Datatype 등장!

by DD
3일 전
조회수 0

Datatype은 텍스트 문법을 이용해 인라인 차트를 생성하는 혁신적인 변수 폰트(Variable Font)

별도의 JavaScript나 렌더링 라이브러리 없이 타이포그래피(Typography) 자체로 시각화 구현

접근성 문제실제 사용성에 대한 커뮤니티의 우려가 제기됨

CSS 통합으로 웹 어디서든 텍스트처럼 차트 삽입 가능

변수 폰트(Variable Font) 기반 차트 렌더링

Datatype은 OpenType 변수 폰트(Variable Font) 기술을 활용하여 텍스트 자체를 차트로 렌더링합니다. 두 개의 축(Axes)을 통해 차트의 밀도와 두께를 조절할 수 있으며, 이는 CSS의 font-variation-settings 속성을 통해 제어됩니다. 개발자는 별도의 렌더링 엔진 없이 HTML 내에서 특정 문법을 타이핑하는 것만으로 차트를 구현할 수 있다는 점이 주목할 만합니다.

접근성(Accessibility) 및 사용성 논쟁

커뮤니티에서는 Datatype의 접근성(Accessibility)에 대한 심각한 우려가 제기되었습니다. 폰트 파일 로딩 실패 시 내용이 보이지 않는 문제, 스크린 리더가 텍스트 기반 차트 값을 제대로 해석하지 못할 가능성 등이 지적되었습니다. 또한, 일부 브라우저 확장 프로그램(uBlock Origin 등)이 폰트 파일을 차단하여 초기 렌더링에 실패하는 사례가 보고되어, 실제 환경에서의 안정적인 사용성에 대한 의문이 제기되었습니다.

CSS 통합 및 적용 방식

Datatype은 CSS `@font-face` 규칙과 `font-family` 설정을 통해 웹사이트에 쉽게 통합됩니다. `font-variation-settings`를 이용해 너비(width)와 두께(weight)를 조절하며, 텍스트 내에서 차트 표현을 위해 리거처(Ligature) 치환 기능을 활용합니다. 이는 기존 텍스트 렌더링 파이프라인을 그대로 사용하므로, 테이블, 대시보드, 보고서 등 텍스트가 사용되는 모든 곳에 자연스럽게 적용될 수 있다는 장점이 있습니다.

데이터 시각화 방식의 한계

텍스트 기반 차트라는 접근 방식은 데이터의 시각적 표현을 간결하게 제공하지만, 복잡한 데이터 분석이나 상호작용에는 한계가 있다는 의견이 있습니다. 제공된 값들이 0-100 사이의 백분율로 표현되는 점, 그리고 텍스트 자체로만 차트 값을 파악하는 것이 일반적인 사용자 경험과 다르다는 점이 지적되었습니다. 따라서 정보 전달의 명확성사용자 기대치 사이의 균형이 중요할 것으로 보입니다.

Datatype — variable font that turns text into charts