Framer Studio

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

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

애니메이션: 스프링 물리 효과와 베지어 곡선을 사용해 3D 공간 내 임의의 레이어를 애니메이션화할 수 있습니다.

성능: CSS Transform을 활용한 하드웨어 가속으로 고프레임률을 달성합니다.

유연성: 데스크톱, 모바일, 태블릿 전반에 걸쳐 작동하며 WebKit과 완벽하게 호환됩니다.

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

인터랙션 설계: 효율적이고 즐거운 코딩 경험을 제공하는 에디터를 통해 코드 기반의 유연한 인터랙션 구현이 가능합니다.

CoffeeScript: Framer Studio는 JavaScript보다 훨씬 간결하고 가독성이 높은 CoffeeScript를 사용합니다.

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

자동 완성: Framer에 특화되어 있으며, 모든 함수, 속성, 변수 및 사용자가 정의한 레이어 이름을 지원합니다.

인라인 오류: 문제 발생 지점을 즉시 파악할 수 있습니다. 내장 JavaScript 콘솔을 통해 심층적인 디버깅이 가능합니다.

무엇이든 제작: 실시간 인터랙티브 시각 피드백, 다중 기기 지원, 전체 화면 프레젠테이션 모드를 제공합니다.

프레젠테이션: 전체 화면 프레젠테이션 모드를 사용해 프로토타입을 몰입감 있게 시연할 수 있습니다.

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

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

공유: 프로젝트를 빠르게 내보내어 어디든지 업로드할 수 있습니다. Framer 프로젝트를 공유해 협업을 쉽게 할 수 있습니다.

새로운 기능 (버전 1.11.173): 본 목록이 업데이트될 당시, 공식 출시 노트는 제공되지 않았습니다.

요구 사양: OS X 10.8 이상.

스크린샷: 광고 차단기(Ad blocker)를 사용 중이신 경우, 본 사이트를 화이트리스트에 추가하여 지원해 주세요.