첫 회의
- 백엔드 개발자 1명
- 프론트엔드 개발자 2명
- 디자이너 3명
이렇게 총 6명의 사람들이 모여 서비스를 기획하고 개발해서 홍보까지 하는 목표로 첫 회의를 진행했다.
각자 멀리 떨어져 있었기 때문에 구글 미트를 통해 온라인으로 만났다.
각자 준비해온 아이디어를 발표하고 총 7개의 아이디어 중에 한개를 정했다.
채택된 아이디어
💘 이상형 리스트 (현 연애서류합)
서비스 목적
- 마음에 안드는 사람과의 불편한 소개팅 상황을 방지하기 위함
제공할 기능
- 사용자가 소개팅 상대에게 궁금한 점을 선택해
질문지를 링크를 보낸다. - 답변을 기다리는 동안 내가 만든 질문지에 대한
이상형 기준(aka.원하는 답변)을 입력한다. - 상대방은 기본적인 인적사항과 함께 질문지에 대한 답변을 보낸다.
- 사용자가 도착한 답변을 열어 봤을 때
이상형 기준과상대방의 답변을 비교 분석하여 궁합도를 보여준다.
팀명은?
어떤 서비스를 만들지 정한 후에 팀명을 정했는데
서비스 이용자들에게 오작교 역할을 하자는 의미로
🐦 까까들 - 까마귀와 까치들
이라고 이름을 지었다.
기획부터 디자인
🖋 Figma
6명 인원 모두 다 같이 매주 구글미트로 회의를 진행하며 기능을 정리하고
Figma에 와이어프레임 작업과 디자인 작업을 시작했다.
모든 팀원의 의견을 반영해 진행하다보니 2~3개월의 시간이 걸렸지만
모두가 서비스에 애정을 가지고 개발을 할 수 있는 원동력이 되었던 것 같다.
프론트엔드 개발
⚒️ 사용 기술
React React-Query Recoil
Styled-Components Lottie
Prettier Eslint
작업 기간
총 기간 : 2023.03 ~ 2023.06 (12주)
코딩리스트
테스트
- 베타 테스트 : 약 4주
- 알파 테스트 : 약 1주
⭐️ 나의 역할
프론트 쪽은 나를 포함해서 2명이서 함께 작업을 했기 때문에
작업 초반에 마크업 구조를 잡고 공통 컴포넌트를 미리 나누어 작업하기로 했는데,
웹 퍼블리셔로 일했던 경험을 살려서 해당 부분을 주로 담당하여 작업했다.
주요 작업
- 로그인, 회원가입 등 유저 관련 기능 구현
- 질문지 생성, 내 기준 변경 기능 구현
- 공통 컴포넌트 구현 (해더, 모달, 토스트팝업 등)
- 반응형 UI 구현
🔥 어려웠던 점 & 아쉬운 점
-
프레임워크를 사용하여 여러 페이지가 있는 프로젝트를 개발해본 경험이 적다보니 일반적인 프로젝트의
파일 구조라던지 효과적인디자인 패턴에 대한 지식이 부족한 점이 아쉬웠다.
그래서 처음부터 컴포넌트들을 효과적으로 분리하지 못하고 점점 한 파일에 여러가지 기능이 추가되며 코드를 직접 짠 나 조차도 이게 어떤 코드인지 이해하지 못하는 상황이 많이 생겼었다. -
styled-component를 사용하며 모든 스타일이 있는 태그에 스타일 컴포넌트를 생성하여 가독성이 떨어지는 코드를 작성하게 되었다.
관련 글들을 참고하여 리팩토링을 진행할 때 더 가독성 있는 코드로 개선하고 싶다.
📎 styled-components 네이밍 컨벤션 관련 글
📚 배운 점 & 느낀 점
-
화면 구현 뿐만 아니라 API를 호출하여 데이터를 다루는 것이 특히 재미있었고 익숙하지 않은 일에 대한 두려움을 없앨 수 있었다.
-
특히
React-Query를 사용해 본 것이 좋았다.
axios만 사용해서 데이터를 처리할 때보다 코드가 간결해지고 fetch, loading 처리가 훨씬 직관적이어서 편리했다.React-Query는 다음 프로젝트에서도 사용하고 싶은 라이브러리였다. -
회원가입 - 로그인 - 유저 정보 변경 - 회원탈퇴의 과정을 작업하며 토큰 기반의 로그인 인증 방식에 대해 작업해 볼 수 있었고, 토큰을 어디에 저장할지에 대한 고민과 그에 대한 장단점에 대해 생각해 볼 수 있었다. -
백엔드 개발자와의 협업을 통해
swagger같은 API 자동화 문서를 경험할 수 있었다.
💭 마무리
개발기간은 3달, 기획 단계까지 합치면 대략 5~6개월의 기간이 걸린 프로젝트였다.
프론트엔드 개발자로서 공부를 제대로 시작할 수 있도록 발판이 되어 준 프로젝트였기 때문에 애착이 간다.
배포 이후에는 함께 작업할 수 없는 상황이라서 각자 리팩토링을 통해 공부하는 자료로 쓰기로 했다.
혼자 하는 프로젝트가 아니기에 팀원끼리 서로 부족한 부분을 채워주고, 아는 것은 공유할 수 있는 의미 있는 시간이었다. 👍
연애서류합이 궁금하신가요?
💘 연애서류합 체험하기
📎 Github 구경하기
