본문으로 건너뛰기
피드

요즘 픽셀 폰트가 그냥 복고 감성이 아닌 이유

frontend 약 5분
vote
0
댓글
북마크

1990년대 기기 화면 느낌을 현대 폰트 시스템으로 재해석한 픽셀 폰트 몇 가지를 소개한 글이다. 핵심은 예쁜 복고풍 글자 모양만이 아니라, 실제 제품에서 쓸 수 있게 기준선, 자간, 메타데이터, 세로 메트릭까지 챙기는지가 중요하다는 점이다.

  • 1

    Analog Mono는 1990년대 비디오 기기 화면에서 보던 픽셀 폰트의 낮은 기준선 문제를 고친 폰트다.

  • 2

    Coral Pixels는 예전 서브픽셀 렌더링의 색 번짐을 의도적인 시각 요소로 가져온 컬러 폰트다.

  • 3

    Two Slice는 높이가 2픽셀뿐인데도 어느 정도 읽히는 실험적인 폰트다.

  • 4

    Vercel의 Geist Pixel은 장식용 픽셀 폰트가 아니라 실제 제품 타이포그래피 시스템 안에서 쓰이도록 설계됐다는 점을 강조한다.

  • 픽셀 폰트가 다시 흥미로운 이유는 단순히 “레트로 감성 좋네”에서 끝나지 않음.

    • 글에서 소개하는 폰트들은 1990년대 기기 화면, 서브픽셀 렌더링, 초저해상도 글자 같은 오래된 시각 언어를 현대 폰트 시스템 안으로 끌고 들어옴.
    • 중요한 포인트는 이들이 실제로는 운영체제에 설치해서 쓸 수 있는 벡터 폰트라는 점임. 픽셀처럼 보이지만, 내부적으로는 요즘 환경에 맞춘 폰트라는 얘기.
  • Andrew Gleeson의 Analog Mono는 예전 VCR OSD Mono 스타일의 고질적인 문제를 고친 케이스임.

    • 1990년대 하이파이 장비, 비디오 플레이어, TV, 캠코더 같은 곳에서 자주 보이던 그 픽셀 폰트 감성이 출발점임.
    • 원래 스타일은 기준선이 낮아서, 아래로 내려가는 획이 있는 글자들이 어색하게 위로 끌려 올라가는 문제가 있었음.
    • Analog Mono는 이 기준선 문제를 바로잡아서, 같은 복고풍이라도 글자 구조가 훨씬 자연스럽게 보이도록 만든 폰트임.
  • Kumiko Yoshida의 Coral Pixels는 색 번짐까지 폰트 디자인으로 가져온 사례임.

    • Google Fonts에서도 제공되는 컬러 폰트고, 1990년대와 2000년대 화면에서 보이던 컬러 프린징을 일부러 포함함.
    • 원래 이런 색 번짐은 서브픽셀 렌더링의 부산물에 가까웠는데, 이제는 향수나 시각적 재미를 주는 디자인 요소로 재활용되는 중임.
    • 약간 색수차(chromatic aberration) 감성과도 맞닿아 있어서, “결함이었던 게 스타일이 되는” 전형적인 흐름임.
  • Joseph Fatula의 Two Slice는 더 극단적임. 높이가 단 2픽셀인 폰트인데, 그래도 어느 정도 읽힘.

    • 폰트 설명 자체도 “2픽셀 높이이고, 어느 정도 읽을 수 있음”에 가깝다 보니 거의 타이포그래피 실험에 가까움.
    • 읽기 편한 본문용이라기보다는, 글자가 최소한의 픽셀 정보만으로 어디까지 버틸 수 있는지 보는 재미가 큼.

중요

