brunch

You can make anything
by writing

C.S.Lewis

by 바이블 Dec 20. 2022

UXUI 도장깨기 (6)

텍스트 꾸밈 요소

https://brunch.co.kr/@2aab284ce7e94d2/20

안녕하세요! 바이블입니다. 여러 가지 하고 있는 일이 많아서 이번 조금 포스팅이 다소 늦어졌는데요. UI 도장깨기 (5) 탄에 이어 UI 도장깨기 (6) 탄에서도 타이포의 꾸밈 요소에 대해서 알아봅시다. 

* UI 도장깨기 (5) 탄을 읽고 오세요! 내용이 연결됩니다.




3. 중제목은 과하면서도 적당히 꾸며라! 

중제목은 대제목의 느낌만 가져와야 합니다. 대제목만 봐도 중제목 스타일이 떠올라야 하고, 중제목을 보면 대제목 스타일이 떠올라야 합니다. 하지만 외형 모양의 형태까지 가져오면 중제목의 느낌이 과해질 수도 있습니다.

대제목과 중제목의 교차점
서로가 서로를 기억하는 연결고리

위의 이미지의 중제목은 대제목의 컬러와 캡션으로 기억을 상기시켰습니다. 하지만 표현이 생략된 느낌입니다. 대제목 변형서체와 돌 텍스쳐 질감 표현이 들어가지 않았고 오버라인에 빛 효과도 생략되어 있습니다. 그 대신 컬러는 거의 그대로 쓴 것처럼 느낌이 들죠. 중제목 텍스트 구간에서는 주목하는 것도 물론 좋지만, 글을 읽는 구조로 빠져야 하기 때문에 제목까지는 괜찮으나 기존 서체에서 텍스트 형태가 변형이 되면 가독성이 안 좋아지기 때문에 절제를 해야 합니다. 


만약 대제목과 같은 꾸밈 가짓수로 중제목을 꾸며준다면 어떻게 될까요?


중제목도 변형체를 쓰게 된다면
제목에 변형체 적용

여기서 아셔야 할 점은 디자인은 완성 자체가 없습니다. 보기 좋게 하기 위해서 어떠한 요소를 화면 위에 계속 때려 박으면 과해지기 마련입니다. 양보가 필요합니다. 가독성을 포기하고,  멋있음을 택할 것인가? / 멋있음을 포기하고 가독성을 택할 것인가? 끊임없는 고민과 갈등을 합니다.


제목은 글을 읽는 구조도 물론 좋지만, 주목도가 높은 구조이기 때문에 주목성은 곧 정체성이며 글보다는 이미지와 연결이 됩니다. 제목을 보고 '이것은 이런 내용이야!' 하는 글의 내용을 기억하는 형태보다는 '이것은 어떤 이벤트자나! '어떤' 즉 느낌, 분위기, 형태를 기억합니다.


아까 제목까진 꾸밈성을 더 줘도 괜찮다고 했죠? 


그래서 가독성을 살짝 포기하더라도 대제목과 느낌이 비슷한 변형체를 써서 이미지 정체성을 살리는 구조로 표현되니 이전 대제목의 텍스트 구조를 더 빨리 기억을 상기시킵니다. 하지만 여기서 더 과해지면 위험합니다. 그래서 제목을 꾸며줄 때 목적을 정확하게 정해야합니다.

오버라인의 글을 읽게할거냐, 이미지로 기억되게 할거냐

오버라인에 빛 효과를 주니 아슬하게 강조된 느낌입니다. 텍스트에 효과를 줬기 때문에 글을 읽는 구조가 아닌 이미지 형태로 기억됩니다. 사실상 내용이 많지 않기 때문에 다행입니다. 여기까지는 정말 나쁘지 않은 정도고 여기서 더 꾸며주는 형태로 가면 그때부턴 난리납니다. 그리고 편집을 하다보면 감각적으로 배치하는 습관이 있는데 텍스트 역할이 명확하게 떨어지는 구조가 아니라면 과감하게 빼야 합니다.


