문돌이가 어설프게 디자이너 대타로 일하는 법

*뒤 늦게 스팀잇을 알게되어 제 모든 글들을 스팀잇으로 옮기고 있습니다.
*이 글은 제 브런치에서 연재중인 "기획돌이의 스타트업 고군분투기" 2화 입니다

==========

지난번 '문돌이가 개발자랑 일할만큼만 프로그래밍 익히기'에 이어 문돌이 시리즈의 일환으로 이번에는 PM으로서 디자이너 역할을 대신할 수 있는 방법론에 대해 논해보고자 한다. 아 우선 두가지 미리 가드 치고 들어가고 싶은게 있는데 첫째, 여기서 PM이라 함은 Product Manager, 즉 본인이 직접 자식처럼 키우고 가꾸고 있는 프로덕트가 있고 이를 잘 살려나가기 위해 개발자, 디자이너, 마케터 등등 다양한 분야의 전문가들과 함께 일하는 사람들을 의미한다는 것과, 둘째, 이 글의 요지는 '디자이너가 아직 없어서...' PM이 어설프게 디자이너 역할을 대신할 수 있는 방법론이지 'PM이 디자이너 제끼고 디자이너 되는 법'이 아니라는 것이다.

가장 이상적인 스타트업 팀은 아마도 3명의 팀원이 개발자1, 디자이너1, 하려는 분야 전문가1 이렇게 이루어진 팀이겠지만 (또는 기술스택이 높은 분야면 개발자2, 디자이너1) 이렇게 이상적으로 디자이너를 품어서 팀 꾸리고 시작할 수 있는 스타트업이 많지 않을거라 생각한다. 특히 웹/모바일 분야의 제품을 구상하고 있는 초기 스타트업이라면 당장 프로토타입이라도 만들어서 런칭하는게 중요하기 때문에 아무래도 정식 디자이너까지 꾸려서 팀빌딩 하는건 많이 부담스러울 것이다.

따라서 (내 경우처럼) 높은 확률로 당신의 스타트업에는 개발자(들)와 (디자인 해본적 없는) 기획자만 있게 될 것이고, 이 때 가장 중요하게 터지는 문제가 바로 '개발자가 참고해서 개발할 수 있는 디자인물과 디자인파일들이 없다' 이다. 사실 이런 경우 보통 만렙 개발자들은 본인들이 와이어프레임만 보고도 알아서 웹사이트 돌아다니면서 이미지 앉히고 아이콘들은 폰트어썸 같은 라이브러리에서 그럴싸한거 적용하고 메뉴바나 네비게이션 같은것도 그럴싸한 라이브러리 찾아서 적용해 버림으로써 해결하기 때문에 크게 문제될 것은 없지만, 아마도 속으로는 이렇게 생각하고 있을 가능성이 크다. '아니 도대체 저xx가 하는일은 뭐야?!'

(당신 개발자가 속으로 이렇게 생각하고 있을수도 있다...)

자, 이제 본론으로 들어가서, 그러면 아직 디자이너가 없는 팀에서 PM이 디자이너 역할을 대신할 수 있는 방법론에 대해 논의해 보자. 본 방법론은 '모바일 앱'을 디자인하는걸 전제로 작성하였고, 이 방법론이 성공적이기 위해서는 다음의 전제조건들이 필요하다.

1. 나는 와이어프레임을 많이 그려봤고, 대략적인 앱의 인터페이스 구성 및 흐름에 대해 어느정도 알고 있다.
2. 나는 맥북을 가지고 있다.
3. 나는 $99짜리 프로그램 구입할 만한 돈이 있다.

Step 1. 와이어프레임 만들지 말고 기능플로우 차트만 만들어서 개발자랑 상의하기

