문제 첫인상
부스트캠프 1주차에는 주로 자바스크립트를 이용한 코딩 구현문제로 이루어져 있었는데, 2주차로 들어오니 문제의 방향이 조금 바뀐 것 같다는 생각을 했다.
이렇게 한 이유는 JK님의 랩업세션에서 조금이나마 파악할 수 있었는데, 그저 ‘코더’가 아닌 ‘개발자’를 양성하겠다는 부스트캠프의 이념에 따라 기획된 것 같다고 생각했다.
개발자에게 필요한 것은 단순 코드를 구현하는 역량 뿐만이 아닌 주어진 문제를 해결하기 위한 방법을 설계하고 이를 검증하는 단계까지 할 수 있는 역량이다. 그런 의미에서 설계가 중심이 된 이번 문제는 보다 의미가 있다고 생각한다.
설계
컨퍼런스 등록 시스템
컨퍼런스 등록 시스템은 웹 또는 앱 시스템이다.
이 시스템을 통해 사람들은 티켓을 구매하여 폼을 제출하고, 이메일 링크를 통해 구매한 뒤 추첨하여 일부를 당첨시키는 로직이다.
이 시스템은 사람들이 컨퍼런스 티켓을 구매하는 시스템이기도 하지만, 뒤에서 관리자가 이를 조작할 수 있는 시스템 UI 또한 구성되어야 한다.
주요 절차
티켓 안내 보기 ⇒ 티켓 폼 제출 (이메일 포함) ⇒ 접수 결과 안내 이메일 발송 ⇒ 카드 또는 가상계좌로 티켓비용 결제 ⇒ 결제 완료 확인 이메일 발송 ⇒ 랜덤 선택 ⇒ 당첨자 안내 ⇒ 미당첨자는 환불 처리 후 안내
주요 절차 설계
문제에서 제시된 일련의 절차들은 모두 유저가 티켓 웹사이트에 접속하여 당첨안내를 받을 때까지의 과정의 나열이다. 관리자 또한 이러한 정보들에 접근하여 갱신 및 조회하는 기능을 설계하는 것이 조건으로 되어 있었으므로 플로우 차트를 통해 구현하면 되겠다고 생각했다.
유저플로우
- 티켓 안내 보기
- 티켓 안내문, 컨퍼런스 홍보문
- 티켓 폼 제출 (이메일 포함)
- 양식 설계
- 접수 결과 안내 이메일 발송
- 양식에서 받은 이메일로 접수 결과 발송
- 이메일 전송 → 외부 시스템 요청
- 접수와 함께 결제 링크 생성
- 양식에서 받은 이메일로 접수 결과 발송
- 카드 또는 가상계좌로 티켓비용 결제
- 티켓 비용이 결제되면 완료페이지로 이동
- 결제 시스템도 간편한 외부 시스템 사용
- 결제 완료 확인 이메일 발송
- 결제가 완료되면서 완료 페이지로 이동과 함께 이메일 발송
- 랜덤 선택
- 받은 폼들에서 랜덤 추첨
- 당첨자 안내
- 추첨해서 나온 당첨자들에게 문자로 개별 안내
- 당첨자 이메일 안내도 외부 문자 시스템 요청
- 추첨해서 나온 당첨자들에게 문자로 개별 안내
- 미당첨자는 환불 처리 후 안내
폼 데이터 구조
폼 데이터 구조의 경우 미리 설계할 경우 당첨이나 결제 여부 등에 따른 추첨 등에 대한 처리가 좀 더 용이할 것 같아 설계해 보았다.
- 접수번호
- 접수자 식별에 필요
- 이름
- 접수자 기본 정보
- 나이
- 나중에 티켓 예매 유저 정보 통계를 낼 때 쓸만한 정보라서 추가해봤다.
- 이메일
- 결제 및 접수 완료 메일을 보내기 위한 주소
- 핸드폰 번호
- 컨퍼런스 당첨 안내를 위한 문자에 쓰이는 번호
- 결제여부
- 결제여부를 보고 결제한 사람들만 추첨을 돌려 당첨시켜야 하므로 결제여부를 따로 추가했다.
- 당첨 여부
- 결제한 사람들만 추첨을 돌린 뒤 관리자가 설정한 유저의 수만큼만 당첨 여부를 설정해주어 후에 관리자가 이를 보고 당첨자 연락을 돌릴 수 있도록 하였다.
- 환불받을 계좌
- 만약 당첨되지 않은 사람의 경우 환불을 해줘야 하지만 미당첨 후에 따로 받으면 그만큼의 절차가 소요되므로 처음에 폼에서부터 환불받을 계좌를 받았다.
- 계좌는 배열로 앞에는 은행, 뒤에는 계좌번호의 형식으로 하여 환불하는데 필요한 계좌 정보를 모두 담으려한다.
| 데이터 | 형식 |
|---|---|
| 접수번호 | Number |
| 이름 | String |
| 나이 | Number |
| 이메일 | String |
| 핸드폰번호 | Number |
| 결제여부 | boolean |
| 당첨여부 | boolean |
| 환물받을 계좌 | [String,Number] |
관리자 관리사항
- 전체 티켓 개수 설정
- 처음에 전체 티켓 개수를 갱신함으로써 추첨인원에 맞게 추첨할 수 있도록 하였다
- 접수 현황 보기
- 결제 현황 보기
- 당첨자 명단 보고 당첨자 안내하기
- 당첨자 명단 조회
- 환불 처리 안내
- 관리자가 추첨 이후 미당첨자 인원에게 환불 처리 안내를 보내기 위한 조회
- 당첨자 명단과는 반대로 미당첨자 명단 조회로 볼 수 있다. 기타 조회관련 사항들은 데이터베이스에 있는 값들을 조회만 하면 되므로 UI를 통해 접근하여 조회하는 간단한 방식으로 설계하였다.
유저플로우 다이어그램
학습내용
Flow Chart 기호
Flow Chart는 온보딩 스크린 또는 홈페이지와 같이 소비자가 제품을 진입하는 시점을 시작으로 제품 구매 또는 회원가입과 같은 최종 조치 또는 결과로 끝나는 것을 말한다. 즉 프로세스 수행에 필요한 일련의 단계와 결과를 시각적으로 표현한 것이다.
또한 사용자의 전체 경험을 한눈에 확인할 수 있고, 이를 통하여 세부항목들을 구축해나가는데 유용하다.
사용자 여정의 각 터치 포인트는 Flow Chart에서 노드로 표시된다. 노드의 모양은 다양하지만 정해진 의미를 담고 있기 때문에 쉽게 식별할 수 있다. 예를 들어 타원은 프로세스의 시작과 끝을 나타내며 다이아몬드는 결 정을 의미하므로 “예” 및 “아니오” 화살표가 표시된다. 사각형은 “로그인” 또는 “구매”를 의미한다.