피그마처럼 쉬운 UI 애니메이션 툴?👀 phase팀은 이런 문제를 해결합니다.

“내가 디자인한 애니메이션, 개발 환경에서도 그대로 구현하려면?”

혹시 이런 경험 없으신가요? 우리 서비스에도 조금 더 멋진 온보딩 애니메이션이나 마이크로 인터랙션을 넣고 싶은데 유료 소스엔 마음에 드는게 없고..애프터 이펙트 같은 툴로 만들자니 시간이 부족하고(항상 시간이 부족하죠💦) 공들여 만들어서 넘겼더니 용량 문제로 웹이나 앱 로딩이 오래 걸린다고 해서 gif로 바꿨더니 해상도가 깨지고... 아마 해상도 깨진다는 이야기에서 많은 디자이너분들이 끄덕 끄덕 하셨을 것 같은데요,

phase는 디자이너분들이 겪는 이런 문제를 해결하겠다는 멋진 비전을 가지고 시작한 팀입니다.

phase는 ui에 들어가는 애니메이션을 무료로 제작하고,gif,mp4, lottie로 추출할 수 있는 웹 기반의 프로덕트입니다. phase 팀은 "보이는 그대로의 결과물을 쉽고 편하게 전달할 수 있도록"이라는 사명을 가지고 프로덕트를 개발하고 있어요. 향후에 노코드 플랫폼으로 성장한다는 비전을 가지고 로드맵을 만들어 나가고 있습니다. 우리의 서비스를 통해 많은 사용자분이 불필요한 커뮤니케이션은 줄이고, 디자인에만 집중하기를 바라며 하루 하루 열심히 달리고 있답니다.

"디자이너가 작업하다가 불편해서 직접 만든 툴 phase, 한국에 가장 먼저 출시"

phase의 뿌리는 디지털 잡지 디자이너인 창립자 nick으로 부터 시작되었습니다. 졸업 후 UXUI디자이너로 전향한 Nick은 전처럼 photoshop과 illustrator와 같은 도구로 디자인 하다가, 더 빠르게 개발 환경에 적용하기 위해 코드로 디자인을 하기 시작했습니다. 하지만 코드만으로 화면을 구성하는데는 한계가 있었고, 머리속에 구상한 화면을 쉽게 웹, 모바일 환경에도 적용할 수 있는 방법이 없을까 고민하다가 결국 직접 툴을 개발하기로 결심합니다.

Nick은 3년간 툴을 개발하며 기존의 툴들이 사용자에게 집중하기 보다는 기존의 선례를 따른다는 사실을 발견하게 되었고, 이러한 한계점을 보완해 나가며 사용자의 편의에 집중한 툴을 개발하는 것에 집중했습니다. 쉽게 말해 디자이너 입장에서 불편해서 개발한 툴이라 생각하시면 될 것 같아요.

그리고 한국 프로덕트 시장의 가능성을 높게 본 Nick은, 개발한 툴을 한국에 가장 먼저 선보이기로 결정했고 5월 2일 한국에서 가장 처음 론칭하게 되었습니다.

“꼭 코딩에 대한 지식이 있어야 웹/모바일 환경에서 애니메이션을 구현할 수 있을까요?”

간혹 비개발자 직군분들이 이런 질문을 많이 하십니다. "코딩을 어디까지 배워야 할까요, 조금 더 디테일한 부분까지 구현하기 위해선 디자이너도 코딩을 배워야 할까요?"물론 비개발자도 코딩을 이해하고, 직접 할 수 있다면 더 좋은 프로덕트를 만드는데 도움이 될 것입니다.

하지만 지금 당장 현업, 내 분야에 집중해서 공부하기도 바쁜데 다른 분야까지 깊이 있게 공부를 한다는 것이 쉬운 일은 아닐것입니다. phase팀은 이런 격차를 해소하고, 고민을 해결하는데 집중했습니다.phase는 비개발자, 특히 디자이너분들이 코딩에 대한 지식이 없이도 쉽게 애니메이션을 제작하고 이것을 코드 형태로 핸드오프 하며, 개발팀의 지원이 없이도 애니메이션을 편집하고 바로 코드화 할 수 있도록 지원합니다.

