요즘 화두는 단연 AI, 그리고 AI 자동화인 것 같아요.
주변에서도 “이젠 딸깍하면 다 된다”는 이야기를 많이 하시고, 그런 글도 많이 보이는데요!
근데… 실제로 해보면 그게 바로 딸깍으로 끝나진 않더라구요. 😅
당연히 특정 업무나 부분에서는 바로 실행해서 적용할 수도 있지만요.
자동화는 결국 프로세스로 만들어야 하고, 그 과정에는 리소스가 드는 게 당연하고 필수불가결한 것 같아요.
게다가 기존에 돌아가고 있는 업무들도 있고, 막상 “우리도 AX 하자!”라고 말한다고 해서 당장 시작하기 어려운 부분들도 있었습니다.
그래서 저희 플랫폼 부문에서는 조금 과감하게, 영업일 기준 7일 동안 “한 번 해보자”는 결정을 했어요.
이 시도를 흔쾌히 지원해주신 대표님, 그리고 필요성을 먼저 인지하고 시도를 제안해주신 리드님께… 진심으로 감사드립니다 🙇♀️
처음에는 각 구성원별로 실제 업무와 연관된 기능을 만들어보는 것으로 시작했는데요.
짧은 기간이었기 때문에 처음부터 거창한 프로젝트보다는 실제로 업무에 도움이 될 수 있는 기능을 만들어보는 것을 목표로 잡았습니다.
그 과정에서 두 가지 아이디어가 나왔는데요.
콘텐츠 유입 이후 행동을 연결하는 맞춤 제안 팝업
SEO와 GEO 요소를 빠르게 점검할 수 있는 분석 도구
AI로 제작한 SEO/GEO 콘텐츠 분석기 일부입니다. 작성된 내용은 샘플 데이터예요.
콘텐츠로 들어온 사용자가 글만 보고 이탈하는 경우가 많았기 때문에 다음 행동을 자연스럽게 제안할 수 있는 장치가 필요하다고 생각했고,
또 콘텐츠 작업을 하면서 SEO 기준을 빠르게 확인할 수 있는 도구가 있으면 좋겠다는 생각도 있었습니다.
그래서 이 두 가지 기능을 AX 실험의 첫 기능으로 잡았습니다.
그런데 실제로 기능을 만들어보면서 저희 팀에서는 한 가지 고민이 생겼습니다.
AI를 활용하여 프론트 페이지는 빠르게 제작되었으나 배포까지 고려한 테스트 환경을 바로 구축하기도 어려운 상황이었고,
만들어진 코드를 실제 운영 중인 홈페이지에 바로 붙이기도 쉽지 않았습니다.
기능을 실제로 사용하려면 다시 한 번 추가적인 작업과 생각보다 많은 시간이 필요하다는 것도 알게 되었습니다.
그래서 이런 질문이 나왔습니다.
이 프로젝트가 우리에게 의미 있게 남으려면 어떻게 진행하는 게 좋을까?
이렇게 해서 이번 AX 실험은 단순한 기능 실험이 아니라
프론트, 관리자(Admin) 두 영역으로 나누어
AI만으로 실제 홈페이지를 만들어보는 팀 프로젝트로 확장되었습니다.
개발자 없이 AI를 활용해 작업했을 때 현재 저희의 능력으로 어디까지 구현할 수 있는지,
그리고 우리가 직접 할 수 있는 영역과 도움이 필요한 영역이 어디까지인지도 함께 확인해보자는 목표였습니다.
AX 환경은 어떻게 만들었을까
기본적인 개발 환경 세팅 가이드는 개발자 프로님께서 정리해서 전달해주셨는데요.
개발 환경은 크게 아래 구조로 구성되었습니다!
VS Code : 코드 작업
Node.js : 프로젝트 실행 환경
Git / GitHub : 코드 버전 관리
Vercel : 배포 환경
그 다음에는 GitHub에 있는 프로젝트 레포지토리를 클론(clone) 해서 로컬 환경에서 실행할 수 있도록 세팅했습니다.
예를 들어 터미널을 열고 아래와 같은 명령어를 사용했습니다.
cd ~/Desktop
git clone https://github.com/wepickcorp/booster-front.git패키지를 설치한 뒤에는 프로젝트에서 사용하는 환경 변수 파일 설정하기
cp .env.example .env.local데이터베이스와 연결되는 Prisma 클라이언트도 생성하기
npx prisma generate서버 열기
npm run devAX 환경 세팅 체크리스트
체크리스트도 이미지로 공유드려 봅니다!
AX 작업 방식: 브랜치 기반으로 기능 개발
환경이 준비된 이후에는 각자 브랜치를 만들어 작업하는 방식으로 진행했습니다.
# 내 작업 브랜치 만들기 (처음이면)
git checkout -b front/내작업이름AI를 활용해 코드를 생성하고 필요한 부분을 수정하면서 기능을 구현한 뒤 코드를 Git에 푸시했습니다.