웹을 통해 새로운 창조를 꿈꾸는 인간

네이버 디자인 : UX NOTE 05-UX TALK

Posted by kimdirector | 2016.12.22 | Hit : 3191

네이버 디자인 포토샵 UX

포토샵을 넘어서

UI 디자이너의 손, 포토샵

과거 디자이너의 작업실은 수많은 도구로 가득 차 있었다. 두께가 다른 여러 가지 펜과 붓, 도형을 그리기 위한 제도 용구, 글자를 배치하기 위한 레터링 도구, 이미지에 효과를 입히기 위한 사진식자기까지. 그러나 오늘날의 디자이너는 이 모든 장비를 랩톱 컴퓨터에 넣고 다닌다. 바로 ‘Adobe Photoshop’이다. 포토샵은 디자인에 입문하는 학생이 가장 먼저 배우는 필수 도구이자, 일반 사용자까지 폭넓게 아우를 수 있는 그래픽 소프트웨어다. 또한 웹과 애플리케이션 디자인(이하 UI 디자인)을 위한 필수 도구로 알려져 있다.

인터페이스를 그릴 때 포토샵이 유용하다는 것을 처음 발견한 사람들은 웹 디자이너이다. 포토샵은 웹페이지를 그리거나 조각내는 데 훌륭한 성능을 발휘했고, 곧 그들의 주력 도구가 된다.(영상이나 출판, 일러스트레이션에 종사하는 디자이너도 포토샵을 사용하지만, 주로 이미지 편집을 위한 보조 수단이다) 웹에 머물던 인터페이스 디자인이 다양한 디바이스로 확대되면서 포토샵을 쓰는 사람들도 많아졌다. ‘UI 디자이너’들의 요구를 수용하며 포토샵은 진화했고, 지금은 명실공히 세계에서 가장 많이 쓰이는 인터페이스 디자인 도구다.

그런데, 포토샵 1.0이 출시된 것은 1990년이다. 아무리 버전업이 계속되었다고 해도 25년이면 신입사원보다 늙은 소프트웨어다. 우리가 흔히 말하는 ‘UI 디자인’의 시발점이 된 iPhone이 출시된 것도 2007년인데, 그동안 포토샵을 대체할 만한 도구가 정말 없었단 말인가. UI 디자이너들이 포토샵을 사랑하는 이유는 아직도 그보다 편리한 도구가 없기 때문일까, 아니면 미처 다른 도구를 써 볼 생각을 하지 못 했던 걸까?

포토샵은 과연 인터페이스 디자인을 위한 도구인가?

이 글은 포토샵이 손에 익숙한 도구일 뿐, 인터페이스 디자인에 적합한 도구가 아니라는 생각에서 출발한다. 잘 쓰고 있는 포토샵이 왜 문제냐고? 기억을 떠올려 보자. 버튼 스타일에 수정이 생겨 수십 개의 파일을 뒤져가며 바꿨던 추억을. 개발자를 앞에 두고 정지된 이미지에 손짓, 발짓을 섞어서 “여기서 이렇게 커지면서 슈아아아악~ 핑?! 하고 움직이게 만들어 주세요.”라고 설명했던 적은 없는가?(물론 움직이는 것처럼 모션 블러 효과를 넣어서 가져갔다는 것도 다 알고 있다.) 어느 정도 공감이 된다면, 포토샵이 불편하게 느껴지는 마법을 경험하러 함께 떠나 보자.

첫째, 포토샵은 개발에 필요한 정보를 이미지로 압축한다

인쇄물과 달리 인터페이스는 반응하고 움직이는 요소들로 이루어진다. 순서와 규칙이 있는 여러 개의 화면과 반응할 수 있는 오브젝트(버튼, 체크박스, 폼 따위)는 마치 유기체처럼 움직인다. 사용자의 특정 제스처나 탭으로 화면이 전환되고, 애니메이션이 제공될 때도 있다. 디자인을 할 때도 이런 규칙과 움직임을 고려해야 한다.

