1. 다양항 색 금지
UI를 만들 때 일단 채색없이 흰바탕에 검은 글씨로 코드 작성
하이라이트 색사을 골라서 강조하고 싶은 곳에만 사용
예) 1) 버튼
2) 아이콘
3) 강조할 글자
4) 로고
2. 안쪽여백(padding)
padding 거의 모든 곳에 필요합니다.
3. 폰트는 제목용/본문용 2개만
폰트는 다양한 것은 필요없습니다.
제목용 굵은 폰트, 본문용 얇은 폰트 2개만 준비해서 사용합니다.
- 한글 폰트는 용량이 크기 때문에 로딩시간을 줄이고 싶으면 하나만 사용하는 것이 좋습니다.
4. 글자에 gradient
애플이 사용하는 gradient를 글자에 사용하는 것도 좋습니다.
5. 제목은 16px이상, 본문은 16px 이하
폰트 사이즈는 16px 기준으로 중요한 글자들은 중요한 것들은 굵고 크게 안중요하는 것들은 상대적으로 작게 하시면 좋습니다.
6. 자간간격 조절(letter-spacing)
자간간격 조절(letter-spacing)을 하면 좋습니다.
7. 이지미 폭, 높이 동시조절 금지
이미지는 고화질을 사용하는 것이 좋습니다.
width, height 동시에 변경하는 것은 좋지 않습니다.
동시에 변경하면 이지미가 찌그러질 확률이 높습니다.
이미지 사이즈를 변경하고 싶으면 width 하나만 사용하던가 background-image로 사이즈 조정하는 것이 좋습니다.
8. 안중요한 글씨는 회색으로
안중요한 글씨는 회색으로 상대적으로 중요한 글자만 강조 가능합니다.
9. 테두리는 옅은 회색부터
박스나 카드에다가 테두리나 그림자가 필요하다면 연한 회색부터 넣으면 좋습니다.
10. 그래픽 애셋 사용시 통일감이 우선!!
다운 받은 애셋과 현재 사용중인 애셋, 아이콘과 비교해서 선굵기, 채색여부, gradient가 있는지
이런 것들이 동일하면 사용해도 좋습니다.
11. 로고디자인
급한 로고디자인이 필요할시 폰트 다운사이트 들어가서 영문 폰트를 사용해서 영어로 적으면 좋습니다.(라이센스 확인 필요!!!)
12. 배경에 흰글씨 사용
사진위에 흰글씨 사용하면 좋습니다.(사진이 어두워야 잘보입니다.)
사진을 어둡게 바꾸려면 CSS 사용하면 좋습니다.
background-color: #0005;
background-blend-mode: darken;
13. 여백
한 곳에 많은 글자나 이미지 몰아서 넣지 않는 것이 좋습니다.
14. 디자인 참고사이트
글과 그림을 배치할때 어떻게 할지 모르겠을때 dribbble.com 등 사이트를 찾아보는 것이 좋습니다.
따라하면 표절 참고만 할것!!!!
출처 : https://www.youtube.com/watch?v=s8CdkSRnU1k&list=WL&index=35&t=48s
