[프로젝트 회고] - Flowering

 

1월 3일부터 2월 16일까지 6주동안 진행한 프로젝트 회고글입니다.

 

🏃‍♂️ 프로젝트 시작

약 한 달 동안 리액트를 학습하고 프로젝트 기간이 되어 배웠던 내용을 바탕으로 6주동안 프로젝트를 진행했습니다. 이번 프로젝트는 webRTC 기술을 사용해야 한다는 요구사항이 있었고 팀원들과 어떤 프로젝트를 하면 좋을까 기획 단계에서 고민을 했습니다. 처음에는 나온 아이디어 중 하나인 데이팅 서비스를 하려고 했지만 주변의 부정적인 피드백과 부작용을 고려해서 다른 아이디어로 변경하게 되었습니다.

그러던 중, 자신에게 맞는 그루밍 방법을 잘 모르는 사람들에게 온라인에서 컨설팅을 해주면 어떨까 라는 아이디어를 가지고 뷰티 컨설팅 플랫폼을 만들게 되었습니다.

 

🚩 프로젝트를 하면서 신경쓴점

• 문서화
• 스크럼 및 스프린트 회고
• JIRA

문서화

페이지 명세, API 명세, 버그리포트 등을 만들어서 현재 진행상황을 표시하고 협업에 용이하도록 하였습니다. 또한 Styled-Components를 먼저 공부하고 문서화하여 팀원들이 뒤에 따라오기 쉽게 하였습니다. 

 

페이지 명세서 일부

 

API 명세서 일부

 

버그 리포트

 

팀원들을 위한 Styled-Components

 

스크럼 및 스프린트 회고

매일 데일리 스크럼을 통해 아침 9시에 구성원 각자가 할 일, 현재 처한 문제점 등을 공유했습니다. 그리고 매주 금요일 스프린트 회고의 KPT방식을 통해 각자 느낀점들을 공유하고 서로 격려도 하였습니다.

스프린트 회고

 

JIRA

JIRA를 사용해 어떤 구성원이 무엇을 담당하고 있는지 현재 진행상황을 알기 쉽도록 하였습니다. 이를 통해 Agile 방법론 기반의 팀 프로젝트를 진행하는 경험을 하였습니다.

 

💡 프로젝트 소개

자신에게 맞는 피부타입, 화장법 등을 컨설팅 해주는 AI 기반의 퍼스널 뷰티 컨설팅 서비스입니다

 

🏦 시스템 아키텍처

 

 

시스템 아키텍처는 위와 같습니다.

 

• 회원가입
• 로그인
• 메인
• 설문
• 설문 결과
• 사진 촬영
• 결과 보고서
• 결제
• 관리자
• 예약창
• 커뮤니티 페이지
• 마이페이지
• FAQ

크게 이 13가지 페이지를 구현하였습니다.

 

🔍 주요 기능들

설문기능

 

 

컨설팅을 예약을 하면 설문이 시작됩니다. 미리 준비된 질문들의 답을 고르고 제출을 합니다.

 

설문 결과 기능

 

제출한 설문을 바탕으로 나의 피부 타입을 알려줍니다. 피부 타입은 MBTI 형식으로 16가지의 종류가 있습니다.

 

사진 촬영

 

 

사진 촬영을 하게 됩니다. 사진 촬영을 하면 이를 바탕으로 분석을 해줍니다.

 

📄 프로젝트에서 맡은 역할

이번 프로젝트에서 온전히 제가 담당한 부분은 회원가입, 로그인, 네비게이션 바, 예약페이지, 기획, 피그마 목업 디자인 입니다. 그리고 팀원들의 도움이 필요한 곳 모든 부분을 전반적으로 담당했습니다. 또한 컴포넌트화를 어떤 기준으로, 어떤 수준까지 해야하는지 고민하고 구현했습니다.

 

기획

기획서 일부

 

피그마

 

기획한 내용을 바탕으로 피그마 디자인을 진행하였습니다.

 

회원가입

 

회원가입의 경우 이메일 입력을 하고 인증 요청 메일을 통해 인증을 합니다. 인증을 한 후 형식에 맞는 비밀번호를 입력하면 안내 문구의 색상이 분홍색으로 바뀌면서 다음을 누르면 회원가입이 완료됩니다. 형식에 맞지 않을 경우 다음 버튼이 활성화 되지 않으며 클릭할 수 없습니다.

 

비밀번호 형식 유효성 검사는 정규 표현식으로 해주었습니다.

로그인

 

로그인의 경우 이메일, 비밀번호가 일치하지 않으면 경고 문구를 띄웁니다.

일치하면 isAuthenticated 변수가 true로 바뀌며 홈 화면으로 이동하면서 로그인이 완료됩니다.

 

네비게이션 바

 

로그인 로그아웃 상태에 따라 네비게이션 바의 텍스트 표시를 달리 해주었습니다.

그리고 텍스트 로고를 클릭하면 홈 화면으로 이동하도록 구현하였습니다.

 

예약 페이지

 

예약 페이지는 react-calendar 라이브러리를 활용했습니다.

오늘 날짜보다 이전 날짜, 이미 예약된 시간은 비활성화 처리 하였고 한 버튼만 클릭할 수 있도록 만들어서 원활한 예약이 이루어지도록 만들었습니다.

 

⭐ 프로젝트를 하면서 기술적으로 배운 점

• React의 데이터 흐름 파악. prop으로 데이터가 어떤 방식으로 흘러가는지.
• Styled-Components 라이브러리의 활용을 통해 CSS-in-JS를 React에서 활용하는 방법.
• axios 통신을 할 때 useEffect를 사용하면 약간의 최적화가 가능하다는 점.

 

🌧 아쉬웠던 점

• 단일 책임 원칙을 고려하며 기능 구현을 하지 못한 점. 시간이 지나고 점차 기능이 추가되면서 한 컴포넌트에서 여러가지 일을 하는 현상이 발생.
• 일정이 촉박하여 기능 구현에 집중하느라 리팩토링을 하지 못한점.
• redux에 대한 이해도

 

🌈 느낀점

이번 프로젝트를 하면서 처음 사용해보는 CSS라이브러리, 상태관리 라이브러리에 대한 학습을 할 수 있었습니다. 또한 컴포넌트 구조에 대한 고민, 단일 책임 원칙, 컨벤션이 왜 중요한지 직접 느낄 수 있었습니다.