그누보드 운영자를 위한 무료 폰트 리소스 및 적용 가이드

• 목록
• 스크랩

그누보드 운영자를 위한 무료 폰트 리소스 및 적용 가이드

그누보드를 운영하면서 무료 폰트를 찾아 사이트에 적용하려는 개발자와 운영자를 위해, 신뢰할 수 있는 무료 폰트 리소스 목록부터 그누보드 환경에서의 구체적인 적용 절차와 저작권 주의사항까지 한눈에 파악할 수 있도록 도와줍니다.

웹 디자인을 위한 무료 폰트 리소스 및 제공처 정보

웹 디자인에 활용할 수 있는 무료 폰트 리소스와 주요 제공처는 다음과 같습니다.

주요 무료 폰트 제공처 및 리소스

• 눈누(noonnu): 다양한 한글 무료 폰트를 모아놓은 플랫폼입니다.
• Google Fonts: 웹폰트로 활용하기 용이한 다양한 다국어 폰트를 제공합니다.
• 공유마당 안심글꼴: 한국저작권위원회에서 제공하는 저작권 걱정 없이 사용할 수 있는 폰트 모음입니다.
• 공공누리: 공공기관에서 배포하는 다양한 무료 폰트를 확인할 수 있습니다.

무료 폰트 사용 시 주의사항

• 라이선스 확인 필수: '상업적 이용 가능'이라는 문구만으로 모든 사용이 허용되는 것은 아닙니다. 홈페이지에 폰트를 적용할 때는 반드시 배포처 페이지에서 '웹사이트'와 '임베딩' 항목이 모두 허용되는지 확인해야 합니다.
• 폰트 모음집 주의: 블로그 등에서 배포하는 '무료 폰트 모음집'은 개별 폰트의 라이선스가 다를 수 있으며, 유료 폰트가 섞여 있을 위험이 있으므로 반드시 개별 폰트의 공식 배포처에서 라이선스를 재확인해야 합니다.
• 적용 순서: 파일을 먼저 적용한 뒤 라이선스를 확인하는 방식은 저작권 분쟁의 원인이 될 수 있으므로, 반드시 사용 전 라이선스 조건을 먼저 검토하시기 바랍니다.

그누보드 웹폰트 적용 및 스타일시트 수정 방법

그누보드 환경에서 외부 무료 웹폰트나 직접 다운로드한 폰트 파일을 사이트에 반영하려면 스타일시트(style.css) 파일과 관련 설정 파일을 수정해야 합니다.

1. 폰트 파일 업로드 및 경로 설정

• 폰트 파일을 서버의 특정 폴더(예: /font 또는 css/font)에 업로드합니다.
• 스타일시트 파일 상단에 @font-face 규칙을 작성하여 웹폰트 이름과 서버 내 파일 경로를 지정합니다.

@font-face {
 font-family: "폰트명";
 src: url('저장된 폰트 경로') format('truetype');
}

• 구글 폰트 등 외부 서비스를 이용할 경우 파일을 직접 업로드하는 대신 @import 문을 사용할 수도 있습니다.

@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);

2. style.css 폰트 적용

• style.css 파일 내에서 기존 글꼴로 지정되어 있던 부분을 위에서 설정한 웹폰트 이름으로 변경합니다.

body, td, p, input, button, textarea, select {
 color: #222222;
 font-family: "폰트명";
 font-size: 9pt;
}

3. 에디터(스마트에디터 등) 연동 시 주의사항

• 스마트에디터 등 별도 에디터 목록에 폰트를 추가하더라도 에디터 화면 자체에 반영되지 않는 문제가 발생할 수 있습니다.
• 이 경우 에디터 전용 CSS 파일(예: smarteditor2.9\css\ko_KR\smart_editor2.css) 최상단에 동일한 @font-face 규칙을 추가해야 정상적으로 작동합니다.

웹 디자인 무료 폰트 사용 시 라이선스 확인 조건

상업용으로 쓸 수 있는 무료 폰트라 하더라도 웹사이트에 직접 올려 사용할 때는 다음 요소를 반드시 확인해야 합니다.

필수 확인 항목

• 웹사이트 및 임베딩 허용 여부: 단순 '상업적 이용 가능' 표시만 보고 폰트를 적용해서는 안 되며, 라이선스 표에서 '웹사이트' 항목과 '임베딩(웹폰트 삽입)' 항목이 모두 허용으로 표시되어 있는지 확인해야 합니다. 인쇄용이나 PC 편집 프로그램용 라이선스와 웹폰트 라이선스는 다를 수 있습니다.
• 개별 폰트 단위 검토: 폰트 모음집이나 번들 파일에 포함된 경우, 모음집 전체가 무료로 표기되었더라도 개별 폰트 중 유료 라이선스가 섞여 있을 수 있으므로 개별 폰트 단위로 조건을 확인해야 합니다.
• 공공기관 글꼴 조건: 공공기관이 제작한 글꼴은 '공공누리' 유형에 따라 상업적 이용이나 수정이 제한될 수 있으므로 해당 유형을 확인해야 합니다.
• 라이선스 변동 여부: 폰트에 붙은 라이선스 문구는 영구 고정이 아니며 시간이 지나면서 변경될 수 있으므로, 사용 시점의 조건을 기록해 두는 것이 안전합니다.

