토이프로젝트를 혼자 진행하면 디자인의 중요성을 계속해서 느끼게 됩니다. 아무리 좋은 기능을 하는 사이트여도 눈에 들오지 않으면 사용하기 불편할 수밖에 없습니다. 그래서 디자인의 기초를 공부하면서 배운 팁을 공유하고자 합니다.
1) 여백
여백은 넓게 잡고 서서히 줄여가면서 디자인하는 편이 좋다.
펼치기가 있는 컴포넌트에서는 상보다 하에 여백을 더주어서 확실한 그룹핑을 해준다.
추천검색어 컴포넌트에서는 추천되는 텍스트간에 여백을 확실하게 주어서 터치, 클릭에서 오류가 없게한다.
카드UI에서는 상하단에 충분한 여백을 주어야 답답한 느낌을 지울 수 있다.
여러단으로 되어있는 썸네일은 단끼리 충분한 여백을 주어야 썸네일과 텍스트가 그룹핑이 가능하다.
텍스트UI(배경컬러가 없는 UI)에서는 여백의 크기로 그룹핑할 수 있고 충분한 여백을 주어야한다.
타이틀, 본문, 버튼처럼 서로 그룹핑이 필요한 항목끼리는 여백을 충분하게 주어야한다.
요약 : 여백은 충분하게 하고 상하 여백의 차이로 그룹핑이 가능하다.
2) 폰트
폰트 디자인의 역할은 내용에 관심이 가도록하는 것이며 화려함보다 심플해야한다.
색 굵기를 여러개를 쓰지말고 1가지만 이용해서 눈에 잘보이도록 계층구조를 나눈다.
글이 3줄을 넘어가면 좌측정렬을 통해 글의 시작점을 찾기 쉽도록한다.
포인트컬러를 사용하는 곳은 정말 정말 중요한 곳에만 사용한다 절제할수록 좋다.
폰트는 계층구조를 가져야하고 중요도를 굵기, 색을 통해 나타내어 시선분산을 막는다.
폰트스타일은 일관되어야한다. (영문+숫자 : 1개, 한글 : 1개 또는 영문+숫자+한글 : 1개)
폰트굵기는 많이 써야 3개 보통은 2개만 사용한다.
폰트는 잘보이고 크게하며 모바일화면은 실제 모바일 통해 접속해가면서 비교해야한다.
요약 : 폰트 굵기는 2~3, 스타일은 1~2, 포인트 컬러는 최대한 절제, 화려함보다 심플함
3) UI모바일
텍스트 1배수 12pt 2배수 24pt이상으로 한다.
버튼은 터치를 고려해서 항상 크게 디자인한다.
아이콘은 통일감을 주어서 디자인한다.
접근성 컬러는 시각적 불편을 생각해 4.5:1 이상으로 한다.
round는 통일하여 사용해야 사이트이 분위기가 통일되어 보인다.
계층구조(버튼, 폰트)를 사용해 디자인하며 버튼의 경우 한번에 여러개가 나올 수 있기에 7개정도 중요도에 따라서 만든다.
하단네비게이션은 많아야 5개의 아이콘을 사용해 만들고 최대한 대중화된 아이콘 모습을 사용한다.
컨텐츠간의 그룹핑을 필수이며 여백을 충분하게 주어야한다. (모바일은 스크롤 한번에 수백픽셀을 움직인다)
모바일은 컨텐츠를 크게 크게 디자인해야 집중도가 높아진다.
요약 : 통일된 디자인, 크게 크게 디자인, 여백은 항상 충분하게, 스타일은 통일
혹시 이글을 보고 더욱 자세히 알고싶거나 실제 적용하여 디자인하는 모습을 보고싶다면 아래 유튜브 채널을 강력추천합니다.
https://www.youtube.com/@UXUIDesign
