생성형 AI를 활용하여 서비스 만들기

by

아이리포에서 SQLD 자격증 책이 출간되면서 온라인 모의고사 문제풀이 기능이 필요하여 CBT(Computer Based Test) 시스템을 만들어보게 되었습니다.

일단 개발하면서 사용할 기술을 선택했어야했는데, 저는 기술스택이 백엔드쪽으로만 치중되어 있었기 때문에 웹 프론트를 만들어본적도 없고, 프론트에는 어떤 기술이 존재하는지조차 모르는 상태였습니다.

어떻게 만들어야하나 고민하던 중 친구가 “GPT 써봐라 나름 똑똑하다.” 라고 해서 일단 채택하게 되었습니다.

그렇게 사용된 기술은 다음과 같습니다.

BackEnd

  • JAVA
  • JPA, QueryDsl, Hibernate
  • Spring Boot, Spring Data JPA

DevOps

  • PostgreSQL
  • EC2
  • Ubuntu
  • GSMTP
  • Redis

FrontEnd

  • Vue
  • GPT

사실 이때까지만해도 서비스를 제작할때 GPT를 쓰는게 맞을까 싶었습니다. 항상 서비스를 개발할때 백엔드쪽을 담당했던터라 가끔 GPT한테 물어보면 도움이 되는경우보다 안되는경우가 많았습니다.

하지만, 프론트를 html부터 공부해서 만들자니 기간이 정해져있어서 불가능에 가까웠습니다.

서버도 만들 수 있고, 통신방식 및 규약은 알고있으니 “웹 페이지 제작,  API 연결 및 Response 값 보여주기 이정도는 GPT 한테 맡겨도 되지않을까?” 라고 생각했습니다.

⒈ 개발 시작

어차피 프론트와 백엔드를 둘 다 개발해야 한다면 자신있는 서버를 먼저 만들기로 하였습니다.

가장먼저 했던 작업은 DB모델링입니다. ORM을 통해 RDB와 객체를 매핑하려면 먼저 DB 테이블 및 관계 구성도가 나와야하기 때문에 처음 1주일은 모델링하는데 시간을 사용했습니다.

이후에는 필요한 API를 작성하는데 약 3주정도의 시간을 사용했습니다. 단순 API를 작성하는 작업이라 크게 어려운 작업은 없었습니다만, MultiPartFile 처리 및 GSMTP 서비스를 붙이는건 처음 해보는 작업이었기에 고생을 좀 했던 기억이 남습니다.

서버 작업은 크게 어려운 점 없이 잘 마무리가 되었고, 이제 웹페이지를 만들어야 하는데 처음부터 난관에 부딪혔습니다. vue 프로젝트를 생성은 했지만 서비스를 어떻게 띄우는지 몰라서 node.js 설치부터 npm 으로 vue 프로젝트를 실행시키는것도 GPT에게 물어봐서 해결했습니다.

현재는 약 20~25개의 컴포넌트와 10~15개의 화면 코드가 작성되어있지만, 제가 아는것은 몇개 없습니다.

처음엔 어떻게 시작해야하나 막막했지만 페이지가 하나 두개씩 만들어지면서 어느정도 속도가 붙기 시작했습니다. 일단 메인 페이지부터 만들어야했습니다. API는 만들어져있고 서버에 요청 후 응답값을 받아서 페이지에 뿌리기만 하면 되는 단순 작업이었기에 GPT에게 다음과 같이 질문했습니다.

“시험 리스트를 추출해오는 API는 GET /api/exam 이고, 응답값의 예시는 ~~~ 이다. 이 응답값을 올바르게 화면에 출력하는 Main.vue 코드를 작성해봐”

위와같이 단순하게 질문했는데 첫 결과물은 크게 마음에 들지않았지만 계속 질문하여 다듬고 나니 결과물은 [그림1]과 같았습니다.

[그림 1] 메인 페이지

[그림 2] GPT 시험화면 요청 질문

시험을 응시하는 화면도 다음 [그림 2]와 같이 질문하였습니다.

메인화면을 만들 때와 동일하게 API에 필요한 파라미터나 Request값과 예상 응답 값, 값들을 어떻게 처리했으면 좋을 지에 대해 요청했습니다.

물론 이 화면도 한 번에 마음에 들게 나온 게 아니라 화면의 구성 요소를 수정하기 위한 몇 번의 질문 끝에 다듬어 나온 결과물이 [그림 3], [그림 4]와 같습니다.

[그림 3] 시험 응시 화면

[그림 4] 시험 제출 화면

⒉ 임시 배포

어느덧 개발이 마무리되는 단계라 관계자들과 공유할 용도로 [그림 5]와 같이 간단하게 인프라 환경을 구성하여 배포를 진행하였습니다.

[그림 5] 개발 환경 인프라 구성도

추후 배포 시점에는 nginx, CI/CD 등 붙여야 할 서비스가 더 있지만 지금은 아직 서비스 제작 단계라서 간단하게 이 정도로 구성하였습니다.

⒊ 마무리

처음 GPT를 사용하여 서비스를 개발할땐 ‘이게 가능할까..?’ 라는 걱정이 들었습니다.

하지만 페이지가 하나 둘씩 완성되어갈때는 그런 걱정은 사라지고 화면에 구성요소들이 출력되는것들을 보며 만드는 재미만 느껴졌습니다.

현재 제 GPT에는 [그림6]과 같은 질문 탭이있습니다.

[그림 6] GPT 질문 탭

프론트물어보기 질문탭에서 약 한 달 반이 조금 넘게 질문을 하다 보니 너무 많은 데이터가 쌓여 질문 탭에서 새로운 채팅을 작성하게 되면 메모리 초과로 응답없음 상태가 됩니다.

그 정도로 많은 질문을 했고 GPT로부터 많은 답변을 받았습니다.

비록 질문을 작성하고 받은 답변을 또 수정하도록 요청하는 번거로운 작업이 많긴 하지,만 저처럼 어느 특정 부분의 기술이 부족한 경우는 생성형 AI가 빈자리를 채워줄 수 있다고 생각하게 되었습니다.