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.14.14): 본 항목 업데이트 당시 공식 릴리스 노트가 제공되지 않았습니다.

필요 사양: Intel 64비트 프로세서, macOS 10.9 이상.

스크린샷: 광고 차단기 사용 중이신 경우, 이 웹사이트를 적극적으로 지원해 주세요.