Framer js Study - 김세환의 Framer 스터디

김세환의 Framer 스터디

[Day 1] 프레이머 설치하기

[Day 1] 프레이머 설치하기30일간의 Framer.js 스터디 | 프레이머를 설치하기 위해서 프레이머 웹사이트로 이동합니다. 웹브라우저 주소창에 아래의 경로를 입력합니다. https://framerjs.com/ <그림. 프레이머 공식 사이트> 그러면 프레이머 공식 사이트로 연결되며 프레이머 IDE를 다운로드할 수 있습니다. 프레이머는 유료 소프트웨어($129)이지만 구입하기 전에 트라이얼 버전을 사용할 수 있습니다.

[Day 2] 미니 프로젝트 따라 해보기

[Day 2] 미니 프로젝트 따라 해 보기30일간의 Framer.js 스터디 | 이번엔 프레이머를 실행해보고 간단한 프로젝트를 수행해보겠습니다. 먼저 프레이머를 실행합니다. <그림. 프레이머 팝업> 실행하게 되면 우측에 예전에 썼던 파일들의 리스트가 나오고 좌측에는 샘플을 볼 수 있는 네 개의 버튼이 있습니다. 네 개의 버튼에 해당되는 샘플의 종류는 애니메이션, 스위치 버튼, 스크롤, 페이지슬라이드등의 예제입니다. 기본 코드들이므로

[Day 3] 레이어 생성하기

[Day 3] 레이어 생성하기30일간의 Framer.js 스터디 | 이번 시간에는 레이어에 대해서 알아보겠습니다. 레이어는 계층구조를 의미합니다. 포토샵이나 일러스트레이터를 예를 들면 , 레이어마다 이미지가 들어있고 이 레이어들을 겹쳐서 하나의 이미지로 나타내게 되죠. 프레이머에서도 이런 레이어 개념을 가지고 있습니다. <그림. 레이어 계층을 가진 프레이머> 위 이미지처럼 레이어는 아래부터 위로 쌓이게 됩니다. 결과창을

[Day 4] 레이어 속성 창

[Day 4] 레이어 속성 창30일간의 Framer.js 스터디 | 레이어 속성 창에서 값 조절해보기 <그림. 빈 레이어> 현재 레이어 코드는 생성되었지만 아무 내용도 없습니다. 레이어의 속성들은 코드로 작성해서 변경할 수도 있고 , 속성 창을 이용할 수도 있습니다. 여기서는 속성 창을 이용해서 수정해보도록 하겠습니다. 속성 창을 표시하기 위해서 위 그림 1번 항목의 layerA = new Layer 구문 왼쪽의 작은

[Day 5] 레이어 결과창에서 조절해보기

[Day 5] 레이어 결과창에서 조절해보기30일간의 Framer.js 스터디 | 결과창(Preview)에서 레이어 조절해보기 <그림. 결과창에서 변형> 레이어의 속성 중 크기, 위치, 회전, 배율 등의 속성은 우측의 결과창에서도 바꿀 수 있습니다. 소스코드 창 레이어 소스코드 왼쪽에 있는 작은 속성 버튼을 클릭하면 가운데 속성이 표시되고 우측의 결과창에 있는 레이어 귀퉁이에 동그란 모양의 버튼들이 생성된 걸 볼 수 있습니다. 크기

[Day 6] 이미지 사용하기

[Day 6] 이미지 사용하기30일간의 Framer.js 스터디 | 프레이머에서는 대부분의 웹용 이미지 포맷을 지원하고 SVG포맷을 사용한 애니메이션이나 여러 재미있는 연출도 가능합니다. 이미지 불러오는 방법 프레이머에서 이미지를 불러오는 방법은 몇 가지가 있습니다. 어떤 방법으로 만들어도 기본적으로 이미지는 레이어에 담아서 보여주게 됩니다. (1) 이미지 파일을 프레이머로 드래그 앤 드롭하기 <그림. 드래그 앤 드롭

[Day 7] 이미지 필터 적용하기

[Day 7] 이미지 필터 적용하기30일간의 Framer.js 스터디 | <그림. 필터가 적용되지 않은 이미지> 프레이머에서는 이미지에 적용할 수 있는 필터들이 있습니다. 필터들은 위의 표에 표시된 것처럼 여러 가지가 있습니다. 차근차근 적용해보면서 필터에 대해 알아보도록 하겠습니다. 필터 속성 보기 먼저 필터를 적용하기 위해서는 소스코드에서 이미지가 포함된 레이어의 좌측 속성 버튼을 클릭합니다. 그럼 가운데 속성 창 아래쪽

[Day 8] 애니메이션 기초

[Day 8] 애니메이션 기초30일간의 Framer.js 스터디 | 프레이머에서 레이어의 속성이 바뀔때 부드러운 전환 효과를 주기 위해서 애니메이션을 사용합니다. 예를 들어 이미지가 다른 이미지로 바뀔때 순간적으로 바뀌는것보다는 부드럽게 사라지면서 등장한다거나 배경색상을 변경하는 행동을 할때 색상이 자연스럽게 섞이면서 전환되면 더욱 멋스럽게 보이게 됩니다. 이번에는 애니메이션 기초에 대해 공부해 보겠습니다. 애니메이션 기

