[Framer] 프레이머 스터디 : 코드 문법 분석하기 #1

프레이머는 하이 피델리티(High Fidelity) 프로토타이핑 툴이다. 

 

피델리티(Fidelity)란 실제와 얼마나 유사하게 프로토타입을 구현해낼 수 있는가 하는 척도로 Low에서 High로 갈수록 더욱 정교한 인터렉션 구현이 가능하다. 이러한 장점때문에 러닝커브가 높음에도 불구하고 많은 프로토타이핑 툴 사이에서 굳건히 한 자리를 차지하고 있다.

 

framer.com 프레이머 공식 홈페이지를 접속하면 가장 상단에서 만날 수 있는 카피문구

 

모든것을 수행하는 디자인 도구. 여기에서 알 수 있듯 프레이머는 '디자이너'를 위해 만들어진 프로토타이핑 툴이다. 프레이머는 '커피스크립트'라는 언어를 사용하는데, 커피 스크립트는 '자바스크립트'의 여러 단점을 보완하기 위해 제안되었다. 코딩을 전혀 모르는 사람이 사용하기에 자바스크립트는 다소 진입 장벽이 높아 이를 위해 좀 더 읽고 쓰기 쉽게 만들어졌다고 한다. 

 

처음 프레이머를 접하면서 문서 편집기 하나만 덜렁 있었던 때의 당혹감에 비하면 지금은 많이 나아진 편이지만 여전히 디자이너를 위한 툴이라는 것에는 의문이다. 또한 커피스크립트 이전에 몇몇의 스크립트 언어를 접해본 내게는 오히려 커피 스크립트가 더 어렵게 느껴졌다. 간편한 사용을 위해 너무 많은 것이 함축된 느낌이랄까. 

 

좋으나 싫으나 프레이머를 사용하기로 결심했다면, 차근차근 알아나가는 수밖에. 본격적으로 코드의 늪에서 허우적거리기전에 준비운동의 격으로 프레이머의 코드 문법에서 꼭 알아야 하는 아주 기본이고 기초적인 개념들에 대해 정리해보자.

 

 

*레이어 이름은 띄어쓰기를 허용하지 않는다

앞서 말한 바와 같이 커피스크립트는 더 적은 코드 -읽기 쉽고, 작성하기 쉽고 수정하기 쉬운 코드- 를 통해서 동일한 자바스크립트의 기능을 구현하는 것이 목적이다. 따라서 편의를 위해 우리가 해야하는 일들을 생략하거나 간소화하도록 만들어졌다.

 

예를들어, 세미콜론을 꼭 넣어주지 않아도 줄 단위로 명령을 구분한다. 괄호는 옵션적으로 생략이 가능하다. 그 대신에 띄어쓰기와 공백에 민감하다. 축약형으로 단순화 되었기때문에 지켜야하는 것은 분명하게 지켜주어야한다.

 

띄어쓰기 Space는 block을 구분하는데 쓰이기 때문에 이름에 띄어쓰기를 넣게되면 두동강이난다. 프레이머는 그를 더이상 같은 개체로 보지 않는다. 이러한 사태를 방지하기 위해 우리는 '_' Underscore, Under-line 을 사용하도록 하자.

 

 

* 들여쓰기 - Tab과 Space

내가 프레이머 코드를 보면서 가장 헷갈렸던 부분. 대체 {} 중괄호는 어디간거지?

 

커피스크립트에서는 함수, if문, switch문 등에서 블록을 묶어줄 때 중괄호({ })를 사용하지 않고 들여쓰기로 구분한다. 또한, 함수 내에 여러 줄의 코드를 작성할 때에도 마찬가지이다. 들여쓰기를 시작한다는 것은 제일 상단의 코드에 종속됨을 의미한다. 

 

이때 탭 Tab버튼을 사용하든 띄어쓰기 Space를 사용하든 상관은 없으나, 꼭 알아두어야 할 것은 시작한 방식을 따라야 한다는 것이다. 들여쓰기를 탭을 이용해서 했다면 이후로도 동일한 방식으로 들여쓰기를 해주어야한다.

 

 

* 이퀄(=)과 콜론(:)의 차이는 무엇인가?

프로그래밍 언어에서 이퀄(=)의 뜻은 값의 보편적인 동등성을 의미한다. 커피스크립트에서의 좀 더 구체적인 의미로는 '뒤에 기술한 값을 앞의 값을 대입하겠다'라고 선언하는 것이다.

layerA = new Layer   //layerA는 새로운 레이어다.

 

반면에 콜론(:)은 자세한 내용을 서술할 때, 그 속성과 값을 나타내는 데에 사용한다. 예를 들어 이퀄을 통해 함수를 정의해주고 그 함수에 대한 속성 값을 나타내 줄 때 사용하는데 '속성 key : 값 value'의 형식을 명심하도록 하자.

  layerA = new Layer     //layerA는 새로운 레이어다.

width : 300      //layerA의 넓이 속성은 300px이다.

height : 200     //layerA의 높이 속성은 200px이다.