[취미] 아들을 위해 코드로 만든 폰트입니다. (GIF많음)

[webcm]

안녕하세요.

둘째가 태어난 기념으로 코드로 폰트를 만들었습니다 :)

컴퓨터에 뭔가를 그린다는 행위는 좌표와 긴밀하게 연결되어 있어요.

선위의 특정 좌표값을 알고싶다면 위와 같이 공식을 만들수 있는데요,

이를 응용해서 선을 3개로 하고 그림을 그리면 

일러스트나 포토샵에서 패스툴을 그릴때 사용하는 베지어 곡선을 그릴 수 있습니다.

이렇게 수학적으로 접근해서 공식을 만들고 그 공식을 사용해서 화면상의 물체의 움직임을 정의할수있는데요, 

저는 이게 프론트엔드 개발의 매력이라고 생각해요.

컴퓨터가 그림을 그리는 방식을 생각해보면 내가 직선이나, 곡선위의 원하는 좌표를 찾을수있다는 말인데요,

이방식을 이용해서 폰트를 디자인했습니다.

컴퓨터에 설치되는 폰트가 아니라,

각 글리프마다 좌표값만 가지고 있고 이 좌표값을 이용해서 HTML5의 캔버스에 그리는 폰트입니다.

코드로 만들어져서 여러가지 장점이 있는데,

 lineDashOffset을 사용해서 드로잉 애니메이션을 만들수 있고

동적으로 색상변경이 가능합니다.

WebGL을 사용하면 일반적인 캔버스 드로잉으로 구현하기 힘든 메타볼 효과를 만들수 있고요.

앞서 설명드린 선위의 좌표값을 이용해서 이런 지글지글 거리는 효과도 가능하고

또 해당 좌표에 이미지를 추가해서 다양한 모양의 폰트로 변신이 가능합니다.

폰트의 이름은 이번에 태어난 둘째의 이름인 영리할 리, 어질 온, 김리온에서 따와서 리온 산스라고 이름을 지었습니다. 

폰트를 그릴때는 몇가지 룰이 있었는데요,

일단 폰트에 특정 이미지를 입혀서 폰트의 모양을 변경할수있어야 하기때문에 

폰트 자체의 디자인은 최대한 단순한 도형에 가깝게 디자인했습니다.

하지만 대문자 G의 경우엔 오른쪽에 있는 선때문에 무게감이 더해져 보이니 

형태를 약간 조절해서 눈으로 보기에 비율이 맞게 해주었고요.

그리고 O 같은 둥근 글자는 플랫한 문자들보다 조금 크게 그렸습니다. 

원과 사각형의 면적의 비율이 달라서 원을 조금 크게 그려줘야 시각적으로 균형있어 보입니다.

소문자 a같은 경우는 이렇게 Helvetica a의 형태를 따르는것이 아니라 Futura랑 비슷한데요,

드로잉 애니메이션을 그릴때 b,d,p,q 이런 알파벳과 비슷한 형태의 a가 같은 느낌의 애니메이션으로 만들수있어서 이렇게 디자인했습니다.

그리고 대문자 A나 M같이 위가 뾰족한 부분은 화면처럼 flat top 형태로 되어있습니다.

이게 flat한 형태가 아니라 그냥 세모처럼 뾰족한 형태라면 선이 굻어졌을때 높이가 다른폰트들에 비해서 높아지게됩니다.

그래서 기울어지는 선이 만나서 꼭지점을 이루는 형태에는 간격을 줘서 굵은 폰트가 되더라도 높이가 변하지 않게 했습니다.

이 폰트가 여러가지 효과를 만들수있다면, 과연 그걸로 어떤 멋진걸 만들수있나. 

라는걸 보여줄수 있는 짧은 모션을 가진 웹사이트도 만들었습니다.

https://leon-kim.com/

영상으로 보실 수 도 있습니다 :)

출처 : 나

[팡운머전자과]

개발도 잘하시고 디자인도 잘하시고.. 엄청난 능력자시네요..

[올드드캐넷]

좋은 의미로 미쳤네요. 대박..

[고나무리]

정말 훈훈한 글이네요.
근데 저 사이트 정말 멋진데
제 i5 7500이.. cpu가 딸려서 렉이 걸리네요..

[최대용량50kb]

와 글씨 효과 엄청 멋진데 사이트 들어가니까 쿨러 돌아가는 소리 커지네요 ㅋㅋㅋㅋ

[Cheet0s]

루리웹에서 잃어버린 세번째 아버지를 뵙습니다.
제 이름은. ㅋㅋㅋ

[보노보노넌날보니]

코딩에 시각 디자인에 산업 디자인에 영상편집 까지..직업이 궁금해지네요 ㅎㄷㄷ

[멀라용]

