brunch

매거진 매거진 목요일

라이킷 360 댓글 10

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 티몬 디자인스토리 Mar 16. 2017

포토샵과 스케치를 고민하는 당신에게

포토샵, 스케치 비교 리뷰

티몬의 UX랩에서는 다양한 연구과제를 진행하고 있습니다. 그 중, 서비스 선행프로젝트나 진행중인 프로젝트와 같이 즉시 공개가 곤란한 내용도 있지만, 나누면 좋은 정보들을 꾸준히 공유하고자 합니다. 본 레포트는 UX랩의 스케치 도입에 관한 의사결정을 위해 진행한 리서치 내용입니다. 세상에 공개된 지식을 살펴보고 모아서 저희의 시각과 견해를 보태서 나눕니다.

지금껏 포토샵으로

디자인 잘해왔는데

스케치, 너는 뭐야?

디자이너들에게 포토샵은 떼려야 뗄 수 없는 프로그램입니다.

하지만 해외에서는 UI 디자이너들에게 포토샵이 점점 외면당하고 있다고 하는데요.

포토샵과의 경쟁에서 현재 조금 더 우위에 있는 프로그램은 바로 스케치입니다.

출처: Avocode , 2016 / Illustrated by Maxime Bourgeois

위의 표는 해외에서 진행한 인터페이스 디자인에 이용하는 주된 툴에 대한 설문조사 결과입니다. 실제로 디자이너들이 오랫동안 사용해온 포토샵을 두고 스케치로 갈아탄 이유가 더 궁금해졌는데요. 아마도 UX 프로세스의 변화가 그에 대한 해답인 것 같습니다.

출처: O'reilly , 2016

O'reilly에서 실행한 조사에 따르면 2016년에 가장 많이 진행한 UX 프로세스 방식은 「애자일-디자인 스프린트-린-워터폴-기타」 순서라고 합니다. 디자인 스프린트와 린 방식은 모두 애자일 환경에서 가능하기 때문에 응답자의 90% 이상이 애자일 프로세스로 프로젝트를 진행한 것입니다.

애자일 프로세스는 「요구사항 분석 - 디자인 - 구현 - 테스트」 이 4가지 단계를 빠르게 순환 반복합니다.

또한, 프로젝트 전체에 대한 순환이 아닌 작은 기능(User story) 단위의 순환으로 여러 차례의 테스트, 수정 과정을 거쳐 해결책을 모색하기에 좋은 프로세스입니다. 그래서 최근에 많은 프로젝트들이 애자일 방식을 도입하고 있으며 그에따라 디자인 프로세스가 변경되었습니다.

즉, 디자인 작업 프로세스 역시 작고 민첩하게 진행되게 되었습니다.

그래서 등장한 것이 바로 '스케치'라는 프로그램입니다!

Sketch

스케치는 보헤미안 코딩이라는 네덜란드의 작은 회사에서 만들어진 툴입니다.

스케치를 한마디로 표현하면 '디자이너를 위한 빠르고, 가벼운 와이어프레임/비주얼/UI도구'입니다.

스케치의 특징을 나열 하자면

설계/UI 디자인에 특화된 툴

Vector 기반

웹과의 연동성이 뛰어남

다양하고 유용한 플러그인들

프로토타입 툴들과의 연동이 용이함

대지에 아트보드 여러 개로 작업 가능

등등... 너무나 많습니다.

제가 직접 스케치를 사용하여 아트보드에 UI를 디자인했을 때, 총 38개의 페이지를 작업했음에도 불구하고 차지하는 용량은 19.7MB밖에 되지 않았습니다. 그리고 그 38개의 페이지가 서로 연결되는 페이지였기 때문에 아트보드에서 전반적인 UI flow를 보면서 작업이 가능했던 점이 좋았던 것 같습니다.

직접 사용해보니 스케치가 정말 포토샵에 비해 훨씬 가볍다는 느낌을 받았는데요.

스케치가 포토샵보다 얼마나 가벼운지 비교해보기 위해서 간단하게 테스트를 해보았습니다.

프로그램 자체 크기 비교

티몬 메인화면 파일 크기 비교

포토샵, 스케치 프로그램 자체 크기를 비교해보면 포토샵이 약 38배 더 크기가 컸고, 똑같은 티몬 모바일 메인 화면을 디자인했을 때 역시 psd파일이 스케치에서 작업한 파일보다 약 8배 더 컸습니다.

이 외에도 다른 여러 가지 작업을 해보며 비교해봐도 포토샵 파일이 스케치 파일보다 몇 배씩 용량을 더 차지하는 것을 확인할 수 있었습니다.

