디스콰이엇이 오프라인에서 메이커 네트워크를 만드는 법

디스콰이엇의 미션은 ‘메이커들을 연결하여 세상에 영감을 주는 프로덕트가 더 많아지게 하는 것' 입니다. 디스콰이엇은 온라인 소셜 네트워킹 서비스를 만들고 있습니다만, 오프라인에서 눈을 마주치고 대화하는 것은 온라인과는 또 다른 친밀감을 제공하죠. 그것이 저희가 오프라인 네트워킹을 여는 이유입니다. 저희 팀은 메이커들이 인사이트를 주고받는 방식, 친밀감을 쌓는 방식, 메이커 문화를 만드는 것에 호기심이 많고, 이런 네트워킹 모임을 통해 배워나가는 중입니다.

저는 디스콰이엇 팀에서 커뮤니티 빌딩을 맡고 있습니다. 사람들을 연결하는 Connector 역할을 가지고 있죠. 동시에 저는 광적인 Maker 이기도 합니다. 초등학교 때는 악보 작성 프로그램으로 음악을 만들어 친구들에게 들려줬고, 포토샵과 영상 편집을 배워서 비디오 아트랍시고 온갖 이상한 동영상들을 많이 만들어서 페이스북에 올렸어요. 디자인과 공학을 동시에 전공한 대학교 시절에는 IoT 프로젝트의 기획, 데이터 분석과 서버 애플리케이션을 맡았습니다. 코로나 데이터를 크롤링해와서 몇가지 가설을 세우고 그래프를 그려봤는데, 분석 결과가 궁금해서 밤에도 잠이 안 오는 신기한 시간들을 보냈습니다.

디스콰이엇에서 커뮤니티 운영을 하면서도 메이커 본능을 숨길 수 없는 것 같아요. 제가 하는 만드는 행사들을 프로덕트 관점으로 바라보고 있습니다. 커뮤니티 이벤트의 UX는 어떤지, 참가자들의 JTBD는 무엇인지, 참가자들의 어떤 Interaction이 일어나는지, 어떤 Action들을 하는지 관찰하고 더 좋은 경험을 위해 개선해야 할 것은 무엇인지 생각하게 되더라고요.

기획: 네트워킹 이벤트의 UX

메이커 챌린지는 자신이 만들고 있는 프로덕트나 관심있는 프로덕트에 대한 분석 메이커로그를 일주일에 1편 이상 쓰는 메이커 모임인데요, 오프라인 네트워킹 모임도 열고 있습니다. 이번 3기에는 총 4주간의 일정 중 1주차와 3주차에 열었습니다. 1주차 오프라인 네트워킹 메이커로그 보러가기 좋은 네트워킹 이벤트를 위해서는 무엇이 필요할까요?

JTBD(Jobs To Be Done, 이용자의 서비스 이용 목표): 말이 잘 통하는 새로운 사람을 만나기, 고민하고 있던 것에 대해 새로운 관점을 얻어가기

User Journey:

( 이벤트 소식 접함 ) → ( 신청 ) → ( 방문해서 참석한 사람들과 대화 나누기 + 앞으로도 연락할 상대 찾기 ) → ( 귀가 )

대부분의 네트워킹 모임에서의 사용자 여정은 위와 같습니다. 모임 설계자가 참석자의 JTBD 달성을 더 높이기 위해 어떤 요소들을 조작할 수 있을까요? 대략 아래의 것들이 있을 것 같습니다.

모임을 설계하는 사람이 조작할 수 있는 요소

참석자 정보: 참석자의 정보를 미리 알려줄 수 있다면?
어젠다: 대화 주제를 제시해준다면?
대화 상대: 만나서 대화할 상대를 매칭해준다면?

우리가 만든 User Journey:

( 이벤트 소식 접함 ) → ( 신청 ) → ( 참석자 리스트 미리 보고 대화 요청하기 ) → ( 방문해서 질문카드로 참가자 전원 대화하기 + 대화 요청 기반으로 1:1 매칭되어 대화하기 ) → ( 귀가 )