내가 제작한 애니메이션을 개발 환경에 최적화된 lottie(json) 확장자로 추출할 수 있을 뿐 아니라, mp4, gif와 같은 확장자도 무료 내보내기 할 수 있도록 지원합니다. 따라서 누구나 쉽게 애니메이션을 만들고, 우리 팀의 프로덕트에 적절한 형태로 내보내기 후 적용할 수 있어요.

다양성을 존중하는 문화를 가진 phase팀

이 쯤 되면 phase팀은 어떤 팀인지, 어떤 방식으로 일하는지 궁금하실것 같은데요. 우리 팀은 숙련된 디자이너와 엔지니어,전략관리자, QA담당자, 마케터 딩 재능있는 다양한 팀원들로 구성되어 있습니다. 전 세계 각지에서 온 직원들은 다양한 문화와 관점을 존중하는 팀 문화 아래에서 재미있게 일하고 있어요. 참고로 phase팀은 대만 타이페이에 R&D팀,독일 베를린에 비즈니스 팀으로 나누어져 있고 장소에 얽매이지 않고 일합니다. 보통은 재택 근무를 하며 필요한 일이 있을 경우에만 오피스에 출근해서 회의를 진행해요.

phase팀은 프로덕트의 완성도를 높이기 위해 조직 전체가 빠르게 움직입니다. 2주마다 새로운 기능을 업데이트 하고 있으며 유저분들에게 더 좋은 경험을 제공하기 위해 하반기까지 로드맵을 모두 작성해 둔 상태예요. 앞으로 유저분들의 목소리에 귀를 기울이며 더욱 더 완성도를 높여가려고 합니다. 한국에서 가장 처음시작한 'phase'의 프로덕트의 여정에 많은 응원 부탁드립니다.🙏

"피그마처럼 쉬운 툴, phase"

마지막으로 우리 phase는요...이런 툴입니다.😁 기존 툴들의 좋은 점들만 쏙 모았기 때문에 누구나 바로 배울 수 있을만큼 인터페이스가 정말 직관적이고 쉽습니다.

심지어 디자이너가 아닌 분들도 바로 쓰실수 있을 정도에요. 피그마의 스마트 애니메이트 기능과 비슷해서, 디자인 속성의 차이를 자동으로 감지해서 애니메이션으로 만들어줍니다. 키프레임을 찍지 않아도 타임라인에 따라 디자인을 변경하면 디자인의 속성차이가 바로 애니메이션화 되는 방식으로 구성되어 있어요. 예전에 책 끝부분에 만화를 그려서 넘기는 장난 많이 해보셨을 텐데, 이런 구조로 되어 있는데 훨씬 간편하다 생각하시면 될 것 같습니다. 이렇게 쉽게 작업한 아웃풋을 바로 코드로 내보내기 할 수 있으니, 핸드오프 할 때도 걱정 없이 넘기실 수 있고요.

피그마처럼 실시간 공동작업, 코멘트 남기기, 자동 히스토리 저장 기능도 지원되기 때문에 phase를 이용하시면 동료들과 즐겁게 협업 하실 수 있어요. 로드맵을 살짝 추가로 공유하자면 데브모드도 지원할 계획이라, 개발직군분들도 애니메이션을 웹과 앱 환경에 적응할 때 더 편하게 작업하실 수 있게 됩니다.

"자..이제 써보시는 일만 남았습니다!😉"

여기까지 열심히 읽으셨다면, 시간 나실 때 들려서 한 번 써보시는 것을 추천합니다. 아래 링크에서 3초면 가입하고 사용해 보실 수 있답니다. 론칭 기념으로 오는 5월 16일까지 총 상금이 558만원인 애니메이션 챌린지를 진행하고 있으니, 관심 있으신 분들은 도전해 보세요!