이거 알아두면 유튜브 인트로 만들때 괜찮을거같은 느낌

[루리웹-6080785622]

첫짤 보자마자 어? 김종민님이 했던거랑 비슷한데? 했는데 김종민님이셨네요..

[리듬엔블루양꼬치엔]

와 이건 진짜 대박이네요 ㅠㅠㅠ 너무 멋지세요

[canonlove.com]

개발도 잘하고 디자인도 잘하고 결혼도 했는데 아이도 있어 ... 부럽 ㅎㅎㅎㅎ

[Shin2Ya]

퀵은 너무 이쁘네요 닉네임이 퀵 이였으면 여쭤보고 가져갔을뻔!

[율랠런]

이쁘네요

혹시 이씨나 오씨는 아니죠?

[바베큐맛프링글스]

@ㅁ@

[FairySimo]

쩐다.

[PangJuck]

김리온이 여기있었구만

폰트 엄청 멋지네요!

[청춘일기]

안녕하세요. 제 이름은 소율산스. 소율이의 둘째 동생이죠...

[됐거든?]

여기서도 뵙네요
그때 강의 잘 들었습니다🙂

[쵸인]

와우... 존경스럽습니다... 프론트엔드 개발자라고 불리려면 이 정도 수준이 되어야 하는군요...

[JAMBI2352]

와 능력자;;;;;;;;;;;;;;;

[S-117]

김리온은 커서 경찰이 됩니다.

[루프트나]

와 그저 감탄만...

[서슬달]

타이포그래피의 지식까지 갖춘 프로그래머 보기가 상당히 드문데 프로세싱도 잘 쓰실 듯하네요

[페도 다뒤졌으면]

이분 프로그래머가 아니라 수학자 아니신가요... 저도 베지에 곡선 그리는 펜 툴 구현하려다가 머리 빠지는줄 알았는데 ㅜㅜ

[페도 다뒤졌으면]

아................... 어디서 봤다 했더니 구글 본사 UX 시니어 엔지니어.........................

[루리웹-3204162389]

엄청난분이시네요...

[위송빠래]

뭔소리인지 하나도 이해가 안되지만 추천 안드리면 안될거 같아요

[돌아온 한글97]

와 프론트 끝판왕

[루리웹-3204162389]

정말 멋지네요 대단하십니다;;

[NotInLove]

링크 하신 사이트 전체 화면으로 놓고 보면 정말 멋있네요!!
컴 안 쓸 때 화면 보호기 처럼 써도 될 것 같아요! ㅋㅋ

[돌핀신]

대박입니다. 관심있는 분야라 정말 흥미롭게 봤습니다. 엄청난 능력자이시고 엄청 고생하셨네요. 정말 대박이에요

[눈팅만이 살길이다]

어떻게 하는건지 감도 안잡힌다

[클래시컬]

엄청나시네요. 존경합니다.

[언더스톤]

.......?

뭘로 뭘 만들어.......?

[T-elos]

이게 뭐지- 이게 뭐지- 하다가 중간에 어떤 일 하시는 분인지 적혀있는 거 보곤 납득했습니다. Aㅏ...

[므량컁]

ㅇㅣ게 대체 모야아아아?

[✨정직하게살자✨]

이 정도 해야 구글 가는구나. ㅠㅠ

[스트라포트]

어..?? 어어!!

[7stars]

와...

[greyscale]

애프터이펙트로 저런거 만들때 하나 하나 노가다 하며 그렸던 기억이 있는데
코딩으로 가능한거였군요. 멋집니다

[rosse]

ㄷㄷㄷ 이게 뭐에욧 ㅋㅋㅋ
정말 능력자

[트와일라잇스파클]

개쩐다./.................

[yutu.be]

너무 멋집니다.

[adaylife80]

멋진 작업 잘봤습니다. 혹시 웨이트를 조정할 때 굵기에 따른 가로 세로 획의 시각보정과 가변 폭에 관한 설정도 프로그램으로 언어로 지정할 수 있는지요?

[Dr.Sheldon]

짤 보러 왔는데 강좌가 있네요. 추천.

[Airmax82]

쩝니다.

[루리웹-9156900271]

이 글을 보고 내가 이해한 내용 : 작성자의 둘째가 태어났다.
축하드립니다.

[룰룰룰룰루]

베지어를 루리웹에서 볼줄이야. ㄷㄷㄷ
한때 공부 했었는데 다 까먹었네유.
대단하신 능력자 + 아기 탄생 축하드립니다.

[짬굉이]

나도 프론트인데 이런건 첨알았네요
흥미진진

[애라모르겠따]

[죄수번호-672309915]

정말 멋지네요. 매번 펜툴로 따서 그렸었는데, 코드만으로도 이런 모션그래픽이...