핵심 요약
Fable 5.1과 Claude를 활용해 기존 AI 웹사이트 특유의 조잡함(Slop)을 없애고 세련된 디자인을 구현한 사례를 소개한다. 다층 레이어링, 자연스러운 스크롤 모션, 카드 스택 효과 등을 통해 데스크톱과 모바일 모두에서 프리미엄 사용자 경험을 제공한다. 실제 인터페이스 작동을 시뮬레이션하는 동적 애니메이션을 과하지 않게 연출하는 것이 핵심이다.
주요 포인트
- **정교한 레이어링과 깊이감**: 배경 오브젝트와 콘텐츠를 여러 층으로 분리하여 스크롤 시 입체적이고 역동적인 시각 효과를 연출함
- **모바일 반응형 완벽 대응**: 데스크톱의 고급스러운 레이어드 효과와 애니메이션을 모바일 뷰포트에서도 자연스럽게 유지함
- **과하지 않은 인터랙션 설계**: 마우스 호버 모션, 숫자 카운팅, 텍스트 고정 핀 효과 등을 거슬리지 않는 수준으로 적용해 세련미를 높임
- **실제 앱 시뮬레이션 애니메이션**: Slack, Cursor, Gmail 등 실제 도구 연동 화면을 생동감 있게 보여주는 UI 인터랙션 구현
이건 제가 클로드와 함께 만든 웹사이트 중에서 아마도 가장 마음에 드는 웹사이트일 거예요 . 여기는 AI 자동화 협회 웹사이트입니다. 제가 생각하기에 이 앱이 정말 멋진 이유는 스크롤을 시작할 때 나타나는 레이어들 때문입니다. 배경에 산과 나무들이 보이는데, 확연히 다른 층으로 구분되어 있어 고급스러운 느낌을 더해주고, 노트북 전체가 지금처럼 역동적으로 움직이는 듯한 느낌을 줍니다. 스크롤을 계속 내리면 AI 자동화 협회에 대한 내용이 조금 나옵니다. 우리는 입력되는 단어들을 볼 수 있습니다. 여기 아래로 내려오는 단어들을 보면서 수업, 실시간 통화, 이벤트, 그리고 순위표를 전환하며 볼 수 있습니다. 스크롤을 계속 내리면 텍스트가 동적으로 계속 나타나고 카드들이 서로 겹쳐 쌓이는데, 저는 이게 정말 역동적 이고 몰입감을 높여준다고 생각해요. 여기에서 가격 정보를 확인할 수 있습니다. 무료 커뮤니티, 유료 커뮤니티, 그리고 인증 과정도 있습니다. 아래쪽에 자주 묻는 질문( FAQ)이 보이네요. 죄송합니다. 그리고 이 애니메이션을 보세요. 우리가 여러 가지 항목 사이를 전환할 때 텍스트가 마치 잠기는 것처럼 고정되는 것을 볼 수 있습니다. 정말 멋진 것 같아요. 우리는 몇몇 유튜브 영상을 보고, 마지막으로 아래쪽에 행동 촉구 메시지가 나오는데, 다시 한번 레이어링 기법이 활용되는 것이 정말 멋지다고 생각합니다. 모바일로 보고 계신 분들이 궁금해하실 것 같아서 바로 여기에 적어드립니다 . 이건 제가 휴대폰으로 보고 있는 모습이에요. 우리는 똑같은 동적 노트북 화면을 얻습니다 . 우리는 똑같은 레이어드 효과를 얻게 되는데, 저는 그게 정말 아름답다고 생각해요. 이 텍스트를 스크롤하여 볼 수 있습니다. 우리는 동일한 애니메이션을 보게 되지만, 이러한 섹션을 클릭하는 방식은 약간 다릅니다. 스크롤을 계속 내립니다. 이 모든 것들이 들어옵니다. 카드들이 데스크톱처럼 쌓이는 방식은 아니지만, 원한다면 한 번의 지시만으로 그렇게 만들 수 있을 거라고 확신합니다. 우리는 계속해서 해낼 겁니다. 제가 여기서 말씀드리고 싶은 점은 Fable 5.1은 모바일에서도 이 부분을 잘 처리하며, 모바일 버전과 똑같은 프리미엄 경험을 제공한다는 것입니다. 이 웹사이트가 아름답다고 생각해요. 다른 예를 하나 더 살펴보겠습니다. 이것은 제 웹사이트입니다. 보시다시피 텍스트가 있습니다. 영웅 섹션이 있습니다. 그 수치들은 마치 숫자가 점점 올라가는 것 같았습니다. 저는 여기 있는데, 이 배경이 정말 멋져서 깊이감을 더하고 또 다른 차원을 더해주는 것 같아요 . 그렇다고 시선을 분산시키지도 않고요. 이것들은 모두 클릭 가능한 링크입니다. 이 수치들은 계속 증가하고 있으며, 배경 애니메이션과의 일관성도 여전히 확인할 수 있습니다 . 계속해서 이러한 사항들을 살펴보면서 제가 강조하는 부분을 색칠하겠습니다. 우리는 이와 같은 흥미로운 역동적인 요소에 접근하게 됩니다. 마우스를 움직이면 이것들이 움직이는 것을 볼 수 있지만, 다시 한번 말씀드리지만 과 하거나 거슬리지는 않습니다. 제 생각에는 굉장히 고급스러운 느낌을 주고, 작품에 깊이를 더해주는 것 같아요. 저희에 대한 간략한 배경 정보가 있으며, 이 링크는 저희 소개 페이지로 연결됩니다. 소개 페이지에는 저희에 대한 간단한 소개가 있습니다 . 전혀 특별한 게 아니에요. 그런데 어쨌든, 우리는 계속 내려오고 있고, 마치 짧은 사진 모음 같은 게 있어요. 이런 것들은 화면에 나타날 때쯤에 생겨납니다. 그리고 계속 내려가다 보면 제 책인 "AI 네이티브 되기"를 보게 됩니다 . 저희는 매주 새로운 유튜브 영상을 올리고 , 그러면 'AIS 가입하기'라는 문구 와 간단한 서명 창이 뜨는데, 그 서명은 제 데스크톱 사진첩에서 찾은 거예요. 그리고 제가 정말 좋아하는 또 다른 점은 내비게이션 바가 화면 전체에 걸쳐 계속 표시된다는 것입니다. AIS 사이트 내에서도 마찬가지였는데, 정말 마음에 들었습니다. 이유는 모르겠지만, 그냥 거기에 잠가두는 게 왠지 모르게 마음이 편안해져요. 자, 그럼 다음 제품을 보여드리겠습니다. 바로 글리도입니다. 이 키보드 정말 멋진 것 같아요. 이 작은 받아쓰기 입력창 좀 보세요. 이 안에 애니메이션이 정말 많아요. 보시다시피 음성 인식 기능이 단어를 받아쓰기해서 슬랙에 입력하고 있는데, 이는 제가 지금 마이크에 대고 말하는 모습과 매우 유사합니다. 그리고 바로 여기에서 제가 Glydo로 받아쓰기를 하고 있는 것을 보실 수 있습니다 . 정말 정말 멋져요. 우리가 이미 사용하고 있는 앱들을 바로 여기에 두고 , 내가 그 앱을 사용할 때는 앱 실행이 일시 중지됩니다. 키를 누른 상태로 입력하면 애니메이션이 나오는데 , 입력 내용이 좀 지저분하게 나오다가 받아쓰기를 통해 훨씬 깔끔하게 여기에 붙여넣어집니다. 계속 내려가면서 다양한 앱들을 살펴볼 수 있습니다. 예를 들어, Glydo가 이 내용을 Slack에 올리는 걸 보고 있어요. Glydo가 이 기능을 Cursor에 추가하는 것을 보고 있습니다 . 실제로 애니메이션을 통해 Gmail, 그리고 터미널의 클라우드 코드 등 다양한 앱에서 Glydo를 사용하는 모습이 어떻게 보일지 확인할 수 있습니다. 여기 아래쪽에 더 많은 내용이 있고, 이쪽에서 받아쓰기를 하거나, 이쪽에서 말하기를 할 수도 있고, 바로 저기서 차이점을 입력할 수도 있습니다. 자 , 이제 제가 가장 좋아하는 부분인 이 애니메이션을 보여드리겠습니다. 받아쓰기 기능이 있고, 그 외에도 이 모든 앱에서 각기 다른 방향으로 나아가는 두 가지 기능이 있습니다 . 이 로고들 중 일부는 확실히 틀렸지만, 단발성 과제치고는 꽤 괜찮네요. 저도 그 애니메이션이 마음에 들어요. 그리고 여기 아래쪽에는 저희 창립자들의 물건들이 좀 있습니다 . 어쨌든, 가격에 대해서 말씀드리죠. 자, 이제 제가 이야기하고 싶은 것은 Fable 5.1에서 AI 오류를 일으키지 않고 이런 동작들을 구현하는 방법입니다. 자, 제가 발견한 것은 스크롤 애니메이션이나 텍스트를 더욱 역동적으로 보이게 하는 것과 같은 요소들이었고, 특히 이 영상에서는 레이어링에 대해 제대로 알게 되었습니다 . 그건 정말 큰 도움이 돼요. 하지만 결국 제가 깨달은 것은 Fable 5.1이나 다른 어떤 AI 모델에게든 "전문적으로 보이게 만들어라. 고급스럽게 느껴지도록 만들어라"라고 말할 수 없다는 것입니다. 제대로 작동하려면 뭔가 기반을 마련해 줘야 해요. 이 영상에서 제가 한 일은 다른 웹사이트들에서 많은 영감을 얻은 것입니다. 예를 들어, 제가 정말 좋아하는 이 웹사이트의 경우, 제가 정말 좋아하는 웹사이트를 하나 찾아서 거기서 마음에 드는 요소들을 가져왔습니다. 이것은 포럼이라고 불립니다. 보시 다시피 매우 비슷합니다. 보시다시피 히어로 텍스트가 있고, 배경에 레이어가 있습니다 . 스크롤을 내리기 시작했을 때, "와, 레이어링이 정말 멋지다"라고 생각했어요. 그래서 저는 Fable 5.1에게 스크롤을 내릴 때 4개의 레이어가 나타나는 히어로 섹션을 어떻게 만들 수 있는지 알려줬습니다. 뒤쪽에 산이 있고, 중간에 산이 있고, 노트북 화면이 있고, 앞쪽에는 나무들이 늘어서 있습니다. 저는 기본적으로 그런 느낌을 너무 좋아해서 그걸 재현하고 싶었어요. 그래서 스크롤할 때 함께 움직이는 여러 개의 개별 레이어를 만들도록 했습니다. 그리고 물론 이런 텍스트 기능도 있죠. 여기 카드들이 쌓이는 방식이 정말 마음에 들었어요. 저는 그게 굉장히 고급스럽다고 생각했어요. 그래서 저는 영감을 얻기 위해 이 웹사이트를 살펴봤고, Fable 5.1 개발팀에게 제 게임도 같은 느낌을 갖도록 해달라고 요청했습니다. 그리고 이 웹사이트 의 모든 요소와 제가 왜 좋아하는지, 그리고 어떻게 영감을 얻고 싶은지 설명했습니다. 제 웹사이트는 딱히 어떤 웹사이트에서 영감을 받은 건 아니에요. 하지만 제가 한 일은 제가 정말 좋아하는 구성 요소들을 가져온 것입니다. 그래서 저는 ' 어디 있지?'를 찾아봤습니다. 저는 21st.dev라는 곳에 갔습니다. 제가 사이트를 만드는 모습을 오랫동안 지켜봐 오신 분들이라면 아마 이미 들어보셨을 거예요. 이 사이트에는 기본적으로 다양한 구성 요소가 있으며 , 이를 통해 AI 에이전트에게 애니메이션을 실행할 프롬프트를 제공할 수 있습니다. 예를 들어 , 이 컨테이너 스크롤의 경우 프롬프트를 복사하기만 하면 상담원이 해당 요소를 복사할 수 있습니다. 그래서 제가 정말 마음에 드는 배경화면들을 살펴보고 있었어요 . 저는 다양한 그라데이션을 살펴보고 있었습니다. 저는 다양한 인터랙티브 요소들을 살펴보고 있었습니다. 그리고 저는 그중 하나가 마음에 들었어요. 지금 당장은 찾을 수 없겠지만, 여기 배경에 보이는 저 이미지가 정말 마음에 들어서 그걸 참고해서 디자인 작업을 시작했어요. 그리고 나서 저는 Fable 개발팀에게 화면에 텍스트가 나타날 때 입체적으로 표현되기를 원한다고 설명했습니다. 그러면서 "이거 3D로 만들고 싶어요. 역동적인 느낌이 들게 하고 싶어요. 텍스트가 들어오면서 좌우로 스크롤되도록 하고 싶어요."라고 말했습니다. 물론, 저는 제가 가진 ScrollCraft 기술을 사용했는데, 여러분도 완전히 무료로 이용하실 수 있습니다. 제 자유학교 커뮤니티에 링크되어 있으며, 링크는 설명란에 있습니다. 이 스킬에는 레이어링, 스크롤링, 텍스트 표시 방식 등 디자인에 필요한 모든 요소가 포함되어 있습니다 . 그 기술에는 기본적으로 이러한 원칙들이 모두 담겨 있습니다. 완전히 무료입니다. 그리고 Glido의 경우, 제가 실제로 한 일은 경쟁사 웹사이트를 살펴보는 것이었습니다. 그래서 저희는 또 다른 음성 인식 앱인 Lemon을 살펴봤는데, 마치 이미 그 제품을 사용하고 있는 듯한 느낌을 주는 애니메이션 효과가 마음에 들었어요. 그래서 저는 다시 한번 여기 와서 "이번에는 Glido 에 가서 저희 브랜드 가이드라인을 가져와서 이런 페이지에 삽입해 주세요."라고 말했습니다. 보시다시피 , 이건 말하자면 거의 그대로 복제한 거라고 할 수 있죠. 하지만 Fable 5.1의 가장 멋진 점은 바로 여기서 무슨 일이 일어나고 있는지 분석하고, 똑같은 느낌을 주는 버전을 만들어낼 수 있다는 것입니다. 심지어 배경이 마치 수채화