[Product Hunt 런칭] 싱클리 (yc W23)

안녕하세요

, 싱클리 (syncly.kr)의 대표를 맡고 있는 이동희입니다.

싱클리는 다양한 채널에서 오는 고객 피드백을 분석하여, 고객경험을 저해하는 제품적/운영적/서비스적 gap 을 빠르게 분석해주고, 어떤 고객이 위험한지까지 분석해주는 B2B SaaS인데요. 23년 겨울에 Y Combinator를 졸업하고 현재 미국과 한국에서 열심히 고객과 만나며 서비스를 운영하고 있습니다.

저희가 Product Hunt에 오늘 런칭을 했는데, 현재 1시간 반 정도 남은 현재 아직 1위입니다만, 2위와의 격차가 10여표차 밖에 나지 않는 박빙이네요!

링크를 보시고 괜찮은 제품인 것 같다면 Upvote를 통해 응원해주시면 정말 큰 힘이 될것 같습니다.🙇 저희도 디스콰이엇 커뮤니티에 많은 도움이 될수 있도록 좋은 경험 많이 공유하겠습니다!

Sendbird 김동신 대표에게 듣는 B2B SaaS 업체가 제품주도성장을 위해 갖춰야 할 조건들

안녕하세요 B2B SaaS 디바인을 만들고 있는 딥블루닷 이동희 입니다.

저희 엔젤투자자이자 Advisor 이신 Sendbird 김동신 대표를 최근에 만나뵙고 미국 B2B SaaS 에 대한 얘기와 제품 주도성장 (Product-Led Growth) 관련된 얘기를 들었고, 관련 내용 공유드리고자 블로그 작성하게 되었습니다.

많은 스타트업 종사자 분들께 도움이 되었음 좋겠습니다 :) 아래 링크를 클릭하시면 전문을 보실 수 있습니다.

블로그링크: https://www.devign.app/ko/post/b2b-saas-plg-sendbird

---------

9/15일 디바인 업데이트 (feat. 폴더관리 및 공유)

* 베타 두달 후, 디바인 사용 관련 업데이트: 현재 베타 시작한지 두달 지난 시점 기준, 미국 핀테크 A사 (나스닥 상장사)에서 제품 스쿼드내 업무 공식툴로 사용하기 시작하였습니다. 아래 슬랙에서 더 자세한 소식 확인하실 수 있습니다.

• 슬랙 조인하기: https://join.slack.com/t/deep-bluedot/shared_invite/zt-1bkod8s8i-YvjAKPD2WLfleWUnXp04JQ
• 디바인 무료로 사용하기: https://www.devign.app

매번 적극적인 VoC 감사드리며, 팀에서 디바인을 통해 생성한 Document를 자유롭게 그룹핑하고 공유할 수 있는 기능을 강화하였습니다.

[이번 업데이트 사항]

팀 내 리포트를 공유하거나 관리하시기 더 쉽도록, 섹션 공유 기능 추가, 페이지 저장 및 이동시키는 동선 개선 등의 업데이트가 이뤄졌습니다.

[상세 내용]

-페이지 저장 시 섹션 지정 가능

• 익스텐션에서 페이지를 저장할 때, 원하는 섹션에 바로 저장하실 수 있습니다.

-섹션 링크 공유 가능

• 한 섹션에 있는 여러 페이지를 한 번에 공유하실 수 있습니다. 공유 링크를 클릭하면 “Shared with me”에 섹션 전체가 공유되고, 업데이트 사항은 자동으로 반영이 됩니다.

-섹션 생성 및 삭제 기능

• 페이지를 클릭하면 상단에 섹션 생성, 섹션 이동, 페이지 삭제 액션 버튼이 활성화됩니다. (삭제 단축키 : Delete)

-페이지의 섹션 원클릭&드래그 이동

• 페이지를 다른 섹션으로 이동시키려면, 페이지 선택 후 상단의 “Move Pages to”를 클릭하시거나, 드래그로도 간편하게 이동시킬 수 있습니다.

-페이지 내 썸네일 뷰 추가

• 페이지가 포함된 섹션의 다른 페이지들이 오른쪽 사이드 바에서 썸네일로 제공됩니다. 클릭 시 해당 페이지로 바로 이동하실 수 있습니다.앞으로도 업무 효율화에 도움이 되는 제품이 되도록 노력하겠습니다. VoC는 언제든 편하게 댓글, DM 등 편하신 방법으로 전달해주시면 적극 반영하도록 하겠습니다.

감사합니다.

8/26일 디바인 업데이트 (feat. 콘솔로그 / 네트워크 로그: 개발자가 이슈를 더 빠르게 해결하도록 도와주는 정보를 자동으로 공유하기)

* 베타 한달 후, 디바인 생산성 증가 측정 업데이트: 디바인은 현재 미국과 한국의 Tech Enterprise 및 스타트업에서 실제 업무에 활발히 사용중이며, 베타 시작한지 한달 지난 현재 시점 기준, 개발 프로세스 생산성 관점에서 최대 4배 이상 증가하는 효용을 검증하였습니다. 아래 슬랙에서 더 자세한 소식 확인하실 수 있습니다.

