작년 한 해 많은 스케치 관련 강의나 도서를 접할 수 있었다. 그런데 한 가지 아쉬운 점은 이들 강의나 도서들이 스케치의 수 많은 기능을 설명하는데 초점을 맞추다보니 정작 중요한 것, 바로 스케치를 도입 하면서 영향을 받게 되는 전체 디자인 프로세스의 변화에 대한 부분에 대해서는 상대적으로 소홀히 다루고 있다는 것이다. 주변 많은 디자이너들이나 디자인 조직에서 스케치 도입 여부로 자문 요청이 있었는데 어디에서부터 어느 정도 수준으로 시작을 해야 할 지에 대한 문의가 많았다. 또한 정작 도입해 놓고 활용도가 낮은 경우도 꽤 많이 접했는데, 이에 대한 원인을 살펴보면 전체 디자인 프로세스를 고려하지 않고 스케치를 단순히 포토샵의 대체재로만 생각했기 때문이다. 그래서 스케치를 중심으로 한 UI 디자인 프로세스를 정리해 보았다.

UI 디자인 프로세스란?

먼저 이 글에서 말하는 UI 디자인 프로세스와 관련 용어에 대한 정리를 한판 해 보았다. 각각의 용어는 학술적 정의보다는 전체 글의 맥락적 이해를 돕기 위한 개인적인 정의임을 밝힌다.

1. 제품

여기서 말하는 제품은 Digital Product를 말한다. 흔히 말하는 웹사이트, 모바일 애플리케이션, 가전이나 웨어러블 기기 같은 물리적인 제품(Physical Product)에 포함되어 있는 사용자와 상호작용하는 스크린 등을 말한다.

2. 디자인 프로세스

하나의 제품을 디자인하기 위한 과정을 말한다. 이는 다시 3가지 단계를 가진다. UX 리서치, UI 디자인, 구현이다.

3. UX 리서치

비즈니스 측면과 사용자 측면에서의 요구사항을 수집하는 과정이다. 휴리스틱 평가, 인터뷰, 사용성 평가, 컨텍스츄얼 인쿼리 같은 정성 조사와 구글 애널리틱스(Google Analytics), A/B 테스트 같은 정량 조사 등을 수행한다. 이에 대한 정리와 분석을 통해 디자인이 해결해야 할 문제를 정의한다. 그리고 제품이 가져야 할 핵심 기능들을 정리한다. 업계 전반적으로 UX 리서치만을 전문적으로 다루는 디자이너나 조직은 점점 줄고 UI 디자이너들이 이를 직접 수행하는 비중이 늘고 있다.

4. UI 디자인

UX 리서치에서 정의된 문제에 대한 해답을 찾는 과정이다. UI 디자인은 레이아웃과 플로우를 디자인 단계와 비주얼의 완성도를 높이는 디자인 단계로 나눌 수 있다. 제조사에서는 이를 각각 UI 디자이너와 GUI 디자이너로 역할을 분리해서 진행한다. IT사는 통상 UI 디자이너가 이 두 단계를 함께 진행한다.

5. 구현

흔히 말하는 개발 과정이다. 이 과정도 크게 두 가지 영역으로 나뉜다. 먼저 제품의 껍데기를 개발하는 ‘프론트-엔드(Front-end)’ 영역이다. HTML/CSS/자바스크립트나 모바일 애플리케이션의 클라이언트(Client) 등을 주로 다룬다. 사용자는 주로 이 껍데기를 접한다. 그래서 UI 디자이너와 주로 소통하게 되는 대상이 ‘프론트-엔트 엔지니어’이고 일부 UI 디자이너는 이 껍데기까지 자신이 다 만들어 버린다. 이 껍데기를 실제 사용되는 데이터와 연동해서 구동되게 만들어주는 것이 ‘백-엔드(Back-end) 엔지니어’의 역할이다. 이 글에서 말하는 구현은 ‘프론트-엔드’ 개발까지를 의미한다.

스케치를 중심으로 UI 디자인 프로세스를 바꾸면 전체 디자인 프로세스에서 앞 뒤로 맞닿아 있는 UX 리서치와 구현 단계도 영향을 받는다. 간단히 언급하자면, UX 리서치에서는 사용성 평가 방법과 구글 애널리틱스 상세 항목 설정 등에 영향을, 구현에서는 디자인 데이터의 속성과 커뮤니케이션 방법 등이 크게 영향을 받는다.

UI 디자이너가 제품을 디자인하게 되는 상황

UI 디자이너가 제품을 디자인하게 되는 상황은 다음 두 가지 중 한 가지이다.

1. 기존에 없던 새로운 제품을 디자인 할 때

UX 리서치를 통해 제품의 전체적인 디자인 컨셉과 필수 요구사항(기능)을 정리한 상황이다. 이제 이 요구사항들을 녹여낸 레이아웃을 스크린 별로 만들고 각 스크린들을 연결한 사용자 플로우를 디자인해야 한다. 그리고 비주얼 디자인을 통해 완성도를 높이고 엔지니어에게 전달할 개발 가이드를 작성해야 한다.

2. 기존에 이미 존재하는 제품을 디자인 할 때

제품이 이미 시장에 선보였고 주기적인 업데이트를 해야하는 상황이다. 1번 상황과 가장 큰 차이는 이미 구축된 자체 UI 컴포넌트들이 있다는 점이다. 때문에 UX 리서치 결과를 녹여낼 때 이전 보다는 훨씬 빠르게 진행이 가능하다.

오늘 글은 1번 상황을 거쳐 2번 상황까지 갔을 때를 다루었다. 현재 2번 상황인 경우는 아래 글을 읽어보고 잽싸게 현재의 UI 컴포넌트들과 스타일 가이드를 빠르게 스케치 데이터로 전환하는 작업을 먼저 진행해야 한다.

UI 디자인을 위한 준비물

먼저 필요한 준비물은 스케치(Sketch), 애니마(Anima), 인비전(Invision), 제플린(Zeplin) 그리고 앱스트랙트(Abstract)이다. 스케치 도입의 유효성이 검증되지 않은 상황에서 이 모든 것을 회사에 요구하기가 어려울 것이다. 이 때는 디자인 조직의 상황과 의사결정권자의 성향 등을 잘 파악해서 대처해야 한다. 예를 들어 위 준비물들을 개인적으로 구입 후 조직 내 작은 프로젝트에 적용해 본다. 그리고 이에 대한 결과와 인사이트를 공식적인 자리를 만들어 공유하고 이에 대한 지원을 요청하는 것도 하나의 방법이다.

각설하고, 이제 이 준비물들을 살펴보자.

스케치의 특징은 다들 잘 알것이라고 생각하고 생략하겠다. 개인적으로는 플러그인을 통한 무한한 확장성이 가장 큰 특징이라고 생각하는데 나머지 준비물들은 모두 이 스케치와의 연동을 통해 작동한다. 참고로 스케치는 개발 언어의 특성 상 윈도 버전이 나올 수 없다. 아마 이 부분도 스케치 도입 시 큰 장벽 중 하나일 것이다. 준비물에 맥을 추가해야 하니 말이다.

애니마는 크게 런치패드(Launchpad)와 오토 레이아웃(Auto Layout)이라는 기능을 가지고 있다. UI 디자이너는 애니마를 레이아웃 디자인과 개발 가이드 전달 시 사용하게 된다.

영상에서 보듯이 웹 브라우저 크기에 따른 스크린 별 레이아웃(반응형 레이아웃, Responsive Layout)을 빠르게 테스트 해 볼 수 있고 버튼 한번으로 HTML 데이터를 프론트-엔드 엔지니어에게 전달 가능하다.

인비전은 많은 디자이너들이 제플린과 용도를 헷갈려 하는데 개인적으로는 디자이너와 타 업무 담당자(마케터, 기획자, 클라이언트 등)와의 ‘커뮤니케이션’에만 사용 할 것을 추천한다. 인비전에 올라간 디자인은 이 커뮤니케이션을 통해 항상 바뀐다.

스케치에서 디자인한 레이아웃과 플로우를 빠르게 Clickable한 프로토타입으로 만들고 관련 담당자들과 함께 사용해 보면서 수시로 피드백을 주고 받을 수 있다. 스케치에서 인비전을 100% 활용하기 위해서는 인비전에서 제공하는 크래프트(Craft)를 설치해야 한다.

인비전과 크래프트의 조합만으로도 디자인 업무의 커뮤니케이션에서 엄청난 변화를 느끼게 되는데 가장 큰 변화가 매일 주고 받는 이메일 수의 감소이다. 제품 디자인과 직접적인 연관이 있는 모든 커뮤니케이션은 인비전을 통해 이루어지고 회의 일정을 잡거나 큰 이슈에 대한 내용을 공유할 때에나 이메일을 주고 받게 되기 때문이다.

제플린은 기존의 파워포인트를 통한 개발가이드를 대체한 툴이다. 사실 이러한 시도는 기존에도 많았다. 예를 들어 비운의 어시스터PS 같은… 기존의 시도들이 디자이너의 개발 가이드 업무 노가다를 줄여주는데 초점을 맞췄다면 제플린은 여기에 엔지니어의 업무 노가다까지 줄여주고자 하였다. 거기에 디자이너와 엔지니어의 커뮤니케이션까지 가능하다. 제플린에는 최종 버전의 디자인이 올라와야 한다. 인비전과 달리 쉽게 디자인이 수정되지 않는 버전이 올라와야하고 그래야 엔지니어가 안정적으로 이를 구현할 수 있다.

물론 이미지 소스 변경 등 작은 수정은 제플린을 통해 커뮤니케이션하고 디자인 변경이 일어날 수는 있다.

추가적으로 제플린을 통한 개발 가이드 발행 전에 애니마를 통해 HTML을 확인하는 과정을 꼭 거쳐보자. 예를 들어 스케치 아트보드에서는 아래 두 개의 아이콘이 똑같이 보인다.

그런데 이를 애니마로 HTML을 만들어 보면…

이렇게 달라보인다. 원인은 스케치에서 아이콘 익스포트를 PNG로 했느냐 SVG로 했느냐 일 때도 있고 SVG로 했을 때도 Fill 만으로 만들었느냐 Border를 사용했느냐 일 때도 있다. (엔지니어들은 Fill로만 디자인할 것을 권함) 이런 다양한 현상들을 미리 체크하면 디자이너가 만든 디자인과 엔지니어를 통해 구현된 디자인의 간극을 좀 더 쉽고 빠르게 좁힐 수 있다.

마지막으로 앱스트랙트는 스케치를 위한 버전 관리 툴이다. 보통 엔지니어들은 깃허브(Github), 소스트리(Sourcetree), 퍼포스(Perforce) 같은 개발 소스를 위한 버전 관리툴을 사용한다. UI 디자인에서도 디자인 데이터의 버전 관리가 점점 더 중요해 지고 있다. 이유는 간단하다. 애자일 프로세스 때문이다. 제품에 들어가는 수 많은 기능을 잘게 쪼개어 디자인 해야하고 또 동시에 여러 명의 디자이너들이 이 쪼개진 기능들을 함께 디자인하는 환경이기 때문에 스케치 파일의 버전 관리가 절실해진 것이다.

