UX/UI 디자인 기초 가이드

[ 앱 ui 10가지 원칙 ]

1. 폰트
   - 폰트 사이즈는 최소 12 폰트~ 최대 32 폰트 이하로 사용하는 것이 좋음
   - Android : 최소 12 폰트 ios : 최소 11 폰트
2. 아이콘
   - 아이콘은 통일감 있게 디자인 (아이콘의 굵기 / 라운드 / 채울 건지 라인만 사용할 건지)
   - 웹 같은 경우 8의 배수로 맞추지만 모바일은 범용성을 위해 4의 배수로 사용하기도 함
   - 아이콘은 3D 느낌이 나는 공간감 있는 디자인 보다 직관적이고 평면적인 디자인이 가독성 있음
   - 삼각형 / 원 / 네모는 같은 사이즈지만 무게중심이 다르기 때문에 시각적인 보정이 필요하다. (원하고 네모 크기, 플레이 버튼)
   - 아이콘 같은 경우 비활성화 / 활성화할 때를 고려하여 디자인 
3. 하단 내비게이션
   - 내비게이션 아이콘은 직관적이고 텍스트가 있어야 함
   - 내비게이션 아이콘은 5개가 넘지 않아야 함 (넘게 되면 복잡하고 선택하기 어려움)
4. 접근성 폰트 컬러
   - 4.5 : 1 이상의 컬러 활용
5. 콘텐츠 간의 여백
   - 여백은 넓고 여유롭게 (가독성 및 접근성 고려)
   - 텍스트의 행간 / 문자 간격
6. 콘텐츠 간의 그룹
   - 컨텐츠간의 영역을 주기 위해 라인으로 구분
   
7. 버튼
   - 사용자의 손가락 터치를 고려하여 버튼의 사이즈를 디자인
   - 버튼의 계층구조를 고려하여 디자인
8. 계층 구조
   - 중요도에 따른 버튼의 계층 구조 (가시성)
   - 폰트의 굵기 및 사이즈로 계층 구조

[ Button 가이드 ]

• 버튼의 가시성
  - 버튼마다 우선순위가 있기 때문에 우선순위에 따라 가시성의 차이를 두어 디자인이 필요

버튼의 가시성 예시

1) 가시성이 높은 버튼
- 사용자가 쉽게 누를 수 있도록 눈에 띄게 디자인
- 강조색인(Primary, Secondary, Tertiary)과 브랜드 색을 주로 사용
ex) 로그인, 확인, 작성, 전송, 제출, 팔로우, 등록, 구매 등

 

2) 가시성이 보통 버튼
- 눌렀을 때 영향이 작은 평범한 버튼 잘 보이지만 튀지 않도록 디자인
ex) 공유, 도움말, 설정, 이전, 취소 등

 

3) 가시성이 낮은 버튼
- 누르지 않았으면 하는 버튼
- 사용자가 분명한 목적을 가지고 접근했을 때 보이는 강도로 디자인
ex) 취소, 서비스 탈퇴, 멤버십 해지, 로그아웃 등

 

• 버튼의 상태
  - 모바일 버튼의 상태는 기본 (Enabled) / 눌림 (Pressed) / 비활성화 (Disabled)
  
  1) 기본 (Enabled)
  - 클릭할 수 있는 버튼의 기본 상태(Normal)
  
  2) 눌림&활동 (Pressed&Active)
  - 버튼이 클릭된 상태
  - 기본상태보다 더 어두운 색을 사용하면 물리적으로 눌린 느낌을 줌
  
  3) 비활성화 (Disabled)
  - 클릭할 수 없는 버튼의 상태
  - 가시성이 낮아지도록 콘텐츠와 배경 색에 연한 회색조를 사용하여 비활성화된 느낌을 줌
  
  
• 버튼의 스타일
  - 버튼의 가시성에 따라 Filled (Solid) / Tonal(Tinted) / Ghost (Outlined) / Subtle
  
  1) Filled (Solid)
  - 배경 색이 채워진 스타일
  - 가시성이 높으며 중요한 역할에 사용
  ex) 등록, 로그인, 확인 등
  
  2) Tonal(Tinted)
  - 연한 배경 색에 채워진 스타일
  - 가시성이 높은 편이며 배경색에 투명도가 적용
  
  3) Ghost (Outlined)
  - 배경 색이 없이며 테두리만 있는 스타일
  - 가시성이 높고 Hover 시 반전되게 배경 색이 채워지는 인터랙션이 주로 사용
  ex) 공유, 도움말, 취소 등
  
  4) Subtle
  - 배경 색과 테두리가 없는 스타일
  - 가시성이 보통이며 배경 색과 테두리가 있어도 아주 연하게 디자인
  

Subtle 예시

 

• 버튼의 크기 종류
  - 버튼의 크기는 Small, Medium, Large 3단계
  - 버튼의 크기가 정해져 있어야 일관성이 떨어지지 않고 유지보수 하기가 편하며 한 가지 버튼으로는 모든 케이스를 대응하기가 힘듦 (반응형 고려)
  

버튼의 크기 종류 예시

• 버튼의 높이와 너비
  - 데스크톱의 기준 :  웹 접근성 지침에 따르면 최소 44 x 44 픽셀 이상
  - 모바일 / 태블릿 기준 : IOS → 44x44 pt  AOS→ 48x48 dp
  - 버튼의 크기에는 통일성을 부여하기 위해 너비를 고정
  - 너비 = 콘텐츠 크기 + 좌우 패딩
  - 너비가 지나치게 짧아지는 걸 막고 싶다면 최소너비 지정(min-width)