웹페이지를 그림으로 만들면 무엇이 빠질까: 스크립트가 그리는 층
웹페이지를 그림으로 만들면 무엇이 빠지는지는 그 페이지를 스크립트가 얼마나 떠받치는지에 달려 있다. 페이지를 그림으로는 페이지의 마크업을 읽고 그 마크업으로 그림 한 장을 그린다. 이 브라우저 안에서 스크립트는 실행되지 않는다. 불러온 뒤 스크립트가 덧붙인 것은 그림에 들어가지 않는다.
마크업에 적힌 것은 남는다. 제목, 문단, 표, 테두리, 배경색, 글자 크기, 줄 간격, 문서에 들어 있는 이미지. 스크립트가 나중에 한 일은 남지 않는다. 두 번째 슬라이드, 눌러야 열리는 댓글, 스크롤해야 채워지는 목록, 보낸 뒤에 뜨는 안내. 화질 문제가 아니다. 그 부분은 처음부터 마크업에 없었다.
페이지를 그림으로가 받는 것은 정적인 내용뿐이다. 스크립트는 실행되지 않고, 로그인 뒤 페이지도, 다른 도메인의 이미지도 나오지 않는다.
스크립트가 돌지 않으니 처음 그려진 자리에서 멈춘다
스크립트로 넘어가는 슬라이드는 첫 장에서 끝난다. 스크롤해야 불러오는 이미지는 빈 자리로 남는다. 버튼을 눌러야 열리는 패널은 그림에 아예 없다. 필요한 문장이 그 패널 안에만 있다면 이 도구로는 얻을 수 없다.
로그인 뒤 페이지도 나오지 않는다. 로그인한 다음에 보이는 내용을 요청하면 돌아오는 것은 로그인 칸이거나 빈 화면이다. ReadyIMG에는 로그인이 없고, 이미지를 받는 계정 서버도 없다. 어느 사이트에 대신 로그인하지도 않는다. 여기서 읽는 것은 이 브라우저가 닿는 공개 마크업뿐이다.
다른 도메인 이미지는 빈칸이 된다
페이지 안의 그림이 다른 도메인에서 온 것이라면 그릴 때 그 픽셀을 읽을 수 없다. 자리만 비어 있다. 같은 사이트의 그림은 제대로 나온다. 흰 여백, 깨진 액자, 테두리만 남은 사각형. 대개는 이것이고 파일이 망가진 것은 아니다.
- 스크립트가 만드는 내용: 두 번째 슬라이드, 눌러야 열리는 댓글, 스크롤해야 채워지는 목록.
- 로그인 뒤 페이지: 로그인 칸이나 빈 화면만.
- 다른 도메인 이미지: 자리가 비고 테두리나 여백만 남는다.
주소를 읽을 수 없으면 HTML을 붙여 넣는다
브라우저에서 주소를 읽을 수 없는 페이지가 있다. 아직 내 컴퓨터에만 있는 파일, 사내망에서만 열리는 페이지, 그 자리에서 조립한 조각. 그럴 때는 HTML 소스를 붙여 넣는다. 같은 정적 마크업이라 빠지는 것도 같다.
뷰포트 너비는 최소 320으로 본다. 좁은 화면과 넓은 화면은 다른 배치라 같은 페이지도 결과가 다르다. 누구에게 보여 줄 그림인지 먼저 정한다. 휴대폰용이면 좁은 쪽으로 잡는다.
내보내는 형식 세 가지, 하나를 고른다
JPG, PNG, 픽셀 그림을 감싼 SVG. 화면 갈무리, 글자가 중심인 페이지, 문서에 붙일 것은 PNG로 남긴다. 글자 가장자리가 깔끔하다. JPG만 받는 곳이라면 JPG. 그 SVG는 픽셀을 감싼 껍데기이고 끝없이 키울 수 있는 벡터가 아니다. 키우면 여느 비트맵처럼 흐려진다.
무거워서 보내기 어려우면 파일 줄이기를 한 번 더 거친다. 줄이는 것은 방금 내려받은 사본이고, 찍은 페이지는 그대로 남는다.
페이지를 그림으로는 한 번에 한 페이지. 40개 파일을 한꺼번에 받는 도구가 아니다. 한 장을 끝내고 내려받은 뒤 다음으로 넘어간다.
이 그림이 맞는 쓰임
링크를 열지 않을 사람에게 그때의 배치를 고정해 건넨다. 내일 바뀔 페이지의 기록을 남긴다. 문서에 붙여 읽는 사람을 밖으로 내보내지 않는다. 셋 다 맞다.
과정을 찍는 데는 맞지 않는다. 스크롤 애니메이션의 중간 프레임, 불러오는 동안의 뼈대 화면, 마우스를 올렸을 때의 모습. 모두 스크립트가 돌아야 나오는 것이고 여기서는 스크립트가 돌지 않는다.
네트워크에 닿는 것은 두 가지뿐
페이지를 열면 이 방문은 51.LA에 집계된다. 세는 것은 누군가 페이지를 열었다는 사실이고 이미지 파일이 아니다. 파일을 다루는 방식에 이 경계를 적어 두었다. 이미지는 ReadyIMG로 올라가지 않고, 여기에는 로그인도 가입도 없다.
다른 하나는 누끼를 처음 쓸 때 인식 모델을 이 기기의 캐시로 내려받는 일. 다른 도구 이야기이고 페이지를 찍는 일과는 상관없다. 계산은 이 기기 안에서 끝나고, 내려받는 것은 여기서 새로 만든 파일이다.
보내기 전에 세 번 본다
- 글자가 잘리지 않았는지. 넓은 배치를 좁은 폭에 넣으면 제목이 세 줄로 접힌다.
- 그림이 비어 있지 않은지. 비었다면 같은 사이트의 그림으로 바꿔 다시 한 번.
- 저장한 것은 새 파일. 페이지도 원래 그림도 제자리에 있다.
대기열은 이번 방문 안에만 있다. 새로 고치거나 페이지를 닫으면 내려받지 않은 결과는 사라진다. 남길 그림을 먼저 받고 다음 페이지로 간다.
아직 시작하지 않았다면 작업대로 돌아가 주소나 HTML을 붙여 넣고 페이지를 그림으로를 연다. 무엇이 빠지는지는 이제 말할 수 있을 것이다.