본문 바로가기

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년은 넘은 만큼 탭바에 대한 오픈소스는 곳곳에서 찾을 수 있었다. 그러나 소스를 받아서 흉내를 내 보아도 응용이 되지 않았다. 어느 곳에서 틀린 건지 구분하는 건 능력 밖의 일이었다. 그래서 따라해본 소스는 전부 삭제하고 탭바 영역만 따로 떼어 내가 배운 지식을 토대로 처음부..
Framer도전기 #1 Utils.modulate로 텍스트 두께 조절하기 디자이너가 프레이머를 사용하기 위해서 가장 필요한 것은 '개념 이해'라고 생각한다. 지난 수업의 2주차 정도 까지는 플래시 액션 스크립트나 html 코딩의 경험이 도움이 되어 크게 어려움이 없었는데, 배열과 함수? 뭐였더라, 아무튼 '통'에 담는 얘기가 나오기 시작하면서 멘붕은 시작되었다. 왜 담는 거야 도대체? 처음에 쉽게 코드를 짤 수 있었던 이유는 그동안에 해 왔던 것들을 기반으로 개념을 확실히 이해하고 있기 때문일 것이다. 그 뒤로는 처음 접해보는 '언어'가 주는 장벽이 시작되는 것이다. 반복적으로 작업해보면 개념이 잡힐 날이 올 거라 생각하며 하나 하나 차근차근 공부를 해 보려 한다. 첫번째로 구현해 본 화면은, 슬라이더를 움직임에 따라 텍스트의 두께가 달라지는 인터랙션이다. 전자책의 설정 화면..
Framer도전기 #0 Framer를 시작하다 지난 2월부터 3월까지 패스트캠퍼스에서 'Framer로 구현하는 인터랙티브 프로토타이핑 CAMP'수업을 들었다. 매주 토요일과 일요일, 출근시간보다 더 일찍 일어나 교육장소까지 다녀오고 집에 오면 회사 일을 하고, 빠듯한 6주를 보냈다. 수업은 무사히 끝났다. 아직 복습과 응용 연습이 많이 필요해 보이지만 어쨌든 나는 프레이머의 매력에 빠져들었다. 그래서 오늘의 글을 시작으로, 프로토타이핑 도전기를 적어볼까 한다.첫 만남처음 프레이머를 접한 것은 3년 전 스케치 원데이 수업에서였다. 강사분께서 스케치 수업과 함께 아주 잠깐 시연해 주셨던 툴 중에 하나가 프레이머였다. 스케치에도 놀랐던 나는 프레이머를 보고 신세계를 경험했다. 잠깐 보았던 거지만, 프레이머를 활용해서 정교한 인터렉션을 내 손으로 표현한다면..
일본 최북단, 왓카나이 지금 나는 어디? 아래로는 오타루와 삿포로가, 바다 위로는 러시아 사할린 땅이 펼쳐지는 경계선에 뾰족하게 튀어나온 일본의 땅끝마을이 있다. 내가 지구본 위에 서 있다면 이 정도 설명 만으로도 나를 찾기 쉬울 것이다. 원래 우리는 입버릇처럼 블라디보스토크를 이야기했었다. 제주도 갈 때 배를 타고 블라디보스토크를 경유하자는 아무 말 잔치를 몇 년째 해 왔기 때문이었다. 그런데 지도를 보다 보니 바로 옆 일본의 북쪽 끝부분이 눈에 들어왔다. 지금까지 한 번도 갈 생각을 하지 않았던 곳인데 이상했다. 지도를 확대해 보았을 때 나는 ‘왓카나이’라는 지명을 처음 알게 되었고, 우리가 블라디보스토크를 가서 뭘 할 거냐며 친구에게 여행지를 바꾸자고 이야기했다. 친구는 흔쾌히 오케이를 외치며 나에게 언어를 맡겼고 본인은..
영화 최악의 하루 비가 세차게 퍼붓는 주말. 전날 새벽까지 영화를 보다가 그대로 거실에서 잠들었다. 덥고 습한 기운은 몸을 찌뿌드드하게 만들기에 늦은 아침 눈만 떠 졌지 일어나기도 앉아있기도 귀찮은 어떤 그런 날이었다. 오늘은 프레이머 코드를 짜 보겠노라고 다짐해 놓고도, 방으로 들어가는 앉는 것 조차 귀찮았다. 한 뼘이라도 움직일 때의 끈적끈적한 느낌은 4계절 중 가장 싫어하는 느낌이다. 이대로 누워서 할 것을 찾았다. 드라마도 아닌, 영화 몰아보기. 그동안 못 봤던 영화를 보기 시작했다. 어제 보다 중간쯤 부터 잠이 들어 못 다 본 영화를 끝내고, 다음으로 재생을 시작한 영화 '최악의 하루'. 무슨 내용인지도 몰랐고 요즘 계속되는 내 최악의 하루와 딱 들어맞는 타이틀이었기에 선택한 것이었다. 얼마전 50편짜리 육룡이 ..
나는 星野源의 팬이다 시작은 구스하우스유튜브에서 세 명이 夢の外へ라는 노래를 불렀다. 활짝 웃으며 기타와 피아노를 연주하는 밴드는 gooseHouse라는 일본 아티스트였다. 동호회에서 기타를 배우던 시절, 나는 이 연주에 반해서 무한 루프를 시켜 놓았고 어렵게 악보를 구해 연습을 하기도 했다. 원곡이 있다는 건 나중에서야 알았다. 키 작은 남자 하나가 기타를 치며 노래를 불렀고 어떤 퉁퉁한 회사원 아저씨가 노래에 맞춰 홀가분하게 춤을 추었다. 춤을 추는 남자가 아닌 기타 치는 남자가 바로 星野源(호시노 겐). 춤과 노래가 묘하게 어울렸다. 간주 부분에서 호시노 겐과 그 아저씨가 같이 춤을 추는데 왜지? 왜 귀엽지? 이유 없이 중독됐고 자연스럽게 이 노래는 호시노 겐에 대한 호기심으로 이어졌다.국내에 들어온 몇몇 앨범을 들어 ..