–
1.페이퍼 프로토타입을 디자인 파일로 바꿔주는 : Uizard
(1) 서비스 소개
‘Uizard’는 손으로 그린 와이어프레임을 디지털 디자인 파일, 코드로 변환시켜주는 서비스이자 덴마크에서 시작된 스타트업입니다. 보통 페이퍼 프로토타입을 제작한 다음 스케치 등 디자인 툴을 활용해 작업을 하게 되는데요. ‘Uizard’는 별도의 작업 과정 없이 손으로 그린 화면을 다양한 테마의 디지털 디자인 파일로 변환해 줍니다. 뿐만 아니라, 기존 디자인 시스템, 웹사이트 스크린샷이나 URL을 등록하면 AI를 활용해 적합한 테마나 템플릿을 추천해주는 기능도 제공됩니다. 화면을 설계하고 논의하는 시간을 최소화할 수 있는 환경을, 누구나 쉽게 디자인 작업을 할 수 있는 환경을 만들어주고 있어요.
(2) 해결하고자 하는 문제
- 디자인 툴을 잘 다루지 못하는 사람들도 자신의 아이디어를 구체화 할 수 있는 환경을 만들어 주고자 함
- 화면 설계를 위한 디자인 툴 학습에 필요한 시간을 줄이고자 함
- 하나의 화면을 만들기 위해 준비해야 하는 기타 리소스를 최소화 할 수 있는 환경을 만들어 주고자 함
- 많은 학습을 필요로 하는 노코드 툴 대신, 누구나 쉽게 사용할 수 있는 노코드 툴을 제공하고자 함
(3) 문제 해결을 위한 노력
- 디자인을 쉽게 만든다는 슬로건 하에 다양한 디자인 작업물을 손쉽게 제작할 수 있도록 도와줌
- 구글 슬라이드, 키노트, 파워포인트 등에 간단하게 스케치하는 것으로 앱,웹,소프트웨어 디자인 작업 가능
- 화이트보드, 종이 등 기존에 ‘스케치 또는 낙서’ 단계에 머무른 내용을 검증 가능한, 디지털 화면으로 변환해 줌
- 서비스에서 제공하는 다양한 템플릿을 활용해 아이디어 단계의 화면을 빠르게 제작할 수 있도록 도와줌
- 회사의 디자인 시스템, 웹사이트 등 기존 리소스를 활용해 어울리는 테마를 자동으로 생성해 줌
- 협업, 인터랙티브, 플로우 등 화면 설계 외 필요한 기능을 함께 제공해 줌
- 서비스를 별도로 처음부터 활용하는 환경이 아니라, 스케치 파일이나 웹사이트 URL 등 기존 자산을 쉽게 연동 할 수 있음
- 팬데믹 상황을 고려, 실시간 협업 기능을 꾸준히 강화함
(4) 현재까지의 성과 및 앞으로의 계획
- 2019년 2월 베타 서비스 시작
- 베타 서비스 이후 192,000명 회원, MAU 14,900 달성
- Adidas, Google, Tesla, Slack, Airbus, Apple 등에서 사용 중
- 지난 8월 18일 1500만 달러 투자 유치 (누적 투자금액 1860만 달러)
- 지금까지는 AI 기술을 최적화 하는데 집중
- 투자금은 마케팅 등 고객 확보를 위해 사용할 예정
(5) 덧붙임
노코드 툴에 대한 관심이 국내에서도 많이 늘어났어요. 이유는 여러 가지가 있지만, ‘검증’에 필요한 시간과 비용을 줄여준다는 점에서 제게는 더 매력적으로 다가오는 분야입니다. ‘Uizard’는 2018년 12월 ‘지금 써보러 갑니다’를 통해 소개한 적 있어요. 당시에는 베타 서비스 신청을 받고 있는 단계였는데, 2년 반이 지난 지금 훨씬 고도화되고 많은 사람들이 사용하는 툴이 되었습니다. 베타 서비스에 참여하면서 가장 재미있었던 건, 노트에 간단하게 스케치한 내용을 디지털화해준다는 점이었어요. 보통 디자인은 기획이 끝난 뒤 여러 내용을 복합적으로 묶어 시각적으로 표현하게 되는데요. 이런 과정 없이 여러 테마에 맞춰 내가 스케치한 내용을 구체화해주니 검증을 위한 다음 단계로 훨씬 빠르게 진입한다는 생각이 들었습니다.
이들이 내미는 카피도 재미있어요. 디자인의 민주화, 디자인의 미래, 누구에게나 좋은 아이디어가 나올 수 있다 등. 자신들이 왜 이런 서비스를 만들었는지 유사한 내용을 서비스 소개 내용에서 꾸준히 강조하고 있기 때문입니다. 호주의 캔바도 같은 맥락에서 바라볼 수 있는 서비스인데요. 그동안 시각디자인 영역에서는 캔바로 시작해 다양한 툴이 나왔지만, 화면 설계와 협업에 있어서는 스케치, 피그마 등 화면 제작에 초점이 맞춰진 툴이 더 많았기에 ‘Uizard’의 방향과 지금까지의 과정이 더 새롭게 다가왔습니다.
–
2.스케치, 피그마로 작업한 디자인을 리액트 등의 코드로 생성해주는 : Anima
(1) 서비스 소개
피그마, XD, 스케치 등으로 작업한 화면(디자인)을 코드로 변환해주는 서비스입니다. 디자인된 화면 내 구성 요소를 하나씩 코드로 변환하기 위해서는 초기 많은 시간을 투자할 수밖에 없는데요. ‘Anima’는 React, Vue.js, HTML, CSS 등을 지원, 자동으로 코드를 만들어 줍니다.
(2) 해결하고자 하는 문제
- 디자인 요소를 코드로 변환하는데 필요한 평균 시간이 오래 소요됨
- 디자이너와 개발자, 제품 관리자 등이 아이디어가 구현되는데 있어 설명하는데 많은 시간을 투자해야 함
- 와이어프레임, 디자인, 코딩 등의 과정 대신 아이디어를 검증할 수 있는 프로토타입에 더 집중할 수 있는 환경을 만들고자 함
- 구현 방식 등에 대한 논의 시간을 줄이고, 실제 제품과 같은 환경에서 업무를 진행할 수 있는 기회를 제공하고자 함
- 디자이너와 개발자 어느 한쪽에 집중한 것이 아니라 양쪽 모두에게 도움이 될 수 있는 기능에 집중
(3) 문제 해결을 위한 노력
- 디자이너, 개발자들이 자주 활용하는 툴과 언어를 지원 (피그마, 스케치, XD, GitHub / React, Vue.js, HTML, CSS)
- 디자인된 화면을 통해 협업을 하는 것이 아니라, 코드로 변환된 후 함께 살펴볼 수 있는 환경 제공
- 애니메이션, 제스처, 트랜지션 등이 적용된 기능 중심의 프로토타입을 쉽게 구현할 수 있도록 도와줌
- 컴포넌트, 스타일 가이드 제공과 더불어 언어와 레이아웃 등을 지정해 코드를 활용할 수 있는 환경을 제공해줌
(4) 현재까지의 성과 및 앞으로의 계획
- 2017년 시작, 2018년 여름 Y Combinator 배치
- 2020 10월 기준 300,000명의 사용자, 2021년 현재 600,000명 이상의 회원 보유
- 2021년 09월 1,000만 달러 시리즈A 투자 유치
- 무료 사용자의 5%가 유료 전환, 유료 전환 후 1-2개월 내 사용자 확장
(5) 덧붙임
조직 규모나 성격에 따라 다를 수 있지만, 제가 창업과 여러 스타트업을 통해 경험한 업무 과정은 대부분 비슷했어요. 기획 – 디자인 – 개발 등으로 이어지는 과정에서 말이죠. 문제는 각 과정이 유기적으로 연결되기 보다 끊기는 경우가 더 많다는 점이에요. 각각의 ‘관점’에서 결과물 보고, 피드백을 제공하며, 수정 사항이 생기기 때문입니다. ‘검증’을 위한 과정에 더 초점이 맞춰지면 좋겠지만, 실제 프로토타입이 나오기까지 꽤 많은 커뮤니케이션 과정을 거칠 수 밖에 없었어요. 물론 여기에는 우리가 사용하는 ‘툴’의 한계도 분명 존재합니다. 예를 들어 피그마로는 화면이 어떻게 구성되는지 시각적으로 확인하고 기본 동작과 흐름을 볼 순 있지만 실제 어떻게 ‘작동’하는지는 보기 어려워요. 이런 요구사항을 다시 코드로 생성해야 하는 개발자들이 초기에 많은 시간을 투자해야 하는 이유이기도 합니다. 그 과정에서 수정사항이 발생한다면 기존에 작성한 기능 정의 등을 담당자가 다시 수정하며 같은 과정을 반복해야 하는 일도 생기고요.
이런 맥락에서 계속 등장하는 개념이 노코드 입니다. 물론 개발자를 대체할 순 없다고 생각해요. 다만 ‘검증’과 ‘구체화’의 과정에서 더 효율적인 과정을 만들어 낼 수 있음은 분명합니다. 같은 아이디어 임에도 들어가는 시간과 비용을 아끼며 검증할 수 있다면 사실 이 방법을 선택하지 않을 이유는 없다고 생각합니다. 우리에게 아직 익숙하지 않을 방법일 뿐! ‘Anima’는 결국 검증을 위한 프로토타입에 팀이 집중할 수 있는 환경을 만들어줬기 때문에 지금과 같은 성과를 얻을 수 있었다고 생각해요. 기획하고, 디자인하고, 실제 제품에 가까운 프로토타입을 만들기까지 과정을 상당부분 줄여줄 뿐만 아니라, 실제 활용할 수 있는 코드로 만들어주니 그 이후에 더 많은 시간을 투자할 수 있도록 도와주기 때문입니다. 앞뒤로 들어가는 시간을 줄여, 다른 곳에 더 집중할 수 있도록 해주는 것. 그게 600,000명 이상의 사람들이 이 툴을 선택한 이유가 아닐까 싶네요.
첫 번째로 소개한 ‘Uizard’와 함께 유기적으로 사용할 수 있다고 생각해보면, 종이에 그린 스케치를 원하는 스타일의 디지털 디자인으로 생성한 뒤 이를 ‘Anima’를 활용해 실제 작동가능한 수준의 프로토타입으로 만들어 검증할 수 있게 됩니다.
–
3.팀원이 더 빠르게 업무에 적응할 수 있는 온보딩 제작 툴 : Tango
(1) 서비스 소개
확장 프로그램 등을 통해 서비스 화면 중 일부를 스크린샷으로 제작, 필요한 설명을 작성, 순서를 정하는 등의 과정을 통해 쉽고 빠르게 온보딩 프로그램을 제작할 수 있도록 도와주는 서비스입니다. 문서를 매 번 업데이트 하거나 스크린샷을 제작하고 첨부, 설명을 입력하는 등 시간이 많이 소요되는 작업을 빠르게 할 수 있도록 도와주는 역할을 하고 있어요.
(2) 해결하고자 하는 문제
- 코로나로 인해 원격(재택 등) 업무를 하는 회사가 늘어남
- 신규 입사자를 대면으로 교육하기 어려운 환경이 됨
- 제품, 세일즈 기타 팀들에서 업무를 위해 초기 익혀야 할 교육(기술)자료를 제작하기 어려움
- 신규 입사자 또는 사용자에게 전달할 기술문서나 FAQ 문서 관련, 스크린샷 제작, 설명 입력, 단계 표기 등 하나씩 따로 입력해 문서로 제작해야 하는 불편함
- 팀에 따라 강조해야 하는 내용이 모두 달라 하나의 문서로 제작, 공유하기 어려움
(3) 문제 해결을 위한 노력
- 하나의 문서를 만들기 위한 시간과 부담을 줄이고, 서비스 화면을 바탕으로 온보딩 프로그램을 쉽게 제작할 수 있는 환경 마련
- 신규 입사자 온보딩, 팀을 위한 정보 정리, 사용자 또는 파트너를 위한 교육 등 다양한 목적에 따라 활용 가능한 환경 마련
- 브라우저 또는 모바일앱을 통해 단계 별 서비스 화면 캡쳐, 설명 입력, 편집 가능
- 단계 별 화면 및 설명 추가, 놓친 단계 확인 가능
- 완성된 내용은 PDF, 링크, 임베드 등의 방법으로 공유 및 활용 가능
(4) 현재까지의 성과 및 앞으로의 계획
- 2021년 08월 570만 달러 투자 유치
- 공식 웹사이트를 통해 서비스 오픈 신청 받는 중
- 일부 사용자에 한해 크롬 확장 프로그램으로 사용 가능 (신청 후)
(5) 덧붙임
저 역시 풀타임 재택근무를 시작한지 10개월이 되어가고 있어요. 주4 근무에, 10개월 째 재택을 하고 있으니 순간 방심하면 제 업무는 물론 함께 일하는 팀원에게 피해를 끼칠 수 밖에 없는 상황이기도 해요. 팀 전체가 재택 근무를 하고 있어 업무 자체는 이제 꽤 익숙해졌지만 신규 입사자가 있는 경우, 필요한 정보를 전달하는 건 쉽게 익숙해지지 않았습니다. 컨플루언스에 필요한 링크를 하나로 묶고, 단계별로 확인해야할 내용을 설명처럼 덧붙여 문서를 계속 업데이트 하고 있지만 각 문서에서 어떤 내용을 중점적으로 봐야 하는지, 문서 간 연관성은 어떤지 등을 문서 하나로 표현하는 건 쉽지 않기 때문입니다. 정리한 내용을 체화하는데 필요한 시간을 산정하는 것 역시 쉽지 않았어요. 가끔은, 기존에 제작한 문서와 별개로 일회성의 문서를 서비스 스크린샷, 설명 등을 포함해 만들어야 하는 상황이 생기기도 하고요.
이런 상황에서 ‘Tango’를 알게 되었는데요. 물론 아직 서비스를 모두에게 공개하지 않아 직접 써볼 순 없었지만, 테스트 과정이나 웹사이트, 뉴스 등을 통해 전달된 내용을 보니 제 기준으로만 봐도 필요 자료를 만드는데 많은 시간을 단축할 수 있을거란 생각이 들었습니다. 만들어낼 수 있는 결과물도 다양해요. 신규 입사자를 위한 문서는 물론, 사용자를 위한 온보딩이나 자주 묻는 질문에 대한 시각적인 답을 만들 수 있기 때문이에요. 이들이 특정 ‘결과’를 만드는데 초점을 맞춘게 아니라 ‘어떻게’, ‘쉽게’ 만들 수 있는지에 초점을 맞춰 가능한 일이기도 합니다. 브라우저라면 확장 프로그램을 통해 서비스 내 필요한 영역을 스크린샷으로 저장, 설명을 작성하는 것으로 워크플로 등을 생성할 수 있기 때문이에요.
–
함께 읽어보세요!