그러나 포토샵은 이름 그대로 정지된 화면을 그리기 위한 도구이며, 산출물 역시 코드로 해석할 수 있는 데이터가 없는 '이미지'이다. '70 x 70px의 버튼', '배경색 #FF66CC', '구름 많음'이라는 텍스트도 포토샵에서는 평등하다. 디자이너는 수많은 층(Layer)와 효과(Effects)로 하나의 포토샵 파일(.PSD)을 만들지만, 개발자에게는 텍스트조차 복사할 수 없는 납작한 평면에 불과한 것이다. 평면 이미지를 제품으로 구현하기 위해서는 조립 설명서와 재료들을 요청할 수밖에 없다. 페이지 개수대로 파일을 만들고,(페이지들은 서로 연결되지 않은 여러 개의 파일로 존재한다) 인터랙션을 표현하기 위해 레이어에 ‘ Highlighted’, ‘release’ 따위의 이름을 짓는다. 그래도 부족한 설명까지 덧붙이려면 ‘디자인 가이드’도 필요하다. 디자인에 맞먹는 시간을 가이드 작성에 쏟아 붓는 이유는 코드를 생산하지 못하는 포토샵 때문이다.

둘째, 오브젝트를 다루는 방식이 인터페이스 디자인과 맞지 않다

인터페이스 디자인의 또 다른 특징은 한 벌의 요소와 스타일(UI kit라고도 불리는)을 여러 페이지에 공통으로 사용하는 점이다. 버튼이나 불릿(bullet), 본문 스타일, 타이틀 바의 디자인 등은 거의 모든 페이지에서 공통으로 쓰인다. 포토샵으로 만든 페이지에서 특정 버튼의 디자인을 변경하기로 했다면, 어떤 일이 벌어질까? 디자이너는 작업한 파일을 모두 열고 해당 버튼이 있는 곳을 일일이 찾아 바꿔야 한다. 페이지가 많을수록 동일 작업을 반복해야 하는데, 현대인이라면 이런 성격의 노동에 시간을 허비해서는 안 된다. 인터페이스 디자인을 위한 도구라면 오브젝트를 따로 저장하는 라이브러리를 두고, 라이브러리에 있는 소스 오브젝트를 업데이트했을 때 다른 페이지에 모두 똑같이 적용되는 것이 자연스럽지 않을까?

셋째, 다양한 플랫폼과 해상도에 쉽게 대응할 수 없다

오브젝트의 위치와 크기를 정의하는 방식이 고정되어 있는 것도 답답하기는 마찬가지다. 인터페이스 디자인은 다양한 플랫폼과 해상도를 지원해야 하는 경우가 많은데, 포토샵에서는 해상도가 조금 달라질 때마다 새로운 캔버스를 열고 작업을 시작해야 한다. 디자인 가이드를 작성하는 것처럼 오브젝트의 크기와 위치를 상대적 기준으로 표현할 수 있다면 얼마나 좋을까. 거리와 마진을 기준으로 위치를 결정할 수 있다면, 캔버스의 크기가 바뀌어도 레이아웃이 유지되어 많은 시간을 절약할 수 있을 것이다. 반응형 웹을 디자인하더라도 다양한 크기의 플랫폼에서 어떻게 변하는지 실시간으로 확인하면서 작업이 가능해질 것이다.

인터페이스 디자인에 특화된 도구, ‘Sketch 3’와 ‘Fireworks’

다행히도 이런 불만을 가진 사람은 필자 혼자가 아니라, 참다못해 제품으로 출시된 경우도 있다. 최근 주목받고 있는 Bohemian cording사의 ‘Sketch 3’를 사용해 보면 포토샵과 비교할 수 없을 만큼 쉽고 빠르게 인터페이스를 완성할 수 있다. 오브젝트를 PNG로 일괄 출력하고, CSS코드를 함께 제공하는 것은 물론이다. 따라서 이미지를 자르고 디자인 가이드를 만들 필요도 거의 없어진다.