• 슬랙 조인하기: https://join.slack.com/t/deep-bluedot/shared_invite/zt-1bkod8s8i-YvjAKPD2WLfleWUnXp04JQ
• 디바인 무료로 사용하기: https://www.devign.app

오늘도 Major 업데이트 드리게 되었습니다. 매번 적극적인 VoC 감사드리며, 디자이너/PM과 개발자 간의 생산성을 최대화 할 수 있는 기능을 이번에 추가하게 되었습니다.

신규 기능

• 개발자가 이슈 해결 시 필요한 콘솔로그와 네트워크로그 (HAR) 정보를 일반코멘트 및 영상코멘트와 함께 첨부하여 보낼 수 있습니다. (이미지 1-3)
• 콘솔로그와 네트워크로그는 개발자가 버그를 수정할 때 유용하게 쓰이는 정보로, 이슈 해결 협업과정의 생산성을 크게 높여줄 수 있습니다.
• 워크스페이스의 List view가 추가되었습니다. 공유한 이슈가 1) 지라 티켓으로 생성 되었는지 확인 가능하고 2) 진행상황을 한눈에 쉽게 볼 수 있습니다. (이미지 4)

개선 사항

• 스크린샷 및 워크스페이스 에서 페이지 로딩속도가 2배 이상 개선 되었습니다. 생산성 툴의 본질이 속도인 만큼, 저희 제품 자체의 생산성도 계속 높여나가겠습니다.
• 슬랙 알람에 작성하신 첫번째 커멘트 타이틀 정보도 포함되서, 어떤 내용을 공유하였는지 미리 확인 가능합니다.
• 영상 커멘트 전송 시 타이틀이 작성한 시간 기준으로 자동으로 작성됩니다. (수정도 물론 가능합니다.)
• 코멘트 작성한 날짜를 n-days (n-week) ago 에서, 구체적인 날짜 (MM-DD-YYYY)로 표기되게 변경하였습니다.

 버그 Fix

• 작성한 커멘트가 긴 경우, 워크스페이스에서 확인 할 때 스크린샷 보는 부분에서 커멘트 내용이 잘리던 이슈가 있었습니다. 해당 내용 Fix 하였습니다. 

콘솔로그와 네트워크로그 수집 가이드

(1) 일반코멘트 : Console & HAR 토글을 “On” 설정 시 수집됩니다.

     Step 1. 디바인 확장 프로그램에 Console & HAR 토글을 “On”으로 변경해주세요.

     Step 2. 화면에서 마우스로 클릭하면서 UX 및 기능 검수를 진행하세요.

     Step 3. 이슈를 발견하면 필요한 코멘트를 남기고 Report 하세요.

     *동작 중간에 토글을 “Off”로 변경하면 이전 로그는 삭제됩니다.

(2) 영상코멘트 : 추가 액션 없이 자동으로 로그가 저장됩니다.

(3) 저장된 로그 정보는 페이지의 <Developer Tools> 탭에서 확인하실 수 있습니다.

디바인은 제품개발 생산성을 극대화 하겠다는 제품 본질을 잊지 않고 계속 발전해 나가겠습니다. 많은 피드백 부탁드리며, 적극적인 사용에 감사드려요!

8/11일 업데이트 (feat. 지라 Integration 고도화)

* 베타 한달 후, 디바인 생산성 증가 측정 업데이트: 디바인은 현재 미국과 한국의 Tech Enterprise 및 스타트업에서 실제 업무에 활발히 사용중이며, 베타 시작한지 한달 지난 현재 시점 기준, 개발 프로세스 생산성 관점에서 최대 4배 이상 증가하는 효용을 검증하였습니다. 아래 슬랙에서 더 자세한 소식 확인하실 수 있습니다.

• 슬랙 조인하기: https://join.slack.com/t/deep-bluedot/shared_invite/zt-1bkod8s8i-YvjAKPD2WLfleWUnXp04JQ
• 디바인 무료로 사용하기: https://www.devign.app

안녕하세요, 디바인을 만들고 있는 팀입니다. 오늘은 Major 업데이트 드리게 되었습니다.

드디어 많은 유저분들께서 요청하신 Jira와의 Integration 고도화 작업이 완료되었습니다! 디바인에서 이슈를 생성하신 후,

• 1) 새롭게 지라 티켓을 생성하시거나
• 2) 기존에 생성한 지라 티켓에 Subtask 로 이슈를 추가하실 수 있습니다.

또한, 기존에는 이슈 하나당 지라 티켓 하나가 생기는 1:1 구조 였는데, 유저분들께서 이슈의 유형에 따라 여러 이슈를 하나의 지라티켓으로 생성하고 싶다는 VoC를 반영하여,

• 3) Report Issue를 누르기 전까지 생성한 여러개 이슈는 한번에 지라티켓 하나로 생성됩니다.

Slack Integration 방식도 더 심플하게 노티에 집중하는 방식으로 변경 되었으며, 아래 Changelog 참고 부탁드립니다.[Jira Integration & Slack Integration]

