[두둥] 모두를 위한 공연 라이프 - 기획과 디자인

1. 배경

고스락에서 공연을 해오면서 티켓 예매방식에 불편함을 느꼈다. 컴퓨터공학과 학회답게, 작년 3월부터 매 공연마다 고스락 내부 인원들로 예매서비스를 직접 개발해 사용했다. 500명이 넘는 인원이 우리 서비스를 실사용했던 경험이었다.

맨 처음 고스락 티켓을 기획하면서, 우리가 어떤 점이 불편했고 어떤 방식으로 해결하려 했는지에 대해서 기록했었다.

 

https://www.9yujin.site/devlog/gosrock1/idea-220124

작년 3월 첫번째 프로젝트에선 가장 기본적인 기능으로 서비스를 했다. 전화번호와 이름을 별개로 입력받아 문자 인증을 통해 유저를 받았다. 코로나로 인해 최대 입장 가능 인원 제한이 있어 107명의 관객이 이 서비스를 통해 고스락 공연에 와주었다. QR코드 입장 확인과 어드민 서비스에서 예매 승인 등의 대표적인 기능이 공연 당일까지 성공적으로 사용됐고, 충분히 검증되었다고 생각한다.

 

https://www.9yujin.site/devlog/gosrock2/idea-220810

작년 9월에는 첫번째 프로젝트에서 아쉬웠던 점과 공연 기획이 달라진 점을 반영해 새로운 예매 서비스를 개발했다. 공연을 이틀에 나눠서 하게 되었고, 한명이 에매할 수 있는 티켓 매수의 제한도 사라졌다. 이에 맞춰서 공연 예매 플로우와 마이페이지(예매내역) 등의 기능을 추가했다. 사용자의 재방문을 유도하는 방법을 고민하다가 응원톡이라는 새로운 기능을 도입했던 프로젝트이기도 하다. 응원톡에 남긴 관객 들 중 추첨해 선물을 주는 이벤트를 열기도 했고, 총 380명이 이 서비스를 이용해 티켓을 예매했다.

 

이렇게 두차례 예매서비스를 개발하고 운영하면서 많은 피드백을 받았다. 그리고 대학생 밴드 동아리 공연을 위한 예매 플랫폼 서비스가 없다는걸 알게 되었다. 매년 이맘때쯤 되면 에브리타임 게시판에 학교 내 모든 공연 동아리들의 홍보글이 올라온다. 보통 구글폼을 이용해 예매를 하도록 한다. 폼에서 직접 전화번호와 이름을 받고, 설명에는 적어둔 계좌번호로 입금해달라는 글을 적어둔다. 고스락 뿐만 아니라 많은 동아리 밴드들이 같은 불편함을 겪고 있었다! 어쩌면 당연한 얘기.

 

매 공연마다 사람들을 모아서 프로젝트를 진행하기도 어려운 상황이었다. 새로운 기술을 도입하고, 새로운 기획이 추가된다 하더라도 어차피 비슷한 서비스이기 때문에 비효율적이기도 하다. 주축이 되는 친구들이 졸업하고 나면 더 이상 유지하기 어렵다는 문제도 있었다.

 

그래서 저번 학기가 끝나자마자 누구나 지속적으로 사용할 수 있는 서비스를 기획하고 개발하기 시작했다. 두둥은 공연등록 및 소개, 티켓예매, QR코드를 통한 입장확인과 정산을 할 수 있는 서비스이다. 고스락 뿐만 아니라 수많은 공연 동아리들이 편하게 사용할 수 있는 서비스를 목표로 하고 있다.

 

---

 

2. 기획

사용자는 인터파크 티켓이나 예스24와 같이 다양한 공연이 올라오고 다양한 티켓을 구매할 수 있다. 관리자는 다양한 공연과 티켓을 생성하고 등록하고 판매할 수 있다. 그리고 판매된 티켓들을 관리하고 통계를 볼 수 있다. 기존의 서비스를 플랫폼으로 확장했다고 생각하면 쉽다.

 

볼륨이 배로 커진만큼 필요한 기능들을 IA와 같이 구조화해봤다. 개발을 하면서도 많이 바뀌어서 이 이미지와는 달라진 점이 조금 있을 수 있다. 이전보다 어드민 기능이 중요해졌다. 오히려 어드민이 메인이라 봐도 무방할 정도. 실제로 개발기간도 어드민에 더 많이 할애했던 것 같다.

 

 

 

곧바로 디자인 작업 우선으로 들어갔다. 이전보다 뷰가 두배 이상으로 많아졌다. 디자인하는게 너무 힘들었다. 뷰 디자인을 뽑는건 크게 문제가 되지 않았지만, 여러 케이스마다 다른 화면들을 다 만들어내는게 스트레스였다. 얼른 끝내고 개발해야하는데 이런 부분에 시간을 쓰는게 답답했음. 2-3주 정도는 피그마에 상주하면서 작업했다.

 

