[Day 12] 이벤트 추가하기
30일간의 Framer 스터디
레이어에 이벤트를 추가하는 방법은 크게 툴바의 ‘Insert’ 메뉴를 이용하는것과 소스코드를 직접 입력하는 방법이 있습니다. 소스코드를 입력하는 방법은 프로그래밍이 익숙하거나 적응이 된 후에 사용하도록 하고 여기서는 ‘Insert’메뉴를 이용하는 방법에 대해 알아보겠습니다.
<그림. 이벤트를 지정해줄 레이어를 추가>
툴바의 Insert 메뉴로 이벤트 추가하기
상단 툴바의 ‘Insert’ 메뉴로 들어가면 ‘Events’ 메뉴가 있습니다. 하지만 지금 보면 사용할 수 없는 상태로 표시될 것입니다. 왜냐하면 이 메뉴는 레이어에 이벤트를 추가하는 기능이기 때문에 레이어가 한개도 없으면 사용할 수 없습니다.
예제를 위해 먼저 이미지가 추가된 레이어를 하나 만들도록 하겠습니다. 툴바의 ‘Insert’ -> ‘Image’ 메뉴를 클릭합니다.
<그림. 이미지를 선택>
그리고 원하는 이미지 파일을 선택해서 이미지가 포함된 레이어를 추가해 줍니다. 또한 레이어의 이름은 ‘image1’ 이라고 변경합니다.
<그림. 이미지가 추가된 레이어>
이벤트를 추가할 레이어가 준비되었습니다. 이제 다시 ‘Insert’ 메뉴를 다시 들어가보면 ‘Events’ 메뉴가 활성화 된 것을 볼 수 있습니다. 그리고 ‘Events’ 메뉴 밑에는 방금 추가한 레이어인 ‘image1’ 레이어의 이름이 표시됩니다.
<그림. 활성화된 ‘Events’ 메뉴>
여기서 다른 레이어를 추가한다면 어떻게 될까요? 빈 레이어를 만들어 확인해 보겠습니다. 여러개의 레이어를 만들기 위해 단축키를 사용하겠습니다. 소스코드창에서 Command + Shift + N 키를 눌러 여러개의 레이어를 만듭니다.
<그림. 여러개의 레이어 생성>
그리고 다시 ‘Insert’ - ‘Events’ 메뉴에 마우스를 올려봅니다. 그러면 새로 생성한 레이어들이 추가된 것을 볼 수 있습니다. 이처럼 ‘Insert’ - ‘Events’ 메뉴에서는 생성된 모든 레이어에 이벤트를 추가할 수 있습니다. 소스코드로 만들수도 있지만 이런 메뉴를 적극 활용해서 코딩의 양을 줄이고 편리하게 작업하기 바랍니다.
서론이 길었지만 이제 드디어 이벤트를 추가해 보겠습니다. 앞에서 입력했던 레이어들을 모두 삭제하고 이미지가 담긴 레이어 ‘image1’ 만 남겨두겠습니다.
그리고 다시 ‘Insert’ - ‘Events’ 메뉴로 가서 ‘image1’ 레이어 이름에 마우스를 올리면 사용가능한 이벤트가 모두 나옵니다.
<그림. 사용가능한 이벤트들>
여기서는 ‘Click’ 이벤트를 선택합니다. 그럼 ‘Click’이벤트 밑에 ‘Click’ 과 ‘Double Click’ 이 있습니다. 다시 ‘Click’을 선택해줍니다. 그러면 소스코드창에 아래 그림과 같이 코드가 생성됩니다.
<그림. ‘Click’ 이벤트가 추가된 소스코드>
image1.onClick (event, layer) ->
이벤트는 추가했지만 클릭해도 아무일도 일어나지 않습니다. 클릭했을때 어떤 일을 할지 아직 추가하지 않았기 때문입니다. 소스코드에 아래 구문을 추가해서 클릭 이벤트가 정상적으로 추가되었는지 확인해보겠습니다.
image1.onClick (event, layer) ->
print("image1 click")
여기서 print 구문은 테스트를 위해 문자를 화면에 표시해주는 명령어입니다. 앞으로도 테스트를 위해 많이 사용하니 잘 기억해두시면 좋습니다. 구문을 다시 보면 ‘image1’ 레이어 클릭되면 , “image1 click” 이라는 내용을 화면에 표시한다고 되어 있습니다. 레이어를 클릭해보면 아래와 같이 잘 클릭이 되는 것을 결과창 하단의 프린트된 문자로 확인할 수 있습니다.
<그림. 클릭했을때 표시되는 텍스트>
소스코드 설명
소스코드를 보면 레이어 이름 ‘image1’이 먼저 보입니다. 그리고 onClick이라는 구문이 있는 것으로 보아 클릭과 관련된 기능을 수행한다는 점을 유추할 수 있습니다. 또한 image1 과 onClick 구문의 연결을 위해서 점( . )을 사용해서 ‘image1’에 클릭을 한다고 생각할 수 있겠죠.
그럼 뒤의 괄호안에 있는 event , layer는 무엇일까요? 순서대로 event는 ’이벤트가 일어날때 상황의 여러 정보’를 담고 있습니다. 그리고 layer 는 이벤트가 일어난 자기 자신입니다.
방금 만든 이벤트에서 이것을 테스트해보겠습니다. 소스코드에 print(event) 구문을 추가해줍니다. 그리고 결과창에서 이미지를 클릭한 후 프린트된 내용을 확인해보세요.
image1.onClick (event, layer) ->
print(event)
<그림. print(event)의 결과>
이벤트에 대한 정보인 <MouseEvent {isTrusted:true}> 라는 텍스트가 출력되었습니다. 지금은 더 몰라도 됩니다. 하지만 나중에 이벤트를 공부하게 되면 발생한 이벤트의 정보가 필요할 때가 있습니다. 예를 들면 마우스 휠을 위로 돌렸는지 아래로 돌렸는지 같은 정보같은 것들이 있습니다. 그럴때는 해당 이벤트에 대해 문서에서 찾아서 활용한다고만 알고 계시면 됩니다.
이어서 뒤에 있는 ‘layer’에 대해서도 테스트해보죠. 이번에는 print(event) 대신에 print(layer)라고 변경하고 이미지를 다시 클릭해 보겠습니다.
image1.onClick (event, layer) ->
print(layer)
<그림. 레이어의 정보를 표시>
그러면 클릭한 레이어에 대한 정보를 텍스트로 표시해줍니다. 레이어 명과 크기, 위치값(Position)등에 대해 간단히 표시하고 있죠. 여기서 레이어의 원하는 정보만 표시할 수도 있습니다. 아래 소스코드와 그림을 확인해보시면 감이 올 것입니다.
image1.onClick (event, layer) ->
print(layer.x)
print(layer.image)
print(layer.width)
결과값을 보면 레이어의 x 값, image 경로, width 값이 모두 표시된걸 볼 수 있습니다. 이렇게 event, layer 인자를 받아서 클릭되었을때 혹은 다른 이벤트가 일어났을때의 정보를 받아와서 처리할 수 있다는 점 기억해두세요.
