비트맵 한글 글꼴 편집기

wkpark의 이미지

예전의 도스상의 fed.exe 잘 아실겁니다. 한글 비트맵 글꼴이 대 유행할 때 이 fed.exe로 수많은 한글 비트맵 글꼴이 만들어졌지요.

이런 류의 프로그램을 웹상에서 쓸 수 있도록 만들었습니다.

http://chem.skku.ac.kr/~wkpark/project/hfed/hfnt.php

이걸 이용해서,
1. 비트맵 한글 글꼴을 만듦
2. 비트맵 ttf로 바꾸거나, 윤곽선 ttf로 변형
3. 좀 더 미려한 윤곽선 트루타입으로 다듬기 쉽도록 합니다.

이 글꼴 편집기는 8-4-4조합, 16x16크기의 비트맵만 현재 지원하며, 다른 조합, 다른 사이즈도 지원할 예정입니다.

Alee님의 은진체 시리즈글꼴은 8x4x4 조합 혹은 이보다 적은 수의 조합의 글꼴이라고 알고 있습니다. 그럼에도 불구하고 매우 이쁘지요.
그것에 착안하여 예전의 fed를 웹버전으로 만들게 되었습니다.

== 주의 ==
firefox에서만 작동 확인하였습니다.
자소의 그림은 embedded xbm을 쓰므로 IE에서 지원하지 않는다고 알고있습니다.

== 해야할 것 ==
웹상에서의 편집 뿐만 아니라, 일반 그림 편집기를 이용하여 그림을 만든 후에, 업로드해서 글꼴을 얻을 수 있도록.
== 변경 이력 ==
* 12/25 간단히 저장할 수 있는 기능 첨가
== 도움요청 ==
현재는 xbm으로 직접 각 글자소를 그려 출력합니다만, php의 gd라이브러리 없이 png 컬러로 출력하는 방법을 아시는 분 있으면 그 방법을 알려주시기 바랍니다~

댓글

M.W.Park의 이미지

ImageMagick에서도 텍스트 출력이 가능했던것같은데요.
한글이 제대로 나왔었는지는 잘 기억이 안나네요. 8)

-----
오늘 의 취미는 끝없는, 끝없는 인내다. 1973 法頂

alee의 이미지

wkpark wrote:
이걸 이용해서,
1. 비트맵 한글 글꼴을 만듦
2. 비트맵 ttf로 바꾸거나, 윤곽선 ttf로 변형
3. 좀 더 미려한 윤곽선 트루타입으로 다듬기 쉽도록 합니다.

이 글꼴 편집기는 8-4-4조합, 16x16크기의 비트맵만 현재 지원하며, 다른 조합, 다른 사이즈도 지원할 예정입니다.

wkpark님께서 또 일을 벌이셨군요. :) 잠깐 들어가 봤는데 대단하십니다.
그런데 만들어진 비트맵을 어떻게 윤곽선 ttf로 변형할 수 있나요?

주제와는 조금 관련이 없는 이야기지만, 예전에 truetype composite bitmap을 만들어 보셨다고 하셨었는데, 혹시 어떻게 하면 만들 수 있는지 방법을 알 수 있을까요? 아니면 샘플 파일을 아직 가기고 계시면 하나 받아볼 수 있을까요?

글꼴의 크기 측면에서는 이득이 없어도 유지/보수 측면에서는 composite bitmap이 꽤 편리할 것 같다는 생각이 들어서요.

행복한고니의 이미지

와... 재밌는 아이디어입니다.

혹시 비트맵 폰트의 파일 구조에 대한 자료를 구할 수 있을까요?
워낙에 오래된 것이라 그런지 찾기가 쉽지 않습니다.

__________________________________
나는 세상에서 가장 중요한 사람이다.

정태영의 이미지

행복한고니 wrote:
와... 재밌는 아이디어입니다.

혹시 비트맵 폰트의 파일 구조에 대한 자료를 구할 수 있을까요?
워낙에 오래된 것이라 그런지 찾기가 쉽지 않습니다.

