SmashFi는 비트코인 자동 매수, BTC 네이티브 수익 전략, 셀프 커스터디를 하나의 흐름으로 제공하는 비트코인 자산운용 서비스입니다.
SmashFi 2.0 제품 및 아키텍처 전환
- SmashFi 2.0의 제품 전면 재구현과 UX 개편을 주도해, 자동 매수와 비트코인 수익 전략, 셀프 커스터디로 나뉘어 있던 기능을 사용자가 자산을 맡기고 운용하는 하나의 여정으로 재설계했습니다.
- 합류 당시 로그인 여부와 초기 데이터가 브라우저 실행 후에야 정해지고, 전역 화면 구조에 라우트별 예외가 누적되어 신규 기능의 변경 범위가 커지는 구조였습니다. Pages Router에서도 페이지별 서버 인증 규칙을 추가해 보강할 수 있었지만, 41개 라우트를 다시 만드는 시점에는 그 규칙을 따로 운영하기보다 App Router의 공통 서버 경계로 수렴하는 편이 장기 비용이 낮다고 판단했습니다.
- 제품 개발을 멈추지 않도록 두 라우터를 병행하면서 인증과 초기 데이터 준비를 첫 요청으로 옮겼고, 41개 라우트 이관을 마친 뒤 Pages Router와 기존 라우팅 예외를 제거했습니다.
디자인 시스템 재설계
- 기존 UI 패키지는 구현 중복은 줄였지만 디자인의 의도와 상태 기준을 코드에 전달하지 못해, 변경할 때마다 개발자가 화면별로 같은 판단을 반복하고 예외를 추가해야 했습니다. 기존 API를 계속 확장하는 대신 제품 개편에 맞춰 새 디자인 시스템으로 분리했습니다.
- 디자인 시스템의 목적을 컴포넌트 수를 늘리는 것이 아니라 디자인 결정이 코드까지 같은 의미로 전달되게 하는 것으로 정의했습니다. 제품 코드는 특정 색상값보다 배경, 텍스트, 상태 같은 사용 목적에 의존하도록 토큰을 재설계하고, 제품 맥락 없이도 의미가 분명한 요소만 공용화했습니다.
- Figma Code Connect로 디자이너가 사용하는 속성과 실제 React 컴포넌트의 공개 API 대응 관계를 명시했습니다. 내부 레이어와 스타일 구현은 노출하지 않고 제품 코드가 선택할 수 있는 상태와 변형만 연결했습니다.
- 이전 시스템과 새 구조를 병행하면서 2.0 화면부터 순차 이관했고, 실제 적용 과정에서 제품 전용 흐름과 과도하게 일반화된 요소를 공용 영역에서 다시 제외했습니다. 세 제품군 이관 후 이전 UI 시스템을 제거했습니다.
셀프 커스터디 제품화
- 자동 매수와 수익 전략으로 운용한 비트코인을 사용자가 직접 보관하고 출금할 수 있도록, 하드웨어 지갑 기반 셀프 커스터디 기능을 제품화했습니다.
- Blockstream Jade 하드웨어 지갑과 연동해 계정 등록, 입금 주소 발급, 거래 생성, 기기 서명과 검증으로 나뉜 기술 절차를 하나의 사용자 여정으로 구성하고, 네트워크에서 분리된 기기와 QR로 거래를 완료할 수 있게 구현했습니다.
프론트엔드 플랫폼 조직에서는 코드와 문서가 함께 갱신되고 필요한 지식을 개발 흐름 안에서 찾을 수 있도록 했습니다. UX 플랫폼 조직에서는 디자인 에디터의 오류 재현, 성능, 플러그인 확장 구조를 개선했습니다.
Knowledge System Team
- API 문서가 코드보다 늦게 변경되면서 개발자가 문서를 신뢰하기 어려운 문제를 해결하기 위해, TypeScript 코드와 JSDoc을 기준으로 API 레퍼런스를 생성하고 코드 변경 시 문서 최신성을 검증하는 Docflow를 개발했습니다.
- 문서와 Slack에 흩어진 지식을 하나의 검색 흐름으로 연결했습니다. 내부 문서를 근거로 답하는 Slack 챗봇을 팀별로 구성할 수 있게 모듈화하고, Model Context Protocol 서버를 통해 같은 지식을 개발 도구와 AI 에이전트에서도 검색할 수 있도록 확장했습니다.
- Grafana에서 문서 커버리지와 사용량을 함께 관측하며 개선 우선순위를 정했습니다. 문서 수를 1,000개 이상에서 2,200개 이상으로 확장하고, 월간 조회수 6.14천 회에서 13.8천 회, 방문자 수 234% 증가에 기여했습니다.
토스 미니 컨퍼런스 2025 100번 실패하고 살려 낸 문서 시스템 영상 보기 ↗ Deus Team
- 사용자의 설명만으로 디자인 에디터 오류를 재현하기 어려워, Sentry User Feedback과 Replay를 연결해 제보 당시 화면과 사용자 행동을 바로 확인할 수 있는 진단 흐름을 만들었습니다.
- 캔버스 조작 때 레이어 트리 전체가 갱신되는 병목을 프로파일링으로 찾아, 가상화와 호출 빈도 제어를 적용해 드래그 처리 시간을 약 200ms에서 100ms 수준으로 단축했습니다.
- 플러그인이 에디터 내부 DOM과 상태에 직접 의존하던 구조를 QuickJS 기반의 격리 실행 환경과 제한된 SDK 경계로 전환했습니다. Proxy 메시지 브리지로 필요한 기능만 노출하고 기존 플러그인 10개 이상을 새 구조로 이관했습니다.
2025 커리어 회고 읽기 ↗ 글로벌 웹툰 서비스 HypeToon의 초기 제품 개발에 참여해 사용자 웹, 운영 어드민, 백엔드 API를 함께 구현했습니다.
- React와 TypeScript, Express와 MySQL을 기반으로 작품 탐색부터 회차 열람, 유료 콘텐츠 이용까지 이어지는 핵심 사용자 흐름을 개발했습니다.
- 한국어, 영어, 인도네시아어 다국어 구조와 Apple, Facebook, 이메일 기반 인증 흐름을 구현했습니다.
- 인도네시아 사용자를 위한 DOKU 결제와 MetaMask를 통한 HYPE 토큰 전송 기능을 구현했습니다.
- React Admin 기반 작품 업로드 환경과 이미지 리사이징 파이프라인을 구축하고, 디바이스별 이미지 제공과 native lazy-loading을 적용해 최대 측정 기준 LCP를 약 85% 개선했습니다.
- 국방망 내에서 사용하는 기반 행정 시스템을 신규 개발하고 기존 시스템을 유지보수했습니다.
- 전산 장비 신청, 입출고, 조회, 승인 과정을 전산화해 수기 문서와 Excel에 의존하던 재고 관리 업무를 개선했습니다.
- 잠수함 승조원이 교육 및 훈련 일정과 이수 기한을 확인하고 필요한 일정을 신청할 수 있도록 전산화했습니다.
- IE11 중심의 제한된 사용 환경에서 발생하는 React 애플리케이션 호환 문제를 react-app-polyfill 도입으로 해결했습니다.