개념은 간단하다. 스케치의 마스터(Master) 버전을 앱스트랙트에 올려놓고 이후 디자이너들이 디자인 작업을 할 때마다 여기서 새로운 가지(New Branch)를 쳐서 자신의 작업을 진행한다. 디자인이 완료되면 이 새로운 가지를 마스터 버전에 병합(Merge)시키면 된다. 이를 통해 누가 어떤 내용을 언제 변경했는지 버전 별로 확인이 가능하다.

준비물이 갖춰지면 먼저 작은 규모의 프로젝트를 하나 진행해 보자.

레이아웃과 플로우 디자인하기

전체적인 UI 디자인 프로세스를 툴 중심으로 나타내면 다음과 같다.

이제 스케치 열고 스크린 디자인을 진행한다. 이때 레이아웃 구성을 위한 UI 컴포넌트들이 필요하다. 기본적으로는 스케치 내의 템플릿을 열어 이를 활용하고 추가적으로 필요한 컴포넌트는 스케치앱소스닷컴에서 찾아서 다운로드 받아 사용한다.

이때 모바일 웹이나 애플리케이션을 디자인 한다면 다음 세 가지 방법을 통해 디자인을 모바일 디바이스에서 확인 가능하다.

• iOS : 스케치 미러(Sketch Mirror) 애플리케이션 설치 후 확인
• 안드로이드 : 스칼라뷰(Skala View) 애플리케이션 설치 후 확인

데스크탑 웹사이트의 경우는 스케치에서 애니마의 런치패드를 실행하면 된다. 스케치를 중심으로한 UI 디자인 프로세스의 특징 중 하나가 바로 이 부분이다. 최종적으로 사용자가 사용하게 될 디바이스를 디자인을 처음 시작하는 단계부터 고려하는 것이다. 이를 통해 말도 안되게 작거나 큰 버튼, 너무 과한 텍스트 정보량이나 너무 횡한 빈 공간 등을 만들어내는 실수를 미리 방지할 수 있다.

각각의 스크린에 대한 레이아웃 디자인이 완료되면 이제 이 스크린들을 연결시켜 플로우를 디자인하자.

먼저 크래프트를 실행한 뒤 하단의 번개 버튼(Prototyping)을 클릭해서 각 스크린을 연결한다.

이제 이 플로우를 인비전에서 사용해 보자.

크래프트에서 맨 위에 있는 첫 번째 버튼(Sync)을 클릭하면 사용자의 로컬에서 작업한 플로우를 웹 상의 인비전으로 보내준다.

인비전에서 이리 저리 사용해 보면 고칠 것들이 바로 보인다. 그럼 다시 스케치에서 작업하고 크래프트로 싱크를 맞추고 인비전에서 다시 확인한다.

다이나믹한 플로우가 필요하다면 프린서플(Principle)이나 프로토파이(Protopie) 같은 프로토타이핑 툴을 추가적으로 사용한다.

위 과정을 순환 반복하면서 스스로 생각하기에 ‘이 정도면 됐어!’ 라고 생각 될 때 작업된 스케치 파일을 앱스트랙트에 업로드한다.

그리고 다시 인비전의 디자인을 엔지니어나 다른 디자이너들과 리뷰한다. 리뷰는 직접 만나서 진행해도 되고 인비전으로 초대해서 온라인으로 진행해도 된다. 이 리뷰를 통해 레이아웃과 플로우 디자인을 수정할 상황이 발생한다면 다시 앱스트랙트를 열어 앞서 생성한 프로젝트로 간다. 여기서 오른쪽 상단 ‘New Branch’를 클릭한 후 마스터 파일에서 새로운 가지를 쳐 준다.

브랜치 이름과 설명을 작성한 다음 여기서 바로 스케치 파일을 연다.

하단 토스트가 내가 지금 작업 중인 스케치 파일이 앱스트랙트에서 꺼내서 사용하고 있다는 것을 알려준다. 이 상태에서 수정이 완료되면 스케치에서 세이브를 한다.

그리고 하단의 ‘Preview & Commit…’ 버튼을 클릭하면 앱스트랙트가 다시 열린다. 아래 그림처럼 하나의컴포넌트 디자인을 변경함으로써 영향 받은 모든 아트보드들을 확인할 수 있다.

왼쪽 상단의 ‘Summarize your changes…’에는 앞서 ‘New Branch’에서 기입한 이름 뒤에 ‘완료'만 붙이는 것이 편하다. 그럼 이제 앱스트랙트에서 언제든지 스케치 파일의 이력을 확인 가능하다.

다시 인비전을 돌아와 인비전에서 이슈 없음이 확인된 스크린에 대해서만 상태를 승인(Approved)로 바꿔준다. 그리고 앱스트랙트에서는 해당 브랜치를 마스터에 병합(Merge) 시켜준다.

비주얼 디자인은 이 승인된(Approved) 스크린들에 대해서만 진행할 것이다. 나머지 스크린들은 여전히 인비전을 통한 커뮤니케이션을 통해 계속 업데이트 될 것이다.

비주얼 디자인하기

비주얼 디자인을 위해 앱스트랙트에서 플로우 디자인 마스터 파일을 다운로드 받은 뒤 비주얼 디자인을 위한 프로젝트를 새로 만들어 준다.

다음으로 플로우 디자인할 때 아트보드 이름이 제대로 되어 있는가를 확인해야 한다.

아트보드 이름이 중요한 이유는 다음과 같다.

• 아트보드 이름을 통해 어떤 스크린이 완성되었고 어떤 스크린에 이슈가 있는지 커뮤니케이션하기에 용이하다.
• 프론트-엔드 엔지니어 역시 이 아트보드 이름으로 HTML 페이지나 스크린 이름을 짜면 디자이너와 엔지니어 간 커뮤니케이션이 보다 원활 해진다.
• 구글 애널리틱스에서 ‘행동 흐름', ‘화면' 등 사용자 로그를 얻기 위한 데이터를 입력할 때 기본 이름이 된다.
• QC나 QA 같은 품질 검사 부서에서도 이 아트보드 이름을 사용하면 이슈가 발견된 페이지(아트보드) 이름만으로도 디자이너와 엔지니어 모두 이슈가 발생한 부분을 쉽게 파악할 수 있다.

다음으로, 많은 디자이너들이 비주얼 디자인이 완료되면 바로 이를 제플린으로 보내 버린다. 여기서 조금만 더 디테일한 과정을 거치는 것이 좋다. 바로 스타일 가이드를 만드는 일이다. 스타일 가이드를 만드는 이유는 다음과 같다.

• 전체 스크린에 사용된 컴포넌트를 하나의 아트보드로 모아 정리하는 과정에서 비주얼 스타일링의 일관성과 표준성을 점검할 수 있다.
• 컴포넌트의 상태(노멀, 호버, 프레스, 인액티브 등)를 정리해 놓으면 엔지니어들이 쉽게 이해할 수 있어 이후 개발된 제품을 디버깅(Debugging)하는데 드는 리소스를 줄일 수 있다.
• 개발 과정에서 마이너한 기능이 추가 또는 수정될 때 디자이너를 거치지 않고 빠르게 이를 적용할 수 있다.
• 다른 디자이너가 스크린 디자인할 때 이를 활용 가능하기 때문에 작업 속도가 빠르면서도 일관성과 표준성을 유지할 수 있다.

스타일 가이드는 비주얼 디자인 스케치 파일 안에서 만들어 준다. 다음으로 각각의 아트보드를 애니마를 통해 확인하고 제플린에 업데이트하면 된다. 만약 디자인 조직 내에서 다양한 제품을 디자인한다면 이 스타일 가이드의 스케치 파일과 앱스트랙트 프로젝트를 따로 관리하는 것이 좋다. 이 과정이 마무리되면 앱스트랙트에서 스케치 내의 변경된 내용을 적어주고 마스터 파일과 병합시킨다.

여기까지 진행되었다면…

제품의 시장 출시 여부와 관련 없이 내부적으로 UI 컴포넌트와 대표 레이아웃 그리고 플로우 등을 자산화하게 된다. 이때부터는 플로우 디자인을 진행 할 때도 비주얼 디자인이 완료된 UI 컴포넌트들을 사용할 수 있다. 이렇게 자체적으로 보유하게 된 UI 컴포넌트로 레이아웃과 플로우 디자인을 하게되면 다음과 같은 장점이 있다.

• 사용자가 실제 사용하고 있는 버튼이나 폰트의 크기, 전반적인 Look&Feel 등을 느끼면서 레이아웃을 짤 수 있어 보다 사용자 관점에서 정교한 디자인이 가능하다.
• 시각적으로 완성도 있는 UI 컴포넌트를 사용하면서 또 다른 영감을 얻을 수 있다.
• 엔지니어들과의 명확한 커뮤니케이션이 가능해진다.

비주얼 디자인 과정 역시 이 단계가 되면 투입되는 시간과 노력이 훨씬 줄어들게 된다. 남는 시간과 노력은 노는데 써도 되고 제품을 위한 브랜딩 가이드를 만들거나 보다 정교한 마이크로 인터랙션을 디자인하는데 사용해도 된다.

오늘은 여기까지…

스케치를 중심으로 UI 디자인 프로세스를 바꿀 때 스케치 하나만으로는 이 변화가 어렵다는 점을 느낄 것이다. 인비전 스튜디오(Invision Studio) 처럼 디자인 프로세스 전체를 통합적으로 아우르려는 시도도 이런 어려움을 극복하고자 하는 시도 중 하나이다. 사진 몇 장과 글 몇 자로 충분한 정보를 전달하는 것이 어렵지만 전체적인 흐름을 이해하는데 조금이나마 도움이 되길 바란다. 그리고 이를 통해 디자이너가 속한 조직과 제품의 특성에 맞춰 자신들만의 UI 디자인 프로세스를 구축하길 바란다.

명성 있는 디자인 어워드들은 대부분 1950년~1980년대부터 시작되었다. 물리적 제품의 디자인을 품평하고 시상하는데서 출발한 이런 디자인 어워드들은 현재 UX/UI 디자인 제품(우리가 일반적으로 말하는 앱이니, 서비스니 하는 것들)까지 그 영역을 확장했다. 생각보다 많은 UX/UI 디자이너들이 이런 디자인 어워드에 출품하는데에 있어 무관심하거나 망설이는 모습을 보게 되는데 한판 정리한 내용을 찾아봐도 찾을 수 없어서 직접 정리 해 봤다. 잘못된 정보가 있으면 언제든 코멘트 부탁한다. 그럼 시작~

디자인 어워드 소개

드좌인 좀 하는 언니 오빠들은 귀동냥으로라도 들어봤음직한 레드닷, iF, IDEA가 일단 세계3대 디자인 어워드라고 불리운다. 다음으로 일본의 Good Design Award가 있고 국내에는 굿 디자인이 있다. 그럼 요 아이들에 대해 잽싸게 살펴보자.

