일러스트레이터와 함께 하는 UI 디자인
이런 말을 하면 내 나이가 금세 탄로나겠지만, 내가 그래픽 디자인을 시작했을 당시 웹은 걸음마 단계였다. 나는 대지 작업 기술을 배우고 식자를 했지만, 컴퓨터를 사용하면 그 작업이 훨씬 빠르게 처리된다는 건 꿈에도 몰랐다. 학교를 졸업하자 내가 배워둔 기술은 더 이상 쓸모가 없다는 걸 뼈저리게 느꼈다. 시대에 발맞추기 위해 나는 당시 내 능력으로 살 수 있던 유일한 컴퓨터를 구입했다. 반짝반짝 빛나는 윈텔 PC에 코렐드로(CorelDraw)를 설치하고, 디지털 그래픽 디자인의 첫 발걸음을 내디뎠다. 하지만 미래에 내가 인쇄물 디자인에서 거의 손을 뗄 줄은 상상도 못했었다. 그 무렵 나는 어스링크(Earthlink)에 가입하고 지오시티(Geocities)에 홈페이지를 만들어서 재미 삼아 HTML을 배우기 시작했지만, 내 목적은 호기심 충족 그 이상도 이하도 아니었다.

웹의 시작
1998년, 나는 처음으로 맥을 사고, 첫 클라이언트의 홈페이지를 제작했다. 포토샵을 사용해서 페이지를 디자인하고, 슬라이스해서 테이블에 맞춰 넣고, 드림위버를 사용해 마크업을 했다. 그 첫 번째 사이트가 탄생될 때의 기쁨을 아직도 잊을 수 없다. 오늘날의 웹사이트와 비교해보면 엉성하고 투박하지만 말이다. 그 후로 오랫동안 나는 작업의 효율성을 높이기 위해 노력해 왔지만, 창의성과 속도를 함께 높이는 방법을 찾기는 쉽지 않았다.
몇 년 전부터는 인터랙션 디자인과 UI 디자인으로 분야를 옮겨가고 있다. 웹 애플리케이션과 모바일 기기의 UI를 디자인하면서, 그래픽 디자이너이자 웹 디자이너로서 익힌 모든 기술을 더욱 발전시켜야 했다. 나는 다년간 포토샵을 사용해 디자인 업무를 처리해왔다. 픽셀을 완벽하게 표현하는 포토샵의 기술은 마음에 들었지만, 업무 처리에 있어서의 유연성 부족은 다소 아쉬운 부분이었다. 내가 포토샵을 보조하는 용도로 즐겨 사용하던 프로그램은, 빠른 속도와 벡터 드로잉 기능이 매력적인 어도비 일러스트레이터(Adobe Illustrator)였다. 일러스트레이터에서 웹 페이지와 애플리케이션 UI의 시안을 잡기도 했지만 와이어프레임 단계를 넘어가면 포토샵으로 돌아와서 작업을 마무리하곤 했다.
그러던 어느 날 놀라운 일이 벌어졌다. 2010년 초, 어도비가 세련된 픽셀 기능을 추가한 일러스트레이터 CS5를 출시한 것이다. 몇 가지 문제점이 있기는 했지만 나는 약간의 망설임 끝에 업그레이드를 해보기로 결심했다. 설마 이 정도일 줄이야, 모든 기능이 완벽했다. 나는 뒤도 돌아보지 않고 일러스트레이터에 안착했다. 최신 버전인 CS6은 창의성을 포기하지 않으면서도 속도와 효율성이라는 두 마리 토끼를 잡아 주었다.

친숙한 환경
포토샵이나 인디자인을 사용해본 사람이라면 일러스트레이터의 기능들이 친숙하게 느껴질 것이다. 디자인 덕분이다. 어도비 크리에이티브 스위트(Adobe Creative Suite) 프로그램 대부분은 유저인터페이스를 통일했기 때문에, 위 그림에서 보이는 것처럼 함께 사용하기에 좋고 일러스트레이터를 배우는 데 걸리는 시간도 크게 단축된다. 아직 어도비 프로그램을 사용해보지 않은 사람이라도 금방 속도가 붙고 재미도 있으며 쉽게 익힐 수 있을 것이다. 모든 일이 그렇듯 연습과 인내심만 있으면 된다. 일러스트레이터에 익숙해지고 나면 이제까지 왜 웹이나 애플리케이션을 디자인하면서 이 프로그램을 쓰지 않았는지 궁금해질 것이다.

이제 시작하자!
디자이너인 나는 늘 일러스트레이터를 사용해 삽화를 그리고 로고를 디자인하곤 했다. 하지만 원래 다른 프로그램을 사용하던 웹 디자인을 일러스트레이터로 하려다 보니, 다년간 쌓아온 수많은 습관을 ‘씻어내야’ 했다. 따라서 일러스트레이터를 한 번도 사용해본 적이 없는 사람이라면 오히려 적응이 쉬울 것이다. 처음 프로그램을 실행시켰을 때에는 막막함이 느껴질 수도 있다. 실용적인 인터페이스이지만 처음 보는 사람은 주눅이 들기도 한다. 툴과 패널, 텅 빈 화면을 보고 있자면 어디서부터 시작을 해야 하나 싶을 것이다.
작업 환경은 정해진 대로 따르는 대신 원하는 대로 배치를 바꿀 수 있다. 일러스트레이터는 맞춤 설정이 가능하므로 패널과 도구 상자, 메뉴를 자신의 방식과 작업순서에 맞게 정렬하면 된다. 오브젝트를 기반으로 하는 프로그램의 특성상 마음껏 위치를 조정하고 실험해보기 좋다.
실전을 통해 기능을 익힐 수 있도록 UI 목업 하나를 만드는 과정을 통해 프로그램 사용법을 배워보려고 한다. 작업 과정에서 파일 저장을 잊지 말자. 하지만 저장을 깜빡했을 경우 http://www.peachpit.com/UIwithAI#extras에 가면 단계별 목업과 그 밖에 유용한 예제를 다운로드할 수 있다. 자, 이제 자리에 앉아 커피를 한 잔 홀짝이면서, 일러스트레이터를 사용해 여러분의 창의적인 상상력을 발휘해보자.