미리 참석자 리스트를 보여주고, 2) 미리 대화 요청을 할 수 있도록 하고, 3) 대화 요청 메시지와 매칭된 사람을 보여주는 방법으로 새로운 사용자 여정을 만들어 보고자 했습니다.

구현: 빠르게 그럴듯한 웹앱 만들기

저는 커뮤니티의 이벤트에 필요한 앱을 최소한의 공수를 들여서 만드는 것에 관심이 있습니다. 이번에는 네트워킹 모임을 위한 기능이 있는 앱을 최대한 간단하게 만들되 멋있어 보이게 만드는 걸 목표로 기획에 들어갔습니다.

1-기본적인 기능 기획

기본적인 기능은 미리 참석자의 프로필을 볼 수 있고, 프로필을 보고 메시지를 남길 수 있고, 내가 남긴 메시지와 받은 메시지를 볼 수 있는 것이에요. 지난번 1주차 모임 때 사용했던 앱과 비슷하지만 아래의 피드백을 받아 변경한 부분이 있습니다.

(피드백 남겨주신 메이커 분들 감사합니다!)

@송다예 Daye Song 님의 ‘꼭 대화하고 싶어요' 체크박스가 사용이 되지 않아 아쉬웠다는 의견과, 공통 질문을 가지고 다같이 얘기해보면 좋겠다는 의견을 반영하여 설계했어요.

지난번에 1:1 대화 매칭을 지어드리지 못한 건, ‘꼭 대화하고 싶어요' 체크박스 체크 개수의 제한을 두지 않았더니, 모든 분께 체크하는 분도 있고, 아예 체크하지 않은 분도 있어서 매칭이 어려웠어요. 그래서 이번에는 개수를 제한하기로 했습니다.

그런데 최대 몇 분께 체크할 수 있도록 해야할까요? 만약 8분이 오신다고 할 때, 8분이 각각 랜덤한 n분께 대화 신청을 보내면 평균 몇 개의 매칭 그룹이 지어질까요? 저는 많이 매칭된 분이 3개 정도의 매칭이 되길 원했어요. 그래서 기댓값이 3이 나오는 n 수를 찾기 시작했습니다. 노드와 노드를 연결하는 엣지의 개수.. 중학생 때 배웠던 다각형의 대각선의 개수를 찾는 공식과 순열/조합을 떠올리며 화이트보드를 채워나갔어요.

(슈퍼 개발자 괴롭히기😎)

저는 결국 전산학부 출신의 디스콰이엇 팀 개발자 @Jae Hwan Jeong 님에게 도움을 구했는데, 재환님께서 3명 정도면 괜찮을 것 같다고 말씀하셔서 그렇게 하기로 했습니다.

질문 카드가 있고, 프로필 링크가 보여지고, 최대 3명에게 ‘대화하고 싶어요!’메시지를 작성하면, 나와 매칭된 메시지가 보여지는 앱을 만들기로 했어요.

2-브랜딩

1:1 대화라는 신규 기능을 강조하기 위해 ‘Private Talk’이라는 이벤트 네이밍을 만들었어요. 그리고 앱의 메시지함에서 ‘매치된', ‘(매치되진 않았지만)보낸 메시지’, ‘받은 메시지'에 대한 심볼로 사용할 그림을 그렸습니다. 이건 제 꿀팁인데, 마우스로 그린 그림이랑 직선적인 그래픽, 고딕체를 함께 사용하면 귀여우면서 그럴듯 해 보여요!

3-데이터 Input, Processing, Output 설계하기

지난번 네트워킹 모임에서는 참가자 한분 한분마다 노션 페이지에 테이블을 따로 만들고, 그것들을 정리하고 모아서 다시 보여드리는 걸 했었는데 이 반복 작업이 시간도 많이 걸리고, 실수도 많았아요.

노션으로 만들었던 지난 모임을 위한 앱은 모임 참석자가 나머지 참석자들에게 표 안에 메시지를 쓰면, 내가 받은 메시지를 표로 보여주는 앱이었습니다. 노션의 Linked Database를 사용하면 쉬울 거라 생각했는데, Linked Database를 사용하려면 모든 메시지를 전체공개해야 하더라고요. 그래서 생각했던 것보다 노가다 작업을 많이 하게 되었습니다. 이럴거면 처음부터 SQL 쓸 걸.. 싶어서 이번에는 아예 DB를 사용하기로 했습니다.

