짧은 자기소개
안녕하세요, 사용자가 기다리지 않는 웹을 만드는 데 관심이 많은 프론트엔드 엔지니어입니다. 6년 동안 커머스와 데이터 플랫폼을 오가며, 디자인 시스템을 세우고 렌더링 성능을 다듬는 일을 주로 해왔습니다.
기획이 아직 흐릿한 단계에서 합류해 프로토타입으로 논의를 정리하고, 그대로 프로덕션까지 끌고 가는 방식을 좋아합니다. 화면 하나를 만들 때도 로딩 상태, 빈 상태, 에러 상태, 키보드 동작까지 같이 설계합니다.
최근에는 React Server Components와 스트리밍 렌더링을 실제 트래픽에서 어떻게 써야 이득인지 실험하고 있습니다. 번들 크기를 줄이는 것보다 무엇을 언제 보여줄지 정하는 게 체감 성능에 훨씬 크게 작용한다는 걸 배웠습니다.
일 밖에서는 필름 카메라로 도시의 간판을 찍고, 사둔 기계식 키보드를 계속 분해합니다. 오픈소스에는 문서 오타 수정부터 시작해 조금씩 기여하고 있습니다.
다루는 기술
기본으로 선택하는 도구들을 스택 위치별로 묶었습니다.
숙련도
언어 · 프레임워크
- TypeScript
- 숙련도: 깊이 이해함
- React
- 숙련도: 깊이 이해함
- Next.js
- 숙련도: 깊이 이해함
- JavaScript (ES2023)
- 숙련도: 깊이 이해함
- Vue 3
- 숙련도: 능숙함
- Svelte
- 숙련도: 실무 가능
스타일 · 디자인
- Tailwind CSS
- 숙련도: 깊이 이해함
- CSS Architecture
- 숙련도: 자신 있음
- Motion / Framer Motion
- 숙련도: 자신 있음
- Figma
- 숙련도: 능숙함
- Accessibility (WCAG 2.2)
- 숙련도: 자신 있음
백엔드 · 인프라
- Node.js
- 숙련도: 자신 있음
- PostgreSQL
- 숙련도: 능숙함
- GraphQL
- 숙련도: 능숙함
- Vercel
- 숙련도: 자신 있음
- Docker
- 숙련도: 능숙함
테스트 · 품질
- Vitest
- 숙련도: 자신 있음
- Playwright
- 숙련도: 자신 있음
- Testing Library
- 숙련도: 자신 있음
- Lighthouse CI
- 숙련도: 자신 있음
- Sentry
- 숙련도: 능숙함
도구 · 워크플로
- Git
- 숙련도: 깊이 이해함
- Turborepo
- 숙련도: 능숙함
- GitHub Actions
- 숙련도: 자신 있음
- Storybook
- 숙련도: 자신 있음
- pnpm
- 숙련도: 자신 있음
주요 작업물
처음부터 끝까지 직접 만든 것들입니다. 각 프로젝트마다 의사결정과 트레이드오프를 정리해 두었습니다.
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
상세 보기
지나온 곳
최근 순으로 정리했습니다.
–현재4년 6개월
프론트엔드 엔지니어
Enliple서울
마케팅 자동화 플랫폼의 대시보드를 담당하며, 사내 디자인 시스템을 설계해 여섯 개 제품 팀에 배포했습니다.
주요 성과
- 레거시 대시보드를 Next.js App Router로 점진적 마이그레이션 — LCP 4.1초에서 1.3초로 단축
- 40여 개 컴포넌트로 구성된 디자인 시스템을 Storybook과 함께 배포, 신규 화면 개발 시간 절반으로 감소
- Playwright 기반 E2E 파이프라인 도입, 배포 후 롤백 건수 연 12건에서 2건으로 감소
- TypeScript
- Next.js
- React
- Tailwind CSS
- Playwright
–2년 2개월
프론트엔드 개발자
Commerce Labs서울
월 300만 세션 규모의 커머스 프론트엔드를 유지보수하고, 결제 및 상품 상세 플로우를 개편했습니다.
주요 성과
- 상품 상세 페이지를 SSR로 전환해 검색 유입 트래픽 34% 증가
- 결제 퍼널을 3단계에서 1단계로 축소, 모바일 전환율 11% 개선
- 이미지 최적화 파이프라인 구축으로 전체 페이지 무게 평균 62% 감소
- React
- Redux
- Node.js
- SCSS
- AWS
–1년 6개월
웹 개발자
Studio Parallel서울
브랜드 캠페인 사이트와 인터랙티브 마이크로사이트를 제작했습니다. 짧은 주기로 많은 것을 배운 시기입니다.
주요 성과
- 18개 캠페인 사이트 납품, 전 프로젝트 Lighthouse 90점 이상 유지
- WebGL과 Canvas를 활용한 인터랙션 구현 및 사내 가이드 문서화
- JavaScript
- GSAP
- Three.js
- WordPress
함께 만들어요
정규직, 계약, 그리고 재미있는 이야기 모두 환영합니다. 받은 메일에는 전부 답장합니다.