<span style="font-size: 14px; color: #181818">📍 영상 관련 주요 링크 </span> * <span style="font-size: 14px; color: #181818">수파노바 디자인 스킬 깃헙(GitHub) 주소: </span>[<span style="font-size: 14px; color: #181818">https://github.com/uxjoseph/supanova-...</span>](https://www.youtube.com/redirect?event=video_description&redir_token=QUM4Zm9rUlFkVDhad2c3QW43aU1Tb0N2MTBkbnxBR3JiS2FreUhIdlRCa19DU096LVBPREpPX3B0Wmw0c1l2Um1FQzlLRXFIb2IxVVVISFZjWkpodnVQU2stSjZCQnlNRVJ2QXVGU2lXWGVVUkV4UGhUdVNmMDZnMmJtVzlBMm1R&q=https%3A%2F%2Fgithub.com%2Fuxjoseph%2Fsupanova-design-skill&v=2sNQ0Nvngdc) * <span style="font-size: 14px; color: #181818">영상 속 웹페이지 완성본: </span>[<span style="font-size: 14px; color: #181818">https://jolly-unicorn-ddbc7c.netlify....</span>](https://www.youtube.com/redirect?event=video_description&redir_token=QUM4Zm9rUWh6eXdmYzV2RGxpUFhXSDQzLUlSR3xBR3JiS2FtTGNrcWw0ZE5oNV9wOFJ1QWxaNXFyWm1kQ1dnOEkyYTV0YjhNNjBtT3g0MWJYSDRRZ0VxYVFyQjlmcUFkVjBldWs0akpyS0F3RUNRMEFCT0dHUllFT2xPNFJsQU15&q=https%3A%2F%2Fjolly-unicorn-ddbc7c.netlify.app%2F&v=2sNQ0Nvngdc) * <span style="font-size: 14px; color: #181818">바이브 코딩의 완성, 디자인은 수파노바: 디자인 고민 없이 200여 개의 프리미엄 템플릿으로 고퀄리티 웹사이트를 즉시 완성해 보세요! </span>[<span style="font-size: 14px; color: #181818">https://www.supanova.dev/</span>](https://www.youtube.com/redirect?event=video_description&redir_token=QUM4Zm9rUnR3WE5zNEtsTXBBeC1iVUp5QTJMbXxBR3JiS2FuaGZHQ2F4SGhyVmpNZ2FKTlAtRk5hd09keGttQndyRnRiMU9CTWtyNld1UGQ1VGN1Y25mVGliUWMtdWYxN3UwVWdQaEVyM0F5WFFKUFpmXzJ2NHYtME5zMWxvcmpF&q=https%3A%2F%2Fwww.supanova.dev%2F&v=2sNQ0Nvngdc) <span style="font-size: 14px; color: #181818"> 🤖 클로드 코드로 디자인 퀄리티 높이기: 수파노바 디자인 스킬 활용법 이번 영상에서는 클로드 코드를 활용해 디자인 완성도를 극대화하는 방법을 소개합니다. AI 특유의 부자연스러운 디자인인 AI Slop을 극복하기 위해 제작된 수파노바 디자인 스킬과 제미나이의 동영상 생성 기능을 연동하는 과정을 담았습니다. 애니메이션이 적용된 고퀄리티 랜딩 페이지 제작부터 Netlify를 통한 실시간 배포까지, 코딩 초보자도 전문가 수준의 결과물을 만드는 실전 튜토리얼입니다. </span> <span style="font-size: 14px; color: #181818">🔑 핵심 요점 (Key Points)</span> <span style="font-size: 14px; color: #181818"> 1\. AI 특유의 촌스러운 디자인\(AI Slop\)을 벗어나기 위해 한국형 폰트와 아이콘이 최적화된 수파노바 디자인 스킬을 사용합니다\. </span> <span style="font-size: 14px; color: #181818">2\. 제미나이의 비디오 생성 기능을 활용하여 웹사이트 상단에 역동적인 히어로 섹션 애니메이션을 추가할 수 있습니다\. </span> <span style="font-size: 14px; color: #181818">3\. 클로드 코드가 생성한 결과물을 Netlify Drop에 드래그 앤 드롭하는 것만으로 누구나 무료로 웹사이트 배포가 가능합니다\.</span> <span style="font-size: 14px; color: #181818">📝 세부 내용 요약 (Section Summaries) </span> <span style="font-size: 14px; color: #181818">■ AI 디자인의 한계 극복과 스킬 준비 클로드 코드는 기능적으로 뛰어나지만 디자인 면에서 소위 AI Slop이라 불리는 부자연스러운 결과물을 낼 때가 많습니다. 이를 보완하기 위해 해외의 taste-skill을 한국 실정에 맞게 수정하여 프리텐다드 폰트와 Iconify를 적용한 수파노바 디자인 스킬을 활용합니다. </span> <span style="font-size: 14px; color: #181818">■ 제미나이 동영상 생성을 통한 시각적 강화 단순한 이미지를 넘어 제미나이 프로 모델을 통해 16:9 비율의 시네마틱한 영상을 생성합니다. 핀터레스트 등에서 찾은 레퍼런스 이미지를 제공하여 AI가 의도에 맞는 고퀄리티 영상을 제작하도록 유도하고, 이를 웹사이트의 배경 요소로 삽입합니다. </span> <span style="font-size: 14px; color: #181818">■ 클로드 코드와 외부 템플릿의 결합 수파노바에서 제공하는 200여 개의 디자인 템플릿 HTML 코드를 복사하여 클로드 코드에 입력합니다. AI는 이 코드와 앞서 만든 영상을 결합하여 다크모드 기반의 세련된 랜딩 페이지를 자동으로 구성하며, 스크롤에 반응하는 부드러운 애니메이션까지 구현합니다. </span> <span style="font-size: 14px; color: #181818">■ 실시간 배포 및 최종 최적화 완성된 결과물은 클로드 코드를 통해 즉시 zip 파일로 압축합니다. 별도의 복잡한 서버 설정 없이 Netlify Drop 플랫폼을 활용해 압축 파일을 업로드하면 즉시 고유 URL이 생성되며 전 세계 어디서든 접속 가능한 라이브 웹사이트가 완성됩니다.</span> <span style="font-size: 14px; color: #181818">[조쉬의 뉴스레터 및 소셜 미디어] </span> <span style="font-size: 14px; color: #181818">🗞️ 조쉬의 뉴스레터 (1만명 이상 구독 중) 뉴스레터를 구독하고, 가장 빨리 AI 인사이트를 받아보세요! </span>[<span style="font-size: 14px; color: #181818">https://maily.so/josh</span>](https://www.youtube.com/redirect?event=video_description&redir_token=QUM4Zm9rUjhScGRQd3FvdDczaWhSVVVxb3czdXxBR3JiS2FrNnpEWXZub3NHbFRPNVd3dFlXeWltUy03S3UydmZRYUtwcFZrYkFvMWh3Q3liRmNZUHVUMHYxdlhNZHBrMmlySDdJY2Q3VXlTOW15TG9NSWw4MVVZNTVybWd5YlA1&q=https%3A%2F%2Fmaily.so%2Fjosh&v=2sNQ0Nvngdc)<span style="font-size: 14px; color: #181818"> </span> <span style="font-size: 14px; color: #181818">🔗 소셜 미디어 (도합 3만 이상) </span> <span style="font-size: 14px; color: #181818">Threads: </span>[<span style="font-size: 14px; color: #181818">https://www.threads.com/@joshproductl...</span>](https://www.youtube.com/redirect?event=video_description&redir_token=QUM4Zm9rU1d0QW1pYV9FckdfdFRhX1FLbmlneHxBR3JiS2FtX043U3p0M29RZTB5VFFZZ2VPdDcxSktpbXZxRlJFQlEydTFaUDRnVVFzeEhQUFhTWEhjS0wyd1dZdFNKNldMXzRNQk52OG9jTkVsSjVjTWV1UXFDYjNxTURSWGx3&q=https%3A%2F%2Fwww.threads.com%2F%40joshproductletter&v=2sNQ0Nvngdc) <span style="font-size: 14px; color: #181818">LinkedIn: </span>[<span style="font-size: 14px; color: #181818">  / uxjosh  </span>](https://www.youtube.com/redirect?event=video_description&redir_token=QUM4Zm9rUUpFQXJRZWxBbVBsaUI1ejhibzJDM3xBR3JiS2FrOEIzNnAzYlN0dmduZEc4Z2VrWWRtekFqMDhoVmFQdlc3bnM0bWd4RnhmazFNcmZlejg0NDl5YTV3Y1JHcEpnYUs0LVRwNTdPSV9zZ0RRS1JESnVudnRGcl9CajRy&q=https%3A%2F%2Fwww.linkedin.com%2Fin%2Fuxjosh%2F&v=2sNQ0Nvngdc)<span style="font-size: 14px; color: #181818"> </span> <span style="font-size: 14px; color: #181818">🚀 ASC 모집 (연간 멤버십 프로그램) 조쉬의 '실행' 중심 연간 멤버십 프로그램 모집 정보를 확인하세요! </span>[<span style="font-size: 14px; color: #181818">https://www.solopreneur.co.kr/</span>](https://www.youtube.com/redirect?event=video_description&redir_token=QUM4Zm9rUjBaMndVNE11VGpoMXdyODRYMnUxOHxBR3JiS2FtV2hjX2xQd3FueFp6dWFmak95RGdCTDZ3M2cycEljSmowV0FGcE14SjdvWG1jS0Rma1RHaXpBNGZVZnozNWhNMWkzb3JSWXlHQVZyVGdIM0JqV3YtbkV3cUJKeXhw&q=https%3A%2F%2Fwww.solopreneur.co.kr%2F&v=2sNQ0Nvngdc)