포토샵을 만든 Adobe사 또한 포토샵이 인터페이스 디자인에 적절하지 않은 도구라는 것을 누구보다 잘 알고 있었다. Adobe에서 포토샵을 대체할 만한 제품을 여러 차례 출시했다는 사실을 알고 있는 사람은 많지 않다.(기능만 들으면 깜짝 놀랄 만큼 훌륭한 제품도 있다) 그 가운데 가장 주목받았던 것은 벡터 기반의 인터페이스 디자인 도구 ‘Adobe Fireworks’인데, 한때 ‘포토샵보다 Fireworks가 좋나요?.com’1과 같은 사이트가 생길 정도로 많은 인기를 얻었다.

사이트에 게재된 수백 가지 ‘포토샵보다 Fireworks가 좋은 이유’ 가운데 매력적인 항목 몇 가지를 옮겨 보았다.

1. 마스터 페이지를 기반으로 여러 페이지를 동시에 작업할 수 있다.

2. 라이브러리에서 오브젝트를 관리하거나, 텍스트 스타일을 저장해서 쓸 수 있다.

3. HTML로 출력할 수 있다.

4. 오브젝트를 그리고 난 뒤에도 수정하기 쉽다.(Radius 크기도 언제 어디서나)

5. 외 수십 가지

그럼에도 불구하고, 디자이너는 포토샵을 쓴다

일부 항목만 살펴보더라도 ‘Fireworks’는 포토샵 프로세스의 근본적 결함을 개선한 제품이라는 것을 알 수 있다. 그럼에도 불구하고 주변에서 Fireworks를 사용하는 디자이너를 찾기란 불가능에 가깝다.(심지어 현재는 무료 버전으로 풀려 있는데!) ‘Sketch3’ 역시 사용자가 늘고 있지만 갈 길이 멀어 보인다. 왜 수많은 불편을 감수하면서 디자이너들은 포토샵 외의 도구들을 외면하는 것일까?

가장 먼저 생각해 볼 수 있는 것은 인터페이스에 특화된 소프트웨어의 그리기 기능이 포토샵에 비해 상대적으로 빈약하다는 것이다. 특히 스큐어모프(Skeuomorph) 디자인2을 위해서는 포토샵의 그리기 기능이 꼭 필요했다. 하지만 요즘 나오는 제품들의 인터페이스는 대부분 평평한(flat) 디자인이다. 그리기 기능이 거의 필요 없는 상황인데도 여전히 디자이너들은 포토샵을 쓴다.

여기에 대해서는 “디자이너들이 포토샵으로 디자인 하는 것을 가장 편하게 느낀다”는 잠정적 결론을 내릴 수밖에 없을 것 같다. 기초적인 내용이라도 코딩을 공부해 본 디자이너들은 몸에 맞지 않는 옷처럼 불편하다는 이야기를 한다. 시각적 피드백이 없는 숫자와 코드가 무척 어렵게 느껴진다는 것이다. 반면 포토샵을 배우는 데는 오랜 시간이 필요하지 않다. 눈에 보이는 대로 움직이고, 손으로 조작하는 것 같은 경험을 주기 때문이다. 수치를 계산해서 입력하는 것보다 그리는 것이 익숙한 디자이너들에게 ‘포토샵’은 자연스러운 선택인지도 모르겠다.

또한 조직에 속해 여러 사람과 함께 협업해야 하는 입장에서 혼자 작업 도구를 바꾸는 것은 큰 모험이다. ‘Sketch3’를 사용해 열심히 작업한 디자인 파일을 다른, 포토샵을 사용하는 작업자에게 인계해 줘야 한다면? HTML로 저장한 디자인 파일을 디자인 가이드 없이 개발팀에 넘겨도 문제가 없을까? 호환성은 소규모 스튜디오에서 일하거나 프리랜서 디자이너가 아닌 이상 포토샵을 사용할 수밖에 없는 또 다른 이유다.