저에게 DB에 데이터를 입력하는 Form을 직접 만드는 것은 아직 무서운 일입니다. 제가 예전에 만들었던 앱에 친구가 SQL Injection이 어떻게 일어나는지 보여줬거든요. 따옴표를 치고 텍스트를 쓰니까 제 DB의 데이터를 모두 지워버릴 수도 있더라고요😱 그리고 예외 처리 작업이 너무 힘들었던 기억이 있어서 이번에는 Google Form을 사용했어요. Google Form으로 데이터를 받고, Google Sheet에서 테이블 모양을 예쁘게 만든 뒤에 Maria DB에 수동으로 import했어요.

참석자별로 메시지가 다르게 보이는 페이지는 php로 만들었어요. SQL 쿼리를 짜서 User ID만 넣으면 각각의 참석자가 받거나 보낸 메시지가 보여지게 했습니다. 한분 한분에 대한 각기 다른 URL을 만들어서 본인의 메시지만 볼 수 있게 했어요.

4-페이지 만들기

페이지는 제가 좋아하는 Bootstrap과 CSS를 조합해서 만들었습니다. 이번에는 조금 Fancy한 무드를 주고 싶어서, 배경의 그라디언트가 천천히 변화하게 했어요. 인터넷에 올라와 있던 Three.js 코드를 살짝 고쳐서 사용했습니다.

샘플 페이지 보러가기

Bootstrap은 트위터 팀이 초창기에 개발한 UI 라이브러리에요. 사용하기도 쉽고 가볍습니다. CSS 조금만 커스텀해서 사용하면 빠르게 멋진 웹페이지를 만들 수 있습니다 :)

5-유저 테스트

제일 좋은 유저 테스트 방법은 갓 만들어진 데모 페이지 링크를 내 옆자리에 앉아있는 동료에게 보낸 뒤, 아무 설명도 하지 않고 사용해보게 하는거에요. 막힘 없이 사용하고, 특별한 의문점을 가지지 않는다면 잘 만든 겁니다! 이번 제 앱은 다행히 도언님의 테스트를 통과했어요.

결과: 네트워킹 인사이트 얻음 + 앱은 다음에도 쓸 수 있겠다!

이 앱을 사용해 네트워킹 모임을 진행하면서 아래와 같은 인사이트를 얻었어요:

애니메이션이 들어간 화면을 프로젝터로 띄워놓으면 모닥불 같은 효과가 있다. 캠프파이어 하는 것 같았다.
친구들의 모임이 아닌 네트워킹 행사에서는 뭔갈 해달라고 요청하면 다들 잘 해주신다. 모임 주최자는 그 권한을 잘 이용할 수 있어야 한다.
1:1 매칭 되게 괜찮다.
그룹을 지어드리는 게 네트워킹의 만족도를 높일 수 있다.
지금은 사전에 그룹을 미리 지어드리는 시스템인데, 참가 취소가 발생해서 매번 다시 수동으로 매칭 조합을 수정해야 했다. 1:1 토크 타임테이블 보여주는 페이지도 dynamic하게 만들자.

이 앱을 만드는 데에는 기획부터 이틀 정도 걸렸어요. 매칭을 어떻게 처리할 것인가 기획하는 과정에서 제일 많은 시간이 걸렸습니다(궁금하면 댓글로 물어봐주세요). 팀에서의 제 역할이 프로덕트 제작이 아니기 때문에, 커뮤니티 매니저로서 앱 제작에 이틀을 쏟는 것은 리소스 측면에서 부담스러운 일이에요. 그렇지만 다음에도 사용할 수 있다는 점과, 메이커 챌린지 3기 참가자 분들의 네트워킹 모임에서의 유용함, 그리고 만드는 재미😎 를 생각하면 만들길 잘 한 것 같아요! 다른 좋은 로우코드/노코드 를 이용한 사례가 있으면 알려주세요!