웹/모바일쪽 제품 담당하는 PM들이 가장 많이 하는 일들이 아마도 와이어프레임을 아주 멋있게 그려서 파워포인트 (또는 키노트)에 멋드러지게 얹은 다음에 개발자와 디자이너에게 전달하는 일일 것이다. 그런데 사실 자세한 와이어프레임은 1/내가 대규모 조직에 있어서 많은 사람들에게 동일한 정보를 전달해야 하거나 2/누군가에게 컨펌을 받아야 해서 뭔가 보여줄게 있어야 하는경우들이 아니라면 위에 언급한 스타트업에서는 별로 필요하지 않다. 오히려 개발자 앉혀놓고 종이에다가 쓱쓱 그려서 보여주면 10분이면 끝날일을 하루 걸려서 파워포인트에 그리고 있는 시간이 더 아까울 뿐이다. (어차피 개발자들은 핵심만 보기 때문에 저 기능플로우가 종이에 끄적거려져 있던 멋있게 파워포인트에 그려져 있던 아무 차이도 없고 중요하게 생각치도 않는다.)

따라서 1분1초가 아까운 스타트업에서 저거에 시간낭비하지 말고 그냥 슬랙이나 에버노트에 대충 기능플로우 차트만 만들어서 개발자랑 바로 상의하고, 기술적으로 된다 안된다 시간낭비다 등등 의견 수렴하고 다시 수정해서 보여주고... 요런 식으로 코어 기능들과 그 흐름을 빠르게 결정하는게 훨씬 효율적이다. 개발자와 상의할 기능플로우 차트에는 보통 다음 내용들이 들어간다.

1. 기능 섹션과 해당 섹션의 세부기능들 정의 - 기능 섹션이라 함은 유저가 앱을 사용하는 여정상에 각각 큰 덩어리를 정의해 주는것을 말한다. 예를들면 온보딩, 회원가입, 메인화면, 유저 프로필 등등 큰 덩어리를 정의하고 각 섹션에 필요한 세부 기능들을 나열하는 작업이다.

2. 코어 기능과 추가 기능의 구분 - 프로토타입 단계에서 요 기능이 없으면 우리 앱이 제시하는 핵심가치 제공이 절대로 불가능하다고 생각되는 진짜 꼭 필요한 기능만 골라낸다. 뭐 있으면 좋거나 핵심가치 제공에 도움이 되는 기능들이지만 이게 없다고 해서 앱을 제대로 사용하는게 아예 불가능하다..가 아닌 기능 요건들은 다 쳐내서 서 프로토타입 런칭 이후에 순차적으로 적용시킬 기능들을 나열하고 스케줄링 한다.

3. 서비스 플로우 (선택) - 와이어프레임 그리듯이 순차적인 서비스 흐름도를 그리는건데, 개발자와 상의하기 전에 종이에 미리 그려서 가져가도 상관없지만 개인적으로 위에 1, 2번만 잘 정해서 가져가면 어차피 개발자랑 상의하면서 이건되고 이건 안되고 하면서 다 작살이 나기 때문에 3번을 미리 그려갈 필요가 없다... 그냥 1, 2번을 개발자랑 상의해서 컨펌한 후에 3번을 같이 머리 맞대고 (종이에) 그리면 된다 (파워포인트 제발..여기다 그리지 말아줘..).

(이런 현란한 와이어프레임 그리고 있을 시간에 얼른 개발자랑 기능요건만 정해서 상의하자. - 이미지 출처: Andrew Brennan)

Step 2. 디자인 아카이브에서 맘에드는 화면 매칭하기

위에서 개발자랑 머리 맞대고 대충 종이에 서비스 플로우 그렸다면 이제 본격적인 디자이너스러운 업무의 시작이다. 각 단계별 화면마다 우리가 벤치마킹 할(이라고 적고 '적당히 베끼기 쉬운'이라고 읽는다) 참고화면들을 디자인 아카이브 사이트들을 열심히 돌아다니면서 수집한다. 디자인 아카이브는 정말 많은데 여기서는 필자가 자주 쓰는 사이트 3군데만 소개하도록 한다.

1. CollectUI.com

(고퀄의 모바일/웹 관련 디자인, 인터렉션들이 각 기능섹션별로 정리된 아카이브 이다.)

