본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

미리보기 실행 방법

1. 페이지(프레임) 좌측 상단에 있는 Play 버튼 클릭

2. 또는 키보드 단축키 사용

   • macOS: ⌘ + P

   • Windows: Ctrl + P

미리보기 화면을 종료하고 싶을 때에는 ESC 키를 누르거나, 오른쪽 상단의 닫기 버튼을 클릭하면 됩니다.

반응형 레이아웃 점검하기

미리보기 모드에서는 뷰포트 크기를 자유롭게 조절할 수 있습니다. 이를 통해 브레이크 포인트별 페이지 미리보기를 직접 확인할 수 있습니다.

특정 디바이스나 브레이크포인트를 기준으로 프리뷰하고 싶다면?

• 미리보기 모드 상단 중앙에 있는 뷰포트 조절 버튼 클릭

• 나타나는 드롭다운 메뉴에서 원하는 디바이스 크기 또는 브레이크포인트를 선택

예를 들어, Tablet을 선택하면 태블릿 환경에 맞춰 화면이 자동으로 조정되어 해당 사이즈에서의 동작을 확인할 수 있습니다.

Note : Settings에서 추가한 커스텀 코드(custom code) 는 미리보기 화면에서는 적용되지 않습니다.(사이트를 실제로 배포한 후에만 확인 가능)

본 글은 Framer 공식 문서 Previewing your Site를 번역·각색한 콘텐츠입니다.