AI 자동 완성! Fable 5로 수상 웹사이트 뚝딱 만드는 비법 공개 (클로드 코드)

AI로 멋진 웹사이트 만들기! (중학생 눈높이 설명)

이 영상에서는 AI를 이용해서 마치 전문가가 만든 것처럼 움직이는 웹사이트를 만드는 방법을 알려줄 거야. 피그마, 프레이머, 웹플로우 같은 어려운 툴은 전혀 안 쓰고, 그냥 AI랑 대화하듯이 만들 수 있어! 어떤 AI를 써도 상관없어. 제미나이로 해봤는데, 프롬프트 하나 딱 넣었더니 똑같은 웹사이트가 뚝딱 만들어지더라구.

핵심은 이거야:

• AI한테 시키면 다 돼: 이미지, 영상, 심지어 글씨체까지 AI가 다 만들어줘.
• 프롬프트가 마법: AI한테 뭘 원하는지 정확하게 말해주면, 알아서 척척 만들어준다는 거지.
• 따라 하면 쉬워: 영상에서 알려주는 대로 따라 하면 누구나 멋진 웹사이트를 만들 수 있어.

1단계: 참고할 만한 웹사이트 찾기

먼저 만들고 싶은 웹사이트랑 비슷한 걸 찾아야겠지? 영상에서는 이미 만들어진 웹사이트를 참고해서 스크린샷을 찍었어.

• 스크린샷 찍기: 참고할 웹사이트를 화면에 꽉 차게 띄워놓고 스크린샷을 찍어.
• AI한테 이미지 만들기 요청: 찍은 스크린샷을 AI한테 보여주고, "이런 느낌인데, 여자 대신 남자 이미지를 만들어줘!" 라고 시키는 거야. (이때, 글씨나 버튼 같은 건 빼달라고 하면 더 좋아!)

2단계: 이미지에 생명 불어넣기 (영상 만들기)

AI가 만들어준 이미지를 그냥 쓰기엔 좀 아쉽잖아? 이걸 움직이는 영상으로 만들어 볼 거야.

• AI한테 영상 만들기 요청: "이 이미지를 아까 보여준 영상처럼 똑같이 움직이게 만들어줘!" 라고 시키면 돼. 이때, 영상 길이를 맞춰주는 게 중요해.

3단계: 웹사이트 만들기 시작!

이제 AI가 만들어준 이미지와 영상을 가지고 웹사이트를 만들어 볼 시간이야.

• AI 코드 에디터 사용: 클로드 같은 AI 코드 에디터를 열어서 새 프로젝트를 시작해.
• "히어로 섹션" 만들기: 웹사이트 맨 위에 나오는 부분을 "히어로 섹션"이라고 하는데, 이걸 만들어 달라고 AI한테 시키는 거야. 이때, 스크롤할 때 영상이 자연스럽게 보이도록 높이를 설정해주는 게 중요해.
• 글씨체 바꾸기: 마음에 드는 글씨체가 있다면 AI한테 "이 글씨체로 바꿔줘!" 라고 시키면 돼.
• 영상 스크롤 효과 넣기: 스크롤할 때 영상이 부드럽게 재생되도록 하는 것도 AI한테 시킬 수 있어. 마치 영상이 웹사이트에 녹아드는 것처럼 말이지!
• 콘텐츠 배치 조정: 영상 위에 글씨나 버튼 같은 콘텐츠가 잘 보이도록 위치를 조정해달라고 AI한테 말하면 돼.

4단계: 두 번째 섹션 만들기 (상품 그리드)

이번에는 상품들이 가로로 나열되는 섹션을 만들어 볼 거야.

• AI한테 그리드 만들기 요청: "상품들이 가로로 3개씩 보이도록 그리드를 만들어줘. 각 상품에는 이미지, 이름, 가격을 넣을 거야." 라고 시키면 돼.
• 상품 정보 전달: 상품 이름, 가격, 이미지 링크 같은 정보를 AI한테 알려주면 알아서 채워줄 거야.

5단계: 두 번째 영상 만들기 & 웹사이트에 적용

첫 번째 섹션처럼 두 번째 섹션에도 움직이는 영상을 넣을 거야.

• 영상 프레임 복사 & 수정: 첫 번째 영상의 한 장면을 복사해서 AI한테 보여주고, "이 영상처럼 만들되, 손 모양을 남자 손으로 바꿔줘!" 라고 시키는 거야.
• 영상 애니메이션 만들기: 마찬가지로, "이 이미지를 아까 영상처럼 똑같이 움직이게 만들어줘!" 라고 시키면 돼.
• 웹사이트에 영상 삽입: 만들어진 영상을 웹사이트에 넣고, 영상이 가운데서부터 펼쳐지면서 부드럽게 재생되도록 설정하는 거야.

마무리

어때? AI를 이용하니까 디자인 실력이 없어도 멋진 웹사이트를 만들 수 있겠지?

• 모든 걸 AI로 해결: 이미지, 영상, 글씨체, 디자인 요소까지 전부 AI가 만들어줬어.
• Figma 같은 툴 필요 없어: 복잡한 디자인 툴 없이도 가능해.
• 더 배우고 싶다면: motionsize.ai 에 가면 영상에서 사용된 모든 파일과 프롬프트를 볼 수 있어. 어떻게 움직이는 효과를 넣고, 메뉴를 만들고 하는지 자세히 배울 수 있을 거야!

이제 너도 AI와 함께 나만의 멋진 웹사이트를 만들어보자!