팀 프로젝트 최종 회고

은채·2022년 8월 10일

부트캠프 코드캠프 팀프로젝트 프로젝트 프론트엔드 회고

회고

목록 보기

7/8

방탈출 까페 예약 플랫폼 'room:in us' 프로젝트 후기

📅 작업 기간

2022년 6월 28일 ~ 2022 8월 3일
( 팀원 발표 ~ 팀프로젝트 기간 ~ 발표날 까지 )

👩🏻‍💻 팀원 구성🧑🏻‍💻

프론트엔드 4명 : 손은채, 김지수, 신하니, 이영주
백엔드 2명 : 오세웅, 정민준
기획자, 디자이너

🛠 기술 스택

1등했다

6월 말부터 시작했던 (사전기간) 팀프로젝트가 완전히 종료되는 수료식이다.
수료식에서는 팀프로젝트 1등을 발표하고, 다음 기수의 피드백을 전달한다.
사실 수료식 중 갑자기 1등을 알려주어 '???' 좀 김이 샜다(ㅎㅎ).
코드캠프에서는 팀프로젝트 1위 팀 멤버와 G-rating 1,2,3위 수강생들에게 패트스파이브 구로점의 출입증을 3개월 연장시켜주는데, 그 인원으로 팀 멤버의 이름이 불리면서 1등이라는 것을 알게 되었다

좋은 결과로 팀 프로젝트 및 부트캠프 생활을 마무리할 수 있어서 너무 기뻤고,
함께 1달 이상 고생해준 팀원들에게 너무 고마웠고,
이 결과가 좋은 회사에 빠르게 취업할 수 있게 도와줄 수 있었으면 좋겠고,
내 개인 포폴도 팀 프로젝트만큼 좋은 평가를 받기 위한 리팩토링을 해야겠구나... 생각했다.

서비스 시연

코드캠프 발표 영상

🔑 랜딩페이지

상상이 현실이 되는 밤, 상상이 현실이 되는 방
방문을 열고 메인 페이지에 들어가는 방식으로 구성된 랜딩페이지

🔑 ( 소셜, 일반 )회원가입 / 로그인 / 계정 찾기

소셜 회원가입, 로그인
카카오톡 과 구글 아이디를 통해 회원가입 및 로그인이 가능하다

일반 회원가입
react-hook-form 과 React Password Checklist를 활용한 Validation,
휴대폰 인증 후 가입이 완료 된다.

🔑 메인

react-slick을 활용한 캐러셀 및 css 애니메이션을 활용한 신규 매장-테마 카드, 인기 게시글, 공지사항 리스트

🔑 매장 (리스트, 상세)

지역 필터 및 매장명 검색 가능
더보기 버튼을 활용한 infinite-scroller

카카오 Map api를 활용한 매장 위치 지도 기능

🔑 테마 (리스트, 상세)

장르 필터 및 테마명 검색 가능
더보기 버튼을 활용한 infinite-scroller
모바일 화면의 경우 react-slick을 활용한 캐러셀

테마 찜하기 및 리뷰 댓글 기능 구현 (별점, 난이도, 탈출 여부 수집)

🔑 예약(폼, 티켓)

typewriter-effect 타이핑 이펙트를 활용한 테마 추천
mui 컴포넌트를 활용한 예약 폼 구현
아임포트를 활용한 결제/결제 취소 프로세스
결제 시, 보유 적립금을 사용하여 총 결제금액에서 차감이 가능함
적립금은 실 결제 금액의 3%가 적립

react-share 을 활용한 페이스북, 트위터 공유
react-copy-to-clipboard 을 활용한 도메인 복사, 공유
카카오톡 공유 api를 활용한 카카오톡 공유
react-to-print을 활용한 티켓 컴포넌트 프린터 기능 추가
qrcode.react을 활용하여 예약 티켓 페이지로 방문 할 수 있는 QR 코드 제작

🔑 커뮤니티 (리스트,등록, 상세)

게시물 리스트 페이지네이션

태그, 이미지 미리보기 등
react-dropzone 을 활용한 이미지 드롭존
toast-ui 텍스트 에디터를 활용한 컨텐츠 작성

게시글 좋아요 / 태그, 댓글 & 대댓글 기능 구현
게시물 소셜 공유 가능

