이 글은 누구를 위한 것인가
- 브레이크포인트 설정 기준이 불명확해 팀마다 제각각인 경우
- 고정 픽셀 대신 유동 값으로 전환하고 싶은 디자이너·개발자
- Figma에서 반응형 컴포넌트를 Auto Layout으로 설계하려는 팀
들어가며
"모바일, 태블릿, 데스크탑"이라는 3단계 브레이크포인트로 충분하던 시대는 지났다. 폴더블폰, 태블릿 가로모드, 초고해상도 모니터까지 화면 크기는 연속 스펙트럼이 되었다.
고정 브레이크포인트에서 유동 그리드로 전환하면, 화면 크기가 어떻게 바뀌어도 깨지지 않는 레이아웃을 만들 수 있다.
이 글은 bluefoxdev.kr의 반응형 디자인 시스템 가이드 를 참고하고, 유동 그리드 전략 실전 설계 관점에서 확장하여 작성했습니다.
1. 브레이크포인트 설계 원칙
[브레이크포인트 기준 — 콘텐츠 중심 접근]
❌ 디바이스 중심 (구식):
Mobile: 375px (iPhone)
Tablet: 768px (iPad)
Desktop: 1024px (일반 노트북)
→ 특정 기기에 최적화, 중간 크기에서 깨짐
✅ 콘텐츠 중심 (권장):
"레이아웃이 어색해지는 순간"에 브레이크포인트 설정
→ 콘텐츠 너비를 늘려보면서 직접 결정
[실전 권장 브레이크포인트]
xs: 320px (최소 모바일)
sm: 480px (대형 모바일)
md: 768px (태블릿 세로)
lg: 1024px (태블릿 가로 / 소형 노트북)
xl: 1280px (일반 데스크탑)
2xl: 1536px (대형 모니터)
[모바일 퍼스트 원칙]
기본 스타일 = 모바일
미디어 쿼리 = min-width로 점진적 확장
/* 잘못된 방식 (Desktop First) */
.card { display: flex; }
@media (max-width: 768px) { .card { display: block; } }
/* 올바른 방식 (Mobile First) */
.card { display: block; }
@media (min-width: 768px) { .card { display: flex; } }
2. 유동 그리드 (Fluid Grid)
/* 고정 컨테이너 vs 유동 컨테이너 비교 */
/* 고정 컨테이너 (구식) */
.container-fixed {
width: 1200px; /* 고정값 */
margin: 0 auto; /* 1200px 이하에서 스크롤 발생 */
}
/* 유동 컨테이너 (권장) */
.container-fluid {
width: min(1280px, 100% - 48px); /* 최대 너비 + 여백 보장 */
margin: 0 auto;
}
/* CSS Grid 유동 컬럼 */
.grid {
display: grid;
/* 방법 1: auto-fill + minmax (반응형 자동) */
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: clamp(16px, 2vw, 32px); /* 유동 간격 */
}
/* 방법 2: 12컬럼 그리드 (디자인 시스템 표준) */
.grid-12 {
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: clamp(12px, 2vw, 24px);
padding: 0 clamp(16px, 5vw, 80px); /* 유동 여백 */
}
/* 컬럼 스팬 반응형 */
.col-full { grid-column: span 12; }
.col-half { grid-column: span 6; }
.col-third { grid-column: span 4; }
.col-quarter { grid-column: span 3; }
@media (max-width: 768px) {
.col-half,
.col-third,
.col-quarter {
grid-column: span 12; /* 모바일: 전체 너비 */
}
}
3. 유동 타이포그래피 (Fluid Typography)
/* CSS clamp()로 반응형 폰트 크기 */
/*
clamp(최소값, 이상적값, 최대값)
이상적값: vw 단위로 뷰포트에 비례
공식:
이상적값 = (목표크기 - 최소크기) / (최대뷰포트 - 최소뷰포트) * 100vw
*/
/* 제목 (H1): 320px → 28px, 1280px → 56px */
h1 {
font-size: clamp(28px, 2.5vw + 20px, 56px);
line-height: 1.2;
}
/* 제목 (H2): 320px → 22px, 1280px → 40px */
h2 {
font-size: clamp(22px, 2vw + 16px, 40px);
}
/* 본문: 320px → 15px, 1280px → 18px */
p {
font-size: clamp(15px, 0.3vw + 14px, 18px);
line-height: 1.6;
}
/* 캡션: 고정 (작아서 고정이 낫다) */
.caption {
font-size: 12px;
}
/* 유동 간격 시스템 */
:root {
--space-xs: clamp(4px, 0.5vw, 8px);
--space-sm: clamp(8px, 1vw, 16px);
--space-md: clamp(16px, 2vw, 32px);
--space-lg: clamp(24px, 3vw, 48px);
--space-xl: clamp(40px, 5vw, 80px);
}
4. Figma 반응형 컴포넌트 설계
[Auto Layout 반응형 설정]
카드 컴포넌트 반응형:
┌─────────────────────────────┐
│ Auto Layout (Vertical) │
│ ├── 이미지 (Fill Container) │
│ ├── 콘텐츠 영역 │
│ │ ├── 제목 (Fill) │
│ │ ├── 설명 (Fill) │
│ │ └── 버튼 (Hug) │
│ Padding: 16px │
│ Gap: 12px │
└─────────────────────────────┘
반응형 컴포넌트 구성:
1. Variants로 breakpoint별 레이아웃 정의
- Mobile: 수직 스택 (1열)
- Tablet: 2열 그리드
- Desktop: 3-4열 그리드
2. Min/Max Width 설정
- 카드: Min 240px, Max 400px
- 컨테이너: Max 1280px
3. Constraints 설정
- 이미지: Scale (비율 유지)
- 텍스트: Left & Right (너비 늘어남)
- 버튼: Left (고정 위치)
[컴포넌트 크기 프로퍼티]
Size 프로퍼티: sm | md | lg
→ 각 크기별 padding, font-size 다르게 설정
→ 개발자가 props로 그대로 사용
5. 반응형 레이아웃 패턴
[자주 쓰는 반응형 레이아웃 패턴]
1. 사이드바 → 스택
Desktop: [사이드바 240px] [메인 콘텐츠]
Mobile: [메인 콘텐츠] ↓ [사이드바 (아코디언)]
2. 두 컬럼 → 한 컬럼
Desktop: [이미지 50%] [텍스트 50%]
Mobile: [이미지 100%] ↓ [텍스트 100%]
3. 수평 탭 → 드롭다운 선택
Desktop: [탭1] [탭2] [탭3] [탭4]
Mobile: [선택 ▼] (셀렉트 박스)
4. 데이터 테이블 → 카드 목록
Desktop: 전체 컬럼 테이블
Tablet: 일부 컬럼 숨김
Mobile: 행을 카드로 변환
[CSS 예시: 사이드바 → 스택]
.layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: 24px;
}
@media (max-width: 768px) {
.layout {
grid-template-columns: 1fr;
}
.sidebar {
order: 2; /* 모바일에서 본문 아래로 이동 */
}
.main {
order: 1;
}
}
마무리
브레이크포인트는 디바이스 목록이 아니라 콘텐츠가 필요로 하는 변곡점이다. clamp()와 minmax()를 활용하면 브레이크포인트 수를 줄이면서도 모든 화면 크기에서 자연스러운 레이아웃을 만들 수 있다.
Figma Auto Layout을 잘 설계하면 개발자가 그대로 CSS Grid/Flexbox로 옮길 수 있다. 디자인과 구현 사이의 간극을 줄이는 가장 효과적인 방법이다.