2025.07 - 2026.04
B2C 리뉴얼 — 멤버십 인증·분석 재설계
Pages Router·Recoil 기반 레거시 B2C를 App Router로 전면 리뉴얼하며 임직원·법인 인증, 분석, 다국어 영역을 담당.
- Next.js
- Zustand
- React Query
- Tailwind CSS
Ari
프론트엔드 개발자
Next.js·React로 멀티테넌트 예약 SaaS와 대규모 운영 시스템을 0→1로 설계·구축하는 4년차 프론트엔드 개발자
도구의 맹점과 아키텍처의 빈틈을 끝까지 의심하고 실측으로 검증합니다.
- React
- Next.js
- TypeScript
- TailwindCSS
Featured Projects
더보기회사 프로젝트
2026.06 - 재직중
사내 디자인 시스템
빈 레포에서 시작한 사내 운영 시스템 공통 UI 디자인 시스템. 디자인 토큰·컴포넌트·번들 파이프라인과 소비 앱 통합 담당. 현재 컴포넌트 37종.
- React
- TypeScript
- Tailwind CSS
- cva
- tsup
- Storybook
- size-limit
개인 프로젝트
2026.07 - 진행 중
arilog.dev
Next.js 16 App Router와 MDX로 만든 기술 블로그 겸 포트폴리오.
- Next.js
- React
- TypeScript
- TailwindCSS
- MDX
- shadcn/ui
2026.02 - 2026.07
blogsumnail
네이버 블로그 썸네일·스킨 메이커와 SEO 가이드 블로그. 기획부터 배포·운영까지 단독 진행
- Next.js
- React
- TypeScript
- Tailwind CSS
- html2canvas
Recent Posts
더보기CLS 0.440의 94%는 스켈레톤 하나였다 — 측정 기준선부터 세운 레이아웃 시프트 개선
성능 측정값이 없던 예약 페이지에 Lighthouse 합성 측정 기준선을 세우고, layout-shift attribution으로 CLS 0.440의 원인을 스켈레톤과 실제 갤러리의 박스 불일치로 특정해 0.074로 낮춘 기록.
디자인 시스템을 붙이자 반응형이 깨졌다 — CSS 캐스케이드 충돌을 @source로 푼 이야기
사내 디자인 시스템을 예약 앱에 도입하자 lg 반응형이 무력화돼 운영에서 롤백했다. 빌드 산출 CSS에서 규칙 위치로 원인을 확인하고, 세 가지 선택지를 비교해 앱 Tailwind가 DS 클래스를 직접 생성하는 방식으로 재도입한 기록.
나도 안 쓰는 앱을 만들었습니다 — 토스 미니앱 출시 회고
앱스토어 등록비가 아까워 토스 미니앱을 골랐다. 첫 출시는 열흘 만에 됐지만 다음 업데이트 하나에 두 달이 걸렸고, 반려 6번의 진짜 원인은 프로젝트 첫날 고른 라우터였다. 유저 34명과 리텐션을 그대로 공개하는 사이드 프로젝트 회고.
Tech Stack
Languages
- JavaScript
- TypeScript
- HTML
- CSS
Frameworks
- React
- Next.js
상태·폼
- TanStack Query
- Recoil
- Jotai
- Zustand
- React Hook Form
스타일링
- Tailwind CSS
- cva
- tailwind-merge
- Material UI
- Emotion
- Styled Components
빌드·테스트
- Vite
- Vitest
- Playwright
- tsup
- Storybook
- size-limit
분석·API
- Google Analytics 4
- Google Tag Manager
- RESTful API
- OAuth
품질·협업
- ESLint
- Prettier
- Git
- GitLab
- Jira
- Figma
- Claude Code
- OpenAI Codex
인프라
- Nginx