DAY 15 | 피그마 기초 뽀개기 (그리드&컴포넌트)

01. 그리드 개념 (그리드- 격자)

02. 레이아웃과 그리드 시스템
레이아웃 : 화면크키, 텍스트, 이미지, 여백 등의 다양한 구성요소를 고려하여 앱 내에 정보를 시각적으로 배치
그리드 시스템 : 여러 종류의 요소글 질서 있게 배치하기 위한 *그리드 규칙을 말함
그리드를 활용하면 시각적 통일성을 줄 수 있음(효율성을 높여줌)
* 그리드는 사전적 의미로 격자무늬, 격자판을 의미함

03. 그리드의 장점

1. 일관성 (시각성)
2. 협업 효율성 (디자인과 개발자간의 의사소통- 작업 효율을 높일 수 있음)
3. 통일성 (반응형 디자인- 다양한 크기 해상도 유연하게 반응해야함)

04. 레이아웃 요소
레이아웃을 위한 그리드 시스템 구성요소

1. 컬럼 : 반응형웹은 일반적으로 12,15 컬럼을 사용함 / 모바일 앱은 일반적으로 4,6단 컬럼를 사용함 *컨텐츠 정렬하는데 용이함
2. 커터 : 가독성을 높임 적절한 여백으로 (디자인 밀도) 시각적 피로도를 줄여줌
3. 마진 : 웹사이트 폭을 조절함 / 전체적인 균형과 시각적인 안정감을 줌

05. 자주 쓰이는 웹의 그리드 형태
컨테이너 : 1200px
컬럼 개수 : 12
컬럼 : 78px
오프셋 : 센터
커터 : 24px

06. 다양한 그리드 
1. 3x1
2. 지그재그
3. 4x4
4. 4x2 중앙 2열 이미지 배치하기

07. 브레이크포인트
각각의 사이트마다 사이즈의 브레이크포인트는 다름 다양한 기기에서 최적화된 디자인을 구현할 수 있음
브레이크포인트(Breakpoint) 는 반응형 디자인(Responsive Design) 을 구현할 때 특정 화면 크기에서 스타일이 변경되는 기준점
즉, 화면 크기에 따라 레이아웃이 변하도록 미리 설정한 너비 값

• 브레이크포인트는 특정 화면 크기에서 UI를 변경하는 기준점
• CSS 미디어 쿼리나 반응형 라이브러리로 설정 가능
• 목표: 사용자 경험(UX)을 향상시키고, 모든 디바이스에서 보기 좋게 만들기

 

 

일반적인 브레이크포인트 값

보통 아래와 같이 디바이스 유형별로 브레이크포인트를 설정함

디바이스 유형화면 너비(px)

모바일 (Mobile)	0 ~ 599px
태블릿 (Tablet)	600 ~ 959px
작은 데스크톱 (Small Desktop)	960 ~ 1279px
큰 데스크톱 (Large Desktop)	1280px 이상

 

07. 4pt / 8pt 기준의 그리드

웹/앱 디자인에서 일관성과 가독성을 유지하기 위해 8포인트(8pt) 단위로 크기와 간격을 설정하는 디자인 시스템입니다.

• 기본 단위: 8px, 16px, 24px, 32px, 40px …
• 대부분의 디스플레이 해상도가 8의 배수로 나뉘기 때문에 자연스럽고 깔끔한 레이아웃이 가능

 

왜 8pt 스케일을 사용할까?

왜? → 디자인 일관성 + 반응형 레이아웃 최적화 + 개발 협업 편의성 때문!
디자인 시스템을 만들 때 8pt 그리드 시스템을 적용하면 훨씬 깔끔하고 체계적인 UI를 만들 수 있음!

✔ 디자인 일관성 유지
→ 모든 UI 요소의 크기와 간격이 균형 있게 배치됨

✔ 다양한 해상도에서 최적화됨
→ 모바일, 태블릿, 데스크톱 등 다양한 화면 크기에서도 조정이 쉬움

✔ 디자인과 개발 협업이 편리함
→ "이 버튼 마진 16px 주세요!"처럼 디자이너와 개발자가 같은 기준으로 이야기할 수 있음

8pt 스케일 적용 예시

💡 텍스트 크기

• 제목 (H1): 32px
• 부제목 (H2): 24px
• 본문 텍스트: 16px
• 작은 글씨: 12px

💡 여백 & 패딩

• 카드 패딩: 16px
• 버튼 내부 패딩: 8px 16px
• 요소 간 간격: 8px, 16px, 24px

💡 컴포넌트 크기

• 버튼 높이: 40px
• 아이콘 크기: 24px
• 입력 필드 높이: 48px

 

 

---

과제 - 내가 좋아하는 주제를 소개하는 웹사이트 만들기 + 다양한 그리드 활용하기