IT개발 직무에 대한 대중들의 관심이 늘고 있다. 일선 회사들의 복지 제도가 널리 알려지면서 긍정적인 인식이 자리잡고 있기 때문이다. 다만 개발 기술인 ‘코딩’은 처음 접한다면 복잡하게 느껴지기 마련이다. 실제로 학습 난이도 탓에 흥미를 잃는 이들도 많다. <이코리아>는 이처럼 진입장벽에 부딪힌 이들의 IT첫걸음을 돕기 위해 네 번째 차례로 ‘어도비XD’ 서비스를 소개한다. 

XD는 포토샵·프리미어프로 등 디자인 툴 개발사 어도비가 제공하는 프로토타이핑 툴이다. 프로토타이핑이란 소프트웨어를 개발하기 전에 UI(인터페이스)·UX(사용자 경험)를 미리 구성해보는 것을 말한다. PC·모바일 웹사이트·앱·게임 등의 ‘기획’ 단계에 활용한다.

XD의 장점은 ‘스케치’ ‘프로토파이’ 등 다른 툴들과 달리 기본 무료라는 것이다. 이에 서비스 기획자 지망생들이 첫걸음을 떼기 좋다.

또 어도비 포토샵·일러스트레이터와 같은 어도비 디자인 툴과의 연계도 지원한다. 인터페이스도 기존 어도비 툴들과 비슷해, 평소 디자인에 관심이 많았다면 익히기 쉽다.

어도비 XD 툴박스.
어도비 XD 툴박스. 툴 사용법은 이정도만 알아도 초보자들에게는 충분하다. 

디자인 감각이 없는 기획자 지망생이라도 겁먹을 필요는 없다. 기획자는 자신의 ‘아이디어’를 담은 기획서를 설득력 있게 만들면 될뿐, 화려한 디자인은 디자이너와 웹퍼블리셔의 몫이다. 기획자는 기초적인 사용법만 익혀도 시각적으로 눈에 띄는 기획서를 만들 수 있다.

예를 들어 <이코리아>의 PC 웹페이지를 역기획한다고 가정해보자. ‘메인’에서 ‘정치’ 섹션을 누르면 정치분야 기사 목록이, ‘기사’를 클릭하면 내용이 나오도록 하는 것이다.

이를 위해서는 디자인 탭에서 ‘메인’ ‘정치 목록’ ‘기사 내용’ 3개 페이지를 그려야 한다. 먼저 하나의 플로우에 아트보드(툴박스 텍스트와 돋보기 사이의 기호)를 3개 만든다. 이후 각 아트보드에 ‘메인’ ‘정치 목록’ ‘기사 내용’ 화면을 하나씩 배치한다.

그리고 ‘메인’에서 ‘정치’ 섹션이나 ‘기사’를 클릭했을 때, 해당 페이지로 이동한다는 것을 시각적으로 표현하기 위해 작은 도형을 만들어 ‘메인’ 아트보드 위에 놓는다. ‘정치’ 섹션과 ‘기사 내용’ 아트보드에는 <이코리아> 로고에 도형을 붙여 메인으로 돌아올 수 있도록 한다. 예제에서는 이 3개의 도형을 빨간색 원 버튼으로 그렸다.

다음으로는 프로토타입 탭에서 각 버튼 클릭 이후의 흐름을 설계해야 한다. 우선 ‘메인’ 아트보드 위에 그렸던 빨간 버튼을 누른다. 그뒤 나타나는 화살표를 드래그해 ‘정치’와 ‘기사 내용’ 아트보드에 연결시킨다. 정치와 기사내용에서도 화살표를 끌어다 ‘메인’에 붙이면 끝이다. 이렇게 완성된 프로토타입은 우측 상단의 삼각형 기호를 누르면 제대로 작동하는지 직접 점검해 볼 수 있다.

XD로는 아쉽게도 실전에서 이용하는 웹사이트나 앱을 만들 수는 없다. 다만 기획에는 충분히 활용 가능하다. 현재 역기획서를 만들며 웹사이트·앱·게임 등 업계 취업을 준비하는 지망생이라면, 파워포인트 대신 XD를 활용해보는 것은 어떨까.

저작권자 © 이코리아 무단전재 및 재배포 금지