미리보기

Skip Protocol 사내 기술 문서 포털 구축 (2026.01 ~ )
Next.js 14 기반 Mintlify 스타일 문서 사이트, Skip Go 공식 문서 70페이지 한국어 번역, API Playground 및 커스텀 Swap UI 개발

Svelte 5 마이그레이션 (2026.01~02)

Wallet UI, Portfolio, Vote 등 핵심 페이지를 Svelte 5로 전면 마이그레이션
이벤트 시스템(on:click → onclick), 상태 관리, 컴포넌트 구조 전환
로딩 UX 개선 및 미사용 모달/컴포넌트 정리로 번들 최적화

Modal 아키텍처 리팩토링 (2026.01)

Modal 컴포넌트를 BCModal NameSpace로 통합, 폴더 구조 재설계
DismissibleStorage 컴포넌트 개선으로 공지 팝업 공통화 (Mantra, Nillion, Coreum 등 체인별 팝업 즉시 대응 가능)
pathname 기반 조건부 렌더링 도입

EVM 체인 확장성 아키텍처 (2025.10)

add-chain Macro에 EVM 필드 자동생성 기능 추가로 신규 EVM 체인 온보딩 복잡도 대폭 감소
EVM Contract 필터/검색 기능 구현
EVM 트랜잭션 컨트랙트 정보 캐싱으로 API 호출 최적화

레거시 코드 통합 및 성능 개선 (2025.11~12)

Typo 레거시 통합 (TypoText → BCTypo 전환), DenomParser 통합
DataTable 컴포넌트 속도 개선 (이미지 decoding 옵션, Cell itemkey 최적화)
App Requester Common 통합으로 API 요청 로직 일원화
monitorLog 레거시 제거, selfchain/testnet 정리

내부 모니터링 시스템 (Manager) 개선 (2025.09~10)

API Health Dev UX/UI 개선 (파일트리 재귀 컴포넌트, JSON 병합/저장 기능)
Markdown table 디자인 변경 및 Proposal 에디터 개선

모듈화된 NFC 웹 애플리케이션 개발

채팅, 운세, 플레이리스트 등 주요 기능을 독립 모듈로 설계, npm 패키지화하여 CLI 한 줄로 설치 가능한 템플릿 시스템 구축, 신규 서비스 프로토타입 개발 시간 50% 이상 단축

공통 React 템플릿 및 Monorepo 구조 도입

eslint, prettier, 기본 레이아웃을 별도 라이브러리로 분리, i18n 연동 글로벌 프로젝트 환경 구축, 자사 IP 4종 포함 15개 이상 프로젝트를 일관된 패턴으로 관리, 셋업 시간 30% 절감

Unity WebGL ↔ React 연동

react-unity-webgl 활용 게임 로딩·메시지 통신·디바이스별 화면 최적화, iOS 18.4+ Safari WebGL 렌더링 이슈 해결을 위해 Unity팀과 협업, 함수 10만개 이하로 최적화, 빌드 설정 튜닝 (IL2CPP, Strip Engine Code)

jQuery → React/TypeScript/TailwindCSS/Zustand 전환

레거시 시스템 마이그레이션, 신규 NFC 서비스 기획~개발 단독 주도, Jira/Slack 기반 이슈 관리 체계화, 개발 문서화 정립으로 온보딩 효율성 강화

CI/CD 파이프라인 자동화

단일 저장소에서 빌드·테스트·배포까지 자동화하여 전체 개발 및 배포 사이클 단축

Mintscan 블록체인 익스플로러 신규 기능 개발

Neutron DAO 페이지 신규 개발 (Vault, SubDAO, Proposal, Member 관리)
Airdrop 페이지 신규 기획 및 구현 (모달, 모바일 대응)
Relayer 페이지 전면 개편 (dot 애니메이션, 반응형 대응, operator 분리)

Wallet 기능 리뉴얼 (2024.07~08)