웹사이트 — https://en.red-dot.org

주관 — 노르트라인베스트팔렌 디자인 센터(Design Zentrum Nordrhein Westfalen)

소개—레드닷 디자인 어워드는 독일의 주요 공업 지역인 노르트라인베스트팔렌(Nordrhein Westfalen)주 에쎈(Essen)시에 위치한 노르트라인베스트팔렌 디자인센터에서 주관하고 있다. 1955년에 시작되었으며 현재 독일과 싱가폴에 오피스와 전시관이 있다.

출품 분야 —제품 디자인, 커뮤니케이션 디자인, 컨셉 디자인으로 나뉜다. UX/UI 디자인 제품은 커뮤니케이션 디자인 분야로 출품하면 되는데 여기서도 총 18가지 세부 카테고리가 있다. 이 중에서 Online, Apps, Interface & User Experience Design이 UX/UI 디자인 제품으로 출품 가능한 분야이다. 참고로 출시된 적이 없는 컨셉 디자인의 제품들은 커뮤니케이션 디자인이 아닌 컨셉 디자인 분야로 출품해야 한다.

Online 분야는 쉽게 말해 일반적인 웹사이트에 속하는 것들을 출품하는 분야이다. 내가 만든 결과물이 온라인 쇼핑몰, 마이크로사이트, 소셜미디어, 디지털 캠페인 등에 속한다 생각되면 이 쪽으로 출품이다.

다음으로 Apps 분야는 우리가 보통 말하는 모바일 애플리케이션 같은 아이들을 출품하는 분야이다. 출품하고자 하는 앱이 설치된 기기를 직접 보내거나 출품 사이트에 관련 디자인을 업로드하면 된다.

Interface & User Experience Design 분야는 서비스 디자인, 웨어러블 기기와 연결된 솔루션이나 VR, 스마트 홈 솔루션 등을 출품할 수 있다. 제품 그대로 보내거나 출품 사이트에 관련 디자인을 업로드하면 된다.

출품 기간과 출품 비용 — 조기/정규/추가 출품에 따라 기간과 비용이 다르다.당연한 얘기지만 빨리 출품 할 수록 한푼이라도 아낄 수 있다.

2018년 기준 레드닷 디자인 어워드 출품 기간과 출품 비용은 다음과 같다.

조기 출품 : 3월 5일 ~ 4월 10일 (195유로 / 약 26만원)

정규 출품 : 4월 11일 ~ 5월 29일 (245유로 / 약 33만원)

추가 출품 : 5월 30일 ~ 6월 15일 (315유로 / 약 42만원)

수상 시에는 추가 비용으로 (1,645유로 / 약78만원부터 시작) 레드닷 디자인 어워드 연간 도록에 실리거나 수상 엠블렘을 제품 홍보 등에 사용할 수 있다.

참고로 졸업한지 2년 이내의 주니어 디자이너 또는 학생의 경우 출품에서 20%, 수상 시 40% 할인이 가능하다.

레드닷 디자인 어워드의 역대 수상작은 여기서 확인 가능하다.

웹사이트 — https://ifworlddesignguide.com

주관 — 인터내셔날 포럼 디자인(International Forum Design, 독일 마케팅 컨설팅 기업)

소개 — 레드닷, IDEA와 더불어 세계 3대 디자인 어워드 중 하나인데 레드닷과 마찬가지로 독일에 기반했고 1953년부터 시상을 하고 있다.

출품 분야 — 전체 7개 출품 분야에서 UX/UI 디자인 제품은 Communication과 Service Design/UX 분야에 출품 가능하다.

출품 기간과 출품 비용 — iF 디자인 어워드 역시 조기/정규/추가 출품이 가능한데, 2018년 기준 출품 기간과 출품 비용은 다음과 같다.

조기 출품 : 6월 29일 (250유로 / 약 34만원)

정규 출품 : 9월 28일 (375유로 / 약 50만원)

추가 출품 : 10월 19일 (425유로 / 약 57만원)

위 출품비는 Communication과 Service Design/UX 분야 출품비이고 보통Product 분야는 더 비싸다.

본선 진출 이후에는 추가적인 비용(1600유로 / 약213만원)을 지불해야 한다. 다른 디자인 어워드와 마찬가지로 디자인 어워드 수상 로고를 사용하고 연간 도록에 실려서 많은 이들에게 알리고 싶으면 그만한 비용을 지불해야 한다.

또한 수상작에 한해서 매년 가을에 킨텐스에서 열리는 디자인코리아 전시에 제품이 전시된다.

참고로 학생의 경우 iF 디자인 텔런트 어워드에서 주최측이 올린 이슈에 대한 디자인 솔루션을 출품하는 형태로 참여가 가능하다. 출품비는 무료이고 총 상금으로 20,000유로(약2652만원)가 걸려 있다.

iF 디자인 어워드의 역대 수상작은 여기서 확인 가능하다.

웹사이트 — http://www.idsa.org/IDEA

주관 — 미국 산업디자이너협회(IDSA, Industrial Design Society of America)

소개 — IDEA(The International Design Excellence Awards)는 북미권에서 가장 영향력 있는 디자인 어워드이다. 1980년부터 시상하기 시작했는데 독일에 기반을 둔 레드닷이나 IF에 비해 후발 주자지만 미국이라는 큰 시장 때문에 상대적으로 빠르게 자리 잡은 디자인 어워드이다.

출품 분야 — 전체 20개 출품 분야에서 UX/UI 디자인 제품은 Digital Interaction, Service Design에 출품 가능하며 제품 속성에 따라 Branding이나 Medical & Health 같은 분야에도 출품이 가능하다.

출품 기간과 출품 비용 — IDEA의 경우 조기 출품은 없고 정규/추가 출품만 가능하다.

2018년 기준으로 IDEA 출품 기간과 출품 비용은 다음과 같다.

정규 출품 : 1월 2일 ~ 3월 5일 (510달러 / 약 55만원)

추가 출품 : 3월 6일 ~ 3월 19일 (715달러 / 약 77만원)

본선 진출 이후에는 미국에서 실물 전시를 필요로 하며 추가적인 비용(590달러 / 약64만원)을 지불해야 한다.

학생의 경우 훨씬 더 저렴한 비용(175달러 / 약19만원)으로 출품이 가능하다.

IDEA의 역대 수상작은 여기서 확인 가능하다.

웹사이트 — http://www.g-mark.org/?locale=en

주관 — 일본 디자인 진흥원(JIDP, Japan Institute of Design Promotion)

소개 — 1957년 일본에서 시작된 디자인 어워드이다. 한국 디자인 진흥원(KIDP, Korea Institute of Design Promotion), 대만 디자인 센터(TDC, Taiwan Design Center), 홍콩 디자인 센터(HKDC, Hong Kong Design Centre) 등의 소속 심사위원들이 함께 출품작을 심사한다. 예전에는 G-mark라고 불리웠다.

출품 분야 — 굿 디자인 어워드의 출품 분야는 약간 독특한데 Tangible와 Intangible로 나뉜다. 손으로 직접 만질 수 있느냐 없느냐로 나뉜다는 말인데 이는 다시 Product/Space와 Media/System/Activity로 나뉜다. 여기서 끝이 아니라 다시 세부 분야로 한 번 더 나뉘는데예를 들어 Intangible의 System 분야 안에는 Software, Platform, Business Model 이렇게 세 가지 분야로 나눠서 출품이 가능하다. UX/UI 디자인 제품의 경우 일반적으로 이 세 가지 분야 중 하나에 출품을 하면 된다.

출품할 때는 해당 제품의 사용자가 ‘개인 또는 공공(for Individuals and the Public)’인지, ‘전문 가(for Professionals)인지를 명확히 구분해서 출품해야 한다.

출품 기간과 출품 비용 — 독일이나 미국 디자인 어워드와 달리 한번에 등록을 마감한다.

2018년 기준 굿 디자인 어워드 출품 기간과 출품 비용은 다음과 같다.

정규 출품 : 4월 5일 ~ 5월 31일 (10,800엔 / 약 11만원)

본선 진출 이후에는 일본, 한국, 홍콩, 대만 순으로 돌면서 출품작들을 평가하는데 이를 위해 추가적인 비용을 지불해야 한다. 필수 비용은 57,240엔(약57만원)이다. 여기에 최종 수상을 한 제품들에 한해 전시회 및 연간 도록에 실리기 위해 각각 124,200엔(약123만원)과 32,400엔(32만원)을 추가로 지불해야 한다.

굿 디자인 어워드의 역대 수상작은 여기서 확인 가능하다.

웹 사이트 — http://gd.kidp.or.kr/

주관 — 한국 디자인 진흥원(KIDP, Korea Institute of Design Promotion)

소개 — 1985년부터 시상하기 시작한 디자인 어워드이다. 일본 G-mark와 헷갈릴텐데 나도 헷갈린다. 그래서 통상 GD마크라고 부른다. 디자인 어워드라는 느낌보다는 정부 인증 마크를 받기 위한 과정에 더 가깝다. GD마크의 주최는 산업통상자원부이고 그 산하의 한국디자인진흥원에서 주관한다. 주최는 어떤 정부가 출범하느냐에 따라 항상 바뀌니 (예전에는 지식경제부였음) 그냥 한국디자인진흥원만 기억하면 된다.

참고로, 한국디자인진흥원의 옛 이름은 한국디자인포장센터였다. 1970년대 가공수출 중심의 한국 경제에서 제품의 포장(지금으로 보면 일종의 스타일링)을 통한 부가가치 창출을 위해 만든 정부 산하 기관이었다. 지금도 디자인이라고 하면 스타일링으로 인식하는 아재들이 많은데 이 기관과 당시 대학교의 영향이 크다.

각설하고, 홈페이지를 보면 정보의 수준이나 관리 수준이 이윤석이다.

홈페이지에 보면 ‘출품’이 아니라 ‘신청’이라는 용어를 사용하는데 말 그대로 GD마크를 달고 싶으면 ‘신청’을 하고 심사를 받으라는 말이다.

수상작은 매년 가을에 열리는 디자인코리아 기간에 킨텍스에서 실물로 전시된다.

출품 분야 — 제품, 커뮤니케이션, 포장, 공간환경 분야로 나뉘는데 이미 감 잡았겠지만 UX/UI 디자인 제품은 커뮤니케이션에 출품하면 된다.

출품 기간과 출품 비용 — 미안하다. 글 작성하는 시점이 2018년인데 홈페이지에는 여전히 2017년 자료 밖에 없다. 매년 비슷한 시기에 신청이 시작되니 일단 한번 보자.

조기 출품 : 7월 1일 ~ 7월 31일 (12만원)

정기 출품 : 8월 1일 ~ 8월 31일 (15만원)

출품 후 심사를 통해 선정된 제품들만 추가 비용을 내고 디자인코리아 기간에 전시가 된다. 전시 비용은 전시 공간 면적에 따라 다른데 가장 작은 공간이 50만원이다. 이 전시 시간 중 수상작이 결정된다.

