그누보드 운영을 위한 무료 이미지 및 디자인 소스 사이트 활용 가이드
페이지 정보
본문
그누보드 운영을 위한 무료 이미지 및 디자인 소스 사이트 활용 가이드
그누보드를 운영하거나 개발할 때 웹사이트를 시각적으로 채우기 위해 필요한 무료 이미지, 아이콘, 패턴 등의 디자인 소스 사이트 목록과 실제 적용 방법을 확인합니다.
무료 이미지 및 디자인 소스 사이트 모음
그누보드 운영 및 웹개발 시 활용할 수 있는 외부 이미지, 아이콘, 패턴 등의 디자인 소스 제공 사이트 목록은 다음과 같다. 정확한 라이선스는 각 사이트에서 직접 확인해야 한다.
아이콘 및 폰트 라이브러리
- Icon Finder (
https://www.iconfinder.com/) - Font Awesome (
https://fortawesome.github.io/Font-Awesome/) - AXIcon (
http://axicon.axisj.com/) - google/material-design-icons (
https://github.com/google/material-design-icons/releases) - famfamfam (
http://www.famfamfam.com/) - tabler-icons (
https://github.com/tabler/tabler-icons)
이미지 및 소스 제공 사이트
- Pixabay (
https://pixabay.com/) - Unsplash (
https://unsplash.com/) - Freepik (
http://www.freepik.com/) - Pixeden (
http://www.pixeden.com/) - Picjumbo (
https://picjumbo.com/) - Foodiesfeed (
http://foodiesfeed.com) - Publicdomainarchive (
http://publicdomainarchive.com/) - Subtlepatterns (패턴,
http://subtlepatterns.com/)
검색 위주 사이트
- Pexels (
https://www.pexels.com/) - StockSnap (
https://stocksnap.io/) - Stock Up (
http://www.sitebuilderreport.com/stock-up) - Finda.photo (
http://finda.photo/) - Splashbase (
http://www.splashbase.co/) - Arthur Weill Unsplash (
http://arthurweill.fr/Unsplash/en)
외부 디자인 소스 사이트 라이선스 확인 방법
외부 디자인 소스 사이트나 링크된 리소스를 이용할 때는 정확한 라이선스를 해당 사이트에서 직접 확인해야 합니다.
확인 시 주의사항
- 라이선스 메뉴 확인: 각 사이트 하단이나 메뉴에서 'License', 'FAQ', 'Terms of Service' 항목을 찾아 상업적 이용 가능 여부와 출처 표기 의무를 확인하십시오.
- 운영 정책 변경: 사이트 운영 사정에 따라 라이선스 정책이 수시로 변경될 수 있으므로, 사용 시점에 원문을 다시 확인하는 것이 안전합니다.
- 유료 자료의 저작권: 유료로 구입한 디자인, 아이콘, 폰트라도 저작권 자체가 양도되는 것은 아닙니다. 무단 수정, 재배포, 판매 시 법적 책임이 발생할 수 있으므로 구매 시 제공되는 라이선스 범위를 반드시 준수하십시오.
Font Awesome CDN 연동 방법
외부 이미지 파일을 직접 다운로드하지 않고 Font Awesome 같은 아이콘 라이브러리를 그누보드에 연동하려면, 제공되는 CDN 태그를 <head>와 </head> 태그 사이에 링크시키면 바로 사용할 수 있다.
1. 버전별 CDN 링크 추가
그누보드5의 기본 테마 구조에서 <head> 태그는 주로 /theme/[테마명]/head.sub.php 파일에 위치합니다. 사용하려는 버전에 맞춰 해당 파일의 <head>...</head> 영역 안에 아래의 태그 중 하나를 삽입하십시오.
- Font Awesome 4 버전
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />- Font Awesome 5 버전 (예: 5.9.0)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />- Font Awesome 6 버전 (예: 6.1.0)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />2. 아이콘 출력 및 사용 예시
CDN 링크를 추가한 후, HTML 본문 내에 원하는 아이콘 클래스명을 가진 태그를 넣어 출력할 수 있다. 버전별로 클래스 이름과 접두사가 다르므로 주의해야 한다.
- 4 버전 사용 예:
<i class="fa fa-address-book" aria-hidden="true"></i> - 5 버전 사용 예:
<i class="fas fa-user"></i> - 6 버전 사용 예:
<i class="fa-solid fa-align-right"></i>
상황별 판단 가이드
- 내 상황: 그누보드 운영 및 웹개발 과정에서 무료 이미지, 아이콘, 패턴 등의 디자인 소스가 필요한 경우
- 선택 기준: 소스 유형(아이콘/폰트, 이미지, 검색 위주)에 따라 제공되는 외부 사이트 목록을 확인하고 활용
- 다음 행동: 필요한 사이트에 직접 방문하여 리소스를 탐색하되, 정확한 라이선스 규정은 각 사이트에서 직접 확인 후 사용
실전 FAQ
Q. 외부 사이트의 무료 디자인 소스를 사용할 때 가장 먼저 확인해야 할 점은 무엇인가요?
- 예외 및 대안: 무료로 제공되는 이미지나 아이콘이라 하더라도 사이트 전체 또는 개별 파일의 라이선스 정책(상업적 이용 허용 여부, 변형 및 재배포 금지 조건 등)이 다를 수 있으므로, 반드시 해당 사이트에 직접 방문하여 최신 라이선스 규정을 확인해야 합니다.
Q. 링크된 외부 디자인 사이트의 운영 여부나 정책이 변경된 경우 어떻게 대처해야 하나요?
- 예외 및 대안: 외부 링크된 사이트의 사정에 따라 서비스가 종료되거나 라이선스 정책이 변경될 수 있으므로, 특정 소스에 의존하기보다 검색 위주 사이트(Pexels, StockSnap 등)나 다른 대안 플랫폼을 함께 확인하는 것이 안전합니다.
함께 보면 좋은 글
- 그누보드 운영자를 위한 무료 폰트 리소스 및 적용 가이드
- 그누보드 폼 요소 디자인 개선을 위한 jQuery 플러그인 선택 및 적용 방법
- 그누보드 환경을 위한 웹 이미지 용량 최적화 및 압축 도구 활용 가이드
참고자료
기타 참고자료
- 이전글SPAW 웹 에디터 설치 및 PHP 버전 호환성 설정 방법 26.09.24
- 다음글그누보드 운영자를 위한 무료 폰트 리소스 및 적용 가이드 26.09.24
댓글목록
등록된 댓글이 없습니다.