4. 중제목 구간 본문 텍스트는 정직하게 해라!

텍스트는 외형을 꾸미게 되면 가독성이 현저히 떨어지게 됩니다. 그래서 중요한 핵심 단어를 골라 컬러굵기 만으로 해결해야 합니다. 여기서 중요한 점은 본문에 컬러로 포인트를 주고 싶으면 컬러만 써야 합니다. 가뜩이나 내용량이 많은데 컬러, 굵기, 크기 강조를 너무 과하게 적용한다면 글이 지저분해 보이고 읽을 때 방해만 됩니다.


중제목 안에 본문 텍스트는 꾸미면 큰일난다.

중제목 기울기를 줘서 더 꾸몄습니다. 내용이랑 상대적인 차이가 나야지 구분이 됩니다. 내용 텍스트는 단가짓수를 따지면 거의 안들어간 수준이죠.



꾸밀때엔 텍스트가 아닌 주변값을 꾸며야한다.

텍스트를 정리하고 다 꾸미고나면, 배경이 남습니다. 보통 텍스트와 배경을 마구잡이로 동시에 꾸미는 디자이너가 많습니다. 디자인을 많이 어렵게 하시더라고요... 이렇게 배치해야 디자인이 참 쉬워지는... 비주얼은 뭐... 프리스타일로...


 짠..! 완성
즐거운 디자인 작업과정

디자이너마다 텍스트의 배치나 비주얼을 풀어내는 스타일이 다릅니다. 저는 무조건 내용이랑 개체 위주로 보여야 한다는 주의기 때문에 무조건적인 정답은 아닙니다. 그냥... 저는 이렇게 한다구요... 댓글로 맞고 틀림을 따지는 분들이 있어서 하는 얘기입니다. 틀리다고 생각하는 분들은 그냥 다른 방식으로 하세요. 왜 굳이 시간 아깝게 제 글을 보세요. (저리가요! 훠이 훠이~)


5. 내용은 진심을 담아 사용자에게 아주 쉽게 전달해라!

폰트는 그저 도구일 뿐, 글의 흐름을 어떻게 할 것 인지 많은 고민을 해야 합니다. 3자의 입장에서 봤을 때 글만 봐도 이해가 단번에 되어야 합니다. 정말 군더더기 없이 깔끔하게 배치해도 무슨 내용인지 이해가 안 되는 경우가 많습니다. 사용자의 수준을 생각하지도 않고 있어 보이려 어려운 용어만 냅다 쓰게 된다면 내용을 작성하기 이전에 기획의도에 벗어난 결과물이 만들어집니다. 항상 사용자 입장에서 처한 상황에 대한 이해를 하려는 노력이 필요합니다. 


6. 비주얼 배치 이후에 한번 더 브리핑을 하는 시간을 가져보자!

UX 퍼소나를 UX 설계 후 단순히 정리하려고 도식화 표를 그리는 것에 끝내지 말고, 퍼소나 속 인물이 내가 되어 해당 페이지를 이용하는 상태에 실제 시뮬레이션을 돌리는 것이 필요합니다.



간단한 맛보기용 텍스트 도장깨기 편은 끝났습니다. 끝났어도 추후에 내용을 이어서 포스팅할 수도 있습니다. 계획을 짜긴하지만 천성이 무계획성 인간이라 그날 한 두시간 정도 디자인 제작하면서 글쓰고 포스팅까지 하루만에 한다고 보면 될 것 같아요. 사실 텍스트 노하우는 이 내용말고 더 많습니다. 오조억개 정도 머릿속에 저장되어 있습니다. 이러나 저러나 디자인은 설명보다 제작과정과 결과물이 중요한거 아시죠? 다음 포스팅은 비주얼 도장깨기 편 기대해주세요!



글쓴이 : 바이블

작가의 이전글 UXUI 도장깨기 (5)
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari