프로덕트 디자인을 위한 툴

디자인 툴은 디자이너의 강력한 무기 중 하나입니다. 요리를 하기 위해서는 칼을 다룰 줄 알아야 하듯이, 디자이너에게 디자인 툴은 손발처럼 사용할 수 있어야 하는 필수적인 도구입니다. 프로덕트를 설계하기 위해 필요한 툴이 어떤 것이 있는지 정리해보았습니다.

디지털 프로덕트의 역사만큼이나 다양한 툴이 나타나고 사라졌습니다. 하나의 툴이 여러 기능을 제공하기도 하고, 특정 기능에 집중한 툴이 등장하기도 했습니다. 툴은 다양한 기능을 담는 바구니라고 볼 수 있을 것입니다. 프로덕트를 만드는데 필요한 기능은 크게 3가지로 나눌 수 있습니다. 사용자가 사용할 인터페이스를 디자인하는 기능, 메이커와의 커뮤니케이션을 돕는 기능, 프로덕트 내부에서 사용할 다양한 그래픽 에셋을 만들기 위한 기능이 있습니다.

인터페이스 디자인

• 벡터 그래픽: 다양한 화면에 대응하기 위해, 크기가 변해도 이미지 손상이 없도록 벡터 기반 그래픽 기능이 필요합니다.

커뮤니케이션

• 인스펙트: 디자인 결과물의 픽셀 값과 색상 정보 등 개발을 하는데 필요한 정보를 알아보기 쉽게 도와주는 기능이 필요합니다.
• 프로토타이핑: 사용자의 행동에 따라 움직이는 인터페이스를 미리 만들어 확인할 수 있는 기능입니다.

그래픽 에셋

• 2D: 그림이나 사진 등을 JPG, PNG와 같은 파일 포맷으로 이미지를 만들기 위한 기능입니다.
• 3D: 하나의 에셋으로 다양한 시점, 각도, 움직임을 만들고 이미지를 제작할 수 있는 기능입니다.
• 모션: 실사 영상이나 애니메이션 등을 GIF, MOV 등의 파일 포맷 등을 만들기 위한 기능입니다.

피그마

• 벡터, 2D, 인스펙트, 프로토타이핑
• GUI 디자인
• 빠른 속도, 쉬운 실시간 협업, 누구나 쉽게 접근 가능
• 현재 전 세계에서 가장 많이 쓰이는 GUI 툴
• 피그마 서버가 터지면 할 수 있는 게 없음

가격

• Starter: 무료
• Professional: 13,272원/월 (1인당)
• Organization: 160,375원/월 (1인당)

https://www.figma.com/

스케치

• 벡터, 2D, 인스펙트, 프로토타이핑
• 오랜 시간 GUI 디자인의 절대 강자
• 수없이 많은 자료와 플러그인
• 맥을 쓰는 디자이너만 쓰기 편함
• 속도가 느려지고 있음

가격

• 개인: 109,497원 단일 구매
• 팀: 9,954원/월 (1인당)

https://www.sketch.com/

XD

• 벡터, 2D, 인스펙트, 프로토타이핑
• 스케치와 피그마를 반씩 섞은 느낌
• 다른 툴 대비 더 나은 프로토타이핑 구현
• 어도비 프로그램과 연계
• 윈도우에서 쓸 수 있는 유일한 툴이었으나 피그마에 밀림

가격

• XD 스타터: 무료
• XD 앱: 11,000원/월 공동 편집자 무제한, 글꼴 라이브러리, 링크 공유 무제한
• 모든 Adobe CC 앱: 62,000원/월

https://www.adobe.com/kr/products/xd.html

제플린

• 인스펙트
• 디자인 파일을 다른 협업 부서와 공유하기 위해 정리하기 좋음
• 원하는 대로 프로젝트를 분류하고 태깅하기 편함
• 이미지 스냅샷이 쌓이면 쌓일수록 느려짐
• GUI 툴이 제플린의 기능을 직접 제공하기 시작함

가격

• Free: 무료
• Starter: 18,802/월
• Growing Business: 28,757원/월
• Organization: 11,889원/월 (1인당)

https://zeplin.io/

프레이머 Framer

• 벡터, 2D, 인스펙트, 프로토타이핑
• 디자인과 개발 코드를 거의 완벽하게 일치시킬 수 있음
• 너무 어려움

가격

• Free: 무료
• Pro: 23,733원/월
• Enterprise: 협의

https://www.framer.com/

프로토파이

• 프로토타이핑 툴
• 에프터 이펙트를 GUI에 알맞게 최적화한 느낌
• 실제와 거의 동일한 경험을 개발하기 전에 확인할 수 있음
• 제작한 것을 재사용하기가 어려움 > 시스템화 하기가 어려움

가격

• Individual: 14,378원/월
• Team: 55,302원/월 (1인당)
• Enterprise: 협의

https://www.protopie.io/

포토샵

• 2D 그래픽 제작, 사진 편집/보정
• 정교한 2D 이미지 제작을 할 수 있는 거의 유일한 그래픽 툴
• 프로덕트를 디자인할 때 포토샵으로 정교하게 이미지를 제작할 일이 많지는 않음

가격

• 포토샵 앱: 24,000원/월
• 어도비 모든 앱: 47,520원/월 (1인당)

https://www.adobe.com/kr/products/photoshop.html

일러스트레이터

• 벡터 기반 그래픽 디자인
• 정교한 벡터 기반 이미지 제작을 할 수 있는 거의 유일한 그래픽 툴
• GUI툴의 기능만으로도 필요한 만큼의 벡터 이미지를 제작할 수 있음

가격

• 일러스트레이터 앱: 24,000원/월
• 어도비 모든 앱: 47,520원/월 (1인당)

https://www.adobe.com/kr/products/illustrator.html

애프터 이펙트

• 영상 제작 툴
• 모션 그래픽 디자인
• 움직임 만들기의 끝판왕. 무엇이든지 가능
• 배울 것이 많고 플러그인이 비쌈

가격

• 애프터 이펙트 앱: 24,000원/월
• 어도비 모든 앱: 47,520원/월 (1인당)

https://www.adobe.com/kr/products/aftereffects.html

시네마 4D

• 3D 제작 툴
• 모션 그래픽 특화 3D 디자인 툴
• 에프터 이펙트와의 강력한 연계
• 타 3D 툴 대비 배우기 쉬움
• 쉬워 보이는데 막상 조금 더 낫게 만드려고 하면 난이도가 급상승함
• 비쌈

가격

개인

• C4D 단일 앱: 80,942원/월
• Maxon 모든 앱: 148,521원/월

단체

• C4D 단일 앱: 1,457,993원/월
• Maxon 모든 앱: 2,268,890원/월

https://www.maxon.net/en/cinema-4d

블렌더

• 3D 제작 툴
• 쉽게 배워서 빠르게 적용할 수 있는 3D
• 3D 제작에 필요한 다양한 기능들이 담긴 올인원 툴
• 오픈 소스에 막강한 규모를 자랑하는 커뮤니티
• 아쉬운 기능들

가격

• 무료

https://www.blender.org/

프로덕트 디자인 101