바이브 디자인으로 원하는 디자인을 자유롭게 설명하고 생성 버튼을 [음악] 누르면 디자인이 완성되고 제공하는 편집 도구를 통해 자유롭게 수정합니다. [음악] 수정한 사이트는 코드로 바로 복사한 뒤 바이브 코딩으로 넘어가서 실제로 동장하는 코드로 변경되도록 요청해서 사이트를 한 순간에 완성합니다. [음악] 완성한 사이트를 파일로 다운받은 뒤 드래그 앤드롭브로 추가만 하면 어디서든 접속할 수 있는 주소와 함께 나만의 사이트가 완성됩니다. 오늘 살펴볼 도구 구글의 스티치와 [음악] 앤트로픽의 클로드 코드입니다.이 영상에서는 아무것도 모르는 초보자를 대상으로 처음부터 쉽게 따라하며 완성할 [음악] 수 있도록 준비했어요. 시작하기 전에 이와 같은 영상을 앞으로도 기대한다면 영상에 좋아요와 응원 댓글도 꼭 부탁드립니다. 바로 시작할게요. 먼저 바이브 디자인부터 시작하기 위해 구글 스티치에 방문하세요. 영상 아래 관련 링크를 모두 남겨 놓았으니 필요하면 자유롭게 참고하시기 바랄게요. 오른쪽 상단에 시작하기 버튼을 클릭하세요. 구글 계정을 통해 무료로 시작할 수 있고 로그인 후 화면으로 바로 넘어갈게요. 가장 먼저 왼편에 나온 예제 이미지들을 확인할 수 있어요. 아무 이미지나 클릭해 보세요. 현재 오른편에 나온이 디자인을 생성하기 위해 왼편에 어떤 프롬프트가 사용되었는지 확인할 수 있어요. 해당 프롬프트를 번역해서 한국어로 자유롭게 확인하세요. 그러면 보통 어떤 방식으로 프롬프트를 작성하면 어떤 디자인이 나오는지 감을 잡을 수 있어요. 뒤로 나가기 위해 왼쪽 상단에 메뉴 아이콘을 클릭한 뒤 모든 프로젝트로 이동을 클릭하세요.이 영상에서 함께 만들어 볼 예제는 유튜브 채널을 홍보하는 간단한 원페이지입니다. 예제로 작성해 볼게요. 그린코끼이라는 AI 교육 유튜브 채널을 홍보하는 원페이지 웹사이트를 만들어 줘. 목적은 사람들이 그린코끼리 유튜브 채널에 방문하게 만드는 거야. 테마 분위기는 업로드한 이미지를 참고해 줘. 페이지 전체를 한국어 텍스트로 구성하고 히어로 섹션에는 한시간을 10시간처럼 AI 그냥 시작해라고 헤드라인을 구성해 줘. 가능하면 만들고 싶은 디자인에 대한 충분한 정보를 제공하고 저는 여기 언급한 웹사이트 테마 분위기를 위해 단순히 유튜브 채널을 캡처한 이미지를 업로드할게요. 이미지를 업로드해서 AI가 참고하도록 하는 것이 원하는 디자인의 방향대로 생성하는 가장 효율적인 방법 중 하나라고 생각합니다. 그래서 핀터레스트를 통해 원하는 디자인을 검색해서 참고할 수 있는 사이트 앱이 있는지 자유롭게 찾아보거나 드리블을 통해 다양한 디자인을 참고해 보시기 바랄게요. 다시 돌아와서 왼쪽에 플러스 아이콘을 클릭하세요. 여기 보면 웹사이트 주소 옵션이 있고 만약 참고하고 싶은 사이트 이미지가 아니라 주소를 알고 있다면 클릭한 뒤곳에 입력해도 되겠습니다. 저는 없기 때문에 X 아이콘을 클릭해서 취소할게요. 다시 플러스 아이콘을 클릭해 보면 프롬프트 개선 옵션이 있어요. 클릭하세요. 프롬프트가 영어로 변경되었지만 번역해 보면 기존에 작성했던 내용은 그대로 포함하면서 구체적으로 개선이 되었기 때문에 더 괜찮다는 생각이 듭니다. 필요에 따라서 적용해 보면 되겠고 여기 앱과 웹 중에서는 현재 웹 디자인을 원하기에 웹을 클릭할게요. 오른편에는 모델 옵션이 있어요. 클릭해 보면 총네 가지 옵션이 나와요. 여기 크게 보면 제미나이 3.0 플래시 모델과 재미나이 3.1 프로 모델 중 선택이 가능해요. 저는 프로 모델을 선택해서 진행할게요. 모두 완료되었다면 생성 버튼을 클릭하세요. 결과적으로 페이지 디자인이 자동으로 생성되었어요. 요청한 대로 유튜브 채널 디자인 느낌을 반영해서 사이트 디자인이 완성된 것을 확인할 수 있어요. 참고로 현재 화면 이동은 키보드에서 스페이스바를 누른 채로 이동하면 자유롭게 이동할 수 있어요. 요소들도 원하는 곳에 드래그 앤드롭으로 자유롭게 배치할 수 있으니 참고하세요. 확대 및 축소는 키보드에서 커맨드 또는 컨트롤을 누른 채로 마우스 휠을 조절해서 가능하고 오른쪽 하단에 줌 옵션을 통해서도 가능해요. 그리고 여기 보면 디자인 시스템이라고 불리는 요소가 함께 생성된 것을 볼 수 있어요. 디자인 시스템이란 지금이 페이지가 어떤 색상과 폰트를 기준으로 만들어졌는지 즉 디자인의 기준표 같은 거예요.이 디자인 시스템의 역할은 앞으로이 디자인을 편집하거나 새로운 페이지를 추가로 만들 때 항상 같은 디자인 스타일이 유지되도록 잡아주는 역할을 해요. 만약 현재 디자인 시스템을 수정하고 싶다면 오른쪽 마우스 버튼을 클릭한 뒤 수정 옵션을 클릭하세요. 여기서 색상과 글꼴을 자유롭게 변경하면 되고 변경 후에는 저장을 하거나 저장 및 적용 버튼을 클릭하면 되겠습니다. 저장 및 적용 버튼을 클릭하면 디자인 시스템이 업데이트 되고 동시에 디자인 시스템에 연결된 페이지 디자인에도 모두 자동으로 적용이 됩니다. 디자인 시스템이 디자인과 연결되어 있는지 확인해 보고 싶다면 오른쪽 마우스 버튼을 클릭하고 연결 표시를 클릭하세요. 그러면 이렇게 연결된 디자인을 확인할 수 있어요. 참고로 디자인 시스템이 여기서 사라지더라도 오른쪽 메뉴 중 디자인 시스템을 클릭해서 해당 디자인 시스템을 확인할 수 있어요. 또한 해당 디자인 시스템을 기반으로 새로운 디자인을 추가로 생성할 때도 아래 프롬프트 입력창에서 디자인 시스템을 선택한 뒤 생성 교청 할 수 있다는 점 참고하세요. 이제 페이지 디자인을 살펴볼게요. AI 기능으로 빠르게 편집하는 방법을 바로 알려 드릴게요. 만약 현재 색상이 마음에 들지 않고 여러 다양한 색상으로 적용된 버전을 한 번에 확인하고 싶다면 페이지 디자인을 클릭하세요. 상단에 생성 버튼을 클릭한 뒤 변형을 클릭하세요. 오른쪽 편집창을 보면 우선 몇 개를 생성하고 싶은지 옵션 수가 나오고 세 개 그대로 유지할게요. 광고 소재 범위에는 총 세 가지 옵션이 있어요. 미세 조정 같은 경우는 현재 디자인을 거의 유지한 상태로 미세하게만 변경해서 보고 싶은 경우에 선택하고 탐색은 중간 스타일 바꾸기는 완전 다른 느낌으로 변형해 보고 싶은 경우로 쉽게 이해하면 되겠습니다. 맞춤 안내는 변형할 때 요청 사항이 있다면 입력해서 반영되도록 요청할 수 있어요. 마지막 아래 변경 요소에는 어떤 요소를 변형하고 싶은지 선택할 수 있어요. 원하면 한 번에 여러 요소를 선택해서 변형할 수도 있지만 저는 색상만 먼저 선택한 뒤 아래 버튼을 클릭해서 진행할게요. 결과적으로 모든 정보는 그대로 유지되고 색상만 변경된 것을 확인할 수 있어요. 여기서 원하는 색상이 적용된 디자인이 있다면 자유롭게 선택해서 편집을 이어나가면 되겠습니다. 저는 다시 지울게요. 이번에는 레이아웃이 다양하게 적용된 변형 버전을 생성할게요. 페이지 디자인을 클릭한 뒤 상단에 생성에서 변형을 클릭하세요. 요소 중 레이아웃을 클릭하세요. 변형 생성하기 버튼을 클릭할게요. 결과적으로 다양한 레이아웃이 적용된 디자인 버전들을 확인할 수 있어요. 이렇게 변형 기능을 활용하면 레이아웃, 색상, 폰트, 콘텐츠, 이미지 등 다양한 요소를 변경할 수 있어요. 저는 지금까지 진행한 방식처럼 한 번에 하나의 요소만 선택해서 진행하는 방식을 추천해요. 이렇게 하면 각각의 변형이 디자인에 어떤 영향을 주는지 명확하게 비교할 수 있고 내가 원하는 방향을 훨씬 더 쉽게 결정할 수 있기 때문입니다. 기존 디자인만 남기고 나머지는 삭제할게요. 여기까지 색상과 레이아웃을 빠르게 결정했다면 이제 나머지 부분들을 자세하게 편집해 볼게요. 디자인을 클릭하고 상단에서 모디파이 탭에서 수정을 클릭하세요. 해당 페이지가 편집 모드로 바뀌고 마우스를 가져다 놓았을 때 수정이 가능한 부분은 표시가 되는 것을 알 수 있어요. 텍스트 같은 경우는 단순히 클릭한 뒤 바로 직관적으로 편집이 가능합니다. 텍스트를 다른 텍스트로 변경하는 것 외에 텍스트 크기나 색상 등 편집하고 싶은 요소가 있다면 AI 기반 편집을 선택하세요. 아래 프롬프트 편집창에 현재 디자인 페이지와 선택한 요소를 확인할 수 있어요. 그러면 예를 들어 폰트 사이즈를 조금 더 키우고 색상은 모두 검정색으로 변경하세요라고 입력할 수 있어요. 입력했다면 생성해 볼게요. 결과적으로 해당 부분이 요청대로 편집된 세 페이지 디자인이 생성되었어요. 이번에는 이미지를 편집해 볼게요. 상단에 모디파이 버튼을 클릭하고 수정을 클릭하세요. 이미지를 선택하면 먼저 주소 입력 옵션이 있어요. 클릭해 보면 주소 입력창이 나오게 됩니다. 만약 추가할 이미지가 이미 다른 곳에 업로드 되어 있다면 주소만 가지고 와서 추가할 수도 있어요. 창을 닫아 주세요. 다시 이미지를 클릭하고 AI 기반 편집을 클릭하세요. 아래 프롬프트 입력창에서 선택이 되었고 이미지를 AI 기반으로 새로 생성해서 적용하고 싶다면 이렇게 입력한 뒤 생성 버튼을 클릭해 보세요. 스마트 한 코끼리가 AI 도구를 다루는 장면을 일러스트 스타일로 생성하세요. 결과적으로 요청한 이미지가 생성되었고 동시에 요청한 이미지에도 적용이 되었어요. 이번에는 기존에 준비한 이미지가 있다면이 디자인에 적용하는 방법도 알려 드릴게요. 예제로 로고 이미지를 추가할게요. 아까와 같이 페이지를 클릭하고 상단에 모디파이에서 수정을 클릭하세요. 로고 부분을 클릭한 뒤 AI 기반 편집을 선택하세요. 준비한 로고 이미지를 프롬프트 창에 드래그 앤드롭브로 추가하세요. 트럼프트로는 선택한 요소를 업로드한 그린 코끼리 로고 PNG로 변경해 줘라고 입력해서 실행할게요. 결과적으로 외부 이미지를 가져와서 성공적으로 추가했어요. 마지막으로 한 번에 여러 요소를 편집할 수 있는 주석으로 편집하는 방법을 알려 드릴게요. 페이지를 선택하고 상단에 모디파이에서 주석 작성을 클릭하세요. 주석 작성은 원하는 곳에 드래그를 통해 마크한 뒤 원하는 편집 사항을 입력할 수 있어요. 예를 들어 특정 부분 폰트를 선택한 뒤 색상을 초록색으로 변경해 줘. 불필요한 요소를 마크한 뒤 이소 전체를 제거해 주와 같이 수정하고 싶은 모든 부분에 주석을 달아서 편집 사항을 입력하고 아래 적용 버튼을 클릭해서 적용할 수 있어요. 필요하면 자유롭게 진행하면 되고 저는 취소 버튼을 클릭해서 창을 닫을게요. 이번에는 완성한 디자인을 토대로 프로토타입을 만들어 볼게요. 참고로 현재이 프로젝트는 원