포토샵을 바꿀 수 없다면 과정을 바꾸어 보자

프로세스를 통한 대안, 가이드에서 출발하는 디자인

기존의 방식을 따라야 한다면, 그 안에서 더 효율적으로 일할 수 있는 방법 또한 찾아봐야 할 것이다. 이 문제를 꾸준히 고민하고 있는 스타트업 Wit studio3홈페이지에서 제공하는 디자인가이드 세미나 자료4를 통해 힌트를 찾을 수 있다. Wit studio는 ‘캔버스에서 그림을 그리듯 디자인하기보다는 모듈로 요소들을 관리할 것’을 권장한다. 가이드는 이미지를 모듈화하고 '원칙'과 '선언'으로 번역하는 과정인데, 이처럼 인터랙션과 요소의 위치를 정의하는 일련의 과정은 코드를 짜는 것과 유사한 면이 있다.

예외 처리가 많은 코드는 결코 좋은 코드가 아니라고 한다. 마찬가지로 원칙이 없이 예외로 가득차 있다면 결코 좋은 디자인이라 할 수 없을 것이다. 디자인 가이드를 작성하다 보면 처음 디자인을 조금씩 수정하게 되는 일이 자주 생긴다. 눈으로 결정한 비율과 크기를 숫자로 바꿔 적는 과정에서 불규칙한 부분이 드러나기 때문이다. 어긋난 부분을 바로잡으면, 기분 탓인지 몰라도 분명 더 보기에 좋다.(호오? ‘가이드에 맞춰 디자인을 수정’했더니 품질이 좋아지다니) 이는 명확한 규칙을 따라 디자인할 때 더 좋은 결과물이 만들어진다는 방증이 아닐까. 더 나아가면 ‘가이드’에서 디자인을 시작할 수도 있다는 이야기다.

매번 페이지에 맞는 크기와 컬러를 선택하는 대신, 이미 개발된 디자인 가이드에서 정의한 스타일을 ‘H1, H2, H3, T1, T2…’ 과 같이 저장해 두었다가 호출하여 디자인에 적용한다면 어떨까.

말하자면 ‘재료가 한정된 디자인’을 하는 셈이다. 네이버처럼 서비스가 다양한 기업은 수십, 수백가지의 각기 다른 디자인 가이드가 필요하지만, 위 방법을 사용한다면 파편화를 막고 소스를 깔끔하게 유지할 수 있을 것이다.(특히 폰트가 그렇다) 웹에서는 기술적인 문제로 포토샵에서 보는 텍스트와 마크업된 텍스트의 크기와 모양이 다르게 보이는데, 이렇게 한다면 개발 완료된 샘플 텍스트를 디자인 전에 확인할 수 있으므로 디자인과 마크업의 간극을 줄일 수 있다. 버튼이나 컬러 등 공통 요소에 업데이트가 필요할 때도 대응이 훨씬 수월해진다. 제한된 원칙과 모듈로 디자인 가이드를 운용하기 위해서는 회사 전체에서 사용할 수 있는 가이드를 소스와 함께 관리하는 편이 좋을 것이다.

디자인을 하다 보면 변수가 생기기 마련이라 제한된 가이드를 벗어나는 경우도 생길 것이 분명하고, 예외가 늘어나면서 더 복잡한 가이드가 생길지도 모른다. 가이드는 만드는 것보다 최신 버전으로 유지하고 전파하는 것이 더 어려운 법이니 그에 따른 리소스도 무시할 수 없다. 그래도 불필요한 작업에 지속하여 노동력을 소모하느니 한번 해 볼만한 시도가 아닌가 싶다.

인터랙션과 애니메이션을 위한 대안, ‘Origami’와 ‘Framer.js’

