[티켓 예매 프로젝트] 1. 어떻게 시작하게 되었나 / 기획, 디자인

학과 밴드 동아리를 하고 있다. 그래도 명색이 컴퓨터공학과 동아리인데, 결과물 하나정도는 있어야지.

 

 

---

 

0. 프로젝트의 시작은 이렇다.

평소 공연이었다면 티켓을 종이 명함으로 제작해 친구들에게 두세개씩 강매했겠지만 이번에는 다른 방법을 생각해야 했다. 직장생활 하시는 선배님들도 많이 오시기 때문에 티켓을 직접 판매하기가 힘들었다.
​
고민끝에 생각한 것은 카카오톡 채널 기능에 있는 쿠폰이었다. 고스락 채널 채팅방에서 바로 송금을 할 수 있도록 했다. 카카오톡 qr송금에서 만들어주는 qr 송금코드를 url로 바꾸어 버튼에 링크를 걸어주었다.
​
송금이 되면 채팅방을 통해 쿠폰을 보내주고, 현장에서 그 쿠폰을 보여주면 팜플렛과 티켓으로 교환해주고 입장을 시켜준다.

 

 

문제가 두개 있었다.
​
하나는, 상대방과 카카오톡 채널의 채팅 기록이 없으면 쿠폰을 보내 줄 수 없다는 것이었다. 이 부분은 어쩔 수 없이 입금자가 직접 채팅을 보내주면 확인 후 직접 쿠폰을 발송해주는 것으로 해결했다.
​
다른 하나는, 티켓을 두 매 이상 사는 경우에 발생했다. 같은 쿠폰을 같은 사람에게 여러번 전송할 수 없다는 것이었다. 이 문제는 고민을 쫌 많이 하다가 야매의 방법을 생각해냈다.

 

 

바로 두개짜리 세개짜리 티켓을 따로 만드는것. 완전 씽크빅 돋는다. 프로페셔널한 공연기획이었다면 상상도 못할거다. 동아리라 다행이다..! 다음 공연 때는 어떻게 하면 좋을지 더 완벽한 해결 방안을 생각해봐야겠다.

아ㅋㅋ 지금 생각해도 웃기네

여기까지가 2019년 9월 상상마당 공연을 준비하면서 일상블로그에 기록했던 내용이다.

 

그리고 군대를 갔다 왔다. 우리에게 딱 맞는 공연 티켓 예매 서비스를 만들어보기로 했다.

 

---

 

1. 기획

피그마를 거의 처음 써봤는데 꽤 편하다. 프로토타입 기능이 꽤 재밌다. 나중에는 이 프로토타입만으로도 앱을 자동으로 빌드해주는 서비스가 나오지 않을까. 협업하는데도 재밌었다. 다른 사람들이 현재 어디를 보고 있는지 커서가 따라다닌다. 내가 모르는 다른 유용한 기능들이 많이 있을텐데 다음엔 좀 더 제대로 써봐야겠다.

 

프론트 페이지

관리자 페이지

프로젝트의 기본적인 흐름이다. 총 3가지로 나누어서 진행하고 있다. 프론트 페이지, 관리자 페이지, 안드로이드 앱.

• 전화번호로 본인 인증을 하고 티켓 매수, 입금자명을 적어 제출하면 우선 티켓을 발급해준다. 큐알코드는 몽고DB에 저장된 각 티켓 도큐먼트들의 objectID로 생성해서 보여준다. 
• 후에 관리자가 직접 입금을 확인하고 티켓의 상태를 바꾸어서 티켓을 활성화할 수 있다. 
• 입장 시에는 (준영형이 담당하고 있는) 안드로이드 앱으로 QR코드를 찍고 그 안에 저장된 objectID를 서버로 전송한다. 서버에선 해당 티켓의 입금 상태를 확인하고 문제가 없을 시 입장 완료 처리를 한다. 관리자 페이지에서 관련된 통계를 확인할 수 있도록 한다. 

 

기존에 있는 멜론티켓이나 인터파크와는 성격이 좀 다르다. 좌석이나 입장순서를 정할 필요도 없고 인원수도 제한되어 있지 않다. 매진은 커녕 학기초에 신입생 친구들에게 열심히 공연 홍보하고 다녔던 기억이... 그렇기 때문에 티켓 예매는 매우 친절한 과정으로 진행이 되어야했다. 티켓 하나 사는게 조금이라도 귀찮으면 아무도 안올걸? 흐름대로 버튼 몇개 누르다보면 나도 모르게 예매가 완료되는 경험을 만들어주고 싶었다.

 

---

 

2. 디자인

 

메인 페이지

페이지에 처음으로 들어오면 마주하는 랜딩페이지이다.스토리텔링을 주절주절 넣을 예정이다.

 

우리는 이런 동아리에요! 이번에 공연을 한답니다.

코로나때문에 몇번씩이나 공연이 미뤄져서 이번에 하는 공연은 몇년만에 하는거에요.

그러니까 와주세요!! 이미 몇명이 예매를 했답니다. 그럼 이제 예매하러 갈까요ㅎㅎ

 

