디자이너를 위한 코드 with Framer #2
#1에서는 한땀한땀 그리는 방법을 소개했었다. 하지만 Framer신규 업데이트 이후에 엄청나게 편리한 기능이 추가 되었는데, 거의 포토샵처럼 요소들을 그리고 편집할 수 있게 된것이다. 마치 포토샵에서 Create a new layer를 누르고 색상을 고르고 마우스로 위치를 옮기는 것과 같이 Graphic User Interface로 다 할 수 있다. 👍 (그럼 결국 우린 헛수고를 한걸까…? 전혀!)
그 기능은 이 영상을 보면 된다. 딱 앞의 2분 까지만. 원래 이 글을 쓴 요점은 Framer의 기능을 소개하는데 있지 않다. Framer는 코딩하는 도구로 쓰고, 디자이너에게 코드에 대한 이해를 돕는게 목적이다. 영상에서 2분 후의 내용들은 그냥 모르고 써도 되긴 하지만 기본적으로는 코드에 대한 이해가 필요하다. 위 영상에서 For문을 작성할 때 Basic Programming이라고 얘기한다. 우린 지금 그 Basic Programming을 하려고 하는거다.
그래서, 이번에 얘기 할 내용은 그런 기본적인 프로그래밍 문법에 대한 내용이다. #1보다는 조금 머리가 아프다. 그래서 Framer보다는 coffeeScript의 메뉴얼을 참고하는게 도움이 된다. (미디엄 아티클들 보니까 다들 나 빼곤 영어 잘하던데...)
메뉴얼은 사전식이라 처음부터 읽으면 힘드니까. 문법 중에 최소한 알아야 하는 개념에 대해서 추려봤다. 다시 한번 말하지만 우린 개발자가 아니다. 물론 다른 개념들도 알면 그 보다 더 좋을 순 없다. 하지만 그건 이 4가지 개념만으로는 작업이 너무나 힘들고 비효율적일 때 배우자. 그래야 더 배우고픈 욕심이 생긴다. 슈퍼도 못 가는 아이에게 용돈을 줘봐야 고스란히 엄마에게 돌아간다. (응?) 그러니까... 돈을 쓰고 싶은 곳이 있을때 돈을 갖고 싶다는 거다.
4가지로 추린 이유는 이 정도면 대부분 표현하고 싶은 것들이 커버 가능하기 때문이다.
- 변수 variable
- 반복문 for
- 조건문 if.else.
- 함수 function
늘 드는 생각이지만 누가 만들었는지 참 단어들이 어렵다. 한국말로 해도 잘 모를 땐 사전을 찾아보는게 꽤 도움이 된다.
- 변수 <수학> 어떤 관계나 범위 안에서 여러 가지 값으로 변할 수 있는 수.
- 함수 <수학> 두 개의 변수 x, y 사이에서, x가 일정한 범위 내에서 값이 변하는 데 따라서 y의 값이 종속적으로 정해…………………. 홀리 싙....!
젠장. 이럴 땐 사전도 별로 도움이 안된다. 하지만 function을 영어사전에서 검색하면 훨씬 답이 간단하게 나온다.
Function : 기능을 (수행)하다
얼마나 간결하고 아름다운 정의인가! 변수도 ‘가변적인'으로 설명이 끝난다. 반복문 조건문은 뭐 말 그대로다. 실행을 반복하고, 실행하기전에 조건을 다는 것. 이제 디테일한 이해는 해보면서 알아가면 된다. 보통 코드를 배울 때 용어가 어려워서 포기하는 경우가 많은데 쫄지 말자. 별거 아니다.
변수 Variable
그럼 변수에 대해서 좀 더 자세히 알아보자. '가변적인'이라는 사전적정의가 있는 변수. 우린 지난번에 변수를 사용 했었다. 그냥 새로 만드는 Layer에 이름을 붙이는 것으로 설명했지만. 실체는 그 것과는 아주 조금 늬앙스가 다르다.
#1에서 대충 설명한 것처럼 새로운 레이어에 이름을 붙이는게 아니라. 이름을 가진 변수를 만들고 그 변수에 새로 만든 레이어를 집어넣는 형태가 좀 더 정확하다. 컴퓨터 언어에서 이퀄(=)이 뒤의 것을 앞의 것에 대입한다는 말이 바로 이 뜻이다.
우리가 변수를 사용한 적은 new Layer 만들 때 밖에 없지만. 변수는 다양한 형태의 유형을 담을 수 있다. 숫자. 문자. 오브젝트(Layer같은 거).
some_number = 1
some_string = "문자"
some_object = new Layer뭐 이런식이다. 이것 말고도 더 있지만 머리 아프니까 지금은 패스하자. 그리고 몰라도 되지만 보통 다른 언어에서는 변수를 만들 때 명시적으로 var를 앞에 붙이는 언어가 많다.
var some_number = 1
이런식으로. var는 물론 variable을 뜻 한다. 하지만 coffeeScript를 베이스로 하는 Framer에서는 그런거 없다. 그냥 ‘이름 적고’ = ‘뒤에 대입할 무언가’를 적으면 그게 곧 변수를 만드는 행위다. 간단하쥬?
“근데 뭐가 가변적이라는 거야?”
앞서서 우리는 새로 만든 레이어를 bg_image라는 변수에다가 집어 넣었다. 그게 무슨 의미인걸까. 지난 코드를 보자.
bg_image라는 변수에 집어넣은 레이어 속성에는 녹색의 배경색깔을 가지고 있다. 그렇다면 바로 아래에 이런 코드를 추가해보면 어떻게 될까.
기존 녹색의 배경색깔이 검정색으로 변경 되었다. 위 코드로 컴퓨터가 한 일은 아주 정직하다. bg_image의 배경색을 녹색으로 만들고 난 후 곧바로 아래 코드를 실행해서 검정색으로 만든 것이다. 다만 그게 너무 빨라서 우리는 검정색이 된 상태 밖에 볼 수 없는 거다. 매우 당연한 결과 같지만. 이걸 어떻게 활용 할 수 있을까 생각해보자.
'Click'하면 검정색으로 변하게 할 수 있다.
'Double Click'하면 빨간색으로 만들 수도 있다.
즉 Layer의 속성 값을 가변적으로 바꿔가면서 인터랙티브하게 갖고 놀 수 있게 해준다는 말이다. 물론 아직까지 색깔 바꾸는 정도로는 시시하고 성에 안차겠지만... 중요한 첫 걸음을 뗀다고 생각하자 :)
그럼 말 나온 김에 bg_image를 클릭하면 파란색으로 변하도록 해보자. bg_image를 클릭하면. 이라는 전제를 달았기 때문에
1.'bg_image'를 / '클릭'했을때
2.'bg_image'의 / '색깔을 파랗게’해라는 코드를 적어주어야 한다. 코딩할 땐 이렇게 끊어서 생각하는 방식이 코드를 작성하는데 굉장히 유용하게 작용한다.
원래 이 부분을 설명하기 위해서는 단어만 들어도 머리아픈 ‘함수'에 대해서 설명해야 좀 더 정석적이다. 하지만 디자이너들은 정석 별로 안 좋아하는거 다 안다.(수학 포기한 이유도 비슷하자나) 그래서 여기서는 Framer의 반칙같은 기능을 써보기로 한다! 프레이머 좌측 상단 ‘+’버튼에는 몇 가지 유용한 기능들이 있다. 그 중에 우리가 써볼 것은 Event. 벌써 느낌이 온다면 당신은
“럭키가이.”
Event에 마우스를 가져대면 bg_image를 포함해서 우리가 만들었던 레이어 이름들이 나열되어 있는 것을 볼 수 있다. 그 다음엔 클릭부터 터치, 드래그, 핀치… 애니메이션까지 우리들이 열망하던 인터랙션 이벤트가 쭉 나열되어있다. (이게 다 우리가 나중에 할 수 있게 되는 것들이다! 신난다!) 그 중에서 제일 기본적인 click이벤트를 눌러보자.
->(화살표)아래로 들여쓰기 된 채 뭔가를 써달라는 것처럼 커서가 깜빡이고 있다. 그럼 우리는 쓰면 된다. 아까 적어둔 걸 다시 한번 꺼내보자.
1.'bg_image'를 / '클릭'했을때
2.'bg_image'의 / '색깔을 파랗게’해라1번이 바로 반칙같은 기능으로 Framer가 나 대신 적어준 코드다. 1번에 대한 문법적인 이해는 나중에 하자. 우린 2번만 작성하면 된다. 아까, 변수를 설명할 때 검정색으로 만드는 코드를 컬러만 바꿔서 써주면 된다.
bg_image.backgroundColor = “blue”Tip1. Framer에서 컬러값은 #으로 시작하는 HEX값, rgba값, 색상의 Literal한 표현까지 혼용해서 쓸 수 있다. Framer가 웹 기반으로 동작하기 때문에 CSS에서 쓰이는 표현을 다 쓸 수 있기 때문이다.
결과를 한번 보자.
처음으로 클릭에 인터랙티브하게 반응하는 이벤트다. ㅠㅠ. 여세를 몰아서 더블클릭하면 빨간색으로 변하게 도전!은 각자 해보자. 헤헤
이 글에서 변수, 반복문, 조건문, 함수를 다 설명하려고 했는데 욕심인 것 같다. 이번 글은 이 정도로 하고 마지막으로 꿀팁을 하나 소개 하려고 한다.
1.'bg_image'를 / '클릭'했을때
2.'bg_image'의 / '색깔을 파랗게’해라1, 2번에서 bg_image가 두 번 등장하는게 보일거다. 그거 아나……? 영어권 사람들은 반복 싫어하는거. (물론 우리도 딱히 안 좋아한다)
1.'bg_image'를 / '클릭'했을때
2.'이것'의 / '색깔을 파랗게’해라‘이것’으로 대체할 수 있다. 바로 this. 코드로 적용하면 이런식이다
bg_image.onClick (event, layer) ->
this.backgroundColor = “blue”결과는 각자 확인해보자. 똑.같.다. 근데 나중에 이 this가 어마무시하게 유용하게 쓰이는 때가 온다… the day is coming.