스마트에디터2.9 글꼴 추가 방법

그누보드 5 버전에서 스마트에디터2에 글꼴을 추가하려면 설정 스크립트 내에 aAdditionalFontList 항목을 사용합니다.

설정 방법

1. 스마트에디터 설정 영역에서 추가 글꼴 목록 배열인 aAdditionalFontList를 찾습니다.
2. 예시와 같이 배열 형식으로 추가할 글꼴의 영문명과 한글 표시명을 지정합니다.
   • 코드 예시: aAdditionalFontList: [['Independence_hall','독립기념관체'], ['Jeju_Myeongjo','제주명조'], ['Chosunilbo_myungjo','조선일보명조체']],

그누보드 폰트어썸(아이콘) 사용 방법

• 버전 확인: 그누보드 5.3 버전을 사용 중이라면 Font Awesome 파일이 이미 포함되어 있어 별도로 설치하지 않아도 됩니다. 그누보드5에 기본 첨부된 폰트어썸은 4.7 버전입니다.
• 테마 적용 방법: 그누보드 5.2 버전 basic 테마 기준, theme/basic/head.sub.php 파일의 <link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL;?>/...css..."> 바로 아래에 아래 코드를 추가하여 연동할 수 있습니다.
  • 코드 예시: <link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL;?>/font-awesome/css/font-awesome.min.css">
  • CDN 방식 연동 예시: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
• 아이콘 출력 방법: 폰트어썸 4.7 버전 기준 필요한 아이콘 클래스명을 태그에 적용하여 출력합니다.
  • 코드 예시: <i class="fa fa-address-book" aria-hidden="true"></i>

폰트 파일 추가 및 라이선스 주의사항

• 폰트 파일 저장 위치: 폰트 파일(.ttf 등)을 사용할 때는 css/font 경로 등에 저장하여 활용할 수 있습니다.
• 라이선스 확인: 상업용으로 무료라 하더라도 홈페이지에 올려 사용하거나 임베딩할 때는 배포처 공식 사이트에서 '웹사이트' 및 '임베딩' 허용 여부를 반드시 확인해야 합니다.

상황별 무료 폰트 적용 및 판단 가이드

내 상황	우선할 판단	다음 행동
그누보드 사이트에 무료 폰트를 처음 적용하려는 경우	폰트 파일의 '웹사이트' 및 '임베딩' 허용 라이선스 여부 검토	배포처 공식 사이트에서 라이선스 조건 확인 후 서버 경로에 맞게 @font-face 규칙 적용
커뮤니티나 블로그의 무료 폰트 모음집을 발견한 경우	모음집 내 개별 폰트의 라이선스 변동 및 유료 혼입 가능성 의심	모음집 일괄 적용을 피하고 개별 폰트의 원본 배포처 페이지 재확인

실전 FAQ

Q. '상업적 이용 가능'이라고 적힌 폰트인데 웹사이트에 바로 써도 되나요?

• 답변: '상업적 이용 가능' 문구만으로는 부족하며, 라이선스 세부 항목에서 '웹사이트'와 '임베딩(웹폰트 삽입)' 항목이 모두 허용되어 있는지 확인해야 합니다. 인쇄물 전용이나 PC 편집 프로그램용 라이선스인 경우 웹사이트 적용은 위반이 될 수 있습니다.

Q. 블로그나 커뮤니티에서 받은 무료 폰트 모음집을 사용하다 문제가 생기면 어떻게 하나요?

• 답변: 폰트 모음집은 제작자가 개별 폰트의 조건을 누락하거나 유료 폰트를 섞어 배포하는 경우가 많습니다. 문제가 발생할 경우 모음집 배포처가 아닌 개별 폰트의 공식 제작사 라이선스 기준이 적용되므로, 반드시 사용 전 공식 배포처의 원문을 확인해야 합니다.

참고자료

기타 참고자료

• sir.kr — 그누보드에 웹폰트 적용하기... - SIR - 개발자 커뮤니티
• sir.kr — 스마트에디터2.9 글꼴추가 방법 - SIR - 개발자 커뮤니티
• sir.kr — 그누보드에 폰트 추가 - SIR - 개발자 커뮤니티
• ibigent.com — 무료 폰트 라이선스 확인하는 5곳과 웹사이트 임베딩 주의점 | 아이비전트 블로그
• vizensoft.com — 홈페이지 제작 저작권, 폰트·이미지 확인법 | 비젠소프트
• sandollcloud.com — 무료폰트 저작권 완전 가이드 | 산돌구름
• velog.io — 성능최적화 웹폰트 최적화 가이드
• sir.kr — 초보적인 클래스 질문드립니다 - SIR - 개발자 커뮤니티
• gnustudy.com — 그누보드에 Font Awesome 적용하기 - 그누보드팁