이런 웹사이트 본 적 있으시죠?
스크롤만 했는데 뭔가 달라 보이는 사이트

요즘 웹사이트를 보다 보면 묘하게 눈에 들어오는 사이트들이 있습니다.

스크롤을 조금 내렸을 뿐인데 화면이 자연스럽게 바뀌고, 제품 이미지가 따라 움직이고, 텍스트가 순서대로 나타나고, 한 페이지를 보고 있는데도 마치 영상을 보는 것처럼 이야기가 이어집니다.

저도 최근에 새로운 웹사이트를 하나 만들면서 이런 느낌을 내보고 싶었습니다.

그런데 시작은 생각보다 별로였습니다.

AI로 웹사이트를 만들었는데 너무 AI 티가 났습니다

요즘 AI로 웹사이트 하나 만드는 것 자체는 정말 쉬워졌습니다.

Next.js로 만들어달라고 하고, 랜딩페이지 구조를 잡아달라고 하고, 히어로 영역과 기능 소개, CTA까지 넣어달라고 하면 예전보다 훨씬 빠르게 결과물이 나옵니다.

문제는 결과물이 너무 익숙하다는 겁니다.

나쁘지는 않습니다.

오히려 꽤 깔끔합니다.

그런데 문제는 너무 많은 AI 생성 사이트들이 비슷한 형태로 나오다 보니, 조금만 보다 보면 바로 느낌이 옵니다.

“아, AI로 만들었구나.”

제가 만든 페이지도 딱 그 느낌이었습니다.

그래서 계속 AI에게 수정해달라고 했습니다

처음에는 단순하게 생각했습니다.

디자인이 마음에 안 들면 AI에게 다시 시키면 된다고 생각했습니다.

이렇게 계속 수정했습니다.

그런데 생각보다 잘 안 됐습니다.

조금 바뀌긴 합니다.

폰트가 바뀌고, 카드 모양이 바뀌고, 배경색이 바뀌고, 애니메이션이 하나 추가됩니다.

그런데 전체적인 느낌은 크게 달라지지 않았습니다.

오히려 대화를 반복할수록 컨텍스트가 길어지고, 토큰은 계속 사용하고, CSS는 복잡해지고, 기존 디자인과 새 디자인이 섞이기 시작했습니다.

바이브코딩을 하다 보면 이런 순간이 꽤 자주 옵니다.

기능은 분명히 만들어졌는데, 마지막 20%의 퀄리티가 잘 안 올라갑니다.

특히 디자인은 “더 예쁘게”라는 말만으로는 잘 해결되지 않는다는 걸 다시 느꼈습니다.

문제는 AI가 아니라 제가 제대로 보여주지 않았던 것이었습니다

그러다가 방식을 바꿨습니다.

“예쁘게 만들어줘”라고 말하는 대신, 제가 원하는 느낌의 사이트들을 찾아보라고 했습니다.

그리고 단순히 디자인만 따라 하지 말고, 왜 그 사이트가 좋아 보이는지 분석하라고 했습니다.

그리고 여기서 GSAP을 적용해보라고 했습니다.

그 순간부터 결과물이 확 달라졌습니다.

정확히는 디자인 자체가 갑자기 엄청 좋아졌다기보다는, 페이지에 “흐름”이 생겼습니다.

GSAP을 넣었더니 페이지가 살아 움직이기 시작했습니다

GSAP은 웹 애니메이션을 만들 때 많이 사용하는 자바스크립트 애니메이션 라이브러리입니다.

처음에는 저도 그냥 “스크롤 애니메이션 만드는 라이브러리인가?” 정도로 생각했습니다.

그런데 직접 적용해보니 핵심은 단순히 움직이는 게 아니었습니다.

예전 페이지에서는 모든 정보가 화면에 그냥 놓여 있었습니다.

제목이 있고, 설명이 있고, 카드가 있고, 버튼이 있습니다.

사용자는 그걸 읽으면 끝입니다.

그런데 GSAP을 적용하면 정보를 “언제 보여줄지”까지 설계할 수 있습니다.

스크롤을 하나의 타임라인으로 사용할 수 있습니다

가장 재미있었던 부분은 스크롤이었습니다.

보통 스크롤은 단순히 페이지를 위아래로 이동하는 기능입니다.

그런데 GSAP의 ScrollTrigger 같은 기능을 사용하면 스크롤 자체를 애니메이션의 진행바처럼 사용할 수 있습니다.

결국 사용자가 그냥 페이지를 읽는 게 아니라, 스크롤하면서 서비스의 기능을 하나씩 경험하게 됩니다.

이 차이가 생각보다 컸습니다.

예를 들어 AI 에이전트 서비스를 소개한다면

일반적인 랜딩페이지라면 이런 식입니다.

