UXUI 도장깨기 (5)
텍스트 꾸밈 요소
https://brunch.co.kr/@2aab284ce7e94d2/19
안녕하세요! 바이블입니다. UI 도장깨기 (5) 탄입니다. 저번 포스팅에서 텍스트의 우선순위를 알려드렸죠? 처음 UXUI 접하시는 분들이 생각보다 많고, 타이포에 관한 지식들이 조금이나마 채워드린 것 같아 기쁩니다. UX관점과 데이터를 통해 디자인을 풀어나가는 것도 중요하다고 생각하지만, 디자인의 '심미성' 또한 무시 못합니다. 디자이너라면 타이포의 역할을 분류하고 우선순위를 정해서 배치하는 것 까지가 기본입니다. 여기에서 비주얼 심미성까지 건드려야 제대로 된 디자이너라고 할 수 있습니다. 비주얼을 못 건드리면 디자이너라고 할 수 없습니다.
디자인 결과물은 당연히 보기 좋아야 합니다. 디자인으로 짧은 0.1~0.3초 순간에 의미가 전달되며 페이지 속 주목할 만한 매개체가 없는 경우 뇌리에 쉽게 사라지기 때문에 양질에 차이가 디자인에서 나옵니다.
사용자가 유입하는 첫 번째 과정은 수많은 데이터도 잘된 서비스도 멋진 제품도 고급 기술도 아닌 비주얼 배너로 초반에 유입률이 세팅이 됩니다. 네이버 홈에 배너 고작 하나 다는 것도 3000만원 이상이 드는 것과 마찬가지 디자인이 왜 중요하냐를 이해하게 되실 겁니다. 이것을 제대로 이해하는 기업일수록 비주얼 '시선'을 더욱 중요하게 생각합니다. 사소한 디테일 결정에도 인력이 투여되며 그룹을 정해 A/B 시안성 테스트를 즐겨합니다.
비주얼(그림)은 텍스트보다 이해가 훨씬 빠르고 효과적으로 단 시간만에 사용자의 관심을 사로잡습니다. 더 많은 트래픽과 클릭을 전환시키는데 큰 도움이 된다는거죠. 그렇기 때문에 텍스트도 더욱 빠르게 인식하기 위해 꾸며주는 것에 시간을 씁니다. 그것을 텍스트의 꾸밈 요소, 텍스트 꾸미기라고 부릅니다.
1. 텍스트 꾸밈 요소
꾸밈 요소는 말 그대로 텍스트를 꾸며주는 형태입니다. 꾸밈 요소는 제목에만 사용하는 것이 좋습니다. 꾸밈 요소가 들어간다는 건 그 내용이 중요하기 때문에 강조 차원에서 꾸며줍니다. 텍스트를 단순히 읽어야 하는 본문 형태는 UI 도장깨기 (1~4)까지의 스킬만 쓰셔도 됩니다. 아래의 이미지처럼 큰제목 일수록 꾸밈성을 더욱 강조하는 것을 볼 수 있습니다.
대제목 - 중제목 - 소제목
대제목이 꾸밈성이 강하다꾸밈성이 들어가야 하는 형태는 구조가 반복적으로 나오는 작은 소제목보다는 단일성 대제목이 어울리며, 일반 텍스트 보단 그림 텍스트 같게 해야합니다. 그 이유는 제목은 본문보다 텍스트의 내용이 적고 여백 공간을 많이 활용할 수 있어 배치의 자유도가 높습니다. 반복적으로 나오지 않은 단일성 텍스트가 꾸밈 요소의 주요 타깃이 됩니다. 본문처럼 텍스트 내용 양이 많을수록 꾸밈성보다는 통일성을 지켜야 합니다.
2. 기본배치와 텍스트 꾸밈 요소의 차이
글 느낌 vs 그림 느낌
위의 이미지는 기본 배치의 크기 차이, 굵기 차이, 색깔 차이, 우선순위 차이 정도만 준 상태입니다. 여기에서 꾸밈 요소가 적용될 때에는 텍스트를 하나하나 뜯어서 디테일을 건드려야 합니다. 디테일을 건드릴 때 글의 느낌보단 그림 느낌을 좀 더 줘야 합니다. 그래서 일반 서체보단 변형체, 일반 자간형태 보단 상식에 벗어난 자간을 세팅해야 하고, 한글 서체로 전부 통일되어 쓰는 거보다는 한글과 영문을 혼합해서 일반 텍스트 느낌을 피해야 합니다.
[꾸밈 요소의 가짓수]
1. 서체의 굵기와 크기(강조, 비 강조)
2. 우선순위 (컬러)
3. 서체 (변형체, 이텔릭, 영문, 한글)
4. 점, 선, 면 형태
5. 텍스쳐
하나의 공식처럼 텍스트를 꾸며줄 땐 텍스트 역할마다 1~5번째 가짓수를 많이 두면 화려해지고 적게 두면 심플해집니다. 대제목은 5개 전부를 쓰고, 중제 목은 3~4개, 소제목은 1~2개 정도의 가짓수들을 많이 쓰고 적게쓰는 형태라고 보면 됩니다.
3. 단일성 대제목 팍! 팍! 주목시켜라!
서체 변형체, 크기 차이, 컬러 차이, 돌 질감의 텍스쳐
변형서체 사용제목만 하더라도 Impact라는 변형이 들어간 영문 서체를 사용했습니다. 확실한 고딕이냐 명조냐의 차이는
세리프(명조) 같은 경우엔 돌기 부분의 Ascenber(어센더)의 스타일의 따라 정해지는 경우가 있습니다. 산세리프(고딕)는 Counter(센터), bowl(바울)의 스타일에 따라 정해집니다. 쉽게 말씀드리면,
대체로 빨간색 부분을 심하게 건드리면 세리프에서 변형된 세리프 서체가 됩니다. (Ascender, Loop, eye, Terminal)
대체로 분홍색 부분을 심하게 건드리면 산세리프에서 변형된 산세리프 서체가 됩니다. (Counter, bowl)
텍스트는 디테일 구조화가 되어있고 여러 가지 변형을 줄 수 있습니다.
Call of Duty 로고에 사용되는 글꼴 'Impact' Geoffrey Lee가 디자인함고로 Call of Duty의 Impact서체는 Counter와 bowl의 스타일이 많이 들어가 있기 때문에 완전한 고딕이라 보긴 어렵고 고딕 스타일의 변형된 서체라고 해야 맞습니다.
제목과 캡션은 짝꿍
캡션의 스타일 적용캡션 내용은 해당 페이지의 카테고리의 구조와 형식이 들어가는 게 좀 더 좋습니다. (Event, Up Date 등) 어떤 내용의 소재인가를 알려주는 것이 캡션의 역할입니다.
캡션에도 스타일이 들어가 있는 것을 볼 수 있죠. 캡션 같은 경우는 모서리 스타일을 주는 경우가 많습니다. 테두리가 선 하나로 채워있지 않고 중간에 선을 규칙적으로 지워 스타일을 줬습니다. 텍스트는 건드리지 않아서 가독성이 헤치지 않는 선에 스타일이 적용되었다는 것을 볼 수 있고 그래서 분위기가 자연스럽게 그림처럼 느낌이 납니다.
오버라인은 간단한 설명충 정도?
오버라인 스타일 적용오버라인은 제목에 대한 내용을 미리 선수 쳐 설명해주는 역할을 합니다. 하지만 본문의 내용처럼 구구절절 설명하는 느낌보단, 전반적인 흐름을 파악할 수 있게 용건만 전달해주는 느낌이 강합니다.
꾸밈 요소는 작은 구조 디테일을 놓치지 않습니다. 제목 구조로 들어오기 때문에 오버스러운 표현이 가능합니다. 그래서 이 자잘한 오버라인에도 스타일이 적용돼도 이물감이 안 듭니다. 하지만 주의해야 할 점은 텍스트 형태는 헤치지 않으면서 주변 값을 이용해야 합니다. 텍스트를 변형시킨 것이 아닌 캡션은 모서리 테두리에, 오버라인은 그림자에 효과를 주었습니다.
큰 제목은 자신에게 스타일을 적용해도 괜찮지만, 작은 제목과 내용들은 주변 값을 이용해서 꾸며야 합니다. 이것만 잘 아신다면, 큰 제목 구조에서 꾸밈 요소에 대한 이해가 어느 정도 되었다고 보시면 되겠습니다.
UI 도장깨기 (5)는 내용이 길어질 것 같아서 큰제목 구조만 설명했습니다. 이어서 UI 도장깨기 (6)에서도 꾸밈 요소에 대한 이야기를 이어가겠습니다. 읽어주셔서 감사합니다.
글쓴이 : 바이블
