[내일배움캠프] Day 22 - 레이아웃과 그리드 시스템

---

 

[수업목표]

• 레이아웃에 콘텐츠와 UI 요소를 배치하여 정보를 전달할 수 있다.
• 그리드 시스템을 적용하여 화면 구성 요소를 효과적으로 배치할 수 있다.

---

📐 레이아웃 가이드

🖥️ 해상도

해상도는 화면의 정밀도를 나타내는 지표
가로 픽셀 수 × 세로 픽셀 수로 표현

 

📊 해상도 선정 기준

• 점유율 기준으로 작업: StatCounter에서 인기 해상도를 확인
• 대표 해상도:
  • 📱 안드로이드 : 360×800
  • 📱 iOS : 375×812

💡 StatCounter에서 확인하기 StatCounter 해상도 통계

 

✅ 해상도 선정 시 고려사항

• 프로덕트 성향, 콘텐츠 종류, 레이아웃, 타겟 사용자 고려
• 디자이너·개발자와 논의하여 적절한 해상도 선정

 

📱 다양한 해상도 대응

• 안드로이드와 iOS의 해상도에 맞춰 일관된 디자인 제공
• 모든 해상도에서 동일한 사용자 경험을 보장

 

🔄 고정과 가변 영역

💡 해상도에 맞는 레이아웃을 만들기 위한 핵심 개념

 

⚖️ 고정(Fix) 영역

• 해상도 변화에 관계없이 고정된 크기와 위치 유지
• 좌우 마진, 주요 콘텐츠 등 일관성이 필요한 요소에 적용

 

📏 가변(Flexible) 영역

• 해상도에 따라 크기와 위치가 비율에 맞게 변경
• 배너, 리스트, 버튼 등 반응형 요소에 적용

 

🧭 예시: 캐러셀(Carousel)

1. 고정 영역:
   • 콘텐츠 크기는 일정
   • 확장된 화면에서는 더 많은 콘텐츠 표시 (ex: 2.5 → 4.5개)
2. 가변 영역:
   • 해상도에 맞춰 콘텐츠 크기 확대/축소
   • 표시 콘텐츠 개수는 동일 (ex: 2.5개 유지)

 

🧾 예시: 리스트(List)

• 좌우 마진, 이미지 크기 등은 고정 영역으로 설정
• 텍스트, 배너 영역 등은 가변 영역으로 설정
• 디바이스 크기에 따라 여백과 콘텐츠 크기가 조절됨

💁‍♀️ 팁: 이미지는 보통 가로(width) 기준으로 크기가 조절, 세로(height)는 비율에 맞춰 변경됨

 

 

🧩 일관된 디자인

• 모든 해상도에서 일관성 있는 사용자 경험 제공
• 작은 해상도에서도 가독성과 사용성을 고려

 

✅ 레이아웃 구성 팁

• 해상도에 따라 변하는 요소와 고정되는 요소 구분
• 여백과 크기를 균형 있게 설정하여 레이아웃 유지

 

📊 그리드 시스템 가이드

 

📐 그리드란?

바둑판이나 모눈종이처럼 규칙적인 ‘격자무늬’를 의미

디자인 레이아웃에 규칙을 부여하여 일관된 UI를 구현할 수 있도록 도와줌

 

🧩 그리드의 역할

• 디자인 레이아웃에 일정한 규칙을 적용
• 디바이스 환경에 맞게 콘텐츠를 정렬하고 배치
• 반응형 디자인 작업 시 해상도 대응이 용이
• 디자이너와 개발자 간의 원활한 커뮤니케이션 지원

 

🏗️ 그리드의 4가지 기본 요소

1️⃣ 컨테이너 (Container)

✔️ 콘텐츠를 감싸는 영역으로, 전체 콘텐츠의 폭을 의미

• 콘텐츠 성격에 맞게 폭을 자유롭게 설정 가능
• 모바일·태블릿: 가로 폭이 좁으므로 마진을 줄여 더 넓게 사용 가능
• 데스크탑: 가로 폭이 넓어 자유롭게 설정 가능

