10

LAYERS

LAYERS

레이어 패널의 사용과 관리

레이어는 객체를 하나씩 담고 차곡차곡 쌓여져 있는 레이어 타워의 일원이다. 각 레이어는 한개 이상의 오브젝트, 그룹, 심볼, 반복 그리드등과 에셋을 담을 수 있다. 물론 각자 다른 이름을 부여 할 수 있다. 심볼의 경우는 그 속성을 공유 하지만 레이어는 다른 존재로서 따로 관리 할 수 있다. 마치 다른 차원의 또 다른 나인 셈이다. 레이어의 구조는 한줄로 차곡차곡 쌓여져 있는 것 이기 때문에 관리를 잘 해 줘야 하고 레이어들이 많아지면 그 관리 또한 잘 해야 후에 유지 관리가 편할 것이다. 

Layers Panel

패널 열기 ( Cmd + Y )

Left Tool Bar 하단 제일 밑에 아이콘을 누르거나 단축키 Cmd + Y 를 누르면 레이어 페널을 열거나 닫을 수 있다. 여러분이 어떠한 행위( 도형을 그렸거나 문자를 썼다면 분명 그곳에 레이어로 존재 할 것이다. 

레이어 패널의 구조

레이어 패널은 기본적으로 아래와 같은 계층 구조를 가지고 있다. 

워크 스페이스
    ㄴ 아트보드, Pasteboard
        ㄴ 레이어

아트보드
당신이 아무것도 선택하지 않았다면 워크 스페이스에 존재 하고 있기 때문에 레이어 패널에는 당신이 만들어 놓은 아트보드들이 주욱 쌓여 있을 것이다.

Pasteboard
제일 마지막에는 Pasteboard 라는 보드가 존재 하는데 이 보드에는 아트보드가 아닌 워크 스페이스 그러니까 아트보드들 바깥에 존재하는 레이어들이 모여져 있다.

레이어
아트보드 내의 오브젝트를 하나를 선택하게 되면 해당 아트보드 안에 존재 하는 레이어들을 볼 수 있다. 또는 아트보드 이름 좌측 문서 모양의 아이콘을 두번 클릭하면 바로 그 아트보드를 화면 정중앙으로 확대 축소 이동하면서 레이어가 열린다. 아트보드로의 빠른 이동이 가능 한 셈이다. 물론 앞서 언급했듯이 아트보드 이름을 클릭 한 후 Cmd + 3 단축키로도 이동 가능 하지만 단축키로 이동하면 이동만 하고 레이어 모드로 진입하지 않는다. 

레이어 패널의 모습
img_layer_02

아무것도 선택하지 않았을때 또는 아트보드를 선택했을때의 모습

img_layer_03

아트보드가 아닌 워크 스페이스에 존재하는 레이어들은 Pasteboard 안에 모여 있다.

img_layer_01

아트보드 내의 오브젝트를 선택했을때나 레이어에서 아트보드 아이콘을 두번 클릭하고 들어간 모습

레이어 패널에서 할 수 있는 것들

레이어 패널은 레이어를 확인 할 수 있는 곳이지만 레이어 관리와 각종 속성을 변경할 수 있기도 하다. 아래와 같은 작업을 할 수 있으니 참고하자.

  • 아트보드, 레이어 이름 바꾸기: 마우스로 이름을 두번 클릭하면 변경 모드로 변한다. 
  • Mark for Batch Export: 아트보드나 레이어에 체크 해 놓으면 내보내기 할때 이 파일들만 한꺼번에 내 보낼 수 있다. 중요 파일이나 내보내기 해야 할 파일은 체크해 놓으면 나중에 일일이 찾아서 내보내기 하지 않아도 된다. 
  • Lock: 레이어를 잠글 수 있다. 크기나 위치를 알 수 있지만 움직이지 않는다. 레이어를 잠그면 오브젝트 좌 상단에 잠금 표시가 된다. 잠금을 풀고 싶으면 레이어 패널에서 다시 잠금을 클릭하여 풀거나 오브젝트 좌 상단에 달려 있는 잠금 표시를 두번 클릭하면 잠금을 풀 수 있다. 
  • Hide: 레이어를 보이지 않게 한다. 잠금과 다르게 크기나 위치를 아트보드 상에서는 알 수 없다. 크기나 위치를 알려면 레이어 패널에서 해당 레이어를 클릭하면 표시 된다.
    Tip. 많은 아트보드를 사용하거나 워크 스페이스를 넓게 사용하다 보면 표시가 된다 해도 어디에 있는지 찾기 쉽지 않다. 이때 Cmd + 3 단축키로 한번에 선택한 오브젝트로 이동이 가능하다.
  • 레이어또는 레이어들을 앞으로 보내기 뒤로 보내기: 레이어를 선택한 후 Cmd + ], Cmd + [, Cmd + Shift + ], Cmd + Shift + [ 를 이용해 앞으로 보내기, 뒤로 보내기, 맨 앞으로 보내기 , 맨 뒤로 보내기 를 할 수 있다. 또한 레이어 패널에서 마우스로 클릭 앤 무브 드롭 방식으로 변경이 가능하다.
  • 뒤로 가기: 레이어 모드에서 상단 아트보드 좌측의 뒤로가기 화살표를 클릭하면 다시 아트보드 모드로 변경된다. 이때 화면이 화면 모두 보기 ( Cmd + 0 ) 와 같은 화면으로 확대 축소된다. 
  • 검색 하기: 아트보드나 레이어를 이름으로 검색 할 수 있고 레이어를 이미지별, 모양별, 문자별로 분류 해서 볼 수 있으며, 검색한 단어는 하단에 기록 된다. 

레이어의 이해

레이어는 오브젝트를 담는 그릇

레이어는 오브젝트와 다른 개념이다. 물론 같은 객체이기에 동일 시 할 수도 있지만 레이어는 오브젝트를 담는 그릇이며 하나의 구분자다. 그 그릇으로 레이어드 된 레이어들을 구분한다. 오브젝트는 레이어를 꼭 필요로 한다. 프로그램의 기본 구조가 오브젝트들이 레이어드 되는 방식이기 때문에 오브젝트의 구분자는 꼭 필요한 것이다. 수 많은 오브젝트들이 레이어라는 이름으로 프로그램상에 존재 하는 것이다.

관리의 중요성

레이어가 그 기능을 충실하게 하려면 관리가 필요하다. 레이어 관리를 잘 하면 많은 오브젝트를 운용하여도 큰 문제가 없다. 그러나 레이어 관리를 잘 하지 못하면 분명 오브젝트가 많이 존재하는 대형 프로젝트나 여러사람이 함께 작업해야 하는 공동 프로젝트의 경우 큰 문제를 야기 할 수 있으며 프로젝트 중반 이후 매우 곤란한 상황에 처할 수도 있다. 프로젝트의 성격에 따라 레이어 이름과 그룹, 심볼과 에셋등의 구조를 잘 짜 놓아야 한다. 

폴더링이 아닌 그룹화

포토샵은 레이어들을 폴더링 하여 관리 하게 된다. 하지만 AdobeXD 에서는 폴더링 개념은 없다. 그 대신 그룹 개념으로 레이어를 정리 할 수 있다. 그룹은 포토샵에서의 폴더링 + 링키지(연결하여 같이 움직이기) 와 같은 개념으로 접근하면 좋을 듯 하다. 직관적이고 심플한 구조에 계속 적응 해야 한다.

레이어 패널을 통해 레이어들을 잘 관리 하고 잘 사용하여야 한다. 작업을 하다보면 자칫 레이어 관리에 소홀 할때가 있다. 하지만 아래의 몇가지 만이라도 체크 하면서 진행하면 나중에 한결 편한 레이어 관리가 될 것이다. 

  • 레이어 이름 구조 정하기
  • 배치 파일 체크 해 놓기
  • 적당히 그룹화 하기
  • 파트너를 위한 주석 달기 ( 워크 스페이스 )

AdobeXD Classes

01 . INTROAdobeXD의 대한 소개

02 . INTERFACEAdobeXD의 인터페이스 소개

03 . ARTBOARDSArtboards 에 대한 이해

04 . PANNING & ZOOMING화면 움직이기와 화면 확대 축소

05 . SHAPES도형 그리기와 활용

06 . TEXT문자 쓰기와 활용

07 . PEN TOOL펜 도구의 이용 및 활용

08 . SELECT MOVE RESIZE오브젝트 선택하기, 움직이기, 크기변경하기

09 . STYLING APPEARANCE오브젝트의 면과 선의 색상, 그림자, 흐림 효과

10 . LAYERS레이어 패널의 사용과 관리

11 . DUPLICATE오브젝트 복제의 여러가지 방법

12 . ALIGN & DISTRIBUTE객체의 정렬과 각 객체들간의 공간 분배

13 . UNION두개 이상 객체의 조합 만들기

14 . GROUPAdobeXD 에서의 그룹의 의미와 활용

15 . SYMBOLS심볼 만들기와 응용

16 . REPEAT GRID반복 그리드 사용법과 활용

17 . MASK마스크의 여러가지 사용법

18 . ASSETS PANEL에셋 패널의 사용법과 활용

logo_basic@2x

Copyright © 2018 AdobeXD.info & Bandy garnet.
All Rights Reserved.

E-mail: bandygarnet@gmail.com
Slack: adobexdclass.slack.com