🔑 마이페이지

찜한 테마 목록(카드형), 작성 게시물, 작성 리뷰, 예약 내역 및 결제 내역 확인 가능
결제 금액의 3%가 적립됨을 확인
dayjs를 활용한 캘린더 구현
카카오톡 채널 api를 활용한 비즈니스 채널 연결

🔑 고객지원

(공지사항 및 이용약관 등은 생략)

EmailJs를 활용한 공식 이메일 계정 연결

피드백

코드캠프 팀프로젝트 발표회 날에는 다음 기수 (F8B4) 분들이 발표를 참관하고, 점수와 피드백을 제출한다.
해당 발표는 1달 이내에 코드캠프 유튜브에 영상으로 올라가는 것으로 알고 있다.

수료식 날 피드백이 먼저 팀장들에게 전송된다.

잘했던 부분

기획, 디자인, 발표 관련

동물의 숲 - 방탈출 컨셉을 가지고 발표를 했던 점에서 이목을 끌어 좋은 평가를 받았다.
탄탄한 기획에 대한 좋은 평가가 많았다.
이번 프로젝트를 통해서 초기 기획을 얼마나 탄탄하게 잡는지에 따라 프로젝트 성패를 가른다는 것을 느낄 수 있었다. 웹 기획자인 동생과 함께 기획을 잡아갔었는데, 정말 큰 도움이 많이 되었다.
이 후에 회사에서도 기획자 분의 의견을 경청하는 개발자가 되어야 겠다고 생각했다.
또한, 전체 컨셉 디자인을 맡아주신 디자이너 분과 세부적인 디자인을 담당하신 하니님도 정말 고생이 많으셨는데 디자인의 경우 여러 사람의 취향을 모두 맞추기가 어려워서 수정 작업을 많이 할 수 밖에 없었다. 그 과정에서 피드백을 정말 많이 주고 받았는데, 특히 하니님이 우리의 피드백을 잘 들어주시고 수용해주셔서 큰 트러블 없이 디자인을 하나로 맞춰 갈 수 있었다. 덕분에 랜딩페이지 - 카드형 디자인 등에서 좋은 평가를 많이 받을 수 있었다.
디자이너 및 기획자가 없을 경우 프론트엔드에서 각자 맡은 페이지의 UI도 담당하게 되는데. 이 과정에서 각자의 개성이 드러나다보니 통일성을 해치는 경우가 생긴다. UI를 다시 통일하는 과정에서 소모적인 시간을 보내게 되고, 이 과정 중에 갈등을 겪기도 한다. 그런 점에서 프로젝트에 기획자, 디자이너가 꼭 필요한 역할임을 알게 되었고, 또 많은 의견을 조율하고 결정을 내리는 팀장의 역할이 중요함을 느꼈다.
웹 페이지를 꾸민 애니메이션들
실제 운영되는 서비스였다면 하지 못했을 애니메이션들이기 때문에, 프로젝트 성이니까 한 번 사용해보자 싶어서 여러 부분에 활용되었다.
css에서 애니메이션, 키프레임 등을 활용한 퍼포먼스를 조금이라도 보여주면 좋을 것 같아 곳곳에 들어가게 되었다. 화려하지만 과하지 않은 느낌이라고 이야기해주셔서 약간 고민했던 지점이 해소된 것 같다. 물론 개선점에 css 부분을 지적하신 분도 있긴했다 ..ㅎㅎ

내 파트에서

