[비개발자 사고법 02강] CSS가 뭐냐고요? 웹페이지에 입히는 '옷'입니다

왜 AI가 만든 화면은 자꾸 '촌스러울'까

바이브 코딩으로 사이트를 만들어 보면 기능은 신기하게 멀쩡합니다. 버튼도 눌리고 신청도 넘어가요. 그런데 화면이 회색 글씨에 어색한 글자체로 떠서 도무지 내놓기 민망한 경우가 많죠. "이걸 올렸다간 아무도 안 보겠는데, 차라리 남한테 맡기나?" 하는 생각까지 듭니다. 이런 경험, 다들 있으실 겁니다.

면접장을 떠올려 보세요. 한 사람은 셔츠를 다려 입고, 한 사람은 추리닝에 슬리퍼를 신고 왔습니다. 말을 섞기도 전에 0.5초 만에 평가가 끝나 버리죠. 웹사이트도 똑같아요. 지난 편에서 HTML 뼈대를 아무리 튼튼하게 잡았어도, 들어온 사람이 "이거 AI가 대충 만든 거 같은데" 하고 0.5초 만에 나가 버리면 그 안의 좋은 내용은 보이지도 않습니다. 그래서 오늘은 그 겉모습, 옷을 입히는 법을 챙깁니다.

CSS는 웹페이지에 입히는 '옷'입니다

새 집을 다 지었다고 상상해 보세요. 기둥도 벽도 섰는데 아직 시멘트 벽 그대로라 횅하죠. 여기에 벽지를 바르고 페인트를 칠하고 가구를 들이면? 똑같은 집인데도 완전히 다른 집처럼 보입니다. 그 인테리어를 담당하는 친구가 바로 CSS예요.

HTML이 뼈대라면, CSS는 그 위에 입히는 옷이자 화장이자 인테리어입니다. 핵심은 알맹이(글자·버튼)는 그대로 두고 보이는 옷만 갈아입힌다는 것 — HTML은 그 자리에 그대로 있고, 그 위에 색과 디자인만 덧입히는 거죠.

딱 두 가지만 — '어디를' 그리고 '어떻게'

CSS로 디자인을 시킬 때, 외울 용어는 사실 필요 없습니다. 딱 두 가지만 정하면 돼요. 첫째 '어디를'(꾸밀 대상), 둘째 '어떻게'(어떤 모습으로). 이 둘만 콕 짚어 주면 AI는 알아듣습니다.

예를 들어 "제목을(어디를) 파란색으로(어떻게) 바꿔 줘" — 이게 전부입니다. 코드 한 줄 몰라도 돼요. '어디를'엔 보통 제목·소개글·버튼·배경이면 충분하고, '어떻게'엔 색·크기 같은 걸 넣으면 되죠.

CSS의 네 가지 — 색·글꼴·박스·여백

'어떻게'에 들어가는 재료는 크게 네 가지면 충분합니다 — 색, 글꼴·크기, 박스, 여백. 색은 디지털 페인트칠이고, 글꼴·크기는 "현재 기준 0.2배 키워 줘"처럼 기준+배수로 말하면 정확합니다. 박스는 테두리·둥근 모서리·그림자를 주면 요즘 흔한 카드가 되고, 여백은 안쪽·바깥쪽 공간이라 넉넉할수록 깔끔하고 고급스러워 보이죠. 외울 것 없이 아래 표 한 장이면 끝납니다.

배치와 반응형 — 가로로·격자로·폰까지 한 번에

뼈대만 있을 때는 요소들이 위에서 아래로 주르륵 쌓입니다. 가로로도 놓고 가운데에 딱 맞추고 싶을 때, 그걸 마법처럼 해 주는 게 플렉스 박스예요. 가로 정렬·가운데 모으기·양 끝 벌리기를 한 줄로 처리하죠(메뉴바, 로그인 박스, 로고와 메뉴를 양 끝에 둔 헤더가 다 이겁니다). 사진 갤러리나 상품 목록처럼 바둑판으로 깔고 싶으면 그리드로 "2×3 격자로 배치해 줘"라고 하면 됩니다.

마지막으로 중요한 게 반응형이에요. 같은 사이트를 PC로도 폰으로도 보는데, 화면 크기가 완전히 다른데 어떻게 둘 다 멀쩡할까요? CSS가 화면 크기를 스스로 감지해, PC에서는 가로 3칸, 좁은 폰에서는 세로 1칸으로 배치를 자동으로 바꿔 주기 때문입니다. PC용·폰용을 따로 만들 필요가 없어요. 그래서 "모바일에서도 반응형으로 크기가 자연스럽게 조절되게 해 줘"라고만 해도 AI는 정확히 알아듣습니다.

막연한 지시 vs 사장님처럼 지시 — 한 문장 차이

같은 AI에게 같은 일을 시켜도 결과는 하늘과 땅 차이가 납니다. 그 차이는 실력이 아니라 지시의 구체성에서 갈리죠. 여러분은 코드를 짜는 사람이 아니라, AI에게 제대로 시키는 '사장님'이에요.

반대로 AI가 "플렉스 박스로 가운데 정렬하고 패딩을 줘서 반응형으로 처리했어요"라고 답할 때도 있죠. 무슨 말인지 모르면 그냥 "고마워" 하고 넘어가게 됩니다. 이럴 땐 "그 단어를 쉽게 비유로 설명해 줘. 내가 판단하고 다시 지시할게"라고 되받으면 돼요. 모르는 단어가 나와도 받아칠 수 있으면, 더는 AI에게 끌려다니지 않습니다.