놀라움에서 두려움으로, 그리고 그 너머: Chat GPT 로 코딩 해본 경험 #2 -Chat GPT 를 이용해 개발하는 과정

이전 글에서는 놀라움에서 두려움으로, 그리고 그 너머: Chat GPT 로 코딩 해본 경험 #1에서 Chat GPT 를 개발에 사용해 본 후 전반적으로 받은 느낌을 작성했다.

이번 글은 Chat GPT 로 결과물을 만드는 과정과 그 과정에서 느낀 점들을 간단하게 공유하고자 한다.

내용이 다소 길므로 이렇게 Quote 안에 들어있는 내용만 봐도 무방할 것 같다.

1. 첫번째 질문 ⇒ 결과

가장 먼저 무엇을 질문을 해야하나… 제대로 답을 해줄 수 있을까? 어떻게 질문을 해야하지? 떨리는 순간이었다. 그래도 평소에 생각했던 내용을 순차적으로 적어가기 시작했다.

• 질문작성 시간: 3분
• 답변 시간: 10초

질문 (나)

• 생일 카드를 GIF 로 만드는 Web 어플리케이션을 만들고 싶어.
• 사용자가 생일 문구를 입력하면 텍스트가 하나씩 출력되는 애니메이션을 만들고 싶어.
• 그리고 그 결과를 GIF 로 만들수 있게 하고 싶어.
• 기술은 TypeScript 나 node 기반이면 좋겠어.

답변 (Chat GPT)

생일 카드를 GIF로 변환하는 웹 어플리케이션을 만드는 과정에 대한 개요입니다.

1. 프론트엔드 프레임워크 선택: React, Angular, Vue 등 TypeScript 기반 프레임워크에서 하나를 선택합니다.
2. 백엔드 서버 설정: Node.js를 사용하여 Express.js 또는 Koa.js와 같은 프레임워크를 사용하여 서버를 구축합니다.
3. GIF 라이브러리 통합: 이미지 또는 비디오에서 GIF를 작성할 수 있는 gifencoder, Jimp, and gifshot 같은 라이브러리를 선택하고 백엔드 서버에 통합합니다.
4. 애니메이션 구현: 한 글자씩 출력되는 애니메이션을 생성합니다. anime.js 또는 GSAP와 같은 JavaScript 라이브러리를 사용할 수 있습니다.
5. GIF 생성: 애니메이션이 완료되면 GIF 라이브러리를 사용하여 GIF를 생성합니다.
6. 사용자에게 GIF 전송: 생성된 GIF를 사용자에게 전송합니다. 파일 첨부 또는 링크를 사용하여 전송할 수 있습니다.

프론트엔드 및 백엔드 개발 기술이 필요한 이 프로젝트는 TypeScript와 Node.js를 사용하면 강력하고 확장 가능한 어플리케이션을 구축할 수 있습니다.

원하는 결과는 아니었다. 원하는 결과는 어느 정도 갖추어진 코드였다. 그렇지만 전반적으로 필요한 기술을 제시해주었다. 사실 이것도 그렇게 나쁜 결과는 아니었다. gif 까지 변환하기 위해서 필요한 라이브러리와 text animation 구현을 위해 필요한 라이브러리를 한번에 제시해 주었고 백엔드 통합이 필요한 작업이라는 것에 대한 인사이트를 한번에 주었기 때문이다. 만약 구글로 검색했다면 animation 에 필요한 기술, gif 로 만드는 기술에 대해 개별적인 검색을 했을 것이고 이후 이어지는 리서치로 많은 시간을 소요했을 것이 뻔하다.

2. 기본 질문 - 한글자씩 출력

먼저 텍스트를 애니메이션 형태로 만들고자 했다. 위에서 Chat GPT 가 안내해준 anime.js 를 이용해 애니메이션을 만들 수 있다는 것을 알았기 때문에 다음과 같이 질문을 이어갔다.

• 질문 시간: 1분
• 답변 시간: 10초
• 적용해 보는 시간: 5분

질문

