개발자 대신 ChatGPT! 구름IDE로 QR 코드 만들기

요즘 전 세계가 ChatGPT 이야기로 뜨겁다. ChatGPT는 OpenAI에서 개발한 인공지능 언어 모델이다. 이 모델은 인터넷에서 수집한 수많은 텍스트 데이터를 학습해 사람처럼 말하고 이해하는 능력을 갖고 있다. 

뒤쳐지기 싫어하는 기업들은 이미 ChatGPT를 도입해 새로운 기능을 선보이고 있다. 온라인 강의나 세미나를 통해 ChatGPT 활용법을 배우는 사람들도 빠르게 늘어나고 있다. 개발자들 사이에서는 농담 반, 진담 반으로 은퇴를 고려해야 할 것 같다는 말도 나오고 있다. 

개발자 대신 ChatGPT?

이렇게 강력한 ChatGPT가 개발자를 어떻게 대체할 수 있는지 궁금해졌다. 소문난 천재 인공지능, ChatGPT의 어마어마한 지능을 활용하여 직접 개발해 보기로 결심했다. 나는 컴퓨터공학과 출신도 아니고 코딩을 배워본 적도 없다. 과연, 개발자 없이 ChatGPT와 구름IDE만으로 프로젝트를 성공적으로 완성할 수 있을까? 

💬 구름IDE는 클라우드 기반 통합 개발 환경 서비스이다. 쉽게 말하면 우리가 문서를 작성하는 MS Word처럼 개발자가 코드를 작성하며 개발하는 도구이다. 구름IDE의 가장 큰 장점은 PC에 직접 개발 환경을 구축하지 않고 클라우드에 개발 환경을 두고 인터넷 브라우저로 접속해 어디서나 동일한 환경에서 개발할 수 있다는 점이다. 무료로 사용할 수 있는 기본적인 기능 외에도 유료 서비스로 다양한 기능을 제공하고 있다. 

ChatGPT한테 물어보기

1. 아, 속았다

‘구름IDE로 QR 코드 생성하는 방법을 알려줘’라는 질문을 입력하고 몇 초가 지나지 않아 ChatGPT가 답을 내놓는다. 곧장 따라 해 본다. 시작부터 난관이다. ‘파일 메뉴가 어디에 있지?’, ‘HTML 파일은 어디 있는데?’ 한참을 헤매다가 깨달았다. 속았다.

ChatGPT의 그럴싸한 답변
❶ 구름IDE 상단의 [파일] 메뉴에서 [HTML 파일]을 선택합니다.
→ [파일] 메뉴에서는 HTML 파일을 선택할 수 있는 기능이 없다. 
❷ 구름IDE 상단의 [파일] 메뉴에서 [이미지 저장]을 선택합니다.
→ [파일] 메뉴에는 [이미지 저장]이라고 불리는 기능이 없다. 

ChatGPT는 잘못된 정보를 마치 사실인 것처럼 매우 그럴싸하게 답변했다. 이 친구와 소통하기 쉽지 않을 것 같다는 예상이 든다. 새로운 모델은 다르겠지라는 기대감으로 $20를 결제한다.

2. 어? 이게 되네?

구름IDE로 QR 코드를 만드는 방법을 알려줘”

유료로 결제한 새로운 모델은 같은 질문은 했을 때 구름IDE에 로그인하고 프로젝트를 생성하는 방법부터 알려준다. 스택은 ‘Python’, 라이브러리는 ‘qrcode’를 사용하겠다고 한다. 다소 주도적이기까지 하다.

pip install qrcode

ChatGPT가 알려주는 대로 프로젝트 파일을 생성하고 터미널에 ‘qrcode’ 라이브러리를 설치하는 명령어를 입력한다. 터미널에 찍힌 로그를 보니 대충 잘 됐다는 의미 같다. 

import qrcode  # QR 코드 생성 라이브러리 불러오기
from PIL import Image  # 이미지 처리 라이브러리 불러오기

# QR 코드를 생성하고 저장하는 함수
def generate_qrcode(data, output_filename):

    # QR 코드 설정을 지정합니다.
    qr = qrcode.QRCode(
        version=1,
        error_correction=qrcode.constants.ERROR_CORRECT_L,
        box_size=10,
        border=4,
    )

    # 데이터를 QR 코드에 추가합니다.
    qr.add_data(data)
    qr.make(fit=True)

    # QR 코드 이미지를 생성하고 저장합니다.
    img = qr.make_image(fill_color="black", back_color="white")
    img.save(output_filename)

