brunch

매거진 나의 디자인 이야기

라이킷 91 댓글 3

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 이선주 Apr 12. 2017

Tool, 어떻게 쓰세요?

디자인 툴에 대한 짧은 생각

디자인 프리랜서 일을 하다가 보면, 필연적으로 여기저기 다닐 수밖에 없고, 이런저런 일을 하게 된다. 그러다 보니 다양한 업무환경을 보게 되는데, 최근 일하고 있는 곳에서 느끼는 바가 있어서 글로 쓴다.

종이와 연필

실제로는 종이와 볼펜을 쓴다. 연필을 매번 깎기가 힘들고, 중간에 부러지거나 묻어나기 때문에 신경 쓸 것이 많아져서 볼펜을 꽤 오래 써왔다. 볼펜으로는 Bic을 매우 좋아한다. 얼마 전에 만년필을 선물 받아서 만년필을 쓰기도 한다. 종이는 아무것이나 상관없다.

디자인을 할 때, 종이에서 해보는 것은 여러 가지 장점이 있다. 형식이 없고, 생각하는 것이 거의 그대로 나온다. 그리고 재미있다. 하지만 세상이 변해서 이제는 아이패드 프로를 쓴다. 색을 넣을 수 있고, 다양한 포맷으로 저장할 수 있기 때문에 유용하다. 또 여러 가지 색을 쓸 수 있어서 기능별로 화면의 요소들을 분리하기도 쉽고, 정리도 잘 된다.

대개 종이에 뭔가 할 때는 나중에 대체 뭘 생각한 건지 알 수 없는데, 하려고 했던 의도나 목적을 적어두면 도움이 된다. 전통적인 방법이지만, 이제는 이 방법을 무시할 수 없게 되었다.

포토샵

내가 디자이너가 된 원인이기도 하다. 고등학교 때 윈도 95가 설치되는 컴퓨터를 처음 샀다. 그리고 그때는 용산에서 여러 가지 소프트웨어를 잔뜩 하드디스크에 복사해주는 것이 관례였다. 지금으로는 상상할 수도 없는 일이지만, 그때는 그랬다. 그래서 용산 아저씨가 깔아준 게임을 모두 해보고 실행해 본 것이 포토샵이었다. 포토샵을 배우는데 정말 오랜 시간이 걸렸다. 채널의 기능을 이해하는데 1년이 걸렸다.

많은 사람들이 잘 모르는 것 중에 하나가 포토샵의 기원인데, 포토샵은 사진사들이 사진을 인화하고 가공하는 절차를 디지털화한 소프트웨어다. 채널이나 레이어, 기타 보정 기능도 사진 인화에서 온 것이 많다. 사진에 글자를 올려야 하는 것도 당시 필수적인 요구사항이었다. 초기 포토샵의 개발에 사진 전문가가 많은 조언을 했다.

그래서 포토샵은 이미지 편집에 강하다. 그리고 오랜 세월의 업데이트를 거치면서 당시 시대가 요구하는 기능들을 많이 받아들였고, 포토샵만 있으면 뭐든지 할 수 있는 툴이 되었다. UI 디자인, 애니메이션, 인쇄, 벡터 드로잉 등 많은 기능이 있지만, 가장 강력한 기능은 역시 픽셀 기반의 이미지 편집이다.

많은 디자이너가 포토샵을 사용하여 작업한다. 포토샵 기반의 작업 프로세스는 시안을 만들고, 파일을 만들고, '최종본'이라는 이름을 붙이는 것이다. 그 안의 수많은 요소들은 레이어 기반으로 관리된다. 최근 업데이트로 뭔가 더 합리적인 방법이 생긴 것 같지만, 그런 기능들을 좀 더 전문적으로 수행하는 새로운 툴들이 많이 생겼다.

어피니티 디자이너

프로그래머가 추천해준 디자인 툴이다. 재미있게 나는 이 툴을 3번 추천받았는데, 3번째 추천받은 시점에서 운명이구나 생각하고 본격적으로 사용했다. 나는 어피니티 디자이너의 콘셉트를 매우 좋아한다.

포토샵을 능숙하게 쓰는데 몇 년이 걸리고 수십만 원의 돈이 포토샵 책 구매하는데 쓰였는데, 어피니티 디자이너에 익숙해지는데 불과 1달의 시간과 몇 번의 유튜브 시청이면 충분했다.

어피니티 디자이너는 벡터 기반의 드로잉 툴이다. 포토샵의 픽셀을 벡터로 바꾼 듯 하지만, 현대에 맞는 다양한 디테일을 갖추고 있다. 레티나 UI를 지원하고, 픽셀 뷰, 벡터 뷰, 아웃라인, 저장 등 참신하게 해석된 기능이 많다. 디자이너의 상황에 맞게 기능들이 잘 배치되어 있고, 특히 빠른 UI 제작을 하는데 적합하다. 플랫폼이 다양할 때 매우 좋고, 위치를 옮기거나 크기를 변경하는 기능이 편리하다. 포토샵에 비해 매우 저렴하고 심플한 기능을 효과적으로 제공하지만, 아직 몇 년 안된 툴이라 몇 가지 미비한 점이 있지만, 크게 신경 쓸 정도는 아니다.