메인 컬러는 보라색. 테마는 라이트 모드. 이전까지는 다크모드 팔레트를 썼는데, 어두운 배경에 은근 색을 쓰기 힘들더라. 보라색을 쓴 이유는… 그냥 보라색을 좋아해서. 처음엔 파스텔 느낌의 라일락 색을 사용했다. 디자인을 뽑으면서 보니 색들이 다 밋밋하고 채도가 낮은 듯 했다. 마켓 컬리 느낌을 생각하며 더 진한 보라색으로 팔레트를 수정했다. 결과적으로 나쁘지 않은 것 같음.

 

 

디자인 단계에서부터 개발을 고려하며 작업했다. 컴포넌트 단위로 개발하기에 최대한 재활용이 가능하고 prop으로 다루기 수월하길 원했다. 피그마에서 디자인할 때부터 component varient와 auto layout을 적극적으로 사용했다. 실제로 개발된 컴포넌트의 구조도 피그마에서 디자인한 레이어 구조와 거의 동일하다. 후반에 디자인이 많이 수정되면서 조금 의미가 퇴색된 점은 아쉽지만 정말 큰 의미가 있었다. 다음 프로젝트에서는 더 나아질거라 자신할 수 있다!! 스토리북

 

뷰들이 모두 나온 뒤엔 플로우를 정리했다. 이렇게 구성해놓고 보니 만드는 서비스에 이해도가 높아져 더 개발하기 수월했던 것 같다. 기획이 조금씩 복잡해지면서 이렇게 시각화해서 보는게 중요하다. 특히 발급된 티켓과, 옵션, 주문 사이의 관계가 복잡해져서 머리가 아팠던 기억이 있다.

 

---

 

3. 디자인

‘동아리 공연’ 이라는 도메인으로 지난 두번의 프로젝트를 하면서 많은 경험과 소소한 데이터들을 얻었다. 덕분에 밴드 동아리에서 불편해 하는게 무엇인지, 필요로 하는 기능은 무엇인지에 대해 잘 알게 되었다.

 

옵션

새내기에게는 티켓을 무료로 주며 동아리를 홍보하는게 일반적이다. 추가로 학번을 입력받아 검증을 하거나 소모임 신청을 받는 경우도 있다. 이럴 때 티켓에 옵션을 달아 입력할 수 있도록 했다. 옵션은 주관식 또는 예/아니오 문항을 선택해 생성할 수 있다. 예/아니오 문항에는 ‘예’를 선택했을 때 결제금액을 추가할 수 있다. 뒷풀이 희망자에게 예약비를 미리 받을 때를 상상하고 추가한 기획이다.

 

공연 상세 페이지에서 예매하기를 클릭하면 티켓의 종류와 매수를 선택하는 오버레이가 나타난다. 선택해야 할 옵션이 있는 경우에는 ‘옵션 선택하기’ 페이지로 넘어간다. 티켓을 여러장 구매할 때 모든 티켓마다 옵션을 일일히 선택해야 한다. 티켓마다 옵션들을 다 펼치면 스크롤이 너무 길어질 것 같아 아코디언으로 접을 수 있게 했다. 모든 티켓을 똑같은 옵션으로 선택하는 경우가 많을 것 같아 한번에 옵션을 적용하는 토글 버튼도 넣어주었다. 경우마다 api 요청 형식에 맞게 객체 값 바꾸는거에서 고생 좀 했다. 눈물의 스프레드 연산자 파티. 구현 다 하고 나서야 immer 의 존재가 생각났다. 에라이.

 

 

어드민에서는 드래그 앤 드롭으로 티켓에 옵션을 적용한다. 매우 직관적인 UX. 취소할 때도 빈 곳에 드롭하면 취소됨. beautiful-dnd 라이브러리를 처음 이용해봤는데, 꽤 편하다. 처음 개발을 공부할 때는 이벤트리스너로 직접 드래그앤 드롭을 구현했었다. 그래서 그런지 라이브러리를 처음 사용할 때 이해가 한결 쉬웠던 것 같다.

 

주문

‘옵션 선택하기’에서 모든 옵션에 응답을 입력하고 다음 버튼을 누르면 주문하기 화면이 나온다. 모든 옵션의 응답이 똑같은 티켓은 하나의 주문정보(orderLine)으로 묶인다. 만약 3개의 티켓을 샀을 때 그 중 2개의 응답이 같고 1개의 응답이 다르다면, 하나의 주문(order)에 2개의 주문정보(orderLine)이 들어가는 것. 배달의 민족에서 여러개의 음식을 시켰을 때 옵션이 똑같으면 같은 주문에 수량이 추가되는 것과 비슷한 정책이다.

 

