신규 FE 프로젝트 기술 스택 정리 방법

JACKJACK·2025년 8월 6일

프론트엔드 아키텍처를 새롭게 설계할 때는 수많은 선택지를 마주하게 된다. 이 글에서는 React 기반으로 한 프로젝트 도입 과정을 정리하며, 기술 스택 도입 및 검토 순서를 간략히 소개한다. 비슷한 고민을 하고 있는 팀이라면 참고할 수 있을 것이다.

1. 프레임워크 및 런타임 결정

가장 먼저 전체 프레임워크를 정하는 작업이 필요하다.
SPA를 유지할 것인지, SSR을 활용할 것인지에 따라 선택지가 달라진다.
React 기반에서는 Next.js, Vue에서는 Nuxt가 가장 널리 사용된다.

2. 번들러 선정

개발 생산성과 빌드 속도는 번들러에 따라 크게 달라진다.
Webpack, Vite, Bun 등을 비교한 결과, Vite가 빠른 HMR과 설정 편의성 면에서 우세했다.
최종적으로 Vite를 사용하기로 결정했다.

3. UI 라이브러리 검토

다음은 UI 컴포넌트 라이브러리를 고르는 단계다.
복잡한 Grid, Tree, Chart 기능이 필요한 상황에서 Kendo UI가 적합하다고 판단했다.
단순히 예쁜 UI가 아닌, 실사용 기능 위주의 검토가 핵심이다.

4. 디자인 패턴 및 디렉토리 구조 설계

구조화된 코드 작성을 위해 디자인 패턴을 정의한다.
Atomic Design, Feature-Sliced Design 등 다양한 방식을 논의했으며,
실무 적용 가능성을 고려해 Atomic Design을 변형하여 도입했다.
디렉토리 구조는 관심사 기반으로 정리되었다.

5. 상태 관리 전략 수립

클라이언트 상태와 서버 상태는 별도로 나눠서 접근했다.
전역 상태는 Zustand, 서버 상태는 SWR을 도입했다.
각 라이브러리는 단순한 인기보다는, 우리 프로젝트의 복잡도와 용도에 맞춰 비교·분석을 진행했다.

6. Micro Frontends 구조 검토

도메인 별 분리와 팀 간 독립 배포를 위해 MFE 도입 여부를 검토했다.
Module Federation을 기반으로 일부 페이지를와 공통 모듈을 Remote, Shared 구조로 분리했다.
아키텍처 수준에서 확장성과 유지보수를 고려한 결정이다.

7. 디자인 시스템과 Storybook

디자인 시스템 구축을 위해 Storybook을 도입했다.
Atomic 단위로 컴포넌트를 문서화하며, 각자 개발한 컴포넌트를 Storybook 가이드에 추가하도록 했다.
UI 품질과 협업 효율을 동시에 높일 수 있는 접근이다.

8. 협업 방식 및 코드 컨벤션 정리

Figma를 활용한 화면 설계, Storybook 기반 협업, 디렉토리 공유 방식 등을 논의했다.
코딩 컨벤션은 Airbnb 스타일 가이드를 기반으로 문서화하며 FE 기준을 정의했다.

9. 기타 기술 정책 및 통일 작업

스타일 라이브러리로 Emotion, Styled-Component, CSS Module 등을 검토했다.
Form validation은 react-hook-form 으로 확정했다.
에러 시 input 엘리먼트에 빨간 테두리를 주는 등, 사용자 경험을 고려한 통일화 작업도 병행했다.
Interceptor 전략, 웹 보안 헤더 점검 등 보안 관련 검토도 함께 진행되었다.