(제작과정, 프롬프트 모두 공개) 스크롤에 제품이 살아 움직이는 인터랙티브 랜딩페이지 만들기. transcript

오늘은 랜딩 페이지를 만들어 볼 건데요. 사용자가 스크롤을 내리면 제품이 살아 움직이는 인터랙티브 랜딩 페이지를 만들어 볼 거예요. 입문자분들도 쉽게 따라올 수 있게 구성했으니까 부담을 내려 놓으시고 페이블로이 [음악] 작업을 할 거라고 했는데 어 오퍼스랑 같이 했을 때는 또 느낌이 어떻게 달라지는지도 비교해 볼 거예요. 어 결론부터 말씀드리자면 무료네 가지의 다양한 사례들을 직접 만들어 보실 수 있도록 원리를 알려 드리고 프롬프트도 전부 제공해 드릴 겁니다. 폰티상의 내용은 케이스에 클로즈업됐다가 이게 이제 레퍼런스 이미지로 그 기준이 되는 이미지가 나와줬고요. 이어폰 웹사이트 신발 웹사이트 사례도 있었죠. 쿠키 사례를 다룬척하다가 이렇게 멈추고 정보를 제공하고 이제 저는 에르기고요. 한국과 미국 테크업께서 프로트 디자인으로 일을 해 왔습니다. 앱 분야에서 아마존 베셀러로 올렸던 책이 두 건 있고요. 어 그러면 가보시죠. 오늘은 랜딩 페이지를 만들어 볼 건데요. 어, 그냥 예쁜 페이지 하나 만드는게 아니라 사용자가 스크롤을 내리면 제품이 살아 움직이는 애플 스타일의 인터레티브 랜딩 페이지를 만들어 볼 거예요. 이거의 특징은 사용자가 제품을 간접적으로 그리고 더 효과적으로 경험할 수 있다라는 겁니다. 초보자, 임무자분들도 쉽게 따라올 수 있게 구성했으니까 부담을 내려 놓으시고 들어보시기 바랍니다. 오늘 사용할 도구는 두 가지인데요. 첫 번째는 클로드 코드입니다. 전체 웹사이트의 구조를 만들고 어 영상의 프레임을 스크롤에 맞춰 연결하는 코드를 짤 거예요. 두 번째는 필드입니다. 스스필드는 영상을 기가 막히게 잘 만들어 주는 걸로 유명한데요. 어 제품의 이미지와 오늘의 가장 핵심인 히어로 영상을 만드는데 사용할 겁니다. 그리고 오늘 활용해 볼 모델 중에 하나는 페이블인데요. 크로드 코드에서 나온 가장 강력한 모델로 알려져 있습니다. 긴 작업을 단계별로 끌고 가고 진행하 강점이 있다고 알려진 모델이에요. 그리고 오늘 영상에서는 만드는 실전에 들어가기 전에 몇 가지 중요한 포인트들을 짚고 넘어갈 겁니다. 랜딩 페이지는 뭔지, 효과적인 랜딩 페이지를 만들려면 어떤 전략을 짜야 되는지 그리고 랜딩 페이지 안에 히어로라는게 있다고 하는데 그건 뭐고 왜 중요하고 어떻게 다뤄야 되는지를 차근차근 알려 드리겠습니다. 그리고이 인터랙액티브 웹사이트를 만들기 위해서 어 제가 공유드릴 프롬프트가 있는데요. 그냥 쓰라고 드리는게 아니라이 프롬트가 어떤 원리로 작동하는지를 알려 드릴 거예요. 그래서 더 깊이 있게 여러분들이 그 프롬트를 활용할 수 있도록 도와드릴 겁니다. 뒷부분에서는 제가 페이블로이 작업을 할 거라고 했는데 어 오퍼스랑 같이 했을 때는 또 느낌이 어떻게 달라지는지도 비교해 볼 거예요. 어 결론부터 말씀드리자면 오늘 제가 알려 드린 내용을 오퍼스로 하셔도 충분히 괜찮은 결과를 얻으실 수 있습니다. 사실이 히어로 영상 애니메이션 만드는데 있어서 AR보다는 콘티 작업을 잘 만드냐 그래서 스토리보드를 잘 짰냐가 중요해요. 오퍼스에게도 콘티를 내가 잘 전달한다면 결과물이 꽤 괜찮게 나와요. 그래서 페이블을 사용하지 못하신 분들은 오퍼스로 사용해 보셔도 괜찮습니다. 그러면 랜딩 페이지란 무엇인가부터 말씀드려 보죠. 오늘 만들어 볼 페이지는 랜딩 페이지이기 때문에 이게 뭔지부터 짚고 넘어가 볼게요. 랜딩 페이지는 말 그대로 사용자가 어딘가로부터 와서 착륙하는 페이지입니다. 인스타그램 광고를 누르고 들어올 수도 있고요. 구글 검색을 통해서 들어올 수도 있고 어 누군가가 공유해 준 링크를 타고 들어올 수도 있겠죠. 대부분의 사용자는 우리 제품에 대한 맥락이 거의 없는 상태로 들어옵니다. 우리는 제품을 만들었으니까 너무 잘 알잖아요. 왜 만들었고 누구를 위한 거고 뭐가 좋은지 잘 알고 있어요. 그런데 처음 들어온 사용자는 아무것도 모릅니다. 그리고 사용자들은 보통 3초에서 5초면은 이미이 웹사이트를 떠날지 말지를 결정하는 편입니다. 제가 여러 디자이너로 일하면서 경험에 본 바도 그랬고 여러 통계에서도 그렇게 이야기를 하고 있어요. 그렇다는 건 사용자들이 우리의 웹사이트에 들어왔을 때 우리의 가치를 잘 전달해서 사용자들이 머물 수 있게 붙잡을 수 있어야 된다는 거예요. 그거를 달성하기 위한 두 가지 핵심 개념이 있습니다. 첫 번째는 discover버빌ity요. 이거는 정보에 대한 발견 가능성을 높이고 이해도를 높이자 이렇게 이해하시면 되거든요. 즉 사용자가 내 웹사이트에 [음악] 들어올 때 다음의 사항들을 바로 알 수 있도록 도와줘야 된다는 거예요. 여기는 뭘 한 곳이지?이 제품은 나의 어떤 문제를 해결해 줄까? 여기는 믿을 만한 곳인가? 이런 것들입니다. 이런게 사용자에게 잘 전달이 돼야 됩니다. 그래야 사용자가 떠나지 않고 웹사이트에 더 오래 머물고 결과적으로 여러분들이 팔고 싶은 제품을 팔 수 있게 됩니다. 두 번째는 액션빌리티인데요. 사용자가 이제 어떤 정보가 있는지 알았으면 뭘 해야 되는지 명확하게 알 수 있어야 된다는 거예요. 구매를 해야 되는지 이메일을 남겨야 되는지 데모를 신청해야 되는지 명확하게 있어야 되는데 이게 흐릿하면 또 사용자는 그냥 나가게 될 수 있어요. 그래서 랜딩 페이지는 단순히 예쁜 웹페이지가 아니에요. 사용자가 들어왔을 때 맥락을 빠르게 주고 실뢰를 만들고 다음 행동으로 안내하는 전환 장치라고 보시면 됩니다. 그런 랜딩 페이지 안에서도 가장 중요한 구역이 있어요. 히어로입니다. 히어로는 웹사이트에 들어왔을 때 가장 먼저 보이는 첫 화면입니다. 이걸 부동산으로 비유하면 강남역 추구 바로 앞에 있는 금사라기 땅 이렇게 이해하시면 돼요. 강남역에서 나오면 보이는 가게는 안쪽 골목에 있는 구석에 있는 가게보다 훨씬 많은 사람들이 시선을 주잖아요. 유동 인구가 완전히 달라요. 레닝 페이지도 똑같습니다. 사용자가 가장 먼저 보는 곳이 히어로고 가장 많은 사용자들이 보게 되는 것도 히어로입니다. 앞서서 말씀드린 것처럼 사용자가 아주 빠르게 웹사이트를 떠날지 말지를 결정하는데 히어로가 굉장히 중요한 역할을 한다는 거예요. 그래서 히어로는 사용자를 붙잡고이 제품이 뭔지를 알려주고 그다음 섹션 아래로 내려가든지 또는 특정 행동을 하도록 이어주는 장치라고 보시면 돼요. 오늘 만들게 될 인터액티브 히어로는 사용자가 웹사이트에 들어오자마자 제품을 볼 수 있고 스크롤을 통해서 간접 경험을 할 수 있고 어 또 역동적으로 비주얼을 전달할 수 있기 때문에 레닝 페이지 히어로서 테스트해 볼 만 가치가 있다고 생각합니다. 왜냐면 사용자의 시선을 한 번 더 붙잡을 수 있는 장치로서 매력을 끌 수 있기 때문에 그래요. 영어 속담에 그림 하나가 천개의 단어보다 낫다는 말이 있습니다. 지금이 인액티브 히어로도 그래요. 어 이건 심지어 사진 하나가 아니라 사진 100장 이상이에 합쳐진 영상이기 때문에 사용자에게 굉장히 많은 정보와 매력 포인트들을 전달할 수 있습니다. 아 물론 모든 제품에 다 적용이 되지 않을 수 있어요. 또 너무 과하면 오히려 방해가 될 수도 있죠. 어, 하지만 프리미엄 제품이나 자동차란 단지, 시급료, 패키지 이런 것들은 비주얼 매력이 중요한 제품일 수 있기 때문에 충분히 시도해 볼 만하다고 생각합니다. 그리고 오늘 배울 것들을 시도해 보려는 분들이 있다면 단순히 이거를 만들고 끝낼게 아니라 그게 사용자에게 얼마나 효과가 있는지도 데이터로 함께 측정하시길 바래요. 어, 특히 실제로 제품을 판매한 분들은 그렇습니다. 그래서 적응했을 때랑 그렇지 않았을 때를 비교해 보면서 어 이게 도움이 되는지 또 어떻게 투익을 하면은 더 도움이 될지 이런 고민들을 해 보시면 좋을 것 같습니다. 자 그럼 오늘 만 웹사이트는 어떻게 구성되는지 큰 그림 한번 볼게요. 오늘 만든 랜딩 페이지는 크게네 개 섹션으로 나니다. 첫 번째는 히어로인데요. 여기에는 어 제품의 이름이라든지 핵심 문구 그리고 앞서 말씀드린 인터랙티브 스크롤 애니메이션이 들어갈 거예요. 사용자가 스크롤을 내리면 제품의 모습이 바뀌거나 카메라 앵글이 움직이거나 제품 디테일이 더 가까이서 보인다라든지 그런 식으로 어 저희가 응용을 해 볼 겁니다. 두 번째는 제품의 특징과 스펙인데요. 사용자가 인터랙액티브 경험에서 오 신기하네 하고 멈췄다면 이제는이 제품이 실제로 어떤 특징을 가지고 있는지 알려 줘야겠죠. 그래서 어 두 번째 섹션에 그렇게 구성을 했고요. 세 번째는 가격에 대한 부분이고요.네 번째는 CTA 즉 사용자가 다음에 해야 될 행동을 알려 주는 부분이요. 예를 들어서 구매하기라든지 웨이트리스트 등록하기란지 어 그런 버튼이 있을 거예요. 이거는 제가 정해 놓은 거고 이제 여러분들이 적용할 때는 어 유연하게 이런 섹션들은 여러분들 환경에 맞춰서 내용들을 넣으면 됩니다. 아, 오늘이 영상에서 가장 하이라이트는 결국이 혀로 애니메이션 부분이기 때문에 그 부분만큼은 어떻게 만드는지 여러분들이 가져가시면이 영상을 통해서 90% 이상의 가치는 다 가져가시는 거라고 생각을 합니다.이 핵심이 되는 히어로 부분이 어떤 원리로 만들어진 건지를 조금 말씀을 드려 볼게요. 어,이 원리는 생각보다 단순한데요. 영상 하나를 일단 만들어요. 어, 그 영상은 참고로 클로드는 어, 이미지 생성이라든지 영상 생성 모델이었기 때문에 스필드와 연결해서 활용을 해야 돼요. 어, 그래서 그렇게 만들어진 영상을 여러 장의 이미지 프레임으로 쪼개요. 예를 들어서 5초짜리 영상을 100장, 150장 이런 식으로 이미지를 나누는 겁니다. 그다음에 사용자의 스크롤 위치와 이미지 프레임 번호를 코드를 통해서 연결을 하게 돼요. 사용자가 페이지에 0% 지점에 있다면 1번 프레임, 50%쯤에 있다면 50번 프레임 이런 식으로요. 이렇게 하면 사용자 입장에서는 그냥 스크롤을 내린 건데 화면상에선 제품이 움직이는 것처럼 보이게 됩니다. 이걸 스크롤 스크럽이라고 부르기도 하는데요. 스크럽이라는 거는 문지른다는 뜻이에요. 어 영상 편집들에서 타임라인을 앞뒤로 문지르면 영상이 앞뒤로 움직이잖아요. 그걸 웹 스크롤로 한다고 생각하시면 됩니다.이 이 인터랙티브 웹사이트를 입문자분들이 쉽게 따라할 수 있도록 스타터 프럼트를 만들어 뒀습니다. 프람트 박는 방법은 아래 댓글에 링크를 넣어 두고요.이 프람트의 핵심은 한 번에 다 만들지 않는다는 거예요.