콜렉트UI는 아까 얘기한 각 기능섹션 또는 유저태스크 별로 필요한 화면 디자인이나 인터렉션 디자인들이 잘 정리된 아카이브인데, 그 하나하나 퀄리티가 매우 뛰어나다. 예를들어서 온보딩 관련 디자인을 찾아보고 싶으면 왼쪽 사이드바에서 onboarding을 검색해 보면 해당 메뉴가 나오고 수 많은 앱들의 온보딩 화면들이 모아져 있다. 주로 아이폰 위주이긴 한데 가끔 안드로이드에 최적화된 디자인도 찾을 수 있다.

2. Behance의 Interaction Gallery

(전 세계의 디자이너들이 작업한 코퀄의 앱/웹 디자인 아트워크만 모아놓은 갤러리이다.)

비핸스는 비전공자들도 많이 찾아보는 유명한 사이트가 되었지만, 이 갤러리를 아는 사람들은 드물거라 생각한다. 원래 옛날에 앱디자인갤러리 (http://www.appdesignserved.co/)라는 사이트가 비핸스에서 저런 고퀄 디자인 아트워크만 묶어서 보여줬었는데 어도비에서 비핸스로 통합시킨 것 같다. 아무튼 전 세계의 잘나가는 디자이너들의 수려한 아트워크를 볼 수 있는 갤러리인데, 여기서 내 앱과 기능요건이 유사하거나 비슷한 분야에 있는 앱 위주로 아트워크를 찾아서 클리핑 한다.

3. 핀터레스트 검색

(핀터레스트는 검색어가 중요하다.)

핀터레스트를 모르는 사람은 없어도 내 주변에 '핀터레스트 하고 있어'라고 말하는 사람은 한국에서 본 적이 없을 정도로 아직 우리나라 사람들한테는 생소한 사이트 이다. 여기는 사람들이 스크랩 하고 싶은 자료들을 마치 냉장고나 칠판에 핀 꼽아서 수집해 놓듯이 모아놓는 사이트인데 역시 디자이너들이 많이 쓴다. 내가 만일 앱 온보딩 디자인을 여기서 찾고자 하면 Mobile app onboarding라고 치고, 특정 버전의 온보딩만 검색해 보고자 하면 app onboarding iOS, 또는 app onboarding android 이런 식으로 검색하면 된다.

Step 3. 스케치 프로그램 구입하기

이제부터 가장 중요한 단계다. 내가 디자이너 대타를 하기로 마음 먹었다면, 그리고 당신이 맥북 유저라면 (혹시 맥북 유저가 아니면 포토샵으로 해야 하는데 이건 벡터기반이 아니여서 어렵다.. 그냥 이 기회에 미래를 위해 투자하는셈 치고 맥북 하나 장만하심이 어떨지..) 고민하지 말고 스케치라는 프로그램을 구입하도록 한다. 가격은 A사처럼 치사하게 월별 과금방식이 아닌 쿨하게 한번에 $99이다. (혹시 맥북의 앱스토어에서 구입하면 더 비쌀수도 있다. 애플의 치사한 수수료 때문에.. 꼭 웹사이트 들어가서 구매하길 바람)

(스케치는 비전공자의 벡터기반 디자인작업을 마법처럼 쉽게 만들어준다. 고민하지 말고 구입하자.)

보통 디자인 작업은 벡터로 이루어지는데 이는 기기마다 화면 사이즈가 다 제각각인지라 이를 픽셀 기반으로 작업해 버리면 화면 사이즈를 키울때 마다 깨지게 된다. 벡터로 작업하면 적합한 사이즈로 손실 없이 export가 가능하다. 어도비로 이 작업을 하려면 일러스트레이터를 만질 줄 알아야 하는데, 솔직히 우리가 정식 디자이너 될것도 아니고 그냥 임시로 대타 하는건데 저걸 월별로 돈내면서 설치해서 또 겁나 복잡한 인터페이스 공부하면서 낑낑대느니 난 고민하지 말고 스케치를 사용할 것을 추천한다. 스케치는 일단 인터페이스가 웹/모바일 디자인하는데에 특화되어 있고 일러스트레이터는 그래픽 디자인, 아트 디자인, 일러스트 디자인 등등 훨씬 더 복잡한 세계의 디자인까지 커버해야 하는 프로그램이기에 당연히 인터페이스가 스케치보다 10배는 복잡하다.

하지만, 역시 우리는 비전공자이기 때문에 스케치가 아무리 쉽다 한들, 여기서 뭘 어떻게 작업을 시작해야할지 생각하면 막막해 질게 뻔하다. 이 방법론은 step 4 부터 자세하게 보여줄테니 겁먹지 말자.

Step 4. 컬러 선택 및 심플한 앱 로고 디자인

혹시 디자인 전공자가 보기엔 말도 안되는 얘기일수는 있으나... 필자의 개인적인 생각으로 모든 디자인의 시작은 메인 컬러 잡는것 부터라고 생각한다. 즉, 내 앱에서 메인으로 쓸 컬러를 일단 정하고 나면 향후 디자인은 그 한 컬러를 중심으로 통일해서 쓰기만 하면 결과물이 제법 나쁘지 않게 나오기 때문이다. 보통 비전공자들의 디자인이 패망하게되는 대표적인 이유가 메인컬러를 여러개 써서 촌스러워 보이는 건데 사실 본인들은 내 디자인이 왜 촌스러워 보이는지 잘 모른다. 예를 들어 보자.

(메인 컬러는 한개만 써야 촌스러워 보이지 않는다.)

여기 두개의 컬러 조합이 있다. 일단 딱 봐도 1번이 2번에 비해 10배는 깔끔한 느낌이다. 물론 디자인 전공자들은 이를 이론적으로 구분 가능하다. (배색-보색 관계가 어쩌고 저쩌고) 하지만 우리 비전공자는 그런거 모르고 느낌으로 해야 하기 때문에 이런식의 접근이 필요하다.

1. 메인컬러라 함은 우리가 보기에 눈에 띄는 컬러를 말한다. - 위의 예시에서 당연히 오렌지 색은 엄청나게 눈에 띄는 색이니까 메인컬러, 2번 디자인의 네이비색도 눈에 띄니까 메인컬러, 역시 2번 디자인의 어설픈 초록색도 눈에 띄니까 메인컬러이다. 하얀색, 회색계열은 눈에 띄긴 하지만 보색관계에 의해 눈에 띄는 거니까 그냥 메인컬러로 아예 생각하지 말자.

2. 메인컬러 2개 이상 쓰지 말자. - 2번 디자인처럼 메인컬러를 여러개 써버리면 우리같은 비전공자들이 컬러 배치할 경우 99.9%의 확률로 촌스러워 진다. 나중에 앱 기능이 복잡해 지면 더 점입가경이다. 따라서 메인컬러는 반드시 한개로만 가고 나머지는 메인컬러에서 색을 좀 빼서 색을 만들거나 흰색, 회색 계열로 가는게 제일 안전하다.

자, 그러면 메인컬러를 어디서 어떻게 결정하지? 이를 위해 내가 자주 쓰는 컬러 사이트들 2곳을 소개한다.

1. ColorHunt.co

(각 컬러 배색의 윗 줄이 메인 컬러 들이다.)

컬러헌트는 다양한 색깔 조합을 스펙트럼으로 구성해서 모아논 컬러 아카이브 이다. 여기서 밑 색깔들은 볼거 없이 맨 윗띠의 메인컬러들만 보면서 색깔을 골라서 헥스코드를 기록해 놓는다. (헥스코드는 보통 #2794EB 요런식으로 적혀있는 코드를 말한다) 'hot' 이나 'popular' 탭을 누르면 인기 많은 색들을 볼 수 있다.

2. Colovely

(스페이스를 눌러가면서 랜덤하게 컬러를 보여준다.)

여기는 컬러헌트에서 색 찾기도 귀찮거나 잘 모르겠을때 들어가서 그냥 스페이스바를 눌러대면 랜덤하게 컬러를 제안해 주는 사이트 이다. 어떤 알고리즘으로 색을 추천해 주는지는 모르겠지만 그냥 스페이스 계속 눌러대다 보면 제법 끌리는 색깔 많이 보여준다. 맘에드는 색이 있으면 역시 헥스코드를 기록해 놓는다.

이렇게 메인 컬러를 결정했으면 다음 단계는 심플한 로고를 만드는건데, 만일 본인이 의기양양하게 로고를 디자인해 보고 싶으면 말리진 않겠으나 로고 디자인의 세계는 정말 심오한 세계이기 때문에 괜히 건들지 말자. 그냥 내가 하는 방법대로 해보도록 한다.

1. 그냥 깔끔해 보이는 폰트에 메인컬러를 적용해서 만들기
위의 문돌이닷컴의 예를 들어 보자. 당신이 메인컬러를 저 오렌지색으로 결정했다면 가장 무난한 로고 배치는 오렌지색을 백그라운드컬러로, 폰트컬러는 하얀색으로 하는 것이고, 나눔고딕이나 산돌고딕과 같은 무료 폰트를 활용해서 앱 로고를 저런식으로 심플하게 만들어 볼 수 있을 것이다.

(메인컬러를 배경색으로, 폰트를 흰색으로 배색하는것 만으로도 깔끔한 앱 로고가 나온다.)

2. Dribbble에서 벤치마킹(이라고 쓰고 베낀다고 읽는다) 하기
드리블은 아까 소개한 비헨스같은 디자인 아카이브인데, 주로 그래픽 디자인이 단컷으로 모여있는 아카이브이다. 여기에서 simple logo, 또는 simple app logo라고 치면 참고할만한 디자인이 많이 검색된다. 최대한 타이포크라피 중심의 심플한 디자인을 참고하여 본인의 앱 로고를 디자인 해 보도록 한다.

(드리블에서 최대한 심플한 앱 로고를 찾아서 벤치마킹 해본다.)

Step 5. 스케치 디자인 컴포넌트 및 아이콘 아카이브 활용하기

자 이제부터 본격적인 앱 스크린 디자인 시작이다. 이제 메인컬러도 선택 했고, 앱 로고도 만들었지만 역시 비전공자 입장에서 어디서부터 시작할지 막막할 것이 뻔하다. 이를 위해 준비한 비장의 무기가 있다. 바로 스케치로 디자인한 파일들을 무료로 쓸 수 있게 해주는 아주 감사한 스케치 디자인 컴포넌트 아카이브들 두 군데를 소개하겠다.

1. Sketch App Sources

(제법 오래된 아카이브로 수 많은 스케치 디자인 파일을 무료로 다운받을 수 있다.)

2. Sketch Repo

(생긴지 얼마 안된 사이트이지만 모던하고 세련된 디자인들이 많이 올라온다. 역시 무료.)

위 2개의 사이트에서 UI kit, app design 등의 검색어를 입력하면 아예 필요한 앱 화면이 미리 디자인 된 무료 UI kit 파일을 다운받을 수 있다. 여기서 중요한건 다음과 같은 기준에 부합하는 파일을 다운받아야 하는 것이다.

1. 이미지 배경이 아닌 단색 위주의 배경으로 구성되어 있고 메인컬러를 한개만 쓴 것
2. 내가 하려는 앱과 유사한 분야의 UI kit. (예를들면 메신저 앱을 개발할 거면 메신저 킷)
3. 메뉴바 구조가 일반적이거나 자연스러운 것

(내가 다운받은 뉴스피드 관련 앱 UI kit이다. 단색위주의 평이한 메뉴 구조로 디자인 되어 있다.)

본격적인 디자인을 하기 전에 개발자에게 메인이 되는 스크린 사이즈를 물어보도록 하자. iOS를 예로 들어보면 어떤 개발자는 iPhone 6 plus의 큰 화면 기준으로 디자인해서 컨스트레인을 좁혀나가는 방식을 선호하는 개발자가 있고, 반대로 iPhone 5의 작은 화면 기준으로 스페이스를 넓혀나가는 방식을 선호하는 개발자도 있다. 이에 맞추어 아트보드의 스크린 사이즈를 결정하도록 한다. 스케치는 친절하게도 아트보드를 클릭하면 기기에 맞춘 아트보드 스크린 사이즈가 이미 선택되어 있으니 클릭만 하면 된다.

(스케치에는 이미 기기별로 아트보드 사이즈가 세팅되어 있어서 선택만 하면 된다.)

이제부터 마법을 부려보자. 방금 다운받은 UI kit을 우선 위에서 선택한 스크린 사이즈에 맞추어 크기를 바꿔 준다. 이때 주의할 것은 각 스크린의 폴더를 전체를 잡아서 크기를 변경해 주어야 비율대비 변경이 가능하다. (마치 파워포인트에서 각 요소를 그룹으로 묶어서 크기를 변경해 주어야 깨지지 않고 비율대비 변경이 가능한 것과 같은 원리이다.) 위의 킷은 메인컬러를 붉은색 하나만 쓴 것을 알 수 있다. 저 부분을 모두 아까 우리가 정한 오렌지색 계열의 메인컬러로 바꾸고, 불필요한 요소는 삭제하고 컨텐츠를 내가 하려는 컨텐츠로 변경해 준다. 또한 크기를 변경하면서 정렬이 흐트러 진 것도 다시 맞춰준다.

(메인컬러 하나만 바꿔도 느낌이 확 다르다.)

위의 UI kit은 iOS라기 보다는 안드로이드에 어울리는 디자인이다. 특히 하단의 탭메뉴바가 지나치게 안드로이드 스럽다. 이를 iOS 스럽게 바꿔보자. 예를들어 저 문돌이닷컴 앱의 3개 메뉴가 '이벤트,' '뉴스,' '채팅' 이런 식으로 구성되어 있다고 가정해 보자. 우선 탭바의 높이를 좀더 높혀주고 (이건 구글링 조금 해보면 아이폰 탭메뉴바 높이가 얼마인지 금방 찾을 수 있다) 아이콘을 다른걸로 교체해 줘야 한다. 여기서 부딪치는 문제가 비록 iOS에 기본 아이콘을 쓰면 괜찮지만 적당한 아이콘이 없을 경우 당신이 직접 디자인해 줘야 하는데, 아이콘 디자인이 어디 쉬운일인가? 걱정할 것 없다. 이를 또한 마법처럼 해결해 주는 사이트가 있다. 바로 Noun Project이다.

(눈프로젝트 사이트에서 필요한 아이콘을 찾아 SVG 파일로 다운받는다.)

개발자들이 오픈소스 운동에 열심히 참여하는 것 처럼 여기도 본인의 디자인력을 수 많은 사람들과 공유하는 아주 훌륭한 디자이너들이 올린 수 많은 아이콘들을 png와 svg로 다운받을 수 있다. 뭐 모르는 사람도 있으리라 생각되지만 참고로 png는 픽셀기반, svg는 벡터기반이다. 우리는 스케치에서 벡터기반으로 작업하고 있기 때문에 svg 파일을 다운받도록 한다. 다운받은 아이콘을 스케치로 불러온 후 크기를 조정하고 컬러도 우리의 메인컬러로 변경해서 다음과 같이 적용해 봤다. 덤으로 로딩파일도 한번 만들어 봤다.

(물론 디자이너가 보면 코웃음 치겠지만 뭐 이정도 디자인이면 프로토타입으로는 나쁘지 않다.)

Step 6. 제플린에 디자인 가이드 올리고 개발자에게 디자인 파일 넘겨주기

드디어 마지막 단계이다. 보통 디자이너들은 개발자에게 디자인파일 넘겨줄때 다음 두개를 준다.

1. 디자인 가이드 - 이건 스크린에 각 요소들의 크기가 몇 픽셀이고, 간격을 얼마고 뭐 이런것들을 상세하게 표시해 준 가이드를 말한다.
2. 디자인 파일 - 각종 아이콘, 이미지 등등 개발에 필요한 파일들을 다양한 파일 사이즈로 익스포트해서 전달해 준다.

우선 디자인 가이드는 역시 우리가 이거 만드려면 엄청난 노가다인데, 이를 마법처럼 쉽게 해주는 프로그램이 또 있다!! (고맙게도 1개 프로젝트까지는 무료이다.) 바로 제플린이라는 프로그램이다.

(제플린을 사용하면 디자인가이드 만들 필요 없이 알아서 생성해 준다.)

제플린을 다운받으면 스케치와 자동으로 연동이 되고, 스케치에서 제플린으로 업로드하고 싶은 아트보드를 클릭한후 plugin에서 제플린으로 업로드를 클릭하면 알아서 제플린으로 업로드 된다. 그리고 나서 제플린으로 개발자를 초대하면 끝. 개발자는 여기서 저 버튼들의 크기가 얼마이고 여백을 얼마이고 컬러의 헥스코드는 뭐고 이런 내용들을 쉽게 확인 가능하다.

디자인 파일은 사실 제플린에서 개발자가 바로 내려받는게 가능한데, 이것도 조금 노가다일 수 있으니 직접 익스포트해서 깔끔하게 전달해 주자. 스케치에 보면 내가 익스포트하고 싶은 요소를 클릭해서 우측 하단에 보면 어떤 사이즈로 익스포트할지 선택할 수 있는 기능이 있다. 아이폰 개발할때는 보통 기본 스크린 사이즈에서 2배 파일, 3배파일을 같이 줘야한다. 파일명에 @2x가 2배파일, @3x가 3배파일을 의미하고 스케치에서 알아서 파일명까지 형성에서 익스포트 해 준다.

(2x가 2배파일, 3x가 3배파일이고 서픽스도 알아서 스케치가 생성해 준다.)

이때 주의할 것은 파일명인데, 개발자들은 보통 나름의 파일명 규칙이 있다. 이건 꼭 개발자에게 물어보고 컨벤션에 맞춰서 파일명을 정하도록 하자. 찾기 쉽게 작성하는게 중요하기 때문에 보통은 이런식으로 작성한다.

[종류] _ [섹션명] _ [이름]

예를들면 탭바에 있는 채팅 아이콘을 2배파일로 추출한다고 하면 파일명은 '[email protected]'가 되는 것이다.

여기까지의 사이클을 한 2-3번정도 경험해 보면 이제 어느정도 우리 문돌이가 디자이너 대타 역할을 수행하기에는 어느정도 가능해 질 것이다. 이 외에도 사실 앱 스크린샷, 앱스토어 아이콘 등등 개발자에게 전달해야 할 파일들이 많은데, 이것 역시 위의 레퍼런스 사이트들을 잘 찾아보면 수 많은 무료 양식이 있어서 쉽게 벤치마킹(이라고 쓰고 베낀다라고 읽는다) 할 수 있다.

다시한번 강조하지만 이 방법론은 어디까지나 '디자이너가 아직 없어서 문돌이가 디자이너 역할 대신하는 법' 이지 '문돌이가 디자이너 되는 법'이 절대로 아니다. 디자인의 세계는 정말 깊고 심오해서 초보 디자이너 되는게 초보 개발자 되는법 보다 더 어려울 수도 있다. 특히 요즘 많은 사람들이 남발해 대는 UX라는 단어도 심리학에 기반을 둔 매우 심오한 영역인데 사람들은 그냥 'UX = 보기좋은 디자인' 요렇게 생각해 버리는 경향이 있다. 뭐 UX까지 안가더라도 그래픽디자인의 세계 역시 구도, 배치, 컬러 등등 공부해야 할 것이 매우 많은 세계이니 괜히 넘보지 말고 우리는 그냥 기획자 본연의 업무에 충실하도록 하자.