2️⃣ 컬럼 (Column)

✔️ 콘텐츠를 정렬·배치하는 기본 단위

디바이스	컬럼 수 (권장)
📱 모바일	4~6
💻 태블릿	6~8
🖥️ 데스크탑	12~16

💡 Tip: 콘텐츠가 많거나 복잡할수록 컬럼 수를 늘리기

3️⃣ 거터 (Gutter)

✔️ 컬럼과 컬럼 사이의 간격으로, 콘텐츠의 가독성을 높여

디바이스	거터 크기 (px)
📱 모바일	8~16
💻 태블릿	16~24
🖥️ 데스크탑	24~32

4️⃣ 마진 (Margin)

✔️ 화면의 좌우 여백으로, 컨테이너 크기에 영향을 줌

디바이스	마진 크기 (px)
📱 모바일	16~20
💻 태블릿	20~36
🖥️ 데스크탑	24~36

💡 Tip: 마진은 모든 페이지에 일관되게 적용하기

 

⚡ 반응형 디자인과 그리드

💡 반응형 디자인이란, 디바이스 화면 크기에 맞춰 디자인과 레이아웃이 자동으로 조정되는 시스템

 

🤔 왜 중요할까요?

1. 📱 다양한 디바이스에서 일관된 사용자 경험 제공
2. 💵 비용 효율적 — 하나의 코드 베이스로 다양한 디바이스 대응
3. 📖 콘텐츠 최적화 — 모든 해상도에서 텍스트와 이미지를 최적화

 

📏 브레이크포인트 (Break Point)

레이아웃이 변경되는 지점을 의미

디바이스	해상도 범위 (px)
📱 모바일	0 ~ 599
💻 태블릿	600 ~ 1024
🖥️ 데스크탑	1024 ~

 

💡 참고: StatCounter 해상도 통계

 

✅ 브레이크포인트 설정 팁

• 사용자 점유율을 기준으로 해상도 선정
• 디자이너·개발자 간 논의 후 설정
• 너무 세분화된 브레이크포인트는 피하기

 

💡 최적화된 12컬럼 그리드

• 12컬럼은 반응형 디자인에 가장 최적화된 형태
• 2, 3, 4, 6단으로 자유롭게 레이아웃을 나눌 수 있음
• 디자인과 개발에서의 유연성과 일관성을 보장

 

📎 유용한 도구

• Grid Calculator — 그리드 설정 계산기
• 넷플릭스 (반응형 디자인 예시)

 

---

 

[과제] 제시된 서비스와 1개의 서비스를 더 선정하여 총 2개 서비스의 레이아웃과 그리드를 분석해 주세요.

 

 

---

 

[마무리]

 

과제를 하면서 3단계로 레이아웃과 그리드를 분리해봤는데 쿠팡은 쿠팡이니까 엄청 많이 나눌 수 있구나 했고, 내가 수업듣던 리얼클래스 홈페이지가 이렇게 단순했었는지 이번에야 알게 되었다.

 

첫번째 과제했을 때 달력을 만들어서 제출해야해서 피그마에서 그리드를 처음 사용해봤는데 그때는 제대로 배운 적이 없이 일단 유튜브 따라하면서 했었는데 강의에서 알려주셔서 이해가 됐다

 

뭔가 더 배워갈 수록 어려운 데 재밌어진다

ㅋㅋㅋ전에 튜터님이 어떤 분이 어려워서 재밌다고 하니까 변태같다고 그랬는데 내가 그렇게 되고 있네ㅋㅋㅋ

 

이번 한 주는 과제를 마무리하느라 정신없이 보내고 새로운 강의를 받아서 시간이 엄청 빠르게 갔다

다음주는 강의 과제 전부 완료하고 클론디자인 연습 좀 해야겠다

클론 디자인이라는 글씨만 봐도 멀미가 나는 것 같아서 이것부터 해결해야지...