챗GPT 사용법 : 로또번호 생성기 만드는 프롬프트

지난 글에서 로또번호 생성기에 대한 간단한 예시를 보여드렸습니다. 아직 글을 안 읽으셨다면 돈버는 챗GPT 사용법 : 원페이지 웹사이트 서비스 만들기 를 먼저 읽어보세요.

기능 추가를 위해 더 질문하기

챗GPT에 로또번호 생성기를 만들어 달라고 요청하면 단순한 로또번호 생성기 코드를 만들어줍니다. 지난 글에서 보여드린 예시에서처럼 버튼을 누르면 6개의 번호를 보여주는 수준이죠. 여기에 좀 더 기능을 추가하는 것은 본인 마음대로 입니다.

다만, 기능을 추가로 넣을 수록 코드가 길어지고 오류가 발생할 가능성이 높아집니다. 발생한 오류를 질문을 통해서 고칠 수 있지만 직접 고쳐야하는 경우도 있어 어려운 부분인데요. 그래도 로또번호 생성기를 사용할 사람들이 방문하고 싶어할 만한 기능을 추가해야 방문자가 늘어나겠죠.

로또번호 생성기에 추가한 기능

제가 만든 로또번호 생성기 페이지에 추가한 기능을 말씀드리겠습니다. 여러분만의 원페이지를 만들 때 참고하세요.

로또번호를 자동으로 만들때 전부 랜덤으로 하시는 분들이 있는 반면, 일부 번호만 지정하고 나머지 번호를 랜덤으로 하시고 싶은경우가 있을 겁니다. 그 부분을 구현 하는 게 제 목표였습니다.

또 사용자가 숫자를 잘못 입력하면 경고 메시지를 띄워주도록 했습니다. 번호가 중복 해서 나오면 안되고, 1~45 범위를 벗어나서도 안됩니다.

챗GPT 에게 프로그래밍을 시킬 때에는 이런 부분들을 구체적으로 말해주고, 나오는 결과를 테스트 해가면서 코드를 수정해야 합니다.

올바른 챗지피티 사용법 : 잘 질문하는 것

최종 결과물은 머리속에 있지만 그 결과물을 프로그래밍 하도록 챗지피티에게 지시하는 것은 쉽지 않습니다. 번호 고정 후 로또번호를 생성하도록 지시하려고 이리저리 머리를 굴려서 처음 질문한 내용은 다음과 같았습니다. 중복 번호를 넣으면 경고창을 띄워달라는 지시도 함께 했습니다.

사용자로부터 6개의 번호를 입력받은 후 버튼을 누르면 로또번호를 생성하는 코드로 변경해줘. 사용자가 입력한 번호는 6개의 결과값에 반드시 포함되어야 해. 사용자가 같은 번호를 넣으면 버튼을 눌렀을 때 경고창을 보여줘.
챗지피티에 지시한 내용

결과로 나온 코드로 html 파일을 만들고 웹브라우저에서 실행시켜보면 아래 캡쳐처럼 나옵니다. 6개의 번호를 입력받는 입력란이 추가되었는데요. 제 경우엔 번호 생성을 누르면 번호가 번호가 생성되지 않고, 중복 번호에 대한 경고 창이 떴습니다. 코드에 오류가 있는 것이죠.

이렇게 오류가 발생하면 왜 발생하는지 생각을 해서 다시 코드를 수정하도록 지시를 해야합니다. 아마 중복 검사를 할 때, 비어있는 칸에 같은 값이 들어있는 것으로 판단하는 것 같네요.

추가적으로 지시해야 할 사항이 떠오릅니다. 아무것도 입력하지 않았을 때에는 6개의 번호를 모두 랜덤하게 생성해야 하고 사용자가 번호를 1개에서 5개를 넣게 되면 그 번호는 고정하고 나머지 번호만 랜덤하게 생성해야 합니다. 6개를 모두 입력하면 사용자가 입력한 번호들로만 결과를 보여줘야겠죠.

중복된 숫자가 나오지 않도록 사용자가 입력한 숫자를 제외한 숫자 중에서 랜덤하게 로또번호를 만들어야 합니다. 또 사용자가 1부터 45까지의 숫자만 입력하도록 하고 다른 숫자를 넣지 못하도록 하는 부분도 필요하겠죠.

이런 요구사항을 챗지피티가 정확하게 알아듣고 코드로 작성할 수 있도록 질문을 목록화해서 입력해야 하면 좋습니다.

