[정보] 모션 툴 phase(페이즈) 장단점과 사용후기
모션 초보인 내가 이 세계에선 고수?
이런 분께 추천
phase 소개
모션 초보인 내가 phase를?
phase로 만든 작업물
이런 분께 추천
심심한 화면에 간단한 모션 한 스푼 추가하고 싶은 디자이너
개발자에게 전달할 lottie 파일 쉽게 만들고 싶은 디자이너
phase 소개
어느 날 디자인 팀 슬랙에 재석 님, 지은 님께서 공유해 주신 소식! “피그마처럼 사용하기 쉬운 모션 툴이 나왔어요.” 이때만 해도 제가 이 툴을 사용하게 될 거라고 생각 못했습니다. 먼저 phase가 어떤 툴인지 알아봅시다.
똑개 디자인 팀 슬랙제품 디자이너를 위한 애니메이션 툴 쉽게 애니메이션 만들고 편리하게 코드로 핸드오프까지 끝내 보세요!
Phase 소개글 중
“제품 디자이너” “쉽게” “코드로 핸드오프” 단어만 들어도 어떤 느낌인지 떠오르긴 합니다. 말 그대로 웹, 앱에 최적화된 모션 툴입니다. UXUI 외주 작업을 하다 보면 종종 모션 작업이 필요한 경우가 있습니다. 딱 저 같은 UXUI 디자이너를 타겟팅하고 나온 툴이라 느꼈습니다.
phase의 R/D팀은 대만 타이페이에 있고, 비즈니스 팀은 독일 베를린에 위치합니다. 24년 5월 2일 한국에서 가장 먼저 출시되었습니다. 왜 한국이 첫 출시국인지는 저도 모르지만 한국 디자이너가 세계에서 가장 먼저 phase를 사용해 볼 수 있게 되었습니다!
그러면 제가 직접 사용해 보면서 느낀 phase의 장단점을 말씀드리겠습니다.
모션 초보인 내가 phase를?
저로 말하자면 애니메이션 애펙 경험 0회, 피그마 프로토타입만 할 줄 앎에 빛나는 모션 초보입니다. 모션 작업이 필요한 프로젝트를 맡게 되며 어쩌다 보니 디자인 팀에서 제가 phase의 첫 사용자가 되었습니다.
장점 1 : 피그마와 비슷한 UI
phase UI얼핏 보면 피그마인가?라고 생각할 정도로 비슷하죠. 피그마에 익숙한 디자이너에게는 사용 방법을 익히는 과정 없이 바로 사용할 수 있다는 점이 큰 장점입니다. phase 강의 영상이 조금씩 올라오고 있지만 피그마를 사용해 본 디자이너는 버튼 몇 개 만져보면 직감적으로 어떻게 동작하는지 이해할 수 있습니다.
키프레임 영역에서도 마치 피그마 프로토타입을 만드는 것처럼 시간을 지정하고 형태를 변경하면 선택된 시간에 키프레임이 만들어집니다. transition 효과도 피그마처럼 Ease in, Ease out 등을 선택해 적용할 수 있습니다.
장점 2 : 공동 작업 가능
Ⓒ Phase모션 작업을 하다 보면 ‘뭔가… 이상한데, 뭐가 이상한지 모르겠다…’라는 순간이 옵니다. 그럴 때 저는 팀에서 모션 작업을 잘하시는 디자이너 님께 피드백을 요청합니다. 애프터 이펙트로 작업했다면 파일을 전달하고 피드백받아서 다시 그 파일로 “최종_최종_최종본”을 만들었겠지만, phase는 공동 작업을 지원합니다.
작업 중인 파일 링크를 보내고 “00 님! 한 번만 봐주실 수 있나요?” 한 마디면 즉시 파일 안에서 피드백을 받을 수 있습니다. 저도 공동 작업 기능 덕분에 피드백을 빠르게 반영할 수 있었습니다.
장점 3 : 공식 문의 오픈채팅방 운영
phase 공식 문의방생긴 지 얼마 안 된 툴이다 보니 자잘한 오류들이 보입니다. phase는 국내에서 오픈채팅방을 운영하며 문의사항을 받고 있습니다. 답변도 대부분 10분 이내로 옵니다! 굉장히 빠르죠.
저도 작업을 하다 오류가 있어 문의 부탁드렸는데, 금방 답변이 와서 다른 방법을 찾아볼 수 있었습니다. 단순 답변뿐 아니라 접수된 오류도 빠르게 개선되고 있다고 합니다. 오픈 채팅방 이외에 phase에서 운영하는 커뮤니티도 있습니다. 커뮤니티에서는 phase 멤버에게 직접 질문하고 기능을 제안할 수 있습니다.
그렇다면 단점은 어떤 것이 있을까요?
단점 1 : GIF 크기 변경 불가
phase UIphase는 gif 추출 사이즈를 정할 수 없고 원본 사이즈 그대로 추출해야 합니다. 이게 뭐가 단점이야 라고 하실 수 있습니다. 하지만 클라이언트에게 모션이 적용된 시안을 보여드려야 하는 저에게는 꽤 치명적인 단점이었습니다. 결국 lottie 파일을 추출해서 2 배수 사이즈의 gif로 변환하고 프로토타입에 넣는 과정을 거쳐야 했습니다. phase 여러분 gif 사이즈 배수로 추출할 수 있는 기능 만들어 주세요…!
단점 2 : 아직은 마이크로 한 모션 작업만
Ⓒ Adobe After effect, Ⓒ Phase애펙처럼 다양한 모션 작업을 할 수 있다!라고 말하기에는 부족한 부분이 많습니다. 목적 자체가 화려한 모션 작업을 지원하고자 하는 툴로 보이지는 않습니다. 직접 써본 바로 아직은 피그마 프로토타입으로 구현할 수 있는 애니메이션 정도가 최선으로 보입니다. 하지만 무료 툴이기도 하고 빠르게 업데이트를 하고 있는 만큼 몰핑과 같은 기능도 phase에서 사용할 수 있게 되기를 기대해 봅니다.
phase로 만든 작업물
그래서 제가 어떤 모션 작업을 했는지 궁금하시죠? 안 궁금하셔도 보여 드릴 겁니다. ‘모션 초보도 이 정도 만들 수 있는 툴이구나~’ 하고 참고만 해주세요. 제 작고 소중한 작업물과 함께 이번 작업에 많은 도움을 주신 디자이너 지은 님을 샷 아웃하며 마무리하겠습니다. 오늘 보신 내용이 즐거운 작업 생활에 도움 되길 바랍니다 :)
