230718 - [기업협약] 블록체인 지갑 애플리케이션 - NFTin

[기업협약] 블록체인 지갑 애플리케이션 - NFTin

 

https://nftin.site

NFTin

 

서버비용 해결을 위해 잠시 껐습니다. 해결 되면 이 내용 지우겠습니다.

목차

1. 팀원 소개
2. 프로젝트 일정 및 관리
3. 기술 스택
4. 애플리케이션 플로우 차트
5. 깃 전략
6. 배포 아키텍처
7. 테스트 서버와 메인 서버
8. 앱 주요 기능
9. 이슈 사항 및 해결 방안
10. 프로젝트를 하면서 느낀 점 
 

 
 
 

1. 팀원 소개

1-1. 백종환 (팀장) : Main Front-End
 
1-2. 이민수 : Deploy, Back-End, Front-End
 
1-3. 강찬수 :  Back-End, Front-End
 
1-4. 김성희 : Front-End
 

2.  프로젝트 일정 및 관리

 
프로젝트 개발기간은 총 7주간 진행되었습니다.
첫 3일간 기본적인 개발 환경 세팅을 했습니다.
2~3주 차엔 스택에 대한 도메인 지식 습득 및 지갑 프로젝트 설계를 진행하였고, 이 과정에서 컴포넌트와 프로세스를 정의 및 문서화했습니다.
4~6주 차에는 컴포넌트 제작을 시작으로 본격적인 개발을 진행했습니다. 마지막 7주 차에는 에러수정 및 최종점검을 하였습니다.
 
 

3. 기술 스택

프런트와 백엔드 모두 타입스크립트를 기반으로 개발을 진행했습니다.
프론트에서는 리액트를 이용하여 사용자 인터페이스를 구축하였고, 리액트 네이티브와 엑스포를 이용하여 애플리케이션으로 빌드를 진행했습니다. 상태관리를 위해서는 리코일과 리액트 쿼리를 활용하였습니다.
 
백엔드에서는 Nest.JS를 이용했습니다. 그리고 데이터 베이스로는 몽고 DB를 사용하고 Mongoose를 통해 몽고 DB와 상호작용을 간편하게 하였습니다.

인프라 구축을 위해서 테라폼을 이용하여 환경을 구성하였고 배포는 아마존서비스를 이용했습니다.
 
 
 

4. 애플리케이션 플로우 차트

 
애플리케이션의 초기 프로세스입니다. 왼쪽 섹션은 로그인 흐름을 나타내고 있고, 오른쪽으로 넘어오게 되면 로그인 후에 작동하는 기능에 대해서 나타내고 있습니다. 초기 프로세스라 완성하면서 조금 변했습니다.
 

브라우저를 통해 사용자는 화면을 보고 사용자의 요청에 따라 브라우저에서 블록체인 노드로 통신을 할 수 있습니다. 
기본적인 기능은 백서버 없이 가능했지만 백서버를 통해서 S3 프로필 이미지를 저장하거나, 데이터 베이스에 프로필 정보를 저장하였고,
NFT마켓의 데이터베이스와 통신을 하는 목적으로 백서버를 이용하였습니다.
 
 
 

5. Git 전략

이번 프로젝트의 깃 플로우를 간략한 그림으로 표현한 것입니다. 각 개발자들은 개발을 진행하고 Dev 브랜치에 Merge를 진행합니다.

Dev 브랜치는 메인 서버에 내용을 올리기 전에 오류를 확인하기 위한 테스트 브랜치로 Dev 브랜치에 머지가 되면 GitHub Actions에서 감지를 하여 Test 서버에 배포가 진행되고 테스트 도메인으로 접속하여 실제 배포 되기 전 최종 검증을 할 수 있습니다.

검증이 완료된 Dev 브랜치의 코드는 Main 브랜치로 Merge 하여 실제 사이트에 무중단배포가 됩니다.
 
 
 

6. 배포 아키텍처

 
서버 아키텍처를 시각화한 그림입니다. 저희 애플리케이션은 메인 서버를 이중화하여 가운데 그림처럼 유저가 애플리케이션에 접속하면
로드 밸런스에 의해 트래픽을 분산시켜 서버 부하를 최소화했습니다.

이렇게 함으로써 서버의 처리 성능을 향상해 빠른 응답 속도를 유지하고, 유저들이 애플리케이션을 편리하게 사용할 수 있도록 했습니다.

그리고 데이터베이스는 보안을 위해서 프라이빗 네트워크에 위치하여 외부에 노출되지 않고 저희의 백서버만 접근이 가능합니다.
 
 

7. 테스트 서버와 메인 서버

GitHub Actions를 이용하여 테스트서버에 배포를 하는 프로세스입니다. 지속적으로 메인서버에 무중단배포를 하게 될 경우
시간이 오래 걸리는 점과 여러 요청이 있었을 때 에러가 발생할 가능성이 높아진다고 판단했습니다.

빈번한 배포가 진행되는 개발단계에서는 테스트 서버에 업로드를 진행하기로 하여 SCP를 사용하여 배포를 진행했습니다.
 

테스트 서버 배포와 같은 방식으로 Github Actions를 이용하여 빌드를 한 후 빌드가 완료되면 AppSpec 파일과 빌드 폴더를 압축해서 S3에 업로드합니다.

업로드가 완료되면 CodeDeploy에 배포를 요청합니다. 배포 요청을 받은 CodeDeploy는 오토 스케일링 그룹에 블루그린 배포를 요청합니다. 오토 스케일링 그룹은 기존 인스턴스를 복제 후 초기화하는 과정에서 CodeDeploy 에이전트를 설치합니다.

초기화가 완료되면 CodeDeploy 에이전트에서 s3에 업로드된 코드를 다운로드합니다.