• 사전 작업: 디바인 Workspace의 Setting에서 Integration 세팅 먼저 진행하시고 아래 Step 별로 따라 하시면 됩니다.

A. Jira Integration 사용 방법 (1 - 4번째 이미지)

• 익스텐션에서 “Report Issue” 버튼 아래 Select Integration 에서 “jira cloud”를 선택 후 Report 합니다.
• 지라 상세필드를 설정할 수 있는 창이 오픈되며, ‘New Issue’ 혹은 ‘Add to Existing (기존에 있는 이슈에 하위항목으로 추가)’할 수 있습니다.
• 지라에 이슈를 리포팅 할 경우, 디바인 workspace에서 지라에 추가된 것을 확인 하실 수 있습니다.
• 지라 티켓이 실패한 경우, Report Issue 버튼 위에 실패하였다는 메시지가 뜨게 됩니다.

B. Slack Integration (마지막 이미지)

• Slack 연동은 Slack의 장점인 알림 기능에 집중하기 위해, 보여주는 메시지 자체는 최대한 심플하게 변경하였습니다.
• 익스텐션에서 “Report Issue” 버튼 아래 Select Integration에서 “Slack”을 선택 후 Report 합니다.
• Notification의 목적으로 해당 리포트의 1) 이슈 개수, 2) 이슈 타입, 3) Reporter 가 노출됩니다.

디바인은 제품 Creator 분들께서 관리를 위한 관리가 아닌, 제품개발 협업 생산성을 높여드릴 수 있는 효용에 집중하고 있습니다. 따라서, 현재 사용중인 Jira, Slack 등과 어떻게 하면 더 Seamless하게 사용하실 수 있을 지 많은 피드백 부탁드립니다.

8월 2일 디바인 업데이트 사항 (Feat. 인간-컴퓨터 상호작용)

안녕하세요, 디바인을 만드는 팀입니다 :)

이번 업데이트는 몇몇 유저분들을 찾아뵈면서, 디바인을 사용하시는 동선을 저희가 옆에서 관찰하였고, 이 과정에서 발생하는 번거로움 및 불편함들을 풀어보려고 하였습니다.

워크스페이스에는 1) 최근에 방문한 페이지와 2) 나의 계정정보를 확인하는 기능이 추가되었으며

크롬 익스텐션에는 1) 코멘트가 자동 저장되는 기능과 2) 영상 코멘트에 표기법에 따른 텍스트 하이라이트 기능이 추가되었습니다.

Recently Viewed 페이지 추가 (이미지 1)

• 내가 공유받은 페이지가 어디 있는지 찾기 어려워서, 별도로 링크를 저장해 놓으신 분들이 계셨습니다. 이제 공유받았던 URL을 찾아서 헤매지 않으셔도 됩니다!
• 이전에 URL 공유받은 페이지를 쉽게 재방문하실 수 있도록 Recently Viewed 페이지에는 내가 방문한 모든 페이지의 리스트가 최근 방문 시간 순서대로 나열되어 있습니다.
• 페이지 타이틀, 최근에 본 시간, 제작자를 보고 빠르게 방문하고자하는 페이지를 찾아볼 수 있습니다.
• 각 페이지의 이슈 진행상태를 확인할 수 있습니다.

계정 정보 확인 (이미지 2)

• 워크스페이스에서 회원가입한 계정을 확인할 수 있습니다.
• 워크스페이스에서 프로필 이미지 버튼을 누르면 회원가입에 사용된 이메일과 이름을 볼 수 있습니다.

Comment Auto-save 기능 (이미지 3)

• 코멘트를 작성하다가 실수로 코멘트 밖의 다른 곳을 누르면 내용이 사라져 다시 입력해야 하는 모습을 관찰할 수 있었는데요. 이제는, 자동으로 코멘트가 저장되어 실수로 다른 곳을 눌러도 기존에 작성하던 커멘트 내용을 불러오실 수 있습니다.

영상 코멘트 텍스트 하이라이트 표기법 (이미지 4)

• Title: text1의 경우, 콜론 (:) 뒤의 text1이 노란색으로 하이라이트 됩니다.
• Title: text1 -> text2 의 경우, 화살표 (->) 뒤의 text2가 빨간색으로 하이라이트 됩니다.

생산성 툴로서 디바인은, 필요한 기능 추가 뿐 아니라, 제품을 개발하시는 유저분들의 디테일한 행동방식 하나까지 가장 편리하게 만들어드리는 툴이 되겠습니다.

제품 개발자 인터뷰 모집 (디바인팀)

[생산성에 관심있으신 개발자 인터뷰이 모집합니다]

안녕하세요, 제품개발 생산성툴 Devign을 만들고 있는 팀입니다.

저희 팀은 제품기획-디자인-개발 과정의 생산성을 어떻게 하면 최대화 할 수 있을지 고민하고 해결하려는 사람들이 모였는데요. 저희처럼 제품 개발 생산성 향상에 고민이 있으신 개발자 분들이 현재 어떤 방식으로 업무 하시는 지 말씀 나눠보고 싶습니다! 

참여해주시는 모든 분들께 감사의 의미로 5만원 상당의 기프티콘을 드리고자 합니다. 🙂

