고스락 티켓 예매 프로젝트가 뭐냐? 이프로젝트를 진행하면서 rollup을 통한 리액트 컴포넌트 패키징 과정이나 , github action을 활용한 ci 구조등을 포스팅을 할껀데 이프로젝트가 뭔지 간략하게 설명을 해야할것같다.
고스락 티켓 예매 프로젝트
고스락 티켓 예매프로젝트의 동기는 간단하다. 총무출신인 내가 공연장 앞에서 현찰이나 입금을 받고, 팔린 티켓의 갯수, 입장 인원등을 세고 현찰을 들고 뒷풀이까지 가게되면, 공연은 정말 재밌고 행복했지만 굉장히 신경이 많이 쓰이는 날이였다.
이에 상상마당에서 진행했던 공연은 카카오톡 채널을 통해서 온라인으로 예매를 받아 진행했었지만... 우리는 컴퓨터 공학과 밴드 아닌가.. 개발자로서 가장 시급하면서도 필요한 프로덕트가 티켓 예매라고 생각했다.
작년(2021년) 7월 달부터 공고를 내 필요한 기술스택에대해 명시를 하고 , 겨울 방학 들어갈때 팀원을 모집했다. 총 12명의 팀원이 모였고 나의 역할은 전체 팀 리딩 , 배포 세팅 , 프로젝트 베이스 코드(프론트,어드민,백엔드) , 벡엔드 , 기획 이였다.
개발자로서 기획의 역할을 진행하다보니 일차적으로 우선 기술적으로 구현의 난이도에 대해 생각을 했었다. 현실적으로 학생수준 그리고 사업자 등록증이 없는 상태에서 티켓을 발급할 수 있는 구현을 해야했고, 그에 대한 고민은 티켓을 문자로 발송하고 , 프론트단에서 QR코드를 랜더링을 해 , 공연장 앞에서 티켓을 찍게 하는 플로우로 진행하게끔 결론이 났다.
고스락 티켓 예매 프로젝트는 간단하다.
티켓을 예매하는 사람의 입장에서 홈페이지를 들어와 전화번호 인증을 하고, 입금자명을 적어 제출하면, 입금 주소에 대해 안내를 받고 입금을 하든안하든 우선 티켓을 발급해준다. 그뒤에 문자 메시지로 티켓 링크를 받는다. 해당 티켓 링크로 접속하면 QR코드로 티켓의 정보를 담아 랜더링 해준다.
총무의 입장에서는 관리자페이지에서 발급된 티켓 내역과 입금자명을 비교해 티켓의 상태를 변경해준다. 티켓의 전체 목록과 , 간략한 통계를 볼수 있다. ( 아쉽게도 수동으로 입금 확인을 해줘야 한다. 크롤링으로 간편계좌 조회를 만들었지만.. 리눅스 환경에서는 안돌아가더라)
공연장 앞에서는 안드로이드 기기에서 티켓예매한 사람이 링크에들어가면 QR코드가 뜨고, 그 코드를 인식을 해 서버로 티켓상태를 확인함과 동시에 입장처리를 한다. 이때 입금이 확인이 안된 티켓은 입장이 불가 하다.
이렇듯 기술적으로 구현의 난이도가 적은 플로우로 기획을 하게 되었다.
그다음 , 모집된 팀원과의 회의를 통해 우리가 만들고자 하는것이 무엇인지 , 개요 , 목표에 대해서 명확하게 팀원들에게 전달했고, 뭐니해도 눈으로 보이는게 최고니 간략하게 플로우와 화면배치 , 컨셉등을 피그마에서 제작을 했다.
디자인의 경우,
규진이가 손을 좀 많이 봐줬고 ( 하면서 느낀거지만 디자인은 디자이너가 필요하다) , 티켓 예매, 확인 프로세스에서 웹을 앱느낌이 나게끔 기획을 진행했다. 딱딱하지 않게... 하라는대로 따라하면 어느순간 티켓이 발급되어있는 그런 느낌으로.
디자인과 기획을 진행하면서 화면 배치와, 컴포넌트화를 할려고 최대한 노력을 했고 , 같은걸 여러번 쓰는 느낌으로 기획을 많이 했다. 인풋, 다음으로 버튼등.
또한 인증이 안된 상태에서 접근했을때 HOC 가 필요한 부분이라던지. 인증이 필요한 페이지인지 아닌 페이지인지 에대한 이야기와, 액션부분에서 어떤걸 진행해줘야하는지등 개발자한테 필요한 이야기도 기획 설명단에 최대한 녹여냈다.
좀 아쉬운부분은 프로젝트사이즈가 크진않다보니깐 뎁스를 나눠 문서화가 되어야할 부분들이 피그마에 그대로 녹여놨는데.. 괜히 따로 빼기보다는 화면옆에 있는 글을 보면서 바로바로 기획에대해, 플로우에대해 확인하는게 나을것 같아서 그대로 진행했다.
가장 우선적으로 팀원전체가 만들어야 할 프로덕트에대해서 이해를 시키고, 질문을 받고. 구현 목표에대한 격차를 줄이고자 노력을 많이했었던것 같다. 결국 프로젝트가 성공적으로 끝나는건 얼마만큼의 시간투자를 하냐와, 협업을 얼마나 잘하냐인것같다.
협업을 위해 고민했던 흔적들은 다음 글들을 기대해 주시라.
간략하게 설명만 적어봤다 후기는 프로젝트가 끝나고 밑에다가 다시 적을예정.
끝으로 고스락 조직 깃허브 주소를 첨부한다.
'프로젝트' 카테고리의 다른 글
[고스락 티켓 2.0] 두번째 프로젝트는 어떻게 달라졌을까요? (4) | 2022.08.13 |
---|---|
Github labels github action으로 설정하기 (0) | 2022.08.12 |
디프만 11기 지도 위 실시간 채팅 앱 티키타카 개발기 (1) | 2022.08.11 |
aws ec2 docker log cloudwatch 에서 받아보기 (2) | 2022.02.01 |
NCP kubernetes docker desktop context 설정하기 (5) | 2022.01.24 |