brunch

You can make anything
by writing

C.S.Lewis

by 김세환 Aug 24. 2017

[24] 디자인탭의 레이어를 코드에서 사용하기

디자인탭의 레이어를 코드에서 사용하기 


1. 디자인탭의 이미지들을 코드 탭에서 활용하기 위해 준비해 보겠습니다. 


2. 아래와 같이 레이어창에 이미지 레이어들이 보이는지 확인합니다. 만약 레이어 리스트가 보이지 않는다면 이미지를 한번 클릭해줍니다.

3. 이미지 레이어중 하나에 마우스를 갖다 댑니다 .그러면 레이어 이름 우측에 두 겹의 동그라미 버튼이 생깁니다. (동그라미 위에서 잠시 머물면 'Create Target' 이라는 말풍선이 뜹니다.)


* 프레이머에서 타겟이란?
디자인탭에서 모든 이미지를 코드에서 참조할 필요는 없습니다. 하지만 코드에서 디자인탭의 레이어를 참조하기 위해서는 뭔가 작업을 해줘야합니다. 이 작업을 프레이머에서는 '타겟을 만든다'라고 합니다. 타겟으로 만들어진 레이어는 코드에서 사용할 수 있고, 타겟으로 지정되지 않은 레이어는 코드에서 사용할 수 없습니다. 


4. 이 타겟 버튼을 클릭합니다. 그러면 레이어의 이름을 입력할 수 있고 타겟으로 지정할 수 있습니다. 이름을 입력하지 않고 엔터키를 누르면 기본 이름인 'Image'로 타겟이름이 정해집니다. 예제에서는 'myItem'이라고 이름 붙이겠습니다. 

디자인탭의 레이어들을 코드탭에서 쓰기 위해서는 반드시 레이어의 이름이 필요합니다.


5. 타겟을 만든 레이어는 오른쪽의 동그라미 버튼 가운데가 채워지며, 마우스를 떼도 사라지지 않습니다.


6. 다른 이미지들도 이름을 붙이고 타겟으로 만들어주면 코드탭에서 사용하기 위한 준비가 모두 완료된 것입니다. 

* 타겟을 없애는 방법은?
타겟으로 지정된 레이어에서 우측 마우스 버튼을 누릅니다. 그리고 Delete Target 메뉴를 클릭하면 타겟이 삭제됩니다.


7. 이제 코드탭으로 이동해서 레이어 리스트를 보면 타겟을 만든 레이어에 동그란 타겟 버튼이 보입니다. 이제부터는 코드에서 이 레이어들을 참조할 수 있습니다. 


매거진의 이전글 [23] 디자인탭에 클립보드로 이미지 붙여넣기
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari