그래서 무슨 UI 툴을 써야할까?

툴을 선택하는건 정말 어려운 문제입니다. 여러 툴이 기본 기능을 훌륭히 제공하고 있다면 더더욱. 새로운 툴은 기존의 어려움을 해결해줄 수 있는 것만 같이 보이고, 기존 툴은 문제 투성이인 것처럼 보이기도 합니다. 혹은 나한테 익숙한 툴이라서 새로운 것을 배우기 싫어서 새로운 툴을 싫어할 수도 있습니다. 툴을 배우는 것이 즐거움일 때도 있지만, 쌓아온 자산을 버리고 새롭게 쌓아 올려야 하기도 합니다. 각 툴의 속성을 나열해보고, 어떤 맥락에 더 적합할지 고민해봤습니다.

*툴 자체만을 비교하기보다는 프로덕트를 설계할 때 스케치를 이용한 워크플로우와 피그마를 이용한 워크플로우를 비교했습니다.

Feature

기본적인 그래픽을 제작하는 기능은 거의 비슷합니다. 프로덕트 디자인 워크플로우에 크게 영향을 끼치는 요소에 집중해 비교해봤습니다.

  • Symbol & Component
  • Versioning
  • Prototyping
  • Share

Symbol & Component

스케치에서는 심볼, 피그마에서는 컴포넌트라는 기능을 제공해 반복해서 사용하는 요소를 손쉽게 사용할 수 있습니다. 기본적인 사용법은 비슷하지만 재사용 시 다양한 정보를 입력하고 수정하는 과정에서 차이가 있습니다.


Sketch

  • 규칙 강제
  • 수정 원할 경우 마스터와 연결을 끊어야 함
  • 마스터와의 상관관계가 강력함

Symbol

  • 자유롭게 다양한 변수를 표현
  • 같은 디자인 안에 데이터만 바꿔 넣을 수 있음
  • 심볼 안에 심볼을 넣어 여러가지 변수를 표현할 수 있음

Figma

  • 규칙 유연
  • 수정 후에도 마스터와 연결되며 마스터가 변하면 인스턴스도 변함
  • 마스터와의 상관관계가 느슨함

Component

  • 스케치 symbol 기능 모두 수행 가능
  • 컴포넌트의 변수를 만들고 그룹핑하기 편함
  • 복잡한 변수 적용이 편함
  • 개발과 비슷하게 변수를 다룰 수 있음

Versioning

디자인 파일 관리를 위해서는 최신 파일을 유지할 수 있어야하며, 단일 파일의 히스토리 뿐만 아니라 규모에 따라 프로젝트 단위로 다중 페이지의 버전을 관리해야할 필요도 있습니다.

*스케치의 버전 히스토리는 피그마의 하위 호환이며 같은 역할을 수행하는 앱스트랙트와 비교했습니다.


Abstract

장점

  • 자동 저장
  • 파일 히스토리
  • 프로젝트 단위 관리
  • asis와 tobe 화면 비교

단점

  • 느림
  • 싱크에 시간 걸림


Figma

장점

  • 자동 저장
  • 파일 히스토리
  • 빠름
  • 실시간 싱크

단점

  • 프로젝트 단위로 저장/복원 불가
  • 페이지 비교 어려움

Prototyping

서비스마다 필요한 프로토타이핑의 수준이 다릅니다. 빠르게 전체의 구조를 확인하고 전문적인 툴을 따로 사용할 수 있으며, 하나의 툴 안에서 어느정도의 인터랙션을 더 매끄럽게 구현할 수 있습니다.


Sketch

  • 플로우만 빠르게 제작 용이
  • 필수적인 화면 트랜지션
  • 복합적인 인터랙션 구현 불가
  • 팝오버류 구현 불가

Figma

  • 기본적인 플로우, 트랜지션 매끄럽게 제공
  • 개별 요소 애니메이션 구현 쉬움
  • 영역별 애니메이션 구현 쉬움
  • 팝오버류 구현 가능

Share

기획자, 디자이너, 개발자 등 다른 사람과 공유하는 방법을 비교했습니다. 코멘트 기능, 인스펙터 기능, 내보내기 기능, 프로젝트별 모아보기 기능이 필요합니다. 스케치 클라우드는 기능이 부족해 워크플로우 상 같은 역할을 하는 제플린과 피그마를 비교해봤습니다.


Zeplin

장점

  • 프로젝트별 화면 모아보기

단점

  • 로딩 느림
  • 업데이트 누락


Figma

장점

  • 업데이트 걱정 없이 최신 화면 싱크

단점

  • 프로젝트별 화면 모아보기 힘듦

Conclusion

툴을 비교했을 때 페이지를 디자인하는데 필요한 기능은 거의 동일하게 제공하며, 디자인 파일을 다루는 방식에서 차이가 많이 났습니다. 기본적인 UI 디자인을 위한 워크플로우를 스케치가 제시했고, 피그마는 스케치에서 제공하는 기능의 여러 부분을 더 편하게 정돈한 것 같은 느낌이에요. 2가지 툴 모두 UI를 설계하는데 전혀 문제가 없지만 프로덕트 제작 상황에 따라 다를 것 같습니다.

스케치 추천

  • 다양한 페이지가 확장되는 서비스
  • 디자인 파일 많음
  • 병렬 진행 프로젝트 많음
  • 디자인 시스템 규칙 강력하게 적용

피그마 추천

  • 적은 디자인 파일이 업데이트되는 서비스
  • 디자인 파일 적음
  • 병렬 진행 프로젝트가 적음
  • 디자인 시스템을 유연하게 적용

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중