스케치

지금까지 웹사이트 디자인에 적합한 툴, 아이콘 제작에 적합한 툴, 모션에 적합한 툴이 수없이 많이 나왔다. 하지만 UI 제작에 이렇게 효과적인 툴은 스케치 이상 가는 것이 없다. 스케치와 유사한 툴들이 프로토타이핑 툴로 많이 나오고 있지만, 스케치가 제일 안정적이다. 스케치는 제플린과 함께 사용되기도 한다.

스케치는 Low-Fi 모델을 쉽게 만들 수 있다. 개발자에게 이 푸른색 사각형은 아이콘이 들어갈 겁니다. '아이콘이 어떻게 생겼는지는 신경 안 써도 됩니다.'하고 Hi-Fi로 만들 수 있다. 디자인을 기다리지 않고, 와이어프레임을 만드는 즉시 개발자가 개발이 가능하다. 심벌을 계속 디자인해서 업데이트하면 된다. 그럼 거의 동시에 작업이 완료된다.

스케치는 프로젝트의 시작부터 끝까지 프로세스를 모두 처리할 수 있다. PPT만 줄곧 만드는 기획자, 여기서의 흐름은 어떻게 되냐고 묻는 개발자, 그 중간에 낀 디자이너에게는 구원 같은 툴이다. 하지만 업무 프로세스가 스케치를 중심으로 진행되지 않고, 심벌을 왜 그렇게 만들어야 하는지 이해를 못하는 순간 재앙이 시작된다.

그래서 스케치에서는 디자인 자원 관리가 매우 중요하다. 가이드라인이 디자인 자원과 함께 관리돼야 한다. 디자인 가이드를 작업이 완료된 후에 사후 문서로 만드는 것이 아니라. 프로젝트가 완료되면서 점점 더 완성된 형태로 나아가야 한다. 그리고 필요하면 바꿀 수 있어야 한다.

결국 당분간의 최적의 대안은 스케치가 될 것으로 예상한다. 여기에 사용되는 벡터 디자인 자원은 일러스트레이터나 어피니티 디자이너에서 가져오면 된다. 스케치는 최근 업데이트에서 SVG Export 기능이 강화되고, 프로그래머와 작업을 동기화할 수 있는 가능성을 더 많이 제시했기 때문에 앞으로 더 편리해질 것으로 예상된다.

툴이 달라지면, 방식도 달라진다.

스케치가 매우 강력한 툴인 것은 분명하지만, 디자이너 혼자 무작정 스케치로 디자인을 시작하는 것은 위험하다. 디자이너에게 전통적으로 주어지는 사명이 하나 있는데, 우리가 완성할 프로젝트의 마지막 모습을 생각하는 것이다. 이전까지 이 일은 결제의 문지방을 넘어가기 위한 요식행위였는데, 지금의 프로세스에서는 매우 중요해졌다.

사용자가 실제로 사용할 모습을 예상할 수 있는 눈에 보이는 형태와 프로젝트가 가지는 성격이 디자인을 통해 공감대를 이룰 수 있기 때문이다. 상상할 수 없는 것을 만드는 것은 위험하다. 프로그래머가 디자인을 모른다고 해서, 최종적인 결과물에 관심이 없는 것이 아니다. UX 디자이너의 경우에는 전체적인 행동의 흐름과 기본적인 내비게이션이 확립된 상태에서 스케치 작업을 시작하는 것이 중요하다.

결과물의 그림이 없고, 흐름이 공유되지 않은 상태에서 스케치로 작업이 시작되면, 모두 목적지를 모르는 급행열차에 탄 상태에 빠지기 쉽다. 그리고 조악한 현재의 작업에 대한 피드백이 반복되면서 프로젝트가 어디로 가는지 알 수 없게 된다. 스케치의 작업은 포토샵에서처럼 전체 시안을 만들고 그 시안을 다시 잘게 쪼개서 디자인 자원으로 만드는 일과는 좀 다르다.

새로운 디자인 프로세스의 시대

Atomic Design

웹디자이너 Brad Frost는 인터페이스를 이루는 요소들을 분리하고 시스템으로 만들기 위해서 고민했고, 그 결과로 Atomic Design이라는 시스템을 만들었다. 위의 이미지에서 보는 것처럼 각 원자가 있고, 원자를 조직하고 템플릿으로 만들어서 결과물로 만들어낸다. 실질적인 사례로 IBM의 카본 디자인 시스템이 있다. 가이드가 아니다. 카본(Carbon)은 탄소를 이야기하는데, IBM은 카본 디자인 시스템을 이렇게 소개한다.

