ChatGPT로 비전공자가 코딩 독학하는 방법, 계산기와 명언 생성기 가위바위보 게임 만들기 실습

핵심 메시지

• 별도 개발 환경을 설치하지 않고 브라우저에서 열리는 온라인 코드 편집기만으로 웹 프로그래밍을 시작할 수 있다.
• 편집기는 구조를 담당하는 HTML, 꾸미기를 담당하는 CSS, 동작을 담당하는 자바스크립트 세 영역으로 나뉘고, AI도 같은 세 덩어리로 코드를 준다.
• 계산기, 랜덤 명언 생성기, 가위바위보 게임까지 모두 코드를 복사해 해당 칸에 붙여넣는 것만으로 완성됐다.
• 결과가 영어로 나오면 "한국어 버전으로 바꿔 줘"라고 말하는 것만으로 수정된다.
• 코드가 다 출력되기 전에 복사하면 동작하지 않는데, 이때는 다시 전체를 복사해 붙여넣으면 해결된다.

쉽게 이해하기

이 영상은 코딩을 전혀 모른다고 가정하고 대화형 AI로 웹 프로그래밍을 시작하는 과정을 처음부터 보여 준다. 무엇을 만들지부터 AI에게 물어 계산기, 퀴즈 게임, 날씨 앱 같은 후보를 추천받고 그중 하나를 골라 진행한다. 개발 도구를 따로 설치하지 않고 인터넷에서 바로 열리는 온라인 편집기를 쓰는 것이 출발점이다.

편집기 화면에는 코드를 쓸 수 있는 칸이 세 개 있다. 왼쪽이 HTML, 가운데가 CSS, 오른쪽이 자바스크립트다. AI에게 "웹 프로그래밍으로 할 거야"라는 정도만 알려 주고 계산기 코드를 요청하면, 답변 역시 HTML·CSS·자바스크립트 세 덩어리로 나뉘어 나온다. 각각을 대응하는 칸에 붙여넣고 실행하면 화면에 계산기가 나타나고 실제로 덧셈이 작동한다.

같은 방식으로 랜덤 명언 생성기와 가위바위보 게임도 만든다. 두 번째부터는 기존 코드를 전체 선택한 뒤 덮어쓰는 것이 편하다고 설명한다. 명언이 영어로 나오자 "한국어 버전으로 바꿔 줘"라고만 말해도 수정된 코드가 다시 세 덩어리로 나온다. 중간에 게임이 동작하지 않는 문제가 생기는데, 원인은 자바스크립트 코드가 다 출력되기 전에 복사해 붙여넣었기 때문이었고 전체를 다시 복사하니 정상 작동했다.

진행자는 이 과정을 통해 코딩이 기술의 영역에서 아이디어의 영역으로 어느 정도 옮겨 왔다고 말한다. 예전에는 계산기나 간단한 게임 하나를 만들려 해도 최소한 책 한 권은 읽어야 했지만, 지금은 대화형 AI 하나와 브라우저만으로 무언가를 만들어 볼 수 있다는 것이다.

주요 인사이트

• 입문 단계에서 가장 큰 장벽이던 개발 환경 설치를 브라우저 편집기로 건너뛸 수 있다.
• AI가 코드를 HTML·CSS·자바스크립트로 나눠 주는 이유를 알면, 어느 칸에 무엇을 넣어야 하는지 스스로 판단할 수 있다.
• 수정 요청을 자연어로 하면 되기 때문에, 문법을 배우기 전에 결과물을 먼저 손에 쥐는 학습 순서가 가능해진다.
• 동작하지 않을 때 원인이 코드 자체가 아니라 복사 시점 같은 사소한 실수인 경우가 많다.

자주 묻는 질문

관련 AI 소식