03

ARTBOARDS

ARTBOARDS

Artboards 에 대한 이해

아트보드는 작업 할 수 있는 대지를 뜻한다. AdobeXD는 UX/UI 디자인 전문 솔루션 답게 UX/UI 디자이너들이 필요한 위한 아트보드를 기본으로 고를 수 있게 하고 있다. 물론 나만의 크기의 아트보드를 생성 가능 하며 한번 선택 후 언제든 다시 재 조정 할 수 있다. 그럼 AdobeXD 가 기본으로 가지고 있는 아트보드는 무엇이고 어떤 용도로 쓰이는 지 알아보자. 좌측 툴바에서 아트보드 아이콘을 클릭하거나 단축키 A 를 눌러 아트보드를 살펴보자

아트보드 종류

img_artboards_02

Apple 기기용 아트보드
크게 아이폰용 아이패드용 애플워치용으로 구분된다. 이들을 해상도에 따라 나누어 놓았고 원하는 아트보드를 선택하여 디자인 하면 된다. 그런데 포토샵으로 작업하던 사람들은 흠칫 할 것이다. 해상도가 본인이 작업하던 해상도에 비해 턱없이 작기 때문에... 문제 될 것이 전혀 없다. 제공되는 해상도로 작업하면 나중에 이미지를 내 보낼때 자동으로 1배수, 2배수, 3배수 이미지를 내 보낼 수 있다.

AdobeXD 는 벡터 방식의 툴이므로 모든 오브젝트는 벡터 방식으로 만들어지고 활용된다. 그렇기 때문에 사이즈가 늘어나거나 줄어들어도 이미지의 깨짐 현상이 나타나지 않는다.

다만, 앞으로 사용해 볼 비트맵 이미지를 불러왔을 때 해당 이미지는 AdobeXD 에 존재 하더라도 원소스가 비트맵이기 때문에 이미지를 실제 사용할 거라면 최소 3배 이상의 사이즈를 사용할 것을 권장한다.

아이폰은 대체로 iPhone 6/7/8 용으로 디자인 하고 특별한 경우에만 iPhone X 와 iPhone 5/SE 을 따로 해 준다. 

Google 기기용 아트보드
모바일과 타블렛 그리고 Wear 용으로 구분되어 있고 원하는 아트보드를 골라서 디자인 하면 된다. 구글기기들도 마찬가지로 한가지 디자인으로 총 6개의 베리에이션을 만들고 사용 또는 적용할 수 있다. 

Microsoft 기기용 아트보드
서피스 프로 3 와 서피스 프로 4 기기를 선택할 수 있다. 
솔직히 한번 클릭해 본적이 없다. 미안 마이크로 소프트...

Web 용 아트보드
웹용 아트보드는 1280, 1366, 1920 해상도가 기본으로 되어 있는데 1280과 1366은 랩탑용이고 1920이 데스크탑용이라고 생각하면 편하겠다. 최근 모니터 해상도들이 데스크탑 이라면 1920 해상도는 기본으로 제공 하고 있고 4K 해상도 또한 많이 지원 되고 있기 때문에 1920 해상도를 사용하면 좋을 듯 하다. 물론 1920의 해상도를 어떤 그리드를 사용하고 그 중에 몇 그리드를 실제 콘텐츠에 사용할지는 본인의 판단이고 사이트의 성격와 온라인 속도 그리고 이미지등 많은 부분을 고려해서 설정하면 되겠다. 

맥용 이미지는 2배수로 써라
한가지 덧 붙이자면 웹용 디자인에서 이미지 사용시 2배수 이상의 비트맵 이미지가 필요하다. 이는 레티나 디스플레이를 사용하는 애플사의 맥 제품들 때문인데 같은 해상도에서 맥용 해상도는 2배수의 이미지를 제공하기 때문에 2배수 이미지를 사용해야만 맥에서 깔끔한 이미지로 볼 수 있다. 물론 내보내기에는 웹을 선택하면 1배수와 2배수 이미지를 내 보내 주고 이것을 적절히 사용하면 되겠다. 

