AI로 웹사이트를 하나 만들고 있습니다.
기능은 생각보다 금방 나왔습니다.
Next.js로 만들고 AI한테 이것저것 시키니 페이지 하나 만드는 것 자체는 이제 정말 빠릅니다.
그런데 다 만들고 보니까…
너무 AI가 만든 웹사이트 같았습니다.
큰 글씨 하나.
그라데이션.
둥근 카드 몇 개.
버튼 하나.
깔끔하긴 한데 어디선가 수십 번 본 그 느낌이더라고요.
그래서 계속 수정해봤습니다.
“좀 더 고급스럽게”
“AI 티 안 나게”
“인터랙티브하게”
“애플 사이트처럼”
시키면 뭔가 계속 바뀌긴 합니다.
그런데 묘하게 퀄리티는 그 자리였습니다.
오히려 토큰만 계속 쓰고 CSS는 복잡해지고…
마지막 20%가 정말 안 올라가더군요.
그래서 방법을 조금 바꿔봤습니다.
AI에게 디자인을 만들어달라고 하지 않고,
제가 원하는 느낌의 사이트들을 직접 탐색하고 분석해보라고 했습니다.
어떤 요소가 움직이는지.
스크롤에 따라 화면이 어떻게 변하는지.
텍스트는 언제 등장하는지.
그리고 그걸 그대로 베끼는 게 아니라 우리 사이트에 맞게 다시 구성해보라고 했습니다.
여기에 GSAP을 적용해봤습니다.
결과가 생각보다 많이 달라졌습니다.
단순히 이것저것 움직이는 게 아니었습니다.
스크롤을 내리면 제품이 등장하고,
그다음 설명이 나오고,
다음 기능으로 자연스럽게 이어집니다.
정적인 페이지에 흐름이 생기기 시작했습니다.
사용자가 정보를 한꺼번에 읽는 게 아니라 스크롤하면서 하나씩 경험하게 만드는 느낌이랄까요.
바이브코딩과 GSAP 조합도 꽤 괜찮았습니다.
예전 같으면 이런 스크롤 애니메이션을 직접 만들려면 꽤 귀찮았을 겁니다.
그런데 지금은
“여기서는 화면을 고정하고”
“스크롤하면서 제품을 확대하고”
“이 문구들을 순서대로 보여줘”
이런 식으로 설명하면 AI가 상당 부분 구현해줍니다.
GSAP을 전부 외우고 시작할 필요도 없었습니다.
대신 하나는 확실히 느꼈습니다.
“GSAP 넣어줘”라고만 하면 또 AI스럽게 나옵니다. ㅋㅋ
결국 레퍼런스가 중요했습니다.
좋은 사이트를 보여주고,
왜 좋아 보이는지 AI에게 분석시키고,
그 경험을 내 서비스에 맞게 다시 만드는 것.
계속 “예쁘게 해줘”라고 수정하는 것보다 이게 훨씬 빨랐습니다.
지금 실제 페이지에도 적용하고 있습니다.
아직 제작 중이라 결과물은 공개하기 어렵지만,
처음 만들었던 페이지와 비교하면 느낌이 정말 많이 달라졌습니다.
조금 더 다듬고 모바일까지 정리되면 실제 페이지도 공개해보겠습니다.
이번에 삽질하면서 느낀 점과 GSAP을 어떻게 활용했는지는 블로그에 조금 길게 정리해봤습니다.
AI로 만든 웹사이트가 뭔가 허전하다면 한 번 보셔도 좋을 것 같습니다.
https://goodtek.xyz/blog/gsap-yeoreobunyi-websaiteuga-heojeonhasingayo/