본문 바로가기

폰트

(13)
UI 디자인에서 영문 타이포그래피 잘 쓰는 법 이 글은 폴란드의 디지털 에이전시인 inFullMobile의 UX/UI디자이너인 Wojciech Zieliński가 작성한 "How to use typography in UI Design"을 번역하여 작성하였습니다(원저자에게 허락을 받았으며, 의역이 있습니다). 들어가며타이포그래피는 UI 디자인에서 가장 어려운 부분이라해도 과언이 아닙니다. 우리는 오랫동안 다양한 방식으로 타이포그래피 작업을 해온 결과로 여러 규칙, 이론과 실제를 경험하게 되었는데요. 이 글에서는 따로 작업이 어려운 분들을 위해 프로젝트에 사용할 수 있는 몇 가지 실용적인 팁과 비결을 알려드리겠습니다. 예시로 보여드릴게요타이포그래피는 재미있는 주제이긴 하지만, 이론적인 부분을 얘기하지는 않겠습니다. 문자 해부학이나 활자보다 바로 적용가능..
같은 크기가 달라보이는 이유, 시각적 보정 이해하기 여기 크기를 맞춘 도형 조합 A, B가 있습니다. A, B 중 사각형과 원의 크기 비율이 같아 보이는 조합은 무엇인가요? 저는 B조합이 훨씬 더 자연스럽게 보입니다. A는 가로 세로 크기를 똑같이 맞췄으며, B는 상대적으로 면적을 고려해 원형의 크기를 사각형보다 조금 더 크게 그렸습니다. 이처럼 사람의 눈에 자연스럽게 보이도록 조정하는 작업을 ‘시각적 보정’이라고 합니다. 디자이너, 혹은 디자이너가 아닌 사람들도 다양한 프로그램을 통해 미세한 크기를 똑같이 맞출 수 있습니다. 하지만 프로그램이 오브젝트를 인식하는 것과 사람이 보는 것은 다르기 때문에, 때론 아주 정확한 것이 부자연스럽게 보일 수 있습니다. 서로 다른 형태 사이의 차이점을 보완해주는 작업이 필요합니다. 최근 저는 이러한 시각적 보정에 대해..
굴림체에서 벗어나자! 웹폰트 활용하기 지난 ‘웹페이지에 굴림체만 보이는 이유, 웹폰트 이해하기’에서는 웹의 매체 특성 때문에 OS에 설치되지 않은 글꼴을 사용하려면 웹폰트를 사용해야 한다고 말씀드렸습니다. 그리고 웹폰트의 아름다움과 그 가능성에 대해 함께 알아보았는데요. 이번에는 이런 웹폰트를 어떻게 하면 잘 활용할 수 있는지, 기초부터 차근차근 알아보도록 하겠습니다. 웹폰트 불러와 사용하기 웹페이지는 많은 정보로 이루어져 있습니다. 아주 기본적인 텍스트 정보부터 사진, 그림과 같은 이미지 정보는 물론 동영상 정보도 불러올 수도 있습니다. 이 모든 것들은 웹페이지에서 HTML 태그와 몇 가지 기술로 ‘불러오는’ 것들입니다. 호출한다고 표현하기도 하는데, 영어로는 loading으로 쓰곤 합니다. 웹폰트도 다르지 않습니다. 웹페이에서 ‘불러와(..
웹페이지에 굴림체만 보이는 이유, 웹폰트 이해하기 아름다운 페이지를 위한 웹폰트 우리가 흔하게 보는 웹사이트는 대부분 글(text)로 이루어져 있습니다. 사진이나 동영상을 통해 정보를 전달 받기도 하지만 아직 대부분 글을 눈으로 읽는 과정을 통해 정보를 얻고 있습니다. 책이나 잡지같은 인쇄물에서도 글꼴(font)이 중요하듯이 웹사이트에서도 내용을 잘 전달하기 위해서, 매력적으로 보이기 위해서 글꼴은 매우 중요합니다. 웹폰트란 왠지 웹사이트의 글꼴은 거의가 비슷해 보이지 않나요? 디자이너가 공들인 이미지 위의 글꼴에 비해 투박하게 보일 때도 많고, 대부분 같은 글꼴을 쓰고 있다고 생각되지 않나요? 이미 익숙해져서 눈치채지 못하고 있을 수도 있습니다. 웹폰트란 문자 그대로 웹+폰트. 웹에서 쓰이는 폰트입니다. 웹에서 볼 수 있는 ‘맑은고딕’이나 ‘굴림’은 ..
코딩 폰트로 즐겁게 코딩하기 들어가며 “코딩하는 디자이너”, “코딩 교육 열풍” 등 코딩에 대한 열기가 뜨겁습니다. 디자이너부터 어린이까지 코딩에 대한 관심이 커지고 있고, 전문 프로그래머뿐 아니라 누구나 코딩을 할 수 있다는 “생활코딩”까지. 코딩이 대중화되고 있는 시대입니다. 텍스트 에디터에 사용되는 코딩 전용 폰트에 대해 알아보려고 합니다. * 이 글은 "코딩 폰트 디자인기, Monoid"와 함께 읽으면 더욱 좋습니다. 코딩 폰트는 왜 필요할까요? 코딩을 할 때는 우리가 자주 사용하는 MS워드나 한글과는 조금 다른 폰트가 사용됩니다. 우리가 작성하는 모든 것들을 문서라고 한다면, 워드프로세서로 작성하여 출력된 문서, 블로그 포스팅, SNS의 짧은 글과 같은 문서들은 사람이 사람에게 전하는 말입니다. 하지만 코딩은 사람이 컴퓨터..
디자이너가 아니어도 괜찮아! 글꼴 다루기 보고서, 이력서, 기획서, 안내문, 초대장, 프레젠테이션…. 우리는 일상 속에서 수많은 문서를 만듭니다. 보기 좋은 문서와 그렇지 않은 문서의 차이를 만드는 데는 여러 요소가 있을 텐데요, 그 중 중요한 것이 바로 글꼴이라는 것을 아시나요? 김은영 디자이너의 책 '좋은 문서디자인 기본 원리 29'는 디자이너가 아닌 사람들도 보기 좋은 문서를 만들 수 있도록 문서디자인의 원리를 이해하기 쉽게 설명합니다. 그중 글꼴을 고르고 다루는 방법은 디자인을 전공한 저에게도 기본기를 확인하게 하는 유익한 내용이었는데요, 지금부터 몇 가지를 공유합니다. 첫째, 문서의 내용과 분위기를 고려하여 글꼴을 선택한다. 같은 내용, 같은 색상이지만 글꼴을 바꾼 것만으로 글의 인상이 바뀝니다. ①과 ②는 공식적이며 개인적 감정이 느..
코딩 폰트 디자인기, Monoid 코딩할 때 어떤 폰트를 사용하시나요? 개인적으로 코딩의 시작은 에디터를 보기 좋게 세팅하는 일부터라고 생각하는데요, 장시간 에디터 화면을 봐야 하기 때문에 꽤 신중하게 폰트를 고르는 편입니다. 코딩에는 일반적인 문서를 작성할 때와는 조금 다른 폰트를 사용하게 되는데요. 어떤 폰트를 선택하느냐의 기준은 저마다 다르겠지만, 코드 정렬을 위해 고정폭 폰트를, 작은 크기에서도 가독성이 좋고 문자들간의 구분이 잘 되는 폰트를 사용합니다. 마지막의 예를 들면, 숫자 0과 영문자 O, 대문자 I와 소문자 l 을 확실히 구별할 수 있는 것들 말이죠. Consolas, Monaco, Menlo, Source Code Pro 를 비롯하여, 프로그래머들이 애용하는 몇몇 '코딩용 폰트'들이 있습니다. 그 가운데, 새롭게 선보..
에코폰트의 진화와 알파벳 포스터 프로젝트 에코 폰트라고 아시나요? 에코폰트는 잉크절감을 위한 폰트를 말합니다. 이미 국/내외 에코폰트가 개발되어 사용되어지고 있는데요. 지금도 에코폰트는 계속 진화하고 있습니다. 오늘은 기존의 에코폰트보다 좀 더 진화한 폰트를 소개하고자 합니다. Ryman Eco(라이먼 에코)라는 이름의 폰트인데요. 이 폰트는 헬베티카, 푸트라 등의 일반적인 폰트에 비해 잉크의 사용량이 1/3밖에 안된다고 합니다. 뿐만아니라, 기존에 개발되었던 잘 알려진 에코폰트(알파벳)와 비교하여도 27% 더 적은 잉크를 사용한다고 하네요. 만약 모든 사람들이 프린트를 할 때 이 폰트를 사용한다면 매년 약 4억 9천개의 잉크 카트리지를 아낄 수 있다고 합니다. 하지만 어떤 좋은 서체도 사용되지 않는다면 무용지물이 되겠죠. 특히, 다양한 서체를..