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

이번에는 Framer로 아주 간단한 버튼 클릭 이벤트를 만들어보았다. 버튼을 클릭하면 카운트가 올라가는 것이다. medium의 박수 버튼을 신명나게 누른 것이 동기가 되었는데, 일단 간단한 코드부터 명확히 한 다음 실제로 박수치기 버튼을 만들어 보려 한다.

Layer, State, Event중에 State는 필요하지 않고 나머지 두 가지에 대해서 세팅했다.

#Layer

너무 간단하기 때문에 글을 쓰는 것 조차 민망하지만, 원하는 결과가 나왔기 때문에 기념으로 글을 남긴다.
일단 레이어는 두 가지만 설정하면 되었다. 버튼과 버튼 안에 들어가는 숫자.

count = 0
btn = new Layer
width: 100
height: 100
backgroundColor: “yellowgreen”
borderRadius:100
btn.center()

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

countNum = new TextLayer
text: “+” + count
parent: btn
textAlign: “center”
width: btn.width
color: “white”
fontSize: 23
fontWeight: 800
x: Align.center
y: Align.center

다음으로, 숫자를 표현할 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씩 증가하고 있었다.
아무 일도 일어나지 않는 이유는 무엇일까?

btn.onClick ->
# print count
count += 1
countNum.text = “+” + count
btn.backgroundColor = Utils.randomColor()

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

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

구현 화면 보러 가기 >

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

 

F#5 클릭했을 때 숫자 카운트가 증가하는 버튼 만들기”에 대한 1개의 생각

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다