생성된 인스턴스에 코드가 전달되면 스크립트를 실행하고 스크립트가 오류가 나지 않으면 기존 서버로 가던 트래픽을 생성된 인스턴스로 전환합니다. 이후 기존에 사용하던 인스턴스를 삭제함으로써 무중단배포가 완료됩니다.
 
 

8. 앱 주요 기능

NFTin 애플리케이션의 주요 기능은 크게 보유한 코인을 확인할 수 있는 메인 페이지, NFT Market팀과 연동된 마켓페이지, 코인정보를 볼 수 있는 트렌드 페이지, 세팅 페이지로 구성되어 있습니다.
 
 

8-1. 로그인 페이지

로그인페이지

처음 방문 시 지갑을 만들기 위해서 새로 생성하는 영역과, 보유하고 있는 니모닉이 있으면 계정을 불러올 수 있습니다.
니모닉은 12 단어로 되어있으며 니모닉을 기준으로 루트계정을 만듭니다.
메인페이지에서 계정 잠금을 통해 계정 생성 과정에서 저장한 비밀번호를 이용하여 로그인할 수 있습니다.
 
 

8-2. 메인 페이지

메인페이지

메인 페이지는 지갑의 기본 기능인 송금하기, 토큰 및 NFT를 가져와서 확인할 수 있는 기능을 포함하고 있습니다.
또한 ThemeProvider을 이용한 DarkMode, LightMode 기능이 있고 QR Scanner를 이용해서 송금하기로 바로 이어지는 기능을 구현하였고 입금받기 버튼은 본인의 계정을 기준으로 QR Code가 생성되며 MetaMask의 QRcode 데이터와 일치시켜 서로 상호 작용할 수 있도록 하였습니다.
 
 

8-3. 마켓 페이지

마켓 페이지

마켓 페이지는 다른 팀에서 발표했던 NFT Market과 연동되어 화면에 그려집니다. 인기 컬렉션과 최근 등록된 컬렉션으로 파트가 나누어져 있으며 각 컬렉션을 누르면 컬렉션 내에 있는 토큰들이 보이고, 토큰의 정보를 확인할 수 있는 페이지도 구현되었습니다.
 
그리고 같은 Contract를 이용하고 있기 때문에 판매 중인 토큰은 앱에서 구매하는 기능이 가능합니다.
 

8-4. 트렌드 페이지

트렌드 페이지

코인 정보를 확인할 수 있는 트렌드 페이지입니다.
주기적으로 정보를 업데이트하여 변동사항을 확인할 수 있으며 각 코인별로 상세 정보를 볼 수 있습니다.
추천 코인은 등락률, 랭킹순, 가격순, 이름순으로 정렬 기능이 있습니다.
 

8-5. 설정 페이지

설정페이지

설정 페이지는 지갑의 네트워크를 변경하는 기능과 NFT Market으로 이동하는 기능이 있으며 계정 삭제 기능을 통해서 계정 삭제가 가능하고, 처음 로그인 페이지에서 생성한 니모닉을 이용하면 같은 계정으로 다시 로그인이 가능하도록 구현하였습니다.
 
 

9. 이슈 사항 및 해결 방안

9-1. Web3 Provider 이슈

프로바이더 문제

네트워크 변경 기능을 백에서 진행하는 경우 모든 사용자의 네트워크가 같이 바뀌기 때문에 원하는 기능을 제대로 쓸 수 없어서
Web3 Provider를 프론트에서 사용하여 노드와의 통신을 프론트에서 진행하도록 하였습니다.
 
그 결과 개별적으로 원하는 네트워크를 이용할 수 있게 되었습니다.
 
 
9-2. Nat Gateway

서버의 DB 인스턴스를 프라이빗 네트워크에 위치시켰기 때문에 인터넷이 불가능했습니다.
DB인스턴스에 몽고 DB 설치를 위해서 인터넷이 필요했기 때문에 외부에서 접근이 불가능한 Nat Gateway를 이용해서 인터넷을 사용할 수 있지만 Nat Gateway는 비용이 비쌌기 때문에 EC2 Instance를 이용해서 DB를 만들었습니다.
 
 
9-3. API 요청 이슈

처음에 트렌드 페이지를 구현하기 위해서 CoinGeko의 API를 이용해서 Coin의 정보를 불러왔습니다.
하지만 CoinGeko에서 무료 API로 요청하는데 횟수제한이 있었습니다.
 
사용자가 많아지고 페이지를 많이 바꾸면서 요청이 많아지면 에러를 발생시켰기 때문에 이를 막기 위해서
백서버에서 주기적으로 CoinGeko에 요청하여 DB에 저장한 후 그 DB데이터를 프론트에 던져주는 방식을 택했습니다.
 
비용을 들여 API가 유료이면 해결될 문제이기도 합니다.
완벽한 실시간 데이터를 얻어올 수는 없지만 최대한 요청간격을 줄여 최신 데이터를 저장할 수 있도록 하였습니다.
 
 

10. 프로젝트를 하면서 느낀 점 

프로젝트가 커지고, 시간이 부족하여 일정을 파악할 때 어려웠었습니다. 하지만 오전과 오후 짧은 회의를 통해서 현재 진행 상황 및 중요도에 따라 작업을 분배하여 진행하다 보니 개발 일정에 맞출 수 있게 되었습니다.
여유 있게 마무리한 것이 아니기 때문에 약간의 에러처리 같은 것이 미흡하였지만 전반적으로 좋은 결과물을 냈던 것 같습니다.
처음 팀장으로서 일정 관리 및 정의서를 작성하는 것이 처음엔 많이 미숙하였지만 꼭 해야 하는 작업이고 이를 통해 더 빠른 작업을 할 수 있다는 것을 느끼게 되었습니다.
 
 
 
 
 
 
 

---