pile·
프론트엔드·카카오페이kakaopay·

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

문제프론트엔드 프로젝트가 커지면서 "이 코드는 어디에 넣어야 할까" 가 매번 의사결정 비용이 된다. 명확한 구조가 없으면 의존성이 얽혀 사이드 이펙트와 유지보수 부담이 커진다.

접근Feature-Sliced Design(FSD) 아키텍처를 도입. 코드를 Layers / Slices / Segments 세 차원으로 분리해 재사용 가능한 로직을 통제하고 응집도·결합도를 관리한다. 적용 과정을 단계별로 코드 레벨로 기록.

결과코드 위치의 명확성과 구조적 안정성을 확보한다. 프로젝트 규모가 커져도 새 기능 추가 시 "어디에 넣어야 하나" 라는 질문이 줄어든다.

카카오페이
카카오페이 블로그
원문은 여기서 이어서 읽을 수 있어요
원문 읽기
읽음 (0)
·takedown 요청

이 글과 비슷한

  1. 프론트엔드·당근당근·

    프롬프트 한 줄로 화면이 나오는 시대, ‘당근스러운 화면’을 만드는 법

    문제AI 바이브 코딩 도구들이 빠르게 UI 를 생성하지만 디자인 시스템 규칙을 따르지 않아 "당근스러운 화면"을 만들 수 없음.

    접근Kraft 의사결정 자동화 도구를 어드민 → CLI → 에이전트로 진화시키면서 DesignSpec 중간 표현 + 11개 Scorer 기반 검증 + Mastra 하네스 + Claude Agent SDK + 크로스세션 메모리 누적으로 구조화.

    결과SEED 디자인 시스템 준수 여부 자동 검증, 도메인별 맥락 반영, 세션 간 학습이 누적되는 UI 생성 플랫폼 구축.

    #llm-app#design-system#ai-coding+6