경력 3년 이상의 #FE개발자 #BE개발자 분들 중 PM, 디자이너, 세일즈/마케팅 등과 협업하여 제품/서비스 개발 업무를 하고 계신 분들께 일하고 계시는 방식 및 전반적인 협업과정, (있다면)개선점 등에 대해 여쭤보고자, 인터뷰이를 모집하고 있습니다!

아래 링크에서 신청해주시면 감사하겠습니다. 

• https://forms.gle/HPp9V29BGPjC8duE9

*디바인 서비스는 이 페이지를 참고해주세요 : http://www.devign.app/

[Devign] 7월 25일 업데이트 내용 (feat. 상태관리)

*슬랙에서 스쿼드 팀의 업무생산성, 개발 생산성에 관심많은 핫한 스타트업들의 PM, PD 및 프론트앤드 개발자 등과 소통해요! 디바인에 대한 소식도 가장 먼저 들으실 수 있습니다.

https://join.slack.com/t/deep-bluedot/shared_invite/zt-1bkod8s8i-YvjAKPD2WLfleWUnXp04JQ

안녕하세요 디바인팀입니다. 이번 Update는 유저분들께서 가장 많이 요청하신 기능 들인,

• 1) 스크린샷 이후에도 같은 페이지에 코멘트를 추가할 수 있는 기능
• 2) 코멘트 상태 관리 (진행중 / 완료) 기능 을 진행하였습니다. 관리를 위한 관리 대신 디바인을 통해 실제 우리가 일하는 생산성을 높이는 데 필수적으로 필요한 상태관리만 진행하여, 생산성을 극대화 하실 수 있습니다.

코멘트 추가 기능

• Feature 1: 페이지 내 코멘트 추가 (이미지 1)
• 이미 제작된 페이지에 하단의 코멘트 아이콘 버튼을 눌러 (Feedback, style, spacing) 코멘트를 추가할 수 있게 되었습니다.
• Feature 2: 코멘트 수정 (이미지 2)
• 수정하고자 하는 해당 코멘트의 Edit 버튼을 누르면 타이틀과 본문 내용을 수정할 수 있게 되었습니다.

코멘트 상태 관리

• Feature3: 코멘트 상태 관리 (이미지 3)
• 좌측 코멘트 리스트에서 코멘트의 상태를 To Do, In Progress, Done 으로 표기 가능하게 되었습니다.
• 전체 코멘트 개수와 각 상태의 코멘트 개수 또한 확인할 수 있습니다.
• Feature 4. 워크스페이스 홈화면에서 섹션별 Done 처리 코멘트 진행상황 확인 (이미지 4)
• 섹션에 포함된 페이지 개수와 섹션 내에서 Done 처리된 코멘트의 개수를 볼 수 있습니다.

디바인은 앞으로도 제품을 만드는 스크럼팀 분들의 Day-to-day 생산성을 높이는 방향으로 계속 발전할 예정입니다. 

[Devign] 7월 18일 업데이트 내용 (feat. 영상 Footprint)

지난 번 디바인에 추가한 레코딩 방식 이슈 리포팅 기능을 굉장히 많은 유저분들이 사용해 주시고 계신데요. 사용 후 많은 피드백 주셔서 감사드립니다. 피드백에 기반하여 더 편하게 사용하실 수 있도록, 아래와 같이 업데이트를 진행하였습니다!

• 1) 영상 내 설명을 작성한 위치로 바로 갈 수 있는 "타임스탬프 기능"과
• 2) 레코딩 하면서 진행한 유저 스텝을 각 액션별로 자동 추출해 주는 "영상 플로우 자동생성 (Footprint) 기능" 을 추가하였습니다.
• 3) 또한, 디바인 크롬 익스텐션이 작업화면을 덜 가릴 수 있도록 "익스텐션 최소화 UI 업데이트" 를 진행하였습니다.

[레코딩 기반 커멘트] 간편한 영상 플로우 자동생성 (이미지 1): 정확한 영상 내용 공유를 위해, 영상 시간과 이동 동선에 대해 추가로 설명을 적으신다는 유저분들의 피드백을 반영하였습니다

• 업데이트 사항
• m:ss 형태로 커멘트를 작성하면, 해당 영상 위치로 바로 갈 수 있는 타임스탬프가 생성됩니다.
• ex) 0:15
• 영상을 찍는 동안의 액션과 각 액션의 타임스탬프가 자동으로 완성 됩니다.
• 액션 시간 - 액션 (Click, Type 등) - 액션이 취해진 곳의 <tag name> - 액션이 취해진 곳의 텍스트 순서로 노출됩니다.
• ex) 0:02 Click <p> About Us

[크롬 Extension] 최소화로 더 심플하게, 핵심기능은 더 명확하게 (이미지 2-3)

• 업데이트 사항
• 최소화 버전에서는 아이콘과 툴팁으로 기능들에 대해 이해할 수 있도록 하였습니다.
• 우측의 Minimize 아이콘과 Maximize 아이콘을 통해 최소화 버전과 최대화 버전을 사용하실 수 있습니다.

