PPT 폰트 조합이 막막할 때, ‘무난함 점수’로 한글 폰트를 고르는 미니앱

1. 무난폰트를 만든 이유와 현재 범위

PPT, 카드뉴스, 썸네일을 만들 때 폰트 선택에는 생각보다 많은 시간이 걸립니다. 마음에 드는 글꼴을 찾은 뒤에도 제목과 본문을 어떻게 조합할지, 화면에서 어색하지 않을지 다시 판단해야 하죠. 디자인 지식이 많지 않다면 선택지가 오히려 부담으로 작용해 익숙한 폰트만 반복해서 쓰게 됩니다.

무난폰트는 “이 조합을 사용해도 어색하지 않을까?”라는 질문에 답하기 위해 만들었습니다. 새로운 폰트를 많이 소개하기보다, 디자인 입문자가 바로 적용할 수 있는 안정적인 한글 폰트 조합을 보여주는 데 초점을 맞췄습니다.

현재 추천 범위는 PPT·카드뉴스·썸네일·이력서처럼 일상적으로 문서를 만들고 콘텐츠를 제작하는 상황입니다. 사용자는 용도별 제목용·본문용 폰트 조합과 무난함 점수, 실제 적용 방향을 한 흐름 안에서 확인할 수 있습니다.

처음부터 모든 한글 폰트를 분석하는 서비스로 확장하지는 않았습니다. 전문 디자이너를 위한 세밀한 서체 분석 도구보다, 작업을 시작할 때 “일단 실패하지 않을 조합은 무엇일까?”를 확인하는 미니앱으로 범위를 정했습니다.

📌 먼저 보는 핵심 답변

• 무난폰트는 디자인 입문자가 한글 폰트 조합과 적용법을 빠르게 확인하는 토스 미니앱입니다.
• 폰트 페어 추천, 무난함 점수, PPT·카드뉴스·썸네일·이력서별 조합을 실제로 제공합니다.
• 무료 폰트와 페어 확장은 이어질 예정이며, 베타 검증과 오픈소스 공개는 계획 단계입니다.

2. 핵심 결정: 많이 보여주기보다 바로 쓰는 조합에 집중하기

폰트 종류를 많이 보여주는 것만으로는 선택이 쉬워지지 않습니다. 1차 기능은 작업 목적별 폰트 페어와 조합의 무난함 점수, 실제 적용 방법을 함께 확인하는 구조로 정했습니다. 사용자가 폰트 이름만 비교하는 데 그치지 않고, 어디에 어떻게 쓸지 바로 판단하도록 한 결정입니다.

현재는 PPT·카드뉴스·썸네일·이력서에 맞춘 추천 조합을 제공하고 있습니다. 출시 후에는 용도별 추천 페어 4종과 무료로 사용할 수 있는 아스타 산스, 11번가 고딕, 네오 현대, 에이투지체, 수문장 타이틀·본문 등 6종을 추가했습니다.

웹폰트 표시 문제도 출시 후 보완했습니다. 일부 폰트가 대체 글꼴로 보이던 현상을 줄이기 위해 직접 참조하는 방식으로 렌더링을 보완했고, 연결이 끊긴 폰트 링크는 검색 URL로 교체했습니다.

폰트 메타데이터를 150개까지 확장하는 작업은 아직 계획 단계입니다. 이력서·자기소개서 전용 큐레이터와 페이·송금 화면에 맞춘 큐레이터도 후속 확장 방향으로 검토하고 있습니다. 지금은 자주 쓰는 디자인 작업에서 추천과 적용 안내가 안정적으로 이어지는 경험에 집중하고 있습니다.

3. 사용 시나리오: 작업 목적을 고르고 조합을 적용하기

사용자가 PPT 발표 자료를 만들기 위해 무난폰트를 실행한다고 가정해 보겠습니다.

먼저 ‘PPT’를 선택합니다. 막연하게 폰트 전체를 검색하는 대신, 만들고 있는 결과물의 목적에 맞는 추천 조합부터 확인할 수 있습니다. 카드뉴스·썸네일·이력서를 만드는 경우에도 같은 방식으로 해당 목적을 선택합니다.

다음 화면에서는 제목용 폰트와 본문용 폰트가 한 쌍으로 제안됩니다. 사용자는 조합에 표시된 무난함 점수를 참고해 여러 결과를 비교하고, 익숙한 인상인지 두 글꼴의 분위기가 어울리는지 판단합니다. 점수는 선택을 대신하는 기준이 아니라 비교를 돕는 보조 기준입니다.

조합을 고른 뒤에는 제목과 본문에 각각 어떤 폰트를 배치할지 확인합니다. 썸네일처럼 짧고 눈에 띄어야 하는 작업과 이력서처럼 읽기 편해야 하는 작업을 같은 기준으로 판단하지 않도록, 용도에 맞는 적용 방향도 함께 제공합니다.

화면은 React, Vite, Tailwind CSS를 기반으로 구성했으며 앱인토스 웹 프레임워크에 맞춰 동작하도록 정리했습니다. 작업 목적 선택부터 조합 비교, 적용 방향 확인까지 복잡한 설정 없이 이어지는 기본 흐름을 완성하는 데 초점을 맞췄습니다.

4. 출시 후 부딪힌 현실: 광고 설정과 웹폰트 오류

출시 후에는 기능 자체보다 운영 설정과 외부 리소스에서 문제가 먼저 드러났습니다.

