▲

내 손글씨로 폰트 만들기

 (chameth.com)
1P by GN⁺ 3일전 | ★ favorite | 댓글 1개
  • 개인 웹사이트의 개성을 살리기 위해 직접 손글씨 폰트를 시도했음
  • FontForge와 Inkscape 등 오픈소스 도구 사용이 직관적이지 않고 불편함을 겪음
  • 결국 Calligraphr 유료 서비스를 통해 손글씨 폰트를 간편하게 생성하고 수정할 수 있었음
  • 반복적인 미세 조정 및 수정 작업이 필요했지만, 실제 결과물에 만족감을 느낌
  • Calligraphr의 친사용자적 비즈니스 정책에도 좋은 인상을 받아 추천함

개인 웹사이트에 개성을 더하기 위한 시도

  • 자신의 웹사이트가 무미건조한 기업 사이트들과 다르게 더욱 개인적이고 독특한 분위기를 갖추길 희망함
  • 디자인적으로 작은 변화를 주기 위해 이미지, 링크 등에 독특한 효과를 추가해왔음
  • 기존의 모노스페이스 글꼴 대신 손글씨 느낌의 커서체를 적용하고 싶었으나 적합한 폰트를 찾지 못하여 직접 제작을 결심함

오픈소스 툴로의 도전과 실패

  • Inkscape와 FontForge 등 오픈소스 도구를 활용해 벡터 기반의 폰트를 만들어 보려고 시도함
    • 그래픽 태블릿을 이용해 대문자 A, B, C를 작성하고 SVG로 저장 후 폰트 편집기에 가져오려 함
    • FontForge의 불편한 사용자 경험과 직관적이지 않은 UI에 좌절감을 느낌
    • 파일 선택∙가져오기 과정, SVG 불러오기 등 기본적인 작업에서도 많은 시행착오와 번거로움을 겪음
    • 글리프 편집 과정에서 곡선을 다루는 베지어 핸들 역시 조작이 불편함을 느낌
    • 반복적인 오류 메시지와 번거로운 경로 이동 등으로 인해 중도 포기함
  • Inkscape의 SVG 폰트 제작 기능도 사용해봤으나, 각 글리프를 하나의 경로로 병합해야 하고 벡터 편집 지식이 요구되는 등 복잡하고 비효율적인 과정임을 체감함

유료 웹 서비스(Calligraphr)의 선택

  • 여러 오픈소스 튜토리얼을 찾던 중, Calligraphr라는 클로즈드 소스 서비스의 존재를 알게 됨
    • 무료 버전엔 리가처, 다양한 변형, 75 글리프 제한이 있지만, 1개월 단일 결제로 프리미엄 기능 이용 가능함
    • 자동 갱신 없이 한 번만 결제로 이용 가능한 방식과 투명한 가격정책을 높이 평가함
  • Calligraphr 사용법
    • 템플릿을 인쇄해 손글씨로 작성하고, 이를 스캔하여 서비스에 업로드하는 방식
    • 템플릿에서 선택한 문자, 부호, 리가처 등 다양한 형태 포함 가능
    • 여러 버전을 만들어 평가 및 선택할 수 있으며, 블로그 제목에 맞춘 커스텀 리가처도 추가함
    • Sharpie 펜을 사용해 두껍고 선명한 글씨로 특징을 줌
    • iPhone의 문서 스캔 기능을 활용해 PDF로 스캔 후 업로드

폰트 반복 개선 및 미세 조정

  • Calligraphr 웹 UI를 통해 폰트 미리보기 및 직접 적용 테스트가 가능함
    • 실제 웹사이트에 폰트 적용하여 다양한 크기에서 가독성과 디자인을 확인함
  • 첫 버전은 레터가 기준선에 맞지 않아 균형이 깨지는 등 문제가 있었고, 위치 및 크기 조정 기능을 통해 세밀하게 수정
  • 글자 간 간격(kernig) 을 줄여 손글씨 특유의 자연스러운 연결감 부여
  • 일부 글리프는 글리프 영역 외부에 스캔된 노이즈가 포함되어 이상한 간격이 생성됨
    • 단순히 폭만 줄이면 문장에 떨어진 점이 남아있음
    • 편집 도구로 불필요한 픽셀을 완전히 삭제해 원활하게 수정함
  • 이런 반복 작업은 오히려 개선이 눈에 확연히 보이기 때문에 즐겁게 느껴졌음

