주식회사 똑똑한개발자
2023.07 - 현재 (3년 3개월) 정규직 Frontend Developer
플러그B2B 영업 라이프사이클 관리 SaaS
2024.02 - 현재
동료가 일관된 UI를 쉽게 만들고 검증할 수 있는 공통 기반을 마련했습니다
- 사용처마다 달라지던 아이콘 크기·색상을 컴포넌트 참조 기반 API로 공통 제어하고, SVG 정규화·컴포넌트 생성을 자동화해 아이콘 추가·변경 시에도 크기·색상의 일관성 유지
- 컴포넌트 상태를 하나씩 바꿔야 비교할 수 있던 불편을 Storybook 조합표·placeholder로 개선해 상태 조합을 한눈에 비교하고, Chromatic으로 변경 전후의 시각적 차이를 검증
- 화면별 옵션과 내부 분기가 쌓이던 Drawer를 기명 slot·합성 컴포넌트로 재설계해, 공통 배치·상호작용과 화면별 콘텐츠·업무 로직을 분리하고 8개 업무 영역에 적용
- 계약서·이메일·어드민의 서로 다른 편집 요구에 맞춰 Tiptap 멘션·이미지 리사이즈 extension을 구현하고, 용도별로 조합해 필요한 기능을 선택적으로 재사용
- 모노레포에서 반복되는 UI와 색상·타이포그래피 토큰을 공통 패키지로 통합해, 4개 앱에 컴포넌트·스타일 변경을 일관되게 적용
사용자 흐름을 끊는 원인을 찾아 로딩과 상태 관리 구조를 개선했습니다
- 원본 이미지가 준비될 때까지 빈 영역이 보이던 랜딩에 Base64 LQIP·원본 단일 요청 구조를 적용해, 기본 Image 대비 첫 시각 정보 표시 시간 72% 단축
- 탭 전환마다 초기화되던 드로어의 입력값·스크롤 위치를 React Activity로 보존하고, 사전 렌더링·목록 가상화를 함께 적용해 콘텐츠 준비 시간을 첫 방문 81%·재방문 42% 단축
- 화면 밖 열까지 동시에 조회하던 의뢰 보드를 가시 영역 우선·나머지 열 순차 조회로 전환해, 진입 요청 수 65% 감소·첫 화면 대기 시간 약 23% 단축
- 여러 API의 로딩 분기가 지표 계산에 섞여 있던 대시보드에 Suspense·공통 Boundary를 적용해, 계산 로직과 대기·오류 처리를 분리하고 섹션별 표시를 표준화
개발 과정의 지연과 반복을 공통 구조와 검증 기준으로 줄였습니다
- 공통 소스 직접 참조를 사전 빌드 패키지로 전환해 빌드 시간을 25% 단축하고, barrel export의 불필요한 의존성을 정리해 초기 공용 청크 77% 축소
- 기술별 폴더에 흩어진 API·상태·UI를 FSD 기반으로 재구성하고 레이어별 책임·import 규칙을 문서와 Lint로 관리해, 기능 탐색과 의존성 검토 기준을 통일
- 도메인별 API 응답 변환을 공통 매퍼로 모으고 주요 조회 경계에 Zod 검증을 적용해, 변환 규칙을 재사용하고 잘못된 응답을 화면에서 사용하기 전에 감지
동료가 필요한 정보와 판단 근거를 함께 확인할 수 있도록 개발·운영 절차를 체계화했습니다
- AI 기반 개발에서 구현 의도·판단 근거가 남도록 Claude Code 플러그인에 인터뷰·SPEC·디자인 검토를 보강하고, TDD·QA·PR이 같은 요구사항·결정 기록을 참조하도록 개발 절차를 공통화
- 배포 알림만으로 실제 반영 내용을 파악하기 어려워 운영에 반영된 커밋·PR의 AI 요약을 도입하고, 사용자 변화와 개발 정보를 구분한 릴리즈 노트를 Slack에 자동 공유
- 예상 가능한 에러와 운영 오류가 함께 수집되던 Sentry에 업무별 오류 분류·중복 보고 방지 정책을 적용해, 대응이 필요한 오류를 선별하는 수집 체계 구축
Next.js, TypeScript, TanStack Query, RHF, Zod, Chakra, Zustand, Turborepo, Storybook, Sentry
