프로젝트 명
Ticket Tier Adviser
프로젝트 진행 기간
2023.07.17 ~ 2023.07.26
기술스택, 라이브러리
HTML/CSS/Javascript, JQuery, Animate.css, Embla Carousel, CryptoJS, Naver Map API
팀 구성
3명(팀장)
프로젝트 URL
https://tickettieradviser.netlify.app
프로젝트 아이디어 및 소개
콘서트나 공연장의 좌석의 시야가 어떤지 등 후기를 찾아보기 위해서는 웹 서치를 통해 하나씩 찾아봐야 하는 번거로움이 있다고 생각
이러한 번거로움을 해결하기 위해 여러 공연장들의 좌석을 직접 가져와 각 좌석마다 사진과 후기를 한번에 볼 수 있는 서비스를 제공하는 티켓리뷰 사이트를 기획
전체 회고
백엔드 없이 기본적인 프론트엔드만으로 프로젝트를 진행하는건 처음이였다. 아무래도 지금까지 진행해왔던 프로젝트같은 경우엔 풀스택으로만 진행하다가 특히 DB없이 프로젝트를 진행하려다보니 계획했던 것들은 개발중에 자주 방식이 바뀌거나 구현할 수 없는 상황이 자주 일어났었던 것 같다.
그중에서 고민을 많이했던 회원가입 부분.
보통 회원가입을 하면 사용자 정보를 암호화하여 DB에 저장하고, 로그인 시 브라우저에 정보를 유지하기 위해 세션에 넣어놓는 방식으로 진행하였었는데, 일단 이 프로젝트에서는 DB없이 구현해야했기 때문에 처음 구상을 하고 구현할 땐 단순히 암호화도 하지 않고 무작정 웹 스토리지나 쿠키에 저장할려 했었다.
막상 저장하고보니 이것만큼 바보같아 보이고 차라리 로그인을 하지말자는 생각이 들었고, 어떻게 다른 방법을 찾던 중 웹 스토리지와 쿠키를 둘 다 사용해서 실제로 로그인을 하는듯 한 모습을 보여주는건 어떨까 생각을 하게 되었다.
DB -> Web Storage / Session -> Cookie
회원가입시 DB에 저장하고 로그인시 데이터를 가져와 세션에 놓는것 처럼, 웹 스토리지에 저장하고 쿠키에 놓아 실제로 로그인을 하는듯한 느낌을 주기 위해 작성한 코드를 삭제하고 새로 구현하였다. 기존에 저장된 쿠키를 가져와 로그인/로그아웃 처리를 하는 함수를 구현해두었기 때문에 최대한 이용하기 위해 세션의 역할을 쿠키가 담당하였다.
좀 더 그럴듯하게 만들어줄 cryptoJS
스프링에서는 Spring Security의 BcryptPasswordEncoder를 이용하여 간단하게 사용자 정보를 암호화할 수 있다. 하지만 이번 프로젝트는 절대 사용할 수 없었고, 아쉬움을 가지고 뭐가없나 찾아보던 중 간단하게 CDN방식으로 암호화를 사용할 수 있는 CryptoJS를 발견하였다.
CryptoJS는 기본적으로 블록 암호화 알고리즘들을 제공하고, 사용 시 블록의 길이보다 데이터 길이가 작을 때 블록단위로 만들어 줄 padding과 IV를 지정할 수 있다..(사실 이런내용들은 전혀 몰랐지만 default값 CBC, PKCS#7이 적용되기 때문에 사용하기 정말 간편하다. 나중에야 자세한 내용들을 찾아봐서 간단한 지식들을 알아가서 꽤 좋았다.)
방법이 아닌 어떻게 코드를 짜야할지 고민하였던 카테고리 검색 부분.
일단 우리 프로젝트의 카테고리 검색은,
이런식으로 시/도, 시/구/군, 종류 총 3개로 구분하여 검색할 수 있도록 기획하였다.
사용자가 보통 분류를 통해 얻고싶은 정보만 검색할 경우, 위의 3개를 모두 다 고른단 보장도 없고, 내가 사용자였어도 일일히 다 고르지 않고 내가 사는 지역 혹은 공연분류만 골라 검색할것 같다는 생각이 들었다. (시/구/군은 시/도를 골라야만 선택이 가능)
처음 구현했을 당시 무지막지한 중첩조건을 걸어 코드를 작성하였는데, 하고보니 너무 지저분해보이고 예외상황마다 같은 함수를 호출하는 것이 정말 마음에 들지않았다. 키보드에서 손을 떼고 어떻게하면 깔끔하게 한번에 해결할 수 없을까 고민을 하다 BFS와 DFS 알고리즘에서 빼놓을 수 없는 방문배열이 떠올랐다.
프론트엔드만 사용해서 진행했던 프로젝트였기에 모든 데이터들은 하드코딩하였고, 카드리스트안에 각 데이터가 가지고 있어야 할 값들을 input태그의 value에 집어넣어 사용자가 원하는 값이 모두 포함되어 있는지만 체크하면 될 것 같았다.
리스트들에서 지정해 둔 value값들을 다 가져와 includes() 를 사용해 사용자가 분류하기를 원하는 값이 있는지 확인해 true/false로 구분하고, 방문배열이 모두 true면 해당하는 카드의 정보를 보여주도록 구현하며 마무리하였다.
프로젝트의 중심주제이자 조원분들이 좌석만드느라 정말 고생한 리뷰.
일단 먼저 천개가 넘는 좌석들을 실제 공연장과 똑같은 구조로 만들어준 조원분들 정말 고생하셨습니다..
사실 처음 주제를 정하고 중심주제인만큼 당연히 좌석시야에 관한 사진후기를 작성할 수 있도록 구현하려고 하였으나.. node를 사용하지 않고서야 프로젝트 내에 이미지를 업로드해 저장할 수 없다고 판단하였다. (리더님도 안될것같다고 하셨다..)
그래서 사진업로드는 포기하고, 텍스트리뷰를 남기기 위해 로컬스토리지에 저장하는 방식으로 결정하고 구현을 시작하였다.
처음 구현하고 저장한 데이터들.
우리는 '신한 블루스퀘어홀'과 '경기아트센터'를 이용했기 때문에, seat_좌석번호_g(경기) or s(신한)_c(내용)과 같은 형식으로 저장하여 이대로 프로젝트를 마무리할 듯 싶었었다.
찝찝하고 불편함
역시나 뭔가 허술해보이고 정돈되지 않은듯한 느낌이 강하게 들어, 마감 전날 키 형식을 살짝 바꾸고 값에는 'JSON 형식으로 데이터를 집어넣어볼까?' 하는 생각으로 후다닥 수정을 하였다.
수정 후 코드와 저장된 값들.
수정하고 나서 확인해보니 key에는 좌석번호와 공연장을, value에는 좌석번호와 리뷰내용이 들어가 두번 넣는걸 한번에 넣을수 있고, 코드도 간결해지고 보기에도 깔끔해보인다. (지극히 주관적 의견이다.)
말하고 싶었는데 못했던 말
팀프로젝트가 끝나고 이렇게 회고를 적고나서 보니 발표때 하지 못했던 말들만 주구장창 적어놓은 것 같다. 우리팀이 마지막 발표이기도 했고, 애초에 남은 시간이 얼마없었다보니 급해지고 몇몇 내용들을 생략했어서 이러한 내용들을 발표하지 못한게 좀 아쉬웠다.
마무리
짧은시간안에 프로젝트를 진행했다보니 아무래도 아쉬운점이 없을수 없다. 물론 메인페이지에 관한 구조와 반응형 CSS를 부트스트랩에 의존하지 않고 직접 만든것이 만족스럽지만, 아무래도 주로 Javascript를 사용해 프로젝트의 전체적인 기능들을 구현하느라 사용자 친화적인 UI/UX를 구현하지 못하고 Animate Keyframe과 같은 애니메이션을 사용해보지 못한게 아쉬웠다.
끝난 다음날 리더님의 피드백에서 '팀중에서 가장 좋은 주제와 기능의 완성도가 좋았다.'라는 말을 들었다.주제같은 경우, 추후에 백엔드를 추가시켜 더 발전시키고싶을 욕심이 있을정도로 꽤 참신하고 좋은 주제였다고 생각이든다. (아이디어 주신 팀원님 감사합니다..!)
좋은 글이네요. 공유해주셔서 감사합니다.