오토프로그7강: 좋은 프롬프트의 기술
구체적으로, 하나만, 안 할 것을 말하세요
오늘 끝나면 이런 걸 갖게 돼요. 같은 요청을 세 번 다듬어 보고, 다른 프로젝트에도 다시 쓸 수 있는 프롬프트 한 개를 갖게 돼요.
1단계: 짧은 요청으로 시작해요
6강에서 쓰던 프로젝트 폴더를 클로드 코드로 여세요. 그 안의 PRD(제품 요구사항 문서)는 무엇을 만들지 정한 설계도예요. 이제 일을 맡기는 문장을 다듬어 볼 차례예요.
먼저 아래 프롬프트를 보내세요. 클로드가 현재 작업과 섞지 않도록 새 폴더에 결과를 만들어요.
파일 만들기나 브라우저 열기 승인 화면이 나오면 대상이 실습 폴더인지 확인하고 승인하세요. 이것만 직접 하시면 나머지는 클로드가 해요.
현재 폴더 안에 prompt-practice-1이라는 새 폴더를 만들고,그 안에 할 일 목록 앱을 만들어 줘.현재 폴더의 다른 파일은 건드리지 마.
결과를 잠깐 살펴보세요. 어떤 기능과 디자인이 들어갔는지는 대부분 클로드가 추측했을 거예요.
2단계: 목표·상황·울타리를 넣어요
식당에서 “맛있는 것 주세요”라고 하면 주방이 메뉴를 골라야 해요. “매운 것은 못 먹고, 된장찌개 1인분을 주세요. 김치는 빼 주세요”라고 말하면 원하는 음식에 가까워져요.
프롬프트(Prompt, AI에게 주는 지시문)도 같아요. 아래 세 가지를 알려주면 클로드가 추측할 부분이 줄어요.
- 목표와 기준: 무엇을 어떤 상태로 만들까요?
- 상황 설명: 지금 어떤 파일과 조건이 있나요?
- 울타리: 무엇을 건드리지 말아야 하나요?
이번에는 새 대화를 열고 아래 프롬프트를 보내세요.
현재 폴더 안에 prompt-practice-2라는 새 폴더를 만들고,할 일 목록 웹앱을 HTML, CSS, JavaScript 파일 각 1개로 만들어 줘.나는 코딩을 모르는 초보자야. 설명은 쉬운 한국어로 해줘.기능:1. 입력창에 할 일을 적고 Enter를 누르면 목록에 추가2. 할 일을 클릭하면 취소선으로 완료 표시3. 목록은 localStorage(브라우저 저장소)에 저장해서 새로고침해도 유지디자인은 다크 배경, 시안 포인트 색상, 카드 형태로 해줘.로그인, 카테고리 분류, 드래그 정렬은 만들지 마.외부 라이브러리는 설치하지 말고, 현재 폴더의 다른 파일도 건드리지 마.
첫 결과와 비교해 보세요. 이번에는 파일 수, 기능, 디자인, 안 만들 것이 분명해요.
3단계: 참고할 느낌을 더해요
디자인은 말만으로 맞추기 어려워요. 레퍼런스(참고 자료)를 주면 화면 배치와 분위기를 설명하기 쉬워져요.
새 대화를 열고 세 번째 프롬프트를 보내세요.
현재 폴더 안에 prompt-practice-3이라는 새 폴더를 만들고,할 일 목록 웹앱을 만들어 줘.Apple의 미니멀한 디자인을 참고해줘.넓은 여백, 둥근 모서리, 부드러운 애니메이션을 사용해줘.기술 구성: HTML, CSS, JavaScript 파일 각 1개기능:1. 입력창에 할 일을 적고 Enter를 누르면 목록에 추가2. 할 일을 클릭하면 취소선과 흐린 색으로 완료 표시3. 오른쪽 X 버튼을 누르면 페이드 아웃 효과 뒤 삭제4. localStorage에 자동 저장디자인:배경은 #1a1a2e, 카드는 rgba(255, 255, 255, 0.05),카드 모서리는 12px, 포인트 색상은 #00e5ff, 폰트는 system-ui로 해줘.로그인, 카테고리, 드래그 정렬은 만들지 마.외부 라이브러리는 사용하지 말고, 코드에는 한글 주석을 달아줘.현재 폴더의 다른 파일은 건드리지 마.
세 결과를 보고 어떤 지시가 화면에 반영됐는지 찾아보세요. 마지막에는 클로드에게 이렇게 말하세요.
prompt-practice-1, prompt-practice-2, prompt-practice-3의 차이를 초보자도 알 수 있게 표로 정리해 줘.그다음 prompt-practice-3 폴더에서 만든 파일을 브라우저로 열어 줘.
브라우저가 열리지 않으면 클로드가 보여 주는 안내를 확인한 뒤 다시 열어 달라고 하세요.
프롬프트의 세 요소를 더 살펴봐요
목표와 기준
“파스타 주세요”처럼 할 일을 먼저 알려주세요. 결과를 판단할 기준도 함께 적으면 좋아요.
점심 메뉴 추천 웹앱을 만들어 줘.코딩을 모르는 사람도 읽을 수 있도록 변수명은 뜻이 분명하게 짓고,주석은 한글로 달아줘.
클로드 코드는 이미 코딩을 돕는 도구라서 “10년 차 개발자처럼 행동해”라는 역할을 붙일 필요가 없어요. 원하는 품질을 구체적으로 말하는 편이 나아요.
상황 설명
식당에 인원과 못 먹는 재료를 알리듯, 클로드에도 현재 조건을 알려주세요.
나는 코딩을 모르는 초보자야.6강에서 만든 PRD.md가 있어.HTML, CSS, JavaScript로 만들 거야.
관련 파일과 지금 겪는 문제를 함께 알려주면 클로드가 덜 추측해요.
울타리
울타리는 작업 범위를 정해요. 없으면 클로드가 요청하지 않은 파일이나 기능까지 건드릴 수 있어요.
다른 파일은 건드리지 마.외부 라이브러리는 설치하지 마.한 번에 기능 하나만 만들어.설명은 한글로 해줘.
세 요소는 꼭 같은 순서로 쓸 필요가 없어요. 목표, 현재 상황, 건드리지 않을 범위가 모두 들어갔는지만 확인하세요.
다섯 가지 요청을 고쳐 봐요
1. 웹페이지 만들기
나쁜 요청: 홈페이지 만들어 줘.좋은 요청:프리랜서 디자이너 김다온의 자기소개 웹페이지를 파일 하나로 만들어 줘.맨 위에는 이름과 “AI와 함께 만드는 사람”이라는 소개를 넣어줘.중간에는 제목과 설명이 있는 포트폴리오 카드 3개를 배치하고,맨 아래에는 이메일과 GitHub 링크를 넣어줘.어두운 배경에 시안 포인트 색상을 쓰고 휴대폰에서도 깨지지 않게 해줘.
2. 에러 고치기
나쁜 요청: 에러 고쳐 줘.좋은 요청:버튼을 눌러도 다음 페이지로 넘어가지 않아.브라우저 개발자 도구에 “TypeError: Cannot read properties of undefined”가 보여.버튼 클릭을 처리하는 부분만 확인하고, 다른 파일은 건드리지 마.수정 전에 원인과 바꿀 파일을 먼저 알려줘.
무엇을 했을 때 어떤 문제가 생겼는지 적으세요. 에러 문구가 보이면 그대로 붙여 넣는 편이 좋아요.
3. 디자인 바꾸기
나쁜 요청: 예쁘게 해줘.좋은 요청:카드를 유리처럼 반투명한 글래스모피즘(유리 질감 디자인) 스타일로 바꿔줘.뒤가 살짝 비치게 하고 테두리는 얇게, 그림자는 부드럽게 해줘.기존 배치는 그대로 두고 카드 디자인만 바꿔줘.
4. 기능 추가하기
나쁜 요청: 다크 모드 넣어줘.좋은 요청:화면 오른쪽 위에 다크 모드 전환 버튼을 추가해줘.누르면 어두운 배경과 밝은 글자로 바뀌고, 다시 누르면 원래대로 돌아와야 해.새로고침해도 선택한 모드를 유지하고 처음에는 밝은 모드로 보여줘.헤더와 스타일 파일만 수정하고 다른 파일은 건드리지 마.
5. PRD로 개발 시작하기
나쁜 요청: 이 PRD 보고 만들어 줘.좋은 요청:PRD.md를 읽고 1번 기능인 메뉴 무작위 추천만 먼저 만들어 줘.메뉴 10개는 코드 안에 넣고, 화면에는 “오늘 뭐 먹지?” 버튼 하나만 보여줘.버튼을 누르면 메뉴 하나가 무작위로 나와야 해.2번 이후 기능은 아직 만들지 마.끝나면 결과물을 브라우저로 열어줘.
PRD가 있어도 한 번에 모든 기능을 맡기지 마세요. 10강에서 기능 하나씩 완성하는 방법을 더 자세히 배워요.
화면은 보여주는 편이 쉬워요
URL을 참고 자료로 줄 때는 무엇을 따라 하고 무엇을 유지할지 함께 적으세요.
이 사이트의 느낌을 참고해줘: https://stripe.com넓은 여백, 깔끔한 글자 배치, 첫 화면의 그라데이션 배경을 참고해줘.내용과 구조는 내 PRD를 따라줘.
스크린샷은 이미지 파일을 클로드 코드 창에 끌어다 놓는 방법이 가장 단순해요. 붙여넣기나 파일 위치를 알려주는 방법도 쓸 수 있어요.
첨부한 스크린샷의 화면 배치를 참고해줘.왼쪽에는 사이드바, 오른쪽에는 본문을 배치해줘.색상은 내 PRD의 다크 테마를 따르고,글자 크기와 여백 비율은 스크린샷을 참고해줘.
참고 자료를 그대로 복제하라는 뜻은 아니에요. 가져올 요소를 골라 말하고, 내 내용과 조건은 따로 적어주세요.
오토프로그 랩스 초기에 쓴 방식
초기 다크 테마의 분위기를 정할 때는 색상, 글꼴, 효과를 이름으로 적었어요.
이 사이트는 AI 지식 아카이브야. 해커 감성과 사이버펑크 분위기의 다크 테마를 만들어줘.배경은 거의 검정인 #050505, 포인트 색상은 시안인 #00e5ff로 해줘.제목은 Chakra Petch, 본문은 Pretendard 글꼴을 사용해줘.카드에 마우스를 올리면 시안 빛 효과가 보이게 하고,배경에는 격자무늬를 넣어 터미널과 홀로그램 분위기를 만들어줘.
글 작성 규칙을 만들 때도 독자와 금지 사항을 함께 적었어요.
이 사이트의 글 작성 규칙을 writing-rules.md로 정리해줘.화자는 디온웍스 대표이고, 독자는 터미널을 모르는 완전 초보자야.전문 용어는 처음 나올 때 괄호로 쉽게 풀어줘.비유 도입, 적용 사례, 초보 가이드, 추천 대상 순서로 써줘.이모지는 꼭 필요할 때만 쓰고 500줄을 넘기지 마.
이처럼 목표와 기준, 상황, 울타리를 한 프롬프트 안에 모으면 돼요.
잘된 프롬프트를 모아두세요
한 번 잘된 프롬프트는 다음 작업에서 이름과 조건만 바꿔 쓸 수 있어요. 메모장이나 prompts.md 파일에 디자인용, 에러 수정용, 기능 추가용으로 나눠 보관하세요.
9강에서 배울 CLAUDE.md에는 프로젝트에서 늘 지켜야 할 규칙을 넣을 수 있어요. 매번 반복할 지시와 한 번만 쓸 요청을 나누면 프롬프트가 짧아져요.
이번 강에서 기억할 것
프롬프트에는 목표·상황·울타리를 넣으세요. “무엇을 만들지”, “지금 어떤 상태인지”, “무엇을 하지 않을지”를 말하면 돼요.
디자인은 URL이나 스크린샷을 참고 자료로 쓰되, 가져올 요소를 지정하세요. 큰 PRD도 기능 하나씩 맡기면 결과를 확인하기 쉬워요.
이런 분께 추천해요
AI에게 맡긴 결과가 자주 빗나가는 분, 6강에서 만든 PRD로 개발을 시작하려는 분께 필요해요. 글쓰기나 이메일처럼 코딩 밖의 요청에도 같은 원리를 쓸 수 있어요.
참고 링크
다음 강
8강: 첫 프로젝트에서는 오늘 다듬은 프롬프트로 개인 웹페이지를 만들고 GitHub Pages에 공개해요.