반응형 디자인 (모바일 대응)
한국 웹 트래픽은 모바일 비중이 매우 높습니다. 데스크톱만 보고 만들면 정작 대부분의 방문자가 깨진 화면을 보게 됩니다. 모바일을 반드시 챙기세요.
브레이크포인트(Breakpoint)
Framer는 세 가지 화면을 기본 제공합니다.
| 화면 | 기준 너비(대략) | 비고 |
|---|---|---|
| 데스크톱 | 1200px 이상 | 기본 디자인 |
| 태블릿 | 810px 내외 | 중간 크기 |
| 모바일 | 390px 내외 | 가장 중요 |
태블릿·모바일 화면이 아직 없다면, 캔버스에서 데스크톱 화면 상단 우측의 +
버튼을 누른 뒤 태블릿과 모바일을 각각 클릭해 추가합니다. 그다음 위쪽 툴바에서 화면을
전환하며 각각 다듬습니다.
상속 구조 — 데스크톱 → 태블릿 → 모바일 순으로 수정이 상속됩니다. 상위에서 바꾸면 아래로 내려오지만, 특정 화면에서 따로 손댄 부분은 그 화면에만 남습니다.
작업 순서 추천
- 데스크톱에서 전체 디자인을 완성
- 모바일로 전환해 깨진 부분 정리 (가장 중요)
- 태블릿은 마지막에 가볍게 확인
모바일 체크리스트
- ✅ 본문 글자가 16px 이상인가
- ✅ 버튼·링크가 손가락으로 누르기 충분히 큰가 (최소 44px)
- ✅ 가로 스크롤이 생기지 않는가
- ✅ 이미지·여백이 화면을 벗어나지 않는가
- ✅ 메뉴가 모바일에서 햄버거 메뉴 등으로 잘 동작하는가
- ✅ 배경 동영상 등 무거운 요소가 모바일 성능을 해치지 않는가
⚠️
발행 전 실제 휴대폰으로 한 번 열어보세요. 에디터 미리보기와 실제 기기는 미묘하게 다를 수 있습니다.
다음 단계
입문을 마쳤습니다. 디자인 구조 한눈에 보기로 Stack·Section·Layer를 익히거나, 실무 → 컴포넌트로 넘어가세요.
자주 묻는 질문
Last updated on