Tag 바이브코딩

바이브코딩 5편｜AI로 반응형 홈페이지 만들기, PC·모바일 최적화 방법

바이브코딩 5편｜AI로 반응형 홈페이지 만들기, PC·모바일 최적화 방법 AI로 홈페이지를 만들고 디자인까지 수정했다면 이제 마지막으로 확인해야 할 중요한 부분이 있습니다. 바로 스마트폰에서도 홈페이지가 제대로 보이는가? 하는 문제입니다. PC에서는 멋지게 보이던 홈페이지가 스마트폰에서는 제목이 잘리고, 메뉴가 겹치고, 이미지가 화면 밖으로 튀어나오는…

바이브코딩 4편｜AI로 만든 홈페이지 디자인 수정하는 방법

바이브코딩 4편｜AI로 만든 홈페이지 디자인 수정하기, 초보자 실전 가이드 AI에게 홈페이지를 만들어 달라고 요청했더니 불과 몇 분 만에 제법 그럴듯한 웹사이트가 완성되었습니다. 그런데 자세히 살펴보니 아쉬운 부분이 보입니다. 첫 화면의 글씨가 너무 작고, 제품 이미지도 마음에 들지 않습니다. 메뉴가 답답해…

바이브코딩 실전, AI로 홈페이지 직접 만드는 방법

바이브코딩 3편｜AI로 홈페이지 직접 만들어보기 바이브코딩 1편에서는 Vibe Coding이 무엇인지 알아봤고, 2편에서는 AI에게 홈페이지 제작을 어떻게 요청해야 하는지 살펴봤습니다. 이번 3편에서는 드디어 실제로 홈페이지를 만들어보겠습니다. 코딩을 잘 모르는 사람도 이해할 수 있도록 복잡한 기능은 잠시 미뤄두고, AI에게 홈페이지를 요청하고 결과물을…

바이브코딩 2편, AI에게 홈페이지 제작을 제대로 요청하는 방법

.blogwide-vibe-coding { max-width: 900px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Arial, sans-serif; line-height: 1.85; color: #222; } .blogwide-vibe-coding h1 { font-size: 34px; line-height: 1.35; margin-bottom: 22px; } .blogwide-vibe-coding h2 { margin-top: 48px; padding: 13px 18px; background: #f2f6ff;…