Xd로 디자이너도 할 수 있는 웹 서비스 컴포넌트 디자인 방법과 순서

들어가며

디자이너가 컴포넌트 시스템을 안다는 건, 웹 서비스를 만들면서 디자이너와 개발자가 긴밀하고 원활하게 작업할 수 있다는 것을 의미합니다. 거기에 ‘재사용 가능한 컴포넌트’로 UI 요소의 시스템을 구축하는 방법까지 알고 있다면 개발을 빠르게 진행 할 수 있을 뿐만 아니라 개발자에게 아주 익숙한 방법이므로 원활한 개발이 진행 될 수 있습니다. 원활한 개발을 꿈꾸는 많은 디자이너분들을 위해 오늘은 컴포넌트에 대한 개념과 정의, 그리고 실제 제작 처음부터 끝까지 차근차근 알려드리려고 합니다.

https://www.youtube.com/embed/-spc1Na2u5I?feature=oembed

1. 컴포넌트란

특징과 장점

2. 라이브러리화 하기

Component 요소 선정

컴포넌트 제작 예시)

라이브러리 등록

Window-Library 라이브러리 패널을 선택한다.
라이브러리 드롭다운메뉴를 열어 Create New Library…를 선택한다.

원하는 컴포넌트를 관리할 수 있는 이름을 적고 라이브러리를 생성한다.

라이브러리에 컴포넌트 추가하기

드래그앤드롭
-디자인된 컴포넌트를 선택하여 라이브러리 패널로 드래그 앤 드롭하면, 선택한 컴포넌트가 그대로 라이브러리에 등록된다.

컴포넌트의 요소 선택하여 라이브러리에 등록하기

– 라이브러리 패널의 하단의 플러그 아이콘을 클릭하면, 현재 선택되어진 레이어가 가지고 있는 요소들을 나누어 보여준다. 이 중 원하는 요소만 체크하여 라이브러리에 추가할 수 있다.

라이브러리 공유/협업

Library / 공동작업…을 선택한다.

아래와 같이 웹링크로 연결되어 공동 작업자를 초대할 수 있는 팝업이 뜬다.

협업하고자 하는 팀원의 어도비 CC계정을 추가하여 초대를 한다.

3. 디자인하기:컴포넌트 사용

4. 내보내기/개발자에게 전달

XD로 Prototyping하기

내보내기
-아트보드를 선택하여 Smart object로 만들어준다
-내보내기-내보내기 형식을 선택한다
-확장자를 SVG로 선택 후 저장한다.

XD에서 불러오기

-파일-새로 만들기로 모바일 사이즈의 새파일을 만든다.
-파일-가져오기- 위에서 저장한 SVG파일을 불러온다.

XD에서 수정 가능한 PSD(SVG)파일

-SVG파일을 더블클릭하면 각 컴포넌트 요소들이 Editable한 상태로 바뀐다.
-텍스트와 도형의 Transform이 가능하다.

Making Prototype

-프로토타입 탭으로 이동한다.

CC – Library& dreamweaver Extract
– 드림위버에서 Adobe library:
라이브러리를 통해 디자이너가 소스들을 라이브러리에 올린 뒤 개발자와 공유하면, 개발자는 드림위버에서 이 소스들을 드래그앤 드랍을 통해 가져올 수 있다.

– 드림위버에서 window > CC libraries 를 선택하면 CC libraries 창이 나타난다.

Dreamweaver Extract
디자이너가 별도의 가이드 제공을 하지 않아도 PSD 원본 파일을 라이브러리에 올리면 개발자는 이 파일을 드림위버에서 불러올 수 있다. PSD 파일의 각 요소들을 클릭하면서요소들의 속성 및 요소간의 간격을 쉽게 볼 수 있고 복사하여 코드에 적용할 수 있다.

-Window > extract 를 선택하면 PSD를 볼 수 있는 extract 창이 나타난다. 처음에는 라이브러리에 있는 PSD 파일들이 섬네일로 나오는데, 자신이 보길 원하는 PSD파일을 선택한다.

강의: 노연정 & 배수규