새로운 디자인 툴 페이즈(Phase)를 소개합니다. 페이즈는 웹/앱 디지털 프로덕트를 위한 모션 디자인 툴로 오늘 5월 2일 한국에서 가장 먼저 출시했습니다.

디지털 프로덕트를 설계할 때 다양한 애니메이션이 필요할 때가 많습니다. 앱을 처음 켰을 때 브랜드 로고를 부드럽게 표현하거나 프로모션 배너를 사람들이 주목하게 할 때 많이 사용하죠. 제품을 쓰는 작은 즐거움을 위해 버튼의 움직임과 같은 마이크로 애니메이션도 자주 적용합니다.

모션이 더 나은 사용자 경험을 만들어준다는 것은 누구나 알지만 정적인 UI를 제작할 때보다 손이 많이 가기 때문에 주저하는 경우가 많습니다. 이미지 대신 코드를 사용하면 개발 쪽에서 약간의 조정도 해줘야 하죠. 게다가 애니메이션 전문 툴은 필요한 것에 비해 너무 무겁고 피그마와 연동해서 쓰는 플러그인은 기능이 한정되거나 비싸죠.

페이즈는 인터랙션에 집중한 디자인 툴로 UI에 필요한 애니메이션을 손 쉽게 만들 수 있습니다. 웹 기반의 가벼운 툴로 피그마를 써 봤다면 누구나 쉽게 배울 수 있습니다. 기본적인 구조는 기존 UI 툴과 영상 툴과 비슷한데 모션을 만드는 데 꼭 필요한 기능만 배치해 금방 배울 수 있습니다. 디자인 결과물을 gif,mp4, lottie 확장자로 내보낼 수 있습니다.

실시간 협업을 하면서 결과물에 코멘트할 수 있는 것은 기본입니다. 다른 툴과 달리 버전 관리를 할 수 있다는 점이 특히 매력적입니다. 모션은 한 번 손대면 되돌리기도 쉽지 않은데 자주 쓸 기능으로 보입니다. 나중에는 모션과 화면의 전환 뿐만 아니라 앱 동작을 실시간으로 확인하는 프로토타이핑하기에도 좋아 보입니다.

올해 7월까지 정렬, 마이크로 인터랙션을 위한 개발 핸드오프, 한 화면에 여러 애니메이션, 그림자, 애니메이션 프리셋 기능 등이 지속적으로 업데이트될 예정입니다. 그리고 모든 기능은 제한 없이 무료로 제공할 예정입니다.

오는 5월 6일부터는 누구나 참여할 수 있는 총상금 500만 원의 UI 애니메이션 챌린지도 시작됩니다. 참여를 원하시는 분들은 아래 공식 인스타그램과 홈페이지를 확인하세요.

*지원을 받아 작성된 글입니다.

더 보기 및 출처

• 페이즈 공식 홈페이지
• 페이즈 인스타그램