Chat GPT로 만든 HTML 계산기 / 프로그래머 안심해요

Chat GPT 해보셨나요? Openai에서 만든 챗봇인데요. GPT-3의 3.5 버전 업데이트를 내놓자 순식간에 100만 명의 사용자가 가입했다고 하고 심지어 구글의 시대가 끝났다는 말까지 나오고 있습니다. 그동안 자연어 검색이 없던 것은 아니지만 획기적인 성능으로 업그레이드되면서 이제 웬만한 대화까지 가능해졌다고 하는데요. 잠깐 사용해본 바로는 정말 검색 패러다임이 바뀔 수는 있겠다는 생각이 들었습니다. 코딩까지 해준다고 해서 HTML 계산기도 만들어봤는데요. 결과를 공유합니다.

Chat GPT

이미 많이 알려져 있는 Chat GPT는 Open Ai에서 만든 인공지능 챗봇입니다. 현재 3.5버전의 GPT-3을 사용했다고 합니다.
가입은 https://chat.openai.com/ 에서 하면 됩니다. 계정이 없으면 새로 하면 되고 구글 계정이 있으시면 구글계정으로 간단히 가입할 수 있습니다. 간단한 가입절차가 끝나면 아래와 같은 화면이 나옵니다. 지금은 무료이고 향후 과금정책이 정해질 거 같습니다.

오픈 AI에서는 GPT 3로 할 수 있는 여러 가지 일들을 예를 들어 설명하고 있으니 살펴보시면 좋을 것 같습니다.
GPT라는 이름만으로는 대체 이게 뭘 할 수 있는지 모르겠지만 사람이 하는 말을 이제는 훨씬 더 잘 이해하고 대화가 가능하고 코딩도 하고 잘못된 코딩도 고칠 수 있고 기사도 작성할 수 있습니다. 한글도 이해합니다. 한글은 영어에 비해서 이해가 좀 떨어지고 속도가 느린 단점은 있지만 한글로 물어보면 답변을 내놓습니다.

채팅을 통해 글 작성을 요청할 수 있습니다.

위와 같이 긴글을 잘 써줍니다. 다만 좀 더 해봐야겠지만 내용이 깊이 있지는 않던데 정말 놀라운 것은 놀라울 정도로 완성도 있다는 것이죠.

해외에서는 Chat GPT를 이용해서 숙제를 하거나 과제를 하도록 시켜서 A를 받았다는 사례가 나오기도 합니다. 그렇지만 어떤 면에선 형편없기도 하고 문법체크나 오타체크도 엉성한 경우도 많았습니다.

Chat GPT에 관한 기사도 많고 많은 유튜버분들도 관련 내용을 소개하고 있으니 참고로 보시면 좋을 것 같구요. 이것저것 테스트를 해보다 코딩을 잘한다고 해서 정말 미래를 걱정할 정도인지 궁금해서 간단한 자바스크립트 계산기를 만들어달라고 주문해 봤습니다.

최종 결과물은 아래와 같습니다.

Chat GPT로 만든 웹 계산(결과물 보기 클릭)

HTML과 CSS Javascript로 계산기를 만들었는데요. 버그가 없지 않고 레이아웃을 희한하게 만들어 놨지만 꽤 잘 작동합니다.

반응형

<style>
      /* Add some style to the calculator */
      .calculator {
        width: 300px;
        margin: 0 auto;
        border: 1px solid #ccc;
        border-radius: 10px;
        padding: 20px;
        text-align: center;
      }
      .calculator input[type="text"] {
        width: 100%;
        height: 50px;
        font-size: 20px;
        border: none;
        border-bottom: 1px solid #ccc;
        background: transparent;
        text-align: right;
      }
      .calculator input[type="button"] {
        width: 25%;
        height: 50px;
        font-size: 20px;
        border: none;
        background: #ddd;
        cursor: pointer;
      }
      .calculator input[type="button"]:hover {
        background: #eee;
      }
    </style>

