brunch

라이킷 34 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 나래박 Dec 11. 2023

UI 퀄리티를 높여주는
편집디자인 기본 5가지

주니어와 시니어를 구분짓는 디테일

안녕하세요, 오랜만입니다.

어투도 그때그때 다르고, 주제도 그때그때 달라서 혼란스러우시죠? 제 의식의 흐름이기 때문입니다.

오늘 주제는 프로덕트 디자이너들이 알아두면 좋을 편집디자인 기본입니다. 다들 회사에서 일을 하면 아시다시피 모두 같은 회사에서 일하고, 같은 가이드 아래에서 일하더라도 조금씩 심미적인 기준이 다릅니다. 하지만 UI가 다르더라도 유난히 더 구조적으로 탄탄해보이고 눈에 띄는 경우가 있다고 생각하는데요, UI의 디테일이 잘 챙겨진 경우에 그렇습니다.

프로덕트 디자이너가 설득을 잘 할 수 있는 방법에는 두 가지가 있다고 생각합니다.

첫째가 데이터를 근거삼기, 둘째는 디자인 잘하기입니다. 데이터 드라이븐으로 아무리 경험을 잘 설계해도 그걸 표현하는 디자인 능력이 없다면 소용이 없겠죠.

저 같은 경우에는 학교 다닐때에 배웠던 편집디자인과 타이포그래피 수업이 프로덕트를 디자인 하는데 도움이 많이 되었던 것 같아 그때 배웠던 몇가지를 공유하려합니다(저희가 많이 다루는 앱/웹의 근본은 책을 시스템으로 옮기는데서 시작되었기 때문인 것 같습니다). 비전공자 혹은 이제 막 시작하는 디자이너들에게 도움이 었으면 좋겠습니다.

너무 넓은 행간 지양하기

행간 자간은 특히 편집디자인의 기본이라고 할 수 있겠습니다. 하지만 자간은 프로덕트를 디자인할 때 잘 조정하지 않으니 행간에 대해서만 얘기해보겠습니다. 본래 행간은 자간보다 넓게 쓰는 것이 기본입니다. 긴 줄글을 늘여쓰는 것보다 문단이나 한문장씩 나눠서 내용을 띄워놓은 글이 더 읽기 편한 경험을 다들 해보셨을겁니다. 이 때문인지 행간을 굉장히 넓게 쓰는 디자이너들이 종종 있는데 이 역시 줄글을 읽는데에 있어 내용인지 흐름에 방해가됩니다(행간은 줄글의 길이와 비례해야합니다).

좌측은 타이틀 행간을 140%, 우측은 180%을 준 UI 입니다. “비전공자를 위한 UI퀄리티를 높이는 편집 디자인 기본”이 한 내용인데도 불구하고 지나치게 넓은 행간으로 읽는 흐름이 한번 끊어지게 됩니다.

행간은 글자의 weight와 size를 고려해서 정해야하며, weight와 size가 클수록 너무 크지 않게 가져가는게 좋습니다. 경우에 따라 다르긴 하겠지만 타이틀에는 120~140%, 본문 150~165%정도가 적당합니다.

상하 패딩을

좌우 패딩보다 많이 주지 않기

이 케이스도 은근히 많이 보이는 케이스입니다. 최초에 버튼을 만들때부터 저렇게(좌우패딩보다 상하패딩을 크게) 만들지는 않으나, 화면에 적용하면서 좁은 영역에 버튼을 넣게되는 경우에 위와 같이 width값만 조절해서 넣는 경우가 생깁니다. 보시다시피 상하 패딩이 더 높은 경우 형태적으로 불안해보입니다(사람은 보통 세로로 긴 형태를 볼때보다 좌우로 긴 형태를 볼 때 더 시각적 안정감을 느낍니다). 공간이 없어 버튼이 짜부시키는 것보다는, 좁은 영역에 적합한 더 작은 버튼을 사용하는 것이 좋습니다(애초에 디자인 시스템 만들때에 최소 좌우 패딩 규칙을 정해놓는 것도 좋습니다).

예시로는 버튼을 가져왔지만 거의 모든 영역 구성에 해당하는 내용입니다.

줄 글(body text)에 볼드 금지(!)

일을 하며 정말 많이 본 케이스입니다. 디자인적 완성도를 타이포의 무게를 올려서 밀도를 채우려는 방법인데 정말 좋지 않고, 사용자의 시각적 부담도 커집니다. 또 줄글에 볼드를 사용하게 되면, 상위 개념인 sub title이나 title에 더 강한 무게감을 줘야하기 때문에 화면 전반적으로 시각적인 부담이 커지고 당연히 눈이 피로해질 수 밖에 없습니다(과유 불급입니다).

쌩 블랙, 쌩 화이트 안쓰기

미술 실기를 준비하셨던 분들이라면 그림그릴때 이런 피드백을 들어보신 적이 있을 겁니다. 다른 작업들을 할때도 통용되는 이야기라고 생각합니다. 쌩 블랙, 쌩 화이트는 웬만하면 지양하는 것이 좋습니다. 시각적 피로도를 줄이기 위함입니다.

우측 예시는 영역안에서 사용된 컬러간의 명도차이가 매우 크기때문에 주목도는 높지만 시각적 피로도가 높습니다. 쓰지 않는 것이 좋고, 쓰더라도 적은 부분에 포인트로만 사용하는게 좋습니다.

각 내용들간 위계 명확히하기

카드 안의 내용들을 위계에 따라 뎁스를 나눈 이미지입니다.

가장 크게는 주 정보 영역이 되는 상단 영역과 부가적인 정보 영역이 되는 하단 영역으로 나눌 수 있습니다. 상단 영역안에서 전체 내용의 카테고리를 분류하는 태그영역과 실질적인 내용이 들어있는 Title+Body영역으로 나눌 수 있습니다. 또 당연하게도 Title+Body 영역에서 더 주가 되는 영역인 타이틀을 높은 위계로 나눌 수 있습니다. 이런 위계에 따라서 영역내 무게중심을 어디에 둘지 선택과 집중을 통해 시각적 밸런스를 잡을 수 있습니다.

우측으로 갈 수록 더 높은 시각적 무게가 필요합니다.

우측으로 갈 수록 영역과 영역간 간격이 좁아집니다(더 상위 군집일 수록 더 큰 패딩 값을 가져갑니다).

예시에서는 한 카드안에서의 위계만 담고 있지만, 더 나아가 한 화면 안에서의 전체 위계도 파악할 수 있어야하고, 그에따라 UI 구조를 잡을 수 있어야합니다. 때문에 이를 위해서 디자이너가 해당 화면이 우리 서비스에 있어서 어떤 의미인지, 어떤 플로우의 어느 단계에 해당하는 화면인지 서비스에 대한 명확한 이해가 필요합니다.

심미적인 기준이나 취향은 디자이너마다 다르지만, 취향과 무관하게 완성도가 좋은 UI를 위한 규칙들을 공유드렸습니다. 이외에도 추가적으로 생각나는 아이디어들이 있다면 댓글로 공유 부탁드려요.

keyword