최근 스케치를 이용하여 UI 디자인을 많이 합니다.
모바일 제품을 만들기엔 포토샵 보다 가볍고 유기적으로 대응도 가능하죠.
스케치가 이렇게 UI 툴로 자리잡은 데에는 여러 유용한 플러그인이 큰 몫을 하는데요.
그중 제플린은 많은 디자이너들을 수고를 덜어주는 아주아주 고마운 툴임이 확실하죠.
하지만 스케치는 맥용만 지원하고 앞으로 윈도우 지원은 고려하지 않고 있는 상황이죠.
그래서 제가 오늘 이야기할 주제는 맥이 없다거나 회사에서 윈도우를 사용하고 있으신 분도 충분히 포토샵에서 스케치처럼 작업을 할 수 있고 제플린을 활용 할 수 있는 데 그 방법에 대해 알아보려 합니다.
그 방법은 포토샵에서 대지(Artboard)를 이용해서 작업하는 건데요.
작업 방식은 스케치에서 아트보드를 사용하는 방법과 유사합니다.
그럼 포토샵에서 디자인 하고 제플린까지 뽑는 방법을 자세히 알아보겠습니다.
제플린 설치하기
STEP 01. 제플린 사이트(https://zeplin.io/)를 방문합니다.STEP 02. Support 메뉴에서 Windows 버전을 다운 받습니다.STEP 03. 설치를 합니다. (끝) STEP 01. 새문서 만들기에서 문서 유형을 대지로 선택합니다.STEP 02. 대지크기를 선택하면 다양한 디바이스 크기를 선택할 수 있습니다.STEP 03. GPU 설정이 고급으로 되어 있지 않다면 설정 화면이 나옵니다. 무시 하고 취소 해도 되지만 아무래도 포토샵이 스케치보다 다소 무겁기 때문에 사양이 된다면 고급 설정을 해주는 것이 좋습니다.STEP04. GPU설정은 환경설정>성능>그래픽 프로세서 설정에서 고급설정 버튼을 누르면 됩니다.STEP 05. 고급 그래픽 프로세서 설정에서 그리기 모드를 고급을 변경합니다.STEP 06. 설정을 마친 후, 실제 작업을 해보겠습니다. 문서는 설정한 화면 크기(iphone 6)의 대지가 나옵니다.STEP 07. 디자인을 합니다. 저는 대충 미디엄 로그인 페이지를 예시로 만들어 봤습니다.(디자인은 보지마세요…ㅠㅠ)STEP 08. 대지를 추가하는 방법은 2가지가 있는데 첫번째는 이동툴에서 대지 도구를 선택합니다.STEP 09. 그럼 대지 상하좌우에 + 버튼이 생깁니다. 클리하면 원하는 방향에 대지를 추가 할 수 있습니다.STEP 10. 또다른 방법은 레이어에서 대지를 선택한 후, 복사(ctrl+J) 하면 자동으로 우측에 추가가 됩니다.STEP 11. 디자인을 마쳤다면 창>확장>Zeplin을 선택하여 설치한 제플린 플러그인 창을 띄웁니다.STEP 12. 제플린 플러그인 창이 뜨면 대지(Artboard)를 선택하여, Export selected artboard to Zeplin을 클릭합니다.STEP 13. 제플린에서 만든 프로젝트를 선택하고 Import 버튼을 클릭합니다. 주의할 점은 스케치와는 다르게 px로 제작 되기 때문에 iPhone5, 6기준으로는 X2를, iPhone6+ 기준으로는 X3를 하셔야 합니다.STEP 14. 그럼 제플린으로 Import 되는것을 확인 하실 수 있습니다.STEP 15. 요소를 눌러 잘 맞게 들어 왔는지 확인해보세요~(끝) 이렇게 윈도우에서 스케치 부럽지 않게 디자인 하고 제플린까지 사용할 수 있습니다.
스케치는 너무 너무 좋은 제품이고 맥에서 너무 좋은 프로토타입툴, 디자인툴을 제공하지만 맥을 사용할 수 없는 환경이거나 구매할 비용이 없을 때, 윈도우에서 이런식으로 사용할 수 있습니다.
어도비에서 스케치에 빼앗긴 유저들을 다시 찾아오기 위해 Adobe XD를 내놓았고 윈도우 버전 개발을 할것이라고 하지만 아직은 시간이 많이 걸릴 듯 합니다.
개인적으로는 이런 기능을 조금 더 가볍고 고도화 시키는 방향도 좋을 것 같다는 생각도 듭니다.
이렇게 윈도우에서 스케치 처럼 디자인 하고 제플린을 사용하는 방법에 대해 알아 봤습니다.
