좋은 질문 하는 법
AI에게 어떻게 질문하느냐에 따라 답변의 질이 크게 달라집니다. 효과적으로 질문하는 방법을 배워봅시다.
나쁜 질문 vs 좋은 질문
섹션 제목: “나쁜 질문 vs 좋은 질문”예제 1: 웹사이트 만들기
섹션 제목: “예제 1: 웹사이트 만들기”❌ 나쁜 질문
웹사이트 만들어줘✅ 좋은 질문
카페 메뉴판 웹페이지 만들어줘.- 카페 이름과 로고- 메뉴 3개 (아메리카노 4,500원, 라떼 5,000원, 케이크 6,000원)- 영업시간 (10:00 - 22:00)- 전화번호깔끔하고 심플한 디자인으로예제 2: 함수 만들기
섹션 제목: “예제 2: 함수 만들기”❌ 나쁜 질문
계산하는 함수 만들어줘✅ 좋은 질문
두 숫자를 더하는 JavaScript 함수 만들어줘.함수 이름은 addNumbers이고,두 개의 숫자를 파라미터로 받아서합계를 리턴해야 해.예제 3: 스타일링
섹션 제목: “예제 3: 스타일링”❌ 나쁜 질문
예쁘게 만들어줘✅ 좋은 질문
버튼을 파란색 배경에 흰색 글씨로 만들어줘.마우스를 올리면 색이 진해지고,클릭하면 약간 눌리는 효과 추가해줘.좋은 질문의 5가지 요소
섹션 제목: “좋은 질문의 5가지 요소”1. 목적 명확히
섹션 제목: “1. 목적 명확히”무엇을 만들고 싶은지 구체적으로
❌ “폼 만들어줘” ✅ “사용자 로그인 폼 만들어줘”
2. 요구사항 나열
섹션 제목: “2. 요구사항 나열”필요한 기능을 모두 적기
회원가입 폼 만들어줘.필요한 항목:- 이름 (필수)- 이메일 (필수, 이메일 형식 체크)- 비밀번호 (필수, 최소 8자)- 비밀번호 확인 (필수, 비밀번호와 일치해야 함)- 가입하기 버튼3. 예제 제공
섹션 제목: “3. 예제 제공”비슷한 예시가 있으면 보여주기
이런 카드 디자인 만들어줘:- 상단에 이미지- 중앙에 제목- 하단에 설명 텍스트- 그림자 효과(부트스트랩 카드 컴포넌트 같은 느낌)4. 제약사항 명시
섹션 제목: “4. 제약사항 명시”제한사항이나 선호사항 알려주기
간단한 슬라이더 만들어줘.조건:- 외부 라이브러리 사용 금지- 순수 JavaScript만 사용- 모바일에서도 작동해야 함5. 형식 지정
섹션 제목: “5. 형식 지정”원하는 파일 형식이나 코드 스타일
HTML, CSS, JavaScript를 분리된 파일로 만들어줘.또는한 파일에 모두 포함해서 만들어줘.단계별 질문 전략
섹션 제목: “단계별 질문 전략”복잡한 프로젝트는 한 번에 요청하지 말고 단계별로:
1단계: 기본 구조
섹션 제목: “1단계: 기본 구조”블로그 글 목록 페이지의 HTML 구조만 만들어줘.제목, 작성자, 날짜, 요약이 표시되어야 해.2단계: 스타일링
섹션 제목: “2단계: 스타일링”방금 만든 블로그 목록에 CSS 추가해줘.- 카드 형태로 표시- 호버하면 그림자 효과- 반응형 디자인 (모바일에서는 한 줄에 하나씩)3단계: 기능 추가
섹션 제목: “3단계: 기능 추가”이제 검색 기능 추가해줘.검색창에 입력하면 제목에 해당하는 글만 필터링되어 보여야 해.컨텍스트 제공하기
섹션 제목: “컨텍스트 제공하기”AI에게 배경 정보를 주면 더 나은 답변을 받습니다.
프로젝트 소개
섹션 제목: “프로젝트 소개”내가 만들고 있는 것: 동네 빵집 홈페이지현재 상황: index.html에 헤더와 푸터는 완성지금 하고 싶은 것: 메뉴판 섹션 추가기술 수준 명시
섹션 제목: “기술 수준 명시”나는 HTML/CSS는 조금 알지만 JavaScript는 처음이야.간단한 이미지 갤러리 만들고 싶은데,코드에 주석도 자세히 달아서 설명해줘.오류 해결 질문법
섹션 제목: “오류 해결 질문법”에러 메시지 포함
섹션 제목: “에러 메시지 포함”이 코드 실행하면 에러가 나:
[코드 붙여넣기]
에러 메시지:Uncaught TypeError: Cannot read property 'addEventListener' of null
왜 이런 에러가 나는지와 해결 방법 알려줘.예상과 실제 결과
섹션 제목: “예상과 실제 결과”이 코드가:[코드 붙여넣기]
내가 원한 것: 버튼 클릭 시 배경색이 빨간색으로 변경실제로 일어나는 것: 아무 일도 안 일어남
뭐가 문제인지 찾아줘.피드백으로 개선하기
섹션 제목: “피드백으로 개선하기”첫 답변이 만족스럽지 않으면 추가 요청:
수정 요청
섹션 제목: “수정 요청”좋아, 근데 폰트 크기를 더 크게 해줘.기능 추가
섹션 제목: “기능 추가”잘 됐어! 이제 여기에 삭제 버튼도 추가해줘.간소화
섹션 제목: “간소화”코드가 너무 복잡해. 더 간단하게 만들어줘.설명 요청
섹션 제목: “설명 요청”이 코드가 어떻게 동작하는지 초보자도 이해할 수 있게 설명해줘.효율적인 질문 패턴
섹션 제목: “효율적인 질문 패턴”패턴 1: 비교 요청
섹션 제목: “패턴 1: 비교 요청”A 방법과 B 방법 중 어느 게 더 나아?[A 코드][B 코드]패턴 2: 최적화 요청
섹션 제목: “패턴 2: 최적화 요청”이 코드를 더 효율적으로 만들어줘.[코드 붙여넣기]패턴 3: 변환 요청
섹션 제목: “패턴 3: 변환 요청”이 jQuery 코드를 순수 JavaScript로 바꿔줘.[코드 붙여넣기]패턴 4: 확장 요청
섹션 제목: “패턴 4: 확장 요청”이 코드에 [기능] 추가해줘.[기존 코드]주의할 점
섹션 제목: “주의할 점”1. 너무 모호하지 않게
섹션 제목: “1. 너무 모호하지 않게”❌ “멋진 웹사이트” ✅ “깔끔하고 미니멀한 디자인의 포트폴리오 사이트”
2. 한 번에 너무 많이 요청하지 않기
섹션 제목: “2. 한 번에 너무 많이 요청하지 않기”한 질문에 한 가지 주제만
3. 문맥 제공
섹션 제목: “3. 문맥 제공”단편적인 질문보다 상황 설명
4. 예의 바르게
섹션 제목: “4. 예의 바르게”AI에게도 정중하게 (선택사항이지만 습관화하면 좋아요)
실전 연습
섹션 제목: “실전 연습”다음 상황에서 어떻게 질문할지 생각해보세요:
상황 1
섹션 제목: “상황 1”맑은소프트 회사 소개 페이지를 만들고 싶습니다.
좋은 질문 예시:
맑은소프트 회사 소개 페이지 만들어줘.
포함할 내용:- 회사 로고와 이름- "혁신적인 솔루션을 제공하는 소프트웨어 회사" 슬로건- 회사 소개 (3-4줄)- 주요 서비스 3가지 (카드 형태로)- 연락처 (이메일, 전화번호)
디자인:- 깔끔하고 전문적인 느낌- 파란색 계열 색상- 반응형 (모바일 대응)상황 2
섹션 제목: “상황 2”사진 갤러리를 만들고 싶은데 사진을 클릭하면 크게 보이게 하고 싶습니다.
좋은 질문 예시:
이미지 갤러리 만들어줘.
기능:- 이미지 4개를 2x2 그리드로 배치- 이미지 클릭 시 전체 화면 크기로 확대- 확대된 이미지 배경은 반투명 검정색- X 버튼이나 배경 클릭으로 닫기- 좌우 화살표로 다음/이전 이미지 탐색
조건:- 순수 HTML, CSS, JavaScript만 사용- 외부 라이브러리 불필요좋은 질문을 하는 습관을 들이면 AI와의 작업이 훨씬 효율적이 됩니다!