📚
▶ Section
책방 (Chaekbang)
2024.12 — 2025.04·Frontend Engineer🔒 Private부산·해운대구·장산 (좌동)
Next.jsStorybookZodTailwind
▶Overview
초등학교 방과 후 수업 운영을 위한 학생·강사·운영자 멀티 롤 플랫폼. 디자인 시스템과 Zod 스키마 검증을 핵심 축으로, 코프링(Kotlin + Spring Boot) 백엔드와는 Next.js BFF로 통합하여 SEO·캐싱·런타임 안정성을 함께 챙겼습니다.
▶Background
- ▸기획·디자인·개발 사이의 컴포넌트 명세 불일치로 인한 잦은 재작업.
- ▸다양한 폼이 도메인별로 흩어져 있어 유효성 검증 로직 중복.
- ▸Kotlin + Spring Boot 백엔드 팀과의 API 명세가 기획 변경으로 자주 바뀜.
- ▸기능 단위 확장과 Git 충돌 최소화를 위한 아키텍처 컨벤션 필요.
▶Architecture
touch_app노드 hover · 휠로 확대 · 드래그로 이동
100%
▶Key Decisions
| 결정 | 이유 | 결과 |
|---|---|---|
| Storybook + Design System 도입 | UI 일관성과 신규 멤버 온보딩 단축 | 전체 UI 약 70% 디자인 시스템 컴포넌트화 |
| Zod 스키마로 폼·API 검증 통합 | 잦은 API 명세 변경에 빠르게 대응 | 검증 코드 약 40% 감소 |
| axios → fetch wrapper 교체 | App Router 호환 + 번들 최적화 | 번들 약 15~20KB 감소 |
| Next.js BFF (SSG)로 백엔드 통합 | API 통합·SEO·초기 렌더링 동시 해결 | 캐싱으로 API 호출 약 20% 감소 |
| FSD 레이어드 아키텍처 | 기능 단위 확장성과 Git 충돌 감소 | 변경 범위 약 30% 축소 |
▶What I Did
- ▸Storybook 기반 디자인 시스템 도입 및 컴포넌트 토큰화, Compound · Composition 패턴 정착.
- ▸Zod 스키마를 폼/서버 응답에 공유해 런타임 타입 안정성 확보, 명세 차이를 조기 감지.
- ▸FSD 아키텍처로 도메인 의존성 정리 및 Next.js SSR/SSG 적용.
- ▸공통 fetch wrapper에 쿠키·토큰 만료·재시도 로직을 단일화하여 비즈니스 코드에서 분리.
- ▸Docker + Nginx + AWS Lightsail로 운영 배포 일원화.
▶Impact
- ▸UI 컴포넌트 약 70% 공통화, 신규 페이지 작성 시간 단축.
- ▸스키마 기반 검증으로 폼 관련 런타임 버그 대폭 감소.
- ▸BFF 캐싱으로 API 호출 약 20% 감소, 디자인-개발 사이 커뮤니케이션 코스트 감축.
▶Tech Stack
Frontend
TypeScriptNext.jsStorybookZodJotaiSCSSTailwind CSS
Backend
KotlinSpring Boot (코프링)
Infra
DockerNginxAWS Lightsail