챗GPT 코딩 활용법｜HTML·PHP 오류 찾고 초보자가 코드 만드는 방법
코딩을 처음 시작하면 작은 오류 하나 때문에 몇 시간씩 막히는 경우가 있습니다. 에러 메시지를 봐도 무슨 뜻인지 모르겠고, 인터넷에서 찾은 코드가 내 환경에서는 작동하지 않는 경우도 많습니다.이럴 때 ChatGPT에 현재 코드와 오류 화면, 내가 만들고 싶은 기능을 함...
AI 도구를 실제 업무와 일상에서 더 쉽게 활용할 수 있도록 핵심 방법과 예시를 중심으로 정리했습니다.
본문
이럴 때 ChatGPT에 현재 코드와 오류 화면, 내가 만들고 싶은 기능을 함께 알려주면 문제 원인을 찾거나 수정할 코드를 만드는 데 도움을 받을 수 있습니다. 이번 글에서는 HTML·CSS·PHP 같은 웹 개발을 처음 배우는 사람도 바로 사용할 수 있는 AI 코딩 활용법을 알아보겠습니다.
1. 코딩을 몰라도 원하는 화면부터 설명하기
처음부터 HTML 태그나 CSS 속성을 외울 필요는 없습니다. 먼저 어떤 화면을 만들고 싶은지 평소 말하듯 설명해보세요.
HTML과 CSS로 간단한 웹페이지를 만들어줘.
상단에는 사이트 이름과 메뉴가 있고
그 아래에는 카드형 게시물 목록이 나오게 해줘.
PC에서는 한 줄에 4개
모바일에서는 한 줄에 2개가 나오게 해줘.
나는 코딩 초보자니까
어디를 수정해야 하는지도 주석으로 알려줘.
이처럼 화면 구성 + PC·모바일 형태 + 수정하기 쉽게 설명을 함께 요청하면 초보자가 사용하기 좋은 코드가 나올 가능성이 높아집니다.
2. 오류 메시지를 그대로 보여주기
프로그램에서 에러가 발생했다면 “코드가 안 돼”라고만 말하지 말고 화면에 나온 오류 메시지를 함께 보여주는 것이 좋습니다.
아래 오류가 발생했어.
[오류 메시지 붙여넣기]
그리고 사용 중인 코드는 아래야.
[코드 붙여넣기]
나는 초보자니까
1. 오류가 발생한 이유
2. 수정해야 하는 위치
3. 수정된 코드
4. 같은 오류가 다시 발생하지 않게 확인할 부분
순서로 설명해줘.
3. 오류 화면을 캡처해서 물어볼 수도 있다
에러 문구를 복사하기 어렵다면 화면을 캡처해서 보여주고 어떤 문제인지 설명해달라고 요청할 수도 있습니다.
이 오류 화면을 보고 어떤 문제가 발생한 건지 알려줘.
컴퓨터와 코딩을 잘 모르는 사람도 따라 할 수 있도록
어디를 확인해야 하는지 순서대로 설명해줘.
확실하지 않은 부분은 추측하지 말고
추가로 필요한 화면이나 코드가 있으면 알려줘.
4. 전체 코드를 다시 만들기 전에 문제 부분만 찾기
오류가 하나 발생했다고 전체 코드를 새로 작성하면 기존에 잘 작동하던 기능까지 달라질 수 있습니다. 먼저 문제가 있는 부분만 찾아달라고 하는 편이 좋습니다.
이 코드에서 오류가 발생하는 부분만 찾아줘.
전체 구조는 바꾸지 말고
문제가 있는 코드만 최소한으로 수정해줘.
수정 전 코드와 수정 후 코드를 비교해서 보여줘.
특히 이미 운영 중인 홈페이지라면 전체 코드를 한꺼번에 교체하기보다 작은 부분씩 수정하는 것이 안전합니다.
5. HTML 페이지 만들기
HTML은 웹페이지의 기본 구조를 만드는 언어입니다. 메뉴, 제목, 이미지, 글 목록 등 화면에 필요한 요소를 만들 때 사용할 수 있습니다.
초보자가 수정하기 쉬운 HTML 페이지를 만들어줘.
구성
- 상단 사이트 로고
- 카테고리 메뉴
- 검색창
- 게시물 카드 8개
- 하단 안내 영역
각 부분에 주석을 넣어서
제목이나 링크를 어디에서 바꾸는지 알려줘.
6. CSS로 디자인 수정하기
기능은 작동하지만 화면이 마음에 들지 않는다면 CSS 부분만 수정하도록 요청할 수 있습니다.
현재 HTML 구조는 바꾸지 말고 CSS만 수정해줘.
원하는 디자인
- 어두운 배경
- 카드 모서리는 조금 둥글게
- 제목은 흰색
- 설명은 회색
- 카드 사이 여백은 너무 넓지 않게
- 모바일에서도 글자가 잘리지 않게
변경해야 하는 CSS 전체를 만들어줘.
7. 모바일 반응형으로 바꾸기
PC에서 예쁘게 보여도 스마트폰에서 글자나 카드가 화면 밖으로 튀어나오는 경우가 있습니다. 이럴 때 반응형 디자인을 요청할 수 있습니다.
이 페이지를 모바일 반응형으로 수정해줘.
PC 화면 디자인은 최대한 유지하고
화면 폭이 768px 이하일 때
메뉴와 카드 크기가 자연스럽게 줄어들게 해줘.
가로 스크롤이 생기지 않도록 하고
모바일에서 버튼이 너무 작지 않게 해줘.
8. PHP 코드도 설명받을 수 있다
PHP 파일을 수정해야 하는데 코드가 무엇을 하는지 모르겠다면 한 줄씩 설명하도록 요청할 수 있습니다.
나는 PHP 초보자야.
아래 코드가 무슨 일을 하는지 설명해줘.
[PHP 코드]
코드를 위에서부터 순서대로 설명하고
초보자가 꼭 알아야 할 부분만 쉽게 알려줘.
아직 코드는 수정하지 마.
먼저 기존 코드의 역할을 이해한 뒤 수정하도록 요청하면 엉뚱한 기능이 바뀌는 것을 줄일 수 있습니다.
9. PHP 오류 메시지 해결하기
PHP에서는 파일 경로, 변수, 데이터베이스 연결, 괄호나 세미콜론 같은 작은 문제 때문에 오류가 발생할 수 있습니다.
PHP에서 아래 오류가 발생했어.
[오류 메시지]
관련 코드는 아래야.
[코드]
어떤 줄에서 문제가 발생했는지 찾아주고
초보자도 이해할 수 있게 오류 원인을 설명해줘.
다른 기능은 건드리지 말고
오류를 해결하는 최소 수정 코드만 보여줘.
10. 내가 원하는 기능을 단계별로 만들어달라고 하기
회원가입, 검색, 게시판 같은 기능을 처음부터 한꺼번에 만들어달라고 하면 코드가 너무 복잡해질 수 있습니다. 큰 기능은 여러 단계로 나누는 편이 좋습니다.
PHP와 MySQL로 간단한 게시판을 만들고 싶어.
나는 초보자야.
한 번에 전체 코드를 주지 말고
다음 순서대로 하나씩 알려줘.
1. 데이터베이스 만들기
2. 게시글 목록
3. 글쓰기
4. 글 상세보기
5. 수정
6. 삭제
내가 한 단계를 완료하면 다음 단계로 넘어가줘.
초보자에게는 이런 방식이 훨씬 좋습니다. 오류가 발생했을 때 어느 단계에서 문제가 생겼는지 찾기도 쉽습니다.
11. 데이터베이스 SQL도 만들어달라고 할 수 있다
MySQL에서 게시판용 테이블을 만들고 싶어.
필요한 항목은
게시물 번호
제목
내용
작성자
조회수
작성일
수정일
이야.
CREATE TABLE 코드를 만들어주고
각 열이 어떤 역할인지 초보자 기준으로 설명해줘.
12. SQL 오류도 쿼리와 함께 보여주기
데이터베이스 오류 역시 오류 문구와 실행한 SQL을 같이 보여주는 것이 좋습니다.
아래 SQL을 실행했는데 오류가 발생했어.
[SQL 코드]
오류 메시지
[오류 내용]
문제가 되는 부분을 찾아서
수정된 SQL과 왜 수정해야 하는지 설명해줘.
13. 기존 코드를 더 쉽게 정리하기
오래된 코드나 여러 번 수정한 파일은 같은 코드가 반복되고 구조가 복잡해질 수 있습니다.
이 코드의 기능은 그대로 유지하면서 정리해줘.
중복된 코드가 있는지 찾고
변수 이름이 너무 알아보기 어렵다면 수정안을 제안해줘.
하지만 기능이나 결과가 달라질 수 있는 부분은 임의로 변경하지 마.
먼저 개선할 부분만 설명하고
내가 요청하면 수정된 전체 코드를 보여줘.
14. 코드를 받았으면 어디에 넣을지도 물어보기
초보자에게 가장 어려운 것은 코드 자체보다 이 코드를 어느 파일의 어느 위치에 넣어야 하는지인 경우가 많습니다.
방금 만든 코드를 정확히 어디에 넣어야 하는지 알려줘.
파일 이름
찾아야 할 기존 코드
그 코드 위에 넣는지 아래에 넣는지
수정 후 확인할 방법
순서대로 초보자에게 설명해줘.
15. 수정하기 전에 백업 방법부터 물어보기
운영 중인 사이트의 코드를 수정할 때는 문제가 생겼을 경우 원래 상태로 되돌릴 수 있어야 합니다.
이 파일을 수정하기 전에
초보자가 할 수 있는 가장 간단한 백업 방법을 먼저 알려줘.
수정 후 문제가 생겼을 때 원래 상태로 되돌리는 방법까지 알려준 뒤
코드 수정 방법을 설명해줘.
16. 보안 관련 코드는 더 조심하기
로그인, 회원가입, 파일 업로드, 데이터베이스 같은 기능에는 보안 문제가 생길 수 있습니다. 단순히 화면이 작동하는지만 확인해서는 안 됩니다.
이 PHP 코드가 기능적으로만 작동하는지 보지 말고
기본적인 보안 문제가 있는지도 확인해줘.
SQL Injection
XSS
파일 업로드
입력값 검증
비밀번호 저장 방식
세션 처리
부분을 확인해줘.
문제가 있다면 초보자가 이해할 수 있게 설명해줘.
17. 비밀번호나 API 키는 그대로 붙여넣지 않기
코드를 AI에 보여줄 때는 중요한 인증정보가 포함되어 있지 않은지 확인하세요.
✓ 데이터베이스 비밀번호
✓ API Key
✓ 로그인 비밀번호
✓ 서버 접속 정보
✓ 관리자 계정 정보
✓ 인증 토큰
실제 비밀번호가 mySecret123이라면 코드를 보여주기 전에 YOUR_PASSWORD 같은 가짜 값으로 바꿔서 질문하는 것이 좋습니다.
18. AI가 만든 코드를 바로 운영 사이트에 넣지 않기
ChatGPT가 만들어준 코드가 문법적으로 그럴듯해 보여도 현재 서버 환경이나 기존 코드와 충돌할 수 있습니다.
✓ PHP 버전이 맞는지
✓ 사용 중인 데이터베이스 구조와 맞는지
✓ 기존 CSS와 충돌하지 않는지
✓ 모바일에서 깨지지 않는지
✓ 다른 기능이 작동하지 않게 되지는 않는지
✓ 보안 문제가 없는지
가능하면 테스트 환경에서 먼저 확인한 뒤 실제 사이트에 적용하는 것이 좋습니다.
19. 코드가 작동하면 왜 작동하는지도 물어보기
AI가 만든 코드를 그대로 복사하는 것만 반복하면 비슷한 문제가 다시 생겼을 때 해결하기 어렵습니다.
방금 수정한 코드는 정상적으로 작동해.
이제 내가 이해할 수 있도록
왜 이전 코드는 오류가 났고
수정한 코드는 왜 작동하는지 설명해줘.
비슷한 문제가 다시 생기면 내가 무엇을 먼저 확인해야 하는지도 알려줘.
바로 복사해서 쓰는 코딩 오류 해결 프롬프트
나는 코딩 초보자야.
아래 코드에서 오류가 발생하고 있어.
사용 환경 : [Windows / PHP 버전 / 웹서버 등]
하려는 작업 : [원하는 기능]
현재 문제 : [증상]
오류 메시지 : [오류]
코드
[코드 붙여넣기]
다음 순서로 알려줘.
1. 가장 가능성이 높은 원인
2. 문제가 있는 코드 위치
3. 수정해야 할 코드
4. 정확히 어디에 넣어야 하는지
5. 수정 후 확인하는 방법
기존에 잘 작동하는 다른 기능은 변경하지 말고
필요한 부분만 최소한으로 수정해줘.
웹페이지 제작 만능 프롬프트
HTML, CSS, JavaScript를 이용해 아래 기능의 웹페이지를 만들어줘.
[원하는 페이지 설명]
조건
- PC와 모바일 반응형
- 외부 라이브러리는 가능하면 사용하지 않기
- 초보자가 수정하기 쉬운 구조
- 중요한 코드에는 한국어 주석 추가
- 전체 코드 한 번에 제공
코드 아래에는
어떤 파일 이름으로 저장해야 하는지
어떻게 실행하는지
어디를 수정하면 제목과 내용을 바꿀 수 있는지도 설명해줘.
AI 코딩에서 자주 하는 실수
✓ “안 돼”라고만 하고 오류 메시지를 보여주지 않기
✓ 사용하는 PHP·프로그램 버전을 알려주지 않기
✓ 기존 코드 없이 수정 코드만 요청하기
✓ 한 번에 너무 많은 기능을 만들려고 하기
✓ 코드가 어디에 들어가는지 확인하지 않기
✓ 백업 없이 운영 사이트 코드 수정하기
✓ 비밀번호와 API 키를 그대로 붙여넣기
✓ AI가 만든 코드를 테스트하지 않고 바로 사용하기
✓ 작동하는 코드의 원리를 전혀 확인하지 않기
초보자는 이 순서대로 사용해보세요
자주 묻는 질문
가능합니다. 만들고 싶은 화면이나 기능을 자연어로 설명하고 초보자에게 설명하듯 단계별로 알려달라고 요청하면 됩니다.
가능합니다. 페이지 구조, 디자인, PC·모바일 화면 조건 등을 설명하면 HTML과 CSS 초안을 만드는 데 활용할 수 있습니다.
오류 메시지와 관련 코드를 함께 제공하면 문제 원인을 분석하고 수정 방법을 찾는 데 도움을 받을 수 있습니다.
오류 화면이나 현재 페이지의 문제를 이미지로 보여주고 설명을 요청할 수 있습니다. 다만 실제 코드 문제가 있다면 관련 소스도 함께 제공하는 편이 정확합니다.
바로 운영 사이트에 적용하기보다 백업을 하고 테스트 환경에서 먼저 확인하는 것이 좋습니다. 특히 로그인, 결제, 개인정보, 파일 업로드 기능은 보안 검토가 중요합니다.
사용 환경, 원래 하려던 작업, 현재 증상, 오류 메시지, 관련 코드를 함께 제공하면 원인을 찾기 쉽습니다.
정리
ChatGPT를 코딩에 활용할 때 가장 중요한 것은 완성된 코드를 무조건 복사하는 것이 아니라 문제를 작은 단계로 나눠 해결하는 것입니다. 무엇을 만들고 싶은지 설명하고, 오류가 발생하면 에러 메시지와 관련 코드를 함께 보여주세요.
특히 초보자는 수정 전 파일을 백업하고, 한 번에 하나의 기능만 변경한 뒤 정상 작동하는지 확인하는 습관을 들이는 것이 좋습니다. AI가 만들어준 코드가 작동했다면 왜 문제가 해결됐는지도 다시 물어보세요. 이런 과정을 반복하면 단순히 코드를 복사하는 것보다 훨씬 빠르게 웹 개발 구조를 이해할 수 있습니다.
댓글목록
등록된 댓글이 없습니다.
