[나 혼자 ][나 혼자] 홈페이지 디자인 꿀팁 -타이포그래피 편

안녕하세요.

웹/앱 개발 전문 회사 샐리입니다.


홈페이지 제작은 잘 되어가고 있으신가요? 

오늘 주제는 웹 디자인의 꽃이라고 말할 수 있는 타이포그래피입니다!




타이포그래피란? 

디자인에 있어서 활자(活字)의 서체나 글자 배치 등의 구성 및 표현을 말합니다.



웹 디자인은 타이포그래피로 시작해서 타이포그래피로 끝날 만큼 굉장히 중요한 디자인 요소입니다.


그렇다면 좋은 타이포그래피 어떻게 만드는지 궁금 하지죠?

결론부터 이야기하면 타이포그래피는 대비와 여백을 활용하면 좋은 결과물을 얻을 수 있습니다.


자세한 설명은 아랫글에서 확인하세요, 

오늘 포스팅은 직접 웹 제작을 하시는 스타트업 대표님이나 소상공인분들에게 많은 도움이 되실 거예요!



대비를 만드는 방법 1 - 무게


웹 폰트는 너무 많은 종류의 폰트를 사용하는 것보다는 최대한 단일화된 폰트 패밀리를 써주세요.

괜한 욕심을 부리다가는 통일성도 없고 산만한 홈페이지가 될 수 있거든요;;


제가 웹 디자인에 자주 쓰는 폰트로는 스포카 한 산스, 본고딕, 로보토, 나눔고딕 등이 있습니다.


폰트 패밀리



폰트 패밀리는 thin-regular-bold-extrabold 처럼 무게가 다른 폰트를 패키지로 제공하는데요.

바로 이 굵기(무게)를 통해서 대비감을 줄 수 있습니다.



바로 이렇게요!


무게 대비



[before]보다 [after]가 글자끼리 대비되면서 눈에 확 들어오지요? 

이런 식으로 무게 대비를 활용하면 좋은 타이포그래피를 만들 수 있습니다






대비를 만드는 방법 2 - 크기


웹 디자인에서 글자 사이즈는 보통 16px를 본문용 사이즈의 기본으로 사용하는데요.

16px 본문 사이즈를 기본으로, 2배수로 폰트 사이즈를 조절해 대비를 만들 수 있습니다.



크기 대비


크기 대비를 통해 "안녕하세요" -> "Development company, Sally" -> "본문" 순으로 시각 계층이 만들어진 것을 확인할 수 있습니다.




위의 예시처럼 폰트의 무게와 크기 혹은 두 가지를 동시에 사용해서 대비를 만들면

시선도 집중되고, 중요한 내용을 강조할 수도 있어 단조롭지 않은 웹 사이트를 만들 수 있습니다.





여백을 만드는 방법 1- 행간/ 자간


많은 분들이 오류를 범하는 게 공간을 남기지 않고 도화지에 꽉 채워서 디자인하는 것입니다.

여백도 하나의 디자인입니다. 여백이 있음으로써 우리는 콘텐츠에 더욱 집중할 수 있거든요!

그런 의미에서 여백은 행간과 자간도 포함됩니다.



행간 : 글줄과 글줄 사이

자간 : 글자와 글자 사이


자간, 행간 조절



동일한 조건에서 글자 사이를 -25로 조절해 덩어리지도록 하고 글줄과 글줄 사이를 넓혀서 여백을 만들어 봤습니다.

역시, before보다 가독성이 좋아졌지요?


자간과 행간 같은 경우에는 공식처럼(?)을 알아두면 좋은데요.


한글 자간 같은 경우 -20에서 -50 정도 쓰면 적당하고,

행간은 글자 크기의 1.5에서 2배 정도로 사용하면 꽤 괜찮은 결과물을 얻을 수 있습니다.




여백을 만드는 방법 2- 문단 폭


문단 폭도 적절한 길이를 유지해 여백을 만들어주는 것이 좀 더 읽기 편합니다.

구글 메터리얼 디자인 가이드에서는 모바일은 30-40자, 데스크톱에서는 60자 정도를 사용하는 게 좋다고 설명하고 있네요.


문단 폭


결론


적절한 대비와 여백은 가독성과 시각적 계층구조를 만들어 어디에 초점과 관심을 가져야 되는지 알려줍니다.

또한 여백을 잘 사용하면 웹사이트를 고급스러움과 미니멀리즘으로 표현할 수도 있죠.


애플 홈페이지나 다른 웹사이트를 통해 대비와 여백을 확인해보세요. 

좋아 보이는 것의 비밀은 여기에 있다는 것을 알 수 있습니다.


처음부터 대비와 여백을 만들어 활용하는 것은 쉽지 않지만 

좋은 결과물을 많이 보다 보면 어느 정도 느낌이 생길거에요 ^^





여러분만의 홈페이지를 만들어보세요.

만약 홈페이지를 제작하는데 전문가의 도움이 필요하다면 웹/앱 개발 전문 회사 샐리가 도와드리겠습니다.

샐리 메일(stelar@sally.company) 혹은 홈페이지 문의를 통해 연락해 주세요!




135, Jungdae-ro, Songpa-gu, Seoul, Republic of Korea