새로운 기능 한번 확인해 보시고, 저희가 업무 생산성을 더 높일 수 있는 개선 사항이 있다면 언제든 말씀주세요. 감사합니다!

[이미지 1]

[이미지 2]

[이미지 3]

[Devign] 7월 11일 업데이트 내용 (feat. 영상커멘트)

저희가 올해 초부터 베타 테스트를 진행하면서, QA 기간 뿐 아니라 개발 중 (스프린트 기간 중) 에도 이슈 확인 및 공유 업무의 생산성을 높여줄 수 있는 기능에 대한 VoC를 많이 들었습니다.

특히, 1) 기능 이슈 혹은 2) Interaction UI 관련 이슈를 팀내 공유할 때, 레코딩을 통해 공유하는 경우가 많은데, 더 빠르게 이슈 맥락과 내용 및 환경을 공유하고 싶은 니즈를 확인하였습니다.두가지에 대한 이슈 리포팅을 편리하게 하기 위하여, 레코딩 방식의 커멘트 기능이 업데이트 되었고, 워크스페이스도 고도화되었습니다.

[크롬 Extension] 레코딩 방식 커멘트 기능 추가: 크롬 "현재 탭" 녹화 가능

• 특징
• 영상을 찍는 과정에서, 클릭을 하는 액션이 잘 보일 수 있는 Ripple action (클릭한 부분에 자동으로 빨간색 동그라미가 생겨 하이라이트 되는 기능)을 추가하여, 더 명확하게 Flow를 전달할 수 있습니다.
• 기존 커멘트와 동일하게, 영상이 레코딩된 환경 정보를 자동으로 전달 할 수 있습니다.
• 사용방법
• 디바인 익스텐션에서 Recording 버튼을 누르면, 해당 크롬 탭의 녹화가 시작됩니다. 좌측 하단의 Finish recording 버튼을 눌러서 영상을 기록한 후, 내용을 작성하여 디바인 워크스페이스로 보낼 수 있습니다.
• 우측 상단에 Copy Dashboard URL을 버튼을 통해 팀원들에게 해당 영상을 공유할 수 있습니다.
• 하단에 영상에 대한 댓글을 통해 팀원들과 서로 피드백을 주고 받을 수 있습니다.
• 참고사항
• 최대 1분까지 녹화 가능합니다.
• 기존에 리스트를 쌓아서 공유하는 일반 커멘트와 달리, 영상 커멘트의 경우 우선 하나씩 공유 하게 설정되어 있습니다.

[워크스페이스] 영상 vs 코멘트 Sorting 기능 추가

• 영상과 코멘트를 필터링 할 수 있는 Sorting 기능 및 페이지를 분리하여 볼 수 있는 아이콘이 추가되었습니다.

[워크스페이스] 섹션 그룹핑 기능 추가

• 디바인 워크스페이스에서, 간단한 드래깅 액션을 통해 여러 페이지를 선택하여 섹션을 나눌 수 있는 기능이 추가되었습니다.
• 원하는 페이지를 선택 후 마우스 우측버튼을 눌러 새로운 섹션을 만들 수 있습니다.

[Extension UI 변동사항] 커멘트 리스트뷰 제외

• 유저 사용성을 극대화하기 위해, 크롬 익스텐션은 핵심 기능 중심으로 작고 강력하게 발전할 예정입니다.
• 해당 방향성 하에서, 작성한 커멘트 내용을 리스트로 볼 수 있던 UI는 이번 업데이트를 통해 제외하게 되었습니다. 다만, 기존과 같이 "Report Issues" 버튼의 숫자를 통해, 현재 몇개 커멘트를 페이지에 작성했는 지는 동일하게 확인 가능합니다.

[Devign] 6월 24일 업데이트 내용 (feat. 반응형)

반응형 관련하여 좋은 피드백들을 많이 주시고 계신데요. 금번 업데이트는 반응형에 집중하여 1) 반응형으로 사이즈 전환이 쉽게, 2) 모바일, 태블릿 사이즈에 맞춰 디바인 (Devign) 이 화면을 가리지 않게 개선하여 업데이트 진행하였습니다.

[반응형] 웹 사이즈 조절기능

• 유저분들께서 정확한 사이즈의 화면을 확인하실 수 있도록, 웹 사이즈 조절 기능을 추가하였습니다.

1. Responsive: 원하는 width와 height을 지정하여 웹의 사이즈로 맞춰서 화면을 확인할 수 있습니다.
2. Desktop, Tablet, Phone (500px width): 기본적으로 사용하는 기기의 사이즈를 preset으로 지정했습니다.
3. 제약: 너무나 아쉽게도 크롬에서 허용하지 않아, 디바인에서 모바일 기기 사이즈 (500px 미만)로 바로 제공드릴 수가 없습니다. 모바일 기기 사이즈를 체크하시려면, 크롬의 개발자 도구 (Inspect)를 통해 진행 부탁드리며, 개발자 도구 모드에서도 디바인을 사용하실 수 있습니다.

[반응형] 작은 기기 사이즈를 위한 디자인

• 작은 기기 사이즈의 디자인을 확인하는 경우, 디바인이 화면을 가려 불편하셨던 점을 개선했습니다.

