본문 바로가기

framer

(5)
Framer 도전기 #6 Medium의 박수치기 버튼 만들기 카운트 올리는 코드를 완성하고, 미디엄 박수 버튼에 응용해 보기로 했다. 미디엄의 박수치기 버튼은 일반적으로 사용하는 좋아요 버튼(좋아요/ 좋아요 취소의 두 가지 케이스 토글 스위칭)과는 달리, 내가 마음에 드는 대로 박수치는 횟수를 더해줄 수 있다는 것이 특징이다. 아주 마음에 드는 포스트에는 열 번이고 스무 번이고 박수를 쳐 주는데, 메타포의 의미와도 잘 부합하는 것이 상당히 매력적인 기능이라 생각한다. #Layer 일단 프레이머 디자인 탭에서는 손 모양을 만들어준다. 미디엄과 같은 모양은 아니지만, 대략 박수를 치는 의미에 접근만 가능할 정도로 만들어 주었다. hands로 이름을 지었다.화면은 일반 canvas로 사용하고, 애니메이션 영역을 캔버스 전체로 지정해준다. 버튼을 가운데로 정렬시켜주고 카..
Framer 도전기 #5 클릭했을 때 숫자 카운트가 증가하는 버튼 만들기 이번에는 Framer로 아주 간단한 버튼 클릭 이벤트를 만들어보았다. 버튼을 클릭하면 카운트가 올라가는 것이다. medium의 박수 버튼을 신명나게 누른 것이 동기가 되었는데, 일단 간단한 코드부터 명확히 한 다음 실제로 박수치기 버튼을 만들어 보려 한다. Layer, State, Event중에 State는 필요하지 않고 나머지 두 가지에 대해서 세팅했다. #Layer 너무 간단하기 때문에 글을 쓰는 것 조차 민망하지만, 원하는 결과가 나왔기 때문에 기념으로 글을 남긴다.일단 레이어는 두 가지만 설정하면 되었다. 버튼과 버튼 안에 들어가는 숫자. 먼저 변수 count를 0으로 설정한다. 굳이 먼저 설정한 이유는 마음이 급해서 였는데, 지금 생각해보니 맨 앞에 두길 잘 한 것 같다. 변수나 배열 등은 맨 ..
Framer 도전기 #4 Lottie를 Framer에 적용하기 전편에 이어서, 이번에는 lottie animation을 활용하여 Framer에 적용해 보겠다. 아래 목업의 애니메이션은 회사 프로젝트 중 어그러진 작업물이라 부분적으로 올려 본다. 음성 명령과 사운드검색을 장면 전환 없이 한 화면에서 동작해볼 수 있게 프로토타이핑 한 것이다. 그럼 시작. 첫번째로 Illustrator에서 오브젝트를 제작한 후 After Effect에서 애니메이션을 제작, BodyMovin 플러그인을 이용하여 json data파일을 뽑아낸다. 하나는 음성을 듣는 중이라는 애니메이션, 또하나는 음표의 잔상이 남는 애니메이션이다. 두 개의 json date 파일은 작업하고 있는 Framer프로젝트의 images폴더 안에 넣어 둔다. 프레이머의 디자인 탭에는 음성 명령(말풍선 메타포, ico..
Framer 도전기 #3 Tab Bar 의 활성/비활성 상태 인지하기 이 화면에서 나는 화면의 stack 구조를 어떻게 짜야 할 지가 가장 힘들었던 것 같다. 먼저 각 메뉴를 눌렀을 때 뜰 다섯개의 화면이 필요한데, 팝업을 제외한 나머지 화면은 하단 tab bar보다 아래 뎁스에 위치해야 하므로 가장 위에는 tab bar가, 그 아래에는 각 메뉴의 화면들을 놓으면 될 거라 생각했다. 그러면 flow밖에 tab bar를 빼 놓고, flow안에는 화면 네 개를 놓고, 가운데 화면은 tab bar위로 어떻게 쌓냐능????????그래서 생각한 것이, 세번째 버튼을 눌렀을 때는 탭바가 아래로 사라진 후 팝업이 스윽 위로 뜨면 되지 않을까? 였다. 그렇게 하면 세번째 화면이 flow 아래 있더라도 눈속임이 가능할 것 같으므로.먼저 Tabs의 state를 셋팅하고, 기본 상태는 화면 ..
Framer도전기 #0 Framer를 시작하다 지난 2월부터 3월까지 패스트캠퍼스에서 'Framer로 구현하는 인터랙티브 프로토타이핑 CAMP'수업을 들었다. 매주 토요일과 일요일, 출근시간보다 더 일찍 일어나 교육장소까지 다녀오고 집에 오면 회사 일을 하고, 빠듯한 6주를 보냈다. 수업은 무사히 끝났다. 아직 복습과 응용 연습이 많이 필요해 보이지만 어쨌든 나는 프레이머의 매력에 빠져들었다. 그래서 오늘의 글을 시작으로, 프로토타이핑 도전기를 적어볼까 한다.첫 만남처음 프레이머를 접한 것은 3년 전 스케치 원데이 수업에서였다. 강사분께서 스케치 수업과 함께 아주 잠깐 시연해 주셨던 툴 중에 하나가 프레이머였다. 스케치에도 놀랐던 나는 프레이머를 보고 신세계를 경험했다. 잠깐 보았던 거지만, 프레이머를 활용해서 정교한 인터렉션을 내 손으로 표현한다면..