[Day 9] 레이어 애니메이션 추가

[Day 9] 레이어 애니메이션 추가30일간의 Framer.js 스터디 | 프레이머는 코드기반의 툴이기 때문에 애니메이션도 역시 코드를 알고 있다면 그냥 코딩으로 만들수 있습니다. 하지만 프레이머 메뉴에 'Layer Animation' 이라는 항목이 추가되어 이제 간단하게 애니메이션을 만들 수 있습니다. [탭매뉴 - Layer Animation - 원하는 레이어 선택] <그림. Layer Animation 메뉴> 탭에서 'L

[Day 10] 애니메이션 속성 패널 사용하기

[Day 10] 애니메이션 속성 패널 사용하기30일간의 Framer.js 스터디 | 애니메이션 속성 패널 사용하기 애니메이션 기능중에 애니메이션 속성 패널을 이용하면 애니메이션 관련 속성을 손쉽게 변경 할 수 있습니다. 기능이 많지는 않으므로 간단하게 알아보도록 하겠습니다. <그림. Layer Animation 생성> 먼저 레이어를 생성하고 Layer Animation을 클릭해서 애니메이션을 만듭니다. <그림. 애니메이션 패널 선택>

[Day 11] 프레이머 이벤트의 종류

[Day 11] 프레이머 이벤트의 종류30일간의 Framer 스터디 | 이벤트란? 프로그래밍에서 이벤트는 요소에 어떤 사건이 일어나는 것을 의미합니다. 버튼이 클릭되거나 화면을 스와이프하거나 페이지가 스크롤되거나 애니메이션이 시작하고 끝나는 등의 어떤 일이 일어나는 모든 것이 이벤트라고 볼 수 있습니다. 어렵다면 우선은 ‘어떤 요소에 무슨 일이 생기는 것’ 정도로 이해하셔도 됩니다. 차근 차근 공부하다보면 감을 익히게 되실 겁

[Day 12] 이벤트 추가하기

[Day 12] 이벤트 추가하기30일간의 Framer 스터디 | 레이어에 이벤트를 추가하는 방법은 크게 툴바의 ‘Insert’ 메뉴를 이용하는것과 소스코드를 직접 입력하는 방법이 있습니다. 소스코드를 입력하는 방법은 프로그래밍이 익숙하거나 적응이 된 후에 사용하도록 하고 여기서는 ‘Insert’메뉴를 이용하는 방법에 대해 알아보겠습니다. <그림. 이벤트를 지정해줄 레이어를 추가> 툴바의 Insert 메뉴로 이벤트 추

[Day 13] 탭 이벤트

[Day 13] 탭 이벤트30일간의 Framer 스터디 | 탭,터치,클릭? 탭,터치,클릭은 약간의 차이는 있지만 화면이나 버튼을 ‘한번 눌렀다 뗀다’라고 보면 됩니다. 또한 이 동작을 ‘누른다’ - ‘누른상태 유지’ - ‘뗀다’라고 나눠서 생각하시는게 좋습니다. 왜냐하면 프레이머에서는 이 나뉜 동작을 모두 감지할 수 있고 이 나뉜 동작들 중간중간에 여러 가지 기능을 만들어서 넣을수도 있기 때문입니다. 연습준비

[Day 14] 터치 이벤트

[Day 14] 터치 이벤트30일간의 Framer 스터디 | 터치(Touch) 터치(Touch)이벤트는 디바이스의 화면에 접촉하는 것을 말합니다. 탭과 다른점은 TouchMove라는 이벤트가 있다는 점입니다. TouchStart 이벤트는 레이어에 접촉이 되자마자 호출되는 이벤트이고 TouchEnd 이벤트는 접촉에 떼어질때 호출되는 이벤트입니다. 그리고 TouchMove는 디바이스의 화면에 손가락을 접촉을 한 상태로

[Day 15] 클릭 이벤트

[Day 15] 클릭 이벤트30일간의 Framer 스터디 | 클릭(Click) 클릭(Click) 이벤트는 PC에서 마우스 왼쪽 버튼을 눌렀다 떼는것을 의미합니다. Click 이벤트를 추가하고 테스트를 해보면 마우스 버튼을 눌렀을때는 일어나지 않고 마우스버튼에서 손가락을 떼었을때 발생합니다. 그래서 이 클릭 이벤트는 결과적으로 MouseUp 이벤트와 동일합니다. 만약 마우스가 눌리자마자 이벤트가 발생해야 한다면 Cli

[Day 16] AnimationStart 이벤트