Send, IBC Send, Stake, Vote UI 전면 재설계
Chain/Token Selector, Amount Control 등 재사용 가능한 컴포넌트 설계
Validator 뱃지 시스템 개발 (스테이킹 리워드 뱃지)
Tx Result Modal 디자인 변경

내부 관리 시스템 개발

Ad Manager 관리자 시스템 개발 (로그인, 광고 관리 CRUD)
Block, Proposal 페이지 컴포넌트 리뉴얼

(주) 메모리플랜트 에서 진행한 사회서비스 프로젝트 "우만 2동 이야기"에 참여하여, 우만2동의 시니어분들을 대상으로 인터뷰를 진행하고 그들의 이야기를 책으로 발간하는 작업에 기여했습니다.

Project Overview

사내 Skip Protocol 프로젝트 온보딩 및 기술 공유를 위한 문서 사이트를 단독 기획/개발

Experience

• Mintlify 스타일 3-Column 문서 레이아웃 구축 (Sidebar, 본문, TOC)

• Skip Go 공식 문서 70페이지 한국어 번역 및 자동 동기화 스크립트 구현

• Skip Go API Playground 개발 - 14개 엔드포인트 인터랙티브 테스트, 체인/에셋 자동완성

• Skip Go Widget 대체 커스텀 Swap UI 구현 - Keplr, Cosmostation, MetaMask, Phantom 지갑 연동 및 트랜잭션 실행/추적

• Firebase Google 인증 (도메인 제한), FlexSearch 기반 전문 검색 (Cmd+K), Mermaid 다이어그램 (전체화면/SVG 다운로드/줌)

• EVM/Go Fast/CosmWasm 스마트 컨트랙트 문서 33건 및 팀 리서치 문서 통합

• API key 서버사이드 보호를 위한 프록시 라우트, RPC CORS 우회, 보안 취약점 점검 및 개선

• Vitest 기반 78개 테스트 케이스 작성

TechStack

Next.js TypeScript MUI Tailwind CSS Zustand Firebase Authentication FlexSearch Mermaid Vitest

Project Overview

Mintscan Svelte2 -> svelte 5 마이그레이션 작업

Experience

• Wallet 전체 영역(Portfolio, Vote, Tx History) Svelte 5 마이그레이션

• Modal 아키텍처 재설계 - BCModal NameSpace 통합, DismissibleStorage 패턴 도입

• EVM 체인 자동 온보딩 매크로 개발로 신규 체인 추가 시간 단축

• 체인별 팝업(Coreum, Nillion, Mantra) 공통화로 비즈니스 요구 즉시 대응 체계 구축

TechStack

Svelte 5 SvelteKit TypeScript Scss

Project Overview

Cosmostation 공식 홈페이지 리뉴얼 및 디자인 시스템 구축

Experience

디자인 시스템 및 아키텍처 고도화

• Token 중심의 디자인 싱크 자동화: 디자인 시스템의 유지보수 공수를 줄이기 위해 build-tokens.ts를 구현, Figma의 토큰 변경이 코드베이스(CSS Variable)에 즉시 반영되는 파이프라인을 구축했습니다.

• Headless 패턴을 통한 UI/로직 분리: 디자인 요구사항 변경에 유연하게 대응하도록 useModal, useForm 등 핵심 로직을 훅으로 추상화하고, 스타일은 Tailwind 커스텀 설정을 통해 강제하여 전사적 디자인 일관성을 유지했습니다.

• 관심사 분리를 위한 계층 설계: 프로젝트 규모 확장에 대비해 Feature-based 구조를 도입하고, Repository 패턴으로 데이터 페칭 계층을 추상화하여 비즈니스 로직과 외부 데이터 소스 간의 결합도를 낮췄습니다.

성능 최적화 및 글로벌 대응

• 초기 로딩 및 렌더링 병목 해결: 대규모 라이브러리(GSAP, Firebase 등)에 Dynamic Import와 Lazy Loading을 적용하고, Promise.all을 통한 병렬 페칭으로 데이터 로드 시의 Waterfall 현상을 개선하여 체감 성능을 높였습니다.

