깔끔한 UX UI 디자인을 위한 간단한 방법 6가지

---

안녕하세요. 기깔나는사람들의 디자인을 맡고있는 서네입니다.

오늘은 제가 디자인하면서 도움이되었던 부분, 그리고 놓치면 안되는 내용들에 관해 설명드리려고 합니다.

당연하다고 느끼실 수 있지만, 한번 정리하는 느낌으로 읽어보시길 추천드립니다!

 

 

1. 정보의 위계를 설정하라!

UXUI에서 가장 중요한것은 어떤내용을 가장 먼저 사용자에게 노출시킬 것 인지 정리하는 것입니다.

어떤 콘텐츠를 눈에 띄게 보여줄 것인지? 어떤버튼을 빠르게 클릭하게 만들것인지? 에 따라 디자인이 달라집니다.

그런 다음, 중요도에 따라 강약관계를 설정하면 됩니다.

 

시각적으로 강약을 주기위해서는 다양한 방법이 있습니다.

 

 

1 - 명도대비

색상의 어둡고 밝은정도. 명도대비가 심할 수록 주목성이 강해진다.

 

2 - 크기대비

상대적으로 크기가 큰 것이 작은 것에 비해 더 잘보인다.

 

3 - 채도대비

색의 탁하고 맑은 정도, 채도가 높을수록 잘 보인다.

 

여기서 주의할 점은,

상대적으로 낮은 위계의 정보값들이 희미하게 보이지 않도록 유의해야합니다.

 

위 이미지를 예시로 보면 좌측보다는 우측이미지의 가독성이 좋기때문에 내가 원하는 정보를 빠르게 확인할 수 있습니다.

좌측이미지의 경우에는 상품명 >할인율=가격=리뷰

우측이미지는 상품명>가격>할인율>리뷰 순으로 정리했습니다.

 

 

2. 포인트 색상을 중구난방 사용하지 마라!

 

제가 이전에 작업했던 것들을 되돌아보면 한가지 공통점이있습니다.

바로 모든 UI요소에 포인트 색상을 사용했다는 것인데요...

 

 

대학교 과제물 (시안)

사실 저 당시에는 특히 상단 앱바에 포인트색상을 사용하는게 유행이던 시기였습니다.

그걸 고려해도 상당히 많은 영역에 포인트색상을 두었습니다...

 

하지만 최근에는 이런 스타일을 보기힘듭니다.

트렌드가 바뀐 것도 있지만, 색상을 과다하게 사용하면 사용자가 쉽게 피로해집니다.

시선 방향이 이곳 저곳 바쁘니깐요..

 

 

해결방법은, 정말로 필요한 UI에만 포인트 색상을 주면됩니다. 

( 요즘에는 아예 무채색계열로 되어있는 모바일 웹도 많습니다! )

잡플래닛 메인

 

CTA버튼, 탭,태그,메뉴 활성화 시, 아이콘의 색상을 포인트색상으로 주는게 좋습니다!

 

 

 

3. 그림자 농도는 연하게!

 

그림자 효과는 머티리얼 디자인이 유행하는 이래로 ui디자인에서 흔히 쓰이는 꾸밈요소입니다.

그림자를 넣으면 배경과 컨텐츠사이의 공간이 생깁니다. 컨텐츠가 배경에서부터 띄워진 상태라고 보시면 됩니다.

따라서 강조하고싶은 컨텐츠에 넣으면 됩니다만, 너무 진한농도라면 급격하게 올드한 디자인이 됩니다.

 

중요한것은 은은하게 + 배경과 어울리게 입니다.

배경색이 무채색일 때는 그대로 그레이계열의 색상을 그림자로 채택하면 되지만,

배경색이 유채색, 높은채도인 경우에 그대로 그레이계열로 설정하면 어색해집니다.

 

위 이미지의 우측 그림자 예시처럼 배경색상을 섞어서 구성하면

훨씬 자연스러운 그림자를 만들 수 있습니다.

 

