16

REPEAT GRID

REPEAT GRID

반복 그리드 사용법과 활용

반복 그리드를 처음 접했을 때 "WOW!!!" 라는 탄성을 낼 수 밖에 없었다. 반복 그리드는 UI 디자이너에게 천금 같은 기능이다. 반복된 작업의 시간을 극도로 줄여줄 뿐 아니라 그로 인한 스트레스 또한 줄여 줄 수 있는 기능이기 때문이다. 여러분은 이제 새로운 세상을 만나게 될 것이다. 진심으로... 

반복 그리드 왜 필요한가?

UX/UI 디자인을 하다보면 반복되는 UI를 그려야 하는 경우가 매우 많이 발생한다. 이럴때에 반복되는 객체들을 복제 하여 사용하게 되는데 그 복제된 객체를 수정하려면 각각 모두 수정해야 한다는 번거로움이 있다. 그 해결책으로 이전 시간에 배운 심볼이라는 것을 사용할 수도 있겠지만 심볼과 달리 근접하고 반복해서 연결되는 객체들을 만들어야 할때 특화된 것이 반복 그리드 이다. 아래와 같은 상황에서 반복 그리드를 유용하게 사용할 수 있다. 

  • 근접하게 반복되는 객체들
  • 일정한 간격을 두고 반복되는 객체들
  • 수정을 자주 해야 하는 반복된 객체들

위와 같은 객체들을 만들때에는 반복 그리드를 쓰면 매우 편리 하다. 한번 만들어 보자.

반복 그리드 사용

반복 그리드 만들기 ( Cmd + R )
img_repeat_grid_01
img_repeat_grid_02
img_repeat_grid_03

반복 그리드를 만드는 방법은 객체(들)을 선택한 후 단축키를 이용하면 편리 하지만 우측 Property Inspector 의 상단에 위치해 있는 Repeat Grid 버튼을 이용해도 된다. 물론 상단 메뉴바에서도 Object/Make Repeat Grid 를 선택하면 된다. 
반복 그리드를 실행하면 객체(들)은 반복 그리드 속성으로 변한다. 파란색 선택라인에서 녹색 선택라인으로 바뀌고 우측과 하단에 핸들이 생기게 된다. 우측과 하단의 핸들을 클릭한 상태에서 마우스를 움직이면 객체(들)이 반복해서 나타나기 시작한다. 일정한 간격으로 계속 반복된 객체들이 나타나는 것을 볼 수 있을 것이다. 
멋지지 않은가~ 하나하나 복제 하지 않아도 원하는 만큼의 반복된 객체들을 만들어 낼 수 있으니 말이다. 놀라운 일은 아직 끝나지 않았다. 

반복된 객체들의 조정
img_repeat_grid_04
img_repeat_grid_05
img_repeat_grid_06

자 원하는 만큼의 반복된 객체들이 나타났다. 하지만 단번에 만족하진 못 할 것이다. 내가 원하는 가로, 세로 간격이 아닐테니 말이다. AdobeXD 는 당신의 이러한 고민을 단번에 해결해 준다. 마우스를 반복 그리드된 객체들 선택한 후 객체들 간격 위로 가져가 보자. 핑크색으로 간격을 표시 해 줄 것이다. 그 핑크 색의 바가 간격 조정 핸들이다. 핑크 색 바를 클릭한 상태에서 상하, 좌우 마우스를 움직이면 간격이 조정된다. 이때 모든 가로와, 세로의 간격이 일정하게 움직이는 것을 볼 수 있을 것이다. 또 한번 WOW!!! 언제든 당신은 반복 그리드된 객체들의 간격을 일정하게 조정할 수 있다는 이야기다.

반복그리드가 없을 때 이러한 작업을 하려면 객체들의 간격을 하나하나 맞춰줘야 하는 매우 번거로운 작업이었다. 그 만큼 시간과 노력이 필요했다는 이야기 다. 이제는 AdobeXD 의 반복 그리드가 당신의 시간을 아껴주고 스트레스를 줄여주며 퇴근 시간을 앞당겨 줄 것이다. 

반복 그리드에서의 이미지 삽입