챗지피티에게 입력한 질문 목록 11개

다음 11개의 질문 목록은 여러 번의 코드 오류를 수정해가면서 정리한 목록입니다. 제 기준에서 완성된 코드가 나오는 질문 리스트입니다. 이것은 제가 챗지피티를 사용했을 경우이므로 여러분이 챗지피티에 입력했을 때 같은 결과가 나올 것이라는 보장은 하지 못합니다.

챗지피티는 질문답변을 하는 과정에서 이전에 햇던 질문들을 계속 반영한다고 하니까요. 하지만 한번에 원하는 결과물을 얻을 수 있는 질문 목록에 근접해 있다고 볼 수는 있을 겁니다.

버튼을 누르면 1부터 45까지의 번호 중 중복되지 않는 6개의 무작위 숫자로 로또번호를 만들어주는 웹페이지 코드를 작성한다.
복사 붙여넣기로 사용할 수 있도록 작성한다.
사용자에게 1개에서 최대 6개의 번호를 입력 받는다.
사용자가 입력하는 번호는 1부터 45까지의 번호여야만 한다.
사용자가 1부터 45 까지의 범위를 벗어난 숫자를 입력하면 경고창을 띄운다.
사용자가 중복된 번호를 입력칸에 입력하면 경고창을 띄운다.
로또번호 6개 중 사용자가 입력한 번호는 반드시 포함되어야 한다.
1부터 45까지의 번호 중 사용자가 입력한 번호를 제외하고 남은 숫자로 무작위 로또번호를 생성한다.
로또번호 결과는 6개의 숫자이다.
사용자가 번호를 입력하지 않은 채로 로또번호 생성 버튼을 누르면 무작위로 6개의 로또번호를 생성한다.
사용자가 6개의 숫자를 입력하면 사용자가 입력한 숫자로 결과를 보여준다.

최종 로또번호 생성기

중복 값을 넣거나 숫자가 범위를 넘어서면 경고 창이 뜨고, 사용자가 입력한 번호를 포함한 랜덤 번호를 생성합니다.

참고용 코드

<!DOCTYPE html>
<html>
<head>
  <title>로또번호 생성기</title>
  <style>
    body {
      text-align: center;
      padding-top: 100px;
    }
    
    h1 {
      font-family: Arial, sans-serif;
    }
    
    button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
    
    input {
      margin: 10px;
      padding: 5px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>로또번호 생성기</h1>
  <input type="number" id="number1" min="1" max="45">
  <input type="number" id="number2" min="1" max="45">
  <input type="number" id="number3" min="1" max="45">
  <input type="number" id="number4" min="1" max="45">
  <input type="number" id="number5" min="1" max="45">
  <input type="number" id="number6" min="1" max="45">
  <br>
  <button onclick="generateLottoNumbers()">로또번호 생성</button>
  <h2 id="lottoNumbers"></h2>
  
  <script>
    function generateLottoNumbers() {
      var userNumbers = [];
      for (var i = 1; i <= 6; i++) {
        var inputNumber = document.getElementById("number" + i).value;
        if (inputNumber !== "" && !isNaN(inputNumber) && parseInt(inputNumber) >= 1 && parseInt(inputNumber) <= 45) {
          userNumbers.push(parseInt(inputNumber));
        } else if (inputNumber !== "") {
          alert("1부터 45까지의 범위 내에서 숫자를 입력해주세요.");
          return;
        }
      }
      
      if (hasDuplicates(userNumbers)) {
        alert("중복된 번호를 입력하셨습니다. 다시 입력해주세요.");
        return;
      }
      
      var numbers = [];
      while (numbers.length < 6) {
        var randomNumber = Math.floor(Math.random() * 45) + 1;
        if (!numbers.includes(randomNumber) && !userNumbers.includes(randomNumber)) {
          numbers.push(randomNumber);
        }
      }
      
      var finalNumbers = numbers.slice(0, 6 - userNumbers.length).concat(userNumbers);
      document.getElementById("lottoNumbers").innerText = finalNumbers.join(", ");
    }
    
    function hasDuplicates(array) {
      return (new Set(array)).size !== array.length;
    }
  </script>
</body>
</html>

기획한 기능이 잘 구현되었네요. 여러분도 앞에서 알려드린 목록을 참고해서 여러분만의 코드를 한번 만들어보시고 개선할 부분도 생각해 보시기 바랍니다.