# 메인 실행 부분
if __name__ == "__main__":

    # 데이터를 지정합니다 (URL 또는 텍스트).
    data = "https://example.com"

    # 출력 파일 이름을 지정합니다.
    output_filename = "qrcode.png"

    # QR 코드를 생성하고 저장하는 함수를 호출합니다.
    generate_qrcode(data, output_filename)
    print(f"QR 코드가 {output_filename}에 생성되었습니다.")
Python

이어서 알려준 예제 코드를 입력하고 실행한다.

[Ctrl + C]와 [Ctrl + V]만 열심히 한 것 같은데 QR 코드가 만들어졌다. 그런데 왜 되는지는 모른다. 개발자가 매일 하는 일이 이런 것일까? 약간의 자신감이 생겼다. 한 번에 여러 개 QR 코드를 생성하는 방법도 물었다.

“한 번에 여러 개의 QR 코드를 생성하려면 코드를 어떻게 수정해야 해?”

ChatGPT가 반복문을 사용해 여러 데이터를 처리할 수 있도록 코드를 수정해줬다. 나는 원래 있던 코드를 전부 지우고, ChatGPT가 알려준 새로운 코드를 복사해서 붙여 넣는다.

import qrcode  # QR 코드 생성 라이브러리
from PIL import Image  # 이미지 처리 라이브러리

# QR 코드를 생성하고 저장하는 함수
def generate_qrcode(data, output_filename):

    # QR 코드 설정값을 지정합니다.
    qr = qrcode.QRCode(
        version=1,
        error_correction=qrcode.constants.ERROR_CORRECT_L,
        box_size=10,
        border=4,
    )

    # 데이터를 QR 코드에 추가합니다.
    qr.add_data(data)
    qr.make(fit=True)

    # QR 코드 이미지를 생성하고 저장합니다.
    img = qr.make_image(fill_color="black", back_color="white")
    img.save(output_filename)

# 메인 실행 부분
if __name__ == "__main__":

    # 데이터 리스트를 지정합니다.
    data_list = [
        "https://example1.com",
        "https://example2.com",
        "https://example3.com",

        # 필요한 만큼 URL 또는 텍스트를 추가하세요.
    ]

    # 각 데이터에 대해 QR 코드를 생성하고 저장합니다.
    for i, data in enumerate(data_list):
        output_filename = f"qrcode_{i+1}.png"
        generate_qrcode(data, output_filename)
        print(f"QR 코드가 {output_filename}에 생성되었습니다.")
Python

알려준 예제 코드를 입력하고 실행해 본다. 잘 된다. 

ChatGPT만 있으면 뭐든지 할 수 있을 것 같은 자신감이 생겼다. 마치 개발자가 된 기분이다. 새로운 기능을 추가해 보기로 한다. 

3. 어? 이게 안 되네?

생성된 QR 코드 이미지를 파일로 다운로드하는 방법은 없어?”

생성된 QR 코드 이미지를 파일로 다운로드하는 방법에 대해서 물어봤다. 답변을 읽어보니 서버를 켜야 한다는 의미 같다. 몇 번의 질문과 답변을 오갔는데도 불구하고 제대로 따라 하지 못했다. 점점 머리가 어지럽고 마음이 어려워진다. 이 과정에서 시간이 한참 걸렸다. 물론 안 되는 이유도 모른다. 

“더 간단한 방법은 없어? 난 코딩 바보란 말이야.”

코딩 바보에게 ChatGPT가 알려준 가장 간단한 방법은 ‘마우스 오른쪽 버튼을 클릭하여 저장하기’

내가 지금까지 올라온 곳이 우매함의 봉우리였구나. 

4. 말이 안 통하는 건 개발자나 ChatGPT나 똑같다

이미지를 로컬에 파일로 저장하는 기능 대신 QR 코드 디자인을 커스텀하는 기능을 개발해 보기로 했다. 갑자기 ChatGPT 답변이 길어진다. 다시 머리가 어지러워지고 마음이 어려워진다. 

