이 블로그는?

안녕하세요. 니힐입니다. 이 블로그는 제 관심사들을 담아놓은 제 일상의 영역입니다. 볼 것이 많지는 않습니다만 천천히 구경하시다 가시면 되겠습니다. 아래는 이 블로그에 대한 몇가지의 안내사항입니다. 즐거운 하루 되시고, 좋은 일만 가득하시길 기원합니다.

1.이 블로그는 PC에서 볼 때 더 쾌적한 환경으로 즐길 수 있습니다.
2.이 블로그의 주제는 애니메이션, 게임, 일본어, 그림으로 크게 4가지입니다. 다른 것들을 다루기도 합니다.
3.다양한 정보를 공유하기도 합니다. 많은 분들의 편리함을 위해 좋은 포스트를 작성하는 것이 이 블로그의 일차적인 목표입니다.

포스트 검색하기
포스트
작성된 시간 2018.09.09 14:10

썸네일의 모든 텍스트에 사용된 폰트는 123RF입니다.

포스트 제목 ::니힐의 유용한 정보 4 - 웹 디자인에 도움이 되는 폰트어썸(Font Awesome)

작성 시간 ::2018 0909 - 14시 : 10분

작업 환경 ::윈도우 7, 네이버 웨일 브라우저

관련 키워드 ::디자인, 웹디자인, 웹폰트, 벡터 이미지, 폰트, 아이콘, svg, 폰트어썸, Font Awesome, 웹디자인에 도움 되는 아이트, 아이콘 찾는 사이트


니힐입니다. 이번 글은 유용한 정보입니다. 넘버링을 새롭게 해서 네번째 유용한 정보입니다. 이번에 가져온 정보는 저번에 제가 스킨을 수정하면서 많이 도움을 받았던 사이트에 대한 것입니다. 바로 폰트어썸이라는 사이트입니다. 누군가는 들어봤고 누군가는 처음 들어보는 사이트겠죠. 이 사이트를 소개하려고 합니다.

폰트어썹은 쉽게 이야기하면 웹폰트 아이콘을 제공해주는 사이트입니다. 벡터기반으로 만들어진 아이콘들을 웹페이지에 삽입할 수 있습니다. 이 아이콘들은 웹폰트로 작용을 하기 때문에 아주 간단한 절차로 다양한 아이콘을 사용할 수 있습니다.

폰트어썸은 프로버전 기준으로 3978개의 아이콘을 사용할 수 있습니다. 하지만 프로버전은 돈을 내야합니다. 돈이 없는 사람들은 분명 있습니다. 그런 사람들도 걱정하지 않아도 됩니다. 우리는 프리 라이선스가 적용되는 1341개의 아이콘을 사용하면 됩니다. 지금부터 이 사이트를 이용하는 방법을 천천히 알아보려고 합니다. 일반적으로 사용할 수 있는 두가지의 방법을 살펴볼 겁니다. 하나는 css라는 웹 언어를 알아야합니다. html 지식도 어느정도 있으면 좋습니다. 웹디자인을 하시는 분들에게 좋은 정보이기 때문에 아마 여러 웹디자이너분들은 이런 사이트들을 알고 계실겁니다. 근데 이제 막 웹 디자인에 관심을 보이고 연습을 하시는 분들은 모를 수도 있습니다. 이 글은 그런 분들을 위한 글입니다. 그럼 지금부터 폰트어썸에 대해서는 알았으니 어떻게 사용하는지를 알아봅시다.

폰트어썸 사용하기

폰트어썸을 사용하는 방법에는 일반적으로 두가지 방법이 있습니다. 하나는 HTML과 CSS를 이용해서 사용하는 방법이고 다른 방법은 언어적으로 사용하는 게 아니라 폰트 자체를 다운로드 해서 포토샵 같은 그래픽 툴에서 사용하는 방법입니다. 첫번째 방법부터 알아보도록 합시다. 어느 환경에서 사용하고 싶은지는 스스로 정하시면 되고 목적에 맞는 방법을 이용해서 사용하시면 됩니다. 그 이전에 가장 먼저 해야 할 일은 폰트어썸 웹사이트로 이동하는 겁니다. 이 링크를 클릭해서 폰트어썸으로 이동합시다.