전시 이후 선정작은 50만원, 수상작은 100만원을 지불하면 GD마크를 맘껏 활용할 수 있다.

GD마크의 역대 수상작은 여기서 확인 가능하다.

디자인 어워드 출품 목적

디자인 어워드 출품에는 앞 서 정리한 내용대로 무시 못할 정성과 비용이 들어간다. 때문에 출품 목적이 명확해야 한다. 쉽게 와닿게 하기 위해 몇 가지 상황을 적어 본다. 추가할 만한 다른 상황이 있으면 언제든 연락 바란다.

기업 —이번 신제품 광고에 세계적인 디자인 어워드에서 수상했다는 내용을 넣으면 소비자들이 더 혹하겠지!

디자인 스튜디오 — 우리 회사에서 진행한 프로젝트가 세계적인 디자인 어워드에서 수상했다는 소식을 알리면 클라이언트 들에게 더 많은 연락이 오겠지!

스타트업 — 세계적인 디자인 어워드에서 수상하면 IR 자료에서 우리가 얼마나 우수한 인재들로 구성되어 있는지 보여줄 수 있다고! 게다가 스타트업 안 오려는 디자이너들에게도 많은 어필할 수 있다고!

디자인 부서의 장 — 울 대표님에게 디자인의 전문성을 인정 받는게 쉽지 않지만이렇게 디자인 어워드에서 수상하면 ‘디자인팀이 뭔지 잘 몰라도 그 쪽 일은 잘하나보다!'라고 생각하겠지! 그래야 우리 연봉도 오른다고!

아마도 대부분 이 정도 상황이지 않을까 싶다. 개인적으로 출품하는 경우는 따로 다루겠다. 여기 정리한 디자인 어워드 외에도 국내외에 수 많은 디자인 어워드가 있기 때문에 각자의 목적에 부합되는 디자인 어워드에 출품하길 바란다.

오늘은 여기까지…

다음 글에서는 일반적인 제품 디자인과는 다른 UX/UI 디자인 제품의 출품 방식에 대해 다뤄보겠다. 어디까지나 내 경험과 지식으로 다룰 예정이니 참고만 하길 바란다. (급겸손 모드)

언제부터인가 프로토타이핑은 UI 디자이너의 필수 역량처럼 되어가고 있다. 실제로 링크드인(LinkedIn)이나 엔젤리스트(AngelList)의 채용공고에서 디자인 포지션 지원자의 필수 역량에 프로토타이핑을 기재한 회사들이 늘어나고 있는 추세이다. 이는 많은 회사들이 애자일 디자인 프로세스(Agile Design Process)로 자신들의 제품을 개발하면서 일어나게 된 변화 중 하나이다. 자연스럽게 디자이너들은 효율적인 프로토타이핑을 위해 어떤 프로토타이핑 툴을 선택해야할지 고민하게 되었는데, 현재 시장에 나와 있는 20여 개나 되는 프로토타이핑 툴을 모두 써보지 않은 이상 본인에게 적절한 툴을 선택을 하는 것은 매우 어려운 일이다. 이번 포스팅을 통해 이 어려운 선택에 조금이나마 도움이 되길 바란다.

먼저, 왜 프로토타이핑이 필요한지에 대해 생각하자!

디자이너가 디자인 프로젝트를 통해 해결해야할 문제는 매번 달라진다. 이는 프로젝트 성격에 맞춰 사용해야 할 프로토타이핑 툴도 매번 달라질 수 있다는 것을 의미한다. 그 프로젝트 성격에 맞춰 본인이 다룰 수 있는 2~3가지 프로토타이핑 툴 중에서 적절히 선택해서 사용해야 한다. 프로토타이핑 툴 선택에 있어 한 가지 툴만 배워서 사용할 생각을 하지 말라는 것이다. 내가 볼 때 적어도 2가지 이상 다뤄야 한다. 다음 질문에 스스로 대답해 보자.

1. 프로토타입을 통해 얻고자 하는 것이 무엇인가?
2. 의사결정권자, 개발자, 사용자 등 누구를 대상으로 하는가?
3. 프로토타이핑에 얼마나 많은 시간을 할애할 수 있는가?
4. 프로토타입을 어떻게 내 업무 프로세스에 녹여낼 것인가?
5. 프로젝트 작업물 제작 과정에 협업이 필요한가?

그리고 충분한 고민이 되었다면 이제 다음 단계로 넘어가 보자

프로토타이핑 툴의 현황 살펴보기

프로토타이핑에 관심 있는 디자이너들은 디자인 스튜디오인 쿠퍼(Cooper)의 분석 자료를 본 경험이 있을 것이다.

그런데 이 자료만으로 저 수 많은 툴들 중 내 프로젝트에 맞는 툴을 선택하기는 쉽지 않다. 디자이너 Taylor Palmer는 ‘Traversing the UX Prototyping Landscape’라는 포스팅에서 수 많은 프로토타이핑 툴들을 ‘얼마나 개발 친화적인가?’라는 축으로 분류했는데 이를 정리하면 다음과 같다.

코드 기반에 가까운 툴일수록 더 많은 시간을 쏟아부어야하지만 그 만큼 실제 결과물과 가까워진다.

참고로 이번 포스팅의 내용이 몇 달 전 초안을 잡아놓은 상태였는데 그 짧은 기간 동안 구글에 인수되었던 픽세이트(Pixate)는 서비스를 종료 했으며 국내 스타트업에서 만든 프로토파이(ProtoPie) 같은 신규 프로토타이핑 툴이 등장하기도 했다. 프로토타이핑 툴 시장의 춘추전국시대라 할만 하다.

프로토타이핑 툴 선택하기

Taylor Palmer는 좀 더 쉬운 툴 선택을 위해 멘탈모델을 만들었는데 보기 쉽게 정리해 보았다.

맨 왼쪽에서 시작해서 ‘Yes’와 ‘No’를 선택하다 보면 20여 개 이상되는 프로토타이핑 툴 중에서 내 디자인 프로젝트에 맞는 툴을 2~3가지로 좁힐 수 있다. 사실 이 상태로도 어느 정도 툴 선택에 대한 큰 기준은 정할 수 있지만 여기에 다음의 자료를 더해보면 조금 더 도움이 될 것이다.

위 분류는 디자이너 Joe Salowitz가 ‘16 Prototyping Tools & How Each Can Be Used’라는 포스팅에서 프로토타이핑 툴을 구현 속도와 피델리티, 그리고 미디어에 따라 분류한 것을 다시 정리한 것이다.

종합하자면 먼저 구현하고자 하는 인터랙션의 수준을 Taylor Palmer의 멘탈모델에서 정한 다음 Joe Salowitz의 분류를 보고 모바일이냐 데스크탑이냐에 따라 선택하면 좀 더 쉬운 선택이 가능하다는 것이다.

다양한 프로토타이핑 케이스 미리보기

앞 서 언급한 몇 가지 기준을 기억한 뒤 아래 몇 가지 케이스를 살펴보면 툴 선택에 있어 좀 더 도움이 될 것이다.

케이스 #1

1. 모바일 프로젝트인데…
2. 피델리티는 낮아도 되지만 빠르게 화면 플로우를 테스트해야해!

케이스 #2

1. 데스크탑 웹 프로젝트인데…
2. 피델리티는 낮아도 되지만 빠르게 화면 플로우를 테스트해야해!

케이스 # 3

1. 모바일과 테스크탑을 위한 반응형 웹 프로젝트인데…
2. 피델리티는 적당한 수준에서 브레이크다운(Break down, 반응형 웹에서 레이아웃이 바뀌는 것)을 테스트해야해!

케이스 # 4

1. 모바일 프로젝트인데…
2. 화면 플로우 보다는 마이크로 인터랙션을 테스트해야해!

케이스 #5

1. 모바일 또는 데스크탑 프로젝트인데…
2. 마이크로 인터랙션도 보여주면서 화면 플로우도 테스트해야해!
3. 여기에 쏟아부을 충분한 작업 시간이 있다고!

프로토타이핑 툴에 대한 집착 버리기

앞서도 이야기했지만 프로토타이핑은 어떤 툴을 선택하느냐보다는 왜 필요한가를 먼저 생각하는 것이 중요하다. 프로토타이핑은 결국 이를 매개로 효율적인 커뮤니케이션을 하기 위함이기 때문인데 현시점에서의 프로토타이핑 툴들은 이 커뮤니케이션에 있어서 큰 변곡점으로 가는 길목에 있다고 볼 수 있기 때문이다.

잠시 생각해보자. 디자이너가 작업한 결과물이 바로 코드화 된다면 어떻게 될까? 아마도 프로젝트와 관련된 이해당사자들 간의 커뮤니케이션에 필요한 리소스가 드라마틱하게 줄어들게 될 것이다. 너무 먼 미래의 이야기 같은가?

아직 베타 버전이긴 하지만 MACAW 같은 툴들이 속속등장하고 있다.

물론 십수년 전 드림위버가 나왔을 때의 안 좋은 추억을 가진 디자이너들도 있겠지만 개인적으로는 나름 기대할 만한 변화가 다가오고 있다고 생각한다. 프로토타이핑 툴 중 가장 높은 시장 점유율을 가진 인비전이 인수했다는 점만으로도 가능성이 기대된다는 것이다.

오늘은 여기까지…

프로토타이핑 툴을 선택하는 것은 프로 골퍼가 라운딩 중 상황을 분석하고 이에 맞는 클럽을 골프백에서 뽑아 쓴다고 생각하면 좀 더 이해가 쉬울 것이다. 디자이너의 경우에도 평소 2~3가지 프로토타이핑 툴의 특성을 이해하고 연습을 통해 기본 기능 정도는 사용할 수 있는 준비가 필요하다. 그리고 이를 언제든지 실무에서 활용할 수 있다면 내년 연봉 인상은 장담 못하지만 오늘 집에는 조금 일찍 퇴근할 수 있을 것이다.

상반기에 몇 차례의 프로토타이핑 워크샵을 진행했다. 처음엔 프린서플을 활용한 프로토타이핑 워크샵으로 시작했지만 회가 거듭되면서 스케치를 활용한 와이어프레임 플로우 디자인과 비주얼 디자인에 대한 부분을 추가했고, 최근에는 전반적인 디자인 프로세스의 변화에 대한 부분까지 다루게 되었다. 워크샵을 통해 만났던 디자이너들의 니즈를 반영한 결과라고 볼 수 있는데 간단히 그 내용을 살펴보자.

왜 스케치를 사용하는 것이 중요해지고 있을까?

이 질문에 대해 나는 디자인 프로세스의 변화라는 관점에서 답을 찾고 있다. 그럼 UX 씬에서는 어떤 디자인 프로세스로 일을 하고 있는지를 먼저 알아볼 필요가 있다. 아쉽게도 국내에는 그럴싸한 자료가 없기에 쌀국 자료를 인용하도록 하겠다.

올 해 초 미국 미디어 기업인 O’reilly는 UX 관련 디자이너들을 대상으로 다양한 항목에 대해 온라인 조사를 진행했다. 조직 규모, 연차 별 연봉 등. 그 중 눈에 띄는 항목은 현재 사용 중인 디자인 프로세스에 대한 것이었다.

