디자인 강의 정리
etc
스프린트 부트캠프를 시작하면 부트캠프 강의뿐만 아니라 코드잇에서 제공하는 모든 강의를 들을 수 있다. 그래서 평소 1인 개발을 하면서 궁금했던 디자인 강의를 들어 보았고, 그 내용을 정리해 보았다.
디자인의 기본 원칙
- 일관성 지키기
- 중요도에 따라 구분하기
- 기능에 따라 영역 나누기
레이아웃
레이아웃에서 중요한 기술은 세 가지다.
- 여백
- 정렬
- 크기
기기별 권장 기준 해상도는 다음과 같다.
- 데스크톱: 1440px
- 태블릿: 978px
- 모바일: 375px
실제로는 다음 범위를 커버할 수 있으면 된다.
- 데스크톱: 1280px ~ 1920px
- 태블릿: 768px ~ 1279px
- 모바일: 320px ~ 767px
즉, 페이지를 만들 때는 화면을 크게 영역별로 나누고, 기기 해상도에 맞는 기준을 잡아 주는 것이 중요하다.
폰트
- 색상 대비는 배경과 4.5 : 1 이상 확보해야 한다.
- 여러 줄일 때는 행간 150% ~ 180% 정도가 적당하다.
- 자간도 함께 고려해야 가독성이 좋아진다.
요소 크기 기준
- 텍스트
- 본문: 16px (14px ~ 16px)
- 약한 본문: 14px (본문 -2px)
- 제목: 20px ~ 80px (커질수록 변화 폭 확대)
- 아이콘
- 비율: 1:1
- 크기: 함께 사용하는 텍스트와 비슷한 크기
- 버튼
- 내부 텍스트: 16px 또는 18px
- 위아래 여백: 텍스트 크기의 1/2 ~ 1배 (8~16px)
- 좌우 여백: 위아래 여백의 1 ~ 2배 (16~32px)
- 기타
- 상단 네비게이션 바 높이: 72px (50~90px 사이)
정리하며
디자인 강의를 들으면서, 평소에 그냥 감으로 맞추던 부분들이 실제로는 기준과 원칙을 갖고 있다는 걸 알게 되었다. 앞으로 화면을 만들 때는 단순히 "보기 좋아 보인다"에 그치지 않고, 일관성, 중요도, 영역 구분을 항상 염두에 두고 적용해야겠다.