UXUI 도장깨기 (1)
타이포그래피 씹어먹자
안녕하세요. 바이블입니다. 어느덧 디자이너로 생활한 지 8년이 조금 넘었습니다. 지금은 완전히 퇴사해 홀로서기를 하고 있죠. 저는 디자인 전공자로 출발해 그 이상의 많은 도전을 하고 있는데요 실무부터 시작해서 오프라인 교육, 온라인강의, 출강을 넘어 브런치까지 영역을 넓히게 되었습니다.
바이블의 디자인 인생0. 배우기 전에
많은 분들이 디자인을 할때 가장 기본적인 고민은 어떻게 하면 타이포를 잘 배치할까?입니다. 그래서 스트레스를 덜 받으면서 손쉽게 타이포를 배치하는 법에 대해 알려드리고자 합니다. 그동안 제가 다양한 포지션의 디자인 생활하면서 많은 작업량을 통해 터득한 노하우입니다. 아직도 디자인이 어렵다고 생각하시는 분들에게 작은 도움이 될 것 같아서 A부터 Z까지 차근차근 쉽게 알려드립니다.
<주의할 점>
이 글을 읽기 전에 오로지 실전에서 부딪혀가면서 배웠기 때문에 바이블만의 관점이 만들어졌습니다. 때문에 역사적으로 맞고 틀리고의 논점을 논하는 것 보단 단순히 디자인을 쉽게 하셨으면 하는 바람에 활용성을 중점으로 보기를 희망합니다. 사실상 저는 전공자이기 때문에 뼛속까지 깊은 논문을 봐왔습니다. 바우하우스, 산업혁명, 얀 치홀트, 타이포그래피의 어원 역사 등... 부터 들어가면 얘기할 게 엄청 많습니다. 하지만 우리에게 지금 당장 중요한건 실무에서 바로 쓸 수 있는 지식이잖아요? 함께 배워봅시다!
1. 왜 타이포그래피 인가?
우선 타이포그래피의 뜻을 살펴보면 타이포는 활자, 그래피는 시각예술이라는 명칭을 가지고 있습니다. 이것을 접목해서 설명하자면, 활자들이 시각적으로 보기가 좋다는 의미가 담겨 있습니다. 그래서 타이포그래피는 보기 좋게 꾸며진 타이포를 말합니다.
보기 좋게 보인다고 해서 단순히 타이포그래피를 예쁜 타이포라고 많이들 알고 있고, 타이포는 서체 빨이 강하다는 인식을 가지고 있습니다. 그래피 스타일이 주는 인상 때문에 그렇게 느끼는 겁니다.
한글 : 고딕체 / 명조체
영문 : 산세리프체 / 세리프체
왼쪽 [고딕 = 산세리프], 오른쪽 [명조 = 세리프]아래 그림을 참고해 조리개, 어센더, 베이스라인, 캡 높이, 디센더, 행간, 문자 간격, 산세리프, 세리프, 줄기, 획, x-높이의 텍스트의 인상에 따라 문자 형태가 달라지고 이것 때문에 가독성, 가시성, 시인성, 판독성이 차이가 납니다.
구글 머터리얼 '타이포그래피 이해'어떤 종류의 그래피 스타일을 선택하는지에 따라 느낌이 크게 달라질 수 있기 때문에 수많은 타이포 중에서 어떤 타이포를 쓸 것인가?에 초점을 두어야 합니다. 즉 생각(기획)하며 가독성, 가시성, 시인성, 판독성이 좋은 타이포를 선택하는 것에 집중된 형태를 말하죠.
가독성 : 글 잘 읽히는지
가시성 : 눈에 띄는지
시인성 : 명도의 차이 구분이 쉬운지
판독성 : 글에 시선이 바로 꽂히는지
그래서 인터넷상에 올라온 수많은 타이포들이 특정 누군가에 의해서 만들어진 서체이기 때문에 '그래피' 라는 단어가 쓰입니다. 누군가가 종이에 손으로 쓴 형태는 손글씨이며 그래피(글꼴, 스타일) 입니다. 누군가가 아트보드에 마우스로 제작한 형태는 시스템 폰트이며 이것 또한 그래피(글꼴, 스타일) 입니다.
왼쪽 [손글씨], 오른쪽 [시스템 폰트] 두 이미지 기획의 의해서 만들어진 '그래피' 형태타이포 = 활자 = 글
그래피 = 시각예술 = 글꼴/서체 스타일
타이포/그래피 = 보기 좋게 꾸며진 타이포
사용하는 텍스트에 따라 받아드리는 인상은 크게 달라지며, 사용자에게 전달하고자 하는 내용과 인상이 무엇인지에 따라 적절한 그래피 스타일을 선택하고 적용해야합니다.
타이포와 그래피가 분리되면 어떻게 그게 타이포그래피 인가요?
그건! 바로 타이핑 입니다!
그렇다면 타이핑은 디자인이 적용된 상태가 맞을까요? 아닐까요?
정답은 아닙니다!
2. 절대로 타이핑 상태는 되지 말자!
말 그대로 보기 좋게 꾸며진 타이포 이기 때문에 무턱대고 아무 계획없이 그래피 스타일 선택을 안 하고 그대로 쓰는 경우는 타이핑입니다. 가장 기본형으로 아무 스타일을 주지 않은 타자 상태를 말합니다.
타이핑 = 타자
타이포 배치를 이해하기 위해서는 타이핑과 타이포그래피의 차이점을 알아야 합니다. 타이핑을 하는 이유는 인터넷 정보로 기록하기 위해 워드나 문서로 작성하는 형태를 말합니다. 완성되지 않은 문서이기 때문에 타이포그래피가 적용된 상태가 아니라는 거죠.
미완성과 완성의 차이
카카오 '기술과서비스' 텍스트 내용만 가져와 재편집[왼쪽 그림] 타이핑은 타이포그래피가 아니다.
[왼쪽 그림] 타이핑은 미완성된 상태이다.
[왼쪽 그림] 타이핑은 디자인이 적용되지 않았다.
'디자인 한다고 했는데, 왜 완성한 것 처럼 안보이는 거지?'
아직도 위와 생각을 했다면, 타이포그래피를 제대로 알고 쓰는 것이 아닐 겁니다. '감각'만 믿고 열심히 픽셀들을 옮겨가며 배치했을 텐데 말이죠. 그 방식은 아무 쓸모가 없습니다. 1px에 민감한 디자이너는 본인 스스로 디테일에 강하다며 스스로 자위합니다. 실상 "저 디자인 못해요"와 다름없습니다. 이러한 기초부터 알려드리는 이유는 완성의 감도를 파악하는데 생각보다 긴 시간이 걸리기 때문입니다. 그래서 우리가 디자인할 때 타이포그래피의 개념을 이해하지 못하고 완성하는 것에만 초점을 두고 있습니다. 그래서 예상치 못한 어떠한 곳에서 시간을 낭비하는 이유가 생깁니다.
디자이너들이 자만하며 자위하는 것들
1) '감각'만 믿고 배치한다.
2) 1px 픽셀 옮기기를 '디테일'이라 착각한다.
3) 1~2시간 후 뭐가 바뀌었지? 많이 차이 나지도 않을 1px 옮기기에 집중해 '시간 낭비' 한다.
아.. 정말 죄송하지만 이 모든 것들이 1시간 안짝으로 끝내야 맞습니다.
왜? 저렇게 힘들게 디자인 하지?... 신기...!
디자이너라면 모두가 하는 꿀팁 루틴이 있습니다. 하지만 저는 어떠한 참고 자료를 보고 대리 기재해서 작성한 글이 아니기 때문에 주관적일 수도 있습니다. 하지만 왜? 이렇게! 배치해야 하는지! 오목조목 따져가면서! 하시고 싶으신 분들에겐 사이다 같은 참고글이 될 수 있을 거라 판단합니다. 단어 외우는 듯 빠르게 설명하면 이해가 되지 않은 체 디자인만 하는 경우가 있으므로 이해하는데 오랜 시간이 걸립니다. 최대한 풀어서 설명할 것이며 핵심 단어장의 느낌보단 원초적으로 다가가 독자의 머릿속에 뿌리를 내리는 글이 되고자 합니다.
타이포 역할에 따라 구분하기
[바이블쌤이 추천하는 텍스트 디자인 순서]시간을 효율적으로 활용하기 위해서 디자인 치는 방식, 시간을 단축하는 공식이 존재합니다. 그러므로 사용 순서를 잘 알고 타이포를 배치하면 활용하기가 굉장히 쉽습니다. 저 같은 경우엔 디자인 작업 속도가 굉장히 빠른데요. 다 이유가 있습니다. 타이포를 배치하는 공식, 즉 비법이 존재했기 때문이죠. 아래와 같은 순서대로 이행하면 타이포 배치할 때의 두려움이 싹- 사라집니다.
1) 타이포 역할별로 크기 차이를 준다
2) 타이포 역할별로 컬러를 구분 한다
3) 타이포 역할별로 굵기를 차이를 준다
4) 타이포 역할별로 행간을 구분한다
5) 타이포 역할에 따라 안정된 패딩 값을 찾는다
크기, 컬러, 굵기, 행간 차이를 주는 공통적인 이유가 있습니다. 우리가 사용자 옆에 딱 붙어서 "이거 부터 읽고나서 그다음 이거 읽어야 해요!" 손으로 가르켜서 직접적으로 알려주지 않습니다. 그렇기 때문에 가이드를 제공하지 않아도 무의식적으로 눈의 흐름을 자연스럽게 텍스트를 읽히도록 해야하니 우리가 전달하고자 하는 의도를 그대로 반영해 크고 작고 진하고 연한 대비감을 주어 큰 순서 먼저 읽고 작은 순서대로 읽히기 위해서 전략적인 배치방식이 필요합니다.
왼쪽 [타이핑], 오른쪽 [타이포그래피] 시선 차이여백을 파고들어 글이 읽히지가 않을때 면적의 대부분 타이핑이 거의 많은 영역을 차지하고 있기 때문입니다. 하지만 이 과정을 문제없이 진행하기 위해서는 타이포의 역할과 기능을 반드시 파악해야 하며. 그래야 오른쪽에 있는 순서를 주는 기준이 명확하게 정해집니다.
다음 UXUI 도장깨기(2)편에 바이블표 타이포그래피 방대한 꿀팁! 포인트를 꽉! 꽉! 눌러서 내용을 알차게 담아볼게요! 긴 글 읽느라 수고하셨습니다!
모든 디자인은 추리 소설처럼 파고들어 전략적인 접근과
배치를 해야한다!
글쓴이 : 바이블
