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

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

첫번째로 구현해 본 화면은, 슬라이더를 움직임에 따라 텍스트의 두께가 달라지는 인터랙션이다.
전자책의 설정 화면에서 글자 크기를 조절하는 것에서 착안하였다. 사용한 코드는 배열과 반복문, 드래그모듈레이터이다.
전체적인 플로우를 머릿속으로 그려본 후 Layer, State, Event 차례대로 세팅한다.

#Layer

레이어링은 디자이너가 굉장히 쉽게 접근할 수 있다. 특히 html/css를 다룰 줄 아는 디자이너라면 훨씬 쉽게 다가올 것이다.
먼저 검은색의 백그라운드 레이어를 추가하여 기본 bg를 생성해 준다.
그다음은 3개의 텍스트를 꺼내 쓸 배열을 세팅한다. 한국어, 영어, 일본어를 차례로 쓸 것이니 순서대로 적어 묶어 놓는다. texts라는 변수명에 할당한다.

이 세 가지 텍스트는 사이즈, 두께가 같으므로 반복문을 이용하여 같은 스타일의 폰트 3개를 반복시킬 것이다. fonts라는 빈 통을 준비한다. 반복문에서 생성된 텍스트 레이어를 담을 통이다.

1 bg = new BackgroundLayer
2 backgroundColor: “black”
3
4 texts = [“가”, “A”, “あ”]
5 fonts = []
6

이제 fonts라는 통에 담을 텍스트레이어 3개를 만들어 준다. 반복문의 순번은 0부터 시작한다.
폰트에 대한 구체적인 특징을 세팅한 뒤, 생성된 3개의 폰트를 fonts라는 통에 담아준다.
아직 스타일을 지정할 때 “”를 어느 부분에서 써야 하는지는 이해가 가지 않는 상태다.
이건 framer docs를 찾아보면서 작성한다.

7 for i in [0…3]
8 font = new TextLayer
9 width: Screen.width/3
10 text: texts[i]
11 fontSize: 120
12 fontWeight: 100
13 x: i * Screen.width/3
14 y: Align.center()
15 color: “white”
16 textAlign: “center”
17
18 fonts.push(font)

이제 핸들러를 만들어 준다. 컨트롤 할 수 있는 바 형태를 만든다.

19 progressBar = new Layer
20 width: 300
21 height: 20
22 borderRadius: 20
23 x: Align.center
24 y: 500
25 backgroundColor: “342562”
26

ball이라는 변수명으로 컨트롤할 수 있는 원형 오브젝트를 생성한다.
이때 parent는 progressBar로 지정해주고, y값은 프로그레스바의 중간으로 위치하여 행을 맞춰준다.

27 ball = new Layer
28 parent: progressBar
29 width: 30
30 height: 30
31 y: Align.center()
32 backgroundColor: “white”
33 borderRadius: 30
34

ball의 드래그를 설정한다. 세로 드래그는 필요하지 않으므로 불가능하도록 설정, 드래그의 범위는 프로그레스바의 width값과 같게 해 준다. 그 영역을 넘어서까지 드래그 되진 않도록 설정한다.

35 ball.draggable.enabled = true
36 ball.draggable.vertical = false
37 ball.draggable.constraints =
38 x: 0
39 width: 300
40 height: 0
41 ball.draggable.overdrag = false
42

#State
스테이트를 사용할 것이 없다고 판단하여 따로 지정해 주지 않았다.

#Events

이 화면에서는 ball이 좌 우로 움직이면서 텍스트의 두께가 변화한다. 그러므로 ball의 x값의 변화를 인지하고, x값의 범위, 폰트 두께변화의 범위를 알려준다. 공구함의 modulate를 써서 아래와 같이 기재한다. 이때 3종 텍스트 두께를 모두 변화 시키기로 했으므로, 반복문을 이용한다. 폰트를 3개 생성해 담아놓은 fonts 통을 쓴다.

43 ball.on “change:x”, ->
44 # print this.x 대략적인 ball의 x값을 알아보기 위해서는 print를 해 보는 것이 좋다.
45 for i in [0…3]
46 ballXRange = [0, 270]
47 fontWeightRange = [100, 900]
48 fonts[i].fontWeight = Utils.modulate(this.x, ballXRange, fontWeightRange)
49
50

Utils.modulate(우리가 이용할 값, 알고 있는 것의 범위, 결과값의 범위) = 볼의 x를 이용하여, 볼의 x값의 변화에 따라, 폰트의 두께가 변화한다. 로 생각하면 됨.

구현화면보러가기 >

이렇게 하여 첫번째 화면이 구현되었다.
ebook어플리케이션의 설정화면을 프레이머로 구현해 본다면 굉장히 재미있을 것 같다.

댓글 남기기

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