UXUI 도장깨기 (2)
타이포그래피 역할
https://brunch.co.kr/@2aab284ce7e94d2/5
안녕하세요! 바이블입니다. UI 도장깨기 (2)탄을 가지고 왔습니다! 지난 포스팅에서 말한 내용들이 까먹었다면, 참고해주세요! 다른 포스팅은 UXUI 부터 얘기하는데 왜 저는 타이포그래피 이야기를 논하냐고요? 완전 기초지식이 없는 분들에게 도움을 드리기 위해서죠. 그리고 바이블만의 리딩방식은 정말 귀하고 특별하니깐 처음부터 자세하고 정확히 쓰임성에 대해 알고 싶으신 분은 저를 찾아주시면 됩니다!
* 내용이 길어서 난독이 오실 수 있을 건데, 리딩 영상은 차차 추가하겠습니다! (이해가 어려운 부분은 댓글로 남겨주시면 같이 설명해 볼게요!)
3. 타이포의 역할
사용자에게 정보를 전달하는 목적이 있을 때 타이포 역할들이 생깁니다. 그래서 제작하는 목적을 제대로 설정하는 것이 중요합니다. 전달을 잘하기 위해서 디자이너의 감각만 믿으면 안됩니다. 디자이너가 글쓴이의 의도를 파악하지 못하면 보이는 대로 배치할 가능성이 높습니다. 그리고 다시 "어떤 내용인지 설명해줄 수 있어?"라고 물으면 대답 못하는 디자이너가 많습니다. 타이포는 정보가 있어야 전달할 수 있고 창구가 있어야 노출할 수 있고 글의 맥락(전략)이 있어야 전파 즉 공감이 됩니다. 디자인은 수단일 뿐이예요! 그런데도 디자이너가 디자인을 못 한다면 이유가 있습니다.
잠깐만! 글의 의도는 설명해 주셔야죠!
보이는데로 하라고요?
급한 건 알겠는데, 처음부터 전달 세팅이 되어있어야 불필요한 시간 낭비를 안 합니다. '일단 배치하고 이상하면 수정시켜' 이게 뭔 짓입니까? 시키는 사람이 완전 비효율적으로 일을 하고 있었고, 디자이너가 못 버티고 나가면 디자이너의 끈기 탓을 하는 거죠. 실상 범인은 따로 있습니다. 디자이너가 말도 안 되게 수시로 나가면 디자이너 문제가 아니라 시키는 사람이 문제입니다. 그래서 빨리 캐치를 해야합니다. 이건 글쓴이, 전달자(UX라이터)가 해줘야 맞습니다. 그리고 전달을 개똥같이 받았을 땐 참지말고, 순서대로 다시 알아먹게 해달라고 요청을 해야합니다. 하청을 자청하고 있어요.
따라 하세요! Say "장난하는 것도 아니고 다시 제대로 정리해서 주세요!" 우린 정말 제대로 일하고 있는 거 맞습니다. 보고는 문서로 받아야 합니다. 자기들 편하고 싶어서 구두로 말하는 것은 협력자를 대하는 자세가 아닙니다. 생각보다 디자이너가 해야할 일이 많습니다. 이런저런 일까지 떠 않으면 오래 버티질 못 합니다. 감당할 수 있는 것을 시켜야 맞는거죠. 이게 잘 돼야지 디자이너가 타이포 배치할 준비를 마칩니다!
[전달하는 목적이 있는 것] = [텍스트 역할이 부여되는 것]
타이포의 역할은 정보를 전달하는 데 명확한 목적이 있다. (정보=전달)
타이포의 역할은 특정 페이지에 노출시켜 여러 사람에게 보이게 한다. (창구 =노출)
타이포의 역할은 맥락을 이해하고 전략적으로 배치해 공감을 불러 일으킨다. (맥락=공감)
그럼 문서를 어떻게 준비해야 디자이너가 잘 알아듣고 배치하냐, 잡지나 서적 그리고 PC나 모바일에 있는 글을 볼 때 불편함 없이 읽은 경험이 있다면 그 타이포는 제대로 된 규칙이 존재합니다. 그래야 미관상 디자인 실력이 부족해도 읽기 편하다는 느낌을 느끼지 못할 정도로 자연스럽게 준다면 잘한 거죠. 그렇다면 어떻게 해야 전달을 잘할 것인가?
타이포를 배치하다보면 제일먼저 크기 부터 지정합니다. 크기에 대한 정확한 정답은 없지만, 웹 서핑을 하다보면 사이트에서 평균적으로 사용된 크기와 역할 구조를 파악할 수 있습니다. 아니면 회사 내부의 디자인 시스템 만들어 기준을 정해야 합니다.
스케일 카테고리 (Scale category) 종류와 크기
구글 타이포 가이드Heading(큰 타이틀) : 큰 제목 타이포 20 ~ 96
Subtitle(서브 타이틀) : 소 제목 타이포 14 ~ 16
Body (바디) : 본문 타이포 14 ~ 16
Button (버튼) : 버튼 타이포 14
Caption (캡션) : 주석 타이포 12
Overline (오버라인) : 설명 타이포 10
위의 이미지는 기준은 구글에서 수많은 데이터를 통해 나온 텍스트 역할과 사이즈 입니다. 이것도 사실 정답이 아닌 기준이 되는 역할과 크기라고 보면 되겠습니다. 저는 이렇게 통계적으로 수치가 나오면 항상 의문점을 가집니다. 단순히 구글이라서 구글이 시키는데로 따르면 위험합니다. 하지만 회사 소속의 디자이너라면 회사 핏에 맞춰 디자인을 해야하기 때문에 가이드가 단연 편할 수 밖에 없습니다.
만약 회사가 아니면 안되는 상황이 오게 되었을 땐? 어쩌실거죠? 그래서 디자인은 수단으로서 이용해야 합니다. 어떤 기준에 의해 무의식적으로 잠식 당하면 디자인 위로 올라선 주인이 될 수 없습니다. 즉 저것들을 가지고 놀지 못하는거죠. 그저 픽셀에 맞추는 디자인만 하시게 되실겁니다.
H1은 두께는 왜? Light를 쓰고 / 크기는 왜? 96까지 쓰는가?
무작정 아무의미없이 그냥 따르는 가이드는 엄청난 독입니다. 사실 시각적 관점을 제대로 알아야 저런 논리가 이해가되고 맞춤 조립처럼 디자인을 하실 수 있습니다. 시각적 관점이 없다면, 아래의 공식을 따라해 주시면 됩니다.
[3가지 공식]
1. 텍스트 조합 : 큰 타이틀은 H6, 큰 타이틀의 설명 글은 오버라인을 써야지!
2. 텍스트 강조 : H6이 큰 타이틀, 강조, 미디움을 써야지!
3. 텍스트 비강조 : 오버라인은 설명 글, 비강조, 레귤러를 써야지!
위에 이론이 납득이 되면 텍스트 구조마다 강조와 비강조가 왜 존재하는지 이해가 되실거며, 역할과 구조를 반드시 이해하고 배치하는 방식이 필요하게 될겁니다.
타이포가 하는 역할
제목과 본문, 설명의 명확한 구분큰 제목 (음식역할) & 오버라인 (접시역할)
소 제목(음식역할) & 본문 (접시역할)
위의 이미지로 보니 조금 이해가 되실까요? 보통 디자이너가 실수하는 경우는 텍스트의 역할과 전달하는 순서를 잘 모르기 때문에, 이 부분만 정확히 알면 불필요한 배치를 안 하게 되며 시간 낭비를 안 합니다. 그리고 어떻게 하면 잘 활용하는지 단번에 캐치할 수 있죠!
타이포의 간단한 구조 이해
텍스트를 음식과 접시에 비유모든 글의 시작은 머리말이 있고, 끝에는 머리말에 대한 설명이 있습니다. 그래서 제목만 달랑, 본문만 달랑 오는 경우가 없습니다. 대부분 글에서는 Heading(큰 타이틀)은 Caption(캡션)과 Overline(오버라인)이 따라다니고, Subtitle(서브 타이틀)은 Body(본문)가 항상 붙어있습니다. 그래서 저는 이것을 접시 위에 있는 음식이라 표현합니다. 오버라인이 큰 제목을 받쳐줘야 하는 것처럼 텍스트마다 자기가 맡은 역할들이 반드시 존재합니다. 여기까지만 이해해도 타이포의 역할과 구조의 활용법을 익히셨을거라 생각됩니다.
타이포를 가지고 놀 준비를 하셨다면 이 형태를 좀더 단단하게 하는 핵심 중에 핵심! 타이포 그룹핑에 대한 내용은 UXUI 도장깨기(3)편에서 만나봅시다! 긴 글 읽느라 수고하셨습니다!
글쓴이 : 바이블
