AI 활용 프롬프트 모음

AI 테스트 & 학습 시 바로 활용할 수 있는 고효율 프롬프트 패턴을 정리했습니다

🧭 기본 원칙

🎯 목적 명확화

무엇(What)을 원하는지와 왜(Why) 필요한지를 함께 작성하면 AI가 더 정확하게 응답합니다.

🧱 문맥 제공

현재 코드 일부, 에러 메시지, 기대 동작 등을 함께 제공하세요.

🔁 점진적 개선

한 번에 완벽한 답을 기대하지 말고 후속 질문으로 다듬으세요.

✅ 출력 형식 지정

예: "표 형태로", "JSON으로", "단계 목록" 등 원하는 포맷을 명시합니다.

📦 핵심 프롬프트 패턴

1. 오류 디버깅

역할: 당신은 경험 많은 JavaScript 디버거입니다.
문맥: 아래 코드는 버튼 클릭 시 카운터가 증가해야 하지만 동작하지 않습니다.
코드:
---
// index.js
let count = 0;
document.getElementById('btn').addEventListener('click', () => {
  count++
  document.querySelector('#value').innerText = count
})
---
문제: 클릭해도 숫자가 안 바뀜.
요청: 1) 가능한 원인 3가지 2) 각 해결 방법 3) 개선된 코드 제시.
출력 형식: 마크다운 표 & 코드블록.

2. 코드 리팩터링

역할: 성능과 가독성 개선을 돕는 시니어 프론트엔드 개발자.
대상 코드 목적: 배열에서 짝수만 골라 제곱하여 합산.
제한: ES6 이상, 사이드이펙트 금지.
코드:
---
function calc(arr){
  let s = 0;
  for(let i=0;i


          
            3. 학습 & 개념 정리
            
              목표: 초보자가 '이벤트 버블링'을 이해.
요청: 1) 한 문장 정의 2) 단계별 동작 흐름 3) 간단한 비유 4) 잘못된 오해 2가지 5) 15줄 이하 예제 코드 6) 스스로 점검 퀴즈 3문항 (정답 포함).
              
            
          
          
            4. 기능 설계 → 코드
            
              역할: 요구사항을 명확한 컴포넌트 설계와 코드로 변환하는 도우미.
요구사항(자연어): 사용자가 Todo 입력 → 목록 추가, 완료 토글, 삭제.
제약: 순수 JS (프레임워크 X), 로컬스토리지 저장, 접근성 고려.
요청: 1) 기능 목록 2) 상태 구조 3) 이벤트 흐름 4) HTML 골격 5) JS 구현 (모듈화) 6) 추가 개선 아이디어.
              
            
          
          
            5. 성능 최적화 조언
            
              역할: 웹 성능 컨설턴트.
문맥: 이미지 많은 랜딩 페이지 초기 로딩이 느림.
환경: 정적 호스팅, 빌드 도구 없음.
요청: 1) 체크리스트 (Critical Rendering Path 기준) 2) 적용 우선순위 3) 예시 코드 (지연 로딩/이미지 포맷) 4) 개선 전/후 기대 영향 (정성적).
              
            
          
          
            6. 시험 대비 연습문항 생성
            
              목표: JavaScript 비동기 관련 5문제 생성.
범위: Promise, async/await, fetch 에러 처리.
난이도: 쉬움2 / 중간2 / 약간어려움1.
출력: 번호, 문제, 선택지 4개, 정답 & 해설.
추가: 각 난이도별 학습 포인트 한 줄.



      
      
        
          🔧 유용한 AI 실험 프롬프트
          
            아래 예시는 영감을 제공하고 AI를 테스트 할 수 있는 프롬프트 입니다.
          
          
            
            
              Create html, css, and javascript code where a ball bounces inside a spinning hexagon. the ball must be affected by gravity and friction, and bounce realistically off the rotating walls.
              
            
            
              Write html, css, and javascript to display 20 balls bouncing inside a spinning heptagon. each ball should have a unique color, a number label, gravity, and collision detection with the walls. all code in one file.
              
            
            
              Create html/css/js where a fountain emits colorful particles from the bottom center of the canvas. particles should follow gravity, fade over time, and be removed when they leave the screen.
              
            
            
              Create html/css/js for a pong game where the left paddle is user-controlled with arrow keys and the right paddle is controlled by a basic ai following the ball.
              
            
            
              Write html/css/js where a dvd logo moves around the screen, bouncing off the edges, and changes color on each bounce.
              
            
            
              Make html/css/js that simulates a rotating 3d starfield as if moving through space. stars closer to the viewer should appear larger and move faster.
              
            
            
              Write html/css/js that draws a fractal tree using recursion. allow tree angle and depth to be adjustable with sliders in the browser.
              
            
            
              Create html/css/js for a snake game controlled by arrow keys. snake grows when it eats food, and game ends when snake hits itself or the wall.
              
            
            
              Write html/css/js where the shape itself changes between triangle, square, pentagon, hexagon, and octagon every 5 seconds, with a ball bouncing inside it under gravity and friction.
              
            
          
        
      

      
        
          💡 프롬프트 작성 체크리스트
          
            역할(Role)을 지정했는가?
            문맥(Context)을 충분히 제공했는가?
            요청(Task)을 번호로 구조화했는가?
            출력 형식(Output Format)을 구체화했는가?
            제약조건(Constraints)을 명시했는가?
            
              후속 활용을 염두에 두고 복사/재사용이 쉬운가?
            
          
        
      

      
        
          🛠 실습: 나만의 프롬프트 작성
          
            아래 템플릿을 복사해 자신만의 학습/테스트용 프롬프트를 만들어보세요.
          
          
            역할(Role): 
목표(Goal): 
문맥(Context): 
제약(Constraints): 
요청(Tasks): 1)  2)  3)  
출력 형식(Format): 
추가 개선(Improve Next): 내가 더 명확히 정의해야 할 부분은?