CDN서비스 font awesome 5로 무료아이콘 이용하기

반응형

CDN 서비스는

콘텐츠 전송 네트워크(Contents Delivery Networks)의 약자이다.

쉽게 말하자면, 콘텐츠를 여러 서버에 분산해놓는 것이다.

아직 생소한 CDN 시장은 점차 성장하고 있으며,

2025년에 2배 정도 증가할 것으로 전망하고 있다.

 

1. 다운로드 (Download)

파일을 캐시서버에 올려두고, 

사용자가 캐시서버에서 파일을 전송받거나

끌어다 쓸 수 있다.

 

(ex 구글폰트)

 

2. 캐싱서비스( Caching )

방문자가 급격히 늘어나서

이들이 모두 다운로드나 업데이트 작업을 할 때

서버 부하를 막기 위함.

 

대용량 이미지들은 오리진서비스가 아니라

캐시서버에서 끌어오게 한다.

 

3. 스트리밍 (Streaming)

CDN 서비스를 가장 잘 이용하고 있는 사례.

캐시서버에 두고 있는 영상을 

이용자가 전송받아 쓸 수 있다.

 

ex) 왓챠, 넷플릭스 

 

▶ 오늘은 2번째, 웹개발 시

아이콘 다운로드를 가능하게 해주는

 font awesome5 사용법을 작성해보려 한다.

 

** 콘텐츠캐싱, 프론트캐싱 등 다양한 개념이

연루되어 있으나,

아직 서버를 잘 모르므로 나중에 공부하기로 했다.

 

https://server-talk.tistory.com/52

CDN 서비스

 

현재 font awesome 5버전을 운영 중이고,

6 Beta버전이 나온다는 소식이다.

 

아이콘 무료로 이용하고 싶은 분들은

Start for Free를 클릭!

 

Pro버전은 유료로, 더 많은 혜택을 이용해볼 수 있다.

 

https://fontawesome.com/

Font Awesome

 font awesome 5를 사용하려면

먼저 세팅을 해둬야한다.

 

[기본세팅]

script 파일 세팅하기

 

1. 먼저 이메일 주소를 입력해서

코드를 받는다.

처음 이용해보는 것이기 때문에,

회원가입 절차를 완료했다.

 

이름과 처음 이 CDN서비스를 알게 된

년도를 적으면 된다.

내 이메일을 확인해보면 

왼쪽과 같은 창이 뜬다.

'Confirm your Email Address + Set things up'을 클릭해준다.

그럼 Kit code를 부여받게 된다.

이 script 코드를 

html 구조에 삽입해주면 된다.

<header> 파트에 위와 같은 형식으로 넣어준다.

 

▶ font awesome 5버전을 이용하기 위한

기본 setting 끝!

이제 마음에 드는 아이콘을 검색해서,

또 html 코드안에 링크를 붙여넣기 해주면 된다.

무료 아이콘의 색깔을 바꾸고

사이즈를 조절하거나 회전시키는 등의 

부가 기능도 

 

font awesome 5 사이트 내에서 작업할 수 있다.

로고로 삽입할 용도로 찾아봤다.

angrycreatvie라는 무료 아이콘을 사용하기로 결정했다.

Start Using This icon을 클릭해준다.

그러면 구글 폰트 사용하는 것과 비슷하게

HTML 코드를 제공한다.

 

이것도 복사해서 그대로 써주기만 하면 끝이다.

Pro 기능을 사용하면

 

1. 최대 6,255가지의 무료 아이콘 사용 가능

2. 각 아이콘 마다, 2가지 형태의 스타일 제공

3. PRo 사용시 종신적인 라이센스를 획득 가능

 

body 태그안에, logo 삽입하는 섹터에

복사해서 넣어주면 된다.

 

이상 CDN서비스 중 하나인 무료아이콘 제공 사이트

fontawesome 5를 알아봤다.