1. 그림을 파일이 아니라 코드로

앞에서 이미지는 HTML과 별개의 파일로 따라온다고 했습니다. 사진이라면 어쩔 수 없습니다. 하지만 아이콘, 도형, 도표, 다이어그램처럼 규칙이 있는 그림은 이미지 파일 없이 HTML 안에 글자(코드)로 직접 그릴 수 있습니다.

코드로 그리면 좋은 점이 둘 있습니다. 첫째, 별도 이미지 파일이 없으니 파일 하나로 깔끔하게 끝납니다. 둘째, 그림이 코드라서 말로 고칠 수 있습니다. "원을 파란색으로", "화살표 하나 더"처럼 AI에게 부탁하면 바로 바뀝니다.

방법은 크게 두 갈래입니다. 하나는 SVG나 이모지처럼 내가 HTML 안에 직접 적어 넣는 방식이고, 다른 하나는 머메이드처럼 남이 만든 부품을 불러와 그리는 방식입니다. 차례대로 보겠습니다.

2. 파일 없이 HTML에 직접 넣기

먼저 바깥에서 아무것도 끌어오지 않고, HTML 안에 코드만 적어 그리는 방법들입니다. 파일도 부품도 필요 없어 가장 가볍습니다.

2.1 SVG: 코드로 그리는 도형

SVG는 점과 선, 도형을 좌표로 그리는 그림용 태그입니다. HTML 안에 그대로 적으면 브라우저가 그려줍니다.

<svg width="120" height="120">
  <circle cx="60" cy="60" r="50" fill="tomato" />
  <rect x="10" y="10" width="40" height="40" fill="royalblue" />
</svg>

<circle>은 원, <rect>은 사각형입니다. fill로 색을 칠합니다. 숫자를 바꾸면 위치와 크기가 바뀝니다.

SVG의 가장 큰 장점은 아무리 키워도 깨지지 않는다는 점입니다. 보통 이미지는 확대하면 계단처럼 뭉개지지만, SVG는 좌표로 그려서 어느 크기에서나 또렷합니다. 그래서 로고, 아이콘, 간단한 일러스트에 많이 씁니다.

물론 좌표를 손으로 다 적을 필요는 없습니다. 바이브 코딩에서는 이렇게 부탁하면 됩니다.

종이비행기 모양 아이콘을 SVG로 그려줘.
색은 파란색, 크기는 가로세로 40픽셀로.

2.2 이모지와 기호: 글자로 찍는 아이콘

가장 손쉬운 그림은 사실 기호나 이모지를 그냥 글자로 찍는 것입니다. 별 ★, 하트 ♥, 화살표 →, 체크 ✓, 그리고 🎉 같은 이모지를 HTML 안에 그대로 입력하면 브라우저가 그려줍니다. 파일도, 태그도, 부품도 필요 없습니다.

<p>주문 완료 ✓</p>
<p>평점 ★★★★☆</p>
<p>다음 단계 →</p>

글자로 찍었으니 글자와 똑같이 다뤄집니다. 버튼 안, 목록 앞, 제목 옆에 작은 아이콘이 필요할 때 가장 빠른 방법입니다.

원하는 이모지를 찾는 건 어렵지 않습니다. 윈도우에서는 윈도우 키 + 마침표(.), 맥에서는 Cmd + Ctrl + Space를 누르면 이모지 고르는 창이 바로 뜹니다. 거기서 골라 넣으면 됩니다. 검색해서 복사하고 싶다면 Emojipedia나 Get Emoji 같은 사이트에서 단어로 찾아 복사한 뒤 HTML에 붙여 넣으면 됩니다.

키보드로 바로 못 찍는 기호는 약속된 이름으로 부릅니다. 예를 들어 ©는 저작권 표시 ©, →는 화살표 →, ♥는 하트 ♥로 바뀝니다. 이런 이름을 HTML 기호 엔티티라고 하는데, 외울 필요는 없고 "저작권 기호 넣어줘"처럼 부탁하면 됩니다.

2.3 base64 사진을 글자로 넣기

사진처럼 좌표로 그릴 수 없는 그림은 결국 이미지 파일입니다. 앞 장에서 본 것처럼 보통은 <img src="photo.jpg" />로 바깥 파일을 가리킵니다.

그런데 그 사진을 글자로 바꿔서 HTML 안에 직접 넣는 방법이 있습니다. 이게 base64입니다. 이미지의 1과 0을 긴 글자 덩어리로 변환해, src에 그 글자를 통째로 넣는 것입니다.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSU... (아주 긴 글자) ..." />

data:image/png;base64, 뒤에 붙는 긴 글자가 이미지 그 자체입니다. 이렇게 하면 별도 이미지 파일 없이 HTML 하나에 그림까지 담깁니다. 앞 장에서 말한 "진짜 파일 하나로 만들기"가 이 방식입니다.

다만 글자로 바꾸면 원본보다 덩치가 커지고 코드가 길어집니다. 그래서 작은 아이콘이나 이미지 몇 장에만 어울립니다. 사진이 많으면 그냥 이미지 파일로 두고 함께 보내는 편이 낫습니다.

3. 부품을 불러와 그리기

여기까지는 HTML 안에 코드를 직접 적어 그렸습니다. 이번에는 결이 조금 다릅니다. 남이 미리 잘 만들어 둔 부품을 불러와서, 짧은 글만 적으면 부품이 알아서 그려주는 방식입니다.

3.1 머메이드: 글로 그리는 다이어그램

순서도나 관계도 같은 다이어그램은, 도형을 일일이 그리는 대신 글로 적으면 그려주는 도구가 있습니다. 머메이드(mermaid)입니다. 사실 이 책에 나온 그림들이 대부분 머메이드로 그려졌습니다.

예를 들어 다음처럼 적으면,

flowchart LR
    A["아이디어"] --> B["HTML 작성"]
    B --> C["브라우저에서 확인"]

아래처럼 그려집니다.

화살표와 글자만 적었는데 상자와 흐름이 알아서 그려집니다. 순서도, 조직도, 관계도처럼 흐름과 연결을 보여줄 때 특히 강력합니다. 발표 자료나 문서에 끼워 넣기 좋습니다.

다만 머메이드는 SVG나 이모지와 달리 혼자 그려지지 않습니다. 깃허브나 노션, 위니북스 같은 곳은 머메이드를 알아서 그려주지만, 순수 HTML 파일에서 쓰려면 머메이드라는 부품을 <script>로 한 줄 불러와야 합니다. 이렇게 바깥 부품을 끌어다 쓰는 방식이 다음 장에서 본격적으로 다룰 라이브러리와 CDN 이야기입니다. 역시 AI에게 "이 과정을 머메이드 순서도로 그려줘"라고 하면 부품을 불러오는 줄까지 알아서 넣어줍니다.

4. 무엇으로 그릴지 고르기

네 가지를 한눈에 정리하면 이렇습니다.

공통점은 모두 말로 그릴 수 있다는 점입니다. 그릴 대상의 이름과 방법만 알면, 손으로 좌표를 찍지 않아도 AI가 코드로 옮겨줍니다.

여기까지는 HTML과 그 곁의 도구들만으로 그릴 수 있는 것들이었습니다. 더 화려한 차트나 3D가 필요하다면, 머메이드처럼 남이 잘 만들어 둔 부품을 얹으면 됩니다. 마지막 장에서 그 이름들을 모아 봤습니다.