사내 프론트엔드 보일러플레이트 구축

프로젝트 설명

신규 프로젝트 착수 비용 절감을 목표로 한 프론트엔드 표준 템플릿 설계 및 구현. 총 7개의 신규 서비스에 공통 기반으로 적용됨

담당 및 구현

• ▸운영 오류를 분석하고 TypeScript 전환을 통해 타입으로 확인 가능한 null/undefined 접근과 인터페이스 불일치를 개발 단계에서 발견하도록 개선
• ▸서비스 유형에 따라 사이드바/메인 레이아웃을 분리한 공통 레이아웃 구조를 설계하고, 반복 UI 패턴을 컴포넌트화
• ▸Next.js 기반 공통 아키텍처 및 환경 설정 표준화
• ▸next-intl 기반 다국어 처리 구조 설계 및 언어팩 관리 자동화

신규 서비스의 반복적인 초기 설정을 보일러플레이트로 표준화

• ▸문제 — 신규 서비스나 백오피스를 개발할 때마다 Next.js 라우팅, i18n 설정, 디자인 시스템 테마 Provider 및 토큰 설정, Prettier·Lint 등의 초기 환경을 반복해서 구성해야 했습니다. Next.js나 MUI 버전이 변경되면 프로젝트마다 호환되는 설정을 다시 확인해야 했고, 사이드바형·헤더/푸터형 등 서비스에 따라 기본 레이아웃도 달랐습니다.
• ▸판단 — 기존 프로젝트를 복사하는 방식은 불필요한 도메인 로직까지 가져오게 되는 문제가 있었습니다. 따라서 공통 설정과 개발 규칙은 단일 기반으로 통합 관리하되, 레이아웃 차이만 유연하게 선택할 수 있는 구조가 필요하다고 판단했습니다.
• ▸해결 — TypeScript 기반 보일러플레이트 프로젝트를 만들고, 사내 프로젝트에서 반복적으로 사용하는 공통 환경과 개발 규칙을 반영한 기본 구조를 main 브랜치에서 관리했습니다. 사이드바형·헤더/푸터형처럼 프로젝트마다 달라지는 레이아웃은 main에서 분기한 브랜치로 구성해, 신규 프로젝트에서는 필요한 레이아웃 브랜치를 선택하고 remote만 변경해 바로 개발을 시작할 수 있도록 했습니다.
• ▸결과 — 이 보일러플레이트를 사내 7개 서비스에 적용했고, 신규 프로젝트마다 약 3일씩 소요되던 초기 설정 작업을 공통 기반으로 대체했습니다. 레포 복제 후 당일 기능 개발에 착수할 수 있게 했으며, 프레임워크와 라이브러리 버전 변경을 먼저 검증하는 기준 프로젝트로도 활용했습니다.