사이트에 글꼴 적용하는 방법

  아임웹 연구소 소장 해준  |  2017 . 09 . 15

시작에 앞서
글꼴은 사이트의 분위기와 브랜드에 생각 이상의 큰 영향을 미칩니다. 글꼴에 따라 사이트는 전통적인 느낌을 줄 수도 있고, 미래적인 연출도 가능하죠. 또한 글꼴을 페이지마다 일괄적으로 적용하면, 방문자는 사이트에서 안정감을 느끼게 되며, 그에 따라 결과적으로 사이트 신뢰도가 올라갑니다.

반대로 말하면 여러 종류의 글꼴을 복잡하게 사용하는 경우 방문자의 집중도는 크게 떨어져, 사이트를 이탈할 가능성이 높아집니다.

이번 꿀팁에서는 [공통 디자인 설정]을 통해 기업(또는 개인) 브랜드에 맞는 글꼴을 찾아 사이트에 일괄적으로 적용하는 방법에 대해 알아보겠습니다.

- 상단 영역 '메인 메뉴' 및 '텍스트 로고'의 경우 '공통 디자인 설정'과는 별개로 맞춤 글꼴을 지정할 수 있습니다.
- 4월 26일 업데이트 이후, 텍스트 위젯을 포함해 게시판까지 모든 글꼴 설정은 '공통 디자인 설정'에서 가능합니다.






1. 공통 디자인 설정 메뉴 켜기
디자인 모드 좌측 툴바, 하단에 [톱니바퀴] 아이콘이 있습니다. 이 아이콘을 클릭해, [공통 디자인 설정] 메뉴 열어주세요.





2. 공통 디자인 설정 메뉴 보기
오른쪽에서 공통 디자인 설정 패널이 나타납니다. 사이트에 공통적으로 설정할 수 있는 여러 항목들 때문에 처음에는 복잡하게 느껴지실 텐데요. 지금은 패널에서 [텍스트] 영역에만 집중해주세요.





3. 글꼴 선택하기
아임웹은 저작권에 문제없는 22종의 한글 글꼴과 28종의 영어 글꼴 외 일본어 3종, 중국어(간체) 1종을 지원합니다. 공통 디자인 설정, 텍스트 영역 2번째 항목부터, 5번째 항목에서 글꼴을 선택할 수 있습니다. 아래 항목 설명을 확인해, 원하시는 글꼴을 선택해주세요.




저는 제목 한글을 '연성체'로, 본문 한글을 '본명조'로 선택하였습니다.

1) 본문 한/중/일 글꼴 : 단락이 표준(Paragraph)로 지정된 텍스트의 한글/중국어/일본어 글꼴을 정할 수 있습니다.
2) 본문 영문 글꼴 : 단락이 표준(Paragraph)로 지정된 텍스트의 영문 글꼴을 정할 수 있습니다.
3) 제목 한/중/일 글꼴 : 단락이 제목(Heading)으로 지정된 텍스트의 한글/중국어/일본어 글꼴을 정할 수 있습니다.
4) 제목 영문 글꼴 : 단락이 제목(Heading)으로 지정된 텍스트의 영문 글꼴을 정할 수 있습니다.




4. 변경한 글꼴을 적용하는 방법 - 단락과 글꼴의 관계
단락은 마이크로소프트 워드(Word)로 치면 스타일(Style)과 같습니다. 워드에서 스타일을 달리 지정하면, 텍스트의 모양 및 크기가 다르게 나오듯, 아임웹도 텍스트 작성 시 단락을 지정해주는 것으로 사이트 내 텍스트 글꼴을 지정해줄 수 있죠.




먼저 위 그림처럼 텍스트를 추가하고, 텍스트 첫 번째 줄의 단락을 바꿔주세요.

1) 첫 번째 줄을 마우스로 드래그해 선택해주세요.
2) 다음으로 선택한 텍스트의 단락을 제목(Heading) 5로 바꿔줍니다.



아래 줄 작은 텍스트들도 위와 마찬가지로 단락을 지정해줍니다. 단, 작은 텍스트는 위 그림처럼 표준으로 지정해주세요.

3) 두 번째 줄을 마우스로 드래그합니다.
4) 작은 텍스트는 단락을 표준(Paragraph)으로 지정합니다.



그러자 어떻게 될까요?
아래 그림처럼, 제목 단락에는 '연성체'가, 본문에는 '본명조' 글꼴이 적용된 걸 확인하실 수 있습니다.


감이 잡히시나요?
나머지 5개 텍스트 위젯의 텍스트들도 모두 같은 방식으로 단락을 제목과 본문으로 지정해보겠습니다. 그러자 아래 그림처럼 일괄적으로 통일성 있게 글꼴들이 적용된 걸 확인하실 수 있습니다.






5. 외국어 글꼴 지정하기
영문 및 일본어, 중국어도 마찬가지로 글꼴을 적용할 수 있습니다. 제목 영문 글꼴과 본문 영문 글꼴에 원하시는 글꼴을 선택해주세요. 저는 제목 영문 글꼴을 Play fair display 로, 본문 영문 글꼴을 Droid Serif를 선택했습니다. 적용된 글꼴은 아래 그림에서 확인해보세요.






6. 게시판에 적용되는 글꼴
이처럼 글꼴을 바꾼 후, 게시판에는 한글 및 영문 본문에 지정된 글꼴로 나타납니다. 아래의 경우 본명조가 적용된 걸 확인하실 수 있습니다.





마치며
때때로, 1개 사이트에 3개, 4개 이상의 글꼴을 넣고 싶다는 문의를 받습니다.

일단 이론상 제목과 본문에 한글/영문 총 4가지 글꼴을 넣을 수 있고, 상단메뉴에 1개의 글꼴을 추가로 사용할 수 있습니다. 그러나 이 글의 초반에도 말씀드렸지만, 글꼴을 3개 이상 쓰는 건 보기 좋은 디자인을 함에 있어 좋은 선택이 아닙니다. 물론 어떤 의도에 따라서는 3개 이상의 글꼴을 쓸 수도 있겠지만, 세계적인 브랜드 디자이너들은 1개 사이트에 가능한 2개 정도의 글꼴을 사용할 것을 권장합니다.

추가로 제가 오랜 기간 앱 디자인 및 관리하고 있는 BMW와 MINI도 영문 글꼴 외 1개의 한글 글꼴만을 사용할 것을 매 작업 때마다 강조합니다. 방문자는 사이트 내에서 어쩜 가장 많이 접하는 글을 통해 기업(또는 개인) 브랜드 아이덴티티를 기억할 수도 있기 때문일 것입니다.


해준
배우고 익히고 나누는 | 해준씨 | 유용한 콘텐츠 마케팅 | 네이버 카페 '아임웹 연구소' 소장
jin@haejoon.com

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버페이, KCP 공식파트너입니다.