Illustrator 테마 만들기(메뉴 + 폰트 적용)

이번 작업은 단순히 UI만 바꾸는 게 아니라
블로그 메뉴를 Illustrator처럼 보이게 만드는 것을 목표로 진행했다.

특히 이번 단계에서는

1. 상단 메뉴를 Illustrator 스타일로 확장
2. 메뉴 기능을 블로그에 맞게 재설계
3. 던파 폰트를 적용해서 UI 완성도 강화

까지 진행했다.

물론 GPT의 도움을 받아서 커스텀을 진행했다.

상단 메뉴 Illustrator 구조로 변경

기존에는 단순히

파일 / 편집 / 보기 / 도움말

정도만 있었는데 이걸 실제 Illustrator처럼 확장했다.

최종 구조:
파일 / 편집 / 오브젝트 / 문자 / 선택 / 효과 / 보기 / 창 / 도움말

메뉴 기능을 블로그에 맞게 재해석

Illustrator 기능 그대로 쓸 수는 없기 때문에 GPT에게 블로그 기능으로 새롭게 만들어달라 요청했다.

파일

• 새 글 작성
• 블로그 관리
• 블로그 홈
• RSS 열기

편집

• 검색으로 이동
• 맨 위로 이동
• 태그 편집 보기
• 방명록 관리 보기

오브젝트

• 색상 패널로 이동
• 레이어 패널로 이동
• 글 목록 영역 보기
• 본문 영역 보기

문자

• 기본 글꼴
• 던파 비트비트체
• 던파 비트비트체 v2
• 던파 연단된 칼날 Light
• 던파 연단된 칼날 Medium
• 던파 연단된 칼날 Bold

선택

• 홈 소개 영역
• 글 카드 영역
• 태그 영역
• 방명록 영역

효과

• 밝은 아트보드
• 크림 아트보드
• 어두운 아트보드
• 기본 아트보드로 복원

보기

• 홈으로 보기
• 태그 보기
• 방명록 보기
• 오른쪽 패널 표시 전환
• 상태 표시줄 전환

창

• 색상 창
• 레이어 창
• 검색 창

도움말

• 관리 페이지
• RSS 도움말
• 방명록 문의
• 폰트 출처

문자 메뉴 → 폰트 변경 기능 추가

이번 작업의 핵심 포인트

Illustrator의 문자(Type) 메뉴처럼 폰트를 직접 바꿀 수 있게 구현했고 해당 폰트 사용법은 공식 홈페이지에 가서 확인했다.

적용 폰트

• 던파 비트비트체
• 던파 비트비트체 v2
• 던파 연단된 칼날 (Light / Medium / Bold)

폰트 적용

CDN 기반 웹폰트 사용
선택 시 CSS 변수(--post-font) 변경
본문 영역에 즉시 반영
.artboard-body{
font-family: var(--post-font, inherit);
}

던파 폰트 사용 (라이선스 확인 포함)

사실 사용하는 것 자체는 어렵지 않지만 중요한 부분이 라이선스였다.

공식에서 사용해도 된다고 알고 있지만 혹시 모르니 한번 더 확인을 해봤다.

폰트 허용범위

• SIL Open Font License 1.1 적용
• 상업적 사용 가능
• 웹폰트(임베딩) 가능
• 재배포 가능

위 내용을 봤을 때 블로그 적용 문제 없어 보여 적용하기로 하였다.

출처 표기 반영

라이선스에서 출처 표기 권장이 있어서
메뉴UI에도 반영했다.

• 문자 메뉴 하단 안내
• 도움말 메뉴에 폰트 정보 추가

잡담

사실 트릭컬 헌글도 적용시켜보고 싶었는데 헌글 다운 홈페이지도 사라져 있고 라이센스가 어디까지 인정되는지도 모르겠고 웹 폰트 정보도 없어서 포기했다.

헌글 폰트는 다운받아둬서 있지만 혹시 모르니 개인적으로 잘 쓰고있다. 아쉽지만 어쩌겠나 그냥 써야지... 문의나 넣어볼까?

근데 난 교주가 아닌걸... 저 멀리서 교주들 구경만 하는 이상한 놈인걸...(빼뺴로데이, 이마트 콜라보 등 굿즈만 가지고 있음) 에잉 모르겠다 나중에 끌리면 해보지 뭐

그리고 아쉬운점이라면 모바일은 메뉴가 안먹는다... 뭐 앱 쓰면 테마도 안보이는데 신경 쓸 이유가 있나? ㅎㅎ...

끝!
:wq