※ 주의: 이 글은 ChatGPT가 세상에 나온 지 얼마 되지 않았던 시점의 글이라 최신 정보와 다를 수 있습니다.
나는 ‘개발 도구’를 개발하는 개발자다. 사방이 개발로 둘러 쌓여 사는 사람이다. 그런 내게 ChatGPT의 등장은 새로운 기술이자 새 장난감이었다. ChatGPT의 등장은 어린이날 선물 같았고, 보자마자 호기심에 요리조리 사용해보며 감탄에 마지 않았다.
사용하기 전에 ChatGPT를 활용하는 영상을 봤는데 ‘이걸 가지고 어디까지 개발할 수 있을까?’란 궁금증이 일었다. 나 대신 ChatGPT가 개발을 하고 완벽한 코드를 보여주면 나는… 직업을 잃는 걸까? 잠깐 우울한 마음이 들었지만 호기심이 더 앞섰다. 모두가 극찬을 하는 이 기술은 정말 무한한 가능성을 지닌 걸까?
그래서 직접 ChatGPT로 이것저것 시도해보기로 결심했다.
1. ChatGPT와 개발을 해보자
딱 하루 간 ChatGPT로 다양한 개발에 도전해보기로 마음먹었다. 두 가지 관점에서 ChatGPT를 사용했는데, ChatGPT가 제시한 ①코드의 정확성과 ②코드의 동작이다. 잘못된 코드면 당연히 동작하지 않을 테고, 동작하지 않는 코드라면 ChatGPT가 제시한 코드는 사용할 수 없다고 생각했다.
1-1. [Wordpress] 블로그를 만들어봤다
이 정도면 난이도 1이라고 생각한다. 많이 사용하는 WordPress 테마를 ChatGPT로 바꾸려 시도해봤다. 구름IDE에서 기본으로 제공하는 소프트웨어 스택에서 WordPress를 선택해서 컨테이너를 생성했다.
Step ❶ 다크 테마 설정하기
WordPress의 다크 테마 중에서 무료이면서 가장 유명한 다크 테마를 설정하고 싶은데 방법을 알려줘.
무료이면서 가장 유명한 다크 테마를 찾기는 어려울 수 있지만, WordPress.org의 테마 디렉토리에서 인기 있는 무료 다크 테마를 찾을 수 있습니다. 이렇게 다크 테마를 찾고 설정하는 방법을 알려드리겠습니다:
- 워드프레스 대시보드로 이동: 워드프레스 관리자 로그인을 하여 대시보드로 이동합니다.
- 테마 추가: 왼쪽 메뉴에서 ‘외관’을 클릭한 다음 ‘테마’를 클릭합니다. 그런 다음 상단에 있는 ‘테마 추가’ 버튼을 클릭합니다.
- 테마 검색: 오른쪽 상단에 있는 검색창에 ‘dark’라고 입력하여 다크 테마를 검색합니다. 이렇게하면 워드프레스 디렉토리에서 사용 가능한 다크 테마가 나타납니다.
- 테마 선택: 인기있는 무료 다크 테마 중 원하는 테마를 선택합니다. 테마에 마우스를 가져다 대면 ‘자세히 보기’ 버튼이 나타납니다. 이 버튼을 클릭하면 테마에 대한 추가 정보를 볼 수 있습니다.
- 테마 설치 및 활성화: 원하는 테마를 찾았다면, 테마 카드에 있는 ‘설치’ 버튼을 클릭합니다. 설치가 완료되면 ‘활성화’ 버튼이 나타납니다. 이 버튼을 클릭하여 웹사이트에 새 테마를 적용합니다.
이제 워드프레스 웹사이트에 무료 다크 테마가 적용되었습니다. 웹사이트를 확인하여 새로 적용된 테마가 잘 동작하는지 확인해보세요.
ChatGPT는 WordPress에 있는 기본 어드민 페이지에서 테마를 설정하는 방법을 우선 제시했다. 버전에 따라 버튼의 위치나 문구가 다른데 이 또한 ChatGPT가 알고 있는지 궁금해서 버전에 따라 문의를 했더니 다시 안내해준다. 훌륭하다! 그렇다면 코드로 직접 테마를 바꾸는 것을 물어보면 잘 대답해줄까?
WordPress 다크 테마 설정을 어드민 페이지가 아니라 코드로 설정할 수 있는 방법을 알려줘.
어드민 페이지를 사용하지 않고 WordPress에서 다크 테마를 설정하는 방법은 자식 테마(child theme)를 만들고 필요한 스타일 변경을 적용하는 것입니다. 이 방법으로 원하는 다크 테마 스타일을 적용할 수 있습니다.
다음 단계를 따라 코드로 다크 테마를 설정하세요:
- 자식 테마 만들기: 자식 테마는 부모 테마의 기능과 디자인을 상속하고, 원하는 변경 사항을 추가할 수 있는 테마입니다. 자식 테마 디렉토리를 생성하세요. 예를 들어, wp-content/themes/your-child-theme이라는 디렉토리를 만듭니다.
- style.css 파일 생성: 자식 테마 디렉토리에 style.css 파일을 만들고, 다음 주석을 추가하세요. 이 주석은 워드프레스가 자식 테마를 인식할 수 있게 해줍니다.
/*
Theme Name: Your Child
ThemeTemplate: parent-theme
*/‘Theme Name’을 원하는 이름으로 변경하고, Template은 부모 테마의 디렉토리 이름으로 변경하세요.
- ‘functions.php’ 파일 생성: 자식 테마 디렉토리에 functions.php 파일을 생성하고, 다음 코드를 추가하여 부모 테마의 스타일을 가져옵니다.
<?php
function your_child_theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css');
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array($parent_style));
}
add_action('wp_enqueue_scripts', 'your_child_theme_enqueue_styles');- 다크 스타일 추가: style.css 파일에 원하는 다크 스타일을 추가합니다. 이렇게하면 원하는 요소의 색상, 배경색, 텍스트 색상 등을 변경하여 다크 테마 스타일을 적용할 수 있습니다.
- 자식 테마 활성화: 워드프레스 관리자 대시보드에서 ‘외관’ > ‘테마’로 이동하여 새로 만든 자식 테마를 활성화하세요.
이제 원하는 다크 테마 스타일이 웹사이트에 적용되었습니다. 코드를 사용하여 추가 스타일 변경을 계속 적용할 수 있습니다.
코드로 테마를 바꾸는 것도 잘 알려주지만 단순히 글자 색과 배경 색을 바꾸는 것에 그쳤다. 더 다양한 스타일링을 하려면 프롬프트가 더 정교해야 할 것 같다.
Step ❷ 모던한 테마 요청하기
이번에는 더 정교한 스타일링을 ChatGPT로 시도했다.
블로그 메인 페이지의 디자인을 바꾸고 싶어. 모던한 디자인으로 꾸밀 수 있도록 코드를 작성해줘.
블로그의 메인 페이지를 모던하게 디자인하려면, HTML과 CSS를 사용하여 페이지 레이아웃과 스타일을 재정의할 수 있습니다. 물론, 모든 WordPress 테마와 호환되는 것은 아니며, 웹 개발 기술에 대한 어느 정도의 이해가 필요합니다.
아래는 예시로 간단한 모던한 블로그 디자인을 위한 HTML과 CSS 코드를 제공합니다. WordPress 테마의 ‘header.php’, ‘index.php’, ‘footer.php’, 그리고 ‘style.css’에 아래 코드를 추가하거나 수정하면 됩니다.
- ‘header.php’ 파일: 웹사이트 헤더에 로고와 메뉴를 포함하도록 하세요.
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="site-header">
<div class="container">
<h1 class="logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<nav class="main-nav">
<?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>
</nav>
</div>
</header>- ‘index.php’ 파일: 블로그 포스트를 순환하고 각 포스트의 제목, 썸네일, 요약을 표시하도록 설정하세요.
<main class="site-content">
<div class="container">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="post">
<h2 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_post_thumbnail(); ?>
<?php the_excerpt(); ?>
</article>
<?php endwhile; endif; ?>
</div>
</main>- ‘footer.php’ 파일: 웹사이트 푸터에 저작권 정보와 하단 메뉴를 포함하도록 설정하세요.
<footer class="site-footer">
<div class="container">
<p class="copyright">© <?php echo date('Y'); ?> <?php bloginfo( 'name' ); ?></p>
<nav class="footer-nav">
<?php wp_nav_menu( array( 'theme_location' => 'footer-menu' ) ); ?>
</nav>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>- ‘style.css’ 파일: 모던한 디자인을 적용하기 위한 CSS를 정의하세요.
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
.container {
width: 80%;
margin: 0 auto;
}
.site-header, .site-footer {
background-color: #333;
color: #fff;
padding: 20px 0직접적인 설명 대신에 모던한 디자인이라고 표현한 이유는 ‘모던’이라는 특정 키워드를 ChatGPT가 이해하고 적절한 코드를 제시할지 궁금해서였다. ChatGPT가 제시한 코드를 WordPress에 적용한 화면이 다음 스크린샷이다.
ChatGPT가 나름 열심히 코드를 작성해서 답을 주었지만 모던한 디자인이라 보기엔 어려웠다. 아무래도 ChatGPT는 디자이너와 협업할 기회가 적었던 것 같다. 이 사태를 수습하기 위해 텍스트 중앙 정렬이라도 해보기로 했다.
위 메인 페이지를 모던한 스타일로 바꾸는 코드에서 콘텐츠들을 중앙 정렬하고 좌우 간격을 주고 싶은데, 코드를 작성해줘.
블로그 메인 페이지의 콘텐츠를 중앙 정렬하고 좌우 간격을 주는 방법은 CSS 코드를 약간 수정하는 것입니다. 아래에 ‘style.css’ 파일에 추가할 수정된 CSS 코드를 제공합니다:
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
.container {
width: 80%;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 20px; /* 좌우 간격을 추가 */
}
.site-header, .site-footer {
background-color: #333;
color: #fff;
padding: 20px 0;
text-align: center; /* 헤더와 푸터를 중앙 정렬 */
}
.main-nav, .footer-nav {
list-style: none;
padding: 0;
}
.main-nav li, .footer-nav li {
display: inline;
margin: 0 10px;
}
.post {
margin-bottom: 40px;
text-align: center; /* 포스트 콘텐츠를 중앙 정렬 */
}
.post-title {
margin-bottom: 20px;
}위의 코드는 메인 페이지의 콘텐츠를 중앙에 위치시키고, 각 포스트의 제목과 내용, 그리고 헤더와 푸터의 텍스트를 중앙 정렬합니다. 또한 .container 클래스에 padding 속성을 추가하여 좌우 간격을 조정합니다. 이 값은 원하는 대로 조절할 수 있습니다.
주의: 위 코드는 일반적인 워드프레스 테마에 적용하는 것을 목적으로 하고 있으므로, 특정 테마에 따라 작동하지 않을 수도 있습니다. 이 경우, 해당 테마의 CSS 클래스나 ID를 확인하고 필요한 변경 사항을 적용해야 합니다.
이번에는 의도한 대로 동작하는 CSS 코드를 받았지만 여전히 수정해야 할 부분이 눈에 띈다.
이외에도 디자인에 관해 여러 번 요청했는데, 명확하지 않고 추상적이며 해석의 개인차가 있는 요청일 때는 만족할 만한 수준의 코드를 받지 못했다. 앞의 요청처럼 ‘중앙 정렬’, ‘간격’ 등 명확한 키워드를 통해 요청해야 의도한 대로 코드를 주었다. 만족스러운 수준으로 블로그를 꾸미기 위해서는 수없이 상호작용을 해야 할 것 같다.
기본 어드민 페이지에서 대부분의 기능을 수정하거나 추가할 수 있는 WordPress는 ChatGPT를 통해 ‘코드 개발’을 하는 것이 오히려 불편했다. 하지만 WordPress를 잘 모르는 사람이라면 ChatGPT를 활용해 구글 검색 없이 간단하게 블로그를 관리할 수 있어 보였다.
1-2. [Next.js] 기업 소개 페이지를 만들어봤다
난이도 2다. 요즘 떠오르는 풀스택 프레임워크인 Next.js로 기업 소개 페이지를 개발해보았다.
Step ❶ 환경 설정하기
Ubuntu 18.04 LTS 버전 기준으로 환경을 구성하는 방법부터 진행했다.
자바스크립트 언어의 Next.js 프레임워크를 활용하여 기업 소개 페이지를 만들고 싶어. 이를 위해 Ubuntu 18.04 LTS 에서 프로젝트를 구성하는 방법을 단계로 설명해줘.
옮기기에는 너무 긴 상세한 설명과 함께 4단계로 환경구성부터 답변해주었다. 이전 같았으면 블로그나 공식 홈페이지 등을 찾아 헤맸을 텐데, ChatGPT에 프롬프트를 주고 쉽게 답을 찾을 수 있었다.
Step 1: Node.js와 npm 설치
Step 2: Next.js 앱 생성
Step 3: Next.js 앱 실행
Step 4: 기업 소개 페이지 생성
ChatGPT가 제시한 방법으로 환경을 구성한 다음 진짜 기업 소개 페이지의 코드를 요청해보았다. ‘글래스모피즘’ 디자인이 유행이라는 말이 떠올라서 추가로 디자인으로 적용해달라고 요청했다.
기업 소개 페이지에 대한 pages 디렉터토리 아래에 생성할 about.js 파일의 코드를 작성해줘. 그리고 about.module.css 파일의 코드를 작성해줘. 페이지에 글래스모피즘 디자인이 적용되어 있으면 좋겠어.
ChatGPT가 제시한 코드를 옮겼더니 앞의 그림과 같은 페이지를 완성할 수 있었다. 그런데 뭔가 디자인이 된 페이지이긴 한데 이게 ‘글래스모피즘’ 인지는 잘 모르겠다. 대신 흥미로운 점은 요청하지 않았던 기업 소개 문구를 작성해줬다는 것이다. 내용이 풍성하지는 않지만 문맥에서 해당 내용이 필요하다고 스스로 판단해서 먼저 제시한 점은 나름 만족스러웠다. 부족한 부분이야 다시 요청하면 된다.
Step ❷ 페이지 채우기
이제 기업 소개 페이지다운 형식을 갖추고자 헤더와 사이드바를 추가 구성하려고 한다. ChatGPT에 다음과 같이 프롬프트를 입력했다.
페이지의 헤더에 기업 이름인 ‘goorm’ 이 포함되어 있고, 왼쪽 사이드바에는 페이지를 네비게이션 할 수 있는 메뉴가 있으면 좋겠어. 메뉴에는 ‘IDE’, ‘EDU’, ‘DEVTH’로 설정해서 코드를 작성해줘.
제시한 코드를 옮겼더니 의도한 대로 다음 그림처럼 헤더와 사이드바가 잘 나타났다.
보기에는 그럴 듯하지만 아쉬운 점이 있었다. 기업 소개 내용을 알아서 작성해줬던 것처럼 사이드바에 링크를 추가하고 적절한 pages 폴더 하위에 위치할 파일의 코드를 만들어 줄 거라 기대했는데 그러지 않았다는 점이다. 대부분은 딱 요청한 것만 제시한다는 점을 다시 한 번 확인할 수 있었다.
하지만 사이드바에 있는 IDE, EDU, DEVTH 메뉴의 페이지 코드를 요청하면 이 역시 비슷한 구조로 답변을 해준다.
Step ❸ 리팩토링하기
그렇다면 리팩토링은 어떨까? 두 가지 프롬프트를 연달아 요청했다.
① 생성해준 세 개의 파일을 컴포넌트가 잘 분리하여 작성할 수 있도록 리팩토링해줘
② edu.js, devth.js도 리팩토링이 반영된 코드로 알려주고, 각 컴포넌트의 CSS 파일도 따로 작성해줘.
제시한 코드대로 따라하니 컴포넌트가 잘 나눠진다. 한 번에 리팩토링을 해주진 않았지만 직접 하는 것보다는 적은 노력으로 리팩토링된 코드를 받아볼 수 있었다.
이외에 Next.js의 최신 버전에서 달라진 점을 물어보기도 하고 렌더링 최적화와 관련된 것도 물어보았는데 적절하게 답변했다.
불편했던 점은 요청마다 수정할 코드를 제시하지 않고 전체 코드를 제시하는 터라 코드가 길면 길수록 오래 기다려 답변을 받아야 했던 점이다. 그리고 디자인은 역시나 만족스럽지 않았다. 스스로 CDN에서 이미지를 찾아 가져오지 못하는 것을 봐서는 ChatGPT가 답변할 수 있는 범위는 동작 가능한 완전한 코드보다는 어떻게 기능을 구현할 수 있는지에 조금 더 초점이 맞추어져 있는 것으로 보인다.
1-3. [Java Spring] 백엔드 프로젝트를 진행해봤다
이번에는 자바 스프링으로 백엔드 프로젝트를 진행했는데, 딱히 떠오르는 아이디어가 없어서 GitHub에서 추천받아 작성했다. 다음은 내가 작성했던 프롬프트 목록이다.
① 자바 스프링으로 백엔드 프로젝트를 진행하고 싶은데, GitHub에서 보일러플레이트로서 시작하기 좋은 저장소를 추천해줘. 백엔드의 프로젝트는 Create, Read, Update, Delete API가 포함된 프로젝트면 어떠한 주제든 상관없어.
② 첫 번째 저장소를 설정하는 방법을 Ubuntu 터미널을 통해서 작업할 수 있도록 단계별로 자세하게 알려주고, 이 프로젝트에 추가하면 좋을 기능을 5개 정도 알려줘.
③ 이 프로젝트에서 백엔드 엔지니어로서 배울 수 있는 점이 있는 추가할 만한 좋은 기능 5개를 추천해줘. 각 기능에 대해서 자세하게 설명하고 어떤 점을 배울 수도 있는지 함께 설명해줘.
④ 이 프로젝트에서 페이징을 적용하려면 어떤 파일들을 어떻게 수정해야 하는지 수정 사항을 단계별로 설명해줘. 페이징의 방법은 가장 일반적인 방법으로 선택하고 바로 실행해볼 수 있도록 해줘
⑤ 이제 데이터를 정렬하여 조회할 수 있는 기능을 추가하고 싶어. 단계별로 자세히 설명해줘
⑥ note CRUD API와 동일한 형태로 다른 리소스에 대한 CRUD API에 대한 코드를 작성해줘. 내가 추가하고 싶은 리소스는 note에 대한 ‘좋아요(Like)’ 정보를 가지고 있는 리소스야. 이 리소스는 어떤 User가 어떤 Note에 ‘좋아요’를 반응했는지를 나타내. 코드를 단계별로 자세하게 설명해줘.
⑦ Like 정보를 mysql database에 저장할 수 있도록 스키마를 설정할 수 있는 SQL 명령어 문도 작성해줘.
⑧ 인가 받은 사용자만 API 호출을 할 수 있도록 수정하고 싶어. 사용자는 API를 호출하기 위해 먼저 구글 OAuth를 통해 인증을 받아야 해. 먼저 사용자가 구글 OAuth 인증을 받을 수 있도록 코드를 작성해줘.
①을 요청했을 때 ChatGPT가 제시한 GitHub 저장소 링크 중에 접속되지 않는 링크도 있어서 추가로 한 번 더 추천을 받았다. 그 중 하나를 골라서 환경 설정을 요청(②)했더니 자세한 설명과 적절한 방법을 제시했다.
프로젝트 아이디어에 기능을 추가하면서 배울 점을 설명(③)해달라고 했더니 백엔드 기술 중 다음 세 가지를 추천해줬는데 대표적인 기술은 맞으나 너무 기본이라 좀 실망스러웠다.
- pagination(페이징)
- Sorting(정렬)
- Authentication(인증)
추천한 세 가지 과정(페이징, 정렬, 인증)과 신기능을 추가해 개발(④ ~ ⑧)했는데 ChatGPT가 제시한 코드는 대체로 적절한 수준이었다. 바로 작동하지 않는 코드가 있었으나 pom.xml 파일을 수정하는 식으로 수정하면 작동했기에 코드 자체에는 큰 문제가 없어 보였다.
코드를 작성한 다음에 API 문서화를 시도해보았으나 모두 실패했다. 지금까지의 대화 내용이나 프로젝트 코드를 기반으로 API 문서를 작성할 거라 기대했으나 ChatGPT는 API 문서 작성법만 답변하고 말았다. 개발자에게 있어 번거롭게 느껴지는 문서 작업을 대체할 수 없다는 점이 참 아쉬웠다.
1.4 [PyQt] GUI 프로그래밍을 했다
마지막으로 파이썬으로 GUI 프로그래밍을 ChatGPT로 시도해봤다. WordPress 프로그래밍 때처럼 구름IDE에서 기본으로 제공하는 소프트웨어 스택을 활용해서 환경설정은 건너뛰고 진행할 수 있었다.
① PyQt5로 메뉴바를 만들고 싶어. macOS의 애플리케이션 메뉴바와 비슷한 디자인으로 하고 싶고, 메뉴바에는 파일, 수정, 보기, 도구, 도움말 총 5개의 메뉴가 있어야 해. 코드를 작성해주고 단계별로 설명해줘.
② 메뉴바에 macOS와 비슷하게 종료 버튼, 확대/축소 버튼, 가리기 버튼을 추가하고 싶어. 코드를 작성해줘.
③ 버튼들이 메뉴바 안이 아니라 메뉴바 위에 보이도록 수정해줘.
제시한 코드를 구현했을 때 결과물은 다음과 같다.
결과물의 디자인이 macOS의 디자인과 비슷이나? 글쎄? 그래도 메뉴바는 잘 추가했다. 하지만 종료 버튼, 최대화/최소화 버튼은 원하는 결과물이 아니었다. 원하는 디자인을 구현해보려고 여러 시도를 해보았지만 결국 실패했다. 그래서 포기하고 다른 기능을 추가해봤다.
① 하단에 상태표시줄을 만들고, 상태표시줄 안에 현재 시간이 표시되도록 하고 싶어. 단, 시간은 초 단위까지 나타나야 하고 시간이 흐를수록 보이는 시간도 바뀌어야 해
② 하단의 상태표시줄의 배경색을 조금 더 진하게 설정하고 싶어.
배경색이 좀 진하지만, 요청한대로 하단에 상태 표시줄을 추가할 수 있었다. 이어서 계산기 기능을 요청했다.
① 이제 중앙의 비어있는 부분에 계산기를 추가하고 싶어. 윈도우즈 운영체제에서 제공하는 계산기 애플리케이션과 완전하게 작동하도록 코드를 작성해줘.
② 여기에 공학용 계산기 기능도 추가하고 싶어. 메뉴바에서 보기 메뉴를 통해 공학용 계산기와 일반 계산기를 토글할 수 있고 토글 타입에 따라 가운데 영역에 보이는 버튼들이 공학용과 일반용으로 번갈아 보이도록 해줘. 공학용 계산기는 윈도우즈에서 제공하는 공학용 계산기 기능과 동일한 기능으로 작성해줘.
① 프롬프트를 입력하자 예상 외로 정확한 계산기 기능을 구현해줬다. 디자인과 기능 모두 기대한 대로 구현했기에 이번에는 조금 더 복잡한 공학용 계산기를 요청(②)해봤다.
ChatGPT는 공학용 계산기가 무엇인지를 정확히 이해하고 있었다. 입력 값이 나오는 막대가 사라지긴 했지만 계산기를 구현하는데 가장 귀찮은 작업을 ChatGPT가 대신 해줬으니 괜찮을 것 같다. 이제 부가 기능을 추가해보기로 하였다.
① 결과 막대에 사용자가 직접 값을 입력할 수 있게 하고 싶어. 기본 계산기에만 해당 기능이 동작하도록 코드를 수정해줘.
② 사용자가 결과 막대에 값을 입력하고 엔터를 누르거나 [=] 버튼을 클릭하면 입력한 계산식의 결과가 나타나도록 해줘.
③ 계산식을 실행할 수 없을 때의 에러 상황을 처리할 수 있도록 해줘. 계산 에러가 발생하면 “계산할 수 없습니다” 라는 문구가 포함되어 있는 모달 창이 나타나고, 확인 버튼을 클릭하면 모달 창이 닫히고 다시 계산기가 보이도록 해줘.
3개의 프롬프트를 입력했고, 결과는 성공적이었다.
간단한 프로젝트라서 이런 결과가 나왔을 수도 있지만 개발 시간이 크게 단축되어 만족스러웠다. PyQt를 활용한 GUI 프로젝트에서는 나름 만족스러운 수준으로 코드를 받아볼 수 있었다.
- 초기 프롬프트 : 블로그 메인 페이지의 디자인을 바꾸고 싶어. 모던한 디자인으로 꾸밀 수 있도록 코드를 작성해줘.
- 마지막 프롬프트 : PyQt5로 메뉴바를 만들고 싶어. macOS의 애플리케이션 메뉴바와 비슷한 디자인으로 하고 싶고, 메뉴바에는 파일, 수정, 보기, 도구, 도움말 총 5개의 메뉴가 있어야 해. 코드를 작성해주고 단계별로 설명해줘.
초기 프롬프트에서 디자인을 ‘모던’이라고 표현했다면 나중에는 ‘macOS의 애플리케이션 메뉴바’라고 요구했는데 이런 차이가 원하는 기능을 더 잘 구현할 수 있었던 이유이다. 그리고 이런 프롬프트를 작성할 수 있었던 건 네 번의 테스트를 거치며 프롬프트를 좀 더 정교하고 명확하게 작성하도록 ‘내가’ 학습했기 때문이다.
2. ChatGPT와 페어 프로그래밍을 마치고
ChatGPT와 총 4개의 프로젝트를 페어 프로그래밍으로 진행했다. ‘라떼’를 찾기에는 아직 갈 길이 먼 나이지만, 그런 나에게도 AI 기술은 놀라울 만큼 급변했다. 하지만 실무에서 동료로 인정할 만큼의 실력을 갖추진 못했다. 어쩌면 기대가 너무 컸을 수도 있다.
2-1. ChatGPT의 장점
그럼에도 충분히 초보자에게는 좋은 가이드가 될 수 있다는 생각이다. 사용하며 느낀 ChatGPT의 가장 큰 장점은 다음 세 가지이다.
- 보일러플레이트 코드 생성이 가능하고 언어/패키지 등 설치 방법도 알려주므로, 검색 시간을 단축해 간단하게 개발 환경 구성을 구성할 수 있다.
- 요청에 따라 대부분 코드를 잘 작성하며 기본 설명을 함께 제시하므로 학습자에게는 충분히 도움이 된다.
- 검색의 역할도 ChatGPT가 수행할 수 있으므로 개발에 활용하면 검색의 수고로움을 크게 줄일 수 있다.
ChatGPT의 이런 장점은 초보자나 비개발자가 느끼는 개발의 장벽을 뛰어넘는 데 충분히 도움이 될 것 같다.
2-2. ChatGPT의 한계점
반면 한계점도 너무 뚜렷했다.
- 프롬프트 작성에 따라 코드 품질이 차이난다. 따라서 비숙련자는 프롬프트 작성을 수차례해야 비로소 원하는 답변을 받을 수 있다.
- ChatGPT가 제시하는 코드가 작동한다는 보장이 없다. 사용자가 디버깅하거나 다시 프롬프트를 작성해 ChatGPT가 해결해야 하는데 이 과정에서 혼자 개발하는 시간보다 더 많은 시간을 프롬프트 작성에 소비할 수 있다.
- 디자인은 갈 길이 멀다. 결국 CSS 파일은 개발자가 직접 작성해야 한다.
- 외부 API나 도구와 연동하는 코드를 작성할 때는 완전한 코드를 작성해 주지 않는다.
- 현재 프로젝트 코드베이스로 ChatGPT에게 요청하는 것은 플러그인이 필요하고, 현재 플러그인이 지원하는 언어가 한정적이다.
VSCode에 있는 [Manage] → [Extensions] → [ChatGPT – EasyCode]에서 제공하는 언어 목록. 이 익스텐션은 ChatGPT 플러그인을 활용하여 개발됐다. 대부분의 언어가 지원이 되지만, 이외의 언어를 사용하고 싶다면 별도 플러그인 개발이 필요할 것이다. - 코드베이스가 설정된 상태가 아닐 때, 세션이 종료되면 이전 내용들이 사라지므로 작업을 이어서 하기 어려울 수 있다.
- 코드베이스가 설정되어 있다면 지금까지의 작업 내용들이 코드에 반영되어 있을 것이므로 프롬프트를 작성하면 기대하는 답변을 받을 수 있다.
2-3. ChatGPT, 비즈니스, 개발에 대한 나의 결론
요즘은 ChatGPT 같은 생성형 AI를 활용한 다양한 신규 서비스가 출시되고 있는데 나 또한 제품 팀을 이끌고 있는 입장이라 사업화 부분도 고려해봤다. 또 ChatGPT가 개발을 대체한다는 이야기도 많아 이에 대한 고민도 있었다. ChatGPT를 사용해본 뒤 내 결론은 다음과 같다.
- 프롬프트 엔지니어의 전문성을 강화해야 한다. 입력하는 프롬프트에 따라 AI가 제시하는 코드의 수준이 달라진다. 사용자의 수준에 따라서 사용자 경험이 달라질 수 있다는 것이다. 따라서 AI에게 올바른 답변을 받아낼 수 있도록 질문 데이터를 가공하는 과정이 필요하며 이에 능숙한 전문 사용자가 필요하다. 그렇지 않다면 사용자의 잘못된 프롬프트 작성이 CS까지 이어질 것이다.
- 현재의 ChatGPT는 개발을 대체하지 못한다. 비개발 직군에는 개발자를 대신할 도구로 ChatGPT가 의미가 있을 수 있지만, 아직은 서비스를 개발하고 운영하는 데 개발자의 개입이 필요한 수준이다. ChatGPT가 모든 개발 도구를 대체할 수준은 아니다. 미래는 또다른 AI가 나타나겠지만, 개발자의 특성상 개발을 도구에게 미루지는 않을 것이고 아직 지엽적인 코드만 이해하고 제시하는 ChatGPT가 인간을 대상으로 하는 서비스를 개발하고 제품화하기에는 아직 갈 길이 멀다고 판단했다.
- 사업에는 사업 분야를 학습한 특화된 AI 모델이 필요하다. ChatGPT는 생성형 AI의 일부 제품 중 하나이다. 당연하게도 이를 그대로 사업에 사용할 수는 없고 해당 분야에 특화된 AI 모델은 따로 학습시켜 개발해야 한다. 모든 것을 할 수 있는 ‘Silver Bullet’은 없다. 그럴 듯하게 보일 수는 있지만, 분명히 한계는 있을 것이다. 도입하려는 분야의 데이터셋을 만들고, 이 데이터셋으로 모델을 훈련하여 자신의 사업에 맞는 생성형 AI 모델을 만들어 활용하는 방향으로 사업화를 진행해야 할 것이다.
ChatGPT 사용 한 줄 평
“아직 내 밥줄은 튼튼하다”
🤗
작가 vecstock 출처 Freepik