HTML과 CSS를 이용해서 사용하는 방법

니힐의 유용한 정보 4 - 웹 디자인에 도움이 되는 폰트어썸(Font Awesome)이미지 1

니힐의 유용한 정보 4 - 웹 디자인에 도움이 되는 폰트어썸(Font Awesome)이미지 2

웹사이트로 이동을 하면 가장 먼저 보이는 화면이 바로 이미지 1의 화면일 겁니다. 여기는 별로 볼 게 없습니다. 상단 메뉴에 How to use를 눌러줍시다. 어떻게 사용하는지 나와 있습니다. 영어를 아시는분들은 차근차근 읽어봐도 되겠지만 모르는 분들은 굳이 읽으려고 할 필요가 없습니다. 하우 투 유즈 페이지로 넘어가면 이미지 2처럼 태그 한 줄이 보입니다. 우리는 이 태그를 우리의 html 파일에 넣을 겁니다. 이 한 줄을 추가하면 우리가 개발중인 웹에 아이콘을 넣을 수 있게 됩니다.

저는 vs code를 자주 사용하는데 지금은 간단하게 과정을 보여드릴 것이라서 vs code는 꺼내지 않고 코드 애니웨어라는 사이트의 힘을 빌리기로 했습니다. 코드 애니웨어에 대해서도 나중에 포스팅을 할 생각입니다. 좀 더 공부를 하고서 말이죠. 아직은 모르는 게 많아서 다루기엔 좀 버거움이 있습니다. 여하튼 저는 이 사이트에서 폰트어썸을 사용해볼 환경을 만들 겁니다. 이미지 3처럼 기본적인 틀을 짰습니다. 우리가 이미지 2에서 얻은 게 뭐였죠? head 태그 안에 들어가는 link 태그를 얻었습니다. 그 태그를 이미지 4처럼 넣어줍니다.

니힐의 유용한 정보 4 - 웹 디자인에 도움이 되는 폰트어썸(Font Awesome)이미지 3

니힐의 유용한 정보 4 - 웹 디자인에 도움이 되는 폰트어썸(Font Awesome)이미지 4

니힐의 유용한 정보 4 - 웹 디자인에 도움이 되는 폰트어썸(Font Awesome)이미지 5

그럼 이미지 5처럼 아주 기본적인 형태의 웹이 완성됩니다. 우리가 아이콘을 넣고 싶은 부분이 폰트어썸 테스트라는 글자의 제일 앞부분이라고 치고, 그 자리에 아이콘을 어떻게 넣어야 하는지를 알아봅시다. 아주 간단합니다. 아래의 이미지 6처럼 아이콘 리스트에서 원하는 아이콘을 고릅니다. 아이콘 리스트는 하우 투 유즈 의 왼쪽에 있는 아이콘이라는 글자를 누르면 됩니다. 원하는 아이콘을 콜랐다면 클릭합니다. 그럼 이미지 7과 같은 페이지가 뜹니다. 여기서 우리는 태그 코드로 보이는 어떠한 코드를 복사할 겁니다. 그리고 우리가 아이콘을 넣으려고 했던 자리에 붙여넣습니다. 그리고 실행해보면 이미지 8처럼 아이콘이 보이게 됩니다.

니힐의 유용한 정보 4 - 웹 디자인에 도움이 되는 폰트어썸(Font Awesome)이미지 6

니힐의 유용한 정보 4 - 웹 디자인에 도움이 되는 폰트어썸(Font Awesome)이미지 7

니힐의 유용한 정보 4 - 웹 디자인에 도움이 되는 폰트어썸(Font Awesome)이미지 8

니힐의 유용한 정보 4 - 웹 디자인에 도움이 되는 폰트어썸(Font Awesome)이미지 9