“커스텀 결과 예시를 보여줄래?” 

”이미지가 안 보이는데?” 

”아니 네가 보여준 예시 결과에서 이미지가 보이지 않아” 

”내가 커스텀 하고 싶은 건 QR 코드 이미지의 디자인이야.” 

”QR 코드에 로고 같은 이미지를 넣고 싶어.” 

”로고로 사용할 이미지를 어떻게 파일로 저장해?” 

”QR 코드에 넣을 이미지를 어떻게 불러와?” 

”이미지는 준비됐는데 불러오는 방법을 모르겠어.” 

”로고로 사용할 이미지를 컨테이너에 어떻게 불러와서 사용해야 하는데?” 

”내가 원하는 작업을 다시 설명해 볼게. 이해가 안 되면 말해.” 

…… 

“구름 IDE로 QR 코드를 만들어 보고 싶어. 자세한 방법을 알려줘”

ChatGPT는 결국 내게 QR 코드 생성기 사이트를 추천해줬다. 나는 내가 무엇을 알고, 무엇을 모르는지 모르는 상태가 됐고 우리는 말이 안 통했다. 

“우리 처음부터 다시 해볼까?”

때때로 처음부터 다시 시작하는 것은 필요하지 않을 수 있다고 한다. ‘우매함 봉우리 다음은 절망의 계곡인데…’라는 생각이 들었다. 편의점에서 맥주를 사 오기로 한다.  

5. 중꺾마

내가 무슨 부귀영화를 누리자고 이걸 했을까 싶었다. 중요한 건 꺾였는데도 그냥 하는 마음이겠지. ChatGPT한테 다시 묻는다.  

“개발자 없이 QR 코드 생성기를 만들 수 있을까?”

“구름IDE로도 만들 수 있어?” 

ChatGPT의 확답에 다시 도전해 볼 용기가 생긴다. 이번에는 ChatGPT가 추천해 준 스택 중에서 Node.js를 사용해 개발해 보기로 한다. 

우선, QR 코드 이미지를 로컬에 파일로 다운로드하는 기능은 굳이 필요하지 않다고 판단했다. ChatGPT가 알려준 ‘마우스 오른쪽 버튼을 클릭하여 저장하기’가 훨씬 쉽고 간단하기 때문이다. QR 코드 이미지를 커스텀하는 기능은 지금 도전하기에 난이도가 너무 높은 것 같아 기능 수준을 낮추기로 결정했다.

사용할 언어 
🅧 Python → 한번 도전해 봤으니까 패스
🅥 Node.js → 회사에서 개발자들이 쓰는 걸 봤음
필요한 기능
🅥 한 번에 여러 개의 QR 코드 생성  
🅧 생성된 QR 코드 이미지를 로컬에 파일로 다운로드  → 필요하지 않다고 판단  
🅧 QR 코드 이미지를 원하는 이미지로 커스텀  → 만들기 어렵다고 판단
🅥 QR 코드 아래에 메시지 추가 

6. 질문을 제대로 하기 위해 노력한다

ChatGPT의 조언대로 처음부터 다시 시작하기 전에 이전 대화 내용을 살펴봤다. 내 질문이 두루뭉실할수록 ChatGPT가 엉뚱한 대답을 내놓거나 원하는 대답이 아닌 경우가 많았다. 반대로 명확하고 구체적인 질문일수록 만족도가 높은 답변을 내놓았다. 그렇다면 ChatGPT에게 질문을 잘하기 위해서는 어떻게 해야 할까? 이것도 ChatGPT한테 물어보자. 

“ChatGPT와 효율적으로 커뮤니케이션 하려면 질문은 어떻게 해야해?”

ChatGPT에게 질문을 잘 하는 방법
1. 명확하게 질문하기
2. 구체적으로 질문하기
3. 짧고 간결하게 질문하기
4. 하나의 주제에 초점을 맞추기
5. 질문의 배경 정보 제공하기
6. 예의를 갖추어 질문하기  → 중요★

인공지능이나 사람이나 별반 다를 게 없다. 질문은 명확하고, 구체적이고, 간결하게 하는 것이 중요하다. 내가 아는 것과 모르는 것을 구분하고, 복잡한 문제는 상대방이 이해하기 쉽게 단계별로 나눠 질문해야 한다. 