"탄소는 본질적으로 복잡한 구조가 더 간단한 화합물로 만들어지도록 해줍니다. 카본 디자인 시스템은 일련의 아름답고 직관적인 디자인을 만드는 일련의 개별 스타일과 컴포넌트입니다. 이 디자인들은 모두 보편적인 원리를 따르기 때문에 체계적이고 논리적입니다."

모바일 회사의 양축인 애플과 구글의 가이드라인을 넘어서 개발자와 디자이너가 협업할 수 있는 시스템 Kits를 Sketch와 Git으로 자원이 제공한다.

이렇게 될 수밖에 없는 이유가 우리가 접하고 만들고 사용하는 웹이나 앱이 그냥 이미지가 아니라 인터렉션을 고려해야 하는 UI인 경우가 많아지고 있기 때문이다. UI는 기본적으로 9가지 상태가 있다. Vince Speelman은 The Nine States of Design라는 글에서 이 상태를 설명한다.

Nothing: 컴포넌트가 존재하지만 시작되지 않은 상태

Loading: 컴포넌트가 시작되면서 생기는 로딩, 안 보일수록 좋다.

None: 컴포넌트가 준비되었지만, Empty, No data, No item인 상태

One: 한 개의 아이템만 있거나 하나만 남았을 때

Some: 얼마간의 데이터가 로딩된 상태

Too many: 데이터가 너무 많거나 필요 이상의 입력이 수행될 경우

Incorrect: Something is not right about componet. An error has occurred.

Correct: This item has had it needs statisfied.

Done: 모든 사항이 완료되었고, 더 이상 걱정할 것이 없음을 사용자에게 알려주는 단계.

포토샵은 이런 세상에 맞게 태어난 툴이 아니다. 물론 레이어로 만들 수 있겠지만, 레이어로 만들고 나서 이걸 확인하기 위해서는 별도의 작업이 추가적으로 필요하다. 그래서 이걸 좀 더 편하게 할 수 있는 해결책이 필요했는데, 그 툴이 지금까지는 스케치다.

Jon Moore는 A Step-by-Step Guide for Starting a New App Design Project in Sketch에서 스케치를 사용하여 디자인을 시작하는 방식을 이렇게 이야기한다.

1. 파일 폴더를 만듭니다.
2. 컬러를 선택합니다.
3. 폰트를 결정합니다.
4. 그리드를 구성합니다.
5. Blockframe을 만듭니다.
6. Hi-Fi(High Fidelity)로 변환합니다.

포토샵이 작업의 주요 툴인 시절과 비교하면, 비슷한 이야기 같지만, 세부적인 사항들은 많이 다르다.

첫 번째, 파일 폴더는 Assets, Exprots, UI-design.

두 번째, 컬러는 주요 색상, 검은색(명도라고 생각하시면 쉽다.), 성공 시 색상, 경고 색상, 위험 색상을 선택한다.

세 번째, 읽기 쉽고, 큰 글씨로 썼을 때, 아주 작은 글씨로 썼을 때, 굵기가 다양한지 확인한다.

네 번째, 다양한 디바이스를 고려한 그리드를 선택한다. 스케치의 레이아웃 기능을 말한다.

다섯 번째, UX Flow에 따라 기능이나 UI를 모듈 형식으로 디자인한다.

여섯 번째, 다섯 번째 작업까지가 Lo-Fi다. 이제 Hi-Fi로 변환한다.

사용할 수 있는 모든 것을 사용하지만, 목적을 잊으면 안 된다.

스케치로 작업하기 전에 종이와 펜이나 포토샵 혹은 어피니티 디자이너가 필요한 이유가 여전히 남아있다. 현실에서 스케치로 Lo-Fi로 만들기 시작하면, 팀원들의 동공에 지진이 일어난다. 불행한 일이지만, 충분한 디자인 자원이나 가이드 혹은 시스템이 없이 시작하는 상태에서 디자이너는 Jon Moore의 여섯 번째 단계를 미리 생각해서 팀원들에게 보여줘야 한다.

아무리 반복적이고 개선되는 디자인을 한다고 해도 팀이 완성할 작품의 비전을 보는 것은 큰 안도감을 준다. 디자이너도 다른 파트와 마찬가지로 목적을 가지고 일관성을 유지해야 하고 그러려면 눈에 보이는 목표가 필요하다. 포토샵이나 어피니티 디자이너는 디자이너는 미리 목적지를 확인하는 작업에 유용하다.

도시 한가운데, 18,038개의 철제 부품을 사용하여 크게 3 부분으로 분리되는 A자 모양의 높이 324m의 외벽이 없는 격자구조의 철탑을 만든다고 하는 것보다...