http://fontforge.sourceforge.net/pcf-format.html
http://fontforge.sourceforge.net/bibliography.html#Formats

오랫동안 꿈을 그리는 사람은 그 꿈을 닮아간다...

http://mytears.org ~(~_~)~
나 한줄기 바람처럼..

wkpark의 이미지

alee wrote:
wkpark wrote:
이걸 이용해서,
1. 비트맵 한글 글꼴을 만듦
2. 비트맵 ttf로 바꾸거나, 윤곽선 ttf로 변형
3. 좀 더 미려한 윤곽선 트루타입으로 다듬기 쉽도록 합니다.

이 글꼴 편집기는 8-4-4조합, 16x16크기의 비트맵만 현재 지원하며, 다른 조합, 다른 사이즈도 지원할 예정입니다.

wkpark님께서 또 일을 벌이셨군요. :) 잠깐 들어가 봤는데 대단하십니다.
그런데 만들어진 비트맵을 어떻게 윤곽선 ttf로 변형할 수 있나요?


ㅎ 대단한 것 까지는 없고, 자바스크립트와 php의 짬뽕입니다. ^^

ttf 윤곽선으로 만드는 방법은,
1. 먼저 8-4-4조합 글꼴 만듦
2. 얻은 글꼴(hex 포맷)을 bdf포맷으로 바꾸고, 각 조합 자소를 그림으로 확대해서 png만듦
http://chem.skku.ac.kr/~wkpark/project/font/bitmap2outline/m256.png
3. 확대된 png에서 윤곽선 추출(autotrace)
4. 윤곽선으로 sfd포맷 파일 만듦
5. fontforge를 이용해서 composite truetype로 변환

관련 스크립트: http://chem.skku.ac.kr/~wkpark/project/font/bitmap2outline/

Quote:

주제와는 조금 관련이 없는 이야기지만, 예전에 truetype composite bitmap을 만들어 보셨다고 하셨었는데, 혹시 어떻게 하면 만들 수 있는지 방법을 알 수 있을까요? 아니면 샘플 파일을 아직 가기고 계시면 하나 받아볼 수 있을까요?

글꼴의 크기 측면에서는 이득이 없어도 유지/보수 측면에서는 composite bitmap이 꽤 편리할 것 같다는 생각이 들어서요.


composite bitmap을 만들긴 했었는데, 좀 저자동 스크립트를 썼기때문에, 저도 그 방법을 제대로 정리안해서 가물가물합니다.

그러나 유지/보수 측면에서도 비슷한 비용이 드는데, 저는 다음과 같은 방식을 백묵 글꼴 비트맵을 다듬을 때 썼습니다.

1. 글꼴 조합 자소 편집 -> hex포맷
2. hex 포맷 조합 -> 유니코드 한글 조합 만듦 (hex포맷)
3. hex 포맷 -> bdf 변환
4. bdf -> bitmap truetype만듦.
각 단계의 스크립트가 매우 단순합니다.
----
composite bitmap truetype를 만드려면 다음과 같은 절차입니다.
1. 글꼴 조합 자소 만듦 -> hex 포맷
2. 조합자소 hex -> 조합자소 bdf 변환
3. 조합자소 bdf -> composite bitmap truetype 만듦
3번 단계의 perl스크립트가 상당히 복잡한 구성을 가지고 있습니다.

단계는 1단계 줄어들지만 큰 이득이 없다고 판단하였습니다. 3단계의 스크립트가 저자동성이라 쓰기가 불편합니다.

온갖 참된 삶은 만남이다 --Martin Buber

alee의 이미지

글꼴을 처음 만드는 단계에서는 별 이득이 없겠지만, composite 글꼴이라면 일단 만든 후에 수정 할 때에는 각 자소만 수정하면 곧바로 전체 글꼴에 적용되기 때문에 유지/보수 측면에서는 훨씬 편리하지 않을까 한번 생각해 본 것입니다.

