지금 바로 사이트에 픽토그램 넣는 법 Font Awesome

들어가며

웹에서 앱과 같은 경험을 주고자하는 시도가 많아지면서, 웹사이트 제작시 아이콘은 필수적인 요소가 되었습니다. 아이콘 혹은 픽토그램은 사용자에게 전달하고자하는 복잡한 정보를 간단한 이미지로 보여줄 수 있습니다. "메뉴모음"이라는 단어가 아닌 햄버거 아이콘으로 모두가 이해하는 아이콘으로 보여줌으로써 사용자가 좀 더 깔끔한 웹사이트를 이용한다는 경험을 느끼게할 수 있습니다. 웹사이트에 픽토그램을 넣는 방법은 다양하게 있으나 주로 웹 아이콘 폰트를 이용하며, 일부 사용이 무료이면서 가장 유명한 것이 Font Awesome입니다.

Font Awesome의 특징

Font Awesome

1. HTML의 font 스타일 속성이 모두 사용 가능

Font Awesome은 이미지가 아닌 웹 폰트이기 때문에 HTML의 font 스타일을 모두 적용할 수 있습니다. 이게 무슨 장점이냐 할 수 있겠지만, 반대로 이미지였을 때를 생각해봅시다. 우리는 픽토그램이 웹사이트에서 다양한 방식으로 보여지길 원합니다. 크기가 크거나 작았으면 좋겠고, 색상도 내가 원하는 색으로 나왔으면 합니다. 주변 폰트하고의 조화도 무시할 수 없겠죠? 만약 이미지형식이라면 이 모든 것을 작업할 때 추가 작업이 필요하거나 심지어 비슷한 모양의 여러 색깔을 가진 이미지를 가지고 있어야하는 리소스 낭비를 할 수도 있습니다. 하지만, Font Awesome은 간단하게 스타일에 몇 줄 정도만 추가하면 크키는 물론이고 색상도 변경할 수 있습니다. 정말 Font Awesome이 아닐 수 없습니다.

2. 브라우저 호환성

한국에는 IE라는 악마가 살아남아서, 프론트엔드 개발자들의 소중한 시간을 잡아먹는다고 합니다. 그러나 Font Awesome은 JavaScript가 전혀 사용되지 않아서 호환성에 문제가 없기 때문에 Font Awesome에서는 악마의 장난질로부터 벗어날 수 있습니다.

3. 무료

취미로 사이트를 만드는데 아이콘에까지 돈을 쓰기에는 애매할 것입니다. Font Awesome의 아이콘은 모두 무료는 아니지만 기본적으로 쓰는 대부분의 아이콘들이 무료로 사용이 가능하기 때문에 아이콘 배포 목적이 아니라면 상업적인 용도로도 사용 가능합니다.

4. 검색 용이성

햄버거는 사실 햄버거가 아니였다는 사실 알고 계셨나요?

Font Awesome에서 사용할 수 있는 아이콘들은 Font Awesome 웹사이트에서 검색이 가능하며 비슷한 검색어로 추천도 해주기 때문에 원하는 아이콘을 쉽게 찾을 수 있습니다.

5. 다양한 환경에서의 사용법

디자인에서 개발까지 다양한 사용 예시

Font Awesome은 다양한 환경에서 사용할 수 있는 사용법들을 가지고 있습니다. 직접 다운로드 받아서 사용하는 것부터, npm을 이용하는 방법, React에서 사용하는 방법 등 다양한 웹 프로젝트 부터 Figma 같은 프로토타입 툴에서 사용하는 방법까지 웬만한 웹 디자인~개발 툴에서 두루두루 사용할 수 있게하여서 연속성을 높였습니다.