놀라운 경험을 하였지만 아직 끝나지 않았다. 이제 당신은 이미지 박스에 이미지를 넣고 싶다. AdobeXD 에서 이미지를 넣은 방법은 매우 여러가지가 있지만 이번장에서는 드래그 앤 드롭 방식을 이용할 것이다. 준비된 이미지를 반복 그리드의 이미지 박스에 드래그 앤 드롭 한다. 반복된 이미지 박스에 이미지가 반복적으로 들어가게 될 것이다. 같은 방법으로 다른 이미지를 두번째 이미지 박스에 넣으면 어떻게 될까? 결과는 두가지 이미지가 반복적으로 들어가게 된다. 이 같은 방식으로 이미지를 계속 집어 넣을 수 있다.

허나, 우린 이럴 시간이 없다. 퇴근시간이 임박했기 때문이다. 젠장 저 반복 그리드로 갤러리를 만들어 놓고 집에 가고 싶은거다. 이미지를 하나 하나 넣어서 언제 다 넣는단 말이냐... AdobeXD 는 당신의 마음을 읽었다. 당신이 넣고 싶은 이미지를 한꺼번에 넣게 해 줄 것이다. 필요한 이미지를 모두 선택하고 이미지 박스 에 드래그 앤 드롭 한다. 웁스! 너무 쉽게 모든 이미지가 들어가 버렸다. 

img_repeat_grid_07
img_repeat_grid_08

위 이미지 처럼 한장이면 한장 여러장이면 여러장 반복된 이미지 박스에 순서대로 모두 들어가게 된다. 100장이던 1000장이던 말이다. 중간에 이미지를 다른 이미지로 대체 할 수도 있다.

이미지의 크롭 위치 변경
기본적으로 드래그 앤 드롭 방식으로 이미지를 삽입하면 중앙을 기준으로 공강 꽉 채우기 개념으로 이미지가 들어간다. 이미지의 비율 변형은 없으며, 남는 공간 만큼 크롭 되는 형태로 들어가게 된다. 이때 이미지의 위치를 변경하고 싶을 때가 있을 것이다. 이때는 이미지 박스를 두번 클릭하면 이미지의 크롭 위치를 변경 할 수 있다.

반복 그리드에서의 텍스트 변경

반복 그리드에서도 각 반복 객체의 텍스트 내용을 변경 할 수 있고, 각자 다른 내용을 유지 할 수 있다. 방법은 텍스트를 두번 클릭하여 텍스트 내용을 직접 변경하면 된다. 각각 다른 내용을 넣어주어도 다른 객체에 영향을 주지 않는다. 이미지에 맞는 타이틀과 내용으로 변경이 가능 하다는 얘기 다. 디자이너들은 똑 같은 내용이 반복 되는 것에 대한 강박이 있으니까! 다른 내용을 넣어줘야 맘에 안정이 되니까!

img_repeat_grid_09
img_repeat_grid_10

하나 하나 내용을 바꿔 주다 보니 꽤 많은 양의 내용을 바꾸어야 할 때가 있다. 그것을 해결하기 위해 AdobeXD 는 특별한 기능을 추가 했다. 텍스트 파일을 반복된 텍스트 필드에 적용하는 것이다. 미리 준비된 텍스트 파일을 드래그 앤 드롭 해 보았다. 그림처럼 텍스트 파일에 정렬되어 있는 내용이 순서대로 반복되는 텍스트 필드에 적용이 되는 것을 볼 수 있을 것이다. 물론 텍스트 파일을 미리 준비 해 놓아야 하는 번거로움이 있을 수 있다. 하지만 한번 준비 해 놓은 텍스트 파일은 언제든 쓸 수 있으니 그정도 수고는 감수 할 수 있지 않을까? 100개의 내용을 매번 직접 바꿔 주는 것 보다는? 사실 여러분들이 많이 애용 하지는 않으리라 생각이 들지만 그래도 기억해 놓으면 언젠가는 써 먹을일이 분명 생길 것이다. 

반복 그리드 해체하기 ( Cmd + Shift + G )

반복 그리드를 해체하는 방법은 앞서 다룬 그룹과 심볼의 해체와 같은 방법을 해체하면 된다. 반복 그리드를 해체 하여도 모든 콘텐츠의 속성은 그대로 남아 있다. 반복 그리드의 속성만 사라지는 것이다. 