7. 문제-해결-문제-해결의 반복

이번에는 QR 코드 디자인을 커스텀해보기로 했다. 우선 ‘Node.js’ 컨테이너를 만들고 자바스크립트 프로젝트 파일을 생성한다. ‘qrcode’ 라이브러리를 설치하고 알려준 코드를 붙여 넣는다. 

npm install qrcode
// QR 코드 생성 도구를 불러옵니다.
const QRCode = require('qrcode');

// QR 코드에 넣을 정보를 정합니다. 여기서는 'https://example.com'이라는 웹 주소를 사용합니다.
const data = 'https://example.com';

// QR 코드 이미지를 만들어 'qrcode.png' 파일로 저장합니다.
QRCode.toFile('qrcode.png', data, {

  // QR 코드의 색상과 배경색을 정합니다.
  color: {
    dark: '#000'// QR 코드 색상을 검은색으로 설정합니다.
    light: '#FFF'  // QR 코드 배경색을 흰색으로 설정합니다.
  }
}, (err) => {

  // QR 코드 생성 중 오류가 발생하면 에러 메시지를 출력합니다.
  if (err) {
    console.error(err);
  } else {

    // 오류 없이 QR 코드가 생성되면 완료 메시지를 출력합니다.
    console.log('QR 코드가 생성되었습니다.');
  }
});
Python

앞선 경험 덕분에 여기까지는 순조롭다. 문제는 QR 코드 이미지에 텍스트를 넣기 위해 ‘sharp’ 라는 라이브러리를 설치하고 나서부터 발생했다. 

“에러 메시지를 해석해 줘. ‘sharp’라는 모듈이 설치되지 않는 것 같은데?”

ChatGPT가 제시한 문제와 해결 방안 ➊, ➋
[문제] ‘sharp’ 라이브러리 의존성 문제 → [해결] 라이브러리 전역으로 설치
[문제] Node.js와 ‘sharp’ 라이브러리 버전 호환 문제 → [해결] Node.js 버전 업데이트 

라이브러리를 전역으로 설치하고 ‘Node.js’ 버전 업데이트를 시도했으나 또 문제가 발생했다.  

“최신 버전 Node.js를 설치하려고 했는데 이런 에러 메시지가 나왔어. 해석해 줘.”

ChatGPT가 제시한 문제와 해결 방안 ➌ 
[문제] ‘GLIBC’ 라이브러리와 Node.js 버전 호환 문제
[해결] Node.js 버전 다운그레이드 

시스템에 설치되어 있는 ‘GLIBC’ 라이브러리 버전과 내가 설치하려는 ‘Node.js’ v.18.15.0 버전이 호환이 안 되는 문제라고 한다. ChatGPT가 권장하는 방법대로 더 낮은 ‘Node.js’ 버전을 설치하고 다시 ‘sharp’ 라이브러리를 설치한다. 또 오류다. 

대충 에러 로그를 보니 ‘GLIBC’ 라이브러리 버전 호환 문제 같다.  

“같은 에러인 것 같은데, 해석해 줘.”

ChatGPT가 제시한 문제와 해결 방안
[문제] ‘GLIBC’와 ‘sharp’ 라이브러리 버전 호환 문제 
[해결] ‘sharp’ 대신 ‘canvas’ 라이브러리 설치

역시나 ‘GLIBC’ 라이브러리 버전 문제다. ‘sharp’ 대신 ‘canvas’ 라이브러리를 설치한다. 또 오류다. ‘아, 개발자가 매일 하는 일이 이런 것인가’하고 다시 한번 생각한다.   

‘canvas’ 대신 ‘pureimag’ 라이브러리를 설치해도 마찬가지였다. 결국 ‘Node.js’ 버전을 ‘GLIBC’ 버전에 맞게 v10.16.3으로 다운그레이드하고 ‘canvas’ 라이브러리를 다시 설치하는 방법으로 해결했다. 

8. 우여곡절 끝! COMPLETE  

이후에도 비슷한 문제-해결-문제-해결 과정을 몇 번 더 반복하고 나서야 원하던 걸 구현할 수 있었다. 개발자 없이 ChatGPT와 구름IDE만으로 프로젝트를 완성했다. 이 모든 게 ChatGPT와 보낸 하루동안 일어난 일이다. ChatGPT와 함께 완성한 코드는 아래 [부록. To-Do List] 파트에 첨부해 두었다.