디자인 스프린트(Design Sprints), 린 UX(Lean UX) 모두 애자일 환경에서 가능한 프로세스이기에 응답자의 약 90%가 애자일(Agile) 기반의 디자인 프로세스를 사용한다고 볼 수 있다. 그럼 응답 비율 2%인 워터폴(Waterfall) 프로세스에 대해 잠시 살펴보자.

워터폴 프로세스는 주로 대규모 소프트웨어 개발 시 활용되는데 폭포수라는 의미 그대로 한번 내려온 단계를 다시 거슬러 올라가기가 쉽지 않다는 특성이 있다.

반면 애자일 프로세스는 아래 그림처럼 각 단계를 빠르게 순환 반복한다.

근데 여기서 중요한 점은 이 순환이 프로젝트 전체에 대한 것이 아니라 각 기능별 (보통 한입 크기의 단위라고 함)로 순환한다는 점이다.

디자인 스프린트(Design Sprints)도 유사한 개념이다. 우리 말로 하면 ‘디자인 전력질주'이다. 어감에서 바로 느낌적 느낌을 받았을 거라 생각된다. 디자인 스프린트는 구글 벤처스에서 사용하는 프로세스이다. 앞서 애자일에서 얘기했던 한입 규모의 프로젝트를 5일 단위로 진행한다.

살짝 정리하자면, 최근의 디자인 프로세스는 ‘최대한 후딱 만들어서 후딱 테스트하고 후딱 피드백을 얻은 뒤 후딱 고치는 것’을 지향하고 있다는 것이다.

때문에 디자이너 입장에서는 자신의 아이디어를 빠르게 구현해서 사용자 테스트를 해야만 하는 환경에 처해진 것이고, 여기에 최적화된 툴이 스케치 그리고 그와 함께 연동되는 다양한 프로토타이핑 툴들인 것이다.

그럼 ‘스케치가 얼마나 애자일 디자인 프로세스에 있어 효율적인가?’에 대해 궁금해 질 것이다. 먼저 얼마나 많은 디자이너들이 스케치를 사용하고 있는지 알아보고 다음으로 어떻게 스케치를 애자일 환경에서 활용하는가에 대해 알아보자.

얼마나 많은 디자이너들이 스케치를 사용하고 있을까?

작년과 올해 UI 디자인 시 포토샵을 사용하던 디자이너들이 스케치로 툴을 바꿨다가 다시 포토샵으로 돌아온 경우를 꽤 봤다. 다시 포토샵을 사용하는 이유는 크게 두 가지로 볼 수 있다.

첫 번째 이유는, 바쁜 실무 프로젝트 진행 시 익숙하지 않은 스케치를 사용했다가 스케쥴에 문제가 발생했기 때문이다. 워크샵에서 종종 목격되는 재미있는 점 하나는 디자이너들이 스케치가 익숙하지 않다기 보다는 맥이라는 환경 자체가 익숙하지 않아 헤맸다는 점이었다.

두 번째는 스케치가 디자이너의 아이디어 발상에 있어 한계를 가지고 있다고 생각하기 때문이다. 분명 스케치로는 포토샵으로만 표현 가능한 사진 리터칭이나 다양한 필터 등을 사용할 수 없다.

하지만, 이러한 단점들에도 불구하고 많은 디자이너들이 포토샵 대신 스케치를 선택한 이유는 무엇일까? 그리고 또 얼마나 많은 디자이너들이 스케치를 사용하고 있을까? 잠시 아래 자료들을 살펴보자.

Typeform의 작년 초 자료에서 보듯 대부분의 디자이너들은 스케치와 포토샵을 함께 사용한다. 스케치를 메인으로 사용하고 포토샵을 서브로 사용하는 디자이너들이 더 많음을 알 수 있다.

올해 초 O’reilly의 자료에서도 스케치 사용자들의 비율을 확인 할 수 있다.

응답자들은 자신들이 메인으로 사용하는 디자인 툴로 일러스트레이터(43%)와 스케치(40%), 그리고 인비전(38%)을 꼽았다. 흥미로운 점은 스케치를 사용한다고 응답한 디자이너들의 63%는 프로토타이핑/협업 툴인 인비전(Invision)을 함께 사용한다는 점이다.

이 정도 비율이면 쌀국에서 스케치를 사용해서 프로젝트를 진행하는 것이 더 이상 일부 힙(hip)한 디자이너들에게 국한된 이야기가 아니라는 것임을 알 수 있다.

어떻게 스케치를 디자인 프로세스에 녹여낼 수 있을까?

스케치를 단순히 ‘디자인 툴의 변화’라는 관점으로 접근해서는 안된다는 점은 앞서 언급한 ‘디자인 프로세스의 변화'를 통해 어느 정도 수긍했으리라 본다. 그럼 이제 어떻게 스케치, 그리고 이와 연동되는 프로토타이핑 툴을 활용하여 애자일 디자인 프로세스에 활용할 수 있을지 알아보자.

많은 디자인 조직에서 실무자들은 각 단계 별로 아래와 같은 디자인 데이터들을 다루고 있을 것이다.

각각의 작은 화살표는 해당 데이터의 실제 수명을 나타낸다. 예를 들어 UI 디자인 단계에서 제작한 PPT 문서가 비주얼 디자인 단계에서는 더 이상 사용되지 않는다. (파워포인트에서 작성된 와이어프레임에 컬러를 입히고 아이콘을 그리는 비주얼 디자이너가 없다는 전제하에…)

애자일을 위한 스케치 활용의 핵심은 기획자, 디자이너, 개발자 모두가 하나의 툴을 사용하고, 이 데이터를 중심으로 서로 커뮤니케이션하는 것이다.

스케치라는 툴을 통해 ‘문서 없는 (less document-oriented)’ 개발 환경, 그리고 이를 통해 ‘실제 활용 가능한 (code-oriented)’ 데이터를 다루는 것을 지향한다는 것이다.

아래는 내가 지향하는 디자인 프로세스이다. 이 사례가 완벽을 의미하진 않다. 말 그대로 사례로써만 참고하길 바라며 썰을 푼다.

1. UI 디자인

UI 디자이너 (또는 UI 기획자)는 스케치로 와이어프레임을 그린다. 그리고 와이어프레임 플로우 검증을 위한 프로토타이핑을 만든다. 내 경우 스케치 파일을 인비전에 엮어서 빠르게 프로토타이핑 작업을 수행한 뒤 의견을 수렴한다.

인비전은 사용해 본 디자이너들은 알겠지만 정교한 마이크로 인터랙션 보다는 전체 플로우 검증과 커뮤니케이션에 최적화되어 있다. 또한 웹브라우저 기반이기 때문에 링크 주소만 날리면 어떤 디바이스에서든 확인이 가능하다는 장점이 있다.

2. 비주얼 디자인

다음으로 이렇게 검증한 와이어프레임이 담긴 스케치 파일을 비주얼 디자이너에게 전달한다. 비주얼 디자이너는 전달 받은 스케치 파일의 페이지에서 기존 와이어프레임(UI design 페이지)을 복제한 페이지(Visual design)에서 디자인을 시작하면 된다.

비주얼 디자인 시 마이크로 인터랙션이 가능한 프린서플(Principle) 등의 프로토타이핑 툴을 함께 사용한다. 여기서 ‘함께'라는 것은 비주얼 작업이 완료될 즈음 프로토타이핑을 시작하라는 것이 아니라 비주얼 작업과 동시에 시시각각 스케치와 프로토타이핑 툴을 연동하여 아이디어를 구체화하라는 의미이다.

3. 개발 가이드

위 과정을 빠르게 반복 후 실제 개발 데이터로 전달할 때는 제플린을 사용한다. 작업이 완료된 스케치 파일의 레이어와 파일명을 정리하고, 이미지로 내보낼 아이들만 체크 후 제플린으로 업로드하면 된다. 제플린 역시 웹브라우저를 지원하기 때문에 맥을 사용하지 않는 개발자 횽아들도 링크만 있으면 접속이 가능하다.

오늘은 여기까지…

스케치를 활용한 프로토타이핑을 적극적으로 업무에 녹여내고 싶은 디자이너와 기획자는 본인이 속한 조직의 디자인 프로세스를 먼저 고민해봐야 한다. 디자인 프로세스가 바뀌면 기존의 프로젝트 투입 인력, 일정 등에도 영향을 미치며 나아가 조직 구조에도 영향을 미칠 수 있다. 기존의 수직적 조직 구조에서 의사결정권자의 영향력이 컸다면, 애자일한 프로세스에서는 사용자의 피드백이 더 중요해지기 때문에 기존 의사결정권자의 영향력이 줄어들 수 있다. 결과적으로 관리자 보다는 실무자의 역량이 더욱 중요해 진다는 의미이다. 그럼 이제 자신이 속한 조직에 최적화된 디자인 프로세스와 디자인 툴이 무엇일지에 대해 고민해 보길 바란다.

밀라노 디자인 위크 기간에 밀라노 시내 전체에서는 각종 디자인 전시와 관련 이벤트가 함께 열린다. 밀라노의 면적은 서울의 약 3분의 1 정도되는 크기이니 시내를 돌아다니며 모든 전시를 관람한다는 것은 꽤나 흥미로운 여정이 될 것이다. 계속하는 얘기지만 편안한 신발과 튼튼한 하체는 필수이다.

디자인존(Design Zone)알아보기

디자인존은 크게 3개로 나누어 볼 수 있다. 그리고 그 보다 규모가 작은 이벤트존이 11개 정도된다. 시내 전체에서 6일간 약 1,200여 개의 디자인 전시가 열린다. 잠깐 지도를 보자.

큰 노란색 원이 주요 전시가 열리는 곳이다. 왼쪽 상단의 작은 회색 원이 ‘밀라노 가구 박람회'가 열리는 곳이다. 일정을 짤 때는 하루에 하나씩 큰 원을 클리어한다는 생각으로 짜면 된다. 좀 더 구체적인 동선을 짜고 싶다면 공홈의 지도를 참고하자.

토르토나 디자인 위크 (Tortona Design Week) 공략하기

3개의 디자인존 중에서 가장 다양하면서도 흥미로운 디자인 전시들을 볼 수 있는 곳이다. 디자인 위크 기간 신제품 발표를 하는 기업의 홍보관도 볼 수 있으며 각 종 브랜드의 팝업 스토어와 특별한 전시 등을 볼 수 있다. 올해는 한국의 현대자동차와 대만의 에이서스가 메인 스폰서였다.

동선은 다음과 같이 추천해 보겠다. 물론 개인이 선호하는 교통 수단과 전시관에 따라 각자 커스텀하면 된다. 일단 지하철을 타고 녹색 M2 라인 ‘Porta Genova F.s.’에서 내린다.

지하철에서 내려 지도에 보이는 노란색 원을 따라 서쪽 방향으로 쭈욱 걸으면서 전시를 관람한다.