<div class="calculator">
      <!-- Display -->
      <input type="text" id="display" disabled>
      <!-- Numbers -->
      <div>
        <input type="button" value="7" onclick="addToDisplay(7)">
        <input type="button" value="8" onclick="addToDisplay(8)">
        <input type="button" value="9" onclick="addToDisplay(9)">
        <input type="button" value="+" onclick="addToDisplay('+')">
      </div>
      <div>
        <input type="button" value="4" onclick="addToDisplay(4)">
        <input type="button" value="5" onclick="addToDisplay(5)">
        <input type="button" value="6" onclick="addToDisplay(6)">
        <input type="button" value="-" onclick="addToDisplay('-')">
      </div>
      <div>
        <input type="button" value="1" onclick="addToDisplay(1)">
        <input type="button" value="2" onclick="addToDisplay(2)">
        <input type="button" value="3" onclick="addToDisplay(3)">
        <input type="button" value="*" onclick="addToDisplay('*')">
      </div>
      <div>
        <input type="button" value="0" onclick="addToDisplay(0)">
        <input type="button" value="." onclick="addToDisplay('.')">
        <input type="button" value="=" onclick="calculate()">
        <input type="button" value="/" onclick="addToDisplay('/')">
      </div>
      <!-- Clear button -->
      <div>
        <input type="button" value="AC" onclick="clearDisplay()">
      </div>
    </div>

<!-- Add the JavaScript functions -->
    <script>
      // Get the display element
      const display = document.getElementById('display');
      // Add a value to the display
      function addToDisplay(val) {
        display.value += val;
      }
      
      // Clear the display
      function clearDisplay() {
        display.value = '';
      }
      
      // Calculate the result of the expression on the display
      function calculate() {
        try {
          display.value = eval(display.value);
        } catch(err) {
          display.value = 'Error';
        }
      }
    </script>

하지만 이 정도 잘 작동하는 코드가 나오기 까지 여러차레 반복해서 요청을 해야 했습니다. 처음엔 AC 버튼이 없었고, 버튼이 제대로 동작하지 않았습니다. 나중에 AC버튼을 추가해달라고 했더니 계속해서 버그가 있더라구요. 레이아웃도 만들때 마다 조금씩 달라졌고 최종 결과물 보다 훨씬 나은 것도 있었지만 버그가 계속 있어서 사용할 수가 없었습니다. 그러다 현재 버전에 이르니 계산결과가 잘 나오고 전체적으로 제법 잘 작동했습니다.

작업물을 만들면서 과연 이정도 결과물을 프로그래머 분들은 얼마나 걸릴까 생각해보니 훨씬 더 나은 디자인에 훨씬 더 나은 버그 없는 결과물을 뚝딱 만들 것이라고 확신합니다. 그래서 아직은 GPT 때문에 프로그래머들이 직업을 잃는 일은 없겠구나 하는 생각을 했고요. 글쓰기도 아직은 완벽한 것은 아니라서 기획자나 글쓰기를 업으로 하는 분들이 위협받을 정도는 아니라는 생각이 들었습니다. 하지만, 분명한 것은 계속해서 업그레이드가 될 것이고 생각보다 그 속도는 더 빠를 것 같습니다.

마치며,

간단히 Chat GPT를 사용해본 결과와 소감을 전해드렸는데요. 간단한 글 - 특히 영어로는 꽤나 괜찮은 정보성 글을 작성해줄 수 있을 것 같습니다. 소설형식도 잘 만들어냅니다. 그런 의미에서는 확실히 조만간 생산성 있는 작업물을 내놓을 수 있을 것 같고 사람이 쓴 것인지 Ai가 쓴 것인지 구분이 어려울 것 같습니다. 많은 언론 기사들이 Ai로 작성되겠구나 하는 생각도 들었습니다. 누군가는 Ai로 작성된 글들로 블로그를 운영할지도 모르겠습니다. 프로그래밍은 당분간은 사람이 하는 것이 훨씬 낫겠지만 디버깅을 하던데 도움을 받을 수도 있고 기초작업은 Ai가 할 수도 있을 듯합니다. 결국 세상은 변할 텐데 사람들이 이것을 어떻게 잘 이용하게 할 것인지, 또 그로 인해 소외받는 사람들을 어떻게 사회가 끌고 갈 것인지가 중요할 것 같고 준비해야만 할 것 같습니다.

고맙습니다.