anime.js 를 이용해 문자열을 입력 받아 한글자씩 출력하는 애니메이션을 만드는 코드를 작성해줘. 그리고 각 프레임을 이미지 형태로 얻을 수 있는 기능도 제공해줘

답변

진짜 코드가 나왔다! (단 거의 유사한 코드를 다음 항목에서 노출할 것이기 때문에 지면상 생략한다.)

anime.js 를 사용해 본 경험이 없었던 상황에 anime.js 를 이용해 예시 코드까지 만들어 준다는 것이 놀라웠다. 그러나 실제 코드를 돌려보니 (기대와 다르게) 한글자씩 출력되는 코드였다. “Happy Birthday!” 를 입력하면 “H”, “a”, “p”, “p”, “y”,… 이렇게 한 글자씩만 나왔다. 내가 너무 기대했나? 그러나 그렇게 이해할 수도 있겠다는 생각이 들었다. 한글자씩 출력해달라는 내 요구 사항이 잘못된 것 같았다.

3. 기본적인 기능 - 한글자씩 추가해서 출력

“한글자씩” 이라는 모호한 요구사항이 의도치 않은 결과를 파악했음을 깨닫고 좀더 구체적인 어휘로 바꾸어 요청했다.

• 질문시간: 1분
• 답변 시간: 10초
• 실행 시간: 3분

질문

위 예제에서 한글자씩만 출력하는 것이 아니라 기존에 출력했던 텍스트는 유지하고 새로운 글자를 한글자씩 추가해주는 코드로 작성해줘

답변

import * as anime from 'animejs';

// Define the string to animate
const inputString = 'Happy Birthday!';

// Get the canvas element to draw the animation on
const canvas = document.getElementById('animation-canvas') as HTMLCanvasElement;

// Set up the animation
let currentString = '';
anime({
  targets: { charIndex: 0 },
  charIndex: inputString.length,
  round: 1,
  easing: 'linear',
  duration: 1000,
  update: (anim) => {
    // Clear the canvas on each frame
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Get the next character to add to the string
    const nextCharIndex = Math.floor(anim.progress / 10);
    const nextChar = inputString.charAt(nextCharIndex);

    // Update the current string with the next character
    currentString = inputString.substr(0, nextCharIndex + 1);

    // Draw the current string
    ctx.font = '48px sans-serif';
    ctx.fillText(currentString, 50, 100);

    // Get the current frame as an image
    const imageData = canvas.toDataURL('image/png');
    // Do something with the image data (e.g. save it to a GIF)
  },
});

대박이다. 정말 잘 동작한다. 기쁨과 절망이 동시에 느껴지는 순간이다. 내가 처음에 딱 기대했던 동작이다. 이 자쉭 나보다 훨씬 빨리 잘하는데!.. 아 ㅜㅜ 심지어 GIF 로 만들기 위해 canvas 를 image 로 변환하는 코드까지 미리 제공해주는 섬세함에 깜놀했다.

실행 결과는 다음과 같다.

4. 단어마다 효과 주기 - 문법 제안 요청

이쯤 되니 욕심이 생긴다. 이쯤되면 질문만 잘하면 인공위성도 쏘겠는데?

사실 막상 Happy Birthday! 를 보니 내가 기대했던 효과는 맞지만 조금 단조로웠다. 조금더 이펙트가 있었으면 좋겠다는 생각이 들었다.

그래서 각 단어 마다 스타일이나 애니메이션을 지정할 수 있으면 좋겠다는 생각이 들었다.

• 질문 시간: 10분 - 어떤 질문을 할까 좀 고민했다.
• 답변 시간: 10초

질문

• 위에서 입력으로 전달했던 일반 문자열 대신 단어다 글자마다 다양한 효과를 지정할 수 있는 문자열 문법을 만들고 싶어. 문자열에 나오는 단어나 글자 별로 애니메이션의 속도를 지정한다던가 단어간 멈추는 시간을 지정한다던가 글자 색상, 글자 굵기, 글자 기욺임을 지정한다던가 하는 기능을 지정할 수 있는 문법을 원해. 마크다운이나 태그보다 더 단순하고 쉬운 문법이었으면 좋겠어. 개발자가 아닌 사람들도 쉽게 사용할 수 있는 문법이면 좋겠어. 이런 텍스트 하이라이팅 문법을 제안해줄 수 있겠어?

