[2차 프로젝트] small box read me + 회고록

프론트앤드/이것저것 2023. 4. 8. 15:46

728x90

🙋🏻‍♀️ 위코드에서의 2차 프로젝트를 마쳤다 🙋🏻‍♀️

정말이지.. 1차때보다 더 어려운 예시 홈페이지들이 많았고,

그 중 우리는 cgv를 참고로하는 프로젝트를 진행하게 되었다.

' 영화관 예매 서비스 컨텐츠 '

우리 small box의 회고를 시작하겠다 .

CGV : 다양한 장르의 영화와 경험을 상영함으로써 관객에게 관람환경 뿐만 아니라 그 이상의 서비스와 감동을 전달 함으로써, 다양한 즐거움과 특별환 경험을 통해 total lifestyle을 선도하는 종합 생활문화 공간 제공

을 한다면

small box

‘독립영화, 즉 신선한 장르와 특별한 소재를 좋아하거나

입문하고자 하는 관객에게 영화를 선보이자 ’ 라는 목표를 두고

다양한 장르에서 보다 감성적인 인디영화에 포커스를 두어 주 매니아층 그리고, 다양테마에서 컨셉에 맞는 영화를 즐기고자 하는 인디영화 입문자들을 위해 시각적 뿐만아니라 공간적으로 다양한 즐거움과 특별한 경험을 선사하는 문화공간 형성을 목적으로 프로젝트를 진행했다.

1. 프로젝트 개요

1-1. 기간 및 인원

기간

2023/02/24 ~ 2023/03/10 (약 2주)

인원

- 프론트엔드 : 이해인(프로덕트 매니저), 김수현, 방서빈

- 백엔드 : 장주성 ,강신혜(프로젝트 매니저) ,김은경

1-2. 프로젝트에 사용된 기술 스택

1-3. 시연영상

1-4. Frontend Github

GitHub - sunny-inn/42-2nd-smallbox-frontend: 방서빈, 김수현, 이해인

방서빈, 김수현, 이해인. Contribute to sunny-inn/42-2nd-smallbox-frontend development by creating an account on GitHub.

github.com

2. 프로젝트 Product 분석

Product

훌륭하지만 잘 알려지지 않은 독립영화를 소개하고

누구든지 쉽게 접근할 수 있는 예매서비스를 제공하는 플랫폼

End user

장르의 신선함, 소재의 특별함에 대한 공감대를 원하는 관객들

즉, small box는 독립영화를 보고싶은 주 매니아 층 혹은 입문 유저들을 타겟으로 했으며,

개발자로서 시각적으로 다양하게 데이터를 이용하여 UI 구성 하면서

영화를 안내 에서 예매까지 유도하는 전략으로 프로젝트가 진행되었다.

🎬 small box 's Logo

로고부터 포스터 등은 팀 내 디자이너셨던 우리 수현님께서 더욱더 수고해 주셨다 😂

덕분에 완성도가 더 높아졌던 우리 small box... 💜

🎬 small box 's flow chart

처음 메인페이지에서부터 예매까지

사이트를 이용하는 고객 입장에서 flow를 구상해 본 small box의 flow chart 이다.

영화 자체가 다양함 보다는 신선한 장르와 특벼한 소재이다 보니, 메인페이지에서 바로 로그인도 가능하지만,

영화 정보를 원하는 고객을 위해 따로 로그인을 하지 않아도 영화 상세페이지에 접근 할 수 있도록 플로우를 짜 보았다.

로그인은 두가지 방법으로 가능한데,

첫번째 플로우는 메인페이지에서,

그리고 다른 방법은 예매 페이지에서 결제페이지로 넘어가기 전 이다.

🎬 구현된 주요 기능

메인페이지

gifit_1678424105746

메인에 화면크기의 캐러셀을 이용하여, 현재 상영하는 영화 중 가장 인기있는 영화의 한 장면을 같이 보여줌으로써

관중의 관심을 사로잡는 역할을 하도록 구성했다.

메인페이지-현재상영작

gifit_1678424262207

영화 서비스 제공하는 플랫폼 = 역동적이게 UI를 구성

for생소하지 않은 영화를 위한 고객

포스터 mouse hover : 영화 줄거리 및 상세보기 + 예약 버튼

마우스를 포스터에 올리면 바로 줄거리를 볼 수 있고, 상세보기를 들어가기 전에 고객의 편의를 위해 한 눈에 해당 포스터의 영화가 어떤 줄거리를 가졌는지 알 수 있도록 구현