1. 웹 사이즈가 600px width 이하로 작아지면, 디바인이 로고만 남습니다.
2. 로고를 클릭하면 원하는 이슈 리포팅을 할 수 있도록 기능들이 펼쳐집니다.

[대시보드] New Report 기능 추가 (첨부 네번째 이미지)

• 디바인 워크스페이스에서 바로 원하는 웹사이트로 이동하여 디바인을 사용하실 수 있는 기능을 추가하였습니다.

1. 대시보드 우측 상단에 "New Report" 파란색 버튼이 추가되었습니다.
2. 버튼을 누르면, 현재 켜져있는 모든 탭에서 원하는 사이트를 선택하여 바로 디바인을 사용할 수 있습니다.

사용하시면서 필요한 기능이 있으시면, 언제든 댓글이나 저에게 요청주세요!

매일매일 발전하는 디바인이 되겠습니다!

Why We Make Devign

“제품을 만드는 사람들을 위한 제품"을 만들고 싶다.

우리 팀이 디바인을 만들고 있는 이유이며, 우리 팀이 연쇄창업을 한 이유이다. 수아랩이라는 인공지능 스타트업의 공동창업자/CTO 및 초기멤버 출신인, 나와 공동창업자 두 명은 엑싯 후 2년이 지난 작년 말 딥블루닷 이라는 이름의 새로운 스타트업을 창업하게 되었다. 수아랩에서 같이 제품 (본 글에서는 웹, 앱 등 소프트웨어 제품을 의미)을 만들면서 Product-Market Fit (PMF)를 찾기 위해 밤을 새가며 결국에는 2년 반만에 PMF를 찾아내었던 순간은 스타트업을 하면서 가장 짜릿했던 순간이었다. 이 과정에서 정말 열심히 만들었는데 기술이 부족해서, 고객의 니즈를 잘못 파악해서, 고객의 지불의사 (Willingness to pay)가 없어서 등의 이유로 중도 실패한 제품이 한다발이다.

이러한 어려움을 겪으면서, 나와 우리 Founding team은 제품을 만드는 모든 사람들에 대한 깊은 존경심을 가지고 있다. 제품을 기획하고, 디자인하고, 개발하고, 테스트하고, 가설을 바꿔가며 결국에는 고객의 선택을 받아내는 여정을 쉽게 얘기하는 사람들도 있지만 정말 대단한 일이라고 생각한다. 수아랩이 2019년 당시 역대 최대규모로 해외기업에 엑싯할 수 있었던 배경 역시 운도 많이 따름과 동시에 시장에서 원하는 제품을 만들어 냈기 때문이었다.

때마침 내가 수아랩 엑싯 후 미국에 체류하며 유학과 실리콘밸리 회사에서 일했던 경험을 쌓은 2년 동안은 Product-Led Growth (제품주도 성장)가 다시 각광받는 시기였다. 과거 Jira, Dropbox, Grammarly 부터 Slack, Calendly, Superhuman, Notion, DocSend 등을 거치면서 빛을 발하기 시작한 제품주도 성장은, 이를 도와줄 제품을 만드는 다양한 스타트업을 탄생시키는 등 그 생태계가 급속도로 확대하고 있는 모습이었다.

이전 스타트업에서 제품을 가장 가까이서 같이 만들던 나와 공동창업자들은, 제품을 만들기 위해 위대한 여정을 하고 있는 PM, 프로덕트 디자이너, 개발자 등이 더 좋은 제품을 만들 수 있도록 도와주는 제품을 만들 수 있다면 정말 가치 있는 일이라고 생각하였다. “제품을 만드는 사람들을 위한 제품"이라는 비전 하에,

• 글로벌하게 임팩트를 낼 수 있는 제품이 되도록, 초기 가설검증부터 글로벌 시장을 동시에 진행한다.
• 우리 팀이 이전 스타트업에서 잘 활용하였던 딥러닝/컴퓨터 비전 기술이, 우리 팀의 비전을 달성하는데 활용될 수 있다면 더욱 좋다.

라는 방향성으로 디바인을 만들기 시작하였다.

디바인을 만들기 시작한 이유

제품을 만드는 과정에서 항상 필연적으로 따라다니는 요소는 바로 버그 (혹은 이슈) 이다. 좋은 제품들이 시장에 많이 출시 되면서 고객들이 제품에 대해 가지는 눈높이는 갈수록 올라가고 있다. 사용자 경험이라는 포괄적 개념 하에 고객의 Pain을 풀어주는 것은 물론 디자인, 제품 안정성, 직관적인 유저 Flow 등이 유기적으로 갖추어 져야 좋은 제품의 조건이 성립된다. 이러한 고객 눈높이를 맞추기 위해, 출시 전 제품을 만드는 팀 내에서 제품이 기획/디자인 의도대로 개발 되었는지, 제품 완성도가 높게 달성되었는지 체크하기 위해 이슈 혹은 버그 리포팅을 활발히 진행한다.