메인 스폰서인 에이서스의 전시관은 관람객이 직접 참여하는 미디어 아트와 자사 제품을 전시하였다.

관람객이 자신의 스맛폰에서 플래시를 켠 뒤 나무에 갖다 대면 그 빛이 나무를 타고 벽면으로 퍼지는 작품이다.

이렇게 보니 전시장 내부에서 찍은 사진이 별로 없어 얼마나 당시에 정신 없었는지 다시 한번 생각하게 된다. 전시를 다 본 후 하천을 따라 걸으면 일본 오사카의 ‘도톤보리' 스멜이 솔솔 풍기는 거리를 걷게 된다. 다행히 양손 가득 드럭 스토어에서 산 잡화 쇼핑백을 든 중국인 관광객은 없다. 하천을 중심으로 좌우에는 레스토랑과 카페가 즐비한데 사람 많은 날에는 자리 잡기가 하늘의 별따기 수준이다.

이렇게 걷다보면 ‘Navigli’라는 동네에 다다른다. 서울의 홍대 같은 곳인데 플리마켓도 있고 이런 저런 이벤트도 열리는 젊음의 거리인데 때문에 거리 곳곳에 기업의 광고판도 많이 볼 수 있다. 가령…

브레라 디자인 디스트릭트 (Brera Design District) 공략하기

브레라 디자인 디스트릭트는 다른 곳에 비해 상대적으로 시내 한 복판에 위치하고 있으며 때문에 기존에 샵으로 운영되는 곳들이 일시적으로 전시장으로 운영되는 경우가 많다. 이 말은 지름신 영접할 일이 많아진다는 것을 의미한다.

지하철 녹색 M2 또는 보라색 M5 라인에서 ‘Garibaldi Fs’ 역에서 내려 아래로 걸어가며 전시 관람하는 것을 추천한다.

아래로 쭉 내려오며 모든 전시를 본 뒤 브레라의 서쪽에 위치한 ‘밀라노 디자인 뮤지엄(La Triennale di Milano)’까지 보는 것을 목표로 하면 된다. 이렇게 여정을 짜는 가장 큰 이유는 디자인 뮤지엄이 밤 10시까지 운영되기 때문에 상대적으로 늦은 시간 관람이 가능하기 때문이다.

다른 나라 디자인 뮤지엄에 갈 때마다 자연스레 동대문 디자인 플라자와 비교하게 되는데 다른 건 모르겠고 전시장의 마감 디테일, 예를 들어 벽에 붙인 타이포그라피의 레터링이나 전시 부스의 모서리 마감 등은 아직 멀었다는 생각을 갖게 하더라. 그리고 아직까지는 여전히 저들의 디자인 뮤지엄이 더 부럽다.

벤츄라 람브라떼 (Ventura Lambrate) 공략하기

이 곳은 다른 디자인존과 비교해서 상대적으로 시내에서 멀리 떨어진 한적한 동네에 위치해 있다. 밀라노는 시내 중심에서 멀어질수록 부유한 사람들이 산다고 하는데 람브라떼를 걷다보면 확실히 시내 중심보다 사람 사는 동네 같은 느낌이 든다.

지하철은 녹색 M2 라인 ‘Lambrate F.s.’에서 내려서 쭉 걸으면 된다. 각자의 경로에 따라 버스나 트램이 더 편안하게 갈 수도 있으니 미리 확인하고 출발하자.

그 밖의 볼거리

디자인존 외에 밀라노 시내 곳곳에서 가볼만 한 곳 들을 정리해 보았다. 자세한 위치는 구글 맵에서 찾으면 바로 나오니 생략한다.

‘토레 벨라스카(Torre Velasca)’는 1958년에 지어진 밀라노의 대표적인 마천루다. 아우디의 전시관도 볼 수 있다.

‘밀라노 대학교(University of Milan)’도 재미난 작품들을 볼 수 있는 곳이다. 정문 근처에 ‘California Bakery’라는 미국식 햄버거 가게도 있으니 들려보자.

‘프라다 파운데이션(Fondazione Prada)’은 프라다에 대한 감성을 느낄 수 있다…는 곳인데 난 프라와 거리가 멀어서 그냥 봤다.

‘엑셀시오르(Excelsior)’는 세계 탑5의 컨셉 스토어이다. 최고의 바잉 컨설턴트와 인테리어 디자이너들의 결과물을 확인해 볼 수 있는데 개인적으로는 지하 식품관에 ‘꼭' 가보기를 추천한다.

이 밖에 서울에도 있는 편집 스토어 ‘10 코르소 코모(10 Corso Como)’와 판교 현대백화점에도 있는 식재료 및 레스토랑 ‘이탈리(Eataly)’도 있는데 직접 보고나서 한국의 그것과 비교해 보는 것도 좋겠다.

디자인 소품을 사고 싶다면 ‘디자인 리퍼블릭(Design Republic)’이나 “하이-테크(High-Tech)’도 추천한다.

두오모 광장 근처의 ‘리나상테 백화점(Rinascente Milano)’과 근처 명품샵 거리는 디스플레이 쪽 디자이너들에게 많은 영감을 줄 것이다.

오늘은 여기까지…

지금까지 총 3회에 걸쳐 밀라노 디자인 위크 여행기를 정리해 보았다. 물론 현업에 있는 디자이너나 디자인을 공부 중인 학생들이 가기에는 많은 시간과 돈이 필요한 여행이다. 그러나 디자이너로 살아가며 몇 년간 꾸준한 준비를 한다면 갈 수 있는 곳이기도 하다. 본인이 어떤 디자인 분야에 종사하고 있던 간에 시니어 디자이너에겐 잊고 있었던 디자인에 대한 열정을, 주니어 디자이너에겐 강렬한 동기 부여를 갖게 해 줄 것이라 믿으며 마무리 짓는다.

먼저 밀라노 가구 박람회를 살펴보자. 일단 규모가 압도적이다. 올해는2,400여개의 브래드가 참여했고, 37만명 정도의 관람객이 찾아왔는데 그 중 70% 가량이 해외 관람객이었다. 코엑스만한 전시장이 20개 정도 한 곳에 모여 있는 셈인데, 모든 부스를 전부 관람한다는 건 욕심이니 진작에 포기하라고 말하고 싶다. 바꿔 말하면 꼭 보고 싶은 브랜드를 미리 정하고 전시장을 찾아야 체력 낭비를 막을 수 있다.

전시장 찾아가기

밀라노 가구 박람회 관람을 위해서는 밀라노 시내에서 북서쪽에 위치한 ‘피에라 밀라노(Fiera Milano)’까지 M1을 타고 가면 된다. 왕복권이 5유로다.

가구 박람회 관람 후 두오모 역으로 들어와서 두오모 성당과 근처 백화점 등을 둘러보는 것도 좋다.

전시 티켓 구매하기

지하철역에서 사람들을 따라 나도 모르게 걷다보면 바로 지상 매표소 앞으로 나오게 된다.

여기서 등록 카드를 작성하고 티켓을 사면 된다. 티켓 가격은 다음과 같다.

• 1일권 : 20유로
• 3일권 : 40유로
• 6일권 : 52유로

학생증 제시 시 15유로 할인 받을 수 있다고 한다. 티켓을 구매 했으면 전시장 가이드를 꼭 챙기자.

전시관들은 크게 1~3층에 나뉘어 위치해 있다. 각 전시장 사이에는 레스토랑과 카페 등의 휴식 공간이 있는데 쉬는 시간 또한 일정에 꼭 반영하길 추천한다.

관람 계획짜기

난 3일권을 구입했다. 3일 동안 오전 10시부터 오후 3시까지 보는 걸 목표로 했다. 가구 박람회를 보는 3일 동안의 늦은 오후와 남은 날에는 디자인존을 둘러보기 위함이었다. 카테고리 별로 다음의 순서로 관람했다.

• 디자인(Design) : ‘Kartell’, ‘Vitra’ 등 대형 브랜드가 있는 전시관 먼저 관람하는 것이 좋다. 디자인관은 총 10여개 정도되는데 앞서 이야기 했듯이 모두 보는 것보다 3일 동안 4~6개 정도의 전시관을 보는 것을 목표로 하자.
• 부엌(EuroCucina) : 부엌과 관련 소품들을 볼 수 있다.
• FTK(Technology for the Kitchen) : 말 그대로 부엌 관련 전자제품과 신기술을 볼 수 있다. 올해는 삼성과 LG가 빠졌다.
• 신진 디자이너(Salone Satellite) : 자신들을 홍보하기 위해 전세계에서 온 디자인대학과 신진 디자이너들을 볼 수 있다.
• 욕실(Salone Internazionale del Bagno) : 욕실과 관련 소품들을 볼 수 있다.

참고로 격년으로 오피스 가구와 조명이 욕실 카테고리를 대체한다. 크게 위의 순서대로 3일간 잘 분산해서 관람하면 된다. 그럼 간단히 각 카테고리 별 전시관을 살펴보자.

디자인(Design)

디자인관은 가구와 소품 브랜드들이 중심이다. 백문이 불여일견이다.

부가티나 에스턴 마틴, 벤틀리 등도 홈 브랜드를 가지고 있는데 나 같은 민초들은 전시 부스에 들어갈 수 없었다. 쇼윈도에 얼굴을 들이대고 상담 받는 고객들을 보면 주로 중동이나 중국 고객들로 보였다.

부엌(Cucina)

정말 사랑스러운 부엌들을 볼 수 있다. 올해 역시도 가장 큰 소비시장인 중국의 요리 환경에 특화된 부엌들과 관련 소품들을 많이 볼 수 있었다.

FTK(Technology for the Kitchen)

‘Miele’ 같은 생활가전 브랜드와 ‘Kitchenaid’ 등의 소형가전 브랜드들을 만나볼 수 있다. 올해는 생각보다 혁신적인 아이디어들은 볼 수 없었다. ‘Smeg’에서 ‘D&G’와의 콜라보로 만든 냉장고 정도가 눈에 띄었다.

FTK의 가장 큰 특징 중 하나는 직접 유명 셰프들이 나와 요리 과정을 시연한다는 것이다. 게다가 요리가 끝나면 관객들에게 그 요리를 나눠준다. 에스프레소 머신이 있는 전시부스에서는 커피를 공짜로 마실 수도 있다.

신진 디자이너(Salone Satellite)

신진 디자이너들과 디자인학과의 홍보 전시관이다. 잘된 작품들을 뽑아서 상도 주고 정해진 시간에 토론도 진행한다. 올해 한국에서는 서울대학교와 상명대학교가 참여했고 개인 디자이너도 한 분 참여하였다.

욕실(Salone Internazionale del Bagno)

이 쪽 부스들은 감정이입이 쉽지 않았다. 욕실이 너무 크고 고급스러워서였던 것 같다. 그렇지만 작은 소품이나 디테일은 너무 좋았다.

욕실의 CMF는 위 사진처럼 전반적으로 반무광의 세라믹 재질에 그레이와 화이트가 대세인데 확실히 기존 욕실의 반짝 반짝한 유리 느낌과는 다른 차이를 느낄 수 있었다.