답변

This is a {s:slow}test{s}, {s:fast}testing{s} different {c:red}text{c} {t:bold}effects{t}. {sl:10}Slanted{sl} text {sl:-10}effects{sl}.

요구하신 효과에 대한 코드는 다음과 같습니다:

• {s:slow} 또는 {s:fast} - 애니메이션 속도를 지정합니다 (느리게 또는 빠르게)
• {p:pause_time} - 단어 간 일시 정지 시간을 밀리 초 단위로 지정합니다 (예 : 절반초의 일시 정지를 위해 {p:500}와 같이)
• {c:color} - 텍스트 색상을 지정합니다 (예 : 빨간색 텍스트를 위해 {c:red}와 같이)
• {t:thickness} - 텍스트 두께 또는 무게를 지정합니다 (예 : 굵은 텍스트를 위해 {t:bold}와 같이)
• {sl:slant} - 텍스트 기울기 또는 이탤릭체를 지정합니다 (예 : 10도의 기울기를 위해 {sl:10}와 같이 또는 역 슬랜트 10도의 경우 {sl:-10}와 같이)

일단 욕심이 생기니 좀더 구체적인 요구 사항이 생겼고 그래서 질문도 길어졌다. 답변도 괜찮아 보였다. s, p, c 와 같은 단축 key 와 그에 대한 value 를 지정하는 방식도 나쁘지 않았다. 그런데 {s:slow}test{s} {t:bold}effect{t} 처럼 하나의 속성만 지정할 수 있다는 한계가 다소 아쉽게 느껴졌다.

5. 단어마다 효과 주기 - 문법 개선 요청

이번에는 여러 개의 속성을 지원할 수 있기를 바라는 마음에 다음과 같은 질문을 했다. 여러 개의 속성을 지원하게 되는 경우 어떤 문법으로 제안할지 꽤 기대가 되었다. 그리고 이 시점 부터 Chat GPT 의 한계에 대해서 조금씩 느끼는 계기였다.

• 질문 시간: 5분, 10분, 15분 ….. 1시간 이상 +++
• 답변 시간: 10초, 20초, 30초 +++

5-1. 질문

• 위 문법을 TextDecoAnimationSyntax 이라 칭할 게. TextDecoAnimationSyntax 에서 하나의 단어에 동시에 여러 개의 속성을 지정하고 싶어. 색상과 속도와 기울기 굵기 등의 속성을 동시에 지정할 수 있는 문법으로 다시 만들어줘. 아주 쉬운 문법이어야 해.

5-1. 답변

• Hello[red, fast, bold], world[blue, slow, italic]

꽤 직관적으로 여겨졌지만 일반 텍스트에도 많이 사용되는 대괄호를 제안했다는 점과 단어 뒤에 있으면 뒤에 것까지 다 읽어야 효과를 줄 수 있겠다는 생각이 들어 다음과 같이 제안했다.

5-2. 질문

TextDecoAnimationSyntax 는 다음 내용을 따라 변경해주고 코드를 작성해줘.

• 효과를 지정하기 위한 문법은 대괄호 대신 중괄호를 사용한다.
• 효과를 지정하기 위한 문법은 단어 전에 빈칸 없이 지정해야 한다.
• 효과를 지정하기 위한 문법은 빈칸이 나오기 전, 즉 해당 단어까지만 적용된다.
• 효과를 지정하기 위한 문법은 결과에 출력되지 않아야 한다.

5-2. 답변

• 문법
  {property1:value1, property2:value2}word
• 예제
  {color: blue, thickness: 3px}Happy {color: red, speed: 200}Birthday!
• 코드

import anime from 'animejs';