모두가 개발자가 된다

구름IDE는 다양한 프로그래밍 언어를 지원하고, 인터넷 브라우저로 접속해 개발 환경을 구축할 수 있어 프로젝트를 쉽게 시작할 수 있었다. 구름IDE가 아니였으면 PC에 개발 환경을 구축하는 방법부터 ChatGPT에게 물어봤어야 했을 것이다. ChatGPT는 적절한 프로그래밍 언어 추천부터 코드 작성, 오류 수정까지 빠르고 친절하게 알려줬다. 개발 과정에서 겪는 대부분의 어려움을 ChatGPT로 극복할 수 있었다.  

내가 이번 프로젝트를 통해 확인한 점은 할 수 있다는 ‘가능성’이다. GhatGPT 덕분에 새로운 지식에 쉽게 접근할 수 있었고, 한 번 해냈다는 자신감은 배움에 도전할 용기를 얻었다. ChatGPT와 함께한 오늘 이 경험이 새로운 기술을 습득하는 데 어려움을 겪는 사람들에게 동기부여와 자신감을 얻는 계기가 되었으면 좋겠다. 모개된-! (두가 발자가 다) 


부록. To-Do List 

1. 구름IDE에 회원가입 또는 로그인하고, 새 컨테이너를 생성하세요. 

2. 컨테이너 이름과 소프트웨어 스택을 설정하세요. 여기서는 Node.js를 사용하겠습니다. 

3. 터미널에서 다음 명령어를 입력해 ‘qrcode’ 라이브러리를 설치하세요. 

npm install qrcode

4. 터미널에서 다음 명령어를 입력해 ‘canvas’ 라이브러리를 설치하세요. 

npm install canvas

5. 프로젝트 폴더에 자바스크립트 파일을 생성하고 예를 들어 index.js라고 이름을 지정하세요.

6. index.js 파일에 다음 코드를 작성하고 저장하세요. 

// 필요한 도구 가져오기
const qrcode = require('qrcode'); // QR 코드 만들기
const Canvas = require('canvas'); // 이미지 다루기
const fs = require('fs'); // 파일 저장하기

// 주소와 텍스트 입력하기
const data = ['https://www.example1.com', 'https://www.example2.com', 'https://www.example3.com'];
const text = ['Scan me 1!', 'Scan me 2!', 'Scan me 3!'];

// QR 코드 이미지와 텍스트를 합치는 함수 만들기
const createQRCode = async (data, text, index) => {
  return new Promise((resolve, reject) => {

    // QR 코드 이미지 만들기
    qrcode.toFile(`./qrcode${index}.png`, data, { type: 'png', errorCorrectionLevel: 'H', margin: 1, scale: 10 }, async (err) => {
      if (err) reject(err);

      // 이미지 불러오기
      const image = new Canvas.Image();
      image.src = `./qrcode${index}.png`;

      // 이미지와 텍스트 합치기
      const canvas = Canvas.createCanvas(image.width, image.height + 20);
      const ctx = canvas.getContext('2d');
      ctx.drawImage(image, 0, 0);
      ctx.font = '16px sans-serif';
      ctx.fillText(text, 0, image.height + 16);

      // 합친 이미지 파일로 저장하기
canvas.createPNGStream().pipe(fs.createWriteStream(`./qrcode_with_text${index}.png`));
      resolve();
    });
  });
};

// 주소와 텍스트로 이미지 만들기
const generateQRCodes = async () => {
  for (let i = 0; i < data.length; i++) {
    await createQRCode(data[i], text[i], i);
  }
  console.log('QR 코드 이미지 완성!');
};

// 이미지 생성 시작하기
generateQRCodes();

7. 터미널에서 다음 명령어를 입력해 index.js 파일을 실행하세요. 

node index.js

8. 실행이 완료되면 프로젝트 폴더에 qrcode_ with_text.png 파일이 생성됩니다. 파일을 열어서 생성된 QR 코드를 확인하세요.


Thumbnail source | Freepik

Posted by
vivi.kwon

'코더'이자 마케터입니다. 일하다 객사하는 게 꿈입니다.