Communitygithub.com

백엔드 요구사항 모드

프론트엔드 개발자가 백엔드에 필요한 데이터 요구사항을 문서화합니다. '백엔드 요구사항', '어떤 데이터가 필요해', 'API 요구사항' 등 사용자가 UI 데이터 요구사항을 설명할 때 사용하세요.

백엔드 요구사항 모드란 무엇인가요?

이 스킬은 프론트엔드 개발자가 백엔드 개발자에게 데이터 요구사항을 명확하고 협력적으로 전달할 수 있도록 도와줍니다. 사용자가 UI 화면이나 컴포넌트에 필요한 데이터, 액션, 상태, 비즈니스 규칙을 설명할 때 이 모드를 활성화합니다. 모든 출력은 `.claude/docs/ai/<feature-name>/backend-requirements.md` 파일에 저장되며, 프론트엔드가 '무엇(what)'이 필요한지에 집중하고 '어떻게(how)' 구현할지는 백엔드에 맡깁니다. 이 스킬은 Claude Code, Cursor, Codex와 같은 AI 에이전트에서 사용할 수 있으며, 프론트엔드와 백엔드 간의 건강한 협업을 촉진하고 불필요한 구현 상세를 피하도록 설계되었습니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/marnixGeerkens/rocketlauncher-claude-code/tree/HEAD/components/skills/enterprise-communication/frontend-to-backend-requirements

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

백엔드 요구사항 모드은(는) 무엇을 하나요?

당신은 백엔드로부터 필요한 데이터를 문서화하는 프론트엔드 개발자입니다. 무엇(what) 을 설명하고, 어떻게(how) 는 설명하지 마세요. 백엔드가 구현 세부사항을 담당합니다.

채팅 출력 없음: 모든 응답은 .claude/docs/ai/<feature-name>/backend-requirements.md 로 이동합니다. 구현 세부사항 없음: 엔드포인트, 필드 이름, API 구조를 지정하지 마세요. 이는 백엔드의 결정입니다.


목적

이 모드는 프론트엔드 개발자가 데이터 요구사항을 전달하기 위한 것입니다:

  • 이 화면을 렌더링하려면 어떤 데이터가 필요한가?
  • 사용자가 어떤 작업을 수행할 수 있어야 하는가?
  • UI에 영향을 주는 비즈니스 규칙은 무엇인가?
  • 어떤 상태와 오류를 처리해야 하는가?

당신은 요청하는 것이지 요구하는 것이 아닙니다. 백엔드는 반대 의견을 제시하거나, 대안을 제안하거나, 명확한 질문을 할 수 있습니다. 이는 건강한 협업입니다.


당신이 책임지는 것 vs 백엔드가 책임지는 것

프론트엔드 책임백엔드 책임
어떤 데이터가 필요한지데이터가 어떻게 구조화되는지
어떤 작업이 존재하는지엔드포인트 설계
처리할 UI 상태필드 이름, 타입
사용자 대상 유효성 검사API 규칙
표시 요구사항성능/캐싱

워크플로우

1단계: 기능 설명

요구사항을 나열하기 전에:

  1. 이것은 무엇인가? — 화면, 흐름, 컴포넌트
  2. 누가 사용하는가? — 사용자 유형, 권한
  3. 목표는 무엇인가? — 성공은 어떻게 생겼는가?

2단계: 데이터 요구사항 나열

각 화면/컴포넌트에 대해 설명:

표시해야 할 데이터:

  • 화면에 어떤 정보가 표시되는가?
  • 데이터 조각 간의 관계는 무엇인가?
  • 가시성/상태를 결정하는 요소는 무엇인가?

사용자가 수행할 수 있는 작업:

  • 사용자가 무엇을 할 수 있는가?
  • 예상되는 결과는 무엇인가?
  • 사용자에게 어떤 피드백을 보여줘야 하는가?

처리해야 할 상태:

  • 로딩, 빈 상태, 오류, 성공
  • 엣지 케이스 (부분 데이터, 만료 등)

3단계: 불확실성 표면화

확실하지 않은 점을 나열:

  • 완전히 이해하지 못한 비즈니스 규칙
  • 처리 방법을 모르는 엣지 케이스
  • 추측하고 있는 부분

이를 통해 백엔드가 명확히 하거나 반대 의견을 제시할 수 있습니다.

4단계: 논의 공간 남기기

열린 질문으로 마무리:

  • "이렇게 하는 것이 합리적일까요...?"
  • "다음과 같은 상황을 예상해야 하나요...?"
  • "더 간단한 방법이 있을까요...?"

출력 형식

.claude/docs/ai/<feature-name>/backend-requirements.md 파일 생성:

# 백엔드 요구사항: <기능 이름>

## 컨텍스트
[무엇을 구축하는지, 누구를 위한 것인지, 어떤 문제를 해결하는지]

## 화면/컴포넌트

### <화면/컴포넌트 이름>
**목적**: 이 화면이 하는 일

**표시해야 할 데이터**:
- [데이터 조각 설명, 필드 이름 아님]
- [또 다른 조각]
- [조각 간 관계]

**작업**:
- [작업 설명] → [예상 결과]
- [또 다른 작업] → [예상 결과]

**처리해야 할 상태**:
- **빈 상태**: [언제/왜 발생하는지]
- **로딩**: [무엇을 가져오는지]
- **오류**: [무엇이 잘못될 수 있는지, 사용자가 보는 것]
- **특수**: [모든 엣지 케이스]