광고 설정에서는 앱 코드가 호출하는 전면 광고 그룹과 콘솔에서 실제로 활성화한 그룹이 일치하지 않았습니다. 배너 설정은 콘솔과 맞았지만 전면 광고는 이전 그룹을 가리키고 있었습니다. 특정 화면의 코드만 수정하는 대신 `src/ads/adConfig.ts`에서 배너와 전면 광고 그룹을 한곳에서 관리하도록 정리했습니다. 이후 전면 광고 그룹을 현재 콘솔 설정에 맞게 변경했습니다.

웹폰트에서는 눈누의 레거시 CSS 래퍼가 삭제되면서 일부 글꼴이 폴백 폰트로 렌더링되는 문제가 발생했습니다. 지마켓 산스, 에스코어 드림, 카페24 써라운드, 쿠키런, 티몬 몬소리, 마포금빛나루, 창원단감아삭이 등은 woff 파일을 직접 참조하는 `@font-face` 방식으로 복구했습니다.

주아체는 Google Fonts 버전으로 통합했고, 더 이상 연결되지 않는 눈누 링크 3건은 검색 URL로 교체했습니다. 폰트 파일과 링크를 검증하는 스크립트는 재발 방지를 위한 후속 과제로 남겨 두었습니다.

이번 점검을 통해 광고는 코드와 운영 콘솔의 설정을 함께 확인해야 한다는 점을 배웠습니다. 외부 폰트 주소는 시간이 지나면서 바뀌거나 사라질 수 있다는 사실도 확인했습니다.

5. 현재 상태, 다음 계획, 배운 점

현재 무난폰트는 개발을 마치고 배포·출시한 상태입니다. PPT, 카드뉴스, 썸네일, 이력서에 사용할 한글 폰트 조합을 용도별로 확인하고, 폰트 페어와 무난함 점수, 제목·본문 적용 방법을 함께 살펴볼 수 있습니다.

출시 후에는 용도별 추천 페어 4종과 무료 폰트 6종을 추가했습니다. 깨진 웹폰트 CDN 8건은 직접 woff 파일을 불러오는 방식으로 복구했고, 연결이 끊긴 눈누 링크 3건은 검색 URL로 교체했습니다. 광고 그룹은 중앙 관리 파일로 정리한 뒤 실제 운영 콘솔 설정에 맞게 수정했습니다.

TypeScript 타입 검사를 통과했고 `npm run build`도 성공해 앱 패키지를 생성했습니다. `@types/react`와 `@types/react-dom` v19를 추가해 빌드 환경과 타입 정의도 정리했습니다.

다음 계획은 현재 기능과 구분해 두었습니다. 폰트 메타데이터를 150개까지 늘리는 작업, GitHub 저장소 오픈소스 공개, 라이브 URL과 별도 도메인 운영, 사용자 베타 10명 모집, 설문 5건 이상 회수는 아직 실행 전입니다.

이번 개발에서 배운 점은 추천 서비스일수록 기능을 늘리는 일만큼 폰트 표시와 링크 같은 기본 데이터의 안정성이 중요하다는 사실입니다. 추천 범위를 넓힐 때도 데이터의 최신성과 실제 적용 결과를 함께 검증해야 합니다. 사용자가 폰트 조합을 고를 때 무난함 점수와 실제 적용 예시 중 무엇을 더 먼저 보는지는 다음 검증에서 확인할 질문으로 남았습니다.

첨부한 실제 화면

• 이미지 1: 01.png (실제 화면 1)
• 이미지 2: 02.png (실제 화면 2)
• 이미지 3: 03.png (실제 화면 3)
• 이미지 4: 04.png (실제 화면 4)

❓ 자주 묻는 질문

Q. 무난폰트에서는 무엇을 추천받을 수 있나요?

A. PPT, 카드뉴스, 썸네일, 이력서처럼 자주 쓰는 작업별로 한글 폰트 페어와 적용 방법을 확인할 수 있습니다. 추천 조합에는 무난함을 판단하는 기준도 함께 담았습니다.

Q. 폰트를 직접 설치하지 않아도 사용할 수 있나요?

A. 앱에서 폰트 조합과 적용 방향을 먼저 확인할 수 있습니다. 실제 작업물에 적용할 때는 각 폰트의 제공처와 이용 조건을 확인해야 합니다.

Q. 현재 등록된 폰트와 추천 조합은 계속 늘어나나요?

A. 출시 후 무료 폰트 6종과 작업 유형별 신규 페어 4종을 추가했습니다. 더 많은 폰트 메타데이터를 정리하는 일은 다음 계획으로 남아 있습니다.

Q. 현재 제품에서 아직 검증하지 않은 부분은 무엇인가요?

A. 사용자 베타 모집과 설문을 통한 1차 검증은 계획 단계입니다. 이용자 반응을 확인한 뒤 추천 기준과 콘텐츠 범위를 조정할 예정입니다.

이 개발기를 참고할 때

이 글은 제가 직접 만든 제품의 개발 과정을 정직하게 공유하는 기록입니다.

• 스크린샷과 설명은 작성 시점의 실제 상태 기준이며, 이후 업데이트로 달라질 수 있습니다.
• "다음 계획"으로 표시한 기능은 아직 완성된 기능이 아닙니다.
• 참고하거나 인용할 때는 이 글의 URL을 출처로 남겨주세요.
• 궁금한 점이나 피드백은 댓글로 남겨주시면 다음 개발과 다음 글에 반영하겠습니다.