프로젝트 SPAM #3 아이콘 폰트

질문.
우리가 흔히 쓰는 폰트는 비트맵 이미지일까, 벡터 이미지일까?

정답은 아래 더보기를 클릭
↓↓↓↓↓누르세요누르세요누르세요

정답: 개발이나 신경쓰세요.

 

◆ 글꼴의 종류

크게 비트맵(bitmap) 글꼴, 벡터(vetcor) 글꼴로 나뉜다.
벡터 글꼴은 선이 끊어지지 않는 특징 때문에 외곽선 글꼴이라 부른다.

TTF 포맷, OTF 포맷, 많이 봤으리라 믿는다. 그럼 이 둘의 차이를 알고 쓰고 있는가. 이 둘의 차이를 설명할 수 있는가. 당연히 우린 거기까지 신경쓰지 않아도 된다. 하지만 대충이라도 알고 있어야 추후 퍼블리셔, 디자이너와 소통이 원활해지고 이 친구 말이 좀 통하네? 라며 밥 한 끼 얻어 먹을 확률이 높아진다. 정말 최악의 상황이 오면 프론트엔드로만 조직된 팀으로 저 둘의 역할까지 도맡아야 한다. 그런 경우를 대비해서 살짝 어떤건지 맛만 보자.
(제대로 공부하고 싶다면 굳이 말리지는 않지만, 글꼴의 역사가 그리 간단하지 않다는 점만 미리 알려드리겠다. 참고 사이트는 본 글 제일 하단으로.)

 

◇ TTF 포맷과 OTF 포맷의 차이

우선 둘 다 벡터 글꼴이다. 이 둘의 차이점은 '곡선을 구현하는 방식'이다.

• TTF(True Type Font)
  • 2차원 베지어 방식
  • 계산량이 작아 표현 속도가 빠르다.
  • 반면 섬세한 곡선 표현이 힘들다.
• OTF(Open Type Font)
  • 3차원 베지어 방식
  • 곡선식의 차수와 DPI(Dots Per Inc: 해상도 단위)가 높을수록 깔끔한 곡선 표현이 가능하다.
  • 계산 과정이 복잡해 속도가 TTF보다 느리다.
  • 반면 곡선 표현이 좋다.

 

이쯤되면 궁금해져야 정상이다. 그래서 폰트가 벡터 이미지라는건가..? 굳이 따지자면 인터넷 속도가 충분히 빠른 요즘에는 벡터 이미지 글꼴이 대부분이다. 그리고 상황에 맞는 벡터 글꼴을 선택해서 사용한다.

그런데 오늘 주제는 아이콘 폰트인데 이 얘기를 왜 하고 있는가. 아이콘 폰트는 내가 만드는 아이콘들의 커스텀 폰트다. 특정 사이트에서 제공하는 서비스로 손 쉽게 만들 수 있고, 한 번 익혀두면 두고두고 유용하게 쓰이기에 작정하고 포스팅한다.

 

---

 

◆ 아이콘 폰트 만들기

아이콘을 폰트화 하면 무엇이 좋을까?

• 코드가 짧아진다.
• svg를 다루기가 편해진다.
• 리소스 면에서 효과가 있.을까? 이건 확실하지 않다.
• 뭣보다 써보면 아주 편하다.
• 검색창 돋보기 위치 맞추다 결국 앱솔루트 써본적 있다? 그럼 이거 쓰면 된다.

 

1. 준비물이 필요하다.

• 벡터 이미지 아이콘
• 아이콘을 화면에 랜더링 할 수 있을 정도의 출중한 마크업 실력

 

2. 아이콘을 준비했으면 아래 사이트로 이동하자.

만일 사이트가 존재하지 않는다면 알아서 다른 비슷한 유형의 사이트를 찾도록 한다. 사이트에 들어가면 IconMoon App을 클릭해서 작업 영역으로 이동한다.
https://icomoon.io/

Icon Font & SVG Icon Sets ❍ IcoMoon

 

3. 아이콘 업로드

준비한 아이콘을 업로드하면 Untitled Set에 추가가 된다. 그럼 이제 폰트로 만들 아이콘을 선택해주자. 기본 제공 아이콘을 선택해도 무방하다. 내가 준비한 건 하나만 살아남았다. ㅋㅋ

 

4. 폰트 생성

우측 하단에 Generate Font를 눌러서 폰트 생성을 위한 페이지로 이동한다.

폰트명을 수정하거나 삭제하거나 옵션을 설정할 수 있으나, 폰트명 정도만 통일 시키고 넘어가고 기본세팅 그대로 둔다.

우측 하단에 다운로드 버튼을 누르기 전에 그 옆의 톱니바퀴 버튼을 눌러서 설정 하나만 추가하자.

내가 지금 만들고 있는 아이콘 폰트의 이름을 정할 수 있다. Prefix, Suffix는 접두어, 접미어라 보면 된다. 아무래도 폰트명이 클래스로 쓰일 거기에 쉬운 검색을 위해 접두어는 통일 하는 편이 좋다.

중요한 게 하나 더 있다. CSS Selector를 'Use I'로 바꿔주자. 그래야 i 태그로 해당 폰트를 불러와 사용할 수 있다.

 

5. 다운로드

다운로드한 파일의 압축을 풀어 확인하면 다음과 같은 구조일 것이다.

fonts 폴더 안의 내용물을 내 프로젝트로 옮기자. 장소는 어디가 됐든 각자 내규에 따르도록 한다.
내규 같은 거 잘 모르겠으면 시키는대로 해보자. 프론트니까 src 폴더 있을 거고, 그 아래 asset 폴더 만들고, 그 아래 fonts 폴더 만들자. 복사 했으면 폰트를 인식 시켜줘야 한다.

 

6. 폰트 설정

위의 경우는 scss를 styles 폴더에서 관리하는 하나의 예시이다. 다운 받은 style.css 내용을 그대로 복사해서 붙여 넣고, 두 군데를 수정했다.

우선 scss-lint 문법을 무시하는 문구를 추가했다.
'scss-lint: disable all'

그리고 경로를 path-alias를 사용하는 방식으로 수정했다.

이 부분은 각자 css와 전역 css 적용하는 방식에 따라 다르지만, 다른 폰트 인식 시키는 것과 다를 바 없으니 그 방식을 참고해서 마무리한다.

 

7. 폰트 사용

사용하는 방법은 아주 간단하다.

<i className="icon-user-tie" style={{ color: 'pink' }}></i>
<i className="icon-calendar"></i>
<i className="icon-checkbox-checked"></i>

• 클래스명은 아까 저장한 폰트의 이름
• 폰트처럼 사용이 가능하기 때문에 색 지정, 크기 지정, 애니메이션 지정, 전부 폰트처럼 적용 가능하다.
  
  

쨘.

 

이제 추가 공부 시간.

https://learn.microsoft.com/ko-kr/windows/win32/gdi/raster--vector--truetype--and-opentype-fonts

래스터, 벡터, 트루타입 및 OpenType 글꼴 - Win32 apps

https://ko.wikipedia.org/wiki/%EC%BB%B4%ED%93%A8%ED%84%B0_%EA%B8%80%EA%BC%B4

컴퓨터 글꼴 - 위키백과, 우리 모두의 백과사전

https://www.newiki.net/wiki/%EC%99%B8%EA%B3%BD%EC%84%A0_%EA%B8%80%EA%BC%B4

외곽선 글꼴 - 내위키