오늘은 여기까지…

‘밀라노 가구 박람회’를 보다보면 자연스레 ‘서울리빙디자인페어’가 오버랩된다. 둘 사이에는 여러가지 차이점이 있는데 그 중 하나는 현장에서 물건을 사고 파는 거래가 없다는 점이다. 때문인지 각각의 전시부스가 서울에서 느끼던 벼룩시장 같은 느낌 보다는 ‘브랜드가 가진 디자인’ 그 자체를 알리는데 모든 역량을 집중시키고 있다고 느낌을 강하게 받았다. 물론 계약 상담 등을 진행하는 모습은 볼 수 있는데 주로 독립된 상담 공간에서 이루어진다.

한국의 경우 일반적으로 건설사가 집을 팔 때 모든 인테리어 마감까지 시공된 후 분양이 이루어지는데, 해외의 경우 집 자체만을 분양하고 집주인이 문고리부터 전기 스위치까지 하나 하나 고른 후 시공 마감이 이뤄진다. 때문에 자연스레 일반인들도 이런 디자인 전시에 많은 관심을 가지고 그 디자인에 비용을 지불하는데 서슴치 않는 것이 아닐까하는 생각이 들었다.

다음은 밀라노 시내에서 열리는 각 디자인존의 전시들과 그 외의 볼거리들에 대해 이야기 하겠다.

해마다 4월이면 이탈리아 밀라노는 도시 전체가 여러 다양한 행사들로 뜨겁게 달궈진다. 그 다양한 행사들의 공통된 키워드는 바로 ‘디자인'이다. 그 중에서 ‘밀라노 가구 박람회(Salone del Mobile)'가 많이 알려져 있는데, 사실 이 때의 밀라노는 가구 박람회 보다 훨씬 더 다양한 디자인 행사와 볼거리가 가득하다. 올해는 4월 12일부터 4월 17일까지가 공식 디자인 위크 기간이었다. 내년 밀라노 디자인 위크를 위한 디자인 여행을 준비하는 디자이너들에게 도움이 되었으면하는 바램으로 기억을 되새김질 해본다. 참고로 내년 디자인 위크는 2017년 4월 4일부터 4월 9일까지로 예정되어 있다.

항공권 구하기

출장으로만 갔을 때는 몰랐는데 막상 자비로 가려니 겁나 비싸더라. 인천에서 밀라노 말펜사 공항(Malpensa Airport)까지 직항 왕복 항공권이 130만원 전후, 경유 항공권이 100만원 전후이다. 이때 나의 필살기를 꺼내들었다. 그건 바로 ‘스카이패스 신용카드'이다.

이러고 보니 광고 블로그가 된 것 같지만 국내에서 미디엄이 무슨 영향력이 있겠나. 암튼 내 신용카드는 국내에서 1,500원에 1마일리지, 직구 사이트 결제나 해외에서 결제 시 2마일리지가 적립된다. 인천에서 밀라노까지 왕복으로 다녀오려면 70,000마일리지가 필요하다. 일부 마일리지 적립 신용카드는 사용 실적에 따라 최대 4,000마일리지를 추가 적립 해 주기도 한다. 나 같은 경우 대부분의 소비를 신용카드로만 하고 중간 중간 출장이나 여행으로 쌓인 마일리지까지 더해지니 마일리지로 항공권 구매가 가능했다.

호텔 구하기

사실 진짜 문제는 호텔이었다. 출장으로 갔을 때는 회사에서 호텔 전체를 빌리기 때문에 상대적으로 저렴한 가격에 숙박이 해결되었는데 개인으로 가려니 디자인 위크 기간 동안 시내의 모든 호텔들의 숙박비가 훌쩍 올라 있었다. 물론 일찍 예약할 수록 조금이라도 더 저렴한 가격에 예약이 가능하긴 하다.

나는 시내에 있는 ‘미그논 호텔(Hotel Mignon, Milan)’에서 9박을 하였는데 총 숙박비용이 150만원 가량 들었다.부부와 아들이 운영하는 정말 작고 아담한 호텔이다. 평소에는 7~10만원 사이로 예약이 가능한데 디자인 위크 기간에는 제일 작은 룸이 15만원 가량으로 오른다. 편의 시설 등은 열악한 편이다. 아니, 열악하다. 유럽 대부분이 그렇긴 하지만 샤워 부스도 작고 인터넷도 대박 느리다. 장점도 있는데 시내의 다양한 디자인존(Design Zone)들과 가깝고 밀라노 가구 박람회가 열리는 ‘로 피에라 밀라노(Rho Fiera Milano)’도 지하철로 30분이면 갈 수 있다.

또한 호텔에서 4분 정도 걸으면 지하철(M5, Gerusalemme)이나 트램을 탈 수 있고 주변에 슈퍼마켓(Esselunga)과 다양한 레스토랑도 있다.

대중교통 알아보기

공항에서 시내까지는 호텔 위치에 따라 다르지만 보통 말펜사 익스프레스(Malpensa Express)를 타면 된다. 편도 12유로이다.

시내와 가구 박람회가 열리는 전시장까지는 주로 M1을 이용한다. 우리나라로 치면 1호선이다. 1회 이용에 1.5유로다.

최근 개통한 M5는 무인으로 운행된다.

아마 지하철 다음으로 트램과 버스를 많이 이용하게 될 것이다. 나 같은 경우 지하철 발권기에서 대중교통(지하철/트램/버스) 하루 이용권을 주로 이용했다. 4.5유로이다. 10일권도 있다. 여기서 하루란 처음 이용한 시각부터 24시간 이내이니 참고하자.

그 외에 택시는 시내가 전반적으로 너무 막혀서 탈 일이 거의 없었고, 공용 자전거가 있지만 절차를 몰라 패스했다. 그런데 대중교통 보다 더 중요한 건 튼튼한 하체이다. 왜냐하면 이번 여행은 단순 관광이나 휴양이 아닌 ‘디자인 여행’이기 때문에 시내를 겁나 걸으며 꼼꼼히살펴봐야 하기 때문이다.

여행 경비 환전하기

밀라노는 대중교통을 위한 발권이나 레스토랑, 상점 등에서 모두 비자나 마스터 신용카드 거래가 가능하다. 신용카드 사용 시 별도의 수수료가 발생하기 때문에 현금을 준비하는게 좋다고들 하는데 항상 여행이나 출장을 다녀오면 다시 원화로 환전하기 애매한 현지 지폐와 동전이 남는다. 어느새 잊혀지는 이 잔돈들을 생각하면 해외에서 신용카드 사용으로 발생하는 수수료나 이 돈이나 마찬가지 아닌가 싶기도 하다. 암튼 나는 주거래 은행인 우리은행에 가서 수수료 우대를 받아 대략 원화 100만원을 750유로 정도로 환전할 수 있었다.

로밍 준비하기

국내 통신사의 USIM으로 밀라노에서 로밍 데이터를 사용할 수는 있다. 하루 9천원에 3G 데이터가 무제한이다. 그런데 겁나 느리다. 그보다는 유럽 선불USIM 대여를 추천한다. 국내에서 인터넷으로 주문하면 택배로 받을 수 있다.

보통 5만원 선불로 30일간 12기가의 데이터를 사용가능하며 300분 무료 통화도 가능하다. 특히 밀라노에서 구글 맵이 필수인데 통신 속도가 느리면 빡칠 수 있으니 잘 판단하길 바란다. 국내로 돌아온 후 USIM을 택배로 반납해야 한다는 점은 단점이다.

필수 애플리케이션 설치하기

쾌적한 디자인 여행을 즐기기 위해서는 몇 가지 필수 애플리케이션이 필요하다.

꼭 설치해라. 특히 해외 항공사의 경우 잦은 연착과 비행시간 변경 등의 변수가 발생할 수 있는데 이에 대한 빠른 대응이 가능하다.

국내에선 대북안보에 위협이 된다는 이유로 구글 맵이 허접한 정보만 제공하지만 해외에서는 다르다. 밀라노의 모든 대중 교통과 도보 경로를 실시간으로 빠르게 제공 받을 수 있다.

영어 메뉴가 따로 없는 레스토랑에서 필수다. 자칫 여행 기간 내내 한 가지 메뉴만 먹게되는 불상사를 막아준다.

밀라노 가구 박람회장의 각종 전시 정보를 제공한다. 코엑스의 20배 크기 정도되는데 미리 관람할 부스와 경로를 생각해 두지 않으면 몸이 고생한다. 웹사이트에서도 정보를 제공하니 꼭 확인해 보자.

밀라노 전체의 디자인 존에 대한 정보를 제공한다. 마찬가지로 미리 둘러볼 디자인존과 경로를 짤 때 큰 도움을 준다. 웹사이트에서도 많은 정보를 얻을 수 있다.

오늘은 여기까지…

이제 여권의 유효기간을 확인하고 따뜻한 지중해 봄날씨에 어울릴 옷가지와 선글라스(필수!)를 준비하면 된다. 이탈리아 횽아들이 옷 잘 입는다는 건 잘 알려진 사실. 이번에 갔을 때는 스웨덴 브랜드 COS를 입는 횽아들을 많이 볼 수 있었다. 그리고 전시 곳곳에서 명함이 필요한 경우가 있으니 충분히 준비하자. 어떤 전시 부스는 명함으로 정보 등록을 해야 입장이 가능한 경우도 있고, 맘에 드는 디자인을 발견해서 명함을 받고자 할 때 그 디자이너도 여러분의 명함을 요구하는 경우가 있기 때문이다. 그 외 맛집, 쇼핑 정보는 네이버를 이용하면 된다.

작년부터 스케치를 소개하기 위한 책을 준비하고 있었다. 근데 인디자인 편집을 하던 중 귀찮아져서 그 내용을 여기에 조금씩 올리려고 한다. 매우 기본적인 내용부터 차근 차근 올릴 예정이니 이제 막 스케치를 사용하시는 분들에게 조금은 도움이 될 듯하다.

스케치에 대해

스케치는 2008년 네덜란드 헤이크에서 설립된 보헤미안 코딩(Bohemian Coding)사에서 제작한 벡터 기반의 디자인툴이다. 기본적으로 모든 디자인 영역의 디자이너를 위해 제작되었는데, 특히 웹과 모바일 등의 사용자 인터페이스 디자인 영역에서 많은 관심과 사랑을 받고 있다.

스케치의 장점은 기존의 포토샵과 일러스트레이터, 파이어웍스 등에서 디자이너가 쌓았던 디자인 노하우를 그대로 활용 가능하다는 점이다. 이런 이유로 많은 디자이너들이 그들의 디자인 툴을 스케치로 바꿔왔는데 2012년에는 ‘애플 디자인 어워드(Apple Design Award, 2012)’를 수상하며 그 이름을 더 많은 디자이너들에게 알리게 되었다.

스케치 사용 현황

