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로 구성되어 있으며, 별도 설치 없이 브라우저에서 바로 실행 가능함