(선택된 색상에서 채도높고 밝은 쨍한 컬러로 바꾸고싶다면 컬러피커에서 ↗️대각선방향으로 이동해보세요!)

 

 

 

4. 패딩값을 충분히 설정하자!

 

이건 제가 작업하면서 항상 느꼈던 부분입니다. 패딩은 쉽게 여백이라고 생각하시면 되는데요.

( 겨울패딩할 때 그 패딩 맞습니다.)

어딘가 디자인이 옹졸하고, 2%부족한 것 같을 때.. 그때는 패딩값의 문제일 수 있습니다.

여백이 좁고 글자,이미지의 간격이 긴밀할 수록 답답한 디자인이 됩니다.

극단적 예시인 것처럼 보이지만, 간혹 디자인 하다보면 좌측과 같은 스타일이 나오기도합니다.

패딩을 충분히 주는 것을 염두에 두어 실수하지 않도록 해야합니다.

 

 

5. 색상코드 #000을 지양하라!

 

표현가능한 가장 어두운색, black = #000000 색상을 잘 사용하지 않는다는 것을 알고계셨나요?

개발자 도구(F12)를 통해서 현재 서비스 되고있는 웹,앱들을 잠깐 살펴보면

 

(좌측) 사람인 / (우측) 네이버

 

위와같이 검정색으로 보이지만, #000색상이 아닌 경우를 찾아볼 수 있습니다.

 

#000색상을 쓰지 않는 이유는 바로 배경색인 #fff와의 대비가 너무 커서,

눈에 피로도를 주기 때문이라고 합니다.

 

또한 전체적인 색상을 조화롭게 하기위해서도 조절할 필요가 있습니다.

손바닥으로 좌측 우측 가리면서 비교해보세요!

 

좌측엔 오로지 그레이계열의 색상을 사용했고, 우측에는 파란계열이 섞인 컬러를 사용했습니다.

사실 타이틀의 경우에는 굳이 파란계열을 섞지 않아도 되지만, 부가적인 내용으로 연한 텍스트 컬러를 사용하는 경우에는

너무 어색해보이지 않도록 조정해줘야 합니다!

 

 

 

6. 실사이즈를 확인하라!

마지막 6번째, 정말 중요한부분입니다.

이정도 크기면 괜찮을 것 같다고 생각해도, 막상 결과물을 보면 글씨 혹은 이미지가

너무 작거나 컸던 경험! 한번 씩 있지 않으신가요?

 

그래서 편집물의 경우에는 크기&색상을 확인하기위해 가인쇄를 합니다.

비슷하게 UXUI에서도 글씨가 너무 작지는 않은지, 확인해야합니다.

본문기준 모바일 폰트 사이즈는

14px~16px이고, 때떄로 10~13px의 사이즈들도 보이지만

10px미만으로 내려가면 안됩니다.

 

데스크탑 폰트 사이즈는

모바일 기준 1px~2px 크다고 생각하시면 쉽습니다.

가장 가독성이 좋은 본문 사이즈는 16~18px입니다.

본문보다 낮은 위계의 내용은 14px, 12px로 표현하기도 합니다.

다만 12px사이즈 미만으로 내려가면 안됩니다.

 

시안 완성 후에는, 꼭 해상도에 맞춰 확인해보시기 바랍니다!

 

 

 

마치며

우리가 UXUI디자인에 신경써야 하는 이유,

사용자는 좋은디자인은 당연히 받아들이고, 사소한 오류가 있는 디자인은 나쁘다고 생각합니다.

과장해서 말하자면, 옥에 티 있는 디자인은 그 서비스에 대한 신뢰도를 급격히 하락 시킬 수 있다는 뜻입니다.

 

이와 비슷하게, 좋은 디자인이 사용성이 높다고 생각하는 경향도 있다고 합니다. (심미적 사용성 효과)

좋은 디자인을 위해 더 찾아보고 분석해봅시다!