앱디자인과 웹디자인에 쓰이는 툴

웹디자인에서 모바일 디자인으로 또는 앱 디자인으로 시대가 발전하면서 생기는 직업군에 따라 그래픽 툴도 많이 바뀌고 있는데요, 저 또한 현재는 웹디자이너에서 앱디자이너로 포지셔닝을 바꾸어 업무를 진행하고 있어, 업무로 주로 쓰고 있는 툴을 기록해 보려 합니다.

 

 

🔨 포토샵에서 프로토타입으로의 세대교체 

예전 1,2세대 웹디자인에는 화려하면서 눈길을 끌 수 있고, 없는 이미지를 바로 합성 할 수 있으며, 레이어 기능과 레이아웃등을 한 번에 할 수 있는 맥가이버 칼 같은 역할로 포토샵툴을 사용해 디자인을 전부 대응했다면, 지금은 다양해진 기기에 디자인을 제공해야 하기 때문에 반응형 디자인과 앱디자인의 경우 SVG형식의 벡터 아이콘 방식을 숙지 해야되며, 포토샵 하나의 툴로만 대응하기 보다는 프로토타입툴을 적극적으로 사용하는등의 변수가 훨씬 많아졌습니다.

 

현재의 그래픽툴의 특징은 작업도 중요하지만, 효과적으로 협업하는것에 초점이 맞추어져 있어 계정등을 통해 프로젝트에 참여만 시키면 어디에 있던 접속해 작업을 같이 진행 할 수 있는 강점을 띄고 있습니다. 이 모든 것은 시간 단축에 초점이 맞춰있으며, 좀 더 빠른 작업물을 도출 할 수 있습니다.(시간은 더욱 소중해졌으니까요) 그렇다면 예전부터 써왓던 익숙한 툴과 지금 새로 등장한 툴을 사용적인 측면으로 기록해 보려합니다.

 

---

 

 

어도비 일러스트레이터(Adobe illustrator) 

확장자:AI, EPS

편집 - 명함,포스터,3,4단 리플렛등의 한 페이지 단위의 가벼운 편집물을 디자인 할 때 주로 사용

웹,앱 - 벡터기반에 중심을 두고 있기 때문에 SVG파일과의 호환이 가능해 이미지 자료를 XD등으로의 전달하는등의 프로토 타입 툴과의 클립보드 연계 가능 - 벡터파일로 깨지지않는 이미지를 포토샵과 클립보드연계 가능

 

 

어도비 인디자인 (Adobe Indesign) 

확장자: indd

책과 브로셔등 단수가 있는 리플렛을 만들 때, 유용하게 사용할 수 있는 툴. 앱디자인의 심볼과 같은 역활의 마스터 페이지 개념을 사용할 수 있어 반복페이지에 대한 작업이 훨씬 수월하다.

 

 

어도비 포토샵 (Adobe Photoshop) 

확장자: psd

사진의 합성과 편집, 그림을 그리는데 쓰이는 툴. 그래픽프로그램의 태동기를 함께한 툴로써 맥가이버 칼처럼 다양한 디자인 작업에 사용되었으나 현재는 각 포지셔닝에 맞는 툴이 나와 본연의 기능에 충실해 지는중. 디자인 분야로는 이미지 합성과 편집, 타임라인을 이용한 gif파일 제작, 배너,기획전,웹에 관련된 이미지 제작등에 사용된다.

반응형

 

 

 

피그마 (Figma) 

확장자: fig

웹디자인을 효율적으로 제작 할 수 있는 프로토타입툴. 기획자에게도 매우 강력한 툴로 프로젝트별 관리, 간편한 조작과 다양한 디바이스 맞춤. 여러사람과의 공동작업 , 쉬운 이미지 내보내기 등의 기능을 갖추고 있다. 프로그램이 가볍고 어디든 웹페이지로의 로그인을 하면 작업환경을 그대로 유지할 수 있어 동기화에도 탁월하며, 레이어의 순서와 그룹화등을 편리하게 볼 수 있는것이 최대 장점. 한 공간 내에서 기획,디자인,개발의 작업자가 동시에 같이 일할 수 있어 프레임워크 단계의 도구로는 가성비가 높은 툴

하지만 생성하는, 불러오는 모든 이미지에 대해 프레임이라는 명칭의 아트보드개념이 붙어 불편한 모습을 보이며, 독립적인 웹 작업툴이기 때문에 psd,ai 파일로서 확장자로 저장해 오프라인상으로 전달이 아예 불가능하고 기획, 디자인, 개발의 공동작업에서 디자인의 영역을 침해받는경우가 많아 신경이 쓰인다. (픽셀이 틀어진다던지) 또한 클립보드의 이미지 붙여넣기가 그래픽툴간의 상호호환이 부족해 플러그인등의 별도 세팅을 해줘야 하는것이 단점. 유지보수 측면으로써의 역활을 먼저 고민해야 함. 최근에 어도비 측에 인수되었다.

그리고 그럴일은 없겠지만 인터넷이 안되면 피그마를 아예 쓸 수없다. 인터넷이 제약이 걸리는 보안이 필요한 오프라인 작업 상황에서는 툴자체의 사용이 불가능함. (어도비는 접속이 끊기지만 툴 사용은 가능함)

 

 

어도비 XD & 스케치 (Adobe XD & Sketch) 

확장자: xd, sketch

SVG확장자 기반으로 다양한 디바이스에 맞추어 앱,웹디자인을 할 수 있는 프로토타입툴. 전체를 한 번에 바꿀 수도 일부를 한 번에 바꿀 수도 있는 심볼에 대한 편한 관리와 라이브러리기능을 제공해 속도감있게 일관적인 디자인 시안을 뽑아내는 것이 가능하다. 어도비의 이미지들(벡터 및 이미지)을 클립보드내 자유롭게 붙여넣기가 가능한 것이 매우 큰 장점. 프로그램이 매우 가볍다.

각 화면을 연결해 실제 구현 되는 모델링을 해줄 수 있는 것이 장점이고 다양한 플러그인을 연결해 사용이 가능하다. 단점은 캔버스의 크기가 제한적이라 앱의 부피에 따라 여러개의 파일을 써야 할 필요가 있다.

 

 

제플린 (Zeplin) 

퍼블리셔와 개발자들이 알아볼 수 있도록 디자인된 아트보드를 html,css수치로 즉시 전환해주는 플러그인 개념의 혁신적인 툴. 웹단위의 px , AOS단위의 dp , iOS단위의 pt 모두 대응이 가능하다. 이미지 또한 따로 저장해 개발자에게 제공해 주지 않아도 제플린 툴에서 크기별로 이미지를 바로 내려받을 수 있어 업무를 단축시켜주는데 일조하는중. 1계정당 1개의 프로젝트만 가능해 여러개의 프로젝트는 유료로 구매해 사용해야 한다. 프로젝트내의 그룹이 많아지면 많아질 수록 느려지는것이 단점.

 

 

📌맺음말 

요리를 할 때에는 알맞는 도구가 필요하듯 디자인에도 분야에 따른 알맞는 툴이 필요합니다. 작업에 대한 알맞는 툴을 통한 작업은 시간을 단축시키고 타 부서와의 협업을 원활하게 해주는 효과로 개인과 부서에 긍정적인 효과를 충분히 낼 수 있기 때문에 항상 새로운 툴에 대한 열린 자세로 업무를 하는 것이 필요합니다. 확장자에 대한 좀 더 자세한 내용은 아래 포스팅을 확인해 주세요 :)

 

웹,앱디자이너가 주로 사용하는 이미지 확장자 간단정리

 

※ Provides image Thank you. freepik and flaticon