투표형 투자 정보 플랫폼 웨일링🐳 개발 회고

21년도 9월부터 시작했던 신촌 연합 IT 창업동아리 CEOS의 활동을 마무리 짓게 되었다.
아이디어톤을 통해 총 5가지 아이템이 선정되고, 팀은 총 8명(기획2/디자인2/백엔드2/프론트엔드2) 으로 구성된다. 기획, 디자인, 백엔드 개발자와 모두 협업해볼 수 있는 좋은 기회였다.🙂

🐳웨일링 소개

웨일링의 소개를 하자면, 누구나 투자 확신이 한 눈에 생기는 투표형 투자 정보 플랫폼, 투자 정보 공유를 위한 가장 간편하고 믿을 수 있는 고래가 아주 귀여운 서비스라고 말 할 수 있다.

웨일링이 추구하는 가치는 총 3가지인데,

개방성: 간결화된 투표양식으로 누구나 쉽게
직관성: 다양한 시각자료로 한 눈에
신용성: 적중률 시스템으로 믿을 수 있게

이라고 말 할 수 있다.

개발 과정

프로젝트를 진행하면서 내가 집중하고자 했던 부분은 컴포넌트의 재사용성과 상태관리이다. 다른 프론트엔드 개발자가 초기 세팅으로 디자인시스템과 재사용될만한 컴포넌트들을 만들어줬는데, 정말 편하게 개발 할 수 있었고 많이 배울 수 있었다.

✨기술 스택

• framework: React with Typescript
• state management: redux, redux-thunk with typesafe actions
• data fetching: axios
• style: styled-components
• react-router, @nivo/pie, swiper

🔨기능

1) 투표 생성 기능

유저가 선택할 수 있는 항목은 총 4가지(종목/기간/얼만큼/변동사항)이다. 처음에는 각 항목마다 상태를 만들고 추가하는 방식이었는데 너무 비효율적인거 같아서 아래와 같이 value라는 state에 지정을 하고 answer이라는 state에 추가해주는 방식으로 바꿨다.

setAnswer({ ...answer, coinCode: value })

투표 생성 페이지는 중복 사용 되는 컴포넌트를 줄이기 위해 index.ts에 모든 뼈대를 잡아놓고 step이라는 변수를 둬서 해당 step에 맞는 페이지를 렌더링 하게끔 구성했다.

실행화면

2) 투표 기능

유저가 예/아니오 버튼을 누르면 투표를 진행할지/말지 선택하는 버튼이 나온다. 투표를 하면 현재 투표 상황과 적중률 70%이상의 유저들의 선택을 확인할 수 있다.
우리 서비스에 사용된 그래프는 막대그래프와 원그래프 두 가지인데 막대그래프는 쉽게 구현할 수 있었고 원그래프는 @nivo/pie를 사용하였다.

실행화면

3) 투표 결과 확인

트래킹 기간이 끝나면 투표 결과를 확인할 수 있는데, 해당 코인의 초기 시점 가격과 끝날 때의 가격, 그리고 적중여부를 보여준다. 정말 유능한 백엔드 개발자와 함께해서 실시간으로 코인 정보를 끌어올 수 있었다 👍

실행화면

4) 카카오톡 로그인

이 부분은 다른 프론트엔드 개발자가 담당했다. access token과 refresh token을 관리하는 방식을 사용했다.

5) 검색기능

예전에 구현해놨던 검색 기능이 있어서 쉽게 구현할 수 있었다.

6) 마이페이지

마이페이지에서는 다음과 같은 기능이 있다.

• 나의 적중률 확인
• 보유 고래밥 수 확인
• 내가 참여/생성한 투표 보기
• 튜토리얼

모두 쉽게 구현할 수 있는 기능들이었다. 튜토리얼은 디자이너들이 넘겨준 gif파일을 캐러셀처럼 보여주는 것이었는데, 처음에는 슬라이더를 구현해볼까 하다가 시간이 없어서 react swiper을 사용해서 간편하게 구현했다.

그외에 자잘한 기능들은 스킵하도록 하겠다.. ^^;

🐛에러 해결

인스타 광고를 진행해야 했기 때문에 급하게 빌드를 했고 하루에 약 40개의 에러를 처리하고 있는 나를 발견했다..^_^ 유저들이 실제로 사용해야 했기 때문에 완벽한 서비스를 만들고자 했다. 최소한 기능적으로 에러가 없는

(이게 모두 하루동안 나온 에러들이다.)
심지어 이 때 설날이었는데 쉬지도 못하고 하루 종일 에러만 해결하고 있었다..
아무튼 팀원들이 스프레드시트에 에러를 제보해주면 지라 bug report 보드에 이슈를 생성해서 작업하고 싶은 사람들이 자율적으로 가져가서 해결하는 식으로 진행했다. 해결하지 못하면 조용히 이름을 떼고..

👩‍👩‍👦‍👦협업

0) Figma

디자이너들과의 소통은 피그마로 이루어졌다. 디자이너들이 만들어놓은 uiux를 보고 댓글로 피드백을 주고 받았다.

1) 노션

한 노션 스페이스에 기획/디자인/개발 팀을 나눠 문서를 작성했다. 개발팀은 주로 회의록 및 설계 계획서, 커밋룰, 네이밍 컨벤션, api 문서 작성 등으로 사용했다.

2) 슬랙

공지사항/기획/디자인/개발/ask-dev/ask-designer 등의 다양한 스페이스를 만들어서 소통했다. 스레드를 만들 수 있어서 이야기가 섞이지 않는다는 점이 좋았다. 팀원들에게 OO최고라는 이모지도 만들어줬다 ^_^

3) JIRA

페이지를 기준으로 에픽을 만들고 그 안에서 만들어야 하는 기능들을 이슈로 생성해서 진행했다. 그리고 우리팀에서 정한 커밋 컨벤션은 아래와 같다.

[WHAL-이슈번호] feat: commit message

지라를 사용하면 누가 어떤 기능을 해결하고 있는지 확인할 수 있어서 좋았다.

🤔느낀점

이 프로젝트로 인해 내 한계를 끌어내는 경험을 한 것 같다. 이거 못할거 같은데.. 싶은 것도 사람이 급해지니까 어떻게든 구현을 하더라..😇
일단 조건이 굉장히 많았기 때문에 분기처리하는게 정말 힘들었다..(진행중/완료된/트래킹완료된 투표, 유저의 선택 등등등) 그래서 코드를 보면 어디까지 내려가는거에요? 싶은 구간들이 많고, 왜 이런 조건이 필요하지?싶은 부분도 많다. 짧은 개발 시간이라 일단 급한대로 처리를 했지만 나중에 리팩토링이 필요한 곳들이 많이 보인다.
좋았던 점은 우선 유능한 백엔드 개발자들과 함께해서 빠른 api 생성/수정, 빠른 빌드, 빠른 에러 해결이 이루어졌다는 것. 그리고 함께했던 프론트엔드 개발자에게 타입스크립트로 기깔나게 코드 짜는 방법을 많이 배울 수 있었다.
큰 프로젝트에서 typescript와 redux와 redux-thunk를 처음 써봤는데, 엄청난 삽질을 했기 때문에..ㅎㅎ 그 삽질을 하면서 많이 배울 수 있었던거 같다. 다음에는 더 잘 쓸 수 있을거 같은 기분? 🤔아무튼 정말 큰 성장을 할 수 있던 프로젝트였다.

Github🐳

웨일링 깃허브 보러가기