기능 설명으로는 충분합니다.

하지만 인터랙티브하게 만들면 다르게 보여줄 수 있습니다.

실제 서비스가 어떤 식으로 동작하는지 사용자가 페이지를 내리는 것만으로 이해할 수 있습니다.

저는 이 부분이 GSAP의 가장 큰 장점이라고 느꼈습니다.

예쁘게 움직이는 것이 목적이 아니라, 복잡한 기능을 경험으로 설명할 수 있다는 점입니다.

AI에게 GSAP을 시키니까 오히려 더 쉬웠습니다

재미있는 점은 예전이라면 이런 애니메이션을 직접 구현하려고 하면 꽤 부담스러웠다는 겁니다.

애니메이션 타이밍을 잡고, 스크롤 위치를 계산하고, 모바일 대응을 하고, 여러 요소의 상태를 관리해야 합니다.

그런데 지금은 AI에게 레퍼런스와 원하는 흐름을 명확하게 주면 상당 부분을 빠르게 만들어줍니다.

제가 직접 하나하나 GSAP API를 외우는 것보다, “이 섹션에서는 화면을 고정하고 제품 이미지는 중앙에 두고, 스크롤하면서 텍스트 세 개를 순서대로 보여줘” 라고 설명하는 편이 더 빠릅니다.

이게 바이브코딩과 꽤 잘 맞는 방식이라고 생각합니다.

다만 “GSAP 넣어줘” 한마디로는 부족했습니다

여기서 중요한 것도 하나 있었습니다.

AI에게 그냥 “GSAP 적용해줘”라고 하면 역시 흔한 애니메이션이 나옵니다.

텍스트가 아래에서 올라오고, opacity가 0에서 1로 바뀌고, 카드가 살짝 확대되는 정도입니다.

그것만으로는 사이트의 인상이 크게 달라지지 않습니다.

결국 중요한 건 레퍼런스였습니다.

이렇게 하니 결과가 훨씬 빨리 좋아졌습니다.

처음에는 프롬프트를 계속 수정하면서 토큰만 쓰고 있었는데, 레퍼런스를 보여주고 구조를 분석하게 하니 방향을 훨씬 빨리 잡았습니다.

특히 이런 사이트에 잘 맞을 것 같습니다

물론 애니메이션을 많이 넣는다고 좋은 사이트는 아닙니다

이 부분은 직접 만들면서 더 느꼈습니다.

처음에는 움직이면 무조건 멋져 보일 거라고 생각했습니다.

그런데 이것저것 다 움직이기 시작하면 오히려 정신이 없습니다.

버튼도 움직이고, 배경도 움직이고, 텍스트도 움직이고, 카드도 움직이면 사용자는 어디를 봐야 할지 모릅니다.

결국 애니메이션도 UI의 일부였습니다.

사용자에게 필요한 정보를 적절한 순간에 보여주고, 다음 시선을 자연스럽게 유도해야 합니다.

아직 제가 만든 페이지는 제작 중입니다

이번에 이 방식을 적용해서 실제 페이지를 하나 만들고 있습니다.

처음 만든 버전과 비교하면 분위기가 정말 많이 달라졌습니다.

정적인 랜딩페이지였던 것이, 스크롤하면서 기능을 따라가는 하나의 경험에 가까워졌습니다.

다만 아직 세부 애니메이션과 모바일 화면을 계속 조정하고 있어서 지금 바로 공개하기는 조금 어렵습니다.

완성되면 실제 결과물과 함께, 어떤 식으로 구성했고 AI에게 어떤 방식으로 작업을 시켰는지도 따로 정리해보겠습니다.

이번에 가장 크게 느낀 점

AI로 웹사이트를 만드는 것은 이제 정말 쉬워졌습니다.

하지만 쉽게 만들 수 있다는 것과, 좋은 결과물을 만드는 것은 여전히 다른 문제였습니다.

AI에게 계속 “더 예쁘게”, “더 고급스럽게”라고 말하는 것보다 좋은 레퍼런스를 찾아주고, 왜 좋은지 분석하게 하고, 내 서비스에 맞게 다시 설계하게 하는 것이 훨씬 효과적이었습니다.

그리고 GSAP은 그 과정에서 꽤 강력한 도구였습니다.

단순히 화려한 애니메이션을 만드는 도구가 아니라, 사용자가 서비스를 이해하는 순서를 설계할 수 있게 해줍니다.

저처럼 AI로 만든 웹사이트가 어딘가 밋밋하고, 계속 수정해도 비슷한 느낌에서 벗어나지 못하고 있다면 GSAP과 레퍼런스 기반의 작업 방식을 한 번 시도해보셔도 좋을 것 같습니다.

저도 아직 계속 만들어보는 중입니다.

완성된 페이지는 곧 공개하겠습니다.