AI한테 그냥 한 번에 머진 인터랙티브 랜딩 페이지 만들어 줘라고 하면 좋은 결과가 나올 수도 있지만 운에 따라 안 좋은 결과가 나올 수도 있어요. 즉 뽑기라는 거죠. 만들려는 제품의 영상도 신마다 일관성이 떨어질 수 있고 영상도 의도와 다르게 나올 수 있습니다. 코드도 내가 원하는 구조랑 다르게 나올 수 있고요. 그래서이 프럼프트는 일부러 다음과 같은 여섯 개의 단계별로 나눠놨습니다. 어, 먼저 여러분들한테 제품 정보를 물어볼 거예요. 어, 그다음에 기준이 된 이미지를 달라고 하거나 아니면 만들고요. 그다음에 콘티를 확정하고 영상 제작은 또 돈이 많이 틀 수 있기 때문에 크레딧 견적을 주도록 했고요. 그다음에 영상 제작을 하고 마지막으로 웹사이트로 모든 영상 프레임들과 이미지를 연결하는 구조로 했습니다. 이렇게 하면 중간중간에 확인하면서 컨펌을 할 수 있고 돈이 많이 들 수 있는 영상 제작 단계에서는 어 삽질를 최대한 줄일 수가 있어요. 그러면 구세적으로 한 각 단계별로 어떤 것들을 왜 수집하는지 말씀드려 볼게요. 첫 번째는 제품 정보 수집 단계인데요. 실제 제품이냐 가상 제품이냐에 따라서 실제 물건이라면 제품 사진을 업로드 할 수 있고요. 정면, 측면, 디테일 같은 사진 있으면 좋아요. 아니면 한 장만 있어도 시작을 할 수 있습니다. 가상 제품이라면 사진 없이 텍스트 정보로 시작을 해요. 그다음에 브랜드명, 카테고리, 컨셉, 가격 이런 디테일한 요소들을 물어봅니다.이 과정이 중요한 이유는 뒤에서 만들게 될 모든 이미지랑 영상이랑 또 웹사이트에 있는 내용까지 하나의 같은 제품으로 브랜딩이 전달이 돼야 되기 때문에 그렇습니다. 두 번째 단계는 제품 레퍼런트 이미지 제작인데요. 여러분들이 제공하거나 또는 만든 이미지가 앞으로의 기준이 됩니다. 그다음은 콘티 제작인데요. 바로 영상을 만들 수도 있지만 저는이 단계를 꼭 넣는 걸 추천합니다. 왜냐면 영상 생성은 그 자체로 비용이 드는데 결과가 마음에 안 들어서 다시 만든 것도 또 비용이 드는 거거든요. 그래서 먼저 여섯 컷 정도의 만화 스토리보드로 시나리오를 확인하고 0% 15% 35% 이런 식으로 스크롤 진행 구간을 나눠서 제품이 어떻게 움직일지를 먼저 그림으로 보는 겁니다. 이렇게 하면 피드백을 훨씬 빠르고 또 싸게 제공을 할 수가 있습니다. 다음 단계는 크레딧 견적을 받는 겁니다. 이거는 익스필드를 사용할 때 특히 중요한데요. 이미지 몇 장은 비교적 부담이 적을 수 있지만 영상 생성은 모델에 따라서 비용이 꽤 달라질 수 있어요. 그래서 프롬프트 안에 영상 만들기 전에 반드시 예상 크레딧을 알려 주도록 넣어 뒀습니다. 예를 들어서 지금이 웹사이트 같은 경우는 히어로 영상 그리고 정적인 이미지 세 개 스토리보드 이런 것들이 있기 때문에 모델별로 예상 비용을 보여 주는게 중요하다고 생각을 했고요. 영상이 컨펌이 되면은 그다음에 이제 사이트를 만들어야 되는데 어 그때부터는 클러드 코드가 본격적으로 코딩 일을 합니다. 어 히어로 영상은 FFMP라는 툴을 써서 프레임 시퀀스를 추출해요. 어 예를 들면 8초짜리 영상을 100개 150개 이런 식으로 프레임들을 추출하는 겁니다. 그래야지 스크롤 위치에 따라서 프레임들을 매핑을 시킬 수 있어요. 그리고 레니스라는 툴이 있는데요. 이거는 스크롤에 따라 화면의 프레임이 부드럽게 보이도록 하는 툴입니다. 그렇게 해서 완료가 되면 로컬에서 확인을 하실 수 있습니다. 저희가 같이 살펴볼 사례는이 올빗이라고 하는 와이얼레스 이어폰 웹사이트인데요. 먼저 어떻게 동작하는지 보시죠. 스크롤을 내리게 되면 케이스의 뚜껑이 열립니다. 그리고 이어폰이 이렇게 이동을 하면서 마무리가 돼요. 그리고 왼쪽에 어 타이틀 텍스트들이 나오고요. 그리고 아래에는 스펙에 해당되는 정보들이 제공이 되고요. 적 이미지들이 사용된 거죠. 그리고 마찬가지 어 스펙 정보들이 나오고 가격 정보 마지막에 CTA까지 나오면서 마무리가 됩니다. 이게 만들어지기 위해서는 일단 핵스필드에서 가입이 되어 있어야 되고요. 어 크레딧이 어느 정도 있어야 됩니다. 어 제가 대략적으로 계산해 봤을 때이 웹사이트를 만들기까지 한 5불에서 10불 사이 정도가 들어왔거든요. 그에 따라서 어 익스피드 멤버십 가입을 하시거나 아니면 충전을 하시면 될 거 같아요. 그래서 여기 가시면 MCP의 설치 방법이 나와 있는데요. 어 우리는 클러드 코드를 쓸 거기 때문에 클로드 코드에서는 핵스필드 MCP 설치해 줘. 이렇게 물어보면은 어디에 가서 뭘 해야 되는지 다 알려 줄 거예요. 다만 어이 방식대로 하기가 어려운 분들도 있을 것 같아서 어 자세한 방법은 제가 댓글에 달아두도록 할게요. 그리고 클로드 코드를 처음 쓰시는 분들 같은 경우는 클로드 코드를 2분 안에 설치할 수 있는 영상이 있습니다. 아 그것도 댓글에 달아 둘게요. 그래서 제가이 이어폰 웹사이트를 만들기까지 있어서 어떤 스텝을 밟았는지를 보여 드릴게요. 어 처음에는 먼저이 프롬트를 붙이시면 됩니다. 여기에 클로드 코드에게 전달할 메시지, 배경적인 메시지를 전달하고 어 이걸 어떻게 할 건지 이런 것들을 얘기를 하고 있고요. 그리고 제가 앞서서 말씀드린 그 차례를 따라서 어 나에게 즉 여러분들에게 가이드를 주도록 구성이 돼 있습니다. 첫 번째는 인터뷰를 통해서 어 제품과 제품에 대한 정보 그리고 히어로의 애니메이션에 대해서 어떤 컨셉으로 하면 좋을지 또 히어로의 배경 장면은 어떤게 하면 좋을지 이런 것들 어 물어보도록 돼 있는 프롬트고요. 그다음에는 크레드 견적을 물어보는 프롬트가 있고 레퍼런스 이미지 제작 히어로 콘티 제작 그다음에 히어로 영상 제작 마지막으로 정적 이미지랑 사이트 빌드까지 이렇게 구성이 돼 있습니다. 이거를 클로드 코드에 붙이면은 이제 그다음부터 본격적으로 시작이 됩니다. 처음에 먼저 하는 질문이 브랜드 이름이랑 한 줄 소개를 알려 달라고 해요. 저는 제품을 추천해 달라고 했고 어 몇 가지 추천 제품들이 있었어요. 그리고 어 꼭 여기서 프롬트를 무조건 따를 필요는 없고요. 여러분들이 오히려이 상황에서 몇 가지 더 아이들을 달라고 하거나 아니면은 여러분들이 원하시는 정확한 지시 사항이 있으면 그거를 전달하시면 돼요. 그래서 저 같은 경우는 프리미엄 무선 이어폰을 만드는 걸로 결정을 했습니다. 그다음에 준 질문은 컨셉이나 무드를 어떻게 했 건지를 물어봤는데 좀 차분하면서 프리미엄 그런 감성을 가지고 있는 걸 만드면 좋겠다라는 생각이 들어서이 옵션을 여기다 제공을 했어요.이 스펙적인 부분도 여기서 추천을 해 주는데 여러분들이 어 가상의 제품이라면이 여기 이걸 활용하셔도 되고 아니면 특별한 어떤 정보가 있다면 제공을 하시면 돼요. 어, 다만 저는 테스트를 일단 해 보는 거라서이 그대로 따랐습니다. 가격도 마찬가지로 어, 클로드가 제시한 거를 따랐고요. 그다음에 제품의 컬러랑 웹사이트 전반적으로 활용될 그런 디자인 시스템적인 컬러 요소들을 제공을 했습니다. 아, 저는 여기서는 이제 추천 해 준 것 중에 하나를 선택을 했고요. 어, 여러분들은 어, 원하시는 색을 전달을 하시면 될 거 같아요. 그다음이 이제 가장 핵심이 되는 히어로 영상의 그 동작을 구상하는 부분인데요. 저 같은 경우는 케이스에 클로즈업이 되면서 케이스가 열리고 그다음에 이어폰이 이제 나오는 그런 스토리로 어 짜라고 했습니다. 그다음은 배경에 대한 지문인데요. 어 밝은 분위기의 스튜디오 옵션으로 이야기를 하세요. 어, 사실이 영상 연출에 대한 부분은 저도 전문가는 아니지만 경험상 추상적으로 이야기를 하는 것보다는 어, 최대한 디테일하게 얘기하면 더 도움이 되는 거 같아요. 뭐 예를 들면 석양이 있고 키친이 있는 배경 이런 식으로 하면은 더 구체적이고 랜덤한 뽑기가 되지 않을 가능성이 높아요. 단순히 그냥 밝은 분위기로 해 줘라고 하면 너무 추상적이기 때문에 또 구체성이 없기 때문에 해석이 들어갈 수밖에 없는 거거든요. 어, 결과적으로 토큰 낭비도 많아질 수 있습니다. 참고삼아서 말씀을 좀 드리고요. 어, 마지막으로는 어, 영상에 들어가면 안 되는 것들을 이제 물어봤는데 [음악] 이분 같은 경우는 전달을 안 하게 되면은 할루시네이션으로 내가 요청하지 않은 거를 넣을 수도 있거든요. 그래서 이거는 꼭 하지 말라는 것들을 넣어 주면은 도움이 많이 됩니다. 그렇게 해서 어, 제가 제공한 정보들을 토대로 한번 오버뷰를 해 주고 리뷰를 한 번 더 해 주고요. 그다음에 진행을 합니다. 진행을 했더니 어떤 어떤 것들을 만들 건지에 대한 내용과 아, 그리고 추첨 모델 예상 크레딧을 알려 줘요. 들어가야 되는 것들이 레퍼런스 이미지 처음에 한 장을 만들어야 되고 그다음에 애니메이션을 만들기 위해서 콘티를 자야 되죠. 그리고 웹사이트 아래에 들어갈 정적인 이미지 세장이 필요하고 히로 영상이 필요합니다. 그래서 일단 여기선 추천을 이렇게 나노 바나나로 해 줘서 저는 이거를 따랐었고 영상 같은 경우는 시덴스가 조금 가격이 높고 구글 비오는 심지어 더 높고 클링은 조금 적가한 모델인데 제 경험상 아무래도 시덴스나 프리미엄 모델로 갈수록 조금 더 품질이 좋은 영상이 나오더라고요. 어, 하지만 그렇다고 해서 적가 모델이라고 쓸모가 없느냐 그건 또 아니라서 어, 여러분들이 처에 있는 상황에 따라서이 모델을 정하시면 될 것 같습니다. 저는 CD로 갔고 위에는 나노바나 2 추천한 거에 대해서 따로 다른 걸 하지 말라고 얘기는 안 해서이 모델로 진행을 했어요. 그렇게 했더니 이게 레퍼런스 이미지로 그 기준이 되는 이미지가 나와줬고요. 참고로 이거는 스필드랑 연결이 된 거기 때문에 익스필드 상에이 이미지들이 저장이 돼서 클라우드상에이 이미지는 업로드가 돼 있는 상태입니다. 그 당시 이제 레퍼런스 이미지는 어 케이스 안에 이제 이어폰이 들어 있는 형태인데 지금 돌아보면은 이어폰이 보여지는 레퍼런스도 하나 있으면 좋겠다라고 얘기 얘기할 거 그래서 그랬어요. 왜냐면은 나중에 돌아보니까 이어폰이 조금씩 다르게 나올 때가 있더라고요. 다시 회고를 해 보니까 지금 이미지 레퍼런스는 하나만 만들어 주긴 하지만 필요에 따라서 더 요청을 해 보는게 더 좋을 수 있겠다라는 생각이 들었어요. 이게 처음에 세팅을 잘할수록 나중에 비용적으로 아끼는 부분들이 있거든요. 그다음으로는이 클로드 코드가 총 여섯 컷에 해당하는 스토리보드를 만들어 주게 되는데요. 제가 앞에서 대략적인 컨셉은 줬잖아요. 케이스가 열리고 이어폰이 나오고 클로즈업 되고 이런 요청은 좋지만 이제 구체적인 것들이 없고 또 타이밍까지 매핑을 해 줘야 되기 때문에 그걸 기본적으로 해 줍니다. 해 줘서 콘티를 만들어 주거든요. 근데 만약에이 전에 좀 더 자세한 콘티가 필요하다면 여러분들이 제공을 하면 되고요. 아니면 콘티를 보고서 추가나 수정을 요청해도 좋습니다. 그래서 이거는 만들어진 콘티고 지금 이제 콘티상의 내용은 케이스에 클로즈업 됐다가 이어폰이 나오고 그다음에 이어폰 하나에 이제 시각적으로 초점을 두는 그런 시퀀스로 구성이 돼 있습니다. 저는 어이 방식이 좋다고 생각이 들어서 진행을 했어요. 그래서 본격적으로 이제 영상을 만들기 시작했거든요. 그렇게 해서 나온 영상입니다. 네. 이렇게 해서 영상이 8초짜리가 나와줬고요. 근데 돌아보니 이어폰이 전자 제품이잖아요. 그래서 이게 어 분해 쇼를 했다가 다시 합체하는 그런 거를 넣으면 어떨까 하는 생각이 들었어요. 그래서이 아이디어를 제공을 했 이런 콘티를 다시 받아봤습니다. 이어폰이 나왔다가 해체쇼를 하고 다시 들어가는 걸로 했어요. 그런데 여기서 어이 요청을 했을 때 클러드 코드가 조금 걱정이 된다라는 부분을 솔직하게 공유를 했는데요. 분해를 할 때 해체를 할 때이 부품은 상상을 통해서 맞는 거기 때문에 조금 어색하게 나올 수 있다. 실패할 수 있다. 이런 이야기를 했어요. 그래서 그런 부분을 알면서 저도 일단 한번 보고 싶어서 진행을 해 봤습니다. 그렇게 해서 이런 결과물이 나왔는데요. 이게 바꿔 보니까 역시나 어색한 부분들이 좀 있더라고요. 해체가 되는게 아주 섬세하게 되는게 아니라 중간에 어 헤체가 될 때 어떤 부분은 또 이제 사라지더라고. 여기 지금 이음새 부분 같은 경우는 여기서 이제 없어졌었어요. 그리고 다시 합체가 되는 것도 좀 어색하게 되고 그래서 이거는 아쉽지만 프로덕션 레벨로는 쓰긴 어렵겠다라는 판단이 들었습니다. 그래서 이거는 사용하지 않는 걸로 하고 이제 정적인 이미지를 어 만들어서 정적인 이미지는 이제 스펙에 활용할 이미지들인 거죠. 클로즈샷이랑 어 또 생활샷 이런 것들을 어 만들었어요. 그래서이 정적인 이미지랑 영상 같은 경우는 첫 번째 안 분해쇼가 없는 그 안으로 해달라고 해서 어 진행을 했어요. 그렇게 해서 나온 결과가 이겁니다. 스코를 했을 때 이게 나와주고 이어폰이 나와주고 그다음에 정적인 이미지와 어 디테일한 정보들 마지막에 CTA까지 지금 돌아보니까이 텍스트가 좀 잘 안 보여서 텍스트를 키우거나 아니면 색깔을 다른 걸로 쓰거나 해도 좋겠다는 생각은 드네요. 그래서 이렇게 인터액티브 웹사이트가 만들어지는 거는이 웹 프롬트를 활용만 하면 되시기 때문에 크게 어렵지는 않을 거예요. 어 다만 콘티 단계에서 수정 요청이나 컨펌을 최대한 많이 디테일하게 하해 놓고 컨펌을 하는게 도움이 되는 거 같아요. 저만 해도 이거를 이미 영상을 만들어 놓고 나중에 콘티를 변경을 했잖아요. 그렇게 되다 보니까 낭비가 없지 않았습니다. 그리고 제가 앞서서 페이블이랑 오퍼스는 얼마나 차이가 날까에 대한 부분을 잠깐 언급 언급을 했었잖아요. 그래서 그 부분도 말씀을 드려 보도록 할게요. 이어폰 웹사이트 사례를 가지고 어 오퍼스랑 페이블에 동일한 조건을 한번 줘 봤어요. 지금 여기는 페이블이고 여기는 오퍼스입니다. 인증을 해 드리자면 여기 보시다시피 여기가 오퍼스로 제가 모델을 변경해 놓고 진행했고 여기는 이제 여기는 페이블로 진행을 했습니다. 그래서 똑같은 제품 스펙을 모두 제공하고 히어로에서 어떻게 동작을 하기를 원하는지도 제공을 했습니다. 동일하게요. 조건은 앞에서 저희가 만든 이어폰 웹사이트랑 같아요. 히어로 동작하는 거 그리고 배경 다 또 동일하게 했습니다. 원테이크로 가야 되는 것도 같고요. 여기서부터 나머지 부분들 이제 콘티를 만들고 레퍼런스를 만들고를 만들고 웹사이트를 만드는 것까지에 대한 부분들은 전적으로 다 맡혔어요. 오퍼스랑 회블한테 맡긴 상태로 결과물을 받아보는 식으로 비교를 했습니다. 어, 저도 이게 어, 완벽하게 비교할 수 있는 최상의 조건인지는 모르세요. 어, 만약에 지금 시청하고 계신 분들 중에 또 의견이 있으시거나 어, 페이블이랑 오퍼스를 비교하기 위한 또 다른 조건에 대한 제한이 있다면은 편하게 말씀 주세요. 일단 제가 생각할 수 있는 범위 내에서 어, 두 가지가 결과가 어떻게 차이가 나는지 비교하기 위해 이렇게 조건을 줘봤습니다. 그래서 이거는 오퍼스에서 나온 레퍼런스 이미지고요. 레퍼런스 같은 경우 제가 이번엔 두 개를 요청을 했습니다. 케이스와 이어폰이 같이 있는 거 그리고 이어폰만 있는 거 이렇게 두 가지를 받아봤고 그다음에 스토리보드 같은 경우는 오퍼스에서는 케이스가 이렇게 조금 돌아가면서 열리고 하나가 빠져나오면서 이렇게 돌아가는 형식으로 하는 스토리보드를 제공을 했고요. 그리고 마찬가지로 계속 어 저는 추가적인 의견을 하지 않고 계속 진행해 봐라라고 한 다음에 히어로랑 웹사이트까지 받아봤어요. 그래서 이게 어 나오게 된 결과물이고요. 하나가 빠져나오고 돌면서 이렇게 됩니다. 그런데 아쉬운 거는 그 전달할 때 양쪽에 모두 원테이크로 얘기를 했거든요. 그런데 일단 오퍼스에서는 원테크가 지금 되지는 않았어요. 보시다시피 여기서 이렇게 한번 끊깁니다. 끊김세. 그리고서 나머지 부분들은 크게 문제 없이 이렇게 만들어 주고요. 근데 애니메이션의 퀄리티나 어 이런 애니메이션의 퀄리티적인 부분에 있어서는 크게 뒤 뒤쳐진다는 생각은 들진 않았어요. 그럼 이제 페이블은 어떻게 나오는지 확인을 해 볼게요. 페이블에서 나온 레퍼런스 이미지고요. 케이스랑 이어버드 이어버드 그다음에 스토리버드 스토리버드 같은 경우는 어이 케이스에 접근을 하고 뚜껑이 열리면서 이제 두 개가 올라오는 그림 그리고 브랜드의 그런 타이틀은 왼쪽에 가는 형식으로 제안을 했습니다. 접근을 하고 두 개가 빠져나오고 그다음에 어 타이틀이 왼쪽에 보여지는 방식이죠. 여기 같은 경우는 끝까지 원테이크처럼 되긴 했는데 케이스가 갑자기 사라지는 건 조금 어색하긴 한 거 같아요. 케이스가 남아도 좋았지 않았을까? 그리고 나머지 정적인 이미지 그리고 맨 아래 CTA까지 제공이 됐습니다. 그리고 참고로 이런 UX UI적인이 웹사이트의 구성적인 부분에 있어서는 일단 지금까지 테스트 해 봤을 때는 페이블리랑 오퍼스의 큰 차이는 잘 모르겠어요. 시각적인 결과물에 있어서는 그렇게 심각한 차이는 느끼지 못하겠다. 이런 부분이 있었습니다. 이거는 쿠키 사례인데 보시면은 이제 쿠키가 반으로 갈라지면서 약간의 그 초콜릿이 흘러내리고 그다음에 이제 아래 컨텐츠 부분으로 내려가는 인터랙티브 웹사이트입니다. 그래서 이거를 오퍼스랑 페이블에서 테스트를 하기 위해서 프롬트를 만들었고요. 어 각각 양쪽에 돌려봤어요. 그래서 결과 한번 보여 드려 볼게요. 그래서 이거 같은 경우는 페이블로 맞는 거고요. 제가 전달한게 뭐였냐면은 디폴트 값은 한입 배움물은 쿠키인 상태에서 스크롤 내릴수록 갈라지도록 해 달라 이렇게 했거든요. 그런데 보시다시피 이게 내려가면은 없던 조각이 생기죠. 그다음에 이제 갈라집니다. 그리고 이거는 오퍼스로 맞는 거고요.게 이렇게 굳어지고요. 그다음에 정적인 이미지가 나타납니다.이 보시면은 여기도 한입 배물었던 부분이 다시 생기면서 이렇게 가고 [음악] 있거든요. 이제 또 마침 페이블이랑 오퍼스랑 그 실수를 둘 다 했어요. 어 그래 가지고 이거는 어떻게 보면 부정적인 의미에서 우회를 가리기 좀 어려운 부분이 있었다.이 실수한 부분에 대해서는 그렇게 말씀드릴 수 있을 것 같고 전반적으로이 결과물이 웹사이트의 전체적인 내용 나온 것까지 다 포함하면 둘이 그럭저럭 괜찮게 나왔다고 볼 수 있습니다. 아 그래서 어 빌이 없더라도 오퍼스로도이 작업하는 거는 그래도 쓸 만한 결과물을 만들 수 있겠구나. 이런 생각이 들었어요. 그리고 이거는 휴즈 랜딩 페이지 사례인데요. 신발 이미지가 있고 스크롤을 내리면은 클로즈업이 됐다가 컬러 파우더가 이렇게 터지는 효과로 어 진행이 됐는데요. 나머지는 동일한 구성으로 돼 있습니다. 정적 이미지 그리고 시티 어 스펙 가격 디테일 이런 식으로 돼 있죠. 이거는 어떻게 진행되는지 조금 보여 드리면은 기본 구성 같아요. 어,이 프롬트를 제공했을 때 제품 정보를 제공을 했고요. 러닝 스니커즈로 했고 어, 특징이 된 부분을 전달했고요.이 특징을 전달했더니 몇 가지 어, 브랜드 명이랑 한 줄 소개 안을 제공을 했어요. 여기서 이제 색이 강조되는 것들을 추천을 해 가지고 어, 그 부분을 컨셉으로 잡았고 네. 나머지는 따라갔습니다. 디테일한 부분이나 이런 거는 테스트를 위한 거라 어 디테일을 가진 않았고 피어로 같은 경우는 여기서 제한을 했던게 어둠 속에서 스크롤을 할수록 이제 컬러 파우더가 터진다. 아 이런 제안을 했어요. 그래서 그를 했고요. 이제 백그라운드 같은 경우는 좀 어두운 백그라운드에 이제 신발이 강조될 수 있는 거를 선택을 했습니다. 그렇게 해서 레퍼런스 이미지가 만들어졌고요. 콘티도 이렇게 나와줬는데요. 이게 이제 회전을 하면서 컬러 파우더가 이렇게 터지는 그런 컨셉으로 콘티를 잡아 주세요. 그래서 좋다라고 생각이 들었습니다. 그리고 나서 영상 제작을 들어갔는데 이게 첫 번째 영상이었어요. 그런데 보시면은 이게 돌아가다가 갑자기 뜬금프로 이제 뒤 뒤에서 뒷면이 보이다가 바로 아면이 보이는 조금 돌아가는게 부자스러운 결과가 돼 버리거든요. 한번 다시 보여 드릴게요. 네. 회전이 원테이크가 아니라 중간에 한번 이제 끊긴 것처럼 돼 버렸죠. 그래서 이거를 이제 몇 차례 수정을 좀 해 봤습니다. 지금 이런 식으로 360도가 돈게 아니라 180도만 돌게 해 봐라. 이렇게 다시 요청을 해 봤어요. 이번에는 원테이크가 됐는데 마지막 장면이 후면을 보여주면서 끝이 나 버린 거예요. 몇 차례 또 수정 요청을 해 봤지만 생각보다 잘 되지 않았습니다. 지금 이거 같은 경우도 원테크 아니라 중간 한번 끊겨 버리죠. 그래서 결과적으로 신발을 이렇게 회전시키지 않고 이제 고정하는 방식으로 어 가는 걸로 하게 됐어요. 콘티를 다시 받아보고 영상을 이제 받아봤습니다. 그다음에는 아까 이어폰과 마찬가지로 이제이 영상을 프레임으로 다 나누고 프로를 위한 매핑을 한 다음에 이렇게 결과가 나왔습니다. 그래서 오늘 영상을 이제 마무리를 해 보면요. 앞서서 말씀드린 것처럼 랜딩 페이지에서 우리는 이제 사용자를 사로잡아야 될 그 무언가가 있어야 돼요. 그런데 그 무언가를 뭘로 할 거냐? 아, 결국 실험을 해 봐야 되는데이 인터랙티브 애니메이션 같은 경우는 그 실험을 하기 위한 좋은 소재라고 생각이 듭니다. 비주얼 요소가 이제 사용자를 끌어당길 수 있는 힘이 될 수 있다고 생각이 들어요. 그리고이 인터랙티브 웹사이트에서 가장 핵심이 되는 히어로 같은 경우는 다른 부분보다도 스토리보드랑 콘티를 잘 짜는게 중요하다는 생각이 들었고요. 아, 그리고 아무래도 익스피드를 사용해 보니까 느끼는 거는 뽑기적인 성격이 없지 않은 거 같아요. 아무리 또 잘 짜도 내가 원하는 굉장히 디테일하고 섬사한 부분까지 전부 다 의도를 전달하는데 한계가 없지 않았다. 아, 이런 생각이 들었습니다. 그래서 오늘 여러 가지 사례를 한번 해 봤는데요. 여러분들이 돌려볼 수 있게 그 스펙 사항들 제품 정보랑 컨셉이랑 제가 어떤 무드로 하고 그리고 콘텐츠 어떻게 짰는지를 다 담은 프롬트를 정리를 해 줬어요. 이어폰 웹사이트, 쿠키 사례, 신발 웹사이트 사례도 있었죠. 추가적으로 이거는 자동차를 다룬 웹사이트인데요. 자동차 가다가 이렇게 멈추고 어 정보를 제공하고 이제 정적 이미지를 보여주는 사례까지 이렇게 있습니다. 그래서 이것까지 포함해서 프롬트를 정리해 뒀으니까요. 여러분들이 한번 테스트해 보시기 바랍니다. 처음에 스타터 프롬트랑 그 정보를 같이 제공하면은 이제 여러분들도 어 제가 했던이 사례들은 다 만들어 보실 수 있을 거예요. 물론 이제 익스피드가 영상을 만들고 결과물을 만드는 거는 매번 조금씩은 차이가 날 수 있어요. 그리고 한 가지 말씀드리고 싶은 거는 제가 제공해 드리는이 스타트업 프랑프트 있잖아요. 어, 이걸 가지고 첫 번째 단계로는 AI가 가이드해 준 대로 따라서 만들어 보시면 될 거 같아요. 어, 그런데 그다음에는 한 단계 레벨업을 해 보시면 좋을 것 같아요.이 프럼프트를 스터디를 해 보시고 분석도 [음악] 해 보시면 좋을 것 같습니다. 어, 저도 처음에 익스필드를 써서 이런 인터랙티브 웹사이트를 만들어 보고 싶은 마음이 있었거든요. 어 그래서 웹 서치를 하고 발견하게 된 방법이랑 프롬트를 가지고 시작을 하게 됐어요. 그런데 호기심이 생겨서 이게 어떻게 만들어지는 건지 어 원리를 알아내려고 리버스 엔지니어링을 해 보기도 하고 프롬프트를 클로드한테 줘서 어 작동 원리를 분석도 시켜 보면서 많이 배우게 된 거 같아요. 그래서 저한테 맞춤형으로 현재 프롬프트 버전까지 오게 된 것도 있었어요. 예를 들어서 프롬프트에서 처음에 제품 정보나 컨셉을 잡기 위해서 스텝바이 스텝으로 인터뷰 단계를 물어보는거나 아니면 콘티를 만드는 단계는 [음악] 제가 처음에 발견한 방식엔 없어요. 어 그런데 제가 이걸 해 보니까 필요를 느끼게 되어서 어 만들게 된 거거든요. 그럼 여러분들도 한번 해 보시는 거를 추천드립니다. 어 지금까지 긴 영상 시청해 주셔서 감사드리고요. 어, 여러분들이 바이브 코딩, 바이브 디자인, AI, 업무 자동화나 AI 관련해서 여러 주제 중에 다뤄졌으면 하는게 있다면 편하게 댓글로 남겨 주세요. 그리고 제가 오픈 카톡방을 운영하기 시작했습니다. 오늘 저희가 인터랙티브 랜딩 페이지를 해 봤잖아요. 그래서 이거는 가능하신 분들은 그 오픈 카톡방에다가 자신이 맞는 결과물이나 또 좋은 의견들이 있으면은 카톡방에서 많이 나눠주시면 좋을 것 같아요. 커뮤니티에서 서로 그렇게 활발하게 정보를 나누고 같이 성장하면 좋을 것 같습니다.