소셜 공유를 위한 기능에서 긍정적인 피드백이 들어와 기뻤다. 예약 티켓이나 커뮤니티 게시글의 경우 다른 사람에게 공유하고 싶은 페이지이기 때문에 꼭 필요한 기능이라고 생각했다. 리액트의 공유 라이브러리를 통해 페이스북, 트위터를 연결했고 카카오 api를 활용해 카카오톡을 연결했다. url을 복사해서 바로 사용할 수 있는 것, 프린트로 출력할 수 있게 프린트 연결까지! 1차 기획에서는 없었던 부분들이다. 하지만 내가 개인적으로 꼭 있었으면 하는 기능이어서 따로 준비했는데 팀원들을 비롯해서 모두에게 좋은 피드백을 받아 좋다.
카카오톡 채널은 내가 채널을 활용해서 학원 일이나 아르바이트를 한 경험이 있어서, 바로 기획에 넣었던 것인데. 처음에는 챗봇 라이브러리를 사용할까? 하다가 단순 응답형 챗봇보다 관리자와 실시간 소통하는 것으로 구현하고 싶어서 카카오톡 채널 api를 사용했다. 비즈니스 채널을 만들어서 전에 사용했던 것처럼 홈 화면에 들어갈 게시글도 꾸미고 팀원들도 매니저로 등록하며 마치 진짜 서비스를 제공하는 것 같은 기분이 들었다. 이 프로젝트가 살아있을 때까지만 열어둘 예정이다.
예약 폼이 하나씩 나와서 좋다고 해주셔서 다행이다. 선택지에 따라 가져오는 data가 달라지다보니, state들이 계속 바뀌어 렌더링 된다. 리팩토링을 하고 싶은 부분이기는 한데, 1차적으로 기능 구현을 하기 위해서 폼을 하나씩 꺼내줄 수 밖에 없었다. 하나씩 응답하고 모두 응답해야 결제가 가능한 방식으로 구현해두었는데 꼭 다시 리팩토링해야 하는 부분. 리액트에 대한 심도있는 이해가 필요하다.

개선하면 좋을 부분

UI/UX 관련

다시 한번 애니메이션
카드가 뒤집어질 때 자연스럽지 않은 부분이 있었는데, 1달동안 잘 고쳐지지 않았던...ㅜㅜ 리팩토링 때 하니님께서 마지막으로 봐주시길 바라는 부분이다.
그리고 랜딩페이지에서 서비스에 대한 소개가 부족하다는 점은 공감하는 바이다. 하지만, 지금 랜딩페이지 컨셉에서 서비스 소개를 갑자기 ' 전국 방탈출 카페 후기 10만개 보유!' 이렇게 할 수도 없고, '예약을 도와드립니다!'하고 설명하기도 좀 난감한 상황. 사실 방탈출 게임에서 숨겨진 증거를 찾아야하는 것처럼, 랜딩페이지에 우리가 의도를 숨겨놨다~ 이런식으로 마무리,,, 하하 .

2.모바일 헤더에 있는 햄버거 메뉴의 경우, 웹에서 화면을 줄일 때 사용하려고 했던 것은 아니고 실제 태블릿, 모바일에서의 사용을 위해 들어간 부분이다.
메뉴바가 화면을 가리는 부분은 실제 다른 서비스에서도 2/3 이상 가리고 있어서 화면을 많이 가리게 만들었다. 햄버거 메뉴가 나온 상태에서 뒤 화면을 사용하게 하려고 했던 것이 아니기 때문에 이것은 개인차가 있을 것 같다. 지금은 a 링크 문제로 아예 햄버거 메뉴가 제거된 상태로 배포가 되었다. 햄버거 메뉴가 없어도, 모바일 화면 하단에 bottom nav도 있어서 메뉴 이동은 가능하다.
react-burgur-menu라는 라이브러리를 사용했는데, 다음번에는 라이브러리 없이 제대로 구현해보고 싶다.

alert 이 너무 많다?
alert에 대한 고민을 많이 한 상태에서 겨우 마무리를 했는데, 다시 alert에 대한 피드백이라니!
처음에는 심란했다..

0) 컨셉에 어울리는 alert을 사용하자 => sweet alert2 선택

1) alert 나온 후 뒤 배경이 blur 처리 될 때 상하 스크롤 때문에 화면이 좌우로 흔들리는 점 => blur를 없애서라도 화면 흔들림을 줄이고자 했다.

2) alert 이 나왔을 때 사용자가 확인 버튼을 누르러 이동하는 것이 너무 많다 => success alert의 경우 동작 최소화를 위해 2초 이내에 사라지게

3) sweet alert2 에서는 다른것들과 달리 긍정/부정의 버튼이 반대로 되어있었다. => 삭제, 취소와 관련된 alert 에서는 왼쪽 취소(부정) / 오른쪽에 삭제(긍정) 버튼을 배치하자 'reverseButtons: true' 속성을 추가한다.

