F#번외편 Framer X Beta 와의 만남

대기번호 1751번. 초대장을 손꼽아 기다려 왔는데, 드디어 Your Framer X Beta invite라는 제목의 메일을 받았다. 왔네왔어. 다운로드를 받습니다. 일단 지금 난 너무 떨리므로, 어떤 것도 제대로 해 볼 수 없을 것이다. 그보다는 Framer와 언어부터 다르기 때문에 건드릴 수 없다는 것을 알고 있다. 대략적인 리뷰를 해 보도록 하겠다. 기분탓인가 다운로드 속도는 왜 이리도 느린 것인가. 빨리빨리. 설치…

Read More

F#8 stateCycle()로 Toggle Switch Button 만들기

좀 있으면 Framer X Beta를 받아볼 수 있다. 이미 받아서 사용하고 있는 사람들도 있다. 인터랙션을 바로 사용 가능하게 하는 라이브러리가 생겼더라. 그걸 바로 끌어다 사용하는 예고편 영상을 보았다. 드래그 앤 드롭을 했을 뿐인데 그냥 움직인다. 나는 그런 걸 수동으로 코드 짜는 재미를 이제야 맛보고 있는데, 동적인 요소를 키트로 만든 라이브러리라니 약간 김이 샌다. 뭐 간편하게…

Read More

F#7 Layer.stateCycle()로 두더지 잡기

   F#6을 포스팅하면서 머릿속을 스쳐간 ‘두더지 잡기 게임’을 간단하게 만들어 보았다. 이번에 유용하게 쓴 코드를 세 가지 추려 본다면 이것이다. Utils.randomNumber() Utils.delay 숫자, -> Layer.stateCycle() #LAYER 레이어는 가로로 3개를 먼저 반복시켜주고, 3개 묶음을 다시 세로로 3회 반복시켜 총 9개의 홀에서 두더지가 튀어나오도록 했다. for i in [0…3] gameBox = new Layer width: 280 height:…

Read More

F#6 medium 박수치기 버튼 만들기

카운트 올리는 코드를 완성하고, 미디엄 박수 버튼에 응용해 보기로 했다. 미디엄의 박수치기 버튼은 일반적으로 사용하는 좋아요 버튼(좋아요/ 좋아요 취소의 두 가지 케이스 토글 스위칭)과는 달리, 내가 마음에 드는 대로 박수치는 횟수를 더해줄 수 있다는 것이 특징이다. 아주 마음에 드는 포스트에는 열 번이고 스무 번이고 박수를 쳐 주는데, 메타포의 의미와도 잘 부합하는 것이 상당히 매력적인 기능이라…

Read More

F#5 클릭했을 때 숫자 카운트가 증가하는 버튼 만들기

이번에는 Framer로 아주 간단한 버튼 클릭 이벤트를 만들어보았다. 버튼을 클릭하면 카운트가 올라가는 것이다. medium의 박수 버튼을 신명나게 누른 것이 동기가 되었는데, 일단 간단한 코드부터 명확히 한 다음 실제로 박수치기 버튼을 만들어 보려 한다. Layer, State, Event중에 State는 필요하지 않고 나머지 두 가지에 대해서 세팅했다. #Layer 너무 간단하기 때문에 글을 쓰는 것 조차 민망하지만, 원하는 결과가…

Read More

F#4 lottie animation을 Framer에 적용하기

Lottie Animation에 대해서 정리한 글에 이어서, 이번에는 lottie animation을 활용하여 Framer에 적용해 보겠다. 아래 데모 영상의 애니메이션은 회사 프로젝트 중 어그러진 작업물이라 부분적으로 올려 본다. 음성 명령과 사운드검색을 장면 전환 없이 한 화면에서 동작해볼 수 있게 프로토타이핑 한 것이다. 그럼 시작. 첫번째로 Illustrator에서 오브젝트를 제작한 후 After Effect에서 애니메이션을 제작, BodyMovin 플러그인을 이용하여 json data파일을…

Read More

F#번외편 lottie로 animation 만들기

요즘 프레이머를 다루면서 관련된 툴이나 기능들을 많이 보게 된다. 프레이머 자체에서도 모션 구현이 가능하지만 더욱 정교하고 엣지 있는 애니메이션을 만들어 넣어보는 것도 괜찮을 것이다. 그래서 요즘 아주 솔깃한 Lottie Animation에 대해서 글을 써 보려 한다. Lottie 란? Lottie란 오픈소스 모바일 라이브러리다. json data파일을 만들어낼 수 있도록 도와주는 플랫폼이다. 독일 영화 감독이자 실루엣 애니메이션의 선구자인 로띠…

Read More

F#3 Tab Bar 버튼의 활성/비활성 상태 인지하기

 이 화면에서 나는 화면의 stack 구조를 어떻게 짜야 할 지가 가장 힘들었던 것 같다. 먼저 각 메뉴를 눌렀을 때 뜰 다섯개의 화면이 필요한데, 팝업을 제외한 나머지 화면은 하단 tab bar보다 아래 뎁스에 위치해야 하므로 가장 위에는 tab bar가, 그 아래에는 각 메뉴의 화면들을 놓으면 될 거라 생각했다. 그러면 flow밖에 tab bar를 빼 놓고, flow안에는…

Read More

F#2 Tab Bar 구현하기

취미생활로 끝인 줄만 알았는데, 어느새 회사에서 프레이머로 목업을 제작중인 나를 발견 후덜덜. 거기에 더하여 이 작업에 집중할 수 있도록 다른 업무가 배제되었다.(꿀) 6주 클래스 이후로 본격적인 앱 프로토타입을 만들어낸다는 게 쉽지 않지만, 날마다 차근차근 구현에 성공함으로써 성취감을 느끼고 있다. 그중 가장 뿌듯했던 것은, 몇 번의 도전 끝에 Tab Bar 활성탭/비활성탭의 구조를 구현했다는 것이다. 프레이머가 출시된…

Read More

F#1 Utils.modulate를 이용한 텍스트 두께 조절

디자이너가 프레이머를 사용하기 위해서 가장 필요한 것은 ‘개념 이해’라고 생각한다. 지난 수업의 2주차 정도 까지는 플래시 액션 스크립트나 html 코딩의 경험이 도움이 되어 크게 어려움이 없었는데, 배열과 함수? 뭐였더라, 아무튼 ‘통’에 담는 얘기가 나오기 시작하면서 멘붕은 시작되었다. 왜 담는 거야 도대체? 처음에 쉽게 코드를 짤 수 있었던 이유는 그동안에 해 왔던 것들을 기반으로 개념을 확실히 이해하고 있기 때문일…

Read More