[TIL] 0723

 

1. 오늘 학습 키워드

• 해상도
• 고정과 가변 영역
• 그리드

 

2. 오늘 학습한 내용을 나만의 언어로 정리하기

 

일관된 디자인

• 사용자가 모든 해상도에서 일관된 경험할 수 있도록, 다양한 해상도를 대응하는 디자인을 해야 함

 

고정과 가변 영역

• 좌우 마진은 모든 페이지에 일관되게 적용해야 해서 고정으로 설정하는 편
• 해상도에 따라 크기가 변하는 버튼, 배너같은 이미지는 가변으로 설정하는 편

 

그리드

• 디바이스 환경에 따라 디자인 요소를 일정한 간격으로 배치하고, 크기를 부여해 체계적인 배열을 도와줌
• 4가지 기본 요소: 컨테이너, 컬럼, 거터, 마진

 

반응형 디자인

• 반응형 디자인이 중요한 이유
  • 다양한 디바이스 사용(어떤 환경에서는 편리하게 이용 도와줌)
  • 일관된 디자인(하나의 템플릿으로 다양한 디바이스 대응)
  • 비용 효율화(하나의 코드 베이스로 유지보수가 용이)
  • 콘텐츠 최적화(텍스트나 이미지를 쉽게 확인하고 이해할 수 있음)

 

• 브레이크포인트
  • 레이아웃이 변환되는 지점

 

최적화된 그리드, 12 컬럼

• 12컬럼 그리드는 반응형 디자인에 최적화되어 있음
• 2, 3, 4, 6 단으로 자유롭게 레이아웃을 나눌 수 있고 디자인과 개발되 최적화되어 있음

 

UI 요소

• 기본요소(Item): 가장 작은 요소의 컴포넌트
• 조합 요소(Module): 기본 요소 + 기본 요소 or 기본 요소 + 조합 요소
• 섹션(Section): 조합 요소 + 조합 요소 + 여백(마진, 패딩)

 

오늘 정리한 내용 🔽

[UI 디자인의 모든 것] Ch3: 레이아웃, 그리드

 

[UI 디자인의 모든 것] Ch4: 컴포넌트 범위, 엘리먼트와 컴포넌트

 

숙제🔽 

[UI 디자인의 모든 것] Ch3: 레이아웃과 그리드 시스템

 

 

3. 학습하며 겪었던 문제점 & 에러

 

- 새롭게 알게 된 점 & 느낀점

• UI 디자인을 분석할 때는 섹션 → 모듈 → 아이템 순으로 구조를 나누어 보면 반복되는 요소나 패턴을 더 쉽게 파악할 수 있다는 걸 배웠다
• 구조적으로 접근하는 법을 배운 덕분에 화면을 논리적으로 뜯어볼 수 있을 것 같다

 

 

4. 내일 학습 할 것은 무엇인지

• UI 디자인의 모든 것 CH4 숙제 마무리
• UI 디자인의 모든 것 CH 5 수강 & 숙제
• 1on1
• 개인 과제 조금 건드려보기 ~..~