function createAnimation(text: string) {
  const words = text.split(/\s+/);
  const timeline = anime.timeline();

  let i = 0;
  while (i < words.length) {
    let word = words[i];

    const effectRegex = /{([^{}]+)}/; // matches everything inside curly braces
    const effectMatch = word.match(effectRegex);

    let effectProperties = {};
    if (effectMatch) {
      const effectString = effectMatch[1];
      effectProperties = JSON.parse(`{${effectString}}`);

      word = word.replace(effectRegex, '');
    }

    timeline.add({
      targets: `.word-${i}`,
      ...effectProperties,
      opacity: [0, 1],
      easing: 'linear',
      duration: effectProperties.speed || 400,
    });

    i++;

    if (i < words.length) {
      timeline.add({
        targets: '.word-space',
        opacity: [0, 1],
        easing: 'linear',
        duration: 200,
      });
    }
  }

  return timeline;
}

function animateText(text: string, element: HTMLElement) {
  const words = text.split(/\s+/);

  const formattedText = words.map((word, index) => {
    return `<span class="word-${index}">${word}</span> <span class="word-space">&nbsp;</span>`;
  }).join('');

  element.innerHTML = formattedText;

  createAnimation(text).play();
}

코드는 그럴듯 해보였으나 의도대로 동작하지 않았다. 효과는 제대로 지정되지 않았고 사용자가 지정한 옵션들은 모두 출력에 노출되었다. 분명히 요구 사항에는 중괄호 옵션을 노출하지 말라고 요청했는데도 불구하고 중괄호 옵션이 노출된 것이다. 그리고 아까 gif 로 출력물을 뽑아주기 위해 canvas 형태로 만들고 이미지로 변환해주는 코드는 사라지고 HTML 기반으로 코드가 변경되었다. 이전의 컨텍스트를 잊은 듯 하다.

다만 timeline 방식으로 단어별로 나누어 처리하는 방식을 제한한 것은 마음에 들었다. 이 방식은 유지하고 싶었다.

5-3. 질문

• 다음 조건을 만족시켜 다시 작성해줘.
  • timeline 을 사용하는 방식은 유지해줘.
  • 위에서 중괄호로 감싼 문법은 화면에 노출되서는 안돼
  • 문법으로 해석된 여러 속성들(예를 들어 애니메이션 빠르기, 색상, 굵기 등)은 문법 뒤에 이어지는 텍스트에 적용되어 표현되어야 해

5-3. 결과

주요 변경 사항은 다음과 같습니다:

- TextDecoAnimationSyntax는 이제 애니메이션을 만들기 전과 후에 구문 분석되어 형식이있는 텍스트에 괄호가없는 텍스트 만 포함합니다.
- effectProperties는 이제 별도의 변수에 저장되는 대신 timeline.add () 메소드 호출에 직접 적용됩니다.

코드가 변경되었지만 기대한 효과가 나오지 않았다. 단어의 구분도 명확하게 처리 되지 않았고 중괄호가 닫히지 않아도 효과가 지정되는 파서였고 여전히 스타일링과 애니메이션을 위해 지정한 중괄호 속성도 결과에 함께 노출되었다.

5-4. 질문

다음 조건을 다시 적용해줘.

• 중괄호를 사용한 문법과 빈칸 없이 연결된 단어를 하나의 단어 묶음으로 사용한다.
• 중괄호를 사용한 문법은 닫는 중괄호가 나타날 때까지 모든 속성들을 애니메이션 속성으로 파싱하여 바로 연결된 단어에 적용한다.
• 중괄호를 사용한 문법 내의 단어들은 표기할 단어에서 제외되어야 한다.

5-4. 답변

만족스럽지 않아 생략한다.

결과는 여전히 만스럽지 않았다. 그래서 심지어 다음과 같이 세부 요구사항을 작성하는데까지 이르게 된다.

5-5. 질문

먼저 TextDecoAnimationSyntax 파서를 만들자.

• 파서는 위에서 얘기한 것처럼 중괄호로 언급한 속성들을 감싸서 지정할 수 있게 할거야
  - 크게 style 속성과 animation 속성을 갖지만, 파라미터 지정 시에는 이를 구분하지 않아. style 속성과 animation 속성은 파서의 결과를 반환할 때 style 속성은 style 속성에 포함되고 animation 속성은 animation 에 포함되
  - style 속성은 color, fontSize

