크기 (Fixed·Fill·Fit)
Framer에서 초보자가 가장 헷갈려하는 것 중 하나가 바로 레이어의 크기 모드입니다. 텍스트·크기·색은 눈에 보이니 감이 오는데, Fixed·Fill·Fit은 “이게 왜 이렇게 되지?”라는 반응이 가장 많이 나오는 개념입니다.
세 가지 모드
| 모드 | 기준 | 부모/자식이 바뀌면? |
|---|---|---|
| Fixed | 내가 지정한 숫자(px) | 아무 영향 없음. 항상 그 값 |
| Fill | 부모(사용 가능한 공간) | 부모가 커지거나 작아지면 같이 따라감 |
| Fit (Fit Content) | 내 안의 내용(텍스트·자식) | 내용이 길어지거나 짧아지면 같이 따라감 |
세 모드 모두 오른쪽 패널의 W(width)/H(height) 필드 옆 아이콘으로 전환합니다. 가로(W)와 세로(H)를 각각 다른 모드로 지정할 수 있습니다 — 예를 들어 버튼은 가로는 Fit, 세로는 Fixed로 두는 식입니다.
직접 비교해보기
말로는 헷갈리니, 같은 요소를 좁은 컨테이너와 넓은 컨테이너 안에 넣었을 때 실제로 어떻게 다르게 동작하는지 비교해보세요. (아래는 그림이 아니라 실제 CSS로 렌더링된 결과입니다.)
- Fixed — 컨테이너가 좁든 넓든 항상 64px 그대로입니다.
- Fill — 좁은 컨테이너에서는 140px, 넓은 컨테이너에서는 260px로 컨테이너를 꽉 채웁니다. 컨테이너가 기준입니다.
- Fit — 컨테이너 크기와 상관없이 “버튼 텍스트”라는 내용 길이만큼만 차지합니다. 내용이 기준입니다.
Fixed와 Fit을 헷갈리지 마세요. 둘 다 “부모 크기에 안 휘둘린다”는 점은 같지만, Fixed는 숫자에 못 박힌 것이고 Fit은 내용에 따라 붙는 것입니다. 버튼 텍스트를 “확인”에서 “장바구니에 담기”로 바꿨을 때 — Fixed 버튼은 텍스트가 잘리고, Fit 버튼은 자동으로 넓어집니다.
실전 감각 잡기
카드·섹션처럼 화면을 따라가야 하는 요소 → Fill
부모(주로 Section이나 Stack)의 너비에 맞춰 늘어나야 하는 요소는 Fill을 씁니다. 반응형에서 화면 크기가 달라져도 알아서 맞춰집니다.
버튼·라벨처럼 내용 길이가 곧 크기인 요소 → Fit
버튼 안의 글자 수가 곧 버튼의 적정 크기입니다. Fit을 쓰면 텍스트가 바뀌어도 매번 다시 조절할 필요가 없습니다.
아이콘·로고처럼 항상 같은 크기여야 하는 요소 → Fixed
24px 아이콘은 화면이 커지든 작아지든 24px이어야 합니다. 이런 요소만 Fixed를 씁니다.
자주 하는 실수
- 부모가 Fixed인데 자식에 Fill을 기대함 — 자식이 Fill이어도 부모가 고정 크기면 그 이상 못 커집니다. 먼저 부모 크기 모드를 확인하세요.
- 모든 걸 Fixed로 고정 — 데스크톱에서는 예뻐 보여도, 모바일 화면 폭보다 큰 Fixed 요소는 가로 스크롤이 생기거나 화면 밖으로 잘립니다.
- Fit인데 줄바꿈이 안 돼서 당황 — Fit은 내용의 “한 줄 최소 너비”까지만 줄어듭니다. 긴 문장을 억지로 좁히고 싶다면 Fit이 아니라 Fixed + 줄바꿈 설정이 필요합니다.
다음 편에서는 위치(Relative·Sticky) — 레이어가 스크롤에 따라 어떻게 움직이는지를 다룹니다.
다음 단계
글자 개요로 돌아가거나, 위치(Relative·Sticky) 편을 기다려주세요.