개발자 도구로 들여다보기
1. 화면을 직접 뜯어봅시다
태그를 본격적으로 배우기 전에, 우리가 매일 보는 웹 화면이 정말 HTML로 되어 있는지 두 눈으로 확인해 봅시다. 브라우저에는 화면의 속을 들여다보는 개발자 도구가 기본으로 들어 있습니다. 거창한 프로그램이 아니라, 지금 쓰는 크롬·엣지·사파리 안에 이미 있습니다.
여기서는 크롬을 기준으로 합니다. 네이버에서 '로또'를 검색해 보세요. 당첨 번호 공이 화면에 동그랗게 떠 있을 겁니다.
2. 개발자 도구 열기
F12를 누르면 개발자 도구가 열립니다. 키가 안 먹으면 Ctrl + Shift + I(윈도우), 맥은 Cmd + Opt + I를 누르세요. 화면 옆이나 아래에 코드가 잔뜩 적힌 창이 나타납니다.
겁먹을 필요 없습니다. 이 코드가 바로 지금 보고 있는 화면을 만들어내는 HTML입니다. 위쪽 Elements 탭을 누르고, 왼쪽 위에 있는 화살표 모양 버튼을 클릭하세요. 이 버튼은 "화면에서 골라서 그 코드를 보여줘" 기능입니다.
화살표를 켠 채로, 화면의 로또 번호 위에 마우스를 올려 보세요. 그 부분이 어떤 코드로 만들어졌는지 표시됩니다. 번호 하나를 클릭해 봅시다.
3. 로또 번호를 바꿔보기
코드 영역에 <span class="ball type1">6</span> 같은 줄이 보일 겁니다. 바로 이 코드가 로또 번호 6을 화면에 그려낸 장본인입니다. 이건 이미지도 아니고 동영상도 아닙니다. 그냥 글자(텍스트)로 만들어진 화면일 뿐입니다.
그 6을 더블 클릭해서 다른 숫자로 바꿔 보세요.
화면의 번호가 정말로 바뀝니다.
걱정 마세요, 해킹이 아닙니다. 지금 바꾼 건 내 브라우저에 잠깐 그려진 사본일 뿐입니다. 실제 네이버 서버나 다른 사람 화면은 전혀 바뀌지 않습니다. 새로고침(F5)을 누르면 원래 번호로 돌아옵니다. 마음껏 눌러보고 바꿔보세요.
4. 모바일 화면으로 보기
개발자 도구에는 한 가지 더 유용한 기능이 있습니다. 같은 페이지가 휴대폰에서는 어떻게 보일지 미리 확인하는 기능입니다.
개발자 도구가 열린 상태에서, 창 왼쪽 위에 있는 휴대폰과 태블릿 모양 아이콘을 눌러 보세요. 단축키는 Ctrl + Shift + M(윈도우), 맥은 Cmd + Shift + M입니다. 그러면 화면이 휴대폰 크기로 좁아지면서, 실제 모바일에서 보이는 모습으로 바뀝니다. 위쪽 메뉴에서 갤럭시, 아이폰 같은 기기를 골라 크기를 바꿔볼 수도 있고, 가로/세로로 돌려볼 수도 있습니다.
반응형 확인에 꼭 필요합니다: 요즘 웹 페이지는 PC에서 볼 때와 휴대폰에서 볼 때 모양이 달라지도록 만듭니다. 이걸 반응형(responsive)이라고 합니다. 나중에 AI에게 "모바일에서도 잘 보이게 해줘"라고 부탁한 뒤, 이 모바일 화면 기능으로 PC와 휴대폰 모습을 번갈아 확인하면 됩니다. 다시 아이콘을 누르면 원래 PC 화면으로 돌아옵니다.
5. 무엇을 본 걸까
방금 우리는 중요한 사실 하나를 눈으로 확인했습니다. 화면에 보이는 번호가 사실은 HTML 태그 안에 적힌 글자였고, 그 글자를 고치니 화면이 바뀌었다는 것입니다.
여러분이 보는 웹 페이지뿐 아니라, 사실상 화면에 뜨는 거의 모든 것이 이런 식으로 코드로 그려진 결과입니다. 그중에서 웹 브라우저가 보여주는 화면은 HTML, CSS, JavaScript로 만들어지고, 그 뼈대가 HTML입니다. AI가 만들어주는 결과물도 결국 이 HTML이라, 어디에 무슨 글자가 들어 있는지 읽을 줄 알면 "여기 이 숫자만 바꿔줘"라고 정확히 가리킬 수 있습니다.
이제 그 뼈대를 읽는 법, 즉 태그의 생김새부터 다음 장에서 차근차근 보겠습니다. 실습은 https://just.weniv.co.kr/ 에서 바로 따라 해볼 수 있습니다.