이정도면 alert 이슈는 충분하지 않았나 싶었는데
alert이 많다?는 피드백이라서 alert이 많다는게 무슨 의미일까 한동안 고민했던 것 같다.

이후에, 타 강의에서 ux에 대한 이야기를 살짝 다루면서 그 때 문제점을 파악했다.
그리고 관련된 블로그 포스팅

애플 휴먼 인터페이스 가이드라인

Minimize alerts. Alerts disrupt the user experience and should only be used in important situations like confirming purchases and destructive actions (such as deletions), or notifying people about problems. The infrequency of alerts helps ensure that people take them seriously. Ensure that each alert offers critical information and useful choices.
얼럿 노출은 최소화하세요. 얼럿은 사용자의 경험을 방해하며, 결제 확인이나 삭제와 같은 파괴적 행동, 문제를 알려주는 등 중요한 상황에서만 사용되어야 합니다. 적게 사용해야 사용자들이 얼럿을 심각하게 받아들이겠죠. 각각의 얼럿은 중요한 정보나 유용한 선택을 제공한다는 것을 알려주세요.

이를 바탕으로 success 에 관련된 alert은 최대한 제거하고,
삭제 (게시물, 댓글, 리뷰) & 예약/결제 취소 & 에러에 대한 alert만 노출하는 리팩토링을 진행하기로 했다.

서비스 개선사항

개인정보 보안 -> 아이디 가리는 것까지는 생각하지 못했다!
이름을 사용하는 서비스라 이름은 *로 가려서 백엔드에서 보내주시는데, 이 부분도 백엔드에서 가려서 보내주면 좋을 것 같다는 생각이 든다. 그리고 비밀번호 변경에서 현재 비밀번호를 입력하는 것은 개인 포트폴리오 때부터 구현을 해야한다고 생각은 하는데, 상황이 계속 맞지 않는.. 개인적으로 조금 아쉬운 부분. 백엔드 없이 프론트단에서 현재 비밀번호를 입력하고 들어가는 방법이 있을지 고민해봐야겠다.
상세페이지의 더 많은 정보 + 후기 블로그 연결 => 첫 회의 때 나왔었다가, 프로젝트 규모를 줄이기 위해 덜어낸 것들. 실제 서비스였다면 정보는 지금보다 많이! 풍성해야 하는게 맞다 @.@
점주 연락 챗봇 , 게시글로만 홈페이지 문의 => 홈페이지 문의는 카카오톡 채널로 넓힌 것이었는데 ... 문의가 모두 roominus 운영자와만 가능하고 실제 입점한 방탈출 까페 점주와 불가능하다는 점을 이야기해주신 것같다. 유저 서비스까지만 구현하고 점주 서비스를 구현하지는 않아서 생기는 아쉬운 점인것 같다. 점주에 대한 것을 아예 배제하고 기획했기 때문. 서비스 제공 및 소통은 모두 roominus <-> 유저 로만 기획했다.
이런 부분은 잘 기억했다가 실제 서비스 회사에서 구현해봐야겠지?
부가적인 서비스 => 실제로 우리가 레퍼런스로 삼았던 방탈출 관련 커뮤니티에도 수익성에 대한 고민이 있었다. 물론 우리는 사업하는 것이 아니고, 포트폴리오용 서비스를 계획한 것이지만, 서비스에 대한 깊은 이해를 가진 개발자가 되기 위해서는 이러한 수익 모델도 고민하지 않을 수가 없는 것 같다.
좋은 고민거리를 주신 것 같아서 감사한 부분.
공지사항 => 더미 페이지를 피드백 받은 바로 당일에 제작해두었다. api가 따로 있는 것도 아니고 기획단에서도 없던 것인데 내가 웨이브 홈페이지에서 보고 만들고 싶어서 갑자기 추가 된 부분이기 때문에 .. 발표 전까지 필요한데 너무 힘들다 싶어서 넘어갔던 부분이다. 역시 서비스에서 작동하지 않는 부분은 최소화해야하는데, 그렇게 팀원들 페이지 테스트하고 다니면서 정작 이 부분을 흐린눈 했던..하하.
피드백이 많이 나와서 수료식 전에 바로 제작을 했고, 공지사항 리스트에서 글 제목을 클릭하면 3개의 공지사항이 노출 될 것.. 해결 완료

