Project 2: Incentive Community 클론 코딩 회고

Intro

블록체인 부트캠프 두 번째 프로젝트. 인센티브 기반 커뮤니티를 개발해보았다.

❓ 인센티브 기반 커뮤니티
자체적인 토큰을 가지고 참여자를 유도하는 커뮤니티 생태계로, 사용자가 어떤 행동을 했을 때 토큰을 인센티브로 지급한다.

 

주제

우리 팀은 인센티브 기반 커뮤니티라는 주제를 조금 더 develop해, 사용자들이 질문을 올리고 거기에 대한 답변을 작성해 질문자에게 채택이 되면 보상으로 토큰을 제공하는 컨셉의 커뮤니티 서비스를 개발하였다.

 

1. 기획 과정

1.1 문서

노션을 활용하여 필요한 문서를 정리하였다.

1.2 요구사항 & 기능명세서

인센티브 커뮤니티(IC)는 특정한 주제를 좋아하는 사람들이 모여서 게시글을 작성하는 곳. 특정 주제를 좋아하는 사람들이 모여서 정보와 일상을 나누며 활발한 웹페이지가 되는 것이 목표.

• 사용자가 커뮤니티에 게시글 작성할 때마다 IC 토큰을 보상으로 받는다.
• 해당 IC 토큰은 타인에게 전송 가능하다.
• IC 토큰을 사용하여 NFT 민팅을 할 수 있다.
• 해당 NFT는 유저가 원하는 사진으로 만든다.
• 마이페이지에서 내가 받은 IC 토큰의 개수와 내가 구입한 NFT를 확인할 수 있다.
• 마이페이지에서 내가 쓴 글을 볼 수 있다.
• 마이페이지에서 타인에게 내가 가진 토큰을 줄 수 있다.

요구 사항은 Bare-Minimum, Advance, Nightmare로 구분하여 작성하였다. 요구사항을 바탕으로 프론트엔드, 백엔드에서 각각 해야 할 task 목록도 작성하였다.

1.3 Wireframe

서로 소통한 내용이 맞는지 확인하기 위해 아이패드로 간단하게 와이어프레임도 작성하였다.

1.4 Flow Chart

기획한 내용을 바탕으로 User Journey를 작성하였다. 그리고 이것을 Flow Chart로 도식화하였다.

 

1.5 ERD

이번 프로젝트에서는 체계적인 데이터 관리를 위하여 관계형 데이터베이스를 사용하기로 했다. 이를 위해 ERD를 작성하여 데이터베이스를 구조화하였으며, MySQL과 Sequelize로 개발을 하였다.

 

2. 개발 과정

2.1 주요 기능

서비스의 주요한 기능은 다음과 같다.

• 질문 및 답변 작성: 질문을 작성하고, 질문에 대한 답변을 달 수 있다.
• 토큰 보상: 채택된 댓글의 작성자에게는 커뮤니티 토큰이 보상으로 지급된다.
• 민팅: 이미지를 NFT화 할 수 있다.
• 마이페이지: 사용자의 정보를 확인할 수 있을 뿐만 아니라, 토큰을 다른 사용자에게 전송하는 등의 기능도 있다.

2.2 업무 분배

우리 팀은 총 4명으로 구성되었다. front-end 2명, 그리고 블록체인 contract를 포함한 back-end 개발 2명으로 업무를 분배하였다. 나는 프론트엔드 개발을 하였으며, 내가 맡은 기능은 다음과 같다.

• 질문 및 답변: 질문과 답변을 작성하고, 답변을 채택하는 커뮤니티 주요 기능을 개발하였다.
  
  • pagination을 라이브러리를 사용하지 않고, 직접 코드를 구현한 것도 challenging한 일이었다.
• 회원 관리: 회원가입 및 로그인 페이지를 개발하고, 사용자 정보를 redux-persist를 활용해 관리하였다.
  
  • 사용자 정보를 처음에는 token, session 등을 활용해 관리하려고 했지만, 시간 상 이 부분은 포기하였다.
• MyPage:사용자 정보, NFT 리스트, 토큰 전송 등을 포함하는 페이지
• Navbar: router를 사용하여 다른 페이지로 이동할 수 있다.

2.3 폴더 구조

React 프로젝트의 폴더 구조는 다음 그림과 같다.

Client 폴더 구조는 apis, assets, components, pages, redux 등으로 구분하였으며, 페이지 수가 많아 각 폴더 별로도 account, post 등 세부 기능 단위로 폴더를 구분하였다.

2.4 스크럼

우리 팀은 매일 11시와 16시에 스크럼을 진행했다. 일을 하시는 팀원 분이 한 분 있어서, 그 분의 스케줄을 맞추어 스크림 시간을 조정하게 되었는데, 이때문에 11시부터 16시까지는 보다 더 집중해서 개발을 할 수 있었던 것 같다. 스크럼 시간에는 각자가 작업한 내용, 현재 직면한 문제 상황 등을 공유하며 협업을 강화하였다.

2.5 API 문서

API 문서에 method, request에 필요한 데이터, response 데이터 등을 명시해서 체계적으로 문서화하였다. 짧은 시간 안에 빠르게 퍼포먼스를 내는 것이 중요하다고 생각해 Swagger, GitBook 대신 Notion에 표로 작성하여 프론트엔드-백엔드 간 소통을 하였다.

 

3. 서비스

개발한 서비스 페이지는 다음과 같다.

1. Home: 메인 페이지이자 질문 리스트가 표시되는 페이지

2. Post Detail: 질문 상세 내용을 확인하고, 질문에 대한 답변을 확인할 수 있다.

질문 작성자는 답변 중 마음에 드는 답변을 채택할 수 있다. 채택된 댓글은 하이라이트 표시가 되며, 보상으로 커뮤니티 토큰을 지급한다.

3. Market: NFT 작품을 민팅할 수 있다.

4. MyPage: 사용자의 정보를 확인할 수 있다. 또한, 사용자가 보유한 토큰을 다른 사용자에게 전송할 수도 있다.

 

4. 기술적 메모

4.1 기술 스택

기술 스택은 다음과 같다.

프론트엔드: React, node.js, CSS3
백엔드: Express.js, MySQL, Sequelize
블록체인: Etehreum Blockchain, Ganache, Truffle, web3.js

4.2 작성 코드

작성 코드는 github repository에서 확인할 수 있다.