[CH 2. UXUI 디자인 입문 주차 | TIL ] 본캠프 24

[ TIL ]

 

1. 학습 키워드

• 레이아웃
• 그리드 시스템
  
  

2. 학습 내용

• 고정 Fix
  
  • 해상도가 커지거나 작아져도 정의한 수치값이 일정하게 유지되는 것
  • 좌우 마진은 모든 페이지에 일관되게 적용되어야 하기 때문에 고정으로 설정
    
    
• 가변 Flexible
  
  • 해상도가 커지거나 작아지면 비율에 맞게 같이 확대되거나 축소되는 것
  • 버튼, 배너와 같은 이미지는 가변으로 설정
    
    
• 그리드 시스템
  
  • 디자인 레이아웃에 규칙을 부여하여 일관된 UI를 할 수 있게 도와주는 수단
    
    
• 그리드 4가지 기본 요소
  
  • 컨테이너 Container
  • 컬럼 Column
  • 거터 Gutter
  • 마진 Margine
  • 그리드 설정
    
    
• 반응형 디자인
  
  • 정해놓은 디바이스 화면 크기에 맞게 디자인과 레이아웃이 자동으로 변경되는 것
    
    
• 브레이크 포인트 Breake Point
  
  • 반응형 디자인에서 레이아웃이 변화되는 지점
  • 12 컬럼 그리드 → 반응형 디자인에 최적화
    
    

3. 과제

• 레이아웃 및 그리드 분석
   

4. 학습 경험

1. 그리드를 사용하여 레이아웃을 잡는 방법에 대해 생각할 수 있게 되었다. 인디자인과 비슷한 느낌...
2. 좌우 마진값을 지정하는 것이 어려웠는데, 그리드를 사용하여 할 수 있는 것이 늘어나게 되었고, 좋은 경험인 것 같다.
   
   

5. 다음 학습할 것

• 팀 프로젝트 준비