이렇게 간단한 테스트를 통해서도 스케치가 포토샵보다 훨씬 가볍다는 것은 증명할 수 있었습니다.

포토샵 vs 스케치

이제 본격적으로 포토샵과 스케치를 낱낱이 비교해볼까요?

해상도

가장 먼저 살펴볼 것은 해상도 부분입니다.

포토샵은 벡터도 가능하지만 기본적으로는 비트맵 기반의 프로그램이기 때문에 UI 작업 시 다양한 기기별 해상도 대응을 위해 2,3 배수 크기의 작업 사이즈가 권장됩니다.

하지만 스케치는 벡터와 비트맵 중 선택이 가능한데, 기본적으로는 벡터 기반이기 때문에 1 배수 작업 사이즈로 다양한 기기별 해상도 대응이 가능하여 UI 디자인을 하기에 편리합니다.

반복되는 UI

두 번째로는 반복되는 UI를 그리는 상황에서 이용하기 좋은 포토샵의 스마트 오브젝트와 스케치의 심벌 기능을 비교해 보았습니다.

스마트 오브젝트의 경우에는 스마트 오브젝트로 묶어놓고 UI 디자인과 콘텐츠 내용을 바꾸게 되면 모두 동일하게 변경되는 반면에 스케치의 심벌은 UI 디자인 변경 시 디자인은 변경되지만 안에 콘텐츠는 따로 변경되지 않습니다.

즉, 더미 콘텐츠가 얹힌 반복되는 UI를 디자인할 경우에는 스케치가 훨씬 편리합니다.

그리고 더미 콘텐츠를 얹을 때도 스마트 오브젝트에서 더미 콘텐츠를 다 다르게 얹으려면 스마트 오브젝트를 복사하여 다른. psb파일로 만들어야 하기 때문에 일일이 작성해야 하는 번거로움이 있습니다.

하지만 스케치는 더미 콘텐츠를 플러그인 사용으로 비교적 편하게 작성 가능합니다.

이 부분은 뒤에서 자세히 설명해드리겠습니다.

제플린

개발 가이드를 주기 위한 제플린 사용에서의 포토샵 스케치의 차이도 살펴보았습니다.

먼저 텍스트뷰 관련한 사항으로 psd파일은 제플린에서 안드로이드 스튜디오 텍스트 뷰에 생기는 좌우 사방의 텍스트 패딩 값이 없이 간격을 측정합니다. 스케치 파일을 제플린으로 옮겼을 때에는 안드로이드 스튜디오 텍스트뷰에 생기는 좌우 사방의 패딩 값보다 더 큰 패딩 값을 가지고 측정되었습니다.

또한 포토샵에서 제플린으로 가이드를 넘길 때 문제가 되는 폰트 값이 소수 점으로 뜨는 문제는 스케치로 넘겼을 때는 나타나지 않았습니다.

플러그인

이제 스케치의 심벌 기능과 함께 티몬(쇼핑몰) UI를 그릴 때 편리할 것 같은 유용한 플러그인들을 몇 가지 소개해 보겠습니다.

1. 스케치 심벌 기능 + Content Generator 플러그인

티몬 메인화면의 다양한 딜 상품 리스트를 심벌로 묶고, 각각의 딜을 Content Generator 플러그인을 사용해 더미 콘텐츠를 넣어보았습니다. 심벌 그룹을 클릭해서 우측에 있는 텍스트와 이미지 정보만 바꾸면 되기 때문에 기존에 포토샵에서 작업할 때 보다 훨씬 빠르고 편리합니다.

스케치 심벌 기능 , Content Generator 플러그인

2. 버튼 크기 자동 조절

스케치를 사용하면 버튼의 여백을 일일이 조절할 필요가 없습니다.

Dynamic Button 플러그인을 사용하면 자동으로 텍스트 길이가 길어져도 설정해놓은 패딩 값만큼 버튼 영역이 커집니다.

Dynamic Button 플러그인

3. Craft 사용

Craft : Invision에서 만든 sketch/photoshop용 플러그인

크래프트는 여섯 가지의 대표 기능을 가지고 있는 아주 유용한 플러그인입니다.

프로토타입 스케치를 팀 단위로 함께 공유하면서 작업이 가능한 프리핸드와, 스케치 내부에서 프로토타입을 만들 수 있는 프로토타입 기능, 한 번의 클릭으로 인비전 디자인 화면과 동기화가 가능한 싱크 기능, 더미 콘텐츠를 생성해주는 등의 디자인에 필요한 데이터를 만들어주는 데이터 기능, 팀원과 디자인 소스들을 공유할 수 있는 라이브러리 기능, 반복되는 UI를 그리드에 맞춰 복제해주는 듀플리케이트 기능이 있습니다.

