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

• 다양한 모노스페이스 폰트를 비교하며 자신에게 가장 읽기 좋은 코딩용 폰트를 찾을 수 있는 웹 기반 인터랙티브 게임
• 각 라운드마다 두 가지 폰트가 제시되고, 사용자가 더 선호하는 폰트를 선택하면 개인 맞춤형 추천 결과가 생성됨
• 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로 구성되어 있으며, 별도 설치 없이 브라우저에서 바로 실행 가능함

[GN⁺]

Hacker News 의견들

• 이 게임에서 마음에 안 드는 점은 브라우저가 폰트를 직접 렌더링한다는 점임
  Chrome은 Freetype이나 DirectWrite와 다르게 폰트를 그리기 때문에, Windows나 macOS 어디에도 완전히 맞지 않음
  실제 앱 렌더링을 손실 없는 스크린샷으로 보여주는 게 더 정확하다고 생각함
  폰트마다 크기에 따라 가독성이 달라지고, 렌더러별로도 결과가 다름
  내가 여러 폰트를 테스트해봤는데, Fira Code를 기준으로 8개는 더 낫고 17개는 더 나빴음
  테스트 결과 링크

  • 완전 공감함. 같은 픽셀 크기라도 환경마다 폰트가 완전히 다르게 보임
    macOS의 폰트 렌더링 품질을 정말 좋아하지만, Linux에서는 비슷하게 구현하지 못했음

• <=가 합자(ligature) 로 바뀌는 걸 보고 바로 탈락시켰음
  코드 문자에는 장난치지 말았으면 함

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

• 폰트가 없다고 하는 사람들에게 추천하고 싶은 게 있음 — 바로 MAPLE MONO
  가독성이 뛰어나고, Nerd Font 호환성도 좋음
  주변 사람들도 내 폰트를 보고 칭찬할 정도였음

  • 하지만 이탤릭체의 ‘l’ 기울기와 간격이 다른 글자와 달라서 시각적으로 불균형해 보임
    특히 “null” 같은 단어에서 그 차이가 두드러짐
  • 덜 알려진 폰트를 공유하자면, 내가 좋아하는 건 Lotion임
    귀엽고 깔끔하면서도 가독성이 좋음
  • 개인적으로는 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도 있음
  • Berkeley Mono는 내가 처음으로 구매한 폰트임
    완벽에 가깝고, 커스터마이징 도구도 훌륭함
    Nix 환경에서 쓰려면 약간의 해킹성 설정이 필요했지만, 여전히 즐겨 사용 중임
    내 수정 버전 링크
  • 여러 폰트를 거쳐도 결국 Ubuntu Mono로 돌아오게 됨
    기본 오픈소스 폰트들도 충분히 괜찮다고 느낌

• 내가 쓰는 코딩 폰트는 comic-shanns-mono임

  • Codemonkey라는 폰트도 흥미로웠음. 사이트에 만화체 폰트가 많음
    다만 ‘+’ 기호가 공백으로 표시되는 버그가 있음
  • 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강 같은 결과도 보여주면 좋겠음

  • 진행 상황은 왼쪽에 표시되지만, 인증서에는 안 나옴
  • 모바일에서는 메뉴 버튼 뒤에 숨겨진 진행 표시가 있음