다만 우리의 경험과 미국, 한국의 다양한 프로덕트 디자이너, PM, 및 개발자 등과 인터뷰를 해보았을 때 이러한 버그리포팅 작업은 반복적이고 비효율적인 프로세스가 많아서, 정작 제품을 만드는 사람들이 더 중요한 일에 깊게 몰입할 수 있게 하는데 걸림돌이 되는 경우가 많았다. 이러한 버그리포팅 프로세스를 세분화 해보면 아래와 같다.

• 기획서, 디자인 파일 등과 개발 아웃풋이 어느 부분이 차이가 나는지 하나씩 눈으로 찾고 확인
• 기획의도 혹은 디자인과 차이나는 부분을 하나씩 그려서 표시하거나 레코딩 하는 작업
• 기획서 혹은 디자인 파일을 이슈 있는 부분의 개발화면 스크린샷과 같이 일일히 첨부하는 작업
• 어떤 식으로 고쳐야 하는지 Jira, 노션 등에 수정 가이드 작성. 필요할땐 크롬 개발자 도구 등을 켜서, 개발자의 언어로 수정 가이드를 작성
• 위와 같은 작업을 다시 반복

이러한 버그리포팅에 사용되는 데이터는 개발화면, 디자인 파일 등인데, 데이터의 속성이 우리 팀이 많이 경험한 이미지 데이터이기 때문에, 이를 활용하여 디자인과 개발화면간의 차이 비교를 자동으로 수행해주는 알고리즘을 개발하여 MVP (최소기능제품)을 개발해보기로 하였다.

디바인 제품 검증 과정: 자동화 툴에서 협업툴 (Feat. 자동화)로 발전해 나가다.

디바인은 “제품을 만드는 사람들을 위한 제품" 이라는 비전에 기반해 검증 과정은 Bottom-up 방식으로 진행되었다. Facebook, 디스코드 등 커뮤니티에 계신 프로덕트 디자이너, PM, 프론트엔드 개발자 등의 피드백을 받아가면서, 그분들의 업무방식을 더 깊게 이해하고 제품에 반영하려고 하였다.

세번의 변화를 거쳐 현재의 디바인 베타버전은 아래와 같은 세가지 주요 기능으로 구성되어 있다.

• 디자인과 개발 간의 CSS 차이 자동 체크: 디자인 파일과 웹페이지/웹프로덕트 간의 CSS 차이점 자동 분석 및 수정가이드 제공
• One-click 버그리포팅: 웹사이트/웹프로덕트에서 번거로운 스크린샷 필요 없이 바로 버그리포팅을 할 수 있는 기능
• Integration: 슬랙, Jira 등에 결과 공유

올해 초부터 유저가 디바인 MVP를 실제로 사용하며 베타 테스트를 진행하면서, 우리가 기획서와 제품 디자인만 가지고 유저 리서치와 인터뷰를 했을때는 미처 알지 못했던 많은 러닝이 있었다. B2B SaaS 제품은 기본적으로 기존에 업무하던 프로세스와 툴에 굉장히 Seamless 하게 적용되어야 하다 보니 디자인 프로토타입으로는 제품 효용성 검증이 쉽지 않았다. 실제 MVP 출시 후 디바인 베타테스트를 진행하면서 알게된 점은 아래와 같다.

• 디자인/기획과 개발 간의 버그리포팅 관련하여, 자동으로 디자인과 개발 간의 차이점을 찾아주는 것도 중요하지만, 더 중요한 것은 개발자와 디자이너 및 PM이 이슈에 대해 빠르고 쉽게 협업하고 논의할 수록 도와주는 점이라는 것이었다. MVP 출시 전 인터뷰를 했을 때는 유저들이 자동으로 디자인과 개발 간의 차이를 찾아주는 점에 관심을 많이 가졌으나, 제품을 테스트할수록 유저들은 이슈 관련 협업을 더 빠르고 효율적으로 기록하고 공유 할 수 있는 방법에 더 관심이 있었다. 따라서, 디바인 역시 MVP때는 디자인과 개발간의 UI 적인 요소만 자동으로 비교분석 해주는 자동화 툴 개념이었으나, 현재는 UX 및 유저 Path에서 나오는 이슈, 기능적 이슈까지 포괄할 수 있는 이슈리포팅 협업 툴로 개념이 발전하게 되었다.

[디바인 MVP 제품 모습]

