# CodingFont: 코딩 폰트를 선택하도록 돕는 게임

> Clean Markdown view of GeekNews topic #28045. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=28045](https://news.hada.io/topic?id=28045)
- GeekNews Markdown: [https://news.hada.io/topic/28045.md](https://news.hada.io/topic/28045.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2026-03-31T14:33:02+09:00
- Updated: 2026-03-31T14:33:02+09:00
- Original source: [codingfont.com](https://www.codingfont.com/)
- Points: 1
- Comments: 1

## Topic Body

- 다양한 **모노스페이스 폰트**를 비교하며 자신에게 가장 읽기 좋은 코딩용 폰트를 찾을 수 있는 **웹 기반 인터랙티브 게임**
- 각 라운드마다 두 가지 폰트가 제시되고, 사용자가 더 선호하는 폰트를 선택하면 **개인 맞춤형 추천 결과**가 생성됨
- **Font Ligatures**, **폰트 크기 조절**, **테마 변경** 등 시각적 요소를 직접 조정해 실제 개발 환경과 유사한 조건에서 평가 가능
- 코드 예시에는 `0`, `O`, `l`, `1` 등 **비슷한 문자 조합**이 포함되어 폰트별 **문자 식별력**을 테스트할 수 있음
- Typogram의 **Studio**와 연동되어 있으며, 브라우저에서 바로 실행 가능한 **간단한 UI**로 폰트 탐색과 비교를 지원함

---

### 주요 기능
- **Font Ligatures** 옵션을 켜거나 꺼서 합자 기능이 있는 폰트와 없는 폰트를 비교 가능
- **폰트 크기(Font Size)** 를 8~36 범위에서 조절해 다양한 화면 환경에서의 가독성을 직접 확인 가능
- **Show Name** 및 **Theme** 설정을 통해 폰트 이름 표시 여부와 화면 테마를 변경 가능
- 각 폰트는 동일한 **JavaScript 코드 예시**를 사용해 비교되며, 실제 개발 환경과 유사한 조건에서 판별 가능

### 코드 예시 구성
- 예시 코드에는 **단일행 주석**(`//`)과 **다중행 주석**(`/* ... */`)이 포함됨
- **화살표 함수(arrow function)** 문법을 사용한 `isMultipleOf` 함수가 정의되어 있으며, 숫자와 배수를 비교하는 간단한 로직을 포함함
- 변수명에는 `0`, `o`, `O`, `l`, `1`, `I` 등 **비슷하게 보이는 문자 조합**이 사용되어 폰트별 구분 명확성을 확인 가능
- 함수 호출 결과는 콘솔에 출력되며, `0`과 `1`을 다르게 처리하는 예시를 통해 **문자 식별력**을 테스트할 수 있음

### 인터랙션 및 사용 흐름
- 사용자는 각 라운드에서 폰트를 선택하거나 방향키(`⇽`, `⇾`)로 이동하며 비교를 진행함
- 선택이 완료되면 다음 폰트 쌍으로 넘어가며, 반복을 통해 개인의 **가독성 선호도**를 점진적으로 파악함
- **Restart Game** 버튼으로 게임을 재시작해 새로운 비교 세션을 즉시 시작 가능함

### 부가 기능 및 탐색
- 상단 메뉴의 **Browse** 탭을 통해 다양한 코딩 폰트를 직접 탐색 가능
- **Studio** 링크를 통해 Typogram의 폰트 디자인 도구로 이동 가능
- 전체 인터페이스는 단순한 **웹 기반 UI**로 구성되어 있으며, 별도 설치 없이 브라우저에서 바로 실행 가능함

## Comments



### Comment 54199

- Author: neo
- Created: 2026-03-31T14:33:02+09:00
- Points: 1

###### [Hacker News 의견들](https://news.ycombinator.com/item?id=47575403) 
- 이 게임에서 마음에 안 드는 점은 브라우저가 **폰트를 직접 렌더링**한다는 점임  
  Chrome은 Freetype이나 DirectWrite와 다르게 폰트를 그리기 때문에, Windows나 macOS 어디에도 완전히 맞지 않음  
  실제 앱 렌더링을 **손실 없는 스크린샷**으로 보여주는 게 더 정확하다고 생각함  
  폰트마다 크기에 따라 가독성이 달라지고, 렌더러별로도 결과가 다름  
  내가 여러 폰트를 테스트해봤는데, Fira Code를 기준으로 8개는 더 낫고 17개는 더 나빴음  
  [테스트 결과 링크](https://github.com/Diablo-D3/dotfiles/blob/master/fontsizes....)
  - 완전 공감함. 같은 픽셀 크기라도 환경마다 폰트가 완전히 다르게 보임  
    macOS의 **폰트 렌더링 품질**을 정말 좋아하지만, Linux에서는 비슷하게 구현하지 못했음  

- `<=`가 **합자(ligature)** 로 바뀌는 걸 보고 바로 탈락시켰음  
  코드 문자에는 장난치지 말았으면 함  
  - 어떤 폰트는 소문자 “m”의 가운데 기둥이 짧은데, 그게 너무 마음에 듦  
    결국 내가 원래 쓰던 Ubuntu Mono로 돌아왔음. 일관성은 유지된 셈임  
  - 이런 합자 기능은 **터미널 설정**에서 끌 수 있음. wezterm이나 ghostty 같은 곳에서 조정 가능함  
  - 사이트에서 합자를 끄는 **체크박스 옵션**이 있음  
  - 대부분의 합자는 좋아하지만, 이건 **선택적으로 끄기**가 가능했으면 좋겠음  
  - 나도 합자를 별로 안 좋아함. 사이트 오른쪽 상단 체크박스로 끌 수 있음  

- 폰트가 없다고 하는 사람들에게 추천하고 싶은 게 있음 — 바로 [**MAPLE MONO**](https://github.com/subframe7536/Maple-font)  
  가독성이 뛰어나고, **Nerd Font 호환성**도 좋음  
  주변 사람들도 내 폰트를 보고 칭찬할 정도였음  
  - 하지만 이탤릭체의 ‘l’ 기울기와 간격이 다른 글자와 달라서 **시각적으로 불균형**해 보임  
    특히 “null” 같은 단어에서 그 차이가 두드러짐  
  - 덜 알려진 폰트를 공유하자면, 내가 좋아하는 건 [**Lotion**](https://font.nina.coffee/)임  
    귀엽고 깔끔하면서도 가독성이 좋음  
  - 개인적으로는 Maple Mono가 **Comic Sans처럼 아마추어틱**하게 느껴짐  
  - Maple Mono의 장점은 ‘I’와 ‘l’, ‘0’과 ‘O’ 구분이 명확한 점임  
    다만 “m”의 가운데 기둥이 짧은 식의 세밀한 차별화는 부족함  
  - 이탤릭체가 **필기체로 변하는 것**은 IDE에서는 원하지 않음  

- 이 게임이 너무 마음에 들지만, **토너먼트식**이 아니라 “Hot or Not” 방식으로 비교했으면 좋겠음  
  비슷한 폰트끼리는 선택이 어렵고, **선호도 퍼센티지**를 보고 싶음  

- 내가 좋아하는 폰트인 Berkeley Mono, Iosevka, Cascadia Code가 빠져 있었음  
  대신 Roboto Mono가 나왔는데, “m”과 “r”의 렌더링이 마음에 안 들면 전체 폰트가 이상하게 느껴짐  
  - Berkeley와 Iosevka를 합친 [**IoskeleyMono**](https://github.com/ahatem/IoskeleyMono)도 있음  
  - Berkeley Mono는 내가 **처음으로 구매한 폰트**임  
    완벽에 가깝고, 커스터마이징 도구도 훌륭함  
    Nix 환경에서 쓰려면 약간의 **해킹성 설정**이 필요했지만, 여전히 즐겨 사용 중임  
    [내 수정 버전 링크](https://github.com/pmarreck/usgc-machine-report-nixos-editio...)  
  - 여러 폰트를 거쳐도 결국 Ubuntu Mono로 돌아오게 됨  
    기본 오픈소스 폰트들도 충분히 괜찮다고 느낌  

- 내가 쓰는 코딩 폰트는 [**comic-shanns-mono**](https://github.com/jesusmgg/comic-shanns-mono?tab=readme-ov-...)임  
  - **Codemonkey**라는 폰트도 흥미로웠음. [사이트](https://www.comicbookfonts.com/Code-Monkey-Variable-font-p/b...)에 만화체 폰트가 많음  
    다만 ‘+’ 기호가 공백으로 표시되는 버그가 있음  
  - Zed 프로젝트를 하면서 이 폰트를 쓰기 시작했는데, 점점 더 좋아짐  
  - **Smalltalk 시절 폰트**가 떠오름  
  - 나는 **Comic Code Ligatures**를 씀 :D  
  - 이름만 보고는 별로일 줄 알았는데, 생각보다 훨씬 마음에 듦  

- 최종적으로 **Victor Mono**를 선택했는데, 예전에도 몇 년간 썼던 폰트였음  
  iPhone에서는 **진행 표시줄**이 있었으면 좋겠고, “이 폰트는 절대 안 쓸 거야” 같은 옵션도 있었으면 함  
  몇 년마다 **좁은 폰트(Iosevka)** 와 **넓은 폰트(Azeret Mono)** 사이를 오가게 됨  
  - 나도 Victor Mono를 꽤 후반까지 썼는데, Firefox에서 **@ 기호 렌더링**이 별로였음  
    터미널에서는 괜찮아서, 렌더러 차이의 문제로 보임  

- 요즘은 **Iosevka**를 주로 쓰지만, 예전엔 Ubuntu Mono, JetBrains Mono, PT Mono, Terminus 등 다양하게 써봤음  
  그중에서도 **Liberation Mono**가 가장 읽기 쉬웠음  
  최근엔 **Cascadia Code**도 의외로 마음에 듦  
  - Cascadia가 사이트에 없어서 아쉬웠음  
    몇 주 써보니 훨씬 읽기 쉬워서 더 큰 폰트인 줄 알았는데, 실제로는 **더 작으면서도 가독성이 높았음**  

- 처음엔 폰트에 큰 관심이 없다고 생각했는데, Xanh Mono를 보고 **즉각적인 거부감**이 들었음  
  결국 VS Code 기본 폰트인 Droid Sans Mono와 Roboto Mono가 거의 같다는 걸 알게 됨  
  - 나도 비슷한 경험을 했고, Roboto로 **터미널 최적화**를 시도 중임  
    폰트 웨이트나 **이모지 지원**이 더 나을 것 같음  

- 이 게임이 재밌었지만, **진행 상황 표시**가 있었으면 좋겠음  
  1등, 2등, 준결승, 8강 같은 결과도 보여주면 좋겠음  
  - 진행 상황은 왼쪽에 표시되지만, **인증서에는 안 나옴**  
  - 모바일에서는 메뉴 버튼 뒤에 **숨겨진 진행 표시**가 있음