UXUI 도장깨기 (4)
텍스트 우선순위
https://brunch.co.kr/@2aab284ce7e94d2/15
안녕하세요! 바이블입니다. UI 도장깨기 (4) 탄입니다. 그룹핑을 알고 나서 하면 좋은 것! 텍스트 우선순위에 대해서 알려드리겠습니다! 텍스트의 우선순위를 알면 좋은 점은 아트보드 위에 아무 생각 없이 이리 갔다 저리 갔다 하는 시간을 단축시켜 줍니다. 그래서 디자인을 하실 때 막 꾸며내기 위해서 디자인을 하기보단 처음에 불편하더라도 전략적인 순서대로 탁탁 놓는 습관을 들어야 합니다.
* 주의
텍스트 우선순위는 손에 농익으면 작업 속도가 너무 빨라 기획자를 당황시킬 수 있습니다. 작업물을 빨리 작업해서 빨리 주면 좋지만, 주변 사람들이 다음 것을 할 준비가 안되어 있는 상황엔 분위기를 읽는 것이 필요합니다. 빨리 주는 것에 심취되어 있으면 물론 주변의 인정은 받겠으나 참다가 폭발하는 것처럼 다소 지치는 상황이 발생할 수 있으니, 본인만의 페이스를 찾는 게 중요합니다.
일은 연장선! 끝이 없다.
1. 우선순위
우선순위라는 단어를 많이 들어보셨을 겁니다. 우선순위는 일이 쌓였을 때 어떤 것을 먼저 처리해야 할지 갈팡질팡하는 상황을 안 만들기 위해서 차례나 위치를 정해 중요한 순서에 따라 우선순위를 나눕니다. 타이포를 설명해야 하는데 갑자기 왜 이것을 설명하는지 생뚱맞아 보일 수도 있는데, 일단 타이포를 대입하기 전에 보통의 업무에서는 우선순위를 어떻게 다루는 가?를 이해해야 타이포에 우선순위도 중요하다는 것을 깨닫으실 겁니다.
일에 중요도는 회사 내부에서 정하는 게 맞지만, 회사 내부의 조직(팀)과 팀원(사람)들이 한 둘이 아니라서 일을 이것저것 다량으로 받다 보면 혼란이 올 때가 많습니다. 다 중요한 것 같고 한꺼번에 끝내야 할 것 같고 개인적인 건지 아닌지, 업무인지 부탁인지 헷갈리는 경우 다급해서 업무를 순서 없이 처리하는 경우가 많습니다. 그래서 일정도 꼬이게 되고 마감일까지 일주일 내내 야근을 하며 하루하루를 힘들게 버티는 경우가 많습니다.
시간 매트릭스와 폴더 정리
그렇기 때문에 시간 관리 매트릭스를 만들어 회사에서 처리할 것과 처리하지 않아도 되는 것을 구분해야 합니다. 주어진 시간에 업무가 끝 이날 수 있도록 해야 하는 게 맞습니다. 야근을 한다는 건 좋은 것은 아닙니다. 이러나저러나 업무 효율성을 깡그리 무시하고 과도한 업무와 과도한 시간으로 일의 진전은 빨리는 되겠지만, 내부 상황은 썩어 문드러질 겁니다. 그래서 최대한 합리적이며 효율적인 업무를 할 수 있게 그림을 만들어 주는 게 서로한테 좋기 때문에 그렇게 된다면 내부 조직은 더욱더 탄탄해지고 끈끈해질 겁니다.
1순위 : 급하고 중요한 일 (회사)
2순위 : 급한데 중요하지 않은 일 (회사) = 급하지 않은데 중요한 일 (회사 or 개인)
3순위 : 급하지 않고 중요하지도 않은 일 (개인)
폴더 정리도 마찬가지 시간 관리 매트릭스 표에 따라 일관성 있게 만들고 관리하면 업무 처리하는 것이 수월해지고 속도도 빨라집니다. 이것을 상사가 관리해주거나 시시 때로 검사하는 것이 아니기 때문에 개인적으로 관리해야 좋습니다. 혹여나, 팀원들이 효율적이지 못한 방법으로 업무를 처리할 경우에는 계획안이나 가이드를 만들어 제안을 해주는 것도 서로한테 좋습니다. (같이 도와 좋은 근무 환경을 만들자고요..!)
2. 텍스트 우선순위
위의 근거대로 텍스트도 우선순위에 맞춰 전략적으로 접근하게 되면 팀 전체가 시간적인 여유가 생기고 서로한테 좋습니다. 그렇다면 어떻게 활용해야 하는지 알아볼까요?
카카오 텍스트의 타이핑 재료
위의 이미지는 카카오 사이트에 '카카오 문화'에 있는 내용만 긁어서 왔습니다. 오른쪽 이미지 처럼 텍스트를 잘 분류해서 줘도 뭔 말인지 알아먹을 수 있고 대체로 양호한 편에 속합니다.
하지만 디자이너들은 보통 이렇게 전달받음
무슨 내용이야..? 보통 기획자에게 문서를 전달받을 때 위의 이미지처럼 텍스트만 달랑 전달받았을 겁니다. 그나마 매너 있게 받았다면 PC나 앱 기획서로 받았을 겁니다. 텍스트만 달랑 전달받을 때 디자이너들은 많은 갈등을 겪습니다. 글을 몇 번 읽어봐도 내가 해석한 의도와 전달 방향이 다를 수도 있으니 내 마음대로 시작해도 될까? 이런 고민합니다.
'어떤 게 중요한 거지? 물어보면 괜히... 업무 파악 못했다고... 한 소리 들을 거야..'
감각대로 잘만 배치하면 물론 좋겠지만 분명히 저렇게 작업하면 수정을 반드시 해야 하는 상황들이 생깁니다. 너무나 알고 있고 무조건 일어날 상황입니다. 그렇다고 안 해갈 수도 없고... 단지 수정을 열 대번 한다고 해서 불만인 게 아니라, 애초부터 이해가 잘되게 제대로 줬으면 빨리 끝날 텐데 생각보다 디자이너도 시간 낭비하는 것을 굉장히 싫어합니다.
이런 상황이 계속 있다는 건 의도가 명확하지 않기 때문인데요. 사실상 기획자도 어떻게 나올지 모르기 때문에 우선순위까지 전달하지 않고 문서를 넘기고 땡처리하는 경우가 많습니다.
그래서 디자이너들은 마우스로 까딱까딱하면서 이게 맞을까? 저게 맞을까? 배치를 이랬다 저랬다 합니다. '내 머릿속에 원하는 게 있는데 맞춰보세요'와 마찬가지 텔레파시로 뭔가 통하듯 알아서 해줬으면 하는 바람이죠. 수수께끼를 풀어내듯 디자인을 하는 게 현실 모습입니다. 차라리 '이렇게 만들어!' 카피하는 게 편할 따름이죠. (안쓰러울 지경)
"앗! 여기 키워주세요! / 여기 잘 안 보여요! / 가운데로 몰아주세요! / 제가 원하는 게 이런 게 아니었어요! / 차라리 이런 스타일로 해주세요! 하지만 똑같은 건 싫어요! / 디자이너 맞죠? 이건 저도 할거 같은데요?" 등... 답답해서 나오는 말입니다. 실력을 무시하는 것이 아닌 디자이너의 프로페셔널하지 못한 모습에 실망하는 경우가 많아서 그렇습니다. (하지만 디자이너들은 마음에 상처로 남습니다.)
이러쿵저러쿵할 필요 없이 여기서 3가지 포인트만 신경 써서 기획자가 건들어 준다면, 간단히 해결될 문제입니다. 기획자도 이런 방법을 잘 모르기 때문에 그런 거죠. 이럴 땐 디자이너가 직접 가이드를 만들어 "이렇게 체크해서 적어주시면 이해가 더 잘될 것 같습니다!" 요청을 프로페셔널하게 해야 나중에 편합니다. 덜도 말고 더도 말고 딱 이렇게 만!
텍스트 역할, 중요한 순서, 단락별 강조와 비강조 체크 해주세요!
1. 텍스트 역할을 적어주세요! (텍스트 역할로 우선순위를 정할 거예요!)
2. 중요한 순서대로 체크해주세요! (중요한 순서로 우선순위를 정할 거예요!)
3. 단락별로 강조와 비강조를 체크해주세요! (강조와 비강조로 우선순위를 정할 거예요!)
계속 말하는 거지만 텍스트 전달받을 때 왼쪽 이미지처럼 글이 정리가 안 되어 있습니다. 오른쪽 이미지처럼 전달받을 때 쉽게 알아보는 방식으로 적는 것이 필요합니다. 글을 파악하는데 시간이 너무 걸리기 때문에 이렇게 가이드를 만들어 텍스트를 갈아 끼우는 식으로 돼야 작업하기 편하고 빨리 완성하게 됩니다.
기획자가 막연하게 [그룹] 패딩 값과 행간 값을 정하는 데 무리가 있고 캡션, 소제목, 본문의 크기도 잘 모르는데 대부분 정확한 수치를 못 적어낼 겁니다. 만약 그렇다고 한다면 어떻게 하라는 건데? 사실 비결은 아무것도 아닙니다. 딱! 텍스트의 역할, 중요한 순서, 단락별 강조와 비강조만 딱 이 3가지만 체크해줘도 어느 정도 글의 가닥이 잡힙니다.
[세심하게 전달하는 법 3가지]
1. 텍스트의 역할 : 캡션, 소제목, 본문
2. 중요한 순서 : 소제목 1, 캡션 2, 본문 3
3. 단락별 강조 비 강조 : 소제목 강조, 본문 비강조
세심하게 전달하는 법 3가지 (텍스트 크기와 두께는 대략적으로)
그래서 위 이미지처럼 전달받은 디자이너는 정확하게 텍스트를 파악해 쉽게 배치합니다. 뭐부터 접근해야 할지 우선순위가 시각적으로 보이기 때문이죠.
디자이너지만 우선순위 개념이 없어요...!
그럼 어떻게 하야하나요?
그렇다면 묻고 따지지도말고
딱 이렇게만 하세요!
3. 텍스트 우선순위 배치하는 법 5가지
첫 번째 타이포 역할대로 영역을 분류하기
두 번째 타이포 역할대로 크기와 두께 조정하기
세 번째 중요한 순서를 컬러로 구분하기
네 번째 내용이 많은 글줄의 마진 길이 정하기
다섯 번째 그룹핑과 행간을 정리하기
완성
이렇게 텍스트의 역할마다 크기, 두께, 색깔만 차이만 줘도 느낌이 확 달라집니다. 그리고 UXUI 도장깨기(1)에 나왔던 타이포 역할에 따라 구분해서 배치하는 이유가 우선순위 때문에 이렇게 쉽게 만들어진다는 거죠. 아트보드 위에 텍스트를 옮기자마자 줏대 없이 완성만 하려고 하면 망합니다. 계획대로 해야 빨리 끝납니다. 하지만 레이아웃은 정말 다양하고 수백가지인데 이거 하나만 배운다고 과연 잘 할까요? 이렇게 생각하실텐데 공식은 같습니다. 하지만 상황 훈련이 필요합니다. 계속 만들어봐야 실력이 늡니다.
아무튼 UI 도장깨기 (4) 탄까지 타이포를 쉽게 배치하는 방법에 대해 알려드렸습니다. 여기까지는 디짜의 '디' 정도만 가르쳐드렸다고 보면 됩니다. 아주 기본 배치만 보여드렸어요! 다음 UI 도장깨기 (5) 탄에서 타이포를 쉽게 꾸며주는 방법에 대해 알려드리겠습니다. 그럼 이번에도 긴 글 읽어주셔서 감사합니다~
글쓴이 : 바이블
