[던파] [던파] 이것은 도트인가 폰트인가. 비트비트체 등장!

[아타호-_-]

 

* 이 매거진은 PC 환경에 최적화되어 있습니다. 

　PC환경에서 읽어주세요~귀여운 비트비트체도 보실 수 있습니다!  

 

 

던파하면 뭐다? 바로 도트!

 

Q. 그럼 여기서 퀴즈! 　　　

이것은 도트인가 폰트인가

정답은 폰트 ( ᵔᵒᵔ )ᵍᵒᵒᵈᵎᵎ 

도트 장인의 신기술(?)로 한땀 한땀 깎아낸 폰트가 있다??

 

비트비트체 이름부터 심상치 않은 던파 감성!

덕분에 던파매거진 최.초.로 폰트 제작기를 보여드리네요. (+1따봉)

곧 다가올 한글날을 앞두고 적절한 타이밍에 나온 선물 같은 비트비트체. 

제작 일화를 준비했으니 재미있게 읽어주세요! 

　

   던전앤파이터의 웹디자이너

   평소에는 던파의 각종 이벤트/배너/업데이트 페이지를 만드는 업무를 담당합니다. 

   비트비트체와 함께 던파의 이벤트 페이지도 많이 사랑해주세요!~

#내이름은 비트비트체

　비트비트에서 태어났지

비트비트체는 확대된 도트와 가장 잘 어울리도록 디자인된 '제목용 서체'입니다. 

'비트비트 8비트'에서 영감을 얻어 제작하게 되어 이름도 '비트비트체'가 되었습니다.

 

의도적으로 비트맵 폰트의 디자인 요소를 모방하면서도, 저해상도에 최적화된 비트맵 폰트와 달리

굵은 선을 가진 벡터폰트로서 고해상도에서 제목용으로 사용하기 적합한 특징이 있습니다.

#비트비트체로 만들었어요!

비트비트체로 만든 배너와 디자인도 보고 가세요~ 구경은 무료랍니다♡

  

 

#귀여움 보장♥ 비트비트체 

　마음껏 사용해주세요✦‿✦

구경만 무료? 

아니죠~ 사용도 무제한 무료!

 

공식 홈페이지-자료실 > 폰트 탭에서 바로 비트비트체를 사용해보거나 폰트를 다운로드 받을 수 있습니다. 

☞ 넥슨/던파  ☞ 네이버  

 

폰트 사용 약관에 동의 후 비트비트체 다운로드 시 압축 파일을 확인할 수 있는데요. 

압축 해제 후, 

C:\Windows\Fonts 폴더에 비트비트체 폰트들을 넣으면 준비 끝!

폰트는 개인 및 기업 사용자를 포함한 모든 사용자에게 무료로 제공되므로 자유롭게 사용할 수 있습니다.

임의로 수정 및 편집도 가능해요!

♡◟(●•ᴗ•●)◞♡

공식 홈페이지, (YOU)튜브..

웹 어디서든 비트비트체가 보이면 기쁠 것 같습니다. 

▶비트비트체 지원 범위

 한글 2,780자에 사용성을 높이기 위해 추가자 1,103자를 더했고,

 라틴문자 95자와 자주 사용하는 특수문자 56자를 포함하였습니다.

 

#비트비트체 이렇게 만들었어요 

2020년 4월, 던전앤파이터 공식 홈페이지에 웹게임 ‘비트비트8비트’를 선보이는 페이지를 디자인하면서 

게임의 8비트스러운 분위기에 맞추기 위해

비트맵 폰트와 제목용 벡터 폰트의 느낌을 반반씩 섞은 웹페이지용 한글 타이틀을 제작하였습니다.

‘비트’라는 두 글자만을 제작해 보았는데, 특징이 절묘하게 섞인 느낌이 마음에 들더라고요! 

이와 비슷한 형태로 여러 글자를 확장해 던파의 다른 이벤트에도 활용하면 좋겠다는 생각이 들었습니다.

안 그래도 늘 픽셀아트와 조화롭게 어울릴만한 제목용 한글 폰트가 많지 않은 게 아쉬웠기도 했고...

이참에 직접 한번 만들어 봐야겠다는 결심을 하게 되었어요.

그렇게 2020년 말부터 글자 확장을 위한 대장정이 시작되었습니다...! 

! 아래 제작기는 정석적인 폰트 제작 방법과 다를 수 있으니 후기로 가볍게 읽어주세요 ꔷ̑◡ꔷ̑

비트비트체의 디자인은 꽤 단순했기 때문에 별도의 스케치 없이 바로 일러스트레이터 프로그램으로 

글자 디자인을 시작했습니다. 

네모꼴에 꽉 차는 형태의 선이 통통한 고딕 서체를 디자인한 후,

과감하게 곡선/사선/직선 전체에 계단 현상이 있는 것처럼 깎아내어 글자 전체에서 ‘도트’를 연상 되도록 만들었어요. 

조금 더 자세히 설명하면, 

정사각형에 가까운 네모 박스로 적당하게 가이드를 잡은 후 도형들을 이어 붙여가며 시안을 완성했어요.

