본문 바로가기

DeVsign

(18)
Framer 도전기 #8 stateCycle()로 Toggle Switch버튼 만들기 이번에는 간단하게 toggle switch button을 만들어보았다. #Layer 먼저 레이어는 토글버튼의 bg와 핸들링 할 수 있는 스위치 버튼의 두 가지다. 이때 버튼의 크기는 고정 좌표로 하지 않고 계산하는 방식을 택했다. 스위치 버튼의 크기에 따라서 toggleBG 의 사이즈도 조절되도록 짜 보았다. toggleBG의 가로사이즈는 switchBtn의 사이즈의 두배에 패딩값의 두 배를 더한 값이다. 그리고 switchBtn의 maxX를 toggleBG width값의 2분의 1로 설정하면, 토글 스위칭의 on/off위치는 toggleBG의 2분의 1기준에서 좌,우로 이동하게 설정하기 편하다. #States 이번에도 역시 stateCycle()을 이용한다. default와 다른 한 개의 state가 ..
Framer 도전기 #7 stateCycle()로 두더지 잡기 도전기 6편을 포스팅하면서 머릿속을 스쳐간 ‘두더지 잡기 게임’을 간단하게 만들어 보았다. 이번에 유용하게 쓴 코드를 세 가지 추려 본다면 이것이다. Utils.randomNumber()Utils.delay 숫자, ->Layer.stateCycle() #LAYER 레이어는 가로로 3개를 먼저 반복시켜주고, 3개 묶음을 다시 세로로 3회 반복시켜 총 9개의 홀에서 두더지가 튀어나오도록 했다. realHole은 마스크 처리될 부분을 설정한 것이고, Hole은 눈에 보이는 구멍을 설정한 것이다. 다음으로 두더지의 얼굴을 만들어 보았다. 두더지의 생김새가 매우 간단하기 때문에 프레이머의 코드 탭에서 얼굴을 표현해보기로 했다. 얼굴에는 약간의 하이라이트를 주고 눈썹, 눈, 입 레이어를 추가해 반복시켜주었다. 이때..
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 도전기 #번외편 - Lottie로 animation 만들기 프레이머 자체에서도 모션 구현이 가능하지만 더욱 정교하고 엣지 있는 애니메이션을 만들어 넣어보는 것도 괜찮을 것이다. 이번에는 Lottie Animation에 대해서 글을 써 보려 한다. Lottie 란? Lottie란 오픈소스 모바일 라이브러리로, json data파일을 만들어낼 수 있도록 도와주는 플랫폼이다. 독일 영화 감독이자 실루엣 애니메이션의 선구자인 로띠 라이네거(Lotte Reiniger)의 이름을 따서 지어졌다고 한다. 가장 잘 알려 진 그녀의 영화로는 가장 오래된 장편 영화인 ‘아흐메드 왕자의 모험’이 있는데, 이 영화는 월트 디즈니의 장편 백설 공주와 일곱 난쟁이를 10년 넘게 앞선다고 한다. 앱이나 웹에서 아래와 같이 애니메이션을 이용한 피드백이 많아졌다. 트위터에서 좋아요를 눌렀을 ..
Framer 도전기 #3 Tab Bar 의 활성/비활성 상태 인지하기 이 화면에서 나는 화면의 stack 구조를 어떻게 짜야 할 지가 가장 힘들었던 것 같다. 먼저 각 메뉴를 눌렀을 때 뜰 다섯개의 화면이 필요한데, 팝업을 제외한 나머지 화면은 하단 tab bar보다 아래 뎁스에 위치해야 하므로 가장 위에는 tab bar가, 그 아래에는 각 메뉴의 화면들을 놓으면 될 거라 생각했다. 그러면 flow밖에 tab bar를 빼 놓고, flow안에는 화면 네 개를 놓고, 가운데 화면은 tab bar위로 어떻게 쌓냐능????????그래서 생각한 것이, 세번째 버튼을 눌렀을 때는 탭바가 아래로 사라진 후 팝업이 스윽 위로 뜨면 되지 않을까? 였다. 그렇게 하면 세번째 화면이 flow 아래 있더라도 눈속임이 가능할 것 같으므로.먼저 Tabs의 state를 셋팅하고, 기본 상태는 화면 ..
Framer도전기 #2 Tab Bar 구현하기 취미생활로 끝인 줄만 알았는데, 어느새 회사에서 프레이머로 목업을 제작중인 나를 발견 후덜덜. 거기에 더하여 이 작업에 집중할 수 있도록 다른 업무가 배제되었다.(꿀) 6주 클래스 이후로 본격적인 앱 프로토타입을 만들어낸다는 게 쉽지 않지만, 날마다 차근차근 구현에 성공함으로써 성취감을 느끼고 있다. 그중 가장 뿌듯했던 것은, 몇 번의 도전 끝에 Tab Bar 활성탭/비활성탭의 구조를 구현했다는 것이다. 프레이머가 출시된 지 최소 4년은 넘은 만큼 탭바에 대한 오픈소스는 곳곳에서 찾을 수 있었다. 그러나 소스를 받아서 흉내를 내 보아도 응용이 되지 않았다. 어느 곳에서 틀린 건지 구분하는 건 능력 밖의 일이었다. 그래서 따라해본 소스는 전부 삭제하고 탭바 영역만 따로 떼어 내가 배운 지식을 토대로 처음부..