• 자동화 툴의 경우 ‘자동화 해야 할 기능'과 ‘자동화 하지 말아야 할 기능'을 명확히 구분해야 하는 점이 무엇보다 중요하다는 점을 인식하게 되었다. 디바인 MVP는 UI상의 모든 차이점을 자동으로 찾아주는 제품이었다 (CSS, 마진/패딩, 오탈자 등). 다만,
• 마진/패딩의 경우 유저마다 어느 부분을 중요하게 보는지 기준이 많이 다르기 때문에 하나의 기준으로 자동화를 할 경우, 유저가 중요하다고 생각하지 않는 부분도 이슈라고 인식하는 문제가 있었고,
• 기본적으로 디자인에 더미데이터가 들어간 부분은, 개발 아웃풋과 차이가 많이 날 수 밖에 없었다.
• 때문에 정확하게 자동화 할 수 있는 CSS, 그중에서도 맨 처음에는 정확도가 높은 폰트 관련된 모든 요소를 자동 체크하는 기능으로 시작하기로 결정하였다.
• 유저 Flow가 최대한 짧고 간결해야 한다는 점을 느꼈다. B2B SaaS는 업무 효율화를 해주는 제품인 만큼 사용이 직관적이고, 원하는 결과를 얻기까지 스텝이 너무 길면 오히려 제품이 업무 효율을 저하시키게 된다. 디바인 MVP 역시, 디자인 파일을 불러오기 위해서는 피그마에서, 개발화면을 불러오기 위해선 크롬에서, 결과값은 데스크탑 앱에서 보아야 했기 때문에, 고객이 원하는 결과를 보기까지의 Step 이 10 Step 이상 되었다. 이번 Beta에는, 3 Step 전후로 유저 Flow가 마무리 될 수 있도록 제품을 개선하였다.
• MVP의 제품 안정성에 대한 유저들의 기준이 굉장히 높아졌다. 유저들은 갈수록 많은 제품들에 노출되고, 이에 따라 제품에 대한 기준도 굉장히 높아졌다. 이전 스타트업에서 제품을 만들던 2016년만 하더라도 B2B 대상 스타트업이 여전히 초창기였기 때문에, 기능만으로도 어느정도 소구 할 수 있었지만, 최근에는 MVP도 완성도가 높지 않으면 유저 참여율 및 리텐션을 담보하기가 정말 어려워졌다는 점을 느꼈다. 이번 베타 기간 동안에는, 완성도 있는 제품이라는 인식을 유저가 가질 수 있도록 이전 MVP보다 훨씬 더 다양한 시나리오에 대해 완성도를 높이는 작업을 진행하였다.
• 기존 툴과의 Integration 이 중요하다는 점을 다시 한번 알 수 있었다. 회사들은 이미 업무할 때 사용하는 주요 툴 들이 존재하고, 새로운 툴을 추가 하는 것이 유저 입장에서나 회사 입장에서 쉬운 일은 아니었다. 처음에는 우리 제품 내에서 고객들이 더 많은 시간 활동해 주길 원했지만, 기존의 고객 업무 Flow를 존중하는 것이 무엇보다 중요하다고 생각하여 이번 베타에는 우리 제품에서 작업한 내용을 Slack이나 Jira에 Integration 해주는 기능을 우선적으로 개발하였다.

다르게 하면 좋았을 것들

전반적으로 우리팀이 고객 중심의 마인드셋을 강하게 탑재하고, 제품적 효용을 증대시키는 방향으로 잘 달려가고 있다고 생각한다. 돌이켜봤을 때, 지금까지의 과정 중에서 아래와 같은 점을 좀 다르게 했으면 더 좋았을 것 같다.

• 첫 MVP를 좀 더 가볍게 출시했을 것 같다. 기획 및 MVP 개발까지 3개월 정도 소요됬었는데,
• 데스크탑 앱 형태가 아닌 가능한 기존 협업툴의 플러그인 형태로 기획 및 개발하고,
• 제품에 대한 피드백을 MVP때 최대한 반영하려고 했었으나, 오히려 코어 기능을 집중해서 개발했다면 더 일관된 방향성 하에서 고객 피드백을 더 빠르게 받을 수 있었을 것 같다.
• 엘도라도를 찾아야 겠다는 생각을 덜 했었으면 좋았을 것 같다. 어떤 문제가 중요하고 큰 문제인지 찾는 노력을 소홀이 해야 한다는 말이 아니다. 이쪽이 더 큰 시장이 아닐까, 저쪽에는 더 큰 시장이 있지 않을까 막연하게 생각했던 시간들은 결론적으로 별다른 도움이 되질 않았다. 제품을 만들어 가면서 가장 도움이 되었던 점은 다른 성공한 스타트업을 리서치 했던 점보다, 고객과 얘기하면서 끊임없이 우리가 생각했던 문제와 관련된 인접 영역에 대해 열어놓고 기회를 찾으려고 노력했던 부분이다.

우리는 제품을 만드는 사람들은 크리에이터이자 과학자이자 아티스트의 속성을 모두 가진 사람이라고 생각한다. 우리는 그들을 위한 제품을 만들고 싶고, 디바인은 제품을 만드는 사람들이 본질적 업무에 집중할 수 있도록 도와주는 제품으로 계속 발전하려고 한다. 좋은 제품을 만드는 사람들과 팀이 찬란하게 빛날 수 있도록 뒤에서 서포트 하여, 새로운 제품들이 기존의 관습을 이겨내고 더 많은 가치를 사회에 창출하는데 일조하고 싶다. 제품을 만드는 모든 사람들을 진심으로 존경하고 응원하며, 디바인이 이러한 여정을 도와주는 도구가 될 수 있기를 희망한다.

*디바인에 대한 설치와 데모영상은 디바인 홈페이지 (https://www.devign.app) 에서 보실 수 있습니다.

*저희 비전에 함께 초기부터 동참하고 싶으신 분들은 언제든 저 (joseph@deepbluedot.io)에게 연락주세요.