FSD 아키텍처 적용기 : "이 코드는 어디에 넣어야 할까?" FSD가 답해준 코드 위치의 명확성

간단 소개

카카오페이 FE 개발팀이 복잡한 레포지토리 구조 문제를 해결하기 위해 FSD 아키텍처를 도입하고, 그 과정과 효과를 공유합니다.

AI Summary

1. FSD 아키텍처 도입 배경

기존 레포지토리의 복잡한 구조로 개발 생산성 저하, 시스템 안정성 우려가 있었습니다.
코드 위치 명확성과 의존성 문제 해결을 위해 FSD(Feature-Sliced Design) 아키텍처를 도입했습니다. 2. FSD 핵심 개념
FSD는 프론트엔드 구조 방법론으로, 높은 응집도와 낮은 결합도를 목표합니다.
코드를 레이어(Layers), 슬라이스(Slices), 세그먼트(Segments) 3가지 차원으로 분리합니다.
레이어는 단방향 의존성 수직 계층이며, 슬라이스는 도메인별 수평 분할, 세그먼트는 기술 목적(ui, api, model) 구분을 담당합니다. 3. FSD 적용 전략 및 성과
widgets 레이어 미사용, pages 레이어는 Slice Grouping을 허용했습니다.
API 코드 위치는 재사용 범위에 따라 명확히 구분하고, 상향식(Bottom-Up) 방식으로 점진적 도입했습니다.
적용 후 코드 위치 명확화, 재사용 통제, 개발 생산성 및 유지보수성 향상 효과를 얻었습니다.