에러 관련

발표 때도 이야기 나왔던 회원가입 -> 로그인 -> 회원가입 문제는 해결완료
핸드폰 인증 -> 발표 이후에 갑자기 백엔드 서버와의 연결이 끊어져서, 뒤풀이로 바로 이동하지 못하고 우리 팀 급하게 남아 해결을 했다. 해결 완료

개선점 + 그 외에 이제 우리만 알고 있는 (ㅎㅎ) 에러들을 수정하고,
클린 코드를 위한 리팩토링을 하면 좋을 것 같다.

프로젝트를 마무리하며

성장한 점

리더십

오랫만에 리더십을 발휘해야 하는 역할을 맡았다.
대학 졸업하기 전까지는 모임이나 단체의 운영진을 했었지만 졸업 후에는 혼자 공부하고, 혼자 수업을 하는 일이 대부분이었기 때문에 처음에는 단체 생활을 비롯한 팀장직에 자신이 없었다.
게다가 나의 개발 실력이 아직 미숙한 부분이 많다고 생각했기 때문에, 팀 내에서 개발 이슈가 발생하면 해결을 못할까봐 걱정을 많이 했던 것 같다.
하지만 실제로 프로젝트를 진행하다보니 개발 스킬은 공부하고 어떻게든 머리를 모아 같이 해내면 해결이 된다는 것을 알았다. 내가 못하면 다른 팀원에게 도움을 청하고, 다른 팀에게라도 가서 도움을 요청하고.. 지나가는 잘하시는 분들 붙잡고 이야기하고..
그렇게 많은 분들의 도움을 받아 나의 에러, 우리 팀의 에러를 해결해 나갈 수 있었다.
한 달 동안 프론트 멤버들만 이끄는 것이 아니라 백엔드까지 이끌어야 하는 팀장직을 맡으면서,
내 스스로 지키려고 했던 것은

	1. 가장 먼저 와서 가장 늦게 가는 것, 
	2. 팀 내에서 생기는 일은 모두 파악하고 있을 것

이 두 가지였던 것 같다.
아침 일찍 운동도 하러 오시는 민준님과, 아예 강의실에서 거주중이신 영주님이 계셔서 오프라인 출퇴근은 지킬 수 없었지만 하하.
그래서 온라인 디스코드 불이라도 항상 !
우리 멤버 중 한 명이라도 있으면 최대한 같이 있어주고, 가장 일찍, 가장 늦게 끄려고 노력했던 것 같다.

그래서인지 다들 나에게 디스코드 불은 언제꺼지냐고 물어봤었지..
아무튼! 이러한 협업 과정에서 멤버들 케어 잘 하자고 다짐했었고.
다른 팀 사람들이나 우리 팀 사람들이나 팀장 역할 잘 해주었다고 하니 다행이다!
그리고 역시, 이러한 협업 과정에서 가장 중요하고 가장 어려운 것이 바로 소통이라는 것을 깨닫게 되었다.

협업과 소통

백엔드와의 소통, 기획자와의 소통, 디자이너와의 소통, 팀 내의 소통, 다른 팀 사람들과의 소통...
한동안 청소년 친구들 아니면 학부모님들과만 소통해야 했던 내가 또래의 사람들과 잘 지낼 수 있을까 고민도 했었는데,말투나 생각이 부정적이거나 날카로운 사람이 없어서 기본적인 소통은 원활하게 잘 이루어졌던 것 같다.
우리 팀은 소통에서 어려움을 느낀 팀은 아니지만,나의 엄청난 요구사항을 모두 들어주셔야만 했던 팀원분들이 힘들지 않았을까 생각도 든다. 페이스를 나름 조절하려고 노력하긴 했는데, 모두 고생 많았지...
매일 아침에 백과 프론트 모두에게 작업해야 할 것을 정리해서 알려주는데, 보통 저녁시간 전까지 이 일을 다들 마무리하고 그 이후에는 다음 진도 작업을 진행했다.
모두들 자신의 작업 상황을 나에게 공유해주고, 작업이 끝나면 다음 작업 진행 혹은 다른 사람 작업을 도와주며 하루하루를 보냈던 것 같다.
백엔드 멤버 분들의 경우 내가 백엔드 관련 지식이 부족하기 때문에, 항상 어떻게 진행하는지 차근 차근히 설명해주시고 안되는 것은 왜 안되고 있고, 앞으로 무엇을 할 것이고 잘 알려주셨다. 두 분 모두 내 요청서(프론트의 요청을 한 데 묶은)대로 잘 진행해주셔서 나는 모두가 어떤 작업을 진행하는지 상황을 모두 파악 할 수 있었던 것 같다.
오히려 내가 무엇을 하고 있는지 멤버들이 몰랐을 거야..

