내일배움캠프 UX/UI 22일차 TIL

2025.02.21

레이아웃, 그리드, 해상도

---

하루 계획

---

학습 목표

1-3 강의 듣기

1-3 강의 과제 진행

 

수업 목표

레이아웃에 콘텐츠와 UI 요소를 배치하여 정보를 전달할 수 있다.

그리드 시스템을 적용하여 화면 구성 요소를 효과적으로 배치할 수 있다.

---

레이아웃

해상도

해상도는 화면의 정밀도를 나타내는 지표로 스크린의 가로 픽셀수 x 세로 픽셀 수를 기준으로 표현한다.

해상도를 선정할 때는 스크린 점유율을 기준으로 하는 것이 좋다.

StatCounter에서 조회 가능

 

또한 모바일, 태블릿, 데스크탑 등 다양한 기기해서도 사용할 수 있도록 디자인하는 것이 중요하다.

 

고정과 가변 영역

디자이너는 해상도에 따라 요소의 크기와 여백을 어떻게 변하게 할지를 고민하면서 작업해야한다.

 

고정

해상도가 커져도 정의한 수치값이 일정하게 유지한다.

좌우 마진은 모든 페이지에서 일관되게 적용되어야 하기 때문에 고정한다.

 

가변

해상도가 커지거나 작아지면 비율에 맞게 확대되거나 축소되는 것이다.

버튼이나 배너 같은 요소들을 가변으로 설정한다.

 

그리드 시스템

디자인 레이아웃에 동일한 규칙을 부여하여 일관된 UI를 만들 수 있게 한다.

데스크탑이나 태블릿, 모바일 등 반응형 디자인을 할 때 용이하다.

 

기본 요소

컨테이너: 콘텐츠의 폭, 제품이나 서비스 등에 따라 달라진다. 

모바일이나 태블릿은 가로가 좁기 때문에 콘텐츠가 많을 때는 마진을 줄이고 컨테이너 너비를 넓게 설정한다.

 

칼럼: 단의 넓이, 콘텐츠를 정렬하고 배치하는데 도움을 준다.

모바일: 2~6(4칼럼을 주로 사용) 

태블릿: 6~12 (6~8칼럼을 주로 사용)

데스크탑: 12~16 (12컬럼 주로 사용)

 

거터: 컬럼과 컬럼 사이의 간격, 콘텐츠의 가독성을 높여준다.

모바일: 8~16

태블릿: 16~24

데스크탑: 24~32

 

마진:화면의 좌우 여백, 모든 페이지에 일정하게 적용하는게 좋다.

모바일: 16~20

태블릿: 20~36

데스크톱: 24~36

절대적인 값은 아니다.

 

gridcalculator을 사용하면

컨테이너 사이즈에 따라 칼럼, 마진, 거터를 어떻게 설정해야 하는지 계산해준다.

 

반응형 디자인

디자인을 할 때 다양한 디바이스에 일관된 경험을 할 수 있도록 하기에 중요하다.

각 디바이스에 맞게 최적화 된 화면을 제공할 수 있다.

하나의 코드 베이스로 되어 있어서 유지 보수하기 좋다.

 

브레이크포인트

반응형 디자인에서 레이아웃이 변화되는 지점을 뜻한다.

브레이크포인트를 설정하기 위해서는 가장 많이 사용하는 디바이스 해상도를 파악하기 위해 점유율을 확인해야한다.

브레이크를 설정할 때는 디자이너와 개발자가 같이 논의해서 정하는 것이 좋다.

 

대표적으로 사용하는 브레이크 포인트 설정

모바일: 0~599

태블릿: 600~1024

데스크탑: 1024~

 

최적화된 12칼럼 그리드

12컬럼 그리드는 반응형 디자인에 최적화 되어 있다.

2,3,4,6 단으로 자유롭게 레이아웃을 나눌 수도 있고 디자인과 개발하기에도 편하다.

 

그리드를 공부하는 방법

1)웹이나 앱을 3단계로 그리드를 분석한다.

3단계로 갈 수록 자세하게 분석한다.

 

2)개발자 모드

맥북 개발자 모드를 이용해서 어떻게 디자인했는 지 뜯어볼 수 있다.

이를 통해 왜 이렇게 디자인 했을 지 생각하면서 공부할 수 있다.

맥북 단축키: 옵션 + 커멘드 + i

---

1-3 과제

총 3단계로 그리드 박스 만들기

유튜브, 쿠팡의 웹사이트로 진행

---

학습 경험

새로 알게 된 점

웹사이트의 그리드를 분석하고 공부하는 방법에 대해 새롭게 알게되었다. 또한 그리드와 레이아웃을 공부하는 방법을 알려주시고 관련된 정보도 공유해주셔서 큰 도움이 되었다. 또한 각 디바이스별 입력해야 하는 값도 잘 몰랐었는데 이번 강의를 통해 새롭게 알게 되었다.

 

아쉬웠거나 어려웠던 점

피그마 심화 강의에서 간단하게 배웠던 내용이라서 크게 어렵게 느껴지진 않았다. 

내용은 어렵지 않은데 요새 수면시간이나 식사 시간 등이 불규칙해서 그런지 너무 피곤해서 집중이 잘 안됐었다. 

내 맘대로 몸이 잘 안따라주고 관리하기도 어렵다. 😢

 

개선 방향 

수면시간과 식사 시간을 개선해야 된다는 것을 알고는 있지만 막상 실행하는 것은 어려운 것 같다. 

그래서 실행할만한 동기를 부여 받으면 좋을 것 같아서 실무에서 일하고 계신분의 말씀을 들어보면 좋을 것 같다.

 

---

내일 할 일

UI 디자인의 모든 것 1-4 강의 듣기

UI 디자인의 모든 것 1-4 과제 진행