2015년 가을, 온라인 설문 조사 사이트인 ‘타입폼(Typeform)’은 디자이너들들에게 가장 선호하는 디자인 툴이 무엇인지 물어보았다. ‘브레인스토밍’, ‘와이어프레임 제작’, ‘인터페이스 디자인’, ‘프로토타이핑’, ‘프로젝트 관리’, ‘버전 및 파일 관리’ 등 총 6개 분야에 걸친 조사에서 스케치는 ‘와이어프레임 제작’과 ‘인터페이스 디자인’ 분야에서 가장 많이 사용되는 디자인 툴로 조사되었다.

“와이어프레임 제작 만을 위해 만들어진 발사믹(Balsamiq)과 옴니그라플(Omnigraffle)의 사용률은 한 자리 수에 머무른 반면, 스케치는 설문에 참여한 디자이너들이 가장 선호하는 디자인 툴로 조사되었다.”

“혜성처럼 등장한 스케치가 급격하게 사용자층을 넓히고 있다는 것을 확인할 수 있었다. 설문에 참여한 디자이너들의 3분의 1이 스케치를 사용했다. 어도비는 여전히 강력한 디자인 툴이지만 스케치의 보조 툴로 사용하는 디자이너가 많았다.”

위 설문에 응답한 디자이너들의 대부분이 북미와 유럽 디자이너들임을 감안할 때 국내 디자이너들의 스케치 사용 현황과는 분명 차이가 있을 것이다.

스케치를 사용하는 디자이너들이 많아지는 이유

그럼에도 최근 주변에서 스케치를 사용하는 디자이너들을 많이 볼 수 있다. 이에 대해 수 많은 이유가 있겠지만 나는 크게 다음 두 가지를 꼽는다.

먼저 디자인과 개발 프로세스의 변화이다.

모바일 환경이 도래하면서 많은 조직들이 기존의 ‘워터폴(Waterfall)’ 프로세스에서 벗어나고 있다. 워터폴 프로세스에서는 개발의 흐름이 마치 폭포수처럼 지속적으로 아래로 향하기 때문에 이전 또는 상위 단계로 다시 돌아가서 프로젝트를 진행하는 것이 쉽지 않다.

그리고 이제 워터폴의 자리를 ‘애자일(Agile)’ 프로세스가 대체하고 있다. 애자일 프로세스에서는 짧고 반복적인 프로토타입 개발을 통해 소프트웨어 전체를 개발해 가기 때문에 매우 실용적인 접근이 가능하다.

이는 문서를 통한 개발(Document-oriented)가 아니라 실질적인 코딩(Code-oriented)을 통해 프로젝트를 진행하는 경우가 많아졌다는 것을 의미한다.

이러한 애자일 프로세스에서 스케치를 사용하면 UI 설계부터 비주얼라이징까지 하나의 파일로 진행이 가능하다. 여기에 스케치와 연동되는 프로토타이핑 툴과 스타일가이드 툴 등을 연동하면 파워포인트와 워드 문서를 작성하고 관리하던 노력과 비용이 줄어들게 되고 그 것을 온전히 ‘디자인’과 ‘개발’에 쏟아 부을 수 있게 된다.

다음으로 비용의 문제이다.

포토샵과 일러스트레이터 등의 어도비 제품군은 수 백만원을 호가했다. 다행히 어도비 CC가 등장해 월 몇 만원 씩만 내면 이들을 사용할 수 있게 되었다. 그런데 스케치는 단돈 ‘99달러’에 정품을 구입할 수 있다. 구입하면 영원히 이 툴을 사용할 수 있다는 얘기다. (물론 버전이 크게 바뀔 때는 다시 구입해야 한다.) 최근 크게 늘고 있는 스타트업이나 개인 사업자들 입장에서 이는 엄청난 메리트를 제공한다. 어도비가 그들의 오랜 고객인 대기업과 대학교를 스케치에 빼앗기지 않을까 노심초사하는 것이 당연한 상황인 것이다. 게다가 학생이나 교직원은 50% 할인된 가격에 스케치를 구입할 수 있으니 스케치 사용자 층이 빠르게 확산되고 있는 것은 자연스러운 현상이라 볼 수 있다.

오늘은 여기까지…

이 외에도 스케치를 사용하는 이유는 다양하다. 그러나 자신이 속한 디자인 또는 개발 조직의 여건, 그리고 나의 디자인 스타일 등을 한 번 쯤은 생각해보자. 여전히 누군가에겐 포토샵과 일러스트레이터가 최고의 디자인 툴일 수도 있다는 얘기이다. 그럼에도 스케치는 확실히 많은 장점과 가능성을 가진 디자인 툴임은 틀림 없다. 배가 고파서 더 못 쓰겠다. 그럼 이만…

스케치앱소스닷컴에서 스케치용 UI 키트를 다운로드 받아 열어보면 작년 WWDC 2015에서 애플이 발표한 새로운 시스템 폰트, 샌프란시스코 서체(이하 SF체)가 적용되어 있는 것을 볼 수 있다. 그런데 내 맥에 분명 이 폰트가 있는 것 같은데 없다고 알려주는 경고창을 종종 보곤 했을 것이다. 이는 애플이 기존 시스템 폰트와 달리 이번 SF체를 각 OS 별 특성과 디스플레이 환경을 고려해서 최적화했기 때문이다. 그럼 오늘은 이 ‘최적화’라는 것이 구체적으로 무엇인지에 대해 알아보자.

SF체의 구성

애플 개발자 사이트에 계정이 등록되어 있다면 쉽게 SF체를 다운로드 받을 수 있다. 계정이 없다면 여기에서 받아라. 이 서체는 윈도우에서도 설치가 가능하다.

SF체에 대한 애플의 각종 자료와 온라인 상의 분석 글들을 정리해 보면 다음 그림과 같다.

SF와 SF Compact의 차이

‘SF’와 ‘SF Compact’의 가장 큰 차이는 측면의 곡률이 다르다는 점이다. ‘SF Compact’의 곡률이 ‘SF’ 보다 더 작은 이유는 잘 알려진대로 애플 워치의 작은 디스플레이 안에서 조금이라도 더 많은 정보를 보여주기 위함이다. 때문에 iOS와 OSX에서는 ‘SF’를, 워치OS에서는 ‘SF Compact’를 사용하는 것이 좋다.

Display와 Text의 차이

‘Display’와 ‘Text’의 가장 큰 차이는 자간이라고 할 수 있다. ‘Display’의 자간이 더 좁은데 때문에 ‘Display’는 타이틀에 사용하고 자간이 더 넓은 ‘Text’는 본문에 사용하는 것이 좋다.

이 두 서체를 OS에서 자동으로 리사이징하기도 한다. ‘Display’는 20pt 이상으로 키우며 ‘Text’는 19pt 이하로 줄인다. 물론 코드 상에서 이를 제어할 수 있다. 코드 상에서는 ‘:(세미콜론)’을 숫자 들과 세로로 정렬하거나, 숫자 ‘6’, ‘9’을 다른 폰트로 대체할 수 있다. 또한 애니메이션을 위해 동일 자간을 적용할 수도 있다.

오늘은 여기까지…

찾아보면 SF체에 대한 자료가 굉장히 많은데 일단 위 개념을 먼저 이해하고 다른 다양한 자료들을 읽어보기를 추천한다. 다양한 자료들을 최대한 단순하게 정리해 본 내용이기 때문이다.

드디어! 프린서플에서 스케치 파일을 불러올 수 있게 되었다! 다만 공식 업데이트는 아니고 퍼블릭 베타 버전(Version 1.1.0 beta)에서 사용이 가능하다. 퍼블릭 베타 버전 설치와 이번에 업데이트된 기능들, 그리고 이번 베타 버전의 핵심임 스체치 파일 불러오기에 대해 알아보자.

퍼블릭 베타 버전 설치하기

먼저 알아둘 것이 있는데, 이미 프린서플을 사용하고 있는 사용자라면 트라이얼 버전의 사용기간이 남아있거나 정식 라이센스 파일을 가지고 있어야만 한다. 준비가 되었다면 드롭박스 링크에서 베타 버전 설치 파일을 다운로드 받아 설치하면 된다.

베타 버전에서 업데이트된 기능들

크게 11가지 새로운 기능 개선과 7가지의 버그가 수정되었다.

1. 스케치 파일 불러오기

먼저 불러고오자 하는 스케치 파일을 스케치에서 연다.

그 다음 프린서플을 열고 상단 메뉴바에서 ‘Import’ 아이콘을 클릭한다.

원하는 해상도에 맞는 애셋 스케일을 선택한 후 ‘Import’ 클릭!

깔끔하게 프린서플로 들어온 스케치 파일을 확인할 수 있다.

2. 애셋 교체 가능

프린서플에서 상당히 귀찮았던 것 중 하나가 수정된 이미지 단순 교체 작업이었는데 이번에 그 해결책을 내 놓았다. 교체하고자 하는 이미지가 있으면 인스펙터의 이미지 프로퍼티(Image Property)로 해당 이미지를 떨궈놓으면 된다.

3. 파인더에서 미리보기 지원

프린서플에서 파일을 열 때 프린서플 파일의 내용물이 미리보기 형태로 지원된다.

4. 파일 용량을 겁나 줄임

105 MB 파일이 이제 15MB 정도로 줄어든다고 한다.

5. 마우스 클릭 애니메이션 추가

터치 커서 상태에서 마우스 클릭을 하면 터치되는 애니메이션이 추가되었다.

6. 아트보드 복제 시 이벤트도 복제 됨

두 개의 아트보드를 복사&붙여넣기 할 때 두 아트보드 사이의 이벤트들도 함께 복사된다.

7. 전반적인 성능 향상

큰 프로젝트에서도 빠른 속도를 낼 수 있도록 노력했다함…

8. 복제된 이미지 붙여넣기 기능 개선

스케치에서 복제한 이미지를 프린서플에 붙여 넣으면 아트보드의 상단 왼쪽으로 복제된다.

9. 다중 선택 시 인스펙터 수치 공백으로 표시

오브젝트를 다중 선택하면 인스펙터의 수치가 여백으로 표시된다.

10. 인스펙터에서 레이블 드래그 기능 개선

레이블을 드래그하면 설정 대신에 선택한 모든 레이블 통합해 수치가 변경됨

11. 미리보기 녹화 기능 개선

미리보기 녹화를 시작하면 자동으로 전체화면으로 전환된다.

오늘은 여기까지…

그 밖의 버그들을 잡았다고 하는데 위 내용만 알아도 될 듯 하다. 최근 프린서플 사용자가 늘었음을 체감하게 하는 몇 가지 것들이 있는데, 첫 번째는 스케치앱소스닷컴에서 스케치 파일과 더불어 프린서플 파일을 함께 공유하는 사례가 늘고 있다는 것이다. 그리고 두 번째는 프린서플 전문 커뮤니티인 프린서플레포닷컴 같은 사이트들의 등장이다. 이는 프린서플의 현재 버전을 고려할 때 상당히 고무적인 일이라 볼 수 있는데 국내에서도 프린서플 사용자가 많아져서 다양한 정보 교류가 가능해지면 좋겠다.