다른 팀에서 소통으로 인한 어려움을 느끼는 것을 보면서, 프로젝트 중에 커뮤니케이션이 얼마나 중요한 일인지 알게 되었다. 중,고등학교 국어 교육과정에서 '화법'을 배우게 되는데, 이 때 이론적인 것을 열심히 가르치고 시험 문제 내고 했던 것들이 생각난다. 내 삶에서 직접 몸으로 부딪히게 되는 좋은 경험을 할 수 있었던 것 같다.
타인과 소통하는 것을 거부하는 분들에게는 국어 교과서 한 권 가져다 주시길,,,

git과 git flow

부트 캠프 첫 날 git 연결을 못해서 모든 레파지토리를 밀었던 것과 비교하면 정말 많은 성장 아닌가!?
깃 관리자를 맡아 공용 레파지토리의 이슈, 마일스톤, 칸반보드, 회고록 관리 및 pr 확인 후 merge / reject, 브랜치 관리, readme 작성 등등.. 처음에는 git 단어만 들어도 겁 먹었었는데 협업하려면 git 필수라는 것을 알았고..
매일 매일 레포 관리를 하다보니 많이 익숙해진 것 같다. 아직도 많은 명령어를 잘 다루지는 못하지만,
개발자에게 필수인 git과 이렇게 빠르게 친숙해질 수 있어서 좋은 경험!!

개발 및 검색 능력 성장시키기

정말 !! 정말 많은 react 라이브러리와 그 docs를 읽어야했고..
하루 종일 구글링 검색, 깃허브 검색, 유튜브 검색을 해야만 했던 나날이었다.
우리 팀원들이 나에게 검색도 잘하고, 찾은 정보를 우리 팀 프로젝트에 적용하는 능력이 뛰어난 것 같다고 이야기해주었는데 영어 공부를 더 많이했다면 더 잘할 수 있을 것 같다는 생각이 든다...
기본적인 지식 위에 이러한 능력을 쌓으면 좋은데, 시간이 급급하다보니 기본적인 지식을 쌓기는 쉽지 않아 아쉽다. 앞으로의 시간은 기본적인 개발 지식 토양을 탄탄하게 쌓는 시간이 되어야 하지 않을까.
공부하고 싶은 것도, 공부해야하는 것도 아주 많아서 겁나지만 또 설레는 취업 준비 기간이 될 것 같다.

배포 과정에 대한 이해

s3, DNS, router53, cloudFront, EC2 등...
AWS의 배포 서비스들을 속성으로 배워 끊임없는 복습을 하며 배포에 매달려야 했던 2주.
AWS의 묘하게 어색한 한국말 사이에서 배포를 하며 느꼈던 것은 개발자가 단순히 서비스를 만드는 것에 그치지 않고 끊임없이 리팩토링을 하며 클린 코드를 짜는 이유.. 바로 비용!!!!!!! 이러한 서버 사용에 들어가는 네트워크 비용을 줄여주는 개발자가 회사입장에서는 가장 필요한 인재겠구나라는 생각이 들었다.
단순히 localhost에서만 개발을 하는 것이 아니라 배포 과정 및 배포 후에 생기는 에러를 모두 확인 할 줄 아는 개발자가 되어야 겠다고 생각했다.
이번 팀프로젝트에서는 가장 유명한 AWS를 많이 이용했는데 GCP나 Vercel을 활용한 배포도 언젠가 공부해야겠지?

좋은 추억으로 오래오래 기억에 남을 것 같다.

은채

반반무마니

이전 포스트

팀프로젝트 5주차 - [ room : in us ] 발표 회고

다음 포스트

개인 프로젝트 회고

2개의 댓글

이희주

2022년 8월 10일

체고체고입니다

1개의 답글