• 글로벌 대응 및 SEO: next-i18next를 활용한 다국어(3개국) 지원과 SSG 기반의 번역 리소스 로딩을 통해 성능과 검색 최적화를 동시에 달성했습니다.

• 성능 중심의 인터랙션 구현: Framer Motion과 GSAP을 조합하여 고성능 스크롤 애니메이션을 구현했으며, 이를 커스텀 훅화하여 인터랙션 구현 비용을 최소화했습니다.

엔지니어링 효율화

• 개발 프로세스 표준화: Husky와 Lint-staged를 활용해 팀 내 코드 품질을 상향 평준화하고, TypeScript Strict 모드 하에 전역 타입 설계를 주도하여 런타임 안정성을 확보했습니다.

TechStack

Next.js TypeScript Tailwind CSS Zustand i18next

Project Overview

공통 React 템플릿 및 Monorepo 도입으로 프로젝트 셋업 및 유지보수 효율화

Experience

• 공통 React 템플릿 적용으로 프로젝트 셋업 시간 최소 30% 단축

  • 적용 대상: nfc-anyang, nfc-minigames, nfc-dinos, nfc-melody 등

  • 템플릿 세팅 표준화로 프로젝트 시작 효율성 극대화

• 공통 라이브러리 분리 및 모듈화

  • eslint, prettier, 기본 레이아웃 컴포넌트를 별도 라이브러리로 분리

  • 버전 관리와 유지보수 용이성 증대

• i18n 기반 다국어 지원 시스템 구축

  • 공통 템플릿과 라이브러리에 i18next를 통합하여 글로벌 프로젝트에 대응

  • 언어 리소스 구조를 통일하고, 신규 프로젝트에서 손쉽게 다국어 확장 가능

  • 번역 파일 자동 로딩, 언어 감지, fallback 등 설정으로 운영 편의성 확보

• 채팅 기능 공통 모듈화로 개발 시간 획기적 단축

  • 기존 1~2일 소요 작업을 1시간 이내로 처리 가능

  • 모듈 재사용성 확보 및 유지보수성 향상

• Monorepo 도입을 통한 프로젝트 일관성 및 생산성 강화

  • 자사 IP 4종, 팜팔즈, 킨마톤(대만용), 설문조사, 음성포그니, FC안양, NC다이노스, AI음악서비스, 미니게임 4종 등 통합 관리

  • 코드 구조 일원화로 버전 업그레이드 및 유지보수 효율화

• CI/CD 파이프라인 구축으로 자동화된 개발∙배포 환경 마련

  • 단일 레포에서 커밋 → 빌드 → 테스트 → 배포의 원스톱 프로세스 구축

  • 전체 개발 사이클 속도 향상 및 안정성 확보

TechStack

React Typescript Vite TailwindCSS Zustand Framer Motion Monorepo CI/CD (GitHub Actions)

Project Overview

jQuery 기반 레거시 시스템의 React 기반 프론트엔드 전환 프로젝트

Experience

• 스파게티 코드로 유지보수에 어려움이 있던 jQuery 기반 UI를, 컴포넌트 기반 React 아키텍처로 재구성하여 구조적 확장성과 재사용성 확보

• Headless UI 기반의 공통 컴포넌트 시스템 구축으로 디자인 일관성과 개발 속도 향상

TechStack

React TypeScript TailwindCSS Headless UI Zustand ESLint Prettier

Description

기업별 코딩테스트 정보를 제공하는 개발자 취업 준비 플랫폼의 백오피스 개발 ( Website ), ( Github )

Experience

• 관리자 로그인 / 로그아웃 기능 구현 및 토큰 기반 인증 시스템 설계

• 기업 정보 관리 기능 개발
  (기업 생성, 정보 수정/삭제, 로고 등록 및 삭제 등)

• 회원 관리 기능 개발
  (회원 전체 조회, 상세 조회, 검색 기능 포함)

