반응형 디자인 (모바일 대응)
한국 웹 트래픽은 모바일 비중이 매우 높습니다. 모바일 화면을 반드시 챙기세요.
브레이크포인트(Breakpoint)
Framer는 세 가지 화면을 기본 제공합니다.
| 화면 | 기준 너비(대략) |
|---|---|
| 데스크톱 | 1200px 이상 |
| 태블릿 | 810px 내외 |
| 모바일 | 390px 내외 |
위쪽 툴바에서 화면을 전환하며 각각 다듬습니다. 데스크톱에서 한 수정은 보통 하위 화면에 상속되지만, 모바일에서 따로 조정한 부분은 그 화면에만 적용됩니다.
모바일 체크리스트
- 글자가 너무 작지 않은가 (본문 16px 이상 권장)
- 버튼이 손가락으로 누르기 충분히 큰가 (44px 이상)
- 가로 스크롤이 생기지 않는가
- 이미지·여백이 화면을 벗어나지 않는가
Stack과 Grid를 잘 쓰면 반응형 작업이 훨씬 쉬워집니다. 손으로 좌표를 고정하기보다 레이아웃에 맡기세요.
다음 단계
입문을 마쳤습니다. 실무 → 컴포넌트로 넘어가세요.
Last updated on