전체 프로젝트
최신순 전체 목록입니다.
Talk532
대표 작업서버 없이 돌아가는 실시간 채팅
여섯 글자 코드로 방에 들어가는 채팅입니다. 서버를 두지 않고 브라우저가 Supabase에 직접 붙기 때문에, 보안 경계 전체가 SQL로 쓴 RLS 정책이 됩니다. 접속 중인 사람은 Realtime이, 앱을 닫아 둔 사람은 Edge Function이 보내는 웹 푸시가 담당합니다.
- 역할
- 개인 프로젝트 — 설계부터 운영까지
- Next.js
- React
- TypeScript
- Supabase
- PostgreSQL RLS
- Web Push
상세 보기사이트 방문 — Talk532Atlas
대표 작업여섯 개 제품 팀이 함께 쓰는 디자인 시스템
40여 개 컴포넌트, 접근성 검증, 그리고 다크 모드를 처음부터 전제로 설계한 사내 디자인 시스템입니다. 토큰을 한 번 바꾸면 모든 제품에 반영됩니다.
- 역할
- 설계 및 개발 리드
- TypeScript
- React
- Tailwind CSS
- Storybook
- Vitest
상세 보기소스 코드 — AtlasPulse
대표 작업1초 안에 첫 차트가 그려지는 분석 대시보드
수백만 행의 이벤트를 다루면서도 즉각적으로 느껴지도록, 스트리밍 렌더링과 서버 집계를 조합해 재구축했습니다. LCP 4.1초에서 1.3초로 줄였습니다.
- 역할
- 프론트엔드 담당
- Next.js
- React
- D3
- PostgreSQL
- Vercel
상세 보기사이트 방문 — Pulsetokens-cli
Figma 변수를 CSS 커스텀 프로퍼티로 내보내는 도구
디자이너가 Figma에서 토큰을 바꾸면 PR이 열립니다. 디자인 시스템 작업 중 반복되던 수작업을 없애려고 만들었고, 지금은 오픈소스로 공개했습니다.
- 역할
- 개인 프로젝트
- TypeScript
- Node.js
- Figma API
- GitHub Actions
Signal Map
서울 지하철 혼잡도를 실시간으로 보는 지도
공개 API를 캔버스 기반 지도에 올린 주말 프로젝트입니다. 6만 개 좌표를 60fps로 그리기 위해 렌더링을 직접 관리했습니다.
- 역할
- 개인 프로젝트
- Canvas
- TypeScript
- Vite
One-Step Checkout
대표 작업3단계 결제를 1단계로 줄인 이야기
월 300만 세션 규모 커머스의 결제 퍼널을 재설계했습니다. 폼 검증, 결제 수단, 에러 복구를 한 화면에서 처리하면서 모바일 전환율을 11% 개선했습니다.
- 역할
- 프론트엔드 개발
- React
- Redux
- Node.js
- Playwright
상세 보기Campaign Microsites
18개 캠페인 사이트, 전부 Lighthouse 90점 이상
에이전시에서 2년간 납품한 브랜드 캠페인 사이트 모음입니다. 매번 새로 시작하지 않도록 공통 인터랙션 프리셋과 빌드 템플릿을 만들었습니다.
- 역할
- 웹 개발
- JavaScript
- GSAP
- Three.js