결과 및 Calligraphr 서비스의 긍정적 경험

  • 완성된 폰트는 웹사이트의 헤더, 캡션 등에 실제 손글씨와 유사한 느낌을 주어 본인이 원한 개성을 만족시킴
  • Sharpie의 굵기 덕분에 작은 글씨에서도 가독성이 뛰어남
  • 오픈소스 도구와 달리 짧은 시간과 적은 비용으로 결과물을 완성하는 효율성을 실감함
  • 구독 종료 후에도 Calligraphr에서 사용자 데이터를 자동 백업(export) 해 제공함
    • JSON 형식으로 모든 글리프 정보와 이미지 데이터를 담아 추후 재구독이나 추가 편집에 활용 가능
    • 사전에 명확한 정책, 반복 결제 유도 없음, 데이터의 투명한 제공 등 친사용자적 비즈니스 관행에 감명받음
  • 같은 작업을 시도하고자 한다면 Calligraphr의 간결함과 고객 중심 서비스 때문이라도 추천할 만한 경험임
▲
GN⁺ 3일전  [-]
Hacker News 의견
  • 2013년에 제 결혼 웹사이트를 위해 비슷한 작업을 해봄. 우편 서비스를 이용해 괜찮은 TTF를 만들고, 그걸 WOFF로 변환했음. 아직도 https://ruthandjosh.net/story/에 온라인임(밀레니얼 감성 주의)
    • 이런 시대에 링크가 살아있는 사이트를 유지하는 건 정말 대단한 일임
    • 이 스토리는 정말 아름다움, 전혀 오글거림을 느끼지 못했음
    • 이런 오글거림을 공유해줘서 고마움, 한 주를 멋지게 마무리할 수 있었음. 샤밧 샬롬
    • 이 사이트 진짜 멋짐. 디자인과 레이아웃이 오히려 시대를 초월한 느낌임
    • Ruth가 정말 비행기에서 혼자 샴페인을 마셨는지 궁금함
  • 노력과 여정을 응원함. 오픈소스 대안을 포기하고 저렴한 대안으로 자신만의 것을 소유하게 되는 솔직한 선택에 공감함. 내 이야기도 비슷함. 나도 독학 크리에이티브라서 때때로 특정 기술이나 도구를 꼭 써보고 싶어서 고집을 부리게 됨. 이게 매몰비용이나 완벽주의 때문일지 모르겠음. 사이트 디자인은 정말 개성이 넘침. PS: 내 Firefox 브라우저에 fonts, developer-blog, creative-sites, boutique-designs로 북마크 등록해둠
  • 내 손글씨는 정말 별로고, 쓸수록 더 못쓰게 됨. 악순환임. 필기가 안 좋아서 모든 걸 타이핑하게 되고, 연습을 안 해서 더 나빠짐. 내 손글씨로 폰트를 만들면 암호 해시로도 쓸 수 있을 것 같음. 그래도 이런 아이디어 자체는 마음에 듦. 손글씨로 쓰는 것보다 메시지를 타이핑하는 것이 덜 개인적이라는 생각은 안 드는데, 실제로는 좀 더 덜 개인적으로 느껴짐. 손글씨 폰트가 이런 느낌을 좀 보완해줄 수 있을 것 같음
    • 검정 메탈 밴드 앨범 커버용 폰트로 쓰면 잘 맞을 것 같음
    • "더 쉬운 방법이 있어서 아예 기술을 익힐 필요조차 못 느끼고 점점 배울 기회를 잃는" 이런 현상이 요즘 진짜 심각한 문제라고 생각함. 쉬운 시스템만 배우다 보니 결국엔 진짜 기술이 아니라 시스템 사용법만 익히는 셈임. 예를 들어 내 룸메이트는 칼 갈이 시스템만 쓸 줄 알고 손으로는 칼을 못 감. 시스템 없이는 아무것도 못함. 요새 이런 사람이 진짜 많아짐. 그냥 매뉴얼만 따라가고 왜 그런지에 대한 연결고리가 없음. 사회 전체적으로도 기본적인 능력이 심하게 약해졌는데, 자본주의가 모든 걸 시간 절약에 돈을 내는 구조로 만들어 놓았기 때문인 것 같음
  • 내가 알기로 Microsoft Font Maker가 지금도 Windows Ink 스타일러스에서 무료(성능이 좀 떨어질 수 있음)로 동작함. 예전에 뭘 썼는지 기억은 안 나지만 아마 Windows Tablet PC용 PowerToy에 포함돼 있었던 것 같음. https://apps.microsoft.com/detail/9n9209f8s3vc?hl=en-US&gl=US
  • 어릴 때 학대 경험이 있어서 내 손글씨는 매우 별로임. 필기체도 잘 못 씀. 만약 내 손글씨로 만든 폰트가 있다면 모두가 "와, 저 사람 부모님은 참 무책임했겠군"이라 할 것 같음. Microsoft Word에서 폰트 이름이 "Danny Wets The Bed"로 나올 듯함. 농담이지만, 글 잘 읽었고 훌륭한 포스트임
  • 10대 때 좋아하던 여자애의 손글씨로 ttf-font를 만들어 선물했던 적이 있음. 정말 그 작업을 과소평가했었음. Corel Draw Suite에 포함된 툴을 쓰고, 그 친구가 써 준 알파벳을 스캔해서 모든 글자를 직접 벡터화함. 엄청난 노가다였음. 그로부터 25년이 지났는데, 아직도 그 시절의 순수한 열정에 놀라움. 고작 생일 선물 하나 만들려고 엄청난 시간을 쏟았고, 사실 대부분 뭐하는지도 모르면서 했던 작업임. 결국 완성했지만, 아무것도 몰랐기에 가능했던 것 같음
    • 믹스 테이프보단 훨씬 낫네. 내 손글씨로 뭔가 쓰면 벌칙일 수준임
    • 그 후 그녀와 어떻게 됐는지 궁금함. 그 노력이 가치 있었는지, 해피엔딩이었는지 알고 싶음
  • 기술이 충분히 발전해 실제로는 손글씨와 구분이 안 될 정도인가 궁금함. 만약 이걸 이용해서 학교 교수님들이 요구하는 손글씨 과제를 처리한다면 들키지 않고 넘어갈 수 있을지도 궁금함. 이건 물론 가상 시나리오임
  • Amy Goodchild가 시도한 방식( https://www.amygoodchild.com/blog/cursive-handwriting-in-javascript )을 실제 폰트 파일로 변환하는 방법이 있는지 궁금함
    • 아마 Chaikin's paths를 Bézier 곡선으로 "번역"하는 문제가 될 것 같음. 그럼 Metafont 폰트로 만들 수 있고, 거기서 ttf, otf 등으로 변환하는 것도 가능할 거라 생각함
  • 비슷한 길을 걸어간 사람들도 있음
    • 또한 예전부터 있던 훌륭한 Tekton 폰트도 있음. 건축가 Frank D.K. Ching의 손글씨를 바탕으로 했지만, 실제 디자인은 Adobe의 David Siegel이 작업함
  • 진짜 멋진 작업임. 공유해줘서 고마움. 현재 아이들과 함께하는 워크숍을 준비 중인데, 여기서 아이들이 자기만의 웹사이트나 웹앱을 "직접 그려보는" 경험을 하게 하고 싶었음. 지금까지는 폰트 만드는 걸 몰라서 넣지 않았는데, 이제 방법을 알게 됨. 정말 고마움! 혹시 이런 워크숍을 더 재미있게 할 아이디어가 있다면 알려줬으면 좋겠음. 예를 들어, 종이로 프로토타입을 만들어서 실제 클릭 더미(작동하는 모형)로 바꾸는 식으로, 아날로그와 디지털 사이에서 자연스럽게 넘어가도록 해보고 싶었음. 참고로 여기서 말하는 아이들은 8~10세임
    • 안녕하세요, 만약 받아주신다면 저도 거기에 기여해보고 싶음. 제 고향 아이들에게 창의적인 기술을 가르쳐 보고 싶었음. 저는 나이지리아/아프리카에 있고, JavaScript를 작은 따옴표와 세미콜론 없이 다룸
답변달기