🧐 특화 프로젝트?
특화 프로젝트는 싸피 2학기의 두 번째 프로젝트이다!
아래 10개의 도메인 중 하나의 도메인을 선택해서 진행하는데 우리 팀은 블록체인(P2P 거래)를 선택했다.
우린 아직 아이디어를 정하지 않은 상태였기 때문에 다른 도메인을 선택하면 기획에 제한을 받을 것이라 생각했다.
기획이 막막해서 저 중엔 그래도 블록체인이 범용성이 높지 않을까..라는 생각에 블록체인을 선택했는데 님아 그 강을 건너지 마오
📑 설계
1. 사용자 역할
공통 프로젝트에서도 사용자 역할이 3개였는데.. 어쩌다보니 또 사용자 역할이 3개였다.
그래도 공통 프로젝트에서는 원장님과 선생님이 같은 페이지를 보면서도 다르게 보여줘야 하는 귀찮은 게 많았는데, 다행히 특화 프로젝트에서는 분리된 역할이라 괜찮긴 했다..ㅎㅎ
예외 케이스가 발생하지 않도록 사용자 역할에 따라 꼼꼼히 점검했다.
2. 화면 설계
이전 프로젝트에서 설계를 오래 해서 고생했는데.. 이번에는 설계가 이전보다 일찍 끝났다. 특히 Figma를 양 대비 일찍 끝난 거 같아서 좋았다..ㅎㅎ
팀원들 모두 Figma만 너무 붙잡고 싶지 않아서 우선순위 최하위인 페이지는 제외하고 빠르게 페이지를 설계한 뒤 개발에 들어갔다.
3. 컴포넌트 설계
프론트엔드 팀원이 세명이었는데, 나와 공통 프로젝트에서 같은 팀이었던 팀원이 그대로 팀을 구성해서 익숙한 Atomic Design을 적용했다. 이번에는 설계할 때 atom, molecule, organism을 구분하지 않고 본인이 담당한 페이지에 있는 컴포넌트를 그때그때 나누면서 진행했다. 헷갈리는 게 있다면 그때 팀원들과 상의하는 식으로 했다.
🧱 블록체인
사실 처음에 블록체인이라는 도메인을 선택했을 때는 도메인에 구속받지 않고도 우리가 원하는 기획을 내기 위해서였다. 그래서 블록체인을 선택하면 DID를 추가한다던가 하는 방식으로 진행하면 되지 않을까 싶었다.
하지만 막상 특화 프로젝트를 시작하고 기획에 들어가니 .. 블록체인에 제약을 받았다. 블록체인을 블록체인답게 쓰기 위해 많은 주제를 고민했고, 어느 정도 타협한 부분도 있었다.
특화 프로젝트는 기술적인 정당성이 중요하다 보니 기존 오프라인 비즈니스를 신기술로 해결할 수 있는 방법을 고민했다. 블록체인의 컨트랙트 개념을 활용하고 싶어 '수익 분배' 기능에서 컨트랙트를 적용하였다.
상황 상 실제 이더리움 가스비를 지불해 가며 프로젝트를 하는 것은 어렵기에 싸피에서 가스비가 존재하지 않는 특수한 private network를 제공한다.
완전한 DApp(Decentralized Application)은 사용자가 MetaMast 같은 지갑 앱을 설치해야 하는데 이는 사용성이 너무 떨어진다고 생각했다. 또한, 우리가 프로젝트를 모바일(pwa) 쪽으로 생각하면서 백엔드에서 자체적으로 지갑을 발급하는 쪽으로 정했다.
🖥️ 프론트엔드 개발
1. Next.js 도입
이번 프로젝트는 처음으로 Next.js를 사용했는데 Next.js여서 좋은 점도 있었지만 어려운 점도 있었다.
가장 좋았던 건 라우팅이 편하다는 것..! React 쓸 때는 페이지 경로 다 지정해 주고 중간에 바뀌면 다 바꿔주고 귀찮았는데 Next.js는 자동으로 해주니 너무 편하다.
모달도 라우팅(Parallel-Routes, Intercepting-Route)만으로 구현할 수 있고, PWA도 라이브러리를 사용하지 않아도 Next.js에서 지원한다.
다만, 처음 써보는 거다 보니 어려웠다.. SSR을 크게 고려하지 않으면 그렇게 어려울 건 없긴 한데, SSR을 고려하려고 하다 보니 어려워서 후반에는 'use client'를 연발하기도 했다..
아직 배움이 부족해서 Next.js를 제대로 활용하지 못하고 있는 거 같아 아쉬웠고 React부터 완벽하게 알아야겠다는 생각이 들기도 했다.
2. 로딩 경험 개선
이전 프로젝트에서는 로딩할 때 화면에 Loading Spinner를 꽉 채웠었는데, 그게 답답해 보여서 개선하고 싶었다. 그래서 이번에는 Skeleton을 적용하여 사용자가 로딩 중임을 인식할 수 있도록 하였다. 페이지에 따라 Skeleton, Loading Spinner를 선택적으로 사용했다. 예를 들어, 목록을 보여줄 때는 Skeleton이 어울렸지만 글 작성 요청을 기다릴 때는 Loading Spinner가 어울렸다.
3. Web Push 적용
블록체인 네트워크와의 통신이 오래 걸리다 보니 로딩이 길 경우 약 15초 동안도 이어지게 되었다. 그래서 그 시간 동안 사용자가 아무것도 못하고 기다리는 것은 너무 불편하다고 생각했다. 그래서 Web Push를 통해 요청이 완료되면 알림을 보내도록 했다. 예를 들어, 사용자가 공연을 예매할 때, 공연 티켓을 결제하면 결제 완료가 아닌 결제 요청 완료라고 알려준다. 그 후에 블록체인 통신이 수행되면 사용자에게 결제 완료 알림을 보낸다.
4. 상태 관리 및 API 연동
이전에 상태 관리 라이브러리로 Recoil을 사용했었는데 이제 잘 사용하지 않는다고 하여 이번엔 Zustand를 사용했다. Next.js는 fetch 사용을 권장해서 axios는 사용하지 않았다. axios와 달리 fetch는 baseUrl 설정, default header 설정, json serialize/deserialize 등의 기능들이 없어 fetch를 커스텀해서 사용했다.
Next.js의 fetch는 캐싱을 지원해서 react query가 필요 없는 게 아닌가 고민했는데 fetch의 캐싱과 react query의 캐싱은 다르다고 하고 모바일 환경을 고려해서 무한 스크롤을 적용하기로 했기에 react query도 함께 사용했다.
5. API Mocking
우리 팀은 블록체인을 백엔드에서 맡았다. 블록체인 로직은 다 뒷단에서 이루어지다 보니 사실 프론트엔드는 블록체인 프로젝트라고 다르진 않았다. 이전 프로젝트에서는 프론트엔드는 API 연동 전에 UI부터 짜야하니 프론트엔드가 API 연동을 할 때쯤이면 백엔드에서도 API가 어느 정도 나왔을 때라 API Mocking을 고려하지 않았었다. 하지만 이번 프로젝트는 블록체인이라는 도메인을 처음 접하다 보니 다른 프로젝트를 진행할 때보다 백엔드 개발이 늦어졌다.
이전에는 API Mocking을 시도하는 것이 오히려 시간이 드는 일이라고 생각했는데 이번에는 API Mocking을 통해 중간에 붕 뜨는 시간을 막을 수 있을 거 같아 MSW(Mock Service Worker)를 도입했다. (오히려 MSW를 써볼 수 있어서 좋다고 생각했다.)
MSW를 활용해서 실제 API가 준비되기 전에 목업 데이터를 사용해 페이지를 완성할 수 있었다.
6. 기타
TypeScript, Tailwind CSS, Storybook 등은 이전 프로젝트와 똑같이 사용했다.
📖 프로젝트 소개
🎵 주제
스마트 컨트랙트 기반 밴드 공연 티케팅 서비스
🎵 서비스 화면
- 공연 등록
공연 관리자가 뮤지션들을 선택해서 공연을 등록하면 해당 뮤지션들에게 공연 수락 요청이 간다. 뮤지션들은 공연 요청을 확인하고 승인하거나 거절한다. 모든 뮤지션이 승인을 완료하면 티케팅 날짜에 공연이 공개된다.
- 공연 예매
관객들은 공연들을 보고 원하는 공연을 예매한다. 공연을 예매할 때는 최애 밴드를 선택해야 하는 게 선택한 밴드에게 보너스 수익이 간다.
- 입장 처리
공연 관리자는 관객의 티켓을 스캔하여 사용 처리 할 수 있다.
추가로 블록체인 거래 기록은 모두 트랜잭션 페이지에서 투명하게 확인할 수 있다.
- 포토카드
관람한 공연은 NFT 포토카드 생성이 가능하다. 제작한 포토카드는 카카오톡으로 공유할 수 있다.
🎵 서비스 특징
- 스마트 컨트랙트 기반의 수익 분배
우리 서비스의 핵심 기능은 '정당한 수익 분배'이다. 이를 위해 공연 관리자는 공연을 등록할 때 공연장, 뮤지션, 보너스 각각의 금액을 설정하며 관객들은 공연을 예매할 때 최애 밴드를 선택한다.
공연 이후에 공연 관리자가 정산을 요청하면 아래 User Flow대로 공연 관리자와 뮤지션에게 수익이 분배된다.
- NFT 포토카드
관객이 관람한 공연을 기념하기 위해 포토카드를 NFT화했다.
뮤지션이 공연을 승인할 때, 싸인을 하도록 한다. 관객이 포토카드를 제작할 때, 공연 예매 시 선택한 최애 밴드의 싸인만 스티커로 쓸 수 있다.
🏆 우수팀 선정
특화 프로젝트 반 1등했당! 상장은 아직 안 나왔어용
정다빈 크루(JDBC) 최고 👍
최강 프엔 혁준오빠, 병서오빠 그리고 최강 백엔 경호오빠, 세빈오빠, 유빈오빠 모두 고생하셨습니당😎
'SSAFY' 카테고리의 다른 글
| [SSAFY] 특화 프로젝트 우수팀 인터뷰 (1) | 2024.11.19 |
|---|---|
| [SSAFY] 수료 앨범 촬영 후기 (시현하다 비즈니스 단체 촬영) (6) | 2024.10.31 |
| [SSAFY] 11기 2학기 공통 프로젝트 (+ 우수팀 선정, 반 1등) (1) | 2024.09.19 |
| [SSAFY] 11기 1학기 관통 프로젝트 (+ 최우수상) (1) | 2024.06.26 |
| Notion으로 알고리즘 정리하기 (+ 템플릿 공유) (2) | 2024.04.16 |