[Day 16] AnimationStart 이벤트30일간의 Framer 스터디 | 애니메이션 이벤트 활용 프레이머의 애니메이션에는 이벤트를 추가할 수 있습니다. 애니메이션이 끝난 후 다른 일을 수행하거나 애니메이션이 시작할때 다른 효과를 추가하는 등의 기능을 애니메이션의 이벤트를 사용해서 구현할 수 있습니다. 이번에는 프레이머에서 지원하는 애니메이션의 이벤트에 대해서 배워보고 활용하는 방법을 알아보도록 하겠습니다. <그림. 애니메이션

[Day 17] AnimationEnd 이벤트

[Day 17] AnimationEnd 이벤트30일간의 Framer 스터디 | AnimationEnd AnimationStart가 ‘애니메이션이 시작되자마자’ 라면 AnimationEnd는 ‘애니메이션이 끝나자마자’ 발생하는 이벤트입니다. AnimationStart 예제에 계속해서 AnimationEnd 이벤트를 추가해 보겠습니다. 애니메이션이 끝날때 발생하는 이벤트를 추가하기 위해 ‘Insert’ - ‘Event’ - ‘ball’

[Day 18] AnimationStop 이벤트

[Day 18] AnimationStop 이벤트AnimationStop 애니메이션이 시작할때와 끝날때를 알아보았는데 AnimationStop 뭘까요? 이 이벤트는 애니메이션이 y:1000 위치에 가기전에 애니메이션이 중단될때 발생하는 이벤트입니다. 먼저 테스트를 위해 버튼으로 사용할 레이어를 한개 추가하겠습니다. 이 버튼을 누르면 애니메이션이 도중에 중단하는 기능을 수행합니다. (1) ‘Insert’

[Day 19] AnimationDidStart/End

[Day 19] AnimationDidStart/EndAnimationDidStart & AnimationDidEnd AnimationDidStart 이벤트와 AnimationDidEnd 이벤트는 각각 애니메이션이 시작된 직후, 애니메이션이 끝난 직후를 의미하는 이벤트입니다. AnimationDidStart 이벤트는 AnimationStart 이벤트가 실행하고 바로 뒤에 감지되는 이벤트이고, Animati

[Day 20] States - 상태 추가하기

[20] States - 상태 추가하기프레이머에서는 여러 상황에 대해 나누어 설정할수 있도록 State(상태)라는 값을 제공합니다. 여러 상태를 미리 만들어두고 실제 사용자의 입력이 들어왔을때는 상태값만 변경해서 여러 모습으로 보여줄 수 있습니다. 예를들어 이미지 갤러리를 생각해보겠습니다. 여러개의 작은 이미지가 있고 원하는 이미지를 선택해서 클릭하면 큰 이미지를 볼 수 있겠죠. 이때 작은

[Day 21] State - 상태 속성값 패널

[21] State - 상태 속성값 패널상태에 속성패널을 이용하기 상태에 따른 속성값을 소스코드에서 작성할 수 있지만 직관적으로 보고 변경하기엔 불편한 점도 많습니다. 상태마다 속성값을 속성패널과 결과창에서 변경하는 방법에 대해 알아보겠습니다. 먼저 레이어를 만들고 ‘Insert’ - ‘State’ -‘layerA’ 에서 상태를 하나 추가합니다. 그러면 속성 패널이 자동으로 켜집니다. <그

[Day 22] State - 전환 애니메이션 바꾸기

[22] State - 전환 애니메이션 바꾸기상태 전환 애니메이션 속성 바꾸기 상태 전환할때 보여지는 애니메이션을 변경할 수 있습니다. 각각의 상태에 따로 적용할 수도 있고 공통으로 효과를 주고 싶으면 states.animationOptions 속성값을 이용하면 됩니다. 이 속성값을 통해 애니메이션의 설정들을 모두 사용할 수 있고, 상태값 전환시에 사용되는 애니메이션 효과를 지정할 수 있습니다.

[Day 23] 디자인 탭에 클립보드로 이미지 붙여넣기

[23] 디자인탭에 클립보드로 이미지 붙여넣기<글에 앞서 사족...> 안녕하세요. 오랫만에 매거진에 글을 작성합니다. 개인 사정으로 연재를 쉬었습니다. 기다리신 분들께 죄송합니다. 앞으로는 짧은 내용이라도 꾸준히 올릴수 있도록 노력해보겠습니다! 클립보드를 이용해 디자인탭에 이미지 붙여넣기 이번 시간엔 간단한 내용입니다. 한마디로 포토샵에서 프레이머로 복사해서 붙여넣기가 가능합니다. (스케치도 가능합

[Day 24] 디자인 탭의 레이어를 코드에서 사용하기

[24] 디자인탭의 레이어를 코드에서 사용하기디자인탭의 레이어를 코드에서 사용하기 1. 디자인탭의 이미지들을 코드 탭에서 활용하기 위해 준비해 보겠습니다. 2. 아래와 같이 레이어창에 이미지 레이어들이 보이는지 확인합니다. 만약 레이어 리스트가 보이지 않는다면 이미지를 한번 클릭해줍니다. 3. 이미지 레이어중 하나에 마우스를 갖다 댑니다 .그러면 레이어 이름 우측에 두 겹의 동그라미 버튼이 생깁니

Google Sites

Report abuse