경험상 보기 좋은 글꼴은 한 번에 만들어지지 않습니다. 글자를 한 화면에 나오게 늘어놓고 볼 때는 잘 보이지 않다가도 실제 내용이 있는 글을 열어 보면 비로소 어색하게 보이는 부분이 눈에 띄는 경우가 많습니다. 결국 일단 글꼴을 만들어 놓고 1달 정도 사용 해 보면서 그대끄때 눈에 띄는 부분을 조금씩 조금씩 수정하는 작업을 거쳐야 비로소 괜찮은 글꼴이 나오는 것 같습니다.

composite 방식이 아닌 일반 비트맵의 경우 자소 하나 수정하려면 조합 전의 자소를 불러다가 수정한 다음 다시 조합해서 전체 글자를 뽑아내고, 이걸 ttf 글꼴에 다시 붙여 넣고··· 이런 복잡한 작업이 필요합니다.

wkpark의 이미지

alee wrote:
글꼴을 처음 만드는 단계에서는 별 이득이 없겠지만, composite 글꼴이라면 일단 만든 후에 수정 할 때에는 각 자소만 수정하면 곧바로 전체 글꼴에 적용되기 때문에 유지/보수 측면에서는 훨씬 편리하지 않을까 한번 생각해 본 것입니다.

경험상 보기 좋은 글꼴은 한 번에 만들어지지 않습니다. 글자를 한 화면에 나오게 늘어놓고 볼 때는 잘 보이지 않다가도 실제 내용이 있는 글을 열어 보면 비로소 어색하게 보이는 부분이 눈에 띄는 경우가 많습니다. 결국 일단 글꼴을 만들어 놓고 1달 정도 사용 해 보면서 그대끄때 눈에 띄는 부분을 조금씩 조금씩 수정하는 작업을 거쳐야 비로소 괜찮은 글꼴이 나오는 것 같습니다.

composite 방식이 아닌 일반 비트맵의 경우 자소 하나 수정하려면 조합 전의 자소를 불러다가 수정한 다음 다시 조합해서 전체 글자를 뽑아내고, 이걸 ttf 글꼴에 다시 붙여 넣고··· 이런 복잡한 작업이 필요합니다.


composite 비트맵을 fontforge로 편집할 수 있나요? 그게 된다면, 비록 composite 비트맵 트루타입을 만드는 방법이 복잡하더라도 관리비용은 훨씬 적게 들겠지요.
(제가 알기로는 fontforge로는 composite 비트맵 트루타입은 편집할 수 없었던 것으로 기억합니다..)
굴림체를 편집해보거나 하면 fontforge의 기능을 확인해볼 수 있겠네요.
Quote:

결국 일단 글꼴을 만들어 놓고 1달 정도 사용 해 보면서 그대끄때 눈에 띄는 부분을 조금씩 조금씩 수정하는 작업을 거쳐야 비로소 괜찮은 글꼴이 나오는 것 같습니다.

이 단계를 좀 더 편리하게 하고자 해서 만든것이 바로 php/javascript 한글 비트맵 글꼴 편집기입니다. 물론 아직은 초기단계지만요...
* 편집 수정한 후 그 조합 결과를 볼 수 있는 기능은 이미 있으나, 더 편리하게..
* 8-4-4조합 이외의 다른 조합 지원
* 16x16 이외의 크기 지원
* png 원판그림 import 및 export (다른 그림 편집기로 고칠 수 있게)
* 비트맵 ttf로 export기능

온갖 참된 삶은 만남이다 --Martin Buber

cleansugar의 이미지

현재 서버가 느리고 이미지가 깨집니다.

재벌 2세가 재벌이 될 확률과
금메달리스트 2세가 금메달을 딸 확률이 비슷해지도록
자유오픈소스 대안화폐를 씁시다.

아이디의 아이디어 무한도전
http://blog.aaidee.com

귀태닷컴
http://www.gwitae.com

익명 사용자의 이미지

다른건 느려도 동작하는데 다운로드 폰트 이미지 버튼을 누르면 페이지 이동한 다음 반응이 없습니다.

댓글 달기

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.