2026/04 2

[바이브코딩 HTML 웹앱 20일 챌린지] 2일차 - 브라우저에 첫 화면 띄우기

2일차에서는 드디어 브라우저에 첫 화면을 띄워봅니다. 1일차에 앱 방향을 정했다면, 오늘은 그 방향을 실제 화면으로 연결하는 시작점입니다. 아직 화려한 기능은 없지만, 내가 만든 HTML 파일이 직접 열리고 텍스트가 보이는 경험이 웹앱 개발의 첫 자신감을 만들어줍니다.바이브코딩 방식에서는 이 단계에서 완벽한 구조를 만들기보다 "작게 만들어서 바로 확인"하는 흐름이 중요합니다. 오늘은 제목, 설명, 기본 카드 영역까지 간단히 만들고, 내일 레이아웃 확장과 스타일링으로 자연스럽게 이어가겠습니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘의 목표는 하루 ..

[바이브코딩 HTML 웹앱 20일 챌린지] 1일차 - AI와 함께 만들 웹앱 정하기

이번 1일차에서는 AI와 함께 어떤 HTML 웹앱을 만들지 방향을 정하는 단계를 진행합니다. 바로 코드를 길게 작성하기보다, 왜 이 앱을 만들고 어떤 기능을 20일 동안 완성할지 큰 그림부터 잡아두면 이후 회차가 훨씬 쉬워집니다. 바이브코딩 방식은 완벽한 기획 문서를 먼저 만드는 방법이 아니라, AI와 짧게 대화하며 아이디어를 구체화하고 바로 실행 가능한 수준으로 다듬는 흐름에 가깝습니다.이번 시리즈의 목표는 초보자도 HTML, CSS, JavaScript를 이용해 하루 관리 대시보드를 완성하는 것입니다. 오늘은 그 출발점으로 앱의 핵심 기능과 우선순위를 정하고, 내일 2일차에서 첫 HTML 화면을 빠르게 띄울 수 있도록 준비합니다. 오늘의 핵심은 정답 찾기가 아니라 시작 가능한 범위를 정하는 것입니다...