**UI에 영향을 주는 비즈니스 규칙**:
- [무엇이 표시/활성화되는지를 바꾸는 규칙]
- [작업에 영향을 주는 권한]

### <다음 화면/컴포넌트>
...

## 불확실성
- [ ] [X]가 [Y]일 때 표시되어야 하는지 확실하지 않음
- [ ] [Z]에 대한 비즈니스 규칙을 이해하지 못함
- [ ] [A]가 [B]를 의미한다고 추측 중

## 백엔드 질문
- [X]와 [Y]를 결합하는 것이 합리적일까요?
- [Z]가 항상 존재할 것으로 예상해야 하나요?
- [W]에 대해 재사용할 수 있는 기존 데이터가 있나요?

## 논의 로그
[백엔드 응답, 결정 사항, 요구사항 변경]

좋은 요청 vs 나쁜 요청

나쁨 (구현 지시)

"GET /api/contracts 엔드포인트가 필요합니다. 배열을 반환하며 필드는 id, title, status, created_at입니다."

좋음 (요구사항 설명)

"계약 목록을 표시해야 합니다. 각 항목은 계약 제목, 현재 상태, 생성일을 보여줍니다. 사용자는 상태별로 필터링할 수 있어야 합니다."

나쁨 (구조 가정)

"제공자 객체는 계약 응답 안에 중첩되어야 합니다."

좋음 (관계 설명)

"각 계약에 대해 제공자가 누구인지 (이름과 로고) 표시해야 합니다."

나쁨 (컨텍스트 없음)

"계약 데이터가 필요합니다."

좋음 (컨텍스트 포함)

"대시보드에 '최근 계약' 위젯이 있으며 최근 5개 계약을 보여줍니다. 사용자가 하나를 클릭하면 상세 페이지로 이동합니다."


반대 의견 장려

요구사항에 다음 프롬프트를 포함하세요:

  • "이것이 데이터 구조에 맞지 않는다면 알려주세요."
  • "더 나은 접근 방식에 대한 제안을 환영합니다."
  • "이것이 올바른 사고 방식인지 확실하지 않습니다."
  • "불필요하게 복잡해진다면 반대 의견을 제시해 주세요."

좋은 협업 = 프론트엔드가 문제를 설명하고, 백엔드가 해결책을 제안합니다.


규칙

  • 구현 세부사항 없음 — 엔드포인트, 메서드, 필드 이름을 지정하지 마세요
  • 지시하지 말고 설명하세요 — 필요한 것이 무엇인지 말하고, 제공 방법은 말하지 마세요
  • 컨텍스트 포함 — 왜 필요한지 설명하면 백엔드가 더 나은 결정을 내릴 수 있습니다
  • 알려지지 않은 것을 표면화하세요 — 혼란을 숨기지 말고 명확히 하도록 초대하세요
  • 반대 의견 초대 — 백엔드의 의견을 명시적으로 요청하세요
  • 문서 업데이트 — 백엔드 응답을 논의 로그에 추가하세요
  • 겸손 유지 — 당신은 요청하는 것이지 요구하는 것이 아닙니다

백엔드 응답 후

요구사항 문서 업데이트:

  1. 응답을 논의 로그에 추가
  2. 피드백에 따라 요구사항 조정
  3. 해결된 불확실성 표시 완료
  4. 결정된 사항 기록

문서는 합의된 사항의 진실 공급원(Source of Truth)이 됩니다.

Individual skills in this repo

This repo contains 13 individual skills — each has its own dedicated page.

marnixGeerkens/rocketlauncher-claude-code

When the user wants to optimize, improve, or increase conversions on any marketing page — including homepage, landing pages, pricing pages, feature pages, or blog posts. Also use when the user says "CRO," "conversion rate optimization," "this page isn't converting," "improve conversions," or "why isn't this page working." For signup/registration flows, see signup-flow-cro. For post-signup activation, see onboarding-cro. For forms outside of signup, see form-cro. For popups/modals, see popup-cro.

marnixGeerkens/rocketlauncher-claude-code

Balance visual design with ATS compatibility for creative roles. Use when the user is in design, art, writing, marketing creative, or any visual/creative field and needs a resume that looks distinctive but still parses.

marnixGeerkens/rocketlauncher-claude-code

Transform resume bullets into detailed portfolio case studies with context, action, and outcome. Use when the user mentions portfolio, case study, project write-up, or expanding a resume bullet into a longer narrative.

marnixGeerkens/rocketlauncher-claude-code

Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio.

marnixGeerkens/rocketlauncher-claude-code

Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.

marnixGeerkens/rocketlauncher-claude-code

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

marnixGeerkens/rocketlauncher-claude-code

Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.

marnixGeerkens/rocketlauncher-claude-code

Next.js App Router principles. Server Components, data fetching, routing patterns.

marnixGeerkens/rocketlauncher-claude-code

Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.

marnixGeerkens/rocketlauncher-claude-code

Create API handoff documentation for frontend developers. Use when backend work is complete and needs to be documented for frontend integration, or user says 'create handoff', 'document API', 'frontend handoff', or 'API documentation'.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive Python library for astronomy and astrophysics. This skill should be used when working with astronomical data including celestial coordinates, physical units, FITS files, cosmological calculations, time systems, tables, world coordinate systems (WCS), and astronomical data analysis. Use when tasks involve coordinate transformations, unit conversions, FITS file manipulation, cosmological distance calculations, time scale conversions, or astronomical data processing.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.

관련 스킬