Framer Studio

Framer Studio는 빠른 프로토타이핑을 위한 오픈소스 프레임워크인 Framer.js를 기반으로 제작되었습니다. Framer를 사용하면 애니메이션과 인터랙션을 자유롭게 정의할 수 있습니다. 모바일 기기에서도 동작합니다. 소스 코드는 GitHub에서 확인할 수 있습니다. 하드웨어 가속 이벤트 및 3D 애니메이션, 스프링 물리 엔진을 지원합니다. Google, Facebook, Instagram, Stripe 등에서 Framer.js를 활용하고 있습니다.

【생성】Sketch 및 Photoshop에서 자산을 자동 생성하여 새 프로젝트를 신속히 설정합니다.

【애니메이션】3D 공간 내 임의의 레이어를 스프링 물리 효과와 베지어 곡선을 이용해 애니메이션화합니다.

【성능】CSS Transform을 통한 하드웨어 가속 기능으로 높은 프레임률을 실현합니다.

【유연성】데스크톱, 모바일, 태블릿 전반에 걸쳐 호환되며, WebKit과도 원활하게 연동됩니다.

【통합 워크플로우】Photoshop 및 Sketch 연동 기능을 내장하여 정적 디자인에서 레이어를 직접 가져와 인터랙티브 프로토타입으로 변환할 수 있습니다.

【인터랙션 창조】효율적이고 쾌적한 코딩을 가능하게 하는 에디터를 통해 코드 기반의 유연한 제어를 지원합니다.

【CoffeeScript】JavaScript보다 간결하고 가독성이 높은 CoffeeScript를 채택했습니다.

【코드 조각】내장된 코드 조각 라이브러리를 통해 한 번의 클릭으로 레이어와 인터랙션을 추가할 수 있습니다.

【자동 완성】Framer에 특화된 자동 완성 기능으로, 모든 함수, 속성, 변수, 사용자가 정의한 레이어 이름을 포함합니다.

【인라인 오류 표시】오류 발생 위치를 즉시 파악할 수 있으며, 내장 JavaScript 콘솔을 통해 심층 디버깅이 가능합니다.

【자유로운 제작】실시간 인터랙티브 시각 피드백, 다중 기기 대응, 전체 화면 프레젠테이션 모드를 제공합니다.

【프레젠테이션】전체 화면 프레젠테이션 모드를 사용해 몰입감 있는 프로토타입 데모를 진행할 수 있습니다.

【미리보기】제작 중에도 픽셀 단위로 정확한 미리보기를 즉시 확인할 수 있으며, 프로젝트별로 보기 모드를 맞춤 설정할 수 있습니다.

【기기 미리보기】iPhone, iPad, Android 또는 전체 화면에서 프로토타입을 미리 볼 수 있습니다.

【공유】프로젝트를 빠르게 내보낸 후 어디든 업로드하거나, 협업을 위해 Framer 프로젝트를 쉽게 공유할 수 있습니다.

【새로운 기능(버전 1.14.9)】본 항목 업데이트 당시에는 공식적으로 출시 노트가 제공되지 않았습니다.

【시스템 요구 사양】Intel 64비트 프로세서, macOS 10.9 이상.

스크린샷: 광고 차단 확장 프로그램을 사용 중이라면, 본 웹사이트를 지원하기 위해 일시적으로 비활성화해 주시기 바랍니다.