brunch

라이킷 33 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 바이블 Dec 01. 2022

UXUI 도장깨기 (3)

타이포그래피 그룹핑

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

UXUI 도장깨기 (2)

타이포그래피 | https://brunch.co.kr/@2aab284ce7e94d2/5 안녕하세요! 바이블입니다. UI 도장깨기 (2)탄을 가지고 왔습니다! 지난 포스팅에서 말한 내용들이 까먹었다면, 참고해주세요! 다른 포스팅은 UXUI 부

brunch.co.kr/@2aab284ce7e94d2/11

안녕하세요! 바이블입니다. UI 도장깨기 (3)탄 입니다. 타이포를 배치방법을 알면 디자인에 대해 두려움이 사라지실 겁니다. 보통 UI 인터페이스 지식을 습득하고 써먹지만, 이론이 부족하면 레이아웃 배치 방법에서 받쳐주지 못할 때 있습니다.

세월이 갈 수록 비전공자 채용은 많아졌지만 뽑아놓고 후회하는 경우가 생깁니다. 그 이유는 기획자가 SB를 작성해서 주면 대충그린 것과 그대로 똑같이 해온다면서 디자이너들의 창작능력에 실망하는 경우가 생깁니다. UX 지식만 채우려고하는 것이 크기 때문에 감각이 엄청나게 떨어지고 있는 사실을 발견했습니다. 머리로는 알겠는데, 손이 안 따라주는거죠. 표현해야하는 디자인 실력의 갭차이가 너무 나고 있습니다. 큰일이죠. 같은 배치라도 타이포를 어떻게 쓰느냐에 따라 완전 달라지는데요.

앉아서 코푸는 형식의 타이포 활용법! 너무 궁금하지 않나요? 같이 알아봅시다!

4. 타이포 그룹핑

타이포를 가지고 놀고싶으면 그룹핑을 잘해야 합니다. 2019년 부터 아마 제 수강생이라면 저한테 배웠을 겁니다. 제 수강생이 디자인을 잘하는 이유는 텍스트의 작은 디테일부터 가르쳤다고 보면 됩니다.

그룹핑이라는 단어를 이미 알고 있으신 분도 계시겠지만, 처음 시작을 하시는 분들도 계시기 때문에 기초부터 알아봅시다. 그룹핑은 각 집단마다 특성을 파악하고 유사한 것들 끼리 묶고 분류하는 것을 말합니다.

타이포 그룹핑처럼 그룹핑 앞엔 '타이포'이기 때문에 타이포의 역할마다 특성을 분석하고 분류를 해야합니다. 더욱 쉽게 말하면, 타이포를 그룹핑하면 됩니다.

그룹핑 이해

1. 그룹핑은 분류에 따라, 역할에 따라, 집단에 따라, 조직에 따라 그룹을 시킨다.
2. {대 [중 (소)]} 공식을 외우면 편하다.
3. 모든 단락에는 제목과 제목에 대한 설명이 있다.

5. 그룹핑을 잘하면 허점을 찾기가 상당히 쉽다!

(사례) 원티드 '홈' 부분

왼쪽 (원본), 오른쪽 (바이블 교정)

오른쪽이 시선이 가는 이유 그룹핑이 확실하기 때문 (조직의 이해)

실무 작업물이라고 해서 엄청 대단한 작업물을 만들어 내는 것은 아닙니다. 이렇게 만들어 놓고 99% 대부분 포트폴리오로 첨부할 때 어딘가 부족해 보여서 교정을 반드시 합니다. 여기서 가장 큰 문제는 행간일 가능성이 농후합니다. 행간이 엉망인 디자이너들이 많습니다. 보통 비전공자에게 많이 보이는 현상이죠. 그래서 대부분 어디다 둘지 모르기 때문에 행간을 가운데를 주는 습성이 있습니다. 여기서 실력이 드러납니다. (브런치에 쓰는 글은 간단하게만 풀 예정입니다.)

"아 그거? 누가 몰라? 나도 알고 있던 거야~" 라고 하지만 저처럼 설명한 디자이너는 한 명도 본 적이 없습니다. 이건 정말 자부합니다. 2년 전부터 가르쳤던 방법입니다. 타이포 천일야화 안그래픽스 저자 송명민 교수님께 2012년도 타이포 수업 듣고 배워서 터득했습니다. 저도 그냥 만들어진 것이 아닌 뛰어난 스승 밑에서 배움의 과정이 있었기 때문에 이런 근거들을 스스로 만들 수 있게 되었습니다.

아무튼 그룹핑을 알면 감각이 없거나 기본만 칠 줄 아는 비전공 디자이너도 좋은 배치와 허점을 쉽게 찾을 수 있습니다. 사실 위의 원티드 정도면 양호한 편입니다. 더 엉망인 실제 UI도 많습니다. 그룹핑을 똑같은 행간 크기 대로 배치한다면, 그 UI 디자이너는 기본적인 집단과 역할에 대한 지식이 없는 것이라 보면 됩니다. 그래서 디자인을 잘한다와 못한다를 구별을 쉽게 할 수 있습니다. 지식만 잘 알고있어도 그룹을 잘못 분류하면 정말 엉성하게 디자인이 됩니다. 그래서 훈련이 필요합니다.

조직을 이해하면 텍스트의 의도까지 쉽게 파악함 (UI가 책임져야 할 사안)

모든 배치는 완벽에 가까운 척 하는거지, 100% 완벽하지 못한다.

왼쪽 한 3초 정도 보다~ 오른쪽 시선에 계속 꽂힌다

위의 이미지로 단번에 이해할 수 있습니다. 왼쪽 잠깐 보았다, 오른쪽 시선에 계속 머문다는 것을 느낄 것이죠. 캡션과 큰 제목 사이 행간이 다소 타이트하지만, 절대 오른쪽에서 왼쪽으로 시선이 머물지 않을 것 입니다. 텍스트를 보게 하는 것, 빨려 들게 하고 거기에 집중하게 합니다. 그룹핑 정말 중요합니다.