본문 바로가기

DeVsign

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



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

#Layer


너무 간단하기 때문에 글을 쓰는 것 조차 민망하지만, 원하는 결과가 나왔기 때문에 기념으로 글을 남긴다.

일단 레이어는 두 가지만 설정하면 되었다. 버튼과 버튼 안에 들어가는 숫자.






먼저 변수 count를 0으로 설정한다. 굳이 먼저 설정한 이유는 마음이 급해서 였는데, 지금 생각해보니 맨 앞에 두길 잘 한 것 같다. 변수나 배열 등은 맨 앞에 두는 게 정돈되어 보이는 것 같다. 실제로 countNum 위에 count변수를 정의 해 보았더니, 무언가 중간에 끼어있는 느낌이 들었다. 이제 나만의 코드 짜는 패턴이 생기기 시작하는 것 같다. 



다음으로, 숫자를 표현할 TextLayer를 생성하고 속성을 입힌다. 많은 속성들 중 가장 중요했던, text. text는 +기호와 함께 카운트 변수의 숫자를 넣도록 하였다. count에 0을 대입하였으므로, 표출되는 text는 +0 이다. 



#Events  


이제 버튼을 클릭했을 때 일어나는 동작만 구현하면 된다만, 나는 여기서 어찌할 바를 몰라서 onClick -> 까지만 적고 멘붕이 왔다고 한다. 사실 생각했던 코드는 count++였다. 그러나 count++로는 오히려 오류만 발생했다. 도대체 뭔지 아직도 모르겠다. 이럴 땐 뭐다? 검색. 카운트를 늘리는 코드를 열심히 검색했다. Docs에서는 내가 원하는 문형은 나오지 않았다. framer count++ (++는 어디서 봐 가지고 ㅋㅋㅋ)로 검색을 해 보았다. 내 나름대로 최대한 결과가 나올 만한 검색어를 입력해 본 것이다. 다행히도 facebook group에서 비슷한 코드를 발견했다. 



btn.onClick -> 

# print count

count += 1


count를 1씩 증가시킨다. 하지만 역시 아무 일도 일어나지 않았다. print를 해 보니, 다행히도 count 는 1씩 증가하고 있었다. 

아무 일도 일어나지 않는 이유는 무엇일까? 



아, 이유는 다름아닌, 버튼을 클릭했을 때 countNum에게 어떤 동작을 일으켜라, 라는 요청을 하지 않았기 때문이었다. 맙소사, 이렇게 하나씩 알게 되는구나. 버튼을 눌렀다는 걸 명확히 표시하기 위해, 클릭했을 때 버튼의 bg컬러를 랜덤하게 바꿔주는 코드도 추가하였다. 


이번 시도를 통해서 적어도 어떤 방식으로 코드를 짜야 화면이 돌아가는지 조금은 알게 되었다. 역시, 어떤 일이든 과정이 있어야 결과가 있다. 또 한 가지 깨달은 것은, 이런 어설픈 실력으로 그동안 앱 전체의 목업을 만들고 있던 내가 신기하다는 것이다.  


이제 medium 의 clap버튼을 만들 수 있을 것 같다.