GEMVERSE

GEMVERSE

📌 Summary

복잡한 코딩 없이 트리거와 액션만으로 사용자의 니즈에 따른 자동화된 워크플로우를 생성하고 웹3 서비스를 구축할 수 있는 노코드 웹3 빌더

• react(vite) + typescript를 사용하여 구현
• React-flow를 활용하여 노드 기반 다이어그램 작성 기능 개발
• zustand를 활용한 전역 상태 관리
• 유저가 생성한 flow 목록 페이지 개발
• petra wallet SDK를 연동하여, 지갑 연동 및 서명 기능 개발

🔍 Meaning

이번 프로젝트는 쇼핑몰이나 이벤트 페이지가 아닌, 보다 의미 있는 도전적인 작업이었습니다.

💡 개요

Verse는 사용자가 생성한 자동화 프로세스를 시각적으로 구성하고 실행할 수 있는 서비스입니다. 각 프로세스는 실행 조건인 Trigger 노드와 이후 실행되는 Action 노드들로 구성되며, 각 노드는 서로 다른 앱의 이벤트와 액션을 처리하도록 설계했습니다. 2024 넥스트라이즈 행사에서 부스에 참여하시는 분들께 서비스의 기능성과 UX를 시연 및 설명하며 긍정적인 피드백을 받았습니다.

verse 생성 및 수정페이지 개발

사용자가 노드를 추가·수정할 때 노드 간의 배치가 흐트러져 UX가 저하되는 문제가 있었고, 수동으로 배치를 맞추는 방식은 개발 속도를 저하시켰습니다. 또한 노드 클릭시 동적인 애니메이션도 필요했고, 추후 드래그 앤 드랍 방식으로 노드의 순서를 수정하는 기능도 필요했습니다. 이를 해결하기 위해 노드 기반 시각화와 직관적인 편집을 위해 React Flow 라이브러리를 사용했으며, 복잡한 배치 문제를 해결하기 위해 기획팀에 Pro 버전 구매를 요청해 auto-layout 기능을 도입했습니다. 해당 기능을 통해 노드 수정 시 자동으로 일정한 간격의 배치를 유지하도록 구현해 UX를 개선했으며, 개발 기간을 단축했습니다.

서버 데이터 관리 및 전역 상태 관리

초기에는 useState와 useEffect를 사용해 비동기 데이터를 관리했으나, 컴포넌트에 데이터 처리 코드가 분산되면서 코드 복잡성과 유지보수 비용이 증가했습니다. 또한 사용자의 계정 정보에 따라 다른 데이터를 불러와야 하므로 데이터 요청이 빈번해 로딩 시간이 길어졌습니다. 이를 해결하기 위해 비동기 데이터 관리를 위해 React Query를 도입해 데이터fetch 기능과 mutation 기능을 컴포넌트에서 분리했으며, 캐싱 기능을 활용해 데이터를 한 번 요청하면 재사용하도록 구현해 로딩 시간을 최소화했습니다. 전역 상태 관리를 위해 Redux 대신 더 가볍고 간단한 코드로 상태를 관리할 수 있는 Zustand를 사용했으며, Redux DevTools와의 호환성을 통해 디버깅도 용이하게 했습니다. . 이러한 개선으로 사용자는 로딩 시에도 캐싱된 데이터를 즉시 확인할 수 있어 빠르고 자연스러운 UX를 경험할 수 있었으며, 컴포넌트의 비동기 코드가 사라지면서 코드 가독성과 유지보수성이 크게 향상되었습니다.

블록체인 연동 (Aptos 체인 기반)

기존 프로젝트에서는 블록체인 기능이 없었으나 사용자의 지갑을 연동해 스마트 컨트랙트와 상호작용하는 기능이 필요했습니다. 그러나 블록체인 개발 경험이 부족해 학습하는 것은 시간이 오래걸릴 것 같아 사내 블록체인 프론트엔드 개발자와 협업해 Aptos 체인을 기반으로 한 Petra Wallet을 연동했습니다. @aptos-labs/wallet-adapter-react 라이브러리를 사용하여 지갑과의 연동 및 인증, 트랜잭션 서명 기능을 구현했습니다. 그 결과 기존 블록체인 경험이 없었음에도 협업과 적절한 기술 선택으로 3일 만에 기능을 완성해 프로젝트 일정을 준수했으며, 블록체인과 지갑을 연동해 사용자가 보다 안전하게 서비스에 접근할 수 있도록 했습니다.

리팩토링과 코드 개선

초기 개발 과정에서 서비스에 등록된 앱들을 공통된 하나의 컴포넌트로 관리할지, 앱별로 같은 구조의 폴더와 파일을 만들어 개별적으로 관리할지 고민이 많았습니다. 공통 컴포넌트를 사용하면 유지보수가 쉬운 장점이 있지만, 에러 발생 시 모든 앱에 영향을 미치는 위험성이 있어 시니어 개발자의 피드백을 반영해 개별 관리 방식을 선택했습니다. 그러나 개발 당시 시간적 제약으로 인해 공통 로직을 추출하지 못했고, 이로 인해 코드가 여러 앱에서 반복되었으며 앱의 수가 늘어날수록 한 번 수정할 때마다 모든 앱의 코드를 개별적으로 수정해야 했습니다. 이에 따라 서비스 출시 후 앱별로 반복되는 로직을 공통 함수로 추출해 코드 중복을 최소화했으며, TypeScript로 전환해 개발 과정에서 타입 관련 오류를 사전에 방지하고 코드의 안정성과 유지보수성을 더욱 강화했습니다.

기술적 도전과 해결 과정

• 아무래도 그동안 블록체인 관련된 서비스는 개발해본 경험이 없었는데 petra wallet과 사용자와 상호작용하는 기능을 구현하며 블록체인 생태계에 좀 더 익숙해질 수 있었습니다.

• 평소 개발했던 익숙한 형태가 아닌 프로젝트이기 때문에 문제를 해결하기 위해 주변 개발자들에게 조언을 평소보다 많이 구했고, 프로젝트 셋팅부터 주도적으로 진행하며 다양한 시도를 해볼 수 있었습니다.

• 이번 프로젝트를 통해 단순한 기능 구현을 넘어, 효율적인 상태 관리, 문제 해결력, 코드 리팩토링의 중요성을 다시 한번 깨닫게 된 뜻깊은 경험이었습니다.