뭐, 이런 느낌쓰. 이 화면은 아직 시작 안했다. 21학번 친구가 공연 포스터를 완성하고 나면 포스터 컨셉에 맞춰서 그 때 디자인하는게 맞다고 생각했다. 전체적으로 검정색 배경에 보라색을 포인트 컬러로 쓰기로 말은 했다. 사람들이 맨 처음 보는 페이지이기 때문에 열심히 만들어야 할듯. 맨 밑으로 스크롤하면 티켓 예매하기 버튼과 예매한 티켓 바로가기 버튼이 있다.

 

 

티켓 예매 대문

메인 페이지에서 아래의 두 버튼을 누르면 나오는 페이지들. 이미 한번 인증을 한 상태이면 이 페이지는 넘어가고 곧바로 티켓 예매 또는 티켓 확인 페이지로 이동한다.

 

 

인증

로그인하는 과정은 따로 넣지 않았다. 로그인하려면 회원가입도 해야되고.. 이러면 공연을 누가 오나! 간단히 휴대전화 문자인증을 사용했다. 한번만 인증해두면 jwt를 저장해놓고 그 이후로는 인증과정을 거치지 않아도 된다.

 

휴대폰 번호를 입력받아서 서버로 전송하면 서버에서는 그 번호로 인증번호를 발송한다. 네이버 클라우드 플랫폼의 문자 발송 API를 이용한다. 인증번호 받기를 누르면 응답으로 토큰을 받는다. 토큰은 3분을 기한으로 잡고 발급된다. 

 

 

티켓 구매

인증이 완료되면 이 페이지로 이동된다. 티켓 수량을 입력하고, 입금자명을 입력한다. 입금을 웹사이트 상에서 직접 받을 수 없다. PG사 연동을 하려면 사업자 등록증이 필요하단다. 직접 입금을 한 후에 다시 웹으로 돌아와서 다음으로 넘어가는 방식이다. 음. 맘에 안든다. 입금자명까지 입력하고 티켓 발급하기 버튼을 누르면 서버로 전송되고, DB에 등록이 된다. 

 

카카오 송금하기 링크는 꼭 필요하다고 생각해서 넣었지만 좀 애매한 느낌이 있다. 카카오톡 앱에서 송금을 완료하고 나서 다시 웹으로 돌아왔을 때 똑같은 화면이면 헷갈릴 것 같다. 저 버튼을 한번 누르면 비활성화를 시켜주든, 뭐 그런 방법들을 생각해봐야겠다.

 

(수정) 직접 다른 앱으로 이동해서 송금할때 계좌번호를 외워서 직접 타이핑하기 불편할 것 같았다. 계좌번호를 복사하는 버튼을 추가했다. 토스트 창이 잠깐 올라와서 계좌 복사가 완료되었음을 알려준다. 사용자 입장에서 어떤 것이 편할지 계속 고민하고 보완해나가는게 사소하지만 엄청 중요하다고 느꼈다.

 

 

티켓

티켓 구매를 완료하면 내가 산 티켓들의 목록을 볼 수 있다. 기존에 카카오톡 채널에서 사용한 쿠폰과는 다르게 여러개의 티켓을 개별적으로 확인할 수 있다. 티켓을 친구에게 공유할 수도 있다. 해당 페이지의 링크를 클립보드에 복사해줄 생각.

 

각 티켓은 4가지의 상태를 가진다. 입금 확인, 입금 확인중, 미입금 처리, 입장 완료. 디폴트는 입금 확인중이다. 총무가 입금확인을 하면 관리자페이지에서 직접 해당 티켓의 상태를 입금 확인으로 바꾸어주어야 한다. 티켓이 발급됐지만 오랬동안 입금이 되지 않았을때는 미입금 처리를 해준다. 

 

입금 확인이 된 티켓에는 QR코드 주위에 초록색으로 테두리를 만들었다. 카카오나 네이버의 QR 체크인을 보고 좋은 것 같아서 따왔다. 저 QR코드는 공연장에서 입장할 때 사용한다. 안드로이드 앱에서 저 코드를 찍어서 서버로 전송한 후에 해당 티켓을 입장 완료 처리한다. 

 

티켓 디자인은 고민을 정말 많이 했다. 핀터레스트도 계속 뒤져보고 이리해보고 저리해보고.. 보여주고 싶은 정보는 많았는데 꼭 필요한 것들만 이쁘게 보여주는게 어려운 부분이었다. 그 결과 나름 깔끔하게 뽑힌 것 같다. 나름 만족쓰.

 

---

 

디자인이 완성된 건 아니고 아마 개발하면서 중간중간에 계속 바뀔 것 같긴하다. 이게 생각보다 너무 어렵다. 평소에 포스터나 소개페이지를 만들 때는 그냥 이쁘게만 만들면 됐었는데, UI 디자인은 이쁜거 외에도 생각할게 엄청 많다. 마진값 정하는것부터 각기 다른 기기의 해상도에 다 어울리도록 생각하는 것도 어렵다. 리액트 프론트 구현까지 생각하면서 디자인하려니까 더 어렵다. 괜히 디자이너가 따로 있는게 아니구나.