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

 

 

🙋🏻‍♀️ 위코드에서의 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: 방서빈, 김수현, 이해인

 

 

 

 

 

2. 프로젝트 Product 분석

---

Product

 

 

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

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

 

 

 

 

 

End user

 

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

 

 

 

 

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

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

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

 

 

 

 

🎬 small box 's Logo

프로젝트 이름 : small box

 

 

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

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

 

 

 

 

 

 

🎬 small box 's flow chart

 

 

 

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

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

 

 

 

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

 

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

 

 

 

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

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

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

 

 

 

 

🎬 구현된 주요 기능 

 

 

 

메인페이지

 

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

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

 

 

 

 

 

 

메인페이지-현재상영작

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

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

 

 

 

 

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

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

 

 

 

 

 

 

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

 

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

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

 

 

 

 

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

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

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

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

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

 

 

 

 

 

무비차트 페이지

 

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

 

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

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

 

 

 

 

극장페이지

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

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

 

 

 

 

 

 

 

영화 상세페이지

 

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

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

 

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

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

 

 

 

 

 

 

 

영화 상세페이지-스틸컷

 

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

 

 

 

 

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

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

 

 

 

 

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

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

 

 

 

 

 

 

 

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

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

 

 

 

 

 

 

결제페이지-카카오페이

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

결제 후 어떤 영화를 예매하였는지 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

 

 

 

 

 

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 수고하셨습니다 🧚🏻‍♀️💜