• 파서가 분석할 문자열의 예시는 다음과 같아
  - {color: blue, thickness: 3px}Happy {color: red, speed: 200}Birthday!
  - 중괄호로 감싼 속성이 앞에 있고 애니메이션을 적용할 대상은 공백 없이 연속된 단어나 문자야
  - 중괄호로 감싼 속성은 없을 수 있어

• 파서의 결과는 { text: string, style: object, animation: object } 속성을 갖는 배열이야.
  - text 는 중괄호로 감싼 속성은 포함하지 않고 중괄호로 감싼 속성에 바로 이어지는 텍스트 값만 가져야 해. 위 예제에서는 Happy 나 Birthday! 가 해당해.
  - style 은 text 에 적용할 스타일 속성이야. 위 예제에서는 {color:blue, thickness: 3px} 이 그에 해당해.
  - animation 는 anime.js 에 적용할 애니메이션 속성이야.. 위 에제에서는 {speed } 가 그에 해당해.

• 분석할 문자열에서 중괄호로 감싼 속성은 없을 수 있어.
  ...

내가 뭔짓을 하나 싶었다. 멍청한 컴퓨터에게 일일히 알려주고 있는 것 같았고, 슬슬 짜증이 올라왔다. 내가 생각했던 효과는 시간이 지날 수록 얻기 어려워지는 듯 했다. 이러다가는 내가 원하는 조건을 만족하면서 다른 조건을 만족시키지 못하는 과정을 평생 반복할 거 같았다.

6. AI 활용 전략 수정

훌륭한 결과를 내어주는 Chat GPT 에 대한 높아져가는 기대감으로 내가 무리한 요구를 했음을 깨달았다. 전략을 수정하기로 했다. 틀은 내가 잡고 세부적인 요구 사항들만 요청하는 방식으로 말이다.

그래서 이 이후에는 초기에 ChatGPT 가 제시해준 timeline 예시를 기반으로 직접 코드를 재작성하기 시작했다.

• 질문 시간: 10분
• 답변 시간: 1분 이내
• 코드 작성 시간: 1시간

이 와중에 Chat GPT 에게 다음과 같은 질문을 통해 도움을 받기도 했다.

• 중괄호 내의 White Space 를 제거하는 코드를 작성해줘.
• 쉼표로 구분되고 중괄호로 묶인 속성 이름과 값 쌍의 문자열(예: {p1: v1, p2: v2, ...})을 JSON으로 변환하는 함수를 작성해줘.
• ... 등등

이렇게 현재의 결과물을 얻게 되었다.

이렇게 요구 사항이 명확하고 간단한 작업등을 1~ 10초 안에 처리해줌으로써 세세하게 잡아 먹는 시간들을 많이 감축시켜주었다.

7. UI 제안 요청

이런 저런 시행 착오 끝에 내가 기대했던 Text 효과를 얻을 수 있었다. 그러나 처음에는 웹 UI 없이 그냥 코드에다 Text 를 파라미터로 지정하여 결과를 확인했다. 나도 불편했지만 다른 사람들이 사용해보기에도 여간 불편한게 아닐 것 같아 UI 를 붙여보기로 했다.

• 질문시간: 1분
• 답변시간: 10초
• 적용 시간: 5분

질문

• React 와 TypeScript 를 이용해 반응형 UI 를 만들고 싶어. 다음과 같은 스펙을 가지는 것에 대한 개략적인 레이아웃과 기본적인 스타일을 만들어줘. 텍스트 입력창과 텍스트 입력창에 넣은 텍스트를 애니메이션으로 가공하여 보여줄 애니메이션 출력 영역이 가장 중요한 핵심 포인트가 될거야. 입력창에 텍스트를 입력하는 동시에 애니메이션 출력 영역은 실시간으로 변경사항을 반영할 거야. 애니메이션의 속도나 애니메이션 효과의 종류를 변경할 수 있는 옵션 들도 제공할 예정이고 옵션은 계속 추가될 예정이야. 모바일 디바이스에서 소프트웨어 키보드가 나오는 상황에서도 핵심 영역이 모두 잘 드러났으면 좋겠어. 그리고 이걸 mui 라이브러리를 이용해 작성해줘.

