DINGBAT
Dingbat Font · v11.0.1
· dingbat font ·

10개의 카테고리, 452개의 글립

타이핑 한 줄로, 어떤 프로그램에서든

What

딩벳폰트는 452개의 아이콘을 텍스트처럼
타이핑해서 쓰는 아이콘 폰트입니다.

화살표, 체크, 반짝임, 하트, 악센트, 밑줄, 말풍선, 도형마크, 손동작, 인터페이스까지 10개 카테고리로 나뉘어 있고, 정해진 트리거 코드를 입력하면 오픈타입 리게처 기능으로 실제 손그림 아이콘이 나타납니다. 일러스트레이터, 피그마, 포토샵, 노션, 파워포인트, 키노트 등 오픈타입 리게처를 지원하는 프로그램이라면 어디서든 똑같이 작동합니다. 폰트 크기와 색상을 바꾸듯 아이콘의 크기와 색도 그대로 조절됩니다. 개인 프로젝트와 상업 프로젝트 모두에 무료로 쓸 수 있고, 웹사이트에 전체 아이콘을 미리 보고 트리거 코드를 바로 복사할 수 있습니다.

Why

매번 파일을 찾아야 하는지에 대한
의문에서 딩벳폰트를 시작했습니다.

브랜드 작업을 하다 보면 손그림 화살표나 하트, 반짝임 같은 요소를 자주 그리게 됩니다. 문제는 그 다음이었습니다. 아이콘을 매번 벡터 파일로 저장하고, 필요할 때마다 다시 찾아서 불러오고, 크기와 색을 하나하나 맞추는 과정이 반복되었습니다. 자주 쓰는 손그림일수록 이 과정이 비효율적으로 느껴졌습니다. 텍스트는 타이핑 한 번으로 크기, 색, 정렬이 전부 해결되는데, 아이콘은 왜 매번 파일을 다뤄야 하는지에 대한 의문에서 딩벳폰트가 시작됩니다. 답은 폰트였습니다. 자주 쓰는 손그림들을 트리거 코드에 매핑해서, 타이핑 한 줄로 아이콘을 "쓸" 수 있게 만들면 되는 거였습니다. 이후로는 벡터 파일을 찾을 필요 없이, 텍스트를 다루듯 아이콘을 다룰 수 있게 됐습니다.

How

타이핑한 코드가
아이콘으로 바뀌는 원리

각 아이콘에는 "a017", "e05"처럼 짧은 트리거 코드가 하나씩 지정되어 있습니다. 이 코드를 텍스트 상자에 그대로 입력하면, 폰트에 내장된 OpenType 리게처(liga) 기능이 타이핑된 글자를 인식해서 그 즉시 완성된 아이콘 글리프로 치환합니다. 자동완성처럼, 벡터 파일을 따로 불러오거나 붙여넣지 않아도 됩니다. 리게처 기능을 지원하지 않는 프로그램에서는 유니코드 사설 영역(PUA, U+E000~) 코드로 같은 아이콘에 바로 접근할 수 있습니다. 트리거 코드가 "기억하기 쉬운 이름"이라면 PUA 코드는 "그 이름이 가리키는 실제 주소"에 가까워서, 리게처가 없어도 완전히 동일한 아이콘을 불러올 수 있습니다. 452개 아이콘은 a~j까지 10개 카테고리(화살표·체크·반짝임·하트·악센트·밑줄·말풍선·도형마크·손동작·인터페이스)로 나뉘고, 카테고리마다 코드가 순서대로 이어져 있어서 규칙만 알면 코드만 보고도 어떤 아이콘인지 짐작할 수 있습니다. 일러스트레이터, 피그마, 포토샵, 파워포인트, 키노트처럼 폰트를 지원하는 프로그램이면 어디서든 똑같이 작동하고, 텍스트이기 때문에 크기와 색도 일반 글자 다루듯 그대로 조절됩니다.

DINGBAT FONT

10개의 카테고리,

452개의 글립

Showreel00:09

Categories — 01

10 categories / 452 glyphs

쓰임새로 나눈 카테고리

Type Tester

직접 타이핑해서 확인해보세요

a017처럼 생긴 트리거 코드는 그 자리에서 아이콘으로 바뀝니다

40px
452개 글리프 타이핑하면 아이콘 개인·상업 무료 내려받기
Glyph Index · 452

452개 전부, 코드와 함께

 

How to use

설치하고, 그냥 타이핑하세요

01

설치

내려받은 압축을 풀고 DingbatFont.otf를 더블클릭해 설치합니다. macOS는 서체 관리자, 윈도우는 우클릭 후 설치입니다. TTF는 구형 프로그램용, WOFF2는 웹용으로 함께 들어 있습니다.

02

합자 확인

대부분의 디자인 프로그램은 표준 합자가 기본으로 켜져 있습니다. 아이콘으로 바뀌지 않는다면 문자 옵션에서 합자(Ligatures)가 꺼져 있는지 확인하세요.

03

코드 입력

텍스트 상자에 a017처럼 코드를 그대로 칩니다. 합자를 지원하지 않는 프로그램에서는 PUA 영역 U+E000–U+E1C3의 문자를 직접 붙여넣으면 됩니다.

Illustrator · Photoshop문자 패널 메뉴 → 표준 합자
InDesign문자 패널 → 합자
FigmaType details → Ligatures
Keynote · Pages포맷 → 고급 옵션 → 합자
PowerPoint · Word합자 미지원 시 PUA 문자 사용
@font-face {
  font-family: "Dingbat Font";
  src: url("DingbatFont.woff2") format("woff2");
  font-display: swap;
}

.icon {
  font-family: "Dingbat Font";
  font-feature-settings: "liga" 1;
}
TYPE IT, DON'T DRAW IT

매일 쓰는 기호 452개를
폰트 하나로 옮겨 담았습니다

폰트 내려받기

Download

OTF · TTF · WOFF2를 함께 제공합니다. 압축을 풀고 설치하면 바로 쓸 수 있습니다.

License

개인·상업 프로젝트 모두 무료이고 출처 표기 의무는 없습니다. 폰트 파일 자체의 재판매·재배포, 그리고 수정본 배포는 제한됩니다.

Contact

커스터마이징이나 아이콘 추가 요청은 kunminzzang@gmail.com으로 보내주세요.

Feedback

빠진 아이콘이나 어긋난 획을 발견하면 알려주세요. 다음 버전에 반영합니다.

Dingbat Font · 10 categories · 452 glyphs v11.0.1
Dingbat Font 10 categories · 452 glyphs 내려받기