최근 글로벌 웹 사이트 해상도 근황

최근 글로벌 사이트들의 해상도를 보면 점점 해상도를 넓히고 있는 추세이다. 모니터들의 해상도 확대와 그래픽 카드의 성능 향상, 그리고 기가 인터넷의 보편화 등이 그 이유가 되겠다. 그래서 이제 해상도 확대를 통해 멋진 그래픽을 보여 주거나 더 많은 콘텐츠를 보여 주는 것이 가능해 졌다. 하지만 그에 따른 정보의 가독성 또한 높아 져야 하기에 최근에는 라이브 폰트를 사용하고 폰트 크기 또한 키워서 정보의 가독성을 유지 하려 노력하고들 있다. 

  • 페이스북 - 1080 해상도 내에서 콘텐츠를 사용
  • 네이버, 뉴욕타임즈 - 1280 해상도 내에 콘텐츠를 사용
  • 나이키 - 반응형 디자인으로 전체 화면을 사용
  • 애플 - 반응형 디자인에 페럴렉스 기술을 더해 다이나믹한 콘텐츠를 화면 전체를 활용하여 사용
  • 삼성전자 - 반응형 디자인을 채택하고 있지만 1440의 최대 해상도 이미지를 사용함. 특별 케이스에는 1920 해상도 까지 커버
  • 뱅앤울룹슨 - 반응형 디자인에 페럴렉스 기술을 적절하게 사용하고 있음. 전체화면 사용.
  • 넷플릭스 - 반응형 전체화면 사용

나만의 아트보드 생성

위에서 살펴본 아트보드 중에 내가 원하는 아트보드가 없고 나만의 사이즈로 새롭게 아트보드를 생성하고 싶다면, 방법은 간단하다. 단축키 A 를 누르면 기본 아트보드들이 우측에 나타나지만 우측 아트보드들을 선택하지 않고 워크 스페이스에 자신이 원하는 만큼 드레그 하면 된다. 물론 조금 사이즈가 틀려도 상관 없다. 우측 Property Inspector 에서 조정이 언제나 가능하니까 

아트보드에 할 수 있는 것들

생성된 아트보드에는 기본 이름이 주어진다. 선택한 아트보드에 따라서 iPhone X, Web 1920 처럼 이름이 부여 되고 이후 -1, -2 순으로 생성된다. 임의로 아트보드를 생성했다면 Untitled 라는 이름으로 시작하게 된다. 
생성된 아트보드의 이름을 클릭하게 되면 아트보드가 선택된 상태가 된다. 우측 Property Inspector 에 아트보드에 적용할 수 있는 모든 내용이 나온다. 사용할 수 없는 항목은 활성화 되지 않는다. 깔끔하게 사용할 수 없는 내용은 다 안 나왔으면 좋겠지만...

  • 사이즈와 포지션 변경 가능
  • 스크롤 유무와 스크롤 화면 지정 가능
  • 아트보드 기본 배경 색 지정 가능 (선형 그라디엔트, 방사형 그라디엔트 포함)
  • 레이아웃 그리드 및 격자 그리드 설정 가능
  • 2개 이상 아트보드를 선택했을 경우 정렬 가능, 3개 이상 선택시 간격맟춤 가능
  • 이름 부분을 두번 클릭시 이름 변경 가능
  • Delete 누르면 삭제 가능
  • 우측 마우스 지원으로 잘라내기, 복사하기, 붙여넣기, 모양 붙여넣기, 삭제하기, 에셋패널에 사용된 색상 표시하기, 앞으로, 맨앞으로, 뒤로, 맨뒤로 항목으로 사용 가능

기타 내용으로 아트보드에 레이어, 에셋들이 존재한다면 에셋으로 한번에 등록이 가능하다. 에셋편에서 자세히 다루겠다. 

UX/UI 디자인에서 아트보드의 선택은 매우 중요한 시작이다. 어떤 디자인을 하느냐에 따라 적당한 아트보드를 선택해야 하고 활용해야 한다. 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