답변

import React, { useState } from "react";
import {
  TextField,
  Typography,
  Box,
  Button,
  Slider,
  MenuItem,
  FormControl,
  Select,
} from "@mui/material";
import { styled } from "@mui/material/styles";

const Container = styled(Box)(({ theme }) => ({
  display: "flex",
  flexDirection: "column",
  alignItems: "center",
  padding: theme.spacing(2),
  [theme.breakpoints.up("sm")]: {
    padding: theme.spacing(4),
  },
}));

const InputContainer = styled(Box)(({ theme }) => ({
  display: "flex",
  flexDirection: "column",
  width: "100%",
  marginBottom: theme.spacing(2),
}));

const InputLabel = styled(Typography)(({ theme }) => ({
  fontSize: "1rem",
  marginBottom: theme.spacing(1),
}));

const Input = styled(TextField)(({ theme }) => ({
  "& .MuiInputBase-root": {
    fontSize: "1.2rem",
    borderRadius: "4px",
    boxShadow: "none",
  },
  "& .MuiInputLabel-root": {
    fontSize: "1rem",
  },
}));

const OutputContainer = styled(Box)(({ theme }) => ({
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  height: 200,
  width: "100%",
  marginBottom: theme.spacing(2),
  borderRadius: "4px",
  border: "1px solid #ccc",
  boxShadow: "none",
}));

const OutputText = styled(Typography)(({ theme }) => ({
  whiteSpace: "nowrap",
  overflow: "hidden",
}));

const ControlContainer = styled(Box)(({ theme }) => ({
  display: "flex",
  justifyContent: "space-between",
  alignItems: "center",
  width: "100%",
  marginBottom: theme.spacing(2),
}));

const ControlLabel = styled(Typography)(({ theme }) => ({
  fontSize: "1rem",
}));

const SpeedSlider = styled(Slider)(({ theme }) => ({
  width: "100%",
  [theme.breakpoints.up("sm")]: {
    width: "auto",
    marginLeft: theme.spacing(2),
  },
}));

const AnimationSelect = styled(FormControl)(({ theme }) => ({
  width: "100%",
  [theme.breakpoints.up("sm")]: {
    width: "auto",
    marginLeft: theme.spacing(2),
  },
}));

const App = () => {
  const [text, setText] = useState("");
  const [animationType, setAnimationType] = useState("none");
  const [speed, setSpeed] = useState(1);

  const handleTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setText(event.target.value);
  };

  const handleAnimationChange = (
    event: React.ChangeEvent<{ value: unknown }>
  ) => {
    setAnimationType(event.target.value as string);
  };

  const handleSpeedChange = (event: Event, value: number | number[]) => {
    setSpeed(value as number);
  };

  return (
    <Container>
      <InputContainer>
        <InputLabel variant="subtitle1">Enter text:</InputLabel>
        <Input
          label="Type here"
          value={text}
          onChange={handleTextChange}
          fullWidth
        />
      </InputContainer>
      <OutputContainer>
        <OutputText variant="h4" component="span" align="center">
          {text}
        </OutputText>
      </OutputContainer>
      <ControlContainer>
				<ControlLabel variant="subtitle1">Animation speed:</ControlLabel>
		    <SpeedSlider
		      min={1}
		      max={10}
		      value={speed}
		      onChange={handleSpeedChange}
		    />
		    <AnimationSelect>
		      <Select
		        value={animationType}
		        onChange={handleAnimationChange}
		        displayEmpty
		      >
		        <MenuItem value="none">None</MenuItem>
		        <MenuItem value="bounce">Bounce</MenuItem>
		        <MenuItem value="flash">Flash</MenuItem>
		        <MenuItem value="pulse">Pulse</MenuItem>
		        <MenuItem value="shake">Shake</MenuItem>
		        <MenuItem value="swing">Swing</MenuItem>
		        <MenuItem value="tada">Tada</MenuItem>
		        <MenuItem value="wobble">Wobble</MenuItem>
		      </Select>
		    </AnimationSelect>
		  </ControlContainer>
	  <Button variant="contained" color="primary" disableElevation>
	    Start
	  </Button>
	</Container>
	);
};

