📖 3-2 디스플레이와 픽셀, 배수
- 디스플레이 : 모든 디지털 화면
- 픽셀 : 디스플레이의 작은 칸
- 해상도 : 디스플레이의 선명한 정도
- 1배수 디자인 : 디자인 할 때 기준이 되는 사이즈. 1배(100%), 원본사이즈
- 디바이스별 픽셀배율, 해상도 확인하는 사이트 : 🔗 https://yesviz.com/viewport/
- 1배수 권장 사이즈 : 아이폰 375*812 / 안드로이드 360*800
" 1배수 디자인이 스마트폰에서 구현되는 과정 "
1. 1배수 사이즈를 디자인, 개발
2. 기기는 코드를 읽고 디자인으로 바꾼다음, 자기 배율만큼 확대, 축소
3. 기기 실제 해상도에 맞게 비세하게 조정 한 후 화면에 출력
📖 3-3 분기점과 그리드
- 분기점 : 해상도에 따라 각각 다른 화면을 보여주기 위한 기준점
768px 미만 : 모바일 화면
769 ~ 1024px : 태블릿 화면
1024px ~ : 데스크탑 화면
🔺 태블릿은 생략 or 모바일 분기점으로 통합하는 경우가 많음
🔺 데스크톱, 모바일 사용자 >>>>> 태블릿 사용자 / 개발 화면이 늘어나기 때문에 효율이 떨어짐
🔺 온라인, 교육 등 태블릿을 많이쓰는 서비스는 태블릿 화면도 작업함
- 그리드 : 격자, 화면에 디자인을 배치하는 가이드라인, 기둥. 일반적으로는 세로 방향 사용
💡 그리드를 사용하는 이유 : 규칙적으로 정렬하기 위해, 균형감, 완성도, 일관성을 위해
- 그리드를 만드는 방법 : 세로 기둥(칼럼)을 몇개를 둘지 정하기. 데스크톱 화면 기준 12개(12칼럼 그리드)
💡 12개인 이유 : 1, 2, 3, 4, 6, 8, 10, 12로 나눠서 유연하게 배치할 수 있어서 !
💡 내 디자인이 어색할 때 ! : 그리드를 활용해볼 것
" 자주 사용하는 그리드 "
960 12 칼럼 그리드 : 유닛 너비 (60) / 거터 너비 (20)
1200 12 칼럼 그리드 : 유닛 너비 (76) / 거터 너비 (24)
1440 12 칼럼 그리드 : 유닛 너비 (96) / 거터 너비 (24)
'강의 내용' 카테고리의 다른 글
| [내일배움캠프] UXUI_4기 본캠프 : 2주차 강의 내용 (0) | 2024.05.29 |
|---|