• 코딩 테스트 정보 관리 기능 개발
  (시험 정보 생성, 수정, 삭제, 조회 및 후기 상세/전체 조회)

• 정보 수정 요청 기능 개발
  (요청 전체 조회, 상세 조회, 상태 변경 처리 )

• 플랫폼 기획 초기부터 참여하여 Slack, Notion 기반으로 팀 협업 및 스프린트 진행

• 코딩테스트 신뢰도 향상을 위해 기업에 직접 연락해 공식 정보 확보 및 협업 추진

TechStack

Svelte Typescript Scss Vite

Description

다양한 블록체인 네트워크의 데이터를 탐색하고, 트랜잭션 및 주소 등의 정보를 시각화할 수 있는 Cosmos 생태계 전용 블록체인 익스플로러 ( Website )

Experience

• Neutron DAO 페이지 신규 개발 - Vault, SubDAO, Proposal, Member 관리 기능 및 CosmWasm 스마트 컨트랙트 데이터 파싱

• Wallet 기능 리뉴얼 - Send, IBC Send, Stake, Vote UI 전면 재설계 및 Chain/Token Selector 등 재사용 컴포넌트 체계 구축

• Relayer 페이지 전면 개편 - IBC 릴레이 상태 시각화, 반응형 대응

• Airdrop 페이지 신규 기획 및 구현, Validator 뱃지 시스템 개발

• 내부 모니터링 시스템(Mintscan Manager) 신규 개발 및 팀 온보딩 가이드 문서화

TechStack

Svelte Typescript Scss Chart.js D3.js

Description

각 서비스의 운영 상태를 실시간으로 모니터링하고, 필요한 제어를 수행할 수 있는 내부망 모니터링 시스템 (Mintscan Manager)

Experience

• 기존 Firebase 기반 제어 및 Slack 로그 알림 구조를 내부망으로 통합.

• 운영 중인 서비스의 실시간 상태와 히스토리를 시각화하는 대시보드 설계 및 개발.

• 도메인 중심의 데이터 필터링 로직을 싱글턴 패턴으로 구조화하여 관리 효율성 향상

• 최종적으로, Node Operator와 비개발자 모두가 쉽게 접근하고 활용 가능한 All-in-One 내부 모니터링 시스템을 완성

TechStack

Svelte Typescript Scss Socket.io Chart.js D3.js

프로젝트 개요

저는 (주) 메모리플랜트 에서 진행한 사회서비스 프로젝트 "우만 2동 이야기"에 참여했습니다. 이 프로젝트는 우만2동에 거주하는 시니어분들을 대상으로 인터뷰를 진행하고, 그들의 이야기를 책으로 발간하며, 데이터 분석을 통해 지역의 개선점을 도출하는 데 그 목적이 있었습니다.

역할 및 기여

프로젝트 초반에는 대학생, 기업, 공무원이 함께 협업하는 과정에서 소통의 어려움을 겪었습니다. 이 문제를 해결하기 위해, 저는 대학생을 연락의 중간책으로 설정하여 원활한 소통을 도모했습니다. 이를 통해 프로젝트 진행 속도가 크게 향상되었고, 원활한 협업이 가능해졌습니다.

성과

프로젝트는 성공적으로 마무리되었으며, 여러 뉴스 언론에 소개되었습니다. 또한, 발간된 책은 수원시 도서관에 등록되어 지역사회에 공유되었습니다.

배운 점

이 경험을 통해 저는 문제 해결 능력과 소통 능력을 한층 강화할 수 있었으며, 협업의 중요성을 깊이 깨닫게 되었습니다.

연합 IT 개발 동아리 구름톤 유니브 에 참여하여 1주 1회 프론트엔드 그룹 스터디에 참여하고 있습니다.

• 카카오 x 구름톤 유니브 3기 연합해커톤 대상(1위) 수상. 2024.09.29

연세대학교 블록체인 학회 BAY의 13기 dApp 개발팀으로 활동하며, 블록체인 관련 컨퍼런스 및 다양한 Web3.0 세미나에 참여하였습니다.