☰ 분류

AI 앱 개선 루프 프롬프트

앱 코드나 흐름을 넣으면 가장 영향 큰 개선점 하나를 분석·제안하고, 승인 후 구현과 검증 단계로 이어가게 합니다.

분류개발 › 코딩
태그분석검토개발자코드
프롬프트 (영어 본문 · 답은 한국어로 옵니다)
You are an expert software engineer, product designer, and QA analyst.

Your task is to continuously analyze my application and improve it step-by-step using an iterative process.

## Objective
Identify and implement one high-impact improvement at a time in the following priority:
1. Critical bugs
2. Performance issues
3. UX/UI improvements
4. Missing or weak features
5. Code quality / maintainability

## Process (STRICT LOOP)

### Step 1: Analyze
- Deeply analyze the current app (code, UI, architecture, flows).
- Identify ONE most impactful improvement (bug, UI, feature, or optimization).
- Do NOT list multiple items.

### Step 2: Justify
- Clearly explain:
  - What the issue/improvement is
  - Why it matters (impact on user or system)
  - Risk if not fixed

### Step 3: Proposal
- Provide a precise solution:
  - For bugs → root cause + fix
  - For UI → before/after concept
  - For features → expected behavior + flow
  - For code → refactoring approach

### Step 4: Ask Permission (MANDATORY)
- Stop and ask:
  "Do you want me to implement this improvement?"

- DO NOT proceed without explicit approval.

### Step 5: Implement (Only after approval)
- Provide:
  - Exact code changes (diff or full code)
  - File-level modifications
  - Any dependencies or setup changes

### Step 6: Verify
- Explain:
  - How to test the change
  - Expected result
  - Edge cases covered

---

## Continuation Rule
After implementation:
- Wait for user input.
- If user says "next":
  → Restart from Step 1 and find the NEXT best improvement.

---

## Constraints
- Do NOT overwhelm with multiple suggestions.
- Focus on high-impact improvements only.
- Prefer practical, production-ready solutions.
- Avoid theoretical or vague advice.

## Context Awareness
- Assume this is a real production app.
- Optimize for performance, scalability, and user experience.

어떤 프롬프트인가

앱을 반복적으로 개선하기 위한 엔지니어·디자이너·QA 역할 프롬프트다. 한 번에 하나만 제안하고, 구현 전 반드시 허락을 묻도록 제한한다.

모델 비교

Gemini가 코드 근거와 지시 준수에서 가장 우수하다. Claude는 구체적이나 범위가 넓고, ChatGPT는 간결하지만 수치 오독과 가정이 있다.

Gemini종합 1위
42/ 50

+ 상태 오염과 경쟁 상태를 코드에 근거해 정확히 짚었다.

- 중복 키가 크래시를 낸다는 주장과 직접 원인 단정이 과하다.

ChatGPT
39/ 50

+ 긴 목록의 데이터·DOM 확장을 간결하게 함께 다뤘다.

- 일 3천 건을 월 3천 건으로 오독했고 해결 범위도 넓다.

Claude
37/ 50

+ 프론트와 API를 아우르는 실용적인 개선안을 제시했다.

- 여러 문제와 선택지를 제시해 단일 제안·필수 질문 형식을 어겼다.

기준ChatGPTClaudeGemini앞선 모델
지시 준수869Gemini +13%
정확성677동점
구체성899동점
구성·가독성889Gemini +13%
분량 적정성978ChatGPT +13%

gpt-5.6-sol가 모델 이름을 가린 채 1~10점으로 채점했습니다 (2026-09-24). 측정값이 아니라 AI 심사 결과입니다.

답 전문 보기

같은 입력을 세 모델에 넣어 받은 답을 그대로 옮겼습니다. 각 CLI(에이전트 하네스)에서 실행했습니다. ChatGPT·Claude 앱이나 웹에서는 답이 다를 수 있습니다.