최대한 직선 위주의 디자인이어야 잘 어울리고 작업에도 수월할 것 같아 단순하고 딱딱한 느낌으로 작업했습니다.

그리고 느낌을 보기 위해 아래와 같이 전체적으로 깎을 부분은 깎고,

사각형을 붙일 부분은 붙여주었어요. 

 

[이렇게 적용이 되었습니다!]

기분만은 벌써 다 완성한 느낌...! (*^-')b

 

처음엔 이렇게 단순한 글자에서 의도대로 계단 형태가 잘 표현되는 것을 확인한 후!!

다음은 보다 복잡한 글자들로 단어를 만들어 테스트해 보았는데요. 

이 과정에서 실제 픽셀을 확대한 듯한 정확도와 통일성을 지켜가며 계단을 그릴 경우,

의도한 꽉 찬 네모꼴 형태를 유지하기 어렵다는 것을 깨달았습니다. 

 

글자 전체에 적용할 계단 크기는 어느 정도여야 할까…?

복잡한 글자에서도 어떻게 특징을 유지할 수 있을까…? 

. . . . 

. .

고민 끝에 전체적으로 이질감이 크게 느껴지지 않는 선에서 

모든 글자의 계단 크기를 다르게 적용하는 방향으로 결정했습니다.

① 복잡한 글자인 ‘랄’ 에 단순한 ‘라’와 동일한 깎임을 적용하면

→ 글자가 삐죽거리고 굵기가 들쑥날쑥 해져 보기 좋지 않습니다.

② 단순한 ‘라’를 ‘랄’ 정도로 깎은 경우

→ 계단이 너무 소심한 사이즈로 적용되어 가장 중요한 특징인 도트 느낌이 부각되지 않습니다.

③ 결론

→ 글자의 복잡도에 따라 적당한 사이즈로 조정해가며 계단 현상을 만들어 주었습니다. 

그런 다음 서체 제작 프로그램에 직접 벡터 형태로 제작한 글자 디자인을 불러와서

자음, 모음, 겹자모, 받침 등을 코드에 맞추어 하나하나 조합했습니다.

 

여기서부터는 무수한 복사+붙여넣기+수정의 반복이었는데요...

필요한 것은 끈기와 시간 뿐!!

시간 날 때마다 틈틈히 글자들을 채워 완성해 주었습니다.  :)

#가장 만들기 힘들었던 글자는...

받침이 있는 상태에서 'ㅞ'가 들어가는 글자들을 특히 많이 고민하고 수정했습니다.  

글자 전체의 선이 굵고 네모꼴 형태를 유지하다 보니 구성이 복잡해질수록 필연적으로 공간 확보가 어려웠거든요.

[갑자기 찾아온 틀린그림찾기 시간]

수정 전에는 ㅜㅔ가 서로 분리되어 글자가 더 명확해 보이는 점이 좋았지만, 

사이가 타이트하고 아예 분리될 공간조차 안 나오는 글자들도 많았습니다. ㅠ_ㅠ

그래서 결국은 모든 글자를 우측처럼 살짝 겹쳐 잇는 방식으로 수정해 주었습니다.

위에서는 한 가지 예시를 들었지만,

사실 만들어 둔 모든 글자들을 다시 볼 때마다 부족한 점만 눈에 띄어서 전체적으로 계속 수정을 거듭했습니다 ^_^;;

그래서인지 특별히 한 두 글자에 애착이 가기보다는 하나도 빠짐없이 전부 소중하게 느껴지네요~

 

비트비트체 많이 사랑해주세요. 

크면 클수록 폰트가 가진 특징이 잘 보여서 비트비트체의 매력이 살아납니다!

워낙 선이 굵은 데다가 계단 느낌이 포인트라 일정 크기 이하부터는 특징이 뭉개지면서 가독성이 낮아집니다.

제목용 서체로의 사용을 권하는 이유이기도 합니다. 제목엔비트! 

다만 경우에 따라서는 크기가 작아질 경우 자연스럽게 동글동글해지는 느낌을 살려

의도적으로 본문에 활용해도 좋습니다. 

크게 쓸 때와는 다른 느낌으로 귀여워지거든요...(^_^)

둘째. 픽셀아트와 찰떡궁합

도트 감성을 한껏 살리는 디자인을 하고 싶을 때! 

던파 스크린샷에도! 고민하지 마시고 비트비트체로 꾸며보세요~ >_<

 

출처 : https://df.nexon.com/df/mediazone/magazine?p=web&mode=view&no=2712288

[RoWaS]

폰트도 도트 깎듯이 깎았네

[온누리누리루리]

도트깎는 장인들이 폰트까지...

[‬]

던격 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

[임팩트아치였던것]

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

[홋홋아짐맛]

글자체는 잘만든듯. 이눔들아 던격이나 살려내라 ㅋㅋㅋ

[룬엘]

좋군요

[루리웹-3835497273]

크 쩐다 압도적 감사

[투명드래곤]

와... 숫자도 특수문자도 도트 감성이 괜찮게 유지되네 ㅋㅋ 대단하다...

[노엘 버밀리온]

잘 사용하겠습니다. 감사합니다

[욕망의항아리]

오 귀엽다 ㅋㅋ