mui 를 이용한 react component 가 나왔다.
현재 UI 와 상당히 유사하다. 여기서 배경 이미지와 폰트 크기 정도만 바꾸어 현재 UI 를 구성했다.

기본적인 UI 틀을 제공해주었고 기존에 만들어 놓은 위의 6단계까지 만들었던 Animator 코드가 있었기 때문에 매우 쉽게 적용할 수 있었다. 그런데 UI 를 개선하고 싶은데 어떻게 고쳐야 할지 도저히 잘 몰라 이후에도 몇 차례 질문을 이어갔지만 결국 내가 원하는 결과는 얻지 못하고 말았다. 코딩과 다르게 이 부분은 뭔가 질문을 하기가 어려웠다. 좀더 이쁘고 완성도 있는 UI 를 만들어 달라고만 했지 어떻게 이쁘고 완성도 있는 UI 를 만들어 달라고 할지 몰랐다. 그냥 이쁘고 완성도 있는 UI 를 만들어 달라고 하면 그냥 애니메이션 효과를 넣거나 하는 정도의 수준이지 뭔가 화면이 찬 구성을 만들어 주지 못한 한계가 있었다.

(혹시 이와 관련한 노하우가 있으신 분이 있으면 도움 부탁드립니다.🙏)

8. 결론

이와 같은 과정을 걸처 현재와 같은 결과물을 만들어냈다.

분명 어려움이 있었다.너무 광범위한 요구 사항에서는 이녀석 역시 제대로 답을 해주지 못했다. 코드도 의도대로 동작하지 않았고 기존의 컨텍스트를 잃는 상황까지 있었다. 그래서 차라리 코딩을 하는게 훨씬 더 빠르고 편한 상황도 발생했다.

그럼에도 불구하고 나 혼자 하면 매우 삽질을 하며 구글이나 Stackoverflow 를 검색하며 해야할 것들을 매 질문마다 30초 이내로 빠르게 대답해 주고 가이드 라인을 제시해 주어 무척 빠르게 진행할 수 있었는 점이 인상적이었다.

앞으로는 "개발의 방식이 많이 바뀌겠구나"라는 느낌을 크게 받았다. "앞으로는 Chat GPT 를 활용할 수 있는 개발자와 그렇지 못한 개발자로 나뉘겠구나" 라는 생각이 들었다. Chat GPT 로 인해 점차 격차가 벌어질 것이라는 강한 예감이 든다.

그런데 Chat GPT 를 잘 활용하기 위해서는 무엇보다 코드를 잘 읽고 판단할 수 있는 능력이 중요할 것 같다. 위에서 경험했던 것처럼 Chat GPT 가 정확히 내의도를 파악하여 내 의도대로 코드를 만들어 주지 못한다. 의도와 다른 결과를 줄 수 있다. 이걸 바로 잡기 위해서 어떻게 해야하는지 개발자는 판단할 수 있어야 한다.

Linux 를 창시한 리누즈 토발즈가 "최근에는 직접 코딩을 안하고 사람들 코드 PR 들어오면 머지만 하고 있다" 고 한다. 앞으로 개발자는 Chat GPT 가 코딩한 것을 소프트웨어 반영하는 작업으로의 비중이 늘어갈 것 같다. 역설적이게도 이런 상황일 수록 개발자는 더 잘아야 한다고 본다. 코드를 잘 이해하고 개발환경(현재 상황)에 맞는 적절한 알고리즘이나 방법론을 선택할 수 있어야 한다. 더불어 전체적인 큰 그림을 그릴 수 있어야 Chat GPT 와 개발하는 시대에 살아 남을 수 있으리라... 나 스스로도 꾸준히 공부하는 것을 게을리 하지 말아야겠다.

다음에는 GIF 를 만드는 것도 한번 시도해봐야겠다.