디자인 아티클 둘러보기 #43 - 글자에 관한 이야기

2021. 1. 18. 22:34하루 한 글

어쩌다 보니 '글자'와 관련된 아티클만 읽었다. 텍스트를 보기 좋게 배열하는 것만큼 재미있는 일이 따로 없다. 그래서 디자인이 재미있다 :)

다른 디자인 공식과 다르게 폰트는 어느 정도 정해진 틀이 있어서, 디자이너가 아니라도 배워두면 좋을 것 같다.

 

오늘의 깨달음

📌 물리적인 특성을 기계적으로 끼워맞춰 컨셉을 지키는 것은 오히려 완성도를 헤친다. 직관적인 느낌을 살려 '닮은 것처럼' 만들어야 한다!

📌 모든 요소를 100%로 디자인한다면 시각적으로 피곤해진다! 전체를 보며 최선의 지점을 찾아내야 한다!

📌 CTA는 사용자가 현재 페이지를 벗어나는 통로이기에 자세한 설명이 필요하다!

 

목록

1. 폰트를 기반으로 아이콘 디자인하기 _ by pxd story 진언

2. 좋아보이는 디자인의 비밀 여섯가지 _ by 하기로

3. 버튼 클릭율, 카피로 간단하게 올리는 방법 _ by 고은솔(쏠라)

 

 


 

 

폰트를 기반으로 아이콘 디자인하기 _ by pxd story 진언

 

폰트를 기반으로 아이콘 디자인하기

들어가기 전에 원래는 pxd에서 진행한 디자인 시스템 구축 프로젝트에서 디자인 시스템 내에서 아이콘의 비주얼을 어떻게 정의할 것인지에 대한 경험을 공유해 드리고 싶었지만, 대외비 프로젝

story.pxd.co.kr

 

1) 문자의 높이는 아이콘의 전체 그리드를 짜는 과정에서 중요한 Key Line이 되며 개별 아이콘에서 나타나는 비례감이 폰트와 닮아있게 해 준다.

 

2) 폰트의 물리적인 특성을 아이콘에 기계적으로 끼워 맞추기보다 닮은 것처럼 느껴지는 아이콘을 만들어야 한다. 크기가 작은 아이콘의 특성상 기계적인 작업은 오히려 아이콘의 완성도를 헤치게 된다.

 

3) 아이콘은 크기가 작기 때문에 픽셀이 깨져 보이거나 잘못 그린 것처럼 보일 여지가 많다. 하여 특성을 잘 담아낼 수 있는 곳만 부분적으로 폰트의 특징을 살려 작업하는 것이 좋다.

 

4) 햄버거 메뉴와 같이 디자인 요소가 딱히 없는 아이콘도 많다. 그러한 아이콘에 폰트의 특징을 살린답시고 억지로 형태를 만들면 전체적인 완성도를 헤치며 가독성에 문제를 일으킬 수 있으며, 시각적으로 쉽게 피로해지는 경우도 발생할 수 있다.

 

아이콘 하나하나의 완성도와 전체의 완성도를 비교하고, 최선의 상태라고 모두가 합의할 수 있는 지점을 찾아내는 것이 중요한 것 같습니다. (진언)

 

 

 

좋아보이는 디자인의 비밀 여섯가지 _ by 하기로

 

좋아보이는 디자인의 비밀 여섯가지

폰트 공식을 지킵니다 | 글자가 아닌이미지 정보는 활자(type)를 통해 전달됩니다. 활자를 아름답고 가독성 좋게 한 벌의 모양으로 디자인한 것이 바로 폰트(font/type face)입니다. 네 가지 디자인

brunch.co.kr

 

1) 폰트 공식이야 말로 암기 과목이라 특정한 숫자만 기억하면 잘 읽히고 읽어보고 싶어 진다.

 

2) 우리의 눈은 단락을 하나의 덩어리로 인식하며 읽어 내려간다. 때문에 폰트는 글자가 아닌 이미지(Graphic)라고 할 수 있다.

 

3) 타이틀과 본문의 대비감이 클 수록 가시성과 주목도가 높아진다. 주인공을 주인공답게 만들어야 어중간한 느낌의 디자인을 피할 수 있다. -> 내가 늘 실수하는 부분

 

4) 자간은 -25에서 -50px, 행간은 세 줄 이상일 시 1.6~2배, 두 줄 이하라면 1.2배를 적용한다.

 

5) 타이틀은 자유롭게 변형이 가능하지만 ‘가독성’이 최우선인 본문 텍스트는 어느 정도 틀이 정해져 있다.

 

6) 콘텐츠의 성격이 고딕 계열과 맞는지 명조 계열과 맞는지 이성적으로 판단해야 한다. 자기 취향대로 폰트를 선정해서는 안 된다.

 

7) 폰트의 모든 두께를 다 사용할 필요는 없다. 글자 간 대비감을 주면서 일관되게 사용하는 것이 중요할 뿐이다.

 

 

 

버튼 클릭률, 카피로 간단하게 올리는 방법 _ by 고은솔(쏠라)

 

버튼 클릭률, 카피로 간단하게 올리는 방법🖱👈

이메일 구독자를 내 페이지로 랜딩시키는 버튼, 더 클릭하게 하려면?

blog.stibee.com

 

1) 이메일의 제목이 중요하듯이, 버튼 속 카피도 아주 중요하다. 기껏 풍부한 내용의 이메일을 작성해놓고 버튼 안의 텍스트를 ‘자세히 보기’로 통일해서는 안 된다.

 

2) CTA(행동 유도) 버튼은 사용자가 현재 페이지에서 벗어나는 통로이기에 버튼을 클릭했을 때 어떤 일이 발생하는지 구체적으로 작성해두어야 한다.

 

3) 모두의 시간은 소중하다. 버튼을 클릭했을 받을 있는 혜택을 미리 알려주자.

 

 


 

저번 주에는 병원 가고 야근하느라... 아티클을 거의 못 읽었다. 하마터면 며칠 안 읽은 거 가지고 자괴감이 들어서 영영 포기할 뻔했다. 며칠 실수해도 괜찮다, 꾸준히 공부하는 습관을 지키고자 노력하자.

 

목표는 많은데 시간과 에너지는 한정되어 있다. 한정된 자원을 어떻게 활용해야 할까... 고민이다.