Framer 로고 버튼

• 툴바의 가장 왼쪽에 위치합니다.

• 프로젝트 관련 메뉴(새 프로젝트 만들기, 불러오기, 설정 등)를 열 수 있습니다.

• 맥의 메뉴바와 유사한 역할이에요.

Insert

• + 아이콘으로 표시됩니다.

• 텍스트, 버튼, 이미지, 컴포넌트 등 다양한 요소를 삽입하는 패널을 노출시킵니다. (단축키:
  I)

• 디자이너의 도구 상자 같은 역할이에요.

Layout

• 프레임 또는 그리드 레이아웃 삽입할때 사용합니다.

• 반응형 웹 디자인 설계에 유용합니다.

Text

• 텍스트 박스를 삽입할 수 있습니다.

• 클릭 후 바로 입력하거나 위치 지정이 가능합니다.

Vector

• 기본 도형 또는 커스텀 경로(Path)를 그릴 수 있습니다.

• 로고, 아이콘, 일러스트레이션 작업에 활용됩니다.

CMS

• 콘텐츠 관리 시스템 (CMS) 패널로 들어갈 때 사용합니다.

• 블로그, 제품 목록 등 반복 콘텐츠 구성과 관리에 적합합니다.

프로젝트 Name

• 클릭하면 프로젝트 이름을 바꾸거나 폴더 위치를 변경할 수 있습니다.

• 퍼블리싱된 사이트라면, 그 옆에 사이트 URL이 뜨고 클릭하면 바로 열어볼 수 있어요.

협업자 표시

• 현재 이 프로젝트에 접속 중인 팀원들의 프로필 이미지가 표시됩니다.

• 실시간 협업이 가능하며, 마우스를 올리면 누가 어떤 작업을 하고 있는지 확인할 수 있습니다.

Localization

• 프로젝트의 언어 및 지역 설정을 할 수 있습니다. 다국어 웹사이트를 제작할 때 이 설정을 통해 지역별 콘텐츠를 분기해 보여줄 수 있습니다.

• 언어마다 별도 URL을 연결하거나 텍스트를 다르게 설정하는 것이 가능합니다.

Settings

• 현재 페이지 또는 전체 사이트의 세부 설정창입니다.

• SEO, Favicon, Open Graph, 웹사이트 배경 색상 등 각종 환경 설정을 조절할 수 있어요.

• 모바일 뷰와 데스크톱 뷰의 초기 화면 설정도 여기서 변경 가능합니다.

Preview 모드

• 내가 만든 페이지를 실제 브라우저처럼 미리 볼 수 있는 모드입니다.

• 반응형 뷰를 테스트하거나 인터랙션이 어떻게 작동하는지 확인할 때 유용해요.

• 새 탭에서 열리지 않고 Framer 내부에서 바로 확인 가능해 빠릅니다.

Invite 버튼

• 다른 사용자를 이 프로젝트에 협업자로 초대할 수 있습니다.

• 이메일 주소 또는 Framer 계정을 통해 초대 가능하며, 권한 설정도 지원합니다 (보기 전용, 편집 가능 등).

Publish 버튼

• 웹사이트를 실제 인터넷에 공개(Publish)하는 기능입니다.

• 처음 한 번만 퍼블리시하면 공개 URL이 생성되고, 그 후부터는 변경 사항이 있을 때마다 업데이트할 수 있습니다.

Pages

• 프로젝트 안의 각 페이지들을 관리해요. 새로 만들거나 편집할 수 있습니다.

Layers

• 현재 페이지 안에 있는 모든 요소(텍스트, 버튼, 프레임 등)를 계층 구조로 보여줍니다.

• 상단의 Page Switcher를 통해 다른 페이지로 바로 전환도 가능해요.

Assets

• 프로젝트에 있는 컴포넌트, 스타일, 코드 파일들을 한 곳에서 관리할 수 있어요. Figma를 써본 사람이라면, Layers 패널과 거의 똑같이 느껴질 거예요.

속성 패널 (Properties Panel)

• 어떤 요소를 선택했느냐에 따라 내용이 달라지는 컨텍스트 기반 패널입니다.

• 텍스트 박스를 선택하면 폰트, 크기, 간격 같은 텍스트 관련 설정이 나오고, Breakpoint를 선택하면 반응형 레이아웃 관련 설정만 보입니다.

Pan Tool

• 캔버스를 자유롭게 이동할 수 있는 도구입니다.

• Spacebar를 누른 상태로 드래그하면 화면 전체를 이동할 수 있어요.

• 작업 범위가 넓어질수록 자주 사용하게 되는 기본 조작 도구입니다.

Comment Tool

• 디자인에 피드백을 남기고 주석을 다는 도구입니다.

• 원하는 위치에 클릭하여 댓글을 입력할 수 있으며, 협업 시 매우 유용합니다.

• 실시간 커뮤니케이션이 가능해 작업 흐름을 간결하게 만들어줘요.

Day/Night 모드 전환

• 인터페이스와 함께 사이트 테마까지 동시에 라이트/다크 모드로 전환할 수 있습니다.

• 디자인 중 시각적인 대비를 체크하거나, 프리뷰 화면을 상황별로 테스트할 때 유용합니다.

Zoom 도구

• 캔버스를 확대/축소해서 작업 영역을 조절할 수 있어요.

• 단축키: 
  Zoom to Fit: Shift + 1 (전체 보기) 
  Zoom to Selection: Shift + 2 (선택 요소 중심 보기)  
  Zoom to 100%: Shift + 0 (실제 크기 보기)

• 확대 상태로만 작업하다 보면 실제 비율이 헷갈릴 수 있으니, 종종 100%로 확인해보는 습관을 기르는 것이 좋습니다.