예매 내역에선 위와 같이 보이게 된다. 하나의 주문에 여러 주문정보(orderLine)이 있다면 좌우로 슬라이드해서 넘겨본다. 아코디언을 열어 옵션에 작성한 응답들을 다시 확인할 수 있다. 유료 옵션을 선택했다면 얼마의 가격이 붙었는지 태그를 통해 알려준다.

 

모바일 티켓

하지만 모바일 티켓은 주문정보를 모두 펼쳐 하나의 리스트로 보여준다. 위의 경우라면 2개의 주문정보이지만 3개의 티켓을 한번에 나타내는 것. QR코드를 찍고 입장하는 페이지이기 때문에, 옵션과 주문정보는 별로 중요하지 않은 정보이다. 내가 구매한 티켓이 몇장이 있고, QR코드 티켓의 상태가 무엇인지가 더 중요하다.

 

이전 버전과 크게 다른 점은 없다. 그만큼 검증된 UI라는 뜻!

 

새 프로젝트를 할 때마다 느끼는건, 디자인도 하다보면 는다.

 

---

 

하루빨리 개발에 들어가야 하는데 디자인에 시간을 쏟고 있는게 문득 아쉬웠다. 또 더이상 고스락 만의 프로젝트가 아니라 모두가 이용할 수 있는 플랫폼으로 확장하고 있기 때문에, 서비스의 확실한 브랜딩이 필요하다고 느꼈다. 그 부분을 도와줄 디자이너를 위부에서 구해오기로 했다. 지인의 지인으로 알음알음 소개받아 두 분을 데려왔다. 우리학교 산디과. 막 졸업하셨는데, 작년에 산디과 졸업프로젝트 웹사이트 디자인을 맡아서 했다고 한다.

 

처음에 부탁드릴땐 랜딩페이지와 브랜딩 위주의 작업을 하기로 되어 있었다. 하지만 하다보니까 어드민 페이지 쪽 작업도 추가로 해주셨다. 디자인을 하다보면 상대적으로 어드민 쪽에는 힘을 빼게 된다. 나도 근본은 개발자다 보니 어드민에는 거의 신경을 쓰지 않게 되더라. 부탁을 드렸고, 감사하게도 흔쾌히 도와주셨다. 덕분에 디자인 쪽에 신경을 크게 쓰지 않고 개발에 전념할 수 있게 되었다.

 

어드민

어드민에서 주요 페이지 몇개를 캡쳐해왔다. 누구나 호스트를 생성할 수 있고, 어느 호스트나 공연을 등록할 수 있다. 개발은 둘째치고 정책들을 다지느라 기획 쪽에서부터 고생했던 것 같다.

 

이메일로 호스트에 회원들을 초대할 수 있고, 티켓 주문 시에 슬랙으로 알림을 받을 수 도 있다. 구매자들이 옵션에 작성한 응답들도 예매자 관리에서 정리된 화면으로 볼 수 있다. 공연 관리에서는 현재 티켓 주문과 입장 현황을 대시보드에서 확인할 수 있고, 공연 상세 내용 같은 정보들을 등록하고 수정한다. 티켓과 옵션 관리 화며 더 위에 있는 움짤에.

 

단순하게 보라색 계열로만 깔려있던 팔레트에 민트색이 들어갔다. 색 조합도 이쁘고 깔끔해져서 좋다. 두둥의 로고와 캐릭터도 생겼다. 확실히 전공자만 할 수 있는 무언가가 있다는 걸 느꼈다.

 

---

 

이 정도 볼륨의 기획으로 프로젝트를 했던건 처음이었다. 그래서 기획부터 탄탄히 가져가려고 노력했음에도 중간중간에 부족한 점이 많이 있었다. 일회성으로 사용되는 서비스가 아닌 장기적인 플랫폼을 목표로 하다보니 더욱 그런듯. 

 

대학교를 떠나기 전에 최대한 많은 흔적을 남기고 가고 싶다. 몇년 뒤에도 내가 만들어놓은 것들을 계속 사용하는 모습을 기대하며 일하고 있다. 고등학교 때 열심히 일했던 과학실험 동아리에서, 내가 졸업한지 3년 뒤에도 내가 만든 포스터를 그대로 사용하는걸 보고 한동안 혼자 뿌듯해 했던 기억이 있다. 고스락에선 나 때에 처음 만들어놓은 카카오 채널과 유튜브가 지금도 잘 유지되고 있다.

 

10년 뒤에도 두둥을 사용하는 고스락을 상상하면서! 다음 글로는 두둥을 개발하면서 했던 기술적인 고민들을 가져와보겠다.