바로바로 바이브 코딩 with 커서 AI · 04장 바이브 코딩의 핵심, 웹 기술 · 04.1 웹 기술의 기초, HTML, CSS, 자바스크립트 알아보기
바로 12 HTML만으로 구성된 웹사이트 만들어보기
바이브 코딩 시대에 HTML만으로 사이트를 만든다는 건 이제는 의미가 없습니다. 하지만 ‘HTML만 있는 사이트는 어떤 모습일까?’를 살펴보는 건 의미가 있습니다. HTML이 진짜로 무엇인지, 뼈대가 도대체 무슨 말인지 이해하기 위해 HTML 만으로 구성된 웹사이트를 만들겠습니다.
빈 폴더를 하나 만들고 커서에게 다음과 같이 [Agent] 모드로 바로 지시를 내리겠습니다.
프롬프트
간단한 자기소개 웹사이트를 HTML만으로 만들려고 해, CSS, 자바스크립트를 아예 사용하지 않은 담백한 웹사이트를 만들어보자.
AI 답변
네, CSS와 JavaScript를 전혀 사용하지 않은 순수 HTML만으로 깔끔한 자기 소개 웹사이트를 만들어 드릴게요!
그러면 커서가 지시한 대로 CSS와 자바스크립트를 전혀 사용하지 않은 자기소개 웹사이트를 만들겠다고 합니다. 과연 어떤 결과가 나올까요? 아마도 커서는 index.html이라는 파일을 하나 작성해줄 겁니다.
작성한 파일을 직접 열거나 커서에게 ‘완성한 파일을 열어줘’라고 이야기하면 열어줄 겁니다. 완성된 웹사이트는 다음과 같습니다.
결과를 보면 텍스트와 간단한 선 정도로 구분된 웹사이트가 보입니다. 예전에 CSS나 자바스크립트가 없던 시절의 웹사이트는 이랬습니다. 필요한 정보만 가득 차 있는 그런 사이트였죠. 하지만 눈으로 보기에도 좋고, 기능도 더하기 위해 새로운 기술들이 개발되며 현재의 웹사이트가 된 겁니다.