요즘 화두는 단연 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에 푸시했습니다.
# 1) 변경된 파일 모두 추가
git add .
# 2) 커밋
git commit -m "feat: 히어로 섹션 배경 이미지 추가"
# 3) 내 브랜치에 올리기
git push origin front/내작업이름커밋 메시지 규칙
접두어 | 사용할 때 | 예시 |
|---|---|---|
| 새 기능 추가 | feat: 로그인 페이지 UI 구현 |
| 버그 수정 | fix: 모바일 메뉴 안닫히는 문제 |
| 디자인/CSS 변경 | style: 히어로 배경색 변경 |
| 기타 설정 | chore: 패키지 업데이트 |
| 문서 수정 | docs: README 수정 |
그리고 코드가 올라가면 Vercel을 통해 자동으로 배포 환경이 업데이트되는 구조였습니다.
최종적으로 기능이 완성되면 개발자 프로님께서 코드를 확인한 뒤
dev 브랜치에 병합해주는 방식으로 작업이 진행되었습니다.
AI로 구현한 홈페이지 기능 미리보기
AX 스프린트 동안 AI를 활용해 관리자(Admin) 기능 일부를 실제로 구현해보았습니다!
이번 작업에서는 어떤 프롬프트와 요구사항을 입력하면 AI가 어떤 방식으로 작업을 진행하는지 확인해보는 과정도 함께 기록해보았습니다.
그래서 작업 과정에서 사용한 프롬프트나 방향성, 수정 과정 등을 업무 일지처럼 최대한 꼼꼼히 정리했고,
그 과정에서 느낀 점과 인사이트도 솔직하게 기록해보고자 했습니다.
또한 구현 과정에서 어떤 기능을 어디까지 만들 것인지, 최종 결과물이 어떤 형태여야 하는지를 정의하는 작업도 함께 진행했습니다.
콘텐츠 관리 및 발행 기능
콘텐츠 목록 조회, 검색, 필터, 정렬 기능을 포함해 콘텐츠 수정·복제·삭제 등의 관리 기능을 구현했습니다.
또한 콘텐츠 작성 시 사용할 수 있는 에디터 툴바와 미리보기, 코드보기 기능을 함께 구성했습니다.
발행 상태(초안·발행·예약발행·보관) 설정, 예약 발행 시간 관리, 썸네일 및 태그 설정 등
실제 콘텐츠 운영에서 필요한 기본 발행 기능도 함께 구현했습니다.
카테고리 관리 기능
콘텐츠와 상품에서 사용할 카테고리를 관리할 수 있도록 상위·하위 카테고리 등록, 수정, 삭제 기능을 구현했습니다.
또한 카테고리 검색, 노출 순서 변경, 콘텐츠·상품 연동 설정 등을 통해 분류 구조를 관리할 수 있도록 구성했습니다.
카테고리가 연동되어 있으므로, 특정 업종의 상품을 구매한 경우 관련 콘텐츠·CRM도 맞춤으로 발송할 수 있을 듯하여 그 부분이 기대됩니다!
실제로 AX 하며 느낀 점과 회고!
이번 AX 프로젝트는 “AI로 어느 정도까지 실제 기능을 구현할 수 있을까?”라는 질문에서 시작했는데요. 평소에도 랜딩이나 상품 페이지 작업, 다양한 콘텐츠 제작 과정에서 AI를 활용하고 있었지만, 이번에는 조금 다르게 AI만을 활용해 실제 기능과 페이지를 어디까지 만들 수 있을지를 경험해본다는 점에서 의미 있는 시도였던 것 같습니다!
처음에는 기능을 세세하게 정의하기보다는 “이런 걸 만들고 싶다”는 정도의 아이디어만 던지고, AI가 전체 구조와 기능을 어떻게 만들어가는지 지켜보는 방식으로 작업을 진행했습니다. (제가 세부적인 디테일을 말하지 않아도 어디까지 잘 해주는지가 궁금했어요!)
초기에는 기본 구조와 UI, 기능 흐름이 꽤 빠르게 잡혀서 “생각보다 빠르게 형태를 만들 수 있구나”라는 경험도 할 수 있었는데요.
예를 들면, 제가 SEO적인 부분을 말하지 않았음에도 SEO 제목·설명·슬러그·검색화면 미리보기까지 구현해주었습니다.
하지만 작업이 진행될수록 UI 디테일이나 기능의 세부 동작처럼 실제 사용성과 연결되는 부분에서는 사람이 기준을 명확하게 설명해줘야 했습니다. 어디까지 구현하면 ‘완성’인지, 어떤 방식으로 동작해야 하는지 같은 것들을 미리 정리해두는 게 생각보다 중요하다는 걸 느꼈습니다.
외주 작가와 작업할 때처럼, 결국 내가 원하는 결과물이 어느 정도 명확히 그려져 있어야 한다는 점도 다시 한번 체감했습니다.
팀원들과 프로젝트 이후 어려웠던 점이나 소감들을 나눴는데요!
기획자의 입장에서는 기획 관련 소통은 줄어든 대신 개발과 관련된 소통이 늘어났고, 구현 과정에서 예상하지 못한 오류가 반복되어 오류를 개선하는 시간이 더 오래걸리기도 했다고 해주셨어요. 디자인 측면에서는 CSS와 같은 스타일 작업은 직접 수정하는 것이 더 빠른 경우도 있었지만, AI가 시뮬레이터와 폼을 연결하는 방식처럼 미처 생각하지 못했던 해결 방법을 제안해주기도 했다는 이야기도 들을 수 있었습니다!
짧은 기간이었지만 비개발자도 실제 기능을 구현해볼 수 있다는 가능성을 확인할 수 있었고,
앞으로도 계속 시도해보면 더 빠르게 만들 수 있을 것 같다는 기대도 생겼습니다.
특히 '딸깍' 뒤에는 많은 고민들이 있고 업무를 자동화하려면, 그 업무가 어떻게 진행되는지 잘 알아야 함을 느낄 수 있었습니다.
특히 AX를 적용할 수 있는 환경이나 작업인지 혹은 그렇지 않은지 등 자동화가 가능한 일인지부터의 파악이 우선될 필요가 있었습니다.
어떤 걸 어떻게 자동화하고, 우리는 어떤 의미있는 일과 활동에 집중할 것인지는 온전히 선택해야 할 부분인 것 같습니다.
역시나 재미있었습니다-! 앞으로 혼자서도 많이 해봐야겠습니다😇
프로젝트 정리·기록 차원에서 글을 써봤는데요! 사실 이번 작업은 온전히 자동화, AX하기는 어려운 작업이고 AI 활용에 가까운 것 같습니다.
그렇지만 이번 프로젝트를 통한 Next step을 기대해주세요! 좋은 인사이트가 생기면 공유드리겠습니다 🤗