메인페이지- 핫키워드 영화 top4

gifit_1678424355772

핫 키워드 영화로 생소한 엔드유저들에게 인기있는 영화를 소개하는 부분을 만들었으며,

눈에 띄도록 마우스를 올렸을 때 포스터가 확대가 되도록 UI를 구성했다.

로그인페이지-카카오로그인

gifit_1678424490243

방문자들이 다른 목적이 있다기 보다, 영화를 예매하려는 유저들이 많기 때문에

회원가입 과정을 줄여 예약을 쉽게 할 수 있도록 구현을 하였고

국민 메신저인 카카오를 사용하여 누구든지 쉽게 로그인 혹은 회원가입을 할 수 있도록

카카오 로그인 API 를 사용하여 로그인에 사용되는시간을 단축했다.

무비차트 페이지

gifit_1678424614118

영화 데이터 자체에 개봉날짜, 예매율을 포함하여

최신 정보에 민감한 고객들-> 개봉순으로 나열해서 보여줄 수 있는 기능

대중의 평가가 중요한 고객들 -> 에게는 예매율이 높은 순서부터 확인할 수 있도록 정렬 기능을 구현했다.

극장페이지

gifit_1678424786928

극장에서 사용하는 장비 + 좌석 등을 소개하는 페이지로,

극장 위치가 있는 지도도 보여줌으로써, 극장의 위치를사용자들이 따로 검색하지 않아도 알 수 있게 구현했다.

영화 상세페이지

gifit_1678424873989

상세페이지인 만큼 고객이 선택한 영화 정보에대해 한 눈에 알아볼 수 있도록

큰 UI 와 예매하기 버튼을 좀 더 크게 만듦으로서, 예매까지 갈 수 있도록 좀 더 눈에 띄게 구현했으며,

스크롤을 적당선까지 내리면 예약하기 및 상위로 이동하는 아이콘이 애니메이션으로 페이지에 등장 함으로써,

이용자가 좀 더 편리하게 페이지를 이용할 수 있도록 구현했다.

영화 상세페이지-스틸컷

gifit_1678424927723

영화 내 상영되는 스틸컷을 캐러셀로 구현함으로써 컬럼으로 나열된 것이 아닌 관객이 원하는 컷을 바로 볼 수 있게 구현

영화 상세페이지-키워드 그래프 및 댓글

gifit_1678425106746

Keyword-Graph : 키워드를 뽑아 오각형 그래프로 구현함으로써, 고객이 독특한 영화를 보다 간접적으로 경험하게 구현 Review : 오각형 그래프를 구성하는 키워드를 선택할 수 있게 selectbox를 구현했으며, 리뷰에는 키워드가 같이 표현되도록 구현했다.

영화 예매페이지- 영화, 날짜 선택

gifit_1678425359776

모티브 사이트보다 좀더 관객이 선택하는 영화가 무엇인지 잘 보여주기 위해 짜여진 UI

영화 예매페이지 -관람자 수, 좌석선택

인원 선택별 좌석을 선택할 수 있고, 선택하는것을 바로바로 모니터링 해서 구매내역에 보여줄 수 있도록 구현

결제페이지-카카오페이

gifit_1678425947575

대중적으로 사용되며, 로그인을 카카오로 했기에 결제에 시간을 많이쏟지않게 카카오페이로 구현

결제 후 어떤 영화를 예매하였는지 UI를 보다 크게 띄워 예매한 관객에게 보여지도록 구현했다.

📍 내가 구현한 기능 및 페이지 설명

메인페이지 - TOP4

핫 키워드 영화로 생소한 엔드유저들에게 인기있는 영화를 소개하는 부분을 만듦

역동적인 UI를 제공함으로 써 관객의 눈길을 끌도록 구현함

로그인- 카카오 API 로그인

국민 메신저 카카오 로그인 API를 사용함으로써 고객입장에서 보안이 보장되고 원하는 영화를 빠른 시간내에 예매할 수 있도록 구현함

Loading : 카카오 토큰->페이지 내 토큰으로 변환된 후 불러오는 과정에서 로딩이 길어질 경우 빈 화면보다는 로딩중임을 사용자에게 알리기 위해 구현함

영화 상세 페이지

Movie : 상세페이지인 만큼 고객이 자신이 선택한 영화 정보에대해 한 눈에 알아볼 수 있도록 큰 img 및 상세 정보를 우측에 표시

