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

페이지 만들기 – 시작은 '홈페이지'부터

프로젝트를 새로 만들면 기본으로 Home(인덱스) 페이지가 생성됩니다. 이 페이지는 삭제할 수 없으며, 사이트의 시작점 역할을 합니다. Framer는 데스크톱 중심의 디자인 방식을 가지고 있기 때문에 기본 캔버스 너비는 1200px입니다.

Note : 캔버스 바깥 영역은 실제 웹사이트에는 표시되지 않지만, 내부적으로 빠른 반복 작업이나 자산 보관용으로 유용합니다.

페이지 옵션 활용방법

좌측에 위치한 페이지 목록에서 특정 페이지에 마우스를 올리면 ••• (더보기) 버튼이 나타납니다.
(마우스 오른쪽 버튼을 클릭시에도 동일)

••• (더보기) 버튼 클릭 시 사용 가능한 주요 기능

Framer의 페이지 유형

웹 페이지

웹 페이지는 우리가 직접 디자인하고 배포(publishing)한 실제 페이지입니다. 블로그 글, 회사 소개, 기능 설명 등 사이트를 구성하는 모든 콘텐츠가 들어갑니다.

• 기본적으로 데스크톱 브레이크포인트(1200px) 기준으로 만들어집니다.

• 필요에 따라 모바일, 태블릿 등 브레이크포인트를 추가해 반응형 페이지를 만들 수 있습니다.

• 각 웹 페이지는 주소(URL)를 갖고 있고, 사이트에 직접 노출되는 콘텐츠를 담을 수 있습니다.

• 이 웹 페이지들이 모여서 전체 웹사이트의 사이트맵 구조를 이룹니다.(사이트맵 역할)

CMS 페이지

CMS 기능을 활용하면 블로그나 뉴스처럼 여러 콘텐츠가 반복되는 페이지를 자동으로 만들 수 있어요. 하나의 디자인을 기반으로 여러 항목을 빠르게 구성할 수 있어, 대규모 콘텐츠를 관리할 때 정말 편리합니다.

CMS란?
Content Management System(콘텐츠 관리 시스템)의 줄임말입니다.

• 블로그, 뉴스, 제품 목록처럼 콘텐츠가 많고 계속 바뀌는 경우에 유용합니다.

• 디자이너 없이 글만 입력하더라도 기존에 지정된 디자인으로 페이지가 만들어집니다.

CMS 페이지의 자세한 사용 방법은 'CMS 페이지 사용 방법'을 참고해주세요.

캔버스 페이지

• 디자인 자산을 자유롭게 만들 수 있는 다용도 페이지입니다.

• 웹사이트에 직접 연결되지는 않지만, 소셜 미디어 배너, 시각적 요소, 브랜드 이미지 등을 디자인하고 내보내기 할 때 유용합니다.

• 말 그대로 ‘디자인을 위한 작업 공간’입니다.

본 글은 Framer 공식 문서 'Using Pages'를 번역·각색한 콘텐츠입니다.