- 4년차 프론트엔드 개발자이지윤
Turborepo 도입으로 빌드 파이프라인을 14분에서 8분으로 40% 단축하고, ISR과 On-Demand Revalidation으로 서버 부하를 60% 감소시켰습니다. 비효율에는 항상 숫자로 답합니다.
최근에는 Claude Code 활용법 교육자료 를 작성해 반복 작업의 자동화를 팀에 정착시키고 있습니다.
Description.
오픈놀(OPENKNOWL) 에서 미니인턴 사업부 B2C/B2B/관리자 서비스의 프론트엔드 개발과 플랫폼 아키텍처 개선을 담당했습니다.
Tech Stack.
What I did.
- Turborepo 기반 빌드 파이프라인 최적화
3개 독립 프로젝트의 CI/CD 빌드 시간이 길어지는 상황에서 Turborepo 모노레포 아키텍처를 도입했습니다. 공통 UI를 common/ui 패키지로 분리하고, 캐싱과 증분 빌드로 변경된 패키지만 선택적으로 빌드하여 빌드 시간 40% 단축(14분→8분)을 달성했습니다.
- ISR과 On-Demand Revalidation 기반 캐싱 전략
ISR(5분 간격 재생성)과 관리자 콘텐츠 수정 시 즉시 반영되는 On-Demand Revalidation API를 조합한 캐싱 전략을 구축했습니다. 이미지 프록시 라우트에 장기 캐시 정책을 적용하여 SSR 요청 60% 감소 및 페이지 로딩 속도 40% 개선을 달성했습니다.
- BFF 패턴으로 어드민 API 통합
어드민 대시보드에서 유저·통계·알림 등 여러 마이크로서비스를 프론트엔드가 직접 호출하는 구조였습니다. 어드민 전용 BFF를 구축하여 데이터를 서버에서 조합해 제공하고, 브라우저-서버 간 네트워크 왕복을 5회에서 1회로 감소시키며 API 호출·조합 로직을 서버로 이전해 코드 복잡도를 낮췄습니다.
- 다중 필터 인재 검색 최적화
10개 이상의 필터를 조합하는 인재 검색에서 필터 변경마다 API가 호출되어 서버 부하와 UX 저하가 있었습니다. Debounce로 연속 입력을 묶어 불필요한 API 호출을 70% 감소시키고, SWR 캐시 우선 응답으로 체감 대기 시간을 단축했습니다.
- SWR 도입으로 서버 상태 관리 개선
Redux 기반 서버 상태 관리를 SWR로 전환하여 보일러플레이트를 대폭 줄이고, 캐시 무효화와 자동 재검증으로 데이터 신선도를 확보했습니다. revalidateOnFocus 최적화 등 불필요한 API 호출을 줄이는 성능 튜닝도 병행했습니다.
- 다층 테스트 전략 수립 및 CI/CD 통합
수동 QA에만 의존하여 UI 변경 시 시각적 회귀를 사전에 감지하기 어려웠습니다. Jest + Cypress + Chromatic을 CI/CD에 통합한 자동화 파이프라인을 구축하고, TurboSnap으로 변경된 컴포넌트만 선별하여 PR 머지 전 시각적 변경사항을 자동 리뷰하는 프로세스를 확립했습니다.
- App Router 마이그레이션 실험과 기술 선택 기준 수립
성능 개선을 위해 B2C 서비스를 App Router 기반으로 마이그레이션하고, 데이터 패칭은 서버 컴포넌트, 인터랙티브 요소는 클라이언트 컴포넌트로 분리했습니다. 하지만 운영 단계에서 디버깅 복잡도 증가와 기존 라이브러리 호환성 문제가 발생했습니다. 이를 계기로 단기 성과보다 팀 상황과 유지보수 비용을 먼저 고려하는 기술 선택 기준을 수립했습니다.
- 동적 SEO 최적화 및 검색 엔진 대응
검색 엔진에서 서비스 페이지가 노출되지 않는 상황이었습니다. Next.js Metadata API 기반 동적 메타데이터를 121개 페이지에 적용하고 9개 동적 사이트맵 자동 생성 시스템을 구축했습니다. 상세 페이지별 Open Graph 태그를 동적으로 생성하여 소셜 미디어 공유 시 풍부한 프리뷰를 제공했습니다.
- 디자인 시스템 구축 및 컴포넌트 표준화
프로젝트마다 UI가 달라 개발 지연이 반복되고 있었습니다. Atomic Design 기반 공통 컴포넌트 라이브러리를 구축하여 Button, Input, Modal 등 20+ 컴포넌트를 패키지화하고, Storybook + Chromatic으로 시각적 회귀 테스트를 자동화하여 프로젝트 간 UI 일관성을 확보했습니다.
Description.
개발자와 디자이너가 실제 구현물이 디자인 의도대로 완성되었는지 빠르게 검증할 수 있는 서비스입니다. Figma 디자인 파일과 실제 구현된 웹사이트를 나란히 비교하여 색상, 여백, 크기 등의 차이를 유저가 직관적으로 확인할 수 있습니다. 브라우저에서 URL과 피그마 파일 경로를 입력하면 자동으로 스크린샷을 캡처하고 오버레이, 분할 화면 등 다양한 방식으로 비교할 수 있습니다.
Tech Stack.
What I did.
- Server-Sent Events 기반 실시간 진행률 시스템 도입
Figma API 렌더링이 최대 55초까지 소요되어 유저가 작업 중단으로 오해하고 이탈하는 문제가 있었습니다. Server-Sent Events(SSE)를 도입해 실시간 진행률을 표시하고, 비동기 처리로 렌더링 중에도 다른 작업이 가능한 논블로킹 워크플로우를 제공했습니다.
- PixiJS 기반 고성능 드래그 앤 드롭 비교
대용량 Figma 이미지 드래그 시 DOM 기반 렌더링의 성능 저하가 있어 PixiJS(WebGL 기반 렌더링)를 도입했습니다. 오버레이 모드에서는 투명도 조절로 이미지를 겹쳐 비교하고, 분할 화면에서는 중앙선 드래그로 영역 비율을 실시간 조절하여 60fps를 유지하는 부드러운 인터랙션을 제공했습니다.
- Chrome Extension으로 iframe 크기 문제 해결
iframe으로 웹사이트를 띄울 때 브라우저 보안 정책 때문에 외부 사이트의 콘텐츠 높이를 알 수 없어 정확한 디자인 비교가 불가능했습니다. Chrome Extension을 통해 iframe 내부에서 직접 크기를 측정하고, Message Passing으로 React 앱에 전달하여 브라우저 제약을 우회하고 Figma 디자인과 실제 구현물의 픽셀 단위 비교를 구현했습니다.
Description.
개발자와 디자이너를 위한 고양이 이미지 플레이스홀더 서비스입니다. 웹 개발 시 손쉽게 사용할 수 있는 이미지 플레이스홀더를 제공하며, URL 매개변수만으로 원하는 크기와 텍스트 오버레이가 포함된 고양이 이미지를 동적으로 생성합니다.
Tech Stack.
What I did.
- 테스트용 이미지 생성 서비스 구현
QA에서 다양한 해상도의 테스트 이미지를 매번 준비하는 비효율이 있었습니다. Next.js의 ImageResponse를 활용해 URL 매개변수만으로 원하는 규격(최대 8K)과 텍스트가 포함된 고양이 이미지를 즉시 생성하는 서비스를 구현했습니다. Redis 캐싱으로 반복 생성을 방지하고 CloudFlare CDN으로 배포하여 리소스 준비 시간을 단축했습니다.
- 이미지 캐싱 및 CDN 배포
생성된 이미지를 Redis에 캐싱하여 동일한 요청에 대한 반복 생성을 방지하고, CloudFlare CDN을 연동하여 글로벌 배포 환경을 구축했습니다.
Description.
700+ 다운로드
를 기록한 VS Code 확장 프로그램으로, AI 기반 TypeScript 문서화 자동화를 제공합니다. 단축키 한 번으로 타입과 인터페이스에 대한 TSDoc 주석을 생성하여 개발자 생산성과 팀 협업 효율성을 개선했습니다.
Tech Stack.
What I did.
- TypeScript 문서화 자동화 도구 개발
일정에 쫓겨 타입 문서화를 건너뛰면 코드 이해에 점점 많은 시간이 드는 문제가 있었습니다. ChatGPT API와 VS Code Extension을 결합하여 단축키 하나로 TSDoc 주석을 생성하는 도구를 개발했으며, 현재 VS Code Marketplace에서 700+ 다운로드를 기록하고 있습니다.