Booking Btn : 관객에게 영화 예매까지 유도하는 서비스를 제공하는 컨텐츠라 예매하기 버튼을 좀 더 큰 사이즈로 UI구현함.

스크롤을 적당선까지 내리면 예약하기 및 상위로 이동하는 아이콘이 애니메이션으로 페이지에 등장 함으로써 이용자가 좀 더 편리하게 페이지를 이용할 수 있도록 구현함

Carousel : 영화 내 상영되는 스틸컷을 캐러셀로 구현함으로써 컬럼으로 나열된 것이 아닌 관객이 원하는 컷을 바로 볼 수 있게 구현함

Keyword-Graph : 키워드를 뽑아 오각형 그래프로 구현함으로써, 고객이 독특한 영화를 보다 간접적으로 경험하게 구현함

Review : 오각형 그래프를 구성하는 키워드를 선택할 수 있게 selectbox를 구현했으며, 5자이상 리뷰를 쓰면 업로드 버튼이 활성화 되며, 클릭뿐만아니라 엔터를 누르면 업로드가 되도록 구현하였으며, 리뷰에는 키워드가 같이 표현되도록 구현함

영화예매페이지- 영화선택

큰아이콘/리스트 보기 : 큰아이콘을 선택하면 영화리스트를 포스터와 함께 큰 아이콘으로 볼 수 있고,

리스트를 선택하면 포스터 없이 제목과 나이제한 만 UI에 표시된다.

극장소개 페이지

Kakao Map : 대중적으로 사용되는 kakao API를 이용하여 small box 위치 및 주변 건물 들을 알 수 있게 구현

3.팀원들과의 협업

노션 링크 : https://succinct-thunbergia-9e7.notion.site/TEAM-SMALLBOX-7689f3b2213647d4beba585205803cee

TEAM SMALLBOX

스프린트 일정

succinct-thunbergia-9e7.notion.site

3.1 Daily Standing Meeting

매일 약 30분정도 팀 내에서 쓰는 Notion을 기준으로 해당 날짜에 한 일/ 할일/ 블로커 등을 공유하는 시간을 가지며,

Trello를 보고 진행상황들을 파악하고 부족한 부분은 남아서 구현했고,

통신을 하는날에는 따로 해당 기능을 맡으신 백엔드분과 함께 맞춰보는 시간을 가졌다.

3.2 협업에 사용된 프로그램

A. Notion

꼼꼼하신 우리 프로젝트 매니저님께서 팀 notion을 잘 정리해 주셨었다.

스프린트 일정 뿐만아니라, API, Mockdata 등 바로바로 통신을 할 수 없거나, 필요하면 바로 이용할 수 있도록 정리가 되어있었기에 원활한 회의 및 프로젝트가 진행될 수 있었던 것 같다.

이런식으로 데일리 미팅에서 나눈 내용들을 어젠다에 따로 기입하면서 그날 있었던 미팅에 대해 정리하는 시간을 가졌다.

B. Trello

Trello를 기반으로 실시간으로 미팅을 따로 진행하지 않아도

진행 상황을 보여줄 수 있었다.

KPT

👀 Keep (프로젝트에서 만족했고, 앞으로의 업무에서 지속하고 싶은 부분)

하루에 30분 정도 꼭 필수로 공유해야 했던 것들 위주로 논의했던 미팅 방식
어려울때 서로 도와주며, 협력하던 팀 분위기
로그인 파트때 시도한 소셜로그인 (카카오로그인) 을 구현하면서 홈페이지를 이용하는 사용자가 많은 시간을 들이지 않고 간편하게 로그인을 구현한 부분
극장페이지에서의 지도 API (카카오맵) 구현 함으로써 이용자가 해당 서비스를 이용하기 위해 방문해야하는 곳 위치 정보 알려줬던 부분
상세페이지에서 생소한 영화정보를 보다 역동적인 UI로 구현함으로써 예매를 원하는 혹은 정보 (키워드 그래프+ 키워드 토반의 댓글기능) 를 알고싶어하는 관객에게 정보제공 하던 부분
팀원들과 이 페이지를 이용하는 고객입장에서 보다 더 어떤방법으로 구현해야 편리하게 이용할 수 있을지 끊임없이 미팅하며 구현하려했던 부분

👀 Problem (프로젝트에서 부정적인 요소로 작용했거나 아쉬웠던 점)

