플러스프로젝트 배경
프로젝트 배경
1) 문제점
- 기존 클레이스왑 UI/UX가 직관적이지 않아 신규 사용자의 접근성이 낮음
- 복잡한 디파이 기능(스왑, 예치, 파밍 등) 이용 시 화면 전환이 많아 사용자 경험이 떨어짐
- 실시간 데이터 반영 속도가 느려 사용자 신뢰도에 영향을 미침
2) 프로젝트 목표
- 클레이스왑 프론트엔드 리뉴얼을 통해 직관적이고 효율적인 UI/UX 제공
- 스왑, 예치, 파밍 등 주요 기능을 원활히 이용할 수 있는 사용자 중심 화면 설계
- 실시간 데이터 반영 및 시각화를 통해 사용자 신뢰도와 편의성 강화
3) 주안점
- React 기반 프론트엔드 개발로 컴포넌트화 및 재사용성 극대화
- Web3 라이브러리 연동을 통한 지갑 연결 및 온체인 데이터 처리 구현
- 반응형 디자인 적용으로 PC·모바일 환경 모두 최적화
- 실시간 거래 데이터 및 유동성 변화를 **차트/그래프 시각화**로 제공
1) 문제점
- 기존 클레이스왑 UI/UX가 직관적이지 않아 신규 사용자의 접근성이 낮음
- 복잡한 디파이 기능(스왑, 예치, 파밍 등) 이용 시 화면 전환이 많아 사용자 경험이 떨어짐
- 실시간 데이터 반영 속도가 느려 사용자 신뢰도에 영향을 미침
2) 프로젝트 목표
- 클레이스왑 프론트엔드 리뉴얼을 통해 직관적이고 효율적인 UI/UX 제공
- 스왑, 예치, 파밍 등 주요 기능을 원활히 이용할 수 있는 사용자 중심 화면 설계
- 실시간 데이터 반영 및 시각화를 통해 사용자 신뢰도와 편의성 강화
3) 주안점
- React 기반 프론트엔드 개발로 컴포넌트화 및 재사용성 극대화
- Web3 라이브러리 연동을 통한 지갑 연결 및 온체인 데이터 처리 구현
- 반응형 디자인 적용으로 PC·모바일 환경 모두 최적화
- 실시간 거래 데이터 및 유동성 변화를 **차트/그래프 시각화**로 제공
프로젝트 성과
SSR를 사용하고 리팩터링을 통해 사용자 이탈률 체감 감소
페이지 진입 속도 개선과 UI 재정비를 통해 사용자 이탈이 눈에 띄게 줄고, 클라이언트 측 피드백에서 긍정적 반응 증가
React 구조 최적화로 페이지 성능 체감 향상
불필요한 렌더링 제거 및 상태 관리 방식 개선을 통해 페이지 전환 속도 및 초기 렌더링이 눈에 띄게 개선됨
핵심 기능
메인 화면
1. 디파이 프로젝트 메인 화면입니다.
2. 영역 별로 디파이 관련 정보를 보여주고, 하단에 footer 정보 링크와 sns 링크를 보여주고 있습니다.
2. 영역 별로 디파이 관련 정보를 보여주고, 하단에 footer 정보 링크와 sns 링크를 보여주고 있습니다.
디파이 프로젝트 내 자산 페이지
1. 현재 자신의 지갑에 해당 네트워크에 토큰 수량을 보여줍니다.
2. 해당 토큰의 가격과 평가 금액을 달러로 보여줍니다.
3. 자신이 원하는 토큰을 입금,출금 기능을 지원합니다.
2. 해당 토큰의 가격과 평가 금액을 달러로 보여줍니다.
3. 자신이 원하는 토큰을 입금,출금 기능을 지원합니다.
디파이 프로젝트 스왑 페이지 개발
사용자가 자신이 가지고 있는 토큰을 교환하고 싶은 다른 토큰으로 교환 비율에 맞춰 교환하는 기능과 페이지를 개발
디파이 프로젝트 v2 풀 페이지 개발
사용자가 원하는 토큰으로 v2 풀을 만들면서 유동성을 공급하고 해당 풀에 수익률 생성 및 토큰 스왑 경로로 사용하는 페이지 개발
디파이 프로젝트 v3 풀 페이지 개발
사용자가 원하는 토큰으로 v3풀을 만들면서 유동성을 공급하고 수익률 생성 및 토큰 스왑 경로로 사용
진행 단계
기획 및 요구사항 정의
2022.03
1. 네트워크 선정 :
- 디파이(DeFi) 시스템 구축에 사용할 블록체인 네트워크로 클레이튼(Klaytn) 선택
2. 서비스 기능 및 요구사항 정의:
- 사용자에게 제공할 주요 메뉴와 기능들 정의
- 서비스 운영에 필요한 요구 사항 구체화
3. 토큰 이코노믹스 기획 :
- 토큰 유통 구조 설계
- 보상 체계 및 인센티브 정책 기획
- 디파이(DeFi) 시스템 구축에 사용할 블록체인 네트워크로 클레이튼(Klaytn) 선택
2. 서비스 기능 및 요구사항 정의:
- 사용자에게 제공할 주요 메뉴와 기능들 정의
- 서비스 운영에 필요한 요구 사항 구체화
3. 토큰 이코노믹스 기획 :
- 토큰 유통 구조 설계
- 보상 체계 및 인센티브 정책 기획
디자인
2022.03.
기획 요구 사항에 맞춰 디자인 제작
디파이 시스템 개발
2022.03.
1. 블록체인 contract 개발
2. 블록체인 정보 벡엔드 개발
3. 디파이 프로젝트 프론트엔드 개발
2. 블록체인 정보 벡엔드 개발
3. 디파이 프로젝트 프론트엔드 개발
프로젝트 상세
1) 포트폴리오 소개
- Web3 기반 서비스 | 디지털 자산을 보유한 사용자를 위한 토큰 발행 및 에어드랍 기능이 포함된 DApp 프론트엔드 개발
2) 작업 범위
- 프론트엔드 설계 및 개발
- Web3 지갑 연동, 스마트 컨트랙트 호출 인터페이스 개발
- 퍼포먼스 최적화 및 반응형 UI 구현
- 다국어(i18n) 대응
- 관리자 페이지 및 사용자 대시보드 구축
3) 주요 업무
- 지갑 연결, 연결 해제, 체인 전환 등 실시간 상태 반영 기능
- 토큰 발행, 유동성 풀 생성, 에어드랍 실행 등 사용자 중심 기능 UI 개발
- 서버사이드 렌더링(SSR) 기반 초기 데이터 로딩 최적화
- 사용자 인증/서명 흐름 구성 및 트랜잭션 피드백 구현
- 에어드랍 히스토리, 참여 현황 등 시각화된 대시보드 설계
- 코드 스플리팅, 상태 최적화를 통한 성능 개선
4) 주안점
- 실제 Web3 사용자 흐름에 맞춘 UX 구조 설계
- 다양한 네트워크 및 지갑 유형 대응을 위한 유연한 연결 구조
- 민감 정보(API Key, 지갑 주소 등)를 Server Component에서만 처리하여 보안 강화
- 사용자 혼란을 줄이기 위한 단계별 UI 피드백, 로딩/에러 상태 설계
- 성능과 유지보수성을 동시에 고려한 컴포넌트 설계 및 상태 관리 전략 적용
- Web3 기반 서비스 | 디지털 자산을 보유한 사용자를 위한 토큰 발행 및 에어드랍 기능이 포함된 DApp 프론트엔드 개발
2) 작업 범위
- 프론트엔드 설계 및 개발
- Web3 지갑 연동, 스마트 컨트랙트 호출 인터페이스 개발
- 퍼포먼스 최적화 및 반응형 UI 구현
- 다국어(i18n) 대응
- 관리자 페이지 및 사용자 대시보드 구축
3) 주요 업무
- 지갑 연결, 연결 해제, 체인 전환 등 실시간 상태 반영 기능
- 토큰 발행, 유동성 풀 생성, 에어드랍 실행 등 사용자 중심 기능 UI 개발
- 서버사이드 렌더링(SSR) 기반 초기 데이터 로딩 최적화
- 사용자 인증/서명 흐름 구성 및 트랜잭션 피드백 구현
- 에어드랍 히스토리, 참여 현황 등 시각화된 대시보드 설계
- 코드 스플리팅, 상태 최적화를 통한 성능 개선
4) 주안점
- 실제 Web3 사용자 흐름에 맞춘 UX 구조 설계
- 다양한 네트워크 및 지갑 유형 대응을 위한 유연한 연결 구조
- 민감 정보(API Key, 지갑 주소 등)를 Server Component에서만 처리하여 보안 강화
- 사용자 혼란을 줄이기 위한 단계별 UI 피드백, 로딩/에러 상태 설계
- 성능과 유지보수성을 동시에 고려한 컴포넌트 설계 및 상태 관리 전략 적용
Klay Mainnet 사용하는 디파이 시스템 Klayswap 입니다.