단. 주의 해야 할 것이 있다. 반복 그리드는 한번 해체 하면 다시는 같은 기능을 수행 할 수 없다. 다시 반복 그리드를 묶는 다고 다시 반복 그리드를 사용할 수 있는 것이 아니라는 이야기 이다. 그러니 반복 그리드를 해체 할 때에는 반드시 신중하게 생각하고 해체 해야 한다. 반복 그리드를 완벽하게 수행했을 때나 굳이 반복 그리드를 해체하여 사용할 경우에만 해체 하도록 하자. 

반복 그리드의 수정 ( 두번 클릭 )

반복 그리드는 기본적으로 크기나 속성을 변경 할 수 없다. 크기를 변경하면 그것은 반복 그리드의 크기가 아닌 영역을 확장하는 개념이기 때문이다. 
그래서 반복 그리드의 수정은 반복 그리드 안에서 객체들을 수정해야 한다. 객체들의 모든 속성은 반복 그리드를 두번 클릭하여 반복 그리드 안으로 들어가서 수정할 수 있다. 반복된 객체들은 변경된 내용대로 모두 동일하게 적용된다. 이때 크기, 위치, 모양, 색상은 모두 동일 하게 적용되며, 이미지와 텍스트의 내용은 각각 따로따로 적용할 수 있다.

반복 그리드의 활용

반복 그리드 활용 예

반복 그리드는 아래와 같은 내용을 디자인 할때 사용하면 매우 편리하다.

  • 이미지 갤러리 
  • 상품 진열
  • 다수의 프로필 나열
  • 게시판 글 리스트
  • 다수의 버튼 나열

위와 같은 디자인시 반복 그리드는 짧은 작업시간은 물론 수정 및 변경도 매우 용이 하다. 

반복 그리드를 사용할 수 없는 예

반복 그리드를 사용하다 보면 연속되지만 반복 그리드를 사용하기에 적절하지 않는 상황도 자주 발생한다. 아래와 같은 내용에는 반복 그리드를 사용하기에 적합하지 않다.

  • 반복되지만 길이가 다른 가로 메뉴
  • 색상이 다르게 표현되어야 하는 갤러리
  • 객체의 요소가 다른 상품 나열
  • 색상이 다르거나 길이가 다른 버튼의 나열

반복 그리드의 특징

이미지 박스는 한장 또는 여러장의 이미지를 기억한다. 

이미지 박스는 한장의 이미지 뿐만 아니라 여러장의 이미지를 기억하고 있다. 이미지 박스에 여러장의 이미지를 넣어 기억해 두면 언제든지 반복 그리드 사용시 그 여러장의 이미지가 반복되어서 나오게 된다. 신기하게도 말이다.

심볼을 반복 그리드 사용시 여러장의 이미지가 들어가지 않는다.

이미지 박스가 심볼인 경우 반복 그리드에서 한번에 여러장의 이미지를 드래그 앤 드롭 할 수 없다. 한장씩 따로 넣어줘야 한다. 

SVG 파일은 이미지 박스에 여러장 표현할 수 없다.

SVG 파일을 이미지 박스에 드래그 앤 드롭하면 하나의 SVG 이미지로만 표현된다. 또한 다른 이미지들과 함께 넣을 수도 없다. 

반복 그리드에 대해 살펴 보았다. 반복 그리드는 디자이너들에게 거의 신이 주신 선물 같은 존재이다. 반복 그리드는 시간과 스트레스를 동시에 줄여 주는 동시에 관리 측면에서도 큰 도움을 주기 때문이다. 반복 그리드를 알게 된 당신은 야근과 주말 출근이라는 단어를 사전에서 지울 수 있게 되었다. 팀장님 과장님 부장님의 간격, 크기, 모양, 수정 요구에도 전혀 스트레스 받을 일이 없다. 단 몇 초면 그 모든 일을 해 낼 수 있기 때문이다. AdobeXD 는 빠른 작업 시간과 수정및 변경이 매우 용이한 UX/UI 툴이며 서비스이다.

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