> 여기서 말하는 픽셀 폰트들은 진짜 옛날식 비트맵 폰트가 아니라, 현대 환경에서 설치하고 확장해 쓸 수 있는 벡터 폰트임. “픽셀처럼 보이는 것”과 “제품에서 안정적으로 동작하는 것”은 완전히 다른 문제임.

  • 글의 마지막 축은 Vercel의 Geist Pixel임. 여기서는 얘기가 단순한 취향 소개에서 프로덕션 타이포그래피로 넘어감.

    • Vercel은 Geist Pixel을 장난감 같은 novelty font가 아니라 시스템 확장에 가깝다고 설명함.
    • 픽셀 질감은 유지하되, 실제 제품 안에서 쓰일 수 있도록 더 큰 타이포그래피 시스템과 맞물리게 만들었다는 주장임.
    • 좀 과하게 멋 부린 문구처럼 들리긴 하지만, 짚고 있는 문제는 꽤 현실적임.
  • 픽셀 폰트가 실제 서비스에서 자주 깨지는 이유도 여기서 나옴.

    • 뷰포트 크기에 따라 스케일링이 어색해질 수 있음.
    • 기존 타이포그래피 시스템과 메트릭이 충돌할 수 있음.
    • 장식용으로만 만들어진 폰트는 글리프 범위, 커닝, 줄 높이 같은 실무 디테일이 부족할 수 있음.
  • 결국 좋은 폰트의 약점은 글자 모양이 아니라, 눈에 잘 안 보이는 주변부에서 터지는 경우가 많음.

    • 커닝, 메타데이터, 추가 글리프, 세로 메트릭 같은 것들이 대표적임.
    • Geist Pixel 팀이 특히 자랑스러워하는 지점도 이 보이지 않는 작업 쪽으로 보임.
    • 폰트 디자인이 UI 엔지니어링과 만나는 순간, “예쁜가?”보다 “줄 안에서 안 깨지는가?”가 더 중요해지는 셈임.

픽셀 폰트 얘기처럼 보이지만, 실제로는 제품 UI에서 폰트를 쓴다는 게 얼마나 많은 보이지 않는 엔지니어링을 요구하는지 보여주는 글이다. 레트로 감성도 프로덕션에 올리려면 기준선, 글리프, 메트릭 같은 지루한 디테일을 피할 수 없다.

댓글

댓글

댓글을 불러오는 중...

frontend

HTML의 `<dl>`이 생각보다 쓸모 많은 이유

이 글은 HTML의 description list, 즉 `<dl>`, `<dt>`, `<dd>`가 단순 용어 사전용 태그가 아니라 이름-값 쌍 UI를 표현하는 꽤 강력한 시맨틱 도구라고 설명한다. 숙소 편의시설, 요금 내역, 기술 용어 설명, 게임 능력치표처럼 흔한 패턴을 중첩 `<div>` 대신 의미 있는 HTML로 만들 수 있다는 얘기다.

frontend

HTML을 캔버스 안에 넣는 데모 모음이 등장함

구글 크롬 랩스 저장소에 HTML-in-Canvas 관련 데모와 프레임워크 지원 목록이 정리됐다. Duck Hunt 스타일 폼, 흔들리는 버튼, 셰이더 기반 페이지 전환, 천처럼 매달린 폼 같은 실험적 예제가 포함돼 있고 Three.js와 PlayCanvas 쪽 샘플도 연결돼 있다.

frontend

싱글 페이지 앱이 웹을 너무 비싸게 만들었다는 불평

이 글은 싱글 페이지 앱(SPA)이 사용자 경험을 좋게 만든다는 명분 아래 웹의 초기 로딩 비용, 도구 복잡도, 개발 진입 장벽을 키웠다고 비판한다. 페이스북 로그인 페이지의 CSS 3.8MB, 레딧 몇 개 클릭 후 33MB 다운로드 같은 숫자를 들며, 지금의 프론트엔드 생태계가 사람보다 대기업의 요구에 맞춰져 있다고 주장한다.

frontend

네이티브로 끝까지 가려다 텍스트에서 막힌 macOS 개발자의 고백

20년 가까이 macOS와 iOS 네이티브 개발을 해온 작성자가 SwiftUI, AppKit, TextKit 2로 마크다운 채팅 UI를 만들다 결국 WebKit과 Electron 쪽이 훨씬 낫다는 결론에 도달한 글이다. 문제는 성능 하나가 아니라 선택, 스트리밍, 스크롤, 접근성, 텍스트 상호작용 같은 ‘사용자가 당연히 기대하는 기본기’가 네이티브 조합에서 계속 깨진다는 점이다.

frontend

Tailwind를 떠나며 다시 CSS 구조를 배운 이야기

Julia Evans가 몇 년간 써온 Tailwind를 걷어내고, 의미 있는 HTML과 순수 CSS로 사이트를 다시 정리한 경험을 공유했다. 핵심은 Tailwind를 단순히 버린 게 아니라, Tailwind가 줬던 제약과 시스템을 CSS 코드베이스 안에서 직접 재구성했다는 점이다.