바이브코딩51 AI가 만든 코드를 내 프로젝트에 맞게 바꾸는 요청법 목차1. 왜 그대로 붙이면 문제가 생길까2. 프로젝트 맞춤 요청의 핵심 정보3. 실전 변환 프롬프트 작성법4. 안정적으로 반영하는 적용 순서5. 자주 묻는 질문1. 왜 그대로 붙이면 문제가 생길까AI가 만들어준 코드는 출발점으로 훌륭하지만, 내 프로젝트에 바로 붙이면 충돌이 생기기 쉽습니다. 이유는 간단합니다. AI가 생성한 코드는 보통 일반적인 구조를 기준으로 하고, 실제 프로젝트는 팀 규칙, 폴더 구조, 상태 관리 방식, 공통 컴포넌트 정책이 이미 정해져 있기 때문입니다. 겉보기에는 동작해도 장기적으로 유지보수 비용이 커질 수 있습니다.예를 들어 동일한 기능이라도 우리 팀은 `fetch` 대신 전역 API 클라이언트를 쓰고, 에러 처리는 공통 핸들러를 거쳐야 할 수 있습니다. 그런데 이런 규칙을 전달.. 2026. 5. 18. [바이브코딩 HTML 웹앱 20일 챌린지] 19일차 - GitHub Pages로 웹앱 배포하기 19일차에서는 완성한 웹앱을 GitHub Pages로 배포합니다. 이제 로컬에서만 보던 프로젝트를 링크로 공유할 수 있게 되며, "만드는 단계"에서 "보여주는 단계"로 전환되는 중요한 시점입니다.초보자에게 배포는 어렵게 느껴질 수 있지만, 저장소 생성 → 파일 업로드 → Pages 설정 순서만 지키면 안정적으로 완료할 수 있습니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 GitHub 저장소를 만들고 웹앱 파일을 업로드한 뒤, GitHub Pages를 활성화해 실제 접속 가능한 배포 URL을 얻는 것입니다. 이 링크를 통해 다른 사람도 내 .. 2026. 5. 17. 입력창 값이 제대로 가져와지지 않을 때 점검할 것 목차1. 입력값이 비어 보이는 대표 상황2. 먼저 확인할 핵심 체크리스트3. 단계별 디버깅 순서4. 입력 처리 안정화 습관5. 자주 묻는 질문1. 입력값이 비어 보이는 대표 상황폼 기능을 만들 때 "분명 입력했는데 값이 안 들어온다"는 문제는 정말 자주 발생합니다. 콘솔로 찍으면 빈 문자열이 나오거나, 이전 값이 남아 있거나, 아예 undefined가 나오는 식입니다. 이때 대부분은 입력창 자체 문제가 아니라 이벤트 시점이나 요소 선택 방식에서 실수가 생긴 경우가 많습니다.핵심은 어떤 요소에서, 어떤 시점에, 어떤 속성으로 값을 읽는지를 명확히 분리해 보는 것입니다. 입력창 값을 다룰 때는 value, textContent, innerText를 혼동하기 쉽고, submit 이벤트 기본 동작 때문에 값 확.. 2026. 5. 17. 원하는 디자인이 안 나올 때 프롬프트를 수정하는 방법 목차1. 왜 결과가 마음에 들지 않을까2. 디자인 프롬프트 수정의 핵심 원칙3. 실패한 요청을 개선하는 실전 예시4. 반복 수정 시간을 줄이는 체크리스트5. 자주 묻는 질문1. 왜 결과가 마음에 들지 않을까AI에게 디자인을 요청했는데 결과가 밋밋하거나 의도와 다르게 나오는 이유는 대개 비슷합니다. “깔끔하게 만들어줘”, “예쁘게 바꿔줘”처럼 추상적인 표현만 있고, 구체적인 기준이 없기 때문입니다. AI는 이런 요청을 받으면 평균적인 안전한 결과를 선택하는 경향이 있습니다. 즉, 실패의 원인은 모델 성능 부족이 아니라 요구 조건의 모호함인 경우가 많습니다.특히 웹 디자인에서는 레이아웃, 타이포그래피, 컬러, 컴포넌트 밀도, 여백 리듬 같은 요소가 동시에 작동합니다. 그런데 요청에서 이 축들을 분리하지 않으.. 2026. 5. 17. [바이브코딩 HTML 웹앱 20일 챌린지] 18일차 - 내가 만든 앱에 이름 붙이기 18일차에서는 지금까지 만든 웹앱에 이름과 소개 문구를 붙입니다. 기능 완성만큼 중요한 것이 정체성 정리이고, 앱의 톤과 목적을 한 문장으로 설명하는 작업이 브랜딩의 시작입니다.오늘은 AI와 함께 이름 후보를 뽑고, 헤더 문구와 버튼 텍스트를 다듬어 "내가 만든 앱"이라는 느낌을 더 분명하게 만드는 데 집중합니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 앱 이름 선정과 UI 문구 정리입니다. 예를 들어 앱 타이틀, 서브 설명, 빈 목록 안내 문구, 버튼 라벨을 통일된 톤으로 바꾸면 같은 기능이라도 훨씬 완성도 있게 보입니다.2. AI에게 .. 2026. 5. 16. 체크박스를 눌렀는데 완료 상태가 바뀌지 않을 때 목차1. 체크박스는 눌리는데 왜 상태가 안 바뀔까2. 가장 자주 생기는 원인 5가지3. 단계별 점검과 수정 방법4. 상태 동기화를 안정화하는 습관5. 자주 묻는 질문1. 체크박스는 눌리는데 왜 상태가 안 바뀔까할 일 목록을 만들 때 가장 흔한 문제 중 하나가 "체크박스는 클릭되는데 완료 상태가 반영되지 않는" 상황입니다. 화면에서 체크가 들어간 것처럼 보여도, 실제 데이터 배열은 그대로인 경우가 많고, 반대로 데이터는 바뀌었는데 화면이 다시 렌더링되지 않아 변화가 없는 것처럼 보일 때도 있습니다.결국 이 문제는 체크박스 자체보다 이벤트 처리, 데이터 업데이트, 화면 렌더링 세 단계 중 어디가 끊겼는지 찾는 작업입니다. 이 흐름을 순서대로 점검하면 대부분 빠르게 해결됩니다. 감으로 고치기보다 단계별로 검증.. 2026. 5. 16. 이전 1 2 3 4 5 ··· 9 다음
