[2.0] 기획, 디자인 개편

저번 3월 공연때 사용한 티켓 예매 서비스는 꽤 성공적이었다. 공연 예매는 물론 새 기수 선발에도 꽤 많은 신입생들이 지원을 했고, 웹서비스가 큰 영향을 끼쳤다고 생각한다.

• 103명 예약 ( 코로나 19 로 인한 최대 입장 가능 인원 )
• 신입생 54명 면접 지원 ( 소모임 기능을 통한 접근성 , 웹페이지를 통한 홍보 )
• 관리자 웹페이지 제공을 통한 입금 확인, 소모임 검색 기능 지원
• QR 코드를 통한 빠른 입장 확인 , 입금 정산
• storybook 을 활용한 npm 모듈제작, 디자인시스템 구축

이번 9월 공연에는 공연을 하고싶어하는 선후배들이 많아서 무려 12팀이나 나왔다. 어쩔 수 없이 공연을 이틀로 나누어 개강 후 첫 목요일과 금요일에 진행한다. 사회적 거리두기도 완화되어 공연장 최대 입장 가능 인원 제한도 사라졌다. 이에 맞춰서 9월 공연을 위해 프로젝트를 다시 시작하기로.

디자인은 물론이고 프론트앤드 프로젝트도 처음부터 새로 시작했다. 우아한테크캠프 유튜브에서 리액트 쿼리에 대한 영상을 보고 꽂혀버렸다. 서버 상태는 리액트 쿼리로, 클라이언트 상태는 리코일을 이용해서 관리하기로 했다. + 자바스크립트에서 타입스크립트로. 그러다보니 재탕할 수 있는 코드가 거의 없다. 반년 전에 짰던 코드를 지금 보니까 못봐줄 정도다보니, 아쉬울건 별로 없었다.

 

뱅키즈하면서 디자이너 친구들 어깨너머로 조금씩 배워왔다. 진짜 디자인 전공자들은 이렇게 하는구나 라는걸 종종 느낌. 그 덕분인지 저번 공연 프로젝트 디자인과 비교해도 많이 이뻐져서 기분이 좋다. 개발하면서 삽질한거 까먹기 전에 얼른 기록하려고 블로그 들어왔다가, 그래도 순서대로 써야지 하는 생각에 기획과 디자인부터 기록한다!!

 

휴대폰 인증, 회원가입 과정

뷰만 보면 저번 플젝 날먹인줄 알겠지만 전혀 아니라고. 휴대폰 인증 후 초기 1회에만 입금자명으로 사용될 이름을 받는다. 회원가입하는 과정이라고 생각하면 편할 듯. 한번 회원가입한 유저는 휴대폰 인증 후에 바로 가려던 페이지(티켓 예매하기, 마이페이지)로 리다이렉트된다. 버튼셋을 그냥 너비 채운 네모로 바꿨다. 그냥 첨부터 이렇게 평범하게 갈걸.

에러 처리에 조금 더 공을 들였다. 인증번호를 잘못 입력했거나 기한이 지났을때, 잘못된 값을 입력했을 때 에러 리스폰스를 잡아 모달 화면을 띄워 알려준다. 이 부분은 개발 회고 따로 할 예정. 라우팅, 토큰사용, axios, 에러처리.. 앱 컨셉에 맞는 이쁜 일러스트를 찾았다. https://undraw.co/search 여기임. 어쩜 이리 내 스타일일수가. 색깔도 보라색이야.

 

티켓 예매 과정

기존에는 한 페이지당 하나의 정보를 입력하고 다음 페이지로 넘어간다. 새내기와 재학생을 구분하고 각각 다르게 대응해야했기 때문이었다. 이번에는 아예 다른 방식으로 예매를 해야했다. 이틀동안 하는 공연을 선택해야 하고, 인당 예매 횟수가 제한이 없어졌다는 점이 바뀌었다.

첫 페이지에선 공연 날짜와 매수를 선택하고, 다음 페이지에선 입금을 확인한다. 입금을 확인하는 절차는 중요하다. 왜냐면 야매이기 때문에. 자세한 이야기는 저번 기획 포스팅에 있을거야 아마. 사실 제일 성에 안차는 부분이다. 조금도 UX적으로 편하고 보기에도 이쁜 방법이 있을텐데. 고민이 더 필요하지만 시간이 없어서 넘어간다. 흑흑. 많은 피드백 바랍니다. 다음 3차 프로젝트에 반영될수?도. 기존엔 포인트 컬러로 저 보라색 하나만 썼었는데, 무언가 단조롭고 부족한걸 느껴서 하나를 더 넣었다. 코랄빛이 도는 빨간색? 뭐라 불러야될까. 아무 생각없이 티켓 이모지에서 스포이드로 찍어왔는데 꽤 이뻐서 그대로 사용했다. 보라색은 검정 배경일 때, 빨간색은 하얀 배경일 때 어울린다. 상황에 따라 알맞게 써주었다. 나름.

