Framer 브레이크포인트, 모바일에서 페이지가 깨지지 않게 하는 법

Framer 브레이크포인트는 Desktop, Tablet, Phone 세 가지입니다. Desktop에서 만들면 변경 사항이 아래 두 크기로 흘러내립니다. 작은 크기에서 무언가를 바꾸면 그 자리에 남는 오버라이드가 됩니다. Framer에서 생기는 모바일 오류는 거의 전부 한 가지로 돌아갑니다. 채움으로 바꾸지 않은 고정 픽셀 너비입니다.

세 브레이크포인트가 실제로 가리키는 범위

Framer 제품 페이지의 캔버스 탭에는 Desktop 1200, Tablet 810이라고 적혀 있습니다. framer.com에 퍼블리시된 코드도 같은 값을 씁니다. 반응형 이미지는 min-width 1200px, 810px에서 1199.98px까지, max-width 809.98px 규칙으로 제공됩니다. 즉 Desktop은 1200 이상, Tablet은 대략 810에서 1199, Phone은 810 미만 전부입니다. 레이아웃은 이 세 경계를 모두 넘겨야 합니다.

변경은 아래로 흐르고, 오버라이드는 위로 올라가지 않습니다

Desktop에서 고치면 그 변경이 Tablet과 Phone으로 흘러갑니다. Phone에서 고치면 거기에만 남는 오버라이드가 만들어집니다. Framer는 오버라이드한 속성을 전부 표시해줍니다. 그 값들은 기준 브레이크포인트와 더 이상 같지 않아서 변경을 물려받지 않기 때문입니다. 되돌리려면 속성 이름을 클릭하고 Reset Override를 누르면 됩니다. 그래서 Desktop 레이아웃을 먼저 끝내고 Phone을 여는 겁니다. 너무 일찍 잡아둔 오버라이드는 결국 같은 수정을 두 번 하게 만듭니다.

페이지가 넘치는 원인은 고정 너비입니다

Framer에 이 문제를 다룬 짧은 문제 해결 문서가 있는데, 내용이 정확합니다. Phone 브레이크포인트에서 사이트가 화면을 꽉 채우지 못한다면, 거의 항상 어떤 요소 하나가 휴대폰 화면보다 넓습니다. 두 가지를 찾아보세요. 100%나 1fr을 넣어야 할 자리에 들어간 321px 같은 고정 너비, 그리고 휴대폰 화면보다 큰 Max Width입니다. 둘 다 오른쪽 패널의 Size 항목에서 고칩니다. Width를 100%나 1fr로 두고, 콘텐츠 래퍼를 뺀 나머지에서는 Max Width를 없애세요. 그리고 다시 퍼블리시하세요. 캔버스 수정은 퍼블리시해야 라이브 사이트에 반영됩니다.

나머지는 스택 방향과 여백이 합니다

Phone에서는 가로 스택 대부분을 세로로 바꿔야 합니다. 스택을 선택해 방향을 뒤집고, 간격은 데스크톱 값보다 줄이세요. 그다음 섹션 여백을 줄입니다. 위아래 120픽셀은 데스크톱에서는 여유로워 보이지만 휴대폰에서는 빈 화면처럼 보입니다. 좌우 여백 80픽셀은 휴대폰 방문자에게 좁은 띠 같은 글줄을 남깁니다. 40과 20이 무난한 출발점입니다. Phone 브레이크포인트에서 섹션을 하나씩 훑으면서, 아무것도 없는 구간을 스크롤하게 만드는 부분은 다 줄이세요.

타이포그래피는 따로 한 번 더 봐야 합니다

64픽셀 헤드라인은 휴대폰에서 여섯 줄로 접히면서 버튼을 첫 화면 밖으로 밀어냅니다. 레이어마다 손대는 대신 텍스트 스타일에서 한 번에 고치세요. 왼쪽 사이드바의 Assets를 열고 스타일을 연 다음, Edit Style 창에서 Breakpoints 항목을 찾아 Add Breakpoint를 누르세요. Framer는 Desktop (L), Tablet (M), Mobile (S)을 제공합니다. 각각에 대해 글자 크기, 행간, 자간, 문단 간격을 지정할 수 있습니다. H1을 여기서 한 번 잡아두면 사이트의 모든 H1이 따라옵니다.

방문자가 보는 방식으로 확인하세요

먼저 알아둘 특이점이 하나 있습니다. Framer는 브라우저 창이나 모니터 해상도보다 넓은 브레이크포인트를 비활성화합니다. 그래서 작은 노트북에서는 Desktop 미리보기가 회색으로 죽어 있을 수 있습니다. Framer가 안내하는 해결책은 창을 넓히거나, 더 큰 모니터로 옮기거나, 퍼블리시해서 라이브 URL로 보는 것입니다. 그다음 진짜 확인은 브라우저에서 하세요. 창을 넓은 쪽에서 좁은 쪽으로 천천히 끌어보세요. 어느 지점에서 한 줄이 안 들어가는지 정확히 보고, 브레이크포인트 경계가 아니라 그 지점에서 고치세요. 그다음 라이브 URL을 본인 휴대폰에서 모바일 데이터로 열어 페이지 전체를 내려보세요. 기기 에뮬레이션은 느린 네트워크나 인앱 브라우저 툴바를 보여주지 않습니다.

10분짜리 반응형 점검

위에서 아래로, 섹션 하나씩 갑니다. 모든 래퍼를 100%나 1fr로 두세요. Max Width는 콘텐츠 래퍼 한 곳에만 남깁니다. Phone에서는 가로 스택을 세로로 뒤집습니다. 섹션 여백은 절반으로 줄입니다. H1, H2, 본문 텍스트 스타일에 브레이크포인트별 크기를 넣습니다. 다시 퍼블리시하고 휴대폰에서 페이지를 열어, 스크롤하지 않고 첫 버튼이 보이는지 확인하세요. 이 점검 한 번이면 문제 대부분이 잡히고, 몇 번 해보면 페이지당 10분쯤 걸립니다.