🌦 날씨에 따른 한글 폰트 윤곽선 벡터 변형 알고리즘

📕 프로젝트 요약

1️⃣	2️⃣	3️⃣

폰트 벡터화를 통해 윤곽선 디자인을 변형하여 다양한 디자인의 날씨 폰트를 생성하는 프로젝트 입니다. :)

📗 프로젝트 배경 및 목적

상황 정보에 따라 바뀔 수 있는 벡터 폰트 기반의 한글 폰트 변형 기술의 개발 필요성
기존의 래스터 이미지가 아닌 벡터 데이터로 폰트를 변형하는 기술의 필요
폰트 벡터화를 통한 디자인 변형 기술을 적용하여 텍스트를 보다 자유롭게 꾸미고 감성을 풍부하게 전달하고자 함

📘 프로젝트 목표

벡터 데이터 기반의 디자인 기술 활용
- 디자인을 자유롭게 조작할 수 있도록 폰트를 벡터화 후 변형 필요
- 아웃라인(글리프)을 추출하여 다양한 디자인을 적용할 수 있는 방법을 시도하고자 함
수치 정보에 따라 달라지는 직관적인 폰트 스타일 제공
- 미세먼지 농도, 자외선 농도와 같은 구체적인 기상 수치 정보를 활용
- 각 데이터가 대표하는 날씨의 감성이 잘 반영되도록 스타일 설계

🌞 대표 디자인

구름	습도	눈

뭉게뭉게 부풀어오른 구름을 표현	습도가 높을 때의 끈적거림을 표현	눈과 눈사람이 동그랗게 쌓인 모습을 표현

🌤 디자인 적용 전후 비교

기상정보	디자인 적용 전	디자인 적용 후
구름
자외선
비
눈
습도
아지랑이
바람
먼지

🎨 폰트 벡터화 및 디자인 과정

① 디자인할 글자와 폰트를 불러옵니다.

🔍 click!

f = font.open("fonts/font_file_name.ttf")

② 불러온 글자를 벡터화시켜 글리프 묶음으로 변환합니다.

🔍 click!

def glyphcommands(f, ch):
    return Path([copy(cmd) for cmd in f.glyph(f.charmap[ord(ch)])])

def advancefor(f, ch):
    return f.advances[f.charmap[ord(ch)]]

③ 글자를 이루는 각 글리프들의 방향을 알아냅니다.

🔍 click

https://github.com/pokmonlove/VectorFont/blob/5eaf1c8b9a342402268939638ea1012ddd1328de/Vectorfont/vectorfont_cloud.ipynb?short_path=01f60ac#L180-L214

④ 디테일한 디자인을 위해 글리프를 잘라 재구성합니다.
⑤ 자른 글리프들을 2차 혹은 3차 베지어 곡선으로 변경합니다.
⑥ 각 글리프의 방향과 디자인에 따라 글리프의 제어점을 이동시킵니다.
⑦ 디자인을 적용시킵니다.

✅ 사용한 폰트

✅ Install

이 프로젝트는 Bezmerizing 라이브러리를 사용합니다.

import sys
!{sys.executable} -m pip install --upgrade https://github.com/aparrish/bezmerizing/archive/master.zip

✅ Module & Packages

🔍 click!

import math
import random
import numpy as np
from flat import document, rgb, rgba, font, strike, shape
from flat.command import moveto, quadto, curveto, lineto, closepath
from bezmerizing import Polyline, Path
from numpy.random import uniform, normal, choice
from copy import copy
from random import randrange
from IPython.display import SVG, displa

💘 Inspired by

Allison Parrish's Notebook on Manipulating Font Data

Flat + Bezmerizing 라이브러리를 이용한 폰트 벡터화 & 디자인

💬 References

👩‍💻 Authors

숙명여자대학교 대학원 IT공학과 | MINTLAB | 팀 오토폰트

DyeonPark/WeatherFont-with-Vector

🌦 날씨에 따른 한글 폰트 윤곽선 벡터 변형 알고리즘

📕 프로젝트 요약

📗 프로젝트 배경 및 목적

📘 프로젝트 목표

🌞 대표 디자인

🌤 디자인 적용 전후 비교

🎨 폰트 벡터화 및 디자인 과정

✅ 사용한 폰트

✅ Install

✅ Module & Packages

💘 Inspired by

💬 References

👩‍💻 Authors