HTML은 뼈대다

"예쁘게 만들어 주세요"라고 했더니

AI한테 이렇게 시켜보신 적 있으시죠. "우리 가게 홈페이지 하나 예쁘게 만들어 줘." 몇 초 만에 화면이 뜹니다. 그럴듯해요. 그런데 열어놓고 보면 뭔가 이상합니다.

내가 제일 위에 두고 싶었던 게 아래에 가 있고, 넣어달라고 한 적 없는 메뉴바가 붙어 있습니다. 정작 넣어달라고 한 사진 자리는 없고요.

그래서 다시 시킵니다. "사진 자리 넣어 줘." 넣어줍니다. 그런데 이번엔 멀쩡하던 다른 게 사라져 있어요.

저도 이걸 여러 번 했습니다. 웹 서비스를 만들면서요.

그런데요, 제 지시가 짧아서가 아니었습니다. 저는 꽤 길게 썼어요. 색도 적고, 분위기도 적고, 참고할 사이트도 붙였습니다. 그래도 매번 다시 시켰습니다.

벽지부터 고르는 사장님은 없습니다

가게 하나 낸다고 해봅시다. 인테리어 업자를 불렀어요. 처음 하는 말이 "벽지는 아이보리로 해주세요"일까요.

아니죠. 순서가 있습니다. 어디가 홀이고 어디가 주방인지, 카운터는 문 옆인지 안쪽인지, 테이블은 몇 개 놓을 건지를 먼저 정합니다. 벽지는 그 다음입니다.

웹페이지도 똑같습니다. 화면에도 «홀과 주방»이 있어요. 제목이 맨 위에, 소개 글이 그 아래, 사진이 그 다음, 버튼이 맨 밑 — 이 순서와 자리를 먼저 정하는 겁니다.

색이 무슨 색인지, 글꼴이 무엇인지는 그 다음 문제입니다.

그래서 제가 바꾼 건 딱 하나입니다

저는 지시를 «길게» 쓰다가 «순서대로» 쓰는 걸로 바꿨습니다.

같은 AI, 같은 5초입니다. 그런데 결과가 달라졌어요. 제가 똑똑해져서가 아닙니다. 순서를 제가 정해서 적었을 뿐입니다.

여기서 하나만 못 박을게요. 순서를 비워 두면 AI가 대신 정합니다. 그리고 AI가 정한 순서는 제 머릿속 그림이 아니에요.

받은 건 세 가지만 봅니다

업자가 지어 놓은 가게를 그냥 받는 사장님은 없습니다. 열쇠 받기 전에 한 바퀴 돌면서 봅니다. AI가 준 결과도 똑같습니다.

저는 세 가지만 봅니다.

1. 순서가 내가 적은 대로인가
2. 빠진 칸은 없는가
3. 시키지 않은 것이 들어와 있지 않은가

셋째가 제일 중요합니다. AI는 친절하거든요. 부탁하지 않은 걸 자꾸 얹어 줍니다. 메뉴바를 만들어 주고, 아래에 회사 정보를 붙여 주고, 글자가 스르륵 나타나는 효과까지 넣어 줍니다.

하나씩 보면 다 좋아 보입니다. 그런데 그게 쌓이면 내가 이해할 수 없는 화면이 됩니다. 그럼 고쳐달라고 말하기도 어려워요. 어디를 고쳐달라고 해야 할지 모르니까요.

그래서 저는 지시 마지막에 한 줄을 넣습니다. "다른 요소를 추가하지 마세요."

이 단원에서 코드는 한 줄도 안 칩니다

오해하실까 봐 미리 말씀드립니다. 이 책은 태그를 외우는 책이 아닙니다.

코드는 AI가 씁니다. 우리가 할 일은 제대로 시키는 사장 노릇입니다. 사장은 벽돌을 직접 쌓지 않아요. 대신 어디에 뭐가 들어갈지 정하고, 다 되면 한 바퀴 돌면서 검사합니다.

강의를 다니면서 많이 듣는 말이 있어요. "제가 개발을 몰라서요." 그런데 대부분은 몰라서 못 하는 게 아니었습니다. 부를 이름이 없어서 못 시키는 거였어요.

"위에서 아래로 다섯 칸"이라고 말할 수 있으면, 그 순간부터 시킬 수 있습니다.

그런데요

이 이야기가 오늘 처음이셨어도, 여러분은 이미 하고 계셨습니다.

행사 안내문 만들 때를 떠올려 보세요. 제목 먼저 쓰고, 날짜와 장소 넣고, 신청 방법 적고, 맨 밑에 연락처를 넣으셨을 겁니다. 순서대로 칸을 잡으신 거죠. 그게 오늘 배운 것과 같습니다.

이걸 웹에서는 이렇게 부릅니다. HTML. 무엇이 어디에 있나를 적는 종이입니다.

이름은 몰라도 됩니다. 순서를 내가 정한다는 것만 기억하시면 됩니다.