크래프트를 사용하여 반복되는 UI 그룹을 복사하고, 더미 콘텐츠를 넣는 과정을 각각 포토샵과 스케치에서 사용한 모습을 아래 영상으로 준비해보았습니다.

Craft in Photoshop

Craft in Sketch

포토샵과 스케치에서 크래프트를 사용해보았을 때 스케치에서 작동이 훨씬 더 유연하고, 이미지를 import 하는 방식 역시 포토샵보다 다양하다는 것을 알 수 있었습니다.

4. 자동으로 지도 생성

지도가 들어가는 UI를 그릴 때, 구글맵이나 네이버 지도에서 지도 캡처해서 넣어본 경험... 다들 있으실 텐데요!

스케치에서 Map generator플러그인을 사용하면 주소만 넣어도 간편하게 지도가 자동으로 들어갑니다.

Map Generator 플러그인

Extensions / Plugins

스케치의 다양한 플러그인과 유사한 기능이 포토샵 익스텐션으로도 존재합니다.

아래에 스케치 플러그인과 유사한 포토샵 익스텐션 몇 가지를 표로 정리해놓았습니다.

각각의 플러그인과 익스텐션을 사용해보니,

포토샵에서 기능들을 시행할 때는 스케치에서 할 때 보다 단계가 1-2단계씩 더 걸리거나 적용 속도가 약간씩 더 느리다는 것을 느꼈습니다.

이러한 스케치에도 장점만이 있는 것은 물론 아닙니다.

스케치의 단점은

Mac os만 지원

이미지 편집 기능 부족

단축키 수가 적음

다양한 플러그인, 하지만 한국어 버전 아직 없음

등등 이 있습니다.

지금까지 간단하게나마 포토샵과 스케치를 비교해보았는데요.

포토샵과 스케치를 비교 분석하면서 느낀 점은

UI 디자이너 입장에서

포토샵은

포토샵은 UI를 그릴 때 필요한 기술 그 이상으로 힘을 주고 있다는 느낌이 듭니다.

그 이유는 아마도 원래 포토샵이 만들어진 목적 자체가 이미지를 편집하는 것이었기 때문이겠죠. 하지만 새롭게 UI 디자인을 위한 기능들이 더해지면서 툴의 반응속도가 느려지고, 사용이 편하지만은 않습니다.

반면에 스케치는

원래 목적이 단어 뜻 그대로 가벼운 설계(스케치)에서 시작했던 툴이다 보니, 설계와 UI, 비주얼을 그리기에 비교적 쉽고 빠르며 편리합니다.

하지만 점점 기존의 포토샵이 가진 몇몇 가지의 기능들에 대한 보완이 되면서 스케치도 버전 업데이트에 따라 무거워지고 있습니다. 리서치를 진행하는 기간 동안에도 스케치와 포토샵의 기능들이 계속해서 변화하고, 서로의 기능들이 점차 닮아가고 있었습니다.

포토샵과 스케치 두 프로그램을 두고 온전히 설계와 UI를 그리기 위함이라는 목적만 따진다면 기능과 사용성 면에서 스케치가 포토샵보다 더 나은 것 같습니다. 하지만 주어진 환경과 프로젝트의 상황을 모두 고려한다면 둘 중 어떤 것이 낫다고 자신 있게 말하기는 어렵습니다. 포토샵과 스케치는 각각의 장단점이 확실하며, 기능들이 점차 업데이트됨에 따라서 어떤 프로그램이 UI 그리는 툴의 최강자로 남을지 확신하기 어려운 상황입니다.

지금 글을 작성하는 현시점까지는 UI를 그리기에는 스케치가 효율적이지만 사용환경이나 툴의 완성도를 고려해보았을 땐, 어도비라는 오래된 툴 전문회사의 개발 능력으로 점차 나아질 포토샵이나 어도비 XD 툴을 통해 스케치를 금세 따라잡을 수도 있을 것 같다는 생각이 듭니다.

또한, 스케치를 활용하더라도 이미지 리터칭과 드로잉 작업을 한 팀에서 소화해야 하는 조직 구조라면 스케치와 포토샵을 동시에 사용해야 하므로 스케치만을 디자인팀의 툴로 활용하여 비용을 줄이는 목적에 도달할 수 없게 됩니다. 다시 말하면 대규모 서비스를 이미 유지 운영하고 있는 상황이라면 스케치 도입과 함께 업무 분장 / 조직개편 / 기존 리소스 교체 작업이 함께 이루어져야 함을 뜻합니다.