[Day 3] 레이어 생성하기

30일간의 Framer.js 스터디

이번 시간에는 레이어에 대해서 알아보겠습니다. 레이어는 계층구조를 의미합니다. 포토샵이나 일러스트레이터를 예를 들면 , 레이어마다 이미지가 들어있고 이 레이어들을 겹쳐서 하나의 이미지로 나타내게 되죠. 프레이머에서도 이런 레이어 개념을 가지고 있습니다. 



<그림. 레이어 계층을 가진 프레이머>

위 이미지처럼 레이어는 아래부터 위로 쌓이게 됩니다. 결과창을 보면 속성 창에 표시된 가장 위쪽에 있는 레이어가 맨 위에 보이게 됩니다. 반대로 가장 밑에 있는 레이어는 겹쳐있는 이미지의 밑에 있는 것처럼 보이게 됩니다.

그럼 프레이머에서 레이어를 만들고 활용하는 방법에 대해 알아보겠습니다.

레이어 생성하기

프레이머에서 레이어를 만드는 방법은 몇 가지가 있습니다. 첫 번째는 메뉴바의 ‘Insert’ -  ‘Layer’ 메뉴를 클릭하면 됩니다. 네 번째는 최상단 메뉴의 ‘Insert’ - ‘Layer’ 메뉴를 클릭하는 것입니다. 두 번째는 단축키를 이용해서 만드는 방법입니다. Command+Shift+N 키를 누르면 레이어가 생성됩니다. 그리고 소스코드를 직접 입력하는 방법이 있습니다. 마지막으로 이미지를 드래그해서 가져오게 되면 이것도 자동으로 레이어가 생성됩니다.



<그림. 레이어 생성>

여기서는 먼저 간단하게 단축키로 레이어를 만들어 보겠습니다. 코드 창을 클릭하고 Command+Shift+N 키를 누르면 그림과 같이 자동으로 레이어가 생성됩니다.  코드 창을 보면 layerA = new Layer라는 코드가 생성된 걸 확인할 수 있습니다. 그리고 우측 결과창에 회색의 레이어가 보이게 됩니다. 다른 방법도 동일한 결과를 볼 수 있습니다. 반드시 다른 방법도 연습해보시기 바랍니다.