[포토샵 강좌] 가독성 좋은 폰트 만들기

2022. 4. 19. 11:10정보/디자인

728x90
반응형

 

 

 

 

 

같은 폰트를 사용했는데 왜 다른 사람이 만든 글씨가 예뻐보이는걸까요?

 

 

보통 오피스 프로그램(워드, 한글, 파워포인트)들을 주로 사용하는 이용자가 이렇게 문제점이 발생합니다.

오피스 프로그램에서는 폰트에 굵게/기울기/밑줄/색상/배경색만 변경이 가능합니다. 

폰트의 속성을 좀 더 디테일하게 넣어야 예쁜 폰트가 완성이 됩니다.

그래서 폰트의 속성을 수정할 수 있는 프로그램을 사용해야 됩니다.

 

 


 

 

모르는 분들은 "예쁜 글씨체로 바꾸면 되는거 아니야?" 라고 생각하게 되는데 글씨체를 바꿔도 똑같습니다. "글씨의 속성을 바꿔야 된다"라는걸 모르기 때문에 계속 문제해결이 안됩니다. 글씨의 속성을 바꾸고 어떤 스타일의 디자인이 있는지 알아보겠습니다. 예제는 포토샵을 기준으로 만들어져 있습니다. 일러스트도 동일합니다.

 

 


 

폰트의 굵기 조절

아래 예제에서 보면 폰트의 굵기가 달라지는데 폰트마다 특징이 있고 잘 배합해야 가독성이 좋은 폰트로 변하게 됩니다. 맨위에 있는 가장 얇은 폰트 Thin로 속성으로 할 경우 세련된 느낌을 주고 Black이나 Bold의 경우 굵은 폰트로 강렬하고 한눈에 시야가 쏠리는 느낌을 줄 수 있습니다. 하나만의 스타일을 고집하지 말고 잘 배합하면 보기 좋은 폰트를 만들 수 있습니다.

 

< FONT : NOTO SAN KR / 36pt >

 

우루루에서 가장 많이 쓰는 스타일은

주로 타이틀이나 강조에는 Bold를 사용하고 본문에는 Light, 본문강조 Regular를 사용하고 있습니다. 기울임 효과를 주지 않고 있습니다. 여기에 더 강조를 위해서는 폰트의 컬러나 배경을 바꿔 사용하고 있습니다. 폰트의 굵기만으로도 느낌이 다르다는 것을 알려드렸습니다.

 


 

폰트(글씨) 크기

우선 무작정 폰트의 크기를 설명하기 이전에 캔버스에 대해서 알고 넘어가야 합니다. 디자인작업을 할 때 width의 수치가 매우 중요합니다. 반응형 홈페이지나 모바일에서는 같은 폰트의 크기라고 하더라도 이미지의 너비(폭)으로 인해 자동으로 축소되거나 확대가 되어 폰트의 크기가 다르게 보입니다.

🤩 사이트마다 크기가 다릅니다. 나한테 맞는 사이즈를 찾으세요.

네이버 스마트스토어는 Width 사이즈는 860px로 되어 있고 Hmall : 800px, 롯데온 : 750px, CJ온스타일 : 760px, 11번가 : 860px, 옥션 : 860px, 지마켓 : 860px, GS : 720px 등 다양한 사이즈로 제작이 되고 있습니다.
블로그, 인플루언서, SNS는 정사각형에 가까운 크기를 많이 사용하는데 700~900px 정도로 개인에 맞게 다양한 사이즈로 제작이되고 있습니다. 정사각형으로 제작하는 장점은 우선 작업하기가 편하고 썸네일을 따로 만들 필요가 없기 때문입니다. 동영상이나 360뷰를 활용하는 분들은 와이드한 이미지와 파로나마 촬영은 하기도 하지만 보통 풍경을 찍을때 쓰기 때문에 이런 분들을 제외하면 보통 750~860px 사이즈를 선택하면 되겠습니다.

예전에 모바일 환경이 좋지 않을때는 650px로 작업을 했었는데 기술의 발달되고 데이타 기술이 발달하여 큰 사이즈의 이미지도 많이 사용합니다. 그래서 전 800px로 작업을 해보겠습니다. 축소해도 잘 보이고 확대해도 크게 깨지지 않는 사이즈로 생각이 되어 이렇게 작업합니다.
WIDTH 800PX로 작업할 때
잘보이는 폰트의 크기는

메인카피 : 30~36px BOLD
서브카피 : 24~30px MEDIUM
설명 : 16~18px LIGHT
  

글씨가 작아질수록 얇은 굵기는 잘 안보이기 때문에 Thin을 사용할때는 어느정도 크기가 커야됩니다.

 

 

내가 사용할 폰트를 설정하고 크기를 설정하였고 굵기를 선택하였습니다. 이제 남은건 자간과 자폭인데 이것도 개인마다 선호하는 스타일이 있으니 참조로 보시면 되겠습니다. 지금 설명하는 폰트는 '노토산스'체인데 가장 편안하고 가독성이 좋은 인기 폰트중에 하나입니다. 폰트마다 특성이 다 다르니 특성을 이해하면 사용하는데 도움이 됩니다.

 


 

자간과 자폭 설정

 

예전에 많이 사용했던 윤고딕은 자폭을 -90%로 하고 자간을 -100으로 했을때 가장 예뻤습니다. '지마켓산스'체는 자폭을 -90%, 자간 0~-50정도로 사용을 했습니다. 폰트마다 보기 좋은 설정은 다르기 때문에 이렇게 조정을 해야됩니다. '노토'체도 마찬가지로 조정을 해야되는데 한글과 영문에 차이가 있습니다. 

 

 

 

 

이렇게 한가지의 폰트라도 자간, 자폭의 차이만으로도 느낌이 다르게 표현됩니다. 예전처럼 화려한 폰트로 시선을 잡았다면 이제는 이미지를 부각시키고 전달하는 내용이 무엇인지 강조할 수 있는 폰트 디자인을 해야됩니다. 제가 사용하는 설정은 [자간 : -50 ~ -75, 자폭 : 100]으로 주로 사용하고 있습니다. 기본 설정을 이렇게 해놓고 영문은 다르게 봐야합니다. 영문의 경우 자간이 마이너스로 갈 경우 폰트가 붙어 가독성이 떨어집니다. 영문은 [자간을 0 ~ -50]으로 설정합니다.

 

'Noto Sans'은 고딕체로 가장 많이 사용하는 폰트로 예를 들어봤습니다. 개인적으로 'NOTO SANS'는 한글과 영문폰트가 예쁜데 숫자가 예쁘지 않아 숫자는 다른 폰트를 사용하고 있습니다. 이렇게 폰트의 속성에 대해 알아봤습니다.

 

 

나만의 예쁜 폰트를 만들려면 가장 주의할 점은

  • 핵심을 잘 전달할 수 있어야 한다.
  • 예쁜 폰트를 찾지 않는다.
  • 3가지 이상의 폰트를 쓰지 않는다.
  • 설정한 폰트값으로 통일되게 만든다.
  • 컬러의 사용을 자제하고 필요시 3개이상의 컬러를 넣지 않는다.

 

폰트를 사용할때 폰트 사이즈를 두서없이 16, 18, 24, 30, 36, 44를 기준없이 사용하게 될 경우 본문에 집중이 되지 않으니 꼭 통일된 느낌의 폰트의 속성과 크기를 따라 하시는게 가독성이 좋은 디자인이 됩니다.

 

 

 

다음에는 몇가지의 디자인을 해보도록 하겠습니다. 

구독과 공감❤️은 큰 힘이 됩니다

728x90
반응형