유튜브를 보다 이런 자극적인 썸네일을 한 번쯤 보았을 것이다.
솔직히 말하면, 개발자인 나도 혹해서 몇 편을 정독해 보았다.
그런데 이상했다.
영상에서 시키는 대로 따라 했는데도, 결과물이 엉망이었다.
분명 코드는 생성되었고, 화면도 만들어졌지만 어딘가 부족했다.
그래서 왜 이런 결과가 나오는지 분석해 보았고 무엇이 빠져 있는지 깨닫게 되었다.
해당 글에서는 AI로 웹 제작을 실패하는 이유와
이를 어떻게 보완해 원하는 형태의 웹페이지를 만들었는지 공유하려 한다.
왜 AI로 웹페이지 제작에 실패하는가?
분명 영상이나 블로그를 보고 AI에게 지시했는데, 왜 우리의 웹페이지는 위 같은 형태가 나올까?
핵심 이유는 세 가지라고 생각한다.
1. AI에게 설계를 맡긴다.
"1조를 벌 수 있는 수익형 웹사이트 하나 만들어줘. 요즘 유행하는 스타일로."대부분 이런 식의 프롬프트를 던지면 AI가 샥샥샥 해서 완성형 결과물을 내줄 것이라고 기대한다.
하지만 위 프롬프트에서는 가장 중요한 설계가 빠져있다.
- 어떤 목적을 가진 페이지인지
- 사용자 타겟은 누구인지
- 주요 기능은 무엇인지
이처럼 최소한의 설계 및 방향성이 정의되지 않으면 AI는 평균적인 결과물을 낼 수밖에 없다고 생각한다.
2. 기술 스택을 지정하지 않는다.
기술 스택을 굳이 지정하지 않아도 AI는 그럴듯한 정적 페이지를 만들어준다.
하지만 그 웹페이지를 지속적으로 운영하거나, 확장 가능성을 고려한다면 기술 스택은 필수 영역이라고 생각한다.
예를 들어,
- 검색 유입이 중요한데 CSR 기반으로 생성되는 경우
- 디자인 라이브러리를 쓰고 싶었는데 순수 CSS 구조로 만들어지는 경우
이처럼 기술 스택을 지정하지 않은 것은 프로타타입에 불가하다.
3. 디자인 방향이 모호하다.
"홍보용 웹페이지 만들어줘. 음 테마는 토스 스타일로"이렇게 AI에게 요구한다면, 장담하는데 99% 망한다.
토스 같은 스타일로 제작해 줘라고 지시한다면 그냥 파란색 웹페이만 나올 것이다.
정말 원하는 디자인이 있다면,
- 참고 이미지
- 컬러
- 레이아웃
- 분위기 / 테마 관련 키워드
최소한 이 정도의 정보는 정의해야 한다.
그렇다면, 어떻게 AI로 원하는 웹페이지 제작할 수 있을까?
앞서 이야기한 실패 이유를 다시 떠올려보자.
- AI에게 설계를 맡긴다.
- 기술 스택을 지정하지 않는다.
- 디자인 방향이 모호하다.
이 문제들은 결국 AI가 맘대로 추측하고 판단했기 때문에 발생한다.
그래서 필자는 AI가 추측하지 못하도록 설계·기술 스택·디자인 방향을 명세서에 작성하는 프로세스로 진행했다.
1. 기획
여기서는 무엇을 만들지 정의하면 된다.
- 어떤 목적을 가진 웹페이지인지?
- 핵심 기능
- 테마 / 분위기 / 디자인
- 기술스택
2. 명세서 도출
기획이 무엇을 만들지 정의하는 단계라면,
명세서는 어떻게 구현될 것인가를 확정하는 단계이다.
- 화면 구성은 어떻게 구성되는지?
- 버튼 클릭 시 이벤트 구성
- 애니메이션은 어떤 방식으로 작동하는가?
즉, AI가 “아마 이렇게겠지?”라고 추측할 여지를 제거하는 단계다.
3. 코드 개발
명세서가 준비되면,
이제 AI는 정해진 기준에 맞춰 구현을 수행한다.
- 명세서 기준으로 코드 생성
여기서 중요한 점은 문제가 발생했을 때, 2번 단계로 돌아가 명세서를 먼저 수정해야 한다.
실전 사례 - 뺀질이 홍보용 랜딩페이지 제작
소프트웨어마에스트로에서 인연을 맺은 뺀질이를 소개하고자 한다.
"3000만 원으로 평생 뺀질거리기"가 목표라 뺀질이라고 이름을 지은 것 같다.
현재 유튜브와 인스타그램을 통해
매일 지출 일지와 흥미로운 토론 주제를 공유하고 있는데, 개인적으로 꽤 잘될 것 같은 느낌이 들었다.
그래서 나중에 성공하면 생색낼 수 있도록 홍보용 랜딩 페이지를 선물하는 걸로 혼자 마음먹었다.
뺀질이
초기자금 3000만원으로 평생 뺀질거리는게 목표에요
www.youtube.com
0. 개발 환경 세팅
이번 홍보용 웹페이지에서는 아래 환경으로 진행하고자 한다.
- AI : ChatGPT·Codex
- UI : React Bits
- 배포 : Vercel
React Bits
해당 라이브러리는 애니메이션·인터랙티브 UI 컴포넌트를 빠르고 쉽게 동적 경험을 구현할 수 있는 오픈 라이브러리이다. (vue bits 도 존재)
Vercel
프론트엔드 앱을 배포하기 위한 클라우드 플랫폼으로, 코드만 GitHub에 올리면 → 자동으로 빌드 → 바로 배포해 주는 서비스이다.
(* github pages가 익숙한 분들은 굳이 Vercel로 배포를 진행하지 않아도 될 듯하다.)
1. 웹 기획
[웹 페이지 목적]
- 뺀질이 유튜브 / 인스타 홍보용 랜딩 페이지 제작
[컨셉 / 테마]
- 3D 기반
- 은하수, 우주, 신비로운 다크 테마
- ex) React Bits 홈페이지 (https://reactbits.dev/)
- ex) Google Antigravity 홈페이지 (https://antigravity.google/)
[필수 기능]
- 3D 오브젝트 배치
- 버튼 클릭 시, 재미있는 컨텐츠 요소 추가
- ex) 오브젝트 회전
- ex) 카메라 줌 인/아웃
- ex) 파티클 애니메이션
- 유튜브, 인스타 바로가기
- 모바일 대응 필수
[기술 스택]
- Only Frontend
- 서버/DB 없음
- React
- TypeScript
- React Bits 오픈소스 활용
- 배포 : Vercel이후 해당 정보를 기반으로 GPT에게 작업명세서를 요청했다.
2. 명세서 도출 (with GPT)
검토해 보니, 만족할만한 결과가 나왔다.
우선, 가장 중요하게 생각했던 react bits 오픈소스를 활용하는 건에 대해서는 더 상세하게 작업 명세서를 만들어놓았다.
3. 코드 개발 (with Codex)
해당 작업명세서를 아무 폴더에 만들어서 넣고 vscode로 켰다.
이후, 오른쪽 codex prompt란에 딱 한 줄만 작성하고 작업을 기다렸다.
4. 수정사항
수정사항을 고쳐달라고 바로 프롬프트도 해보았는데,
결국 수정도 작업명세서 형태가 있으면 이전 작업에 대한 흐름을 인지할 수 있어 좀 더 정교한 결과를 가져올 수 있다.
5. 확인 및 배포
뺀질이 PPANZZIRI
3000만원으로 뺀질거리기
ppanzziri-landing.vercel.app
개발 후, 아래 5가지 체크리스트를 기반으로 최종 점검을 진행했다.
📷 홍보용 웹 스크린샷
오늘의 결론
이번 시간에는 AI를 활용해 어떻게 더 나은 결과물을 만들 수 있는지,
뺀질이 홍보페이지를 제작하며 살펴보았다.
이번에 소개한 방식이 정답이라기보다는,
AI를 활용해 더 나은 결과물에 도달하기 위한 하나의 전략에 가깝다.
항상 느끼는 점이지만, AI는 어디까지나 도구다.
결과의 품질과 설계는 여전히 개발자에게 달려 있다고 생각한다.