생소한 기능들을 구현 + 단순한 클론코딩이 아닌 1차 프로젝트때보다 고객입장을 좀 더 생각했던 프로젝트 였기에 좀 더 눈에 띄는 UI 및 디자인 구현을 하는데에 시간이 다소 소유되었던 것 같다. 이번 기회에 해 보았으니, 다음에는 좀 더 수월하게 생각 및 구현을 할 수 있을것 같다고 생각함
예매 페이지 구현에 시간이 많이 걸릴 것으로 예상해 프론트엔드 팀원들과 컴포넌트를 다소 잘게(?) 나누었었는데 다시 합치는데에 난항을 조금 겪었지만, 구현해냄. 다음 프로젝트에는 이러한 경험으로 얻은 교훈으로 효율성있게 파트를 분배해야 겠다고 생각함
라이브러리를 다양하게 사용할 수 있었지만, 아직까지 공식문서를 읽는 능력이 다소 부족하지 않았나 생각이 듦. 자주 보는 습관을 가지고 능숙해 져야 겠다고 다짐함

👀 Try (Problem에 대한 해결 방식으로 다음 프로젝트에서 시도해볼 점)

많은 페이지들을 좀 더 자세히 뜯어보면서 생소한 기능이 있으면 공부 및 구현해보기
1차 프로젝트 때 회고 try로 '구현했던것에 대해 더욱 잘 기록해보기' 가 있었는데, 이번에도 구현하는것에 급급해 많이 기록을 못 했던것 같아서 3차 프로젝트 때는 이번보다 좀 더 많이 기록하면서 정리하기

✨ 두번 째 프로젝트를 마치며 ✨

두 번째 프로젝트에 프로덕트 매니저라는 과분한 직책을 맡게 되어 정말 최선을 다했다 :)

그렇지만 발표까지 끝내고 나니 여전히 아쉬운점이 많다.

위에서 언급했듯, 이번 프로젝트에서는 라이브러리를 마음껏 사용할 수 있었는데, 공식문서가 아직까지 친근하지 않은 것 같다. 한국말로 정리된 블로그를 더 찾아보곤 했는데, 역시나 명확한 답은 공식문서를 봐야 알 수 있었다 ^_^

프로덕트 매니저로써,

이번 프로젝트때 팀원들을 잘 이끌었으며 맡은 프로덕트에 대해 이해를 완전히 해서 발표까지 성공적으로 마쳤을까? 생각을 해 보았다.

우리가 맡은 product 인 small box의 페이지 및 비지니스 기능을 구현하기위해 전략을 잘 생각하고 도입을 잘 했을까?

이용하는 사용자의 flow를 다양하게 생각해서 조금이라도 더 예매까지 이뤄 내는 데에 편리하고 신속하게 할 수 있게 구현하도록 팀을 잘 이끌었을까? 하는 물음에 추가적으로 생각했던 기능들을 위한 전략이나 추진력이 여전히 많이 부족했고 어설펐던 리더가 아니었을까 하는 생각이 들었지만,

실력 및 협동력 + 실행력이 좋았던 팀원들을 만나게 되어 서로에게 영향을 주며 하나의 프로젝트를 완성까지 하게되어 너무 보람되었고, 그 결과물을 동기들과 멘토님들 앞에서 발표하고, 바로 지금사용해도 아무문제없을 것 같다는 극찬을 받으니 여태 팀원들과의 노력이 빛을 바라는구나 하는 생각이 들어 너무 뿌듯했다 :)

다들 나의 밝은 기운을 받고 즐겁게 임했다며 칭찬해준 우리 팀원들 덕분에 더더욱 힘이나 이렇게 성공적으로 마친게 아닐까 했다.

마치며 .. 😭

작년 이맘때쯤, 나는 호텔에서 호텔을 이용하는 고객들의 입장을 생각한 고객서비스를 제공했을텐데,

이제는 프로덕트를 이용 및 사용하는 고객 입장에서 나만의 그리고 팀원들의 기술과 협동으로 만들어낸 기능들로 서비스를 제공하는 개발자가 되고있다.

서비스가 좋아서 서비스 분야로 나가고자 했었는데, 다른 방법으로 이렇게 제공을 할 수 있게되어 너무 뿌듯하고,

이 재미있는 개발을 계속 해나가고 싶다 :)

나의 2차 프로젝트는 이렇게 끝났지만, 앞으로 3차 4차 계속 이어나갈 예정이니 너무 기대가 되고,

더더욱 사용자 입장에서 생각하고, 다가가고, 구현하는 개발자가 되고싶다!

💜🧚🏻‍♀️42기 A팀 small box 수고하셨습니다 🧚🏻‍♀️💜