Work
암호화폐 데이터 분석 및 커뮤니티 플랫폼
Tech StackNext.jsJavaScriptMUIEmotionSWRZustandnext-intl
Period2024.01 — 2026.03
RoleFrontend Engineer
OrgMVerse
Summary암호화폐 지갑·AI 분석·시장 데이터·뉴스·차트·커뮤니티 기능을 제공하는 글로벌 암호화폐 인텔리전스 플랫폼
외주 개발 이후 인수한 수만 줄 규모의 레거시 코드를 리팩터링하고, 컴포넌트·커스텀 훅 공통화부터 디자인 시스템·다국어·성능·SEO까지 프론트엔드 전반을 개선한 프로젝트입니다.
담당 및 구현
- 레거시 코드의 중복 로직을 컴포넌트와 커스텀 훅으로 분리해 재사용 가능한 구조로 개선
- MUI 커스텀 테마와 variant 패턴을 기반으로 디자인 시스템 구축
- next-intl을 도입해 UI 텍스트와 번역 파일을 구조화하고 locale 라우팅 및 통화(USD·JPY) 전환 구현
- 이미지 로딩과 렌더링 구조를 개선해 LCP·FCP·TBT 등 주요 Lighthouse 성능 지표 향상 및 CLS 안정화
env-cmd를 도입해 환경별 빌드 프로세스와 배포 스크립트 분리- Flutter 모바일 앱의 웹뷰 연동 및 브릿지 통신 로직 구현
SEO · 검색 노출 개선
검색 결과에 서비스가 노출되지 않는 문제를 해결하기 위해 Google Search Console에 사이트를 등록하고, Next.js 레이아웃별 메타데이터와 사이트맵 구조를 정비했습니다. 검색 엔진의 페이지 수집과 색인을 개선해 주요 키워드의 Google 검색 결과 1페이지 노출을 달성했습니다.
디자인 시스템
하드코딩된 CSS와 재사용하기 어려운 스타일 문제를 해결하기 위해 스타일 가이드 정립을 제안했습니다. 이를 MUI 커스텀 테마와 variant 패턴으로 구현하고, 공통 컨테이너로 페이지별 여백을 표준화해 다크/라이트 테마와 반복적인 리스킨에 일관되게 대응할 수 있는 구조를 구축했습니다.