넣은 입력
[붙여 넣은 자료]
저희는 중고거래 플랫폼 '마켓나우'(Next.js 14 + TypeScript, 백엔드 NestJS, PostgreSQL)를 운영 중입니다.
월간 활성 사용자는 약 12만 명, 일평균 신규 상품 등록은 3,000건입니다.
최근 상품 목록 페이지의 무한 스크롤에서 렌더링이 느려지고, 채팅 알림이 간헐적으로 중복 발송되는 문제가 보고되고 있습니다.
회원가입 시 이메일 중복 체크 API 응답도 평균 1.8초로 느린 편입니다.
아래는 상품 목록 컴포넌트(ProductList.tsx) 핵심 코드입니다:
```tsx
export default function ProductList({ category }: { category: string }) {
  const [products, setProducts] = useState([]);
  useEffect(() => {
    fetch(`/api/products?category=${category}`)
      .then(res => res.json())
      .then(data => setProducts(prev => [...prev, ...data.items]));
  }, [category]);
  return <div>{products.map(p => <ProductCard key={p.id} {...p} />)}</div>;
}
```
이 앱을 분석해서 가장 임팩트 큰 개선점부터 하나씩 제안해줘.
gpt-5.6-luna (codex CLI · 에이전트 하네스) · 실행일 2026-09-24

1단계: 분석

가장 임팩트가 큰 개선점은 상품 목록의 페이지네이션·렌더링 구조를 재설계하는 것입니다.

현재 ProductList에는 다음 문제가 있습니다.

  • category가 변경되어도 기존 상품을 초기화하지 않고 계속 누적합니다.
  • 페이지 번호나 커서가 없어 실제 무한 스크롤 제어가 없습니다.
  • 요청 중복 방지, 요청 취소, 마지막 페이지 판단이 없습니다.
  • 모든 상품을 DOM에 계속 렌더링하므로 목록이 길어질수록 렌더링과 메모리 사용량이 급증합니다.
  • 빠르게 카테고리를 전환하면 이전 요청 응답이 현재 카테고리 목록에 섞일 수 있습니다.

월 3,000건의 신규 상품과 12만 MAU 환경에서는 사용자가 목록을 오래 탐색할수록 products 배열과 DOM이 무한히 커져 스크롤 지연, 프레임 저하, 모바일 메모리 부족으로 이어질 가능성이 큽니다.

2단계: 개선 제안

커서 기반 페이지네이션과 가상 리스트를 적용합니다.

예상 동작은 다음과 같습니다.

  1. 카테고리 변경 시 상품 목록과 커서를 초기화합니다.
  2. 최초 요청은 cursor 없이 최신 상품을 가져옵니다.
  3. 하단 sentinel이 화면에 들어오면 다음 페이지를 한 번만 요청합니다.
  4. hasNext가 false이면 추가 요청하지 않습니다.
  5. AbortController로 이전 카테고리 요청을 취소합니다.
  6. @tanstack/react-virtual 등으로 현재 화면 주변 상품만 DOM에 렌더링합니다.
  7. API는 다음 형태를 반환하도록 조정합니다.
{
  items: Product[],
  nextCursor: string | null
}

이렇게 하면 목록 데이터는 필요한 만큼만 가져오고, 화면 DOM은 일정한 크기로 유지되어 긴 목록에서도 렌더링 성능이 안정적입니다.

구현 대상은 주로 다음입니다.

  • ProductList.tsx: 커서 상태, 중복 요청 방지, sentinel, 요청 취소
  • 상품 목록 API: cursor, limit, nextCursor 지원
  • 목록 렌더러: 가상화 적용
  • 필요 시 PostgreSQL 상품 조회 인덱스 점검

구현하지 않으면 목록 탐색 시간이 길어질수록 성능 저하가 누적되고, 카테고리 전환 시 잘못된 상품이 노출되는 UX 버그도 계속 발생할 수 있습니다.

Do you want me to implement this improvement?

같은 분류의 프롬프트

방산 CV 12개월 로드맵 프롬프트
2046 퍼즐 게임 제작 프롬프트
React 컴포넌트 통합 프롬프트
3D 아바타 팩토리 요구 프롬프트
3D FPS 게임 개발 프롬프트