이렇게 link 태그를 추가한 다음에 원하는 아이콘의 코드를 복사해서 붙여 넣으면 어렵지 않게 웹폰트를 사용할 수 있습니다. 이 아이콘들은 웹폰트라서 크기 조절이 자유롭습니다. 색깔도 바꿀 수 있죠. 그럼 이번에는 태그를 따로 추가하지 않고 css에서만 사용하는 방법을 알아보도록 합시다. 일단 저는 이미지 9처럼 똑같은 글자의 태그를 추가했습니다. 여기에는 css로만 적용을 해볼 겁니다. 우리가 아까 아이콘 코드를 가져온 곳에서 그 오른쪽에 보면 f로 시작하는 일종의 코드번호가 있습니다. 이 코드번호를 복사해둡니다. 아래에 있는 이미지 10의 마우스 위치입니다. 이걸 복사해둡니다.

니힐의 유용한 정보 4 - 웹 디자인에 도움이 되는 폰트어썸(Font Awesome)이미지 10

니힐의 유용한 정보 4 - 웹 디자인에 도움이 되는 폰트어썸(Font Awesome)이미지 11

니힐의 유용한 정보 4 - 웹 디자인에 도움이 되는 폰트어썸(Font Awesome)이미지 12

니힐의 유용한 정보 4 - 웹 디자인에 도움이 되는 폰트어썸(Font Awesome)이미지 13

니힐의 유용한 정보 4 - 웹 디자인에 도움이 되는 폰트어썸(Font Awesome)이미지 14

그리고 우리가 넣으려고 하는 태그의 클래스나 아이디를 선택해서 css코드를 작성합니다. 폰트어썸 테스트라는 글자의 앞부분에 아이콘을 넣기 위해서는 ::before 라는 가상 선택자를 사용해야 합니다. 앞부분을 컨트롤 하는 코드입니다. content 속성에 우리가 아까 복사한 4글자를 넣습니다. 여기서 중요한건 \가 반드시 들어가야 한다는 겁니다. 이미지 11처럼 말입니다. 그리고 이미지 12처럼 폰트 패밀리를 설정하고 굵기를 설정합니다. 폰트어썸에서 솔리드는 900이고 레귤러는 400입니다. 이런식으로 가늘고 굵은 아이콘들을 버전별로 사용할 수 있습니다. 물론, 프로에 해당하는 아이콘들은 결제를 해야 사용할 수 있습니다.

당연히 아이콘을 글자의 오른쪽 부분에 넣을 수도 있습니다. 태그로 추가하는 경우는 그냥 오른쪽에 복사하면 되고, css로 하는 건 가장 선택자 중에 ::after 를 사용해야 합니다. 그러면 이미지 13처럼 아이콘이 오른쪽에 뜨게 됩니다. 이제 웹 개발을 하면서 아이콘을 사용하는 방법을 아셨을 겁니다. 같은 아이콘을 쓰더라도 분위기는 아주 달라질 수 있습니다. 이미지 14처럼 css를 어떻게 활용하느냐가 제일 문제이기입니다. 여기까지가 첫번째 방법이었습니다. 그럼 이제 두번째 방법을 알아봅시다.

그래픽 툴에서 사용하는 방법

니힐의 유용한 정보 4 - 웹 디자인에 도움이 되는 폰트어썸(Font Awesome)이미지 15

니힐의 유용한 정보 4 - 웹 디자인에 도움이 되는 폰트어썸(Font Awesome)이미지 16

니힐의 유용한 정보 4 - 웹 디자인에 도움이 되는 폰트어썸(Font Awesome)이미지 17

이번에 알아볼 방법은 웹에서 하는 것이 아니라 직접 PC 내부에서 할 수 있는 방법입니다. 하우 투 유즈에서 제일 아래로 내리면 이미지 15와 같은 것들이 보이는데 아래 녹색 말고 위에 있는 녹색을 눌러서 zip파일을 다운로드 해줍니다. 압축을 풀면 라이선스가 적힌 메모장이랑 폴더가 나오는데요 (이미지 16) 웹폰트 폴더에 들어가줍니다. 그럼 ttf파일이 있습니다. 그 파일들을 윈도우에 설치해줍니다. (이미지 17)

