Framer Studio

Framer Studio는 빠른 프로토타이핑을 위한 오픈소스 프레임워크인 Framer.js 기반으로 제작되었습니다. Framer를 사용하면 애니메이션과 상호작용을 정의할 수 있습니다. 또한 모바일 기기에서도 실행됩니다. 소스 코드는 GitHub에서 확인할 수 있습니다. 하드웨어 가속 이벤트 및 3D 애니메이션, 스프링 물리 엔진(Sptring Physics)을 지원합니다. Framer.js는 Google, Facebook, Instagram, Stripe 등에서 사용 중입니다. [생성] Sketch 및 Photoshop에서 자산을 자동 생성하여 새 프로젝트를 신속히 설정합니다.

[애니메이션] 스프링 물리 엔진과 베지어 곡선을 활용해 3D 공간 내 임의의 레이어를 애니메이션 처리합니다. [성능] CSS Transform을 통한 하드웨어 가속으로 높은 프레임률을 구현합니다. [유연성] 데스크톱, 모바일, 태블릿 전반에 걸쳐 작동하며, WebKit과도 원활하게 호환됩니다. [통합 워크플로우] Photoshop 및 Sketch와의 통합 기능을 제공하여 정적 디자인에서 직접 레이어를 가져와 인터랙티브 프로토타입으로 변환할 수 있습니다. [인터랙션 창조] 효율적이고 즐거운 코딩을 가능하게 하는 에디터를 통해 코드 기반의 유연한 인터랙션 설계를 실현합니다.

[CoffeeScript] Framer Studio는 JavaScript보다 훨씬 간결하고 가독성이 높은 CoffeeScript를 사용합니다. [코드 조각] 내장된 코드 조각 라이브러리를 제공하며, 한 번의 클릭으로 레이어와 인터랙션을 추가할 수 있습니다. [자동 완성] Framer에 특화되어 최적화되었으며, 모든 함수, 속성, 변수, 그리고 사용자가 지정한 레이어 이름을 포함합니다. [인라인 오류 표시] 문제 발생 위치를 즉시 파악할 수 있으며, 내장 JavaScript 콘솔을 통해 심층적인 디버깅이 가능합니다. [무한한 창작] 실시간 인터랙티브 시각 피드백, 다중 기기 지원, 전체 화면 프레젠테이션 모드를 제공합니다.

[프레젠테이션] 전체 화면 프레젠테이션 모드를 사용해 프로토타입을 몰입감 있게 시연할 수 있습니다. [미리보기] 작업 중에도 픽셀 단위로 정확한 실시간 미리보기를 확인할 수 있으며, 프로젝트별로 보기 모드를 맞춤 설정할 수 있습니다. [기기 미리보기] iPhone, iPad, Android 또는 전체 화면에서 프로토타입을 미리 볼 수 있습니다. [공유] 프로젝트를 빠르게 내보내어 어디든지 업로드하거나, Framer 프로젝트 자체를 공유하여 협업을 용이하게 할 수 있습니다.