인터랙션과 애니메이션을 표현하는 동시에 개발에 도움이 되는 코드를 생산할 수 있는 방법은 아직까지 해답을 찾기 어려웠다. 상대적으로 친숙한 ‘F lash’나 ‘After Effects’ 등의 영상 소프트웨어는 커뮤니케이션에 도움이 되기도 하지만, 동작 가능한 프로토타입(working prototype)에는 이르지 못한다. 사소한 디자인 수정도 영상으로 반영하려면 두세 배의 시간이 든다는 것을 감안하면 지양해야 할 방향이라고 생각한다.(프레젠테이션이나 커뮤니케이션을 위한 영상 프로토타이핑은 제품 개발에 도움이 되지 않는 소모적 노동을 요구하는 경우가 많다)

대안이 될 수 있는 도구로 ‘Origami’와 ‘Framer.js’가 주목받고 있다. 둘 다 디자이너를 위해 만들어진(시각적 피드백이 있는) 동작 가능한 프로토타입 도구로, 코드에 익숙하지 않아도 배우는 데 많은 시간이 들지 않는다. ‘Origami’는 페이스북에서 비주얼 프로그래밍 도구 Quartz composer를 프로토타이핑에 활용할 수 있도록 개발한 플러그인이며 ‘Paper’의 개발 과정에서 활용했다고 알려져 있다. 아직까지 코드를 출력하는 기능을 지원하고 있지는 않지만, 업데이트 여부에 따라 기대해 볼 만한 도구인 것 같다. 웹 기반의 프로토타이핑 도구 ‘Framer.js’는 상대적으로 간단한 코드를 작성해 인터랙션을 구현해 볼 수 있었다.

변화의 시작이 무르익었다

몇 년 전 포토샵을 대체할 그래픽 소프트웨어를 만들겠다며 야심 차게 뛰어든 스타트업 wit studio가 주목받은 제품은 아이러니하게도 ‘포토샵에서 디자인 가이드를 쉽게 작성할 수 있도록 도와주는 소프트웨어’였다. 포토샵의 아성을 넘어선 도구는 없었지만 포토샵의 부족함을 뼈저리게 느낄 수 있는 도구는 많다. 어떤 제품은 포토샵보다 인터페이스를 쉽고 빠르게 만들 수 있고, 어떤 것은 새로운 인터페이스를 생각할 수 있는 계기가 되기도 했다.

한때는 ‘포토샵 파일을 개발로 바꿔 주는 도구’의 등장을 바라는 데 멈춰 있었지만 굳이 그럴 필요가 없을지도 모르겠다. 오히려 포토샵을 넘어선 인터페이스의 미래가 바짝 다가와 있는 것 같다. ‘National Parks’, ‘Facebook Paper’, ‘iOS’ 등 훌륭한 제품의 인터페이스는 결코 Adobe 소프트웨어만 써서 만들어진 것이 아니다!

‘뛰어난 목수는 연장 탓을 하지 않는다’는 속담처럼, 디자인을 더 잘 하기 위해 더 좋은 도구가 필요한 것이 아니라는 것을 우리도 잘 안다. 포토샵만으로 디자인 잘 하기도 힘들다! 하지만 장인은 자신에게 가장 적합한 도구를 스스로 만든다는 것을 기억하자. 아마도 도구가 생각의 틀을 결정하기 때문이 아닐까.

디자이너는 겉으로 보기에 창조적인 직업처럼 보이지만, 한 꺼풀 벗겨보면 단조로운 일을 반복하는 경우가 많다. 오늘을 지루하지 않게 보내기 위해서라도 각자의 허용 범위 안에서 재미있는 시도를 해 보자. 어제와 같은 일을 다르게 하면 오늘이 더 즐거울 것이다! 마지막으로 ’Noflo’를 개발 중인 Leigh Taylor가 후원자들에게 던진 출사표5의 한 구절을 옮겨 적으며 글을 마무리한다.