HTML · CSS · 자바스크립트
HyperText Markup Language / Cascading Style Sheets / JavaScript
HTML이란?
- HTML=구조(뼈대)
- CSS=디자인(옷)
- JS=동작(움직임)
이 셋을 구분할 줄 알게 되면 달라지는 건 코딩 실력이 아니라 요청의 정확도입니다. '화면이 좀 이상해요'라고 말하면 AI든 외주 업체든 어디부터 열어봐야 할지 모릅니다. 반면 '모바일에서 메뉴가 겹칩니다', '신청 버튼을 눌러도 아무 반응이 없습니다', '제목이 검색에 안 잡힙니다'처럼 말하면 고쳐야 할 자리가 한 번에 지정됩니다. 홈페이지 수정 요청서든 바이브 코딩 프롬프트든, 결국 이 세 단어 위에서 대화가 오갑니다.
구분하는 현장 기준은 의외로 단순합니다. 브라우저에서 F12를 누르거나 화면에서 마우스 우클릭 후 '검사'를 열면 실제 코드가 보이는데, 글·표·버튼처럼 내용이 적힌 덩어리가 HTML이고 색·여백·정렬 규칙이 모인 쪽이 CSS입니다. 새로고침하면 원래대로 돌아가는 변화는 자바스크립트가 만든 것이고, 창 너비를 줄였을 때 표가 화면 밖으로 밀려나면 CSS 쪽 문제입니다. 반대로 입력한 내용이 실제로 저장되는 일은 이 셋의 몫이 아니라 서버와 데이터베이스의 영역이라, '자바스크립트로 회원정보를 저장해 달라'는 요청은 처음부터 성립하지 않습니다.
수정 난이도도 다릅니다. 색·글꼴·간격 같은 CSS 손질은 보통 몇 분이면 끝나지만, 항목을 추가하거나 순서를 바꾸는 HTML 작업은 화면 전체 배치를 다시 확인해야 하고, 동작을 건드리는 자바스크립트 수정은 반드시 클릭 테스트가 따라붙습니다. 참고로 자바(Java)와 자바스크립트는 이름만 비슷할 뿐 전혀 다른 언어라, 견적서에 둘을 섞어 쓰면 대화가 처음부터 어긋납니다.
가장 위험한 오해는 'CSS로 안 보이게 했으니 지운 것'이라는 생각입니다. 화면에서 감췄어도 내용은 HTML에 그대로 남아 있어 소스 보기나 검색엔진에 노출됩니다. 미공개 가격표나 내부 담당자 연락처를 이렇게 '숨겨' 뒀다가 유출되는 사고가 실제로 납니다. 같은 이유로 자바스크립트로 만든 입력값 검증은 보안 장치가 아닙니다. 브라우저 쪽 코드는 이용자가 얼마든지 우회할 수 있어서, 필수 항목 확인은 서버에서 한 번 더 해야 합니다.
HTML은 팀 버너스리(Tim Berners-Lee)가 1991년에, 자바스크립트는 브렌던 아이크(Brendan Eich)가 1995년에, CSS는 호콘 비움 리(Håkon Wium Lie)의 제안으로 1996년에 등장하며 웹의 3대 기본 기술이 됐습니다.
가상의 사례로 살펴보겠습니다. 임직원 42명 규모의 산업용 부품 제조사 A사가 신제품 소개 랜딩페이지를 바이브 코딩으로 3주 만에 만들어 공개했습니다. 문제는 공개 직후였습니다. 마케팅 담당자가 '디자인이 깨졌어요'라고만 올리는 바람에 같은 건으로 수정이 다섯 번 반복됐고, 2주 동안 문의 폼 접수는 0건이었습니다.
- 마케팅팀 김 대리가 스마트폰 화면에서 F12 검사 화면을 열어보니, 폭 375px에서 제품 사양표가 화면 밖으로 밀려나 있었습니다. 요청 문구를 '모바일에서 표가 화면을 넘칩니다'로 바꾸자 20분 만에 수정이 끝났습니다.
- 영업팀장이 '문의하기 버튼이 있긴 한데 눌러도 창이 안 뜹니다'라고 알려왔고, 새로고침해도 변화가 없다는 점에서 자바스크립트 동작이 아예 붙지 않은 것으로 확인됐습니다.
- 제품명이 네이버와 구글에서 전혀 검색되지 않아 확인해 보니, 제목이 이미지 한 장으로만 들어가 있어 HTML에 텍스트가 한 글자도 없는 상태였습니다. 제목 태그로 다시 넣었습니다.
- 대표가 소스 보기를 하다가, 아직 공개하면 안 되는 대리점 공급가표가 CSS로 화면에서만 가려진 채 코드에 남아 있는 것을 발견했습니다. 그날 바로 해당 표를 HTML에서 완전히 삭제했습니다.
- 이후 수정 요청서에 'HTML/CSS/JS' 중 하나를 표시하도록 양식을 바꾸자, 건당 재확인 메일이 평균 3.5회에서 1.2회로 줄고 수정 리드타임은 4일에서 반나절로 단축됐으며, 공개 6주 뒤 문의 폼 접수는 월 0건에서 17건으로 늘었습니다.