* 이 글은 인프런의 '주간 인프런 #27 - UI 디자인 툴 Top 3 비교하기' 글을 상당 부분 참고하여 제가 이해하기 쉽도록 다시 간단하게 요약 및 정리한 글입니다.
최근 프론트엔드 개발 파트로 참여하게 된 팀 프로젝트가 있는데, 해당 프로젝트에서 유일한 프론트엔드 개발자인 만큼 기본적인 UI 설계 및 구성은 내가 주도적으로 하는 것이 맞다고 판단하였다. 이전에 이어드림 교육 과정에서 중간 프로젝트로 진행했던 팀 프로젝트에서는 빠른 시간 내에 눈에 보이는 결과 먼저 만들기 위해 부리나케 UI 프레임워크나 부트스트랩을 이용했다. 지금은 비교적 여유롭고(그렇다고 매우 느긋하게 만들겠다는 것인 아니지만!) 내가 나아가려는 직무에 대해 조금 더 구색을 갖추고, 트렌드에 맞게 프로젝트를 진행해보고 싶어서 우선 UI 디자인 툴을 통해 UI를 디자인하기로 생각했다.
한 일주일 전에 아주 간단하게 NFT를 만들어보면서 Figma(피그마)라는 툴을 사용한 적이 있는데, 당시 대충만 검색해봐도 뭔가 피그마가 대세라는 느낌이 많이 들었기 때문에 이번 프로젝트에서도 피그마를 사용할 생각이었다. 하지만 그래도 왜 피그마가 대세인지, 구체적으로 다른 디자인 툴과 어떻게 다르며 어떤 장단점이 있는지 파악하고 싶어서 이 글을 작성한다.
0. Good bye, 포토샵!
먼저, 내가 기억하기로는 2000년 초중반 즈음에만 해도 디자인, 합성 등에 무조건 포토샵을 이용했다. 하지만 현재 디자인 툴을 검색하면 포토샵에 대한 언급은 거의 없는 수준이다.
1) 포토샵의 인기가 식은 대표적인 이유는 포토샵이 비트맵(Bitmap) 방식의 툴이기 때문이다. 비트맵 방식으로 그려진 디자인은 아래 사진처럼 확대했을 때, 깨진다는 단점이 있다. 혹은 확대해도 깨지지 않게 하기 위해 너무 용량이 커지거나 처리 시간이 길어지기도 한다. 반면, 일러스트레이터와 같이 벡터 방식으로 그린 이미지는 이미지의 정보를 수학적인 공식으로 저장하기 때문에 이미지를 확대해도 깨지지 않고, 용량 또한 가볍다.
2) 오히려 포토샵의 기능이 너무 많고 세부적이라는 점 또한 단점이 될 수 있다. 프로그램 자체도 무거운 상황에서 다양한 기능을 세밀하게 적용하기 위해 작업을 하다 보면 작업창이 많아지기도 하고, 간단한 UI 디자인을 위한 작업에도 부담이 따를 수 있다.
3) 무엇보다 현재 개발 환경의 트렌드로 애자일한 프로세스가 자리를 잡기 시작했다는 점이 크다. 애자일 프로세스는 짧은 단위의 업무 프로세스를 빠르게 반복하는 개발 방법론으로써, 프로젝트를 최대한 빠르게 만들어 내놓고, 사용자의 피드백을 통해 버그나 보완점을 바로바로 수정하는 데 집중하는 형태이다.
애자일한 프로세스는 사용자와 UX(사용자 경험)가 가장 핵심인데, 더 좋은 UX를 이끌어내기 위해서는 당연히 좋은 UI 또한 중요하고, 사용자의 의견을 반영한 UI를 계속해서 만들어내고 수정하기 위해서는 포토샵보다 더 가볍고, UI 디자인에 최적화된 툴이 필요한 것이다.
1. 스케치(Sketch)
2010년, 네덜란드의 보헤미안 코딩(Bohemian Coding)에서 출시한 UI 디자인 툴이며, 어도비 XD, 피그마보다 앞서 가장 먼저 출시되었다. 당시 오늘날 UI 디자인 툴의 기본 조건을 두루 갖춘 최초의 툴이었기 때문에 혁신적이라는 평을 받았다.
1) 장점
- 오래된 만큼 업계에서 가장 대중적인 툴이다.
- 툴 자체에 내장된 기능 외에도 강력하게 기능을 보완해 주는 외부 확장 플러그인과 프로그램이 다양하다. 특히, UI 디자인을 실제 애플리케이션으로 구현할 수 있도록 개발자나 팀원들에게 디자인 속성 값, 리소스 등의 가이드라인을 공유해주는 제플린(Zeplin)이라는 프로그램이 있다.
- 업데이트가 자주 있으면서도 안정적으로 지원한다.
2) 단점
- macOS 전용 툴이기 때문에, Windows, Linux 등의 다른 운영체제에서는 사용이 불가하다.
- 구독제로써 비용이 발생하고, 여러 유료 플러그인을 사용할 경우엔 비용이 더 추가될 수 있다.
- 후발 주자인 XD, 피그마 등에 비해 단순한 수준의 프로토타이핑 기능만 지원한다.
여기서 프로토타이핑이란, 프로덕트 개발 과정 초기에 시스템의 모형(Prototype)을 간단히 만든 뒤 실제로 사용해보게끔 하고, 요구 사항을 받아 즉각적으로 기능을 수정, 보완하고 개선시켜나가는 방식을 뜻한다.
2. XD(eXperience Design)
2016년 3월, macOS용 'Adobe Experience Design CC'의 베타(프리뷰) 버전이 어도비 유저들을 대상으로 출시됐고, 같은 해 12월엔 Windows 10용이 공개되었다. 이후 마침내 2017년엔 정식 1.0 버전을 릴리스했다. 이는 피그마보다 출시가 늦은 시점이었다.
1) 장점
- 별도 플러그인 없이 어느 정도 프로토타입을 만들어볼 수 있다.
- 간단한 수준의 애니메이션 구현이 가능하고, 간단하게 공유 링크를 생성함으로써 피드백을 주고받을 수 있다.
- 어도비 사의 프로그램이라는 점에서 포토샵, 일러스트레이터와 단축키부터 인터페이스까지 닮은 부분이 많고, 기존에 쓰던 클라우드 환경을 활용할 수 있다.
- 한국어를 공식 지원하고, Windows 환경에서도 사용할 수 있다.
3. 피그마(Figma)
2016년 9월에 정식 출시되었으며, 스케치, XD를 제치고 2021년에 UI 디자인 목적으로 가장 많이 사용되는 툴 설문조사에서 1위를 차지했다.
1) 장점
- 다른 UI 디자인 툴에 비해 '협업'을 강조함으로써 차별화를 이끌어냈다.
- 웹 브라우저 기반의 툴이기 때문에 스케치나 XD와 달리 별도의 데스크톱 애플리케이션이나 프로그램 설치가 필요 없다.
- 모든 리소스가 클라우드에 저장된다.
- 여러 사람이 동시에 아트보드를 편집할 수 있다.
2) 단점
- 인터넷 연결이 불가능하거나 피그마 서버가 다운되는 경우엔 작업 진행이 전혀 불가하다.
- 보안 관련 위험성이 존재한다.
- 한글을 입력하면 텍스트가 먹히거나 밀리는 등의 자잘한 버그가 존재한다.
이렇게 비교했을 때 피그마가 분명 단점도 존재하는 툴이지만, 별도의 프로그램 설치가 필요 없다는 부분이나 클라우드에 저장된다는 점에서 비교적 간단한 UI 디자인 작업 정도만 요구되는 현재 프로젝트에는 피그마를 사용할 계획이다. 또한 가능하다면 추후 팀원들과도 피그마를 통한 동시 편집 기능도 이용해보고 싶다.
4. 이외의 UI 디자인 툴
이외에도 인비전 스튜디오(InVision Studio), 프레이머(Framer), UX핀(UXPin), 어피니티 디자이너(Uffinity Designer) 등 다양한 소프트웨어가 존재하고, 포토샵이나 일러스트레이터를 사용하는 팀도 여전히 있다. 다만, 아이디어 및 컨셉을 화면에 구현하는 데 초점을 맞춘 로파이(Lo-Fi) 프로토타이핑에 초점을 맞춘다면 스케치, XD, 피그마가 널리 쓰인다고 한다.
하이파이(Hi-Fi) vs. 로파이(Lo-Fi)?
각각 High Fidelity, Low Fidelity의 약자이다. 로파이 프로토타입은 간단하고 기술적으로 복잡하지 않은 수준의 프로토타입으로, 아이디어 및 컨셉을 화면에 구현하는 데 초점을 맞춘다. 일반적으로 GUI 디자인이라 하면 로파이 디자인에 해당하는 것이다. 한편, 하이파이 프로토타입은 최종적으로 개발될 프로덕트와 흡사할 만큼 기능적인 수준의 프로토타입으로, 개발자와 소통을 하기 위해 정교한 인터랙션까지 고려해서 제작된다.
스케치, XD, 피그마를 사용해 레이아웃을 구성하고, 요소를 배치하는 디자인 작업은 일반적으로 로파이 프로토타이핑에 해당하는 영역이다.