니힐의 유용한 정보 4 - 웹 디자인에 도움이 되는 폰트어썸(Font Awesome)이미지 18

니힐의 유용한 정보 4 - 웹 디자인에 도움이 되는 폰트어썸(Font Awesome)이미지 19

니힐의 유용한 정보 4 - 웹 디자인에 도움이 되는 폰트어썸(Font Awesome)이미지 20

니힐의 유용한 정보 4 - 웹 디자인에 도움이 되는 폰트어썸(Font Awesome)이미지 21

니힐의 유용한 정보 4 - 웹 디자인에 도움이 되는 폰트어썸(Font Awesome)이미지 22

니힐의 유용한 정보 4 - 웹 디자인에 도움이 되는 폰트어썸(Font Awesome)이미지 23

니힐의 유용한 정보 4 - 웹 디자인에 도움이 되는 폰트어썸(Font Awesome)이미지 24

저는 포토샵을 켰습니다. (이미지 18) 포토샵에서 텍스트 툴을 고르고 잠시 웹으로 넘어갑니다. 포토샵에 넣고 싶은 아이콘을 찾아서 i태그와 f로 시작하는 4글자 사이에 아이콘 모양을 복사해주고 (이미지 19, 20) 포토샵에서 붙여넣기를 합니다. (이미지 21) 그럼 구현이 안되죠? 우리가 추가했던 글꼴을 선택해주면 (이미지 22) 아이콘이 구현된 모습을 볼 수 있습니다. (이미지 23) 이런식으로 브랜드 아이콘, 솔리드 아이콘, 레귤러 아이콘을 전부 구현할 수 있습니다. (이미지 24)

마치며

여기까지 폰트어썸을 활용하는 방법을 알아봤습니다. 어려운 것은 없다고 생각합니다. 웹디자인을 어느정도 하시는분들은 무슨 말을 하는지 다 알아들으실거고, 처음 접하시는 분들을 위해서는 이미지로 차근 차근 설명해드렸습니다. 이미지를 보면 붉은색으로 가이드를 해놨으니까 참고를 하시고 폰트어썸의 세계로 들어가 여러분이 만드는 웹을 조금 더 멋지게 꾸밀 수 있었으면 좋겠습니다. 이번 글은 여기서 마치도록 하겠습니다. 남은 주말 잘 보내시고 다음 글에서 봅시다.


연락처

이 아래는 SNS 연락처들입니다. 하고 싶은 말이 있으시거나 포스트에 관한 질문 사항이 있으시면 연락 주시면 빠르게 답변드리도록 하겠습니다. 인디게임 소개, 리뷰 같은 제의도 받고 있으니까 언제든지 연락을 주시면 두팔을 벌려 맞이해드리겠습니다.

이메일 ::nihil_ncunia@naver.com

트위터 ::@NIHIL_ILLUST

인스타그램 ::nihil_illust

플리커 ::니힐_NIHIL

디스코드 ::니힐 NIHIL#3841

니힐 티스토리 블로그의 모든 포스트는 CC BY-SA 2.0 KR를 따르고 있습니다. 그렇기 때문에 자료를 활용하실 때에는 반드시 이 포스트의 링크를 명시해 주시고 같은 CCL을 명시해주셔야 합니다.
Copyright Nihil ncunia. All rights reserved.
이 글은 CC BY-SA 2.0 KR를 따릅니다.
페이지 탐색
공지사항
방문자

오늘 671 어제 909 전체 1,017,399

메뉴
카테고리
기간별 포스트 현황
감사합니다
이 블로그가 조금이나마 여러분들의 여흥과 심심함을 해소해드렸다면 좋겠습니다. 다양한 재미를 만들어드리기 위해 노력하고 또 노력하겠습니다. 남은 하루 좋은 하루 되셨으면 좋겠습니다. 감사합니다.