1. HTML 한 장에 부품을 얹는다

HTML이 뼈대라고 했습니다. 그런데 뼈대 위에는, 세상 누군가가 미리 잘 만들어 둔 부품 상자를 얹을 수 있습니다. 이 부품 상자를 라이브러리(library)라고 부릅니다. 차트를 그려주는 부품, 3D를 돌려주는 부품, 지도를 띄워주는 부품처럼 종류가 다양합니다.

좋은 소식은, 이런 부품을 쓰겠다고 따로 설치할 필요가 없다는 점입니다. HTML 안에 <script> 한 줄을 적어 인터넷에서 바로 불러오면 됩니다. 이렇게 외부에서 부품을 끌어오는 주소를 CDN이라고 합니다.

<head>
  <!-- 이런 식으로 한 줄 적으면 그 부품을 쓸 수 있게 됩니다 -->
  <script src="차트를_그려주는_부품의_주소"></script>
</head>

주소가 정확해야 하고 버전에 따라 조금씩 달라지는데, 이건 외울 필요 없습니다. AI에게 "Chart.js를 CDN으로 불러오는 한 줄 적어줘"라고 하면 정확한 주소를 넣어줍니다. 우리가 알아둘 건 어떤 부품이 있는지, 그 이름이 뭔지뿐입니다. 이름을 알아야 AI에게 "그걸로 만들어줘"라고 말할 수 있으니까요.

2. 알아두면 좋은 라이브러리

전부 외울 필요는 없습니다. "이런 게 있더라" 정도로 눈에 익혀 두면, 필요할 때 이름이 떠오릅니다.

3. 섞으면 결과물이 된다

이 부품들의 진짜 힘은 섞을 때 나옵니다. HTML로 뼈대와 배치를 잡고, 그 위에 필요한 부품을 골라 얹으면 제법 그럴듯한 결과물이 나옵니다.

예를 들어 매출 대시보드를 만든다면, HTML로 화면을 몇 칸으로 나누고 Chart.js로 그래프를 채웁니다. 3D로 제품을 보여주는 소개 페이지라면 Three.js로 모형을 띄우고 GSAP로 스크롤에 맞춰 움직이게 합니다. 어느 쪽이든 바탕은 HTML 한 장이고, 그 위에 부품을 올린 것뿐입니다.

바이브 코딩에서는 이렇게 부탁하면 됩니다.

판매 데이터를 보여주는 대시보드를 HTML 한 파일로 만들어줘.
- 위쪽엔 이번 달 매출 숫자 카드 3개
- 아래쪽엔 월별 매출 막대그래프
그래프는 Chart.js를 CDN으로 불러와서 그려줘.

회사 제품을 360도로 돌려볼 수 있는 소개 페이지를 만들어줘.
Three.js를 써서 3D로 보여주고, 마우스로 돌릴 수 있게 해줘.

부품 이름을 콕 집어주면, AI는 그 부품을 불러오는 코드까지 알아서 넣어줍니다. 이름을 모르면 "알아서 잘 그려줘"라고밖에 못 하지만, 이름을 알면 원하는 방향을 정확히 가리킬 수 있습니다. 이 장의 키워드들이 바로 그 손가락이 되어 줍니다.

4. 다음 걸음

이 책은 여기까지입니다. "화면에 보이는 모든 것은 HTML이라는 뼈대 위에 올라가 있고, 그 위에 부품을 얹어 결과물을 만든다", 이 한 가지만 챙겨 가셔도 충분합니다.

뼈대를 본격적으로 꾸미고 움직이게 하려면 CSS와 JavaScript를 따로 익혀야 합니다. 또한 이 페이지들이 모여 하나의 서비스가 되는 큰 그림은 '딱 필요한 만큼' 시리즈의 다른 책에서 다룹니다.