어떻게 모션툴이 약 2주만에 2만 2천명 이상의 UV를 기록했을까?

한 달 전 마케터도 아닌 제가 "phase"라는 툴의 런칭을 홍보하게 되면서
조금은 두려웠던 기억이 있는데요.

디스콰이엇에 런칭 글을 올린 이 후 생각 이상으로 좋은 성과를 얻어

phase 런칭 이후 제품을 홍보한 과정을 간단하게 회고해 봅니다.

제가 공유하는 글이 새롭게 제품을 런칭하시는 프로덕트 메이커 분들께

조금이나마 도움이 되었으면 좋겠습니다!

• 런칭 이후(5/2) 2주간 3,600명의 신규 가입자 확보 

• 런칭 이후 2주간 홈페이지 순 방문자수 약 22,000명 이상

• Disquiet을 통해 유입된 유저 총 208명 / Conversion rate 각각 27.7%, 50%

UXUI 디자이너를 위해 만든 툴이지만,

메인 작업툴은 아닌 "phase"가 어떻게 이런 성과를 얻을 수 있었을까요?

홍보에 사용했던 방법을 단계로 나누어 정리해 보았습니다.

1단계:디자이너들이 있는 곳이라면, 어디든 "phase라는게 있어요!!"(온라인 광고)

사실 이 방법은 조금 식상하게 느끼실 수 있겠지만 전통적인 방법도 놓칠수 없기에, 온라인 광고는 진행하되 디자이너분들, IT분야의 분들이 자주 이용하실만한 사이트를 집중적으로 공략하는 방식을 선택했습니다. 실제로 이 방법을 통해 "phase"의 타겟 유저들에게 런칭 소식을 빠르게 알릴 수 있었습니다.

• WWIT, Ui bowl, Dribbble,Surfit 등 디자이너를 포함한 IT분야의 분들이 즐겨 사용하실만한 사이트에 광고를 운영했습니다.

• 콘텐츠 광고를 통해 "phase"를 조금 더 알리기: 작가분들의 글을 매거진에 발행해주는 Surfit의 콘텐츠 광고를 운영했습니다.

• Disquiet에 phase를 런칭 했다는 소식을 알리는 글을 발행했습니다.

2단계: 소셜 미디어를 통해 "phase"에 대한 친밀도 올리기

1) 인스타그램 애니메이션 챌린지와 Phasekor공식계정 운영으로 시너지

• 인스타그램 챌린지: 인플루언서분들과 함께한 챌린지로 자연스럽게 사용 하실 수 있도록

  • 챌린지 운영: 챌린지는 디자인 분야의 인플루언서분들과, 일반 유저분들이 함께 했는데요.
    디자인 분야의 인플루언서 분들이 먼저 챌린지를 시작해서 풍부한 소재를 제공하고 이후에 일반 유저분들도 참여하실수 있는 챌린지를 열었습니다. 약 70명의 유저분들이 출품하셨고, phase로 만든 다채로운 아웃풋을 만나볼 수 있었어요. 이 챌린지 덕분에 많은 유저분들이 phase를 사용해보실수 있는 계기가 되었고요.

  • 공식계정 운영: phasekor 이라는 한국 공식 계정을 운영해 한국의 유저들이 관련 소식을 더 빠르고 정확하게 얻을 수 있도록 했습니다.

  • 공동작업 태그 방식을 활용: 인플루언서분들과의 협업은 공동태그하는 방식으로 운영하여, 공식계정과 인플루언서분들의 계정에 동시에 챌린지 콘텐츠가 노출될 수 있도록 하였습니다.

2)유튜브 콘텐츠를 통해 더 자세한 툴 사용법 알리기

유튜브 콘텐츠 또한 인스타그램 콘텐츠와 함께 병행되었습니다.

• 라이브 콘텐츠 진행: 프로그램 런칭과 동시에 Openpath와 콜라보로 라이브를 진행해 툴 런칭 소식, 챌린지 소식, 간단한 사용법을 소개했어요.

• UXUI분야 유튜버들과 콜라보 진행: UXUI 분야에서 활동중이신 유튜버분들과 콜라보를 진행, 더 자세한 사용 방법을 튜토리얼로 공유하는 콘텐츠를 발행했습니다.

3단계: phase 유저분들을 위한 찐 커뮤니티 만들기

1) 우리 조금 더 친해져요. 진성 사용자와 팬을 만들기 위한 온라인 클래스

• IT벤처 창업 동아리 SOPT와 콜라보로 온라인 클래스를 기획해 약 100명의 분들과 phase 클래스를 진행했습니다. 클래스에 참여 하시는분들께는 "phase"굿즈도 선물해 드리기로 했어요.(제작중이라 6월중 발송될 예정!)

2) 그리고 phase만의 커뮤니티 제작

• phase 소식, 그리고 버그 리포트를 할 수 있는 커뮤니티를 열었어요. figma forum처럼 유저분들의 다양한 의견도 듣고, 버그 리포트도 직접 받아보려고 합니다. Circle 이라는 플랫폼을 활용했습니다.

phase의 다음 스텝은..?

이제 phase는 실제 툴을 사용할 분들이 모여 있는 기업/기관 대상으로 온/오프라인 phase강의를 진행, 커뮤니티를 운영하며 한국의 유저분들과 더 많은 접점을 만들어 가려고 합니다.

여기까지가 제가 phase를 홍보하며 시도해본(또는 시도해보려 하는) 다양한 방법들입니다.

홍보 겸 작성해보는 성과 공유이지만, 다른 프로덕트 메이커분들께도

소소하게나마 도움이 되기를 진심으로 바랍니다!

그리고...막연하게 "모션은 어렵고...내 분야도 아니고" 라고 생각하셨다면, phase를 한 번쯤 사용해보시는 것을 추천 드립니다. 저는 주니어 시절부터 애프터 이펙트를 배우려고 유명한 학원도 2달정도 다니고, 유튜브로 독학도 해보려고 하다가 실패한 사람이었는데요, phase는 하루만에 배웠어요.(과장을 1도 보태지 않았습니다.)

이제 막 태어난 툴이라 아직 부족한 기능도 많지만,

7월까지 피그마 플러그인과 텍스트 툴 등 다양한 업데이트를 앞두고 있으니

앞으로도 phase 쭉 지켜봐주세요! :)

phase가 뭔지 궁금하신가요?👀 지난 Disquiet 글을 참고해 보세요!

피그마처럼 쉬운 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만원인 애니메이션 챌린지를 진행하고 있으니, 관심 있으신 분들은 도전해 보세요!