마이페이지

1차 프로젝트와 비교하면 가장 많이 달라진 부분이 되겠다. 단순히 예매한 티켓 정보만 주던 화면에서 다양한 정보와 재미 요소를 더하고자 했다. 캡쳐를 어떻게 해와야할지 고민하다가 그냥 다해왔다.

상단에는 스와이프로 움직이는 배너가 있고, 그 아래에는 예매 티켓이 있다. 티켓도 여러개 구매할 수 있으니 가로로 스크롤해서 볼 수 있게끔 했다. 배너에 은근 애를 먹었다. 마이페이지에 들어오자마자 제일 눈에 띄는 컴포넌트인만큼 이쁘게 만들어야한다는 부담이 있었는데, 이리저리 해보다가 결국 제일 깔끔한 방향으로 갔다. 전부 내 능력부족 탓이야. 이쁜 일러스트가 함께 있으면 좋을 것 같지만 내 능력 외다.
응원톡은 야심차게 준비해서 제일 많이 써주었으면 하는 기능이었다. 그래서 메인페이지에서 응원톡으로 갈 수 있는 경로를 두군데 만들어주었다. 랜딩페이지에서도 갈 수 있도록 해놓았다. 많관부.

 

응원톡

이번에 프론트를 같이 할 팀원도 부족했고, 뱅키즈를 병행하느라 시간도 안나오고 해서, 최대한 고스락 프론트앤드 프로젝트의 볼륨을 줄이려고 노력했다. 줄이고 보니 너무 뭐가 없어서 사용자가 재밌게 즐길만한 요소를 하나 생각했다. 응원톡이다. 방명록의 개념으로 쓰인다. 로그인을 한 유저만 접근할 수 있지만 익명으로 작성할 수 있다. 추후에 응원톡을 남긴 사용자 중 다섯명을 추첨해 기프티콘을 주는 등의 이벤트로도 쓰인다.

기존 채팅 앱과 다르게 글을 입력하는 부분이 위에 있다. 모바일 웹브라우저에서 키보드를 올리고 내릴때, 입력창이 화면 아래에 있는게 애니메이션 부자연스럽게 보여졌다. 네이버 스포츠 야구 중계 페이지에서 비슷한 ux를 보고 착안했다. 입력창을 열고 닫는 모션이 꽤 부드러워서 기분이 좋다. 나중에 배포되면 직접 확인해보십쇼.

내용을 입력하고 전송버튼을 누르면 입금자명으로 등록한 이름으로 응원이 남겨진다. 익명으로 남기고 싶다면 글 맨앞에 '#별명'으로 한 단어를 붙이면 된다. 이 방식은 사실 디자인을 위해 고민하다가 나왔다. 닉네임을 따로 입력받을 공간이 마땅히 없었다. 그래서 그냥 인풋 박스 안에다가 넣기로. 문자열 다루는데 고생 좀 했지만 꽤 좋은 결과물이 나온 것 같다. 전송버튼을 누르면 바로 패칭되는것이 아니라 모달을 통해 한번 더 확인을 해준다. 도배를 막기 위한 장치이기도 하지만 닉네임이 제대로 들어갔는지 확인을 하는 과정이 필요했다.

리액트 쿼리의 infiniteQuery를 활용했던 경험도 곧 기록할 예정.

 

티켓 페이지

무척이나 맘에 든다. 다크모드로 디자인하면서 색을 쓰는데에 어려움이 꽤 있었는데, 그냥 하얀색 배경으로 까니까 훨신 수월하다. 저번 프로젝트와 마찬가지로 소켓 통신을 이용해 큐알코드를 찍으면 서버로부터 실시간 요청이 오도록 했다. 큐알코드 주위 띠의 색이 실시간으로 바뀌면서 입장을 확인할 수 있다. 이미 입장완료된 티켓이거나 공연 날짜가 일치하지 않는 경우 등의 에러처리도 해주었다.

 

---

 

그리고 랜딩페이지. 늘 그렇듯 랜딩페이지는 뒤로 미루다가 급하게 머리 쥐어 뜯고 있답니다. 제일 상단 섹션 제목 부분만 남았다. 포스터가 얼른 나와야할텐데. 그래도 이제 점점 마크업 장인이 되어가고 있는 것 같아 걱정은 없다. 하하. 좋은거 맞겠지?? 이제 css는 그만하고 싶거든. 제발.