26. 미리보기·파일 보관·인터넷 공개의 차이
서로 다른 세 가지 목적
미리보기는 만드는 중에 결과를 확인하는 일입니다. 파일 보관은 작업을 나중에 다시 쓰거나 고치기 위해 남기는 일입니다. 인터넷 공개는 다른 사람이 주소로 접속할 수 있게 하는 일입니다. 같은 페이지를 다루지만 목적이 다르므로 하나가 되었다고 나머지도 끝난 것은 아닙니다.
AI 도구 안에서 페이지가 잘 보여도 공개 주소가 없을 수 있습니다. 파일을 내 컴퓨터에 내려받았어도 다른 사람이 그 파일 위치에 접속할 수는 없습니다. 반대로 사이트가 공개되어 있어도 내 수정 파일과 입력 자료를 별도로 보관할 필요가 있습니다.
| 상태 | 가능한 일 | 따로 확인할 것 |
|---|---|---|
| 도구 안의 미리보기 | 현재 화면을 보고 수정합니다. | 도구 밖에서도 볼 수 있는지 |
| 내 컴퓨터의 파일 | 결과를 보관하고 다시 엽니다. | 필요한 자료가 함께 있는지 |
| 인터넷의 공개 주소 | 다른 기기에서 접속합니다. | 접근 제한과 실제 동작 |
결과와 주소를 함께 읽기
대화와 미리보기로 고칩니다.
어떤 파일과 버전을 제공하는지 봅니다.
다른 기기에서 내용을 읽고 링크를 누릅니다.
그림의 세 화면은 같은 프로젝트와 연결될 수 있지만 보는 목적이 다릅니다. 제작 중에는 내용을 고치고, 관리에서는 어떤 파일과 버전을 제공하는지 확인하며, 방문자 화면에서는 실제로 읽고 사용합니다. 친구에게 결과를 보여 주려면 그 사람이 볼 수 있는 방문자용 주소를 확인해야 합니다.
관리 화면에서 성공 표시가 보인다는 것은 해당 배포의 준비 상태에 관한 정보입니다. 소개글이 사실인지, 링크가 정한 곳을 여는지, 휴대전화에서 읽기 쉬운지까지 대신 확인하지는 않습니다. 방문자 화면에서 중요한 행동을 직접 해 봐야 합니다. 결과를 단계별로 구분하는 이유입니다.
로그인 화면이 나왔을 때도 현재 어느 주소인지 살핍니다. 관리 화면의 로그인인지, 의도된 사이트 접근 보호인지에 따라 필요한 조치가 다릅니다. 페이지 코드를 바꿀 일이 아닐 수도 있습니다. 주소와 접근 범위를 확인하지 않고 보호를 무작정 해제하지 않습니다.
파일 보관은 그림의 어느 한 주소와 같은 개념이 아닙니다. 사이트가 열려 있어도 수정할 원본과 입력 자료를 보관할 필요가 있습니다. 공개가 잘되었다는 사실만으로 작업을 다시 만들거나 복구할 준비까지 끝났다고 보지 않습니다. 세 역할과 보관을 함께 구분하면 작업을 이어 갈 기준을 마련할 수 있습니다.
파일을 꺼내는 단계
이번 책의 실습은 내용·모양·동작을 한 HTML 파일 안에 담는 작은 페이지를 기준으로 합니다. 공개를 준비할 때는 현재 결과 전체를 index.html이라는 파일로 받을 수 있습니다. 이 이름은 사이트의 첫 화면 파일로 흔히 사용하는 이름입니다. 파일을 받는 과정은 공개 실습에서 차례로 진행합니다.
다른 도구가 여러 파일로 만들었다면 파일 한 개만 이름을 바꾸어도 같은 결과가 되지는 않습니다. 필요한 파일과 실행 방법을 확인하거나, 이번 실습 범위에 맞는 독립적인 한 파일로 정리해 달라고 해야 합니다. 코드 일부를 복사해 놓은 것과 실행 가능한 전체 결과를 보관한 것은 구분합니다.
검토용 주소도 인터넷에 있습니다
Vercel 같은 서비스에서는 검토용 배포를 Preview, 실제 운영에 쓰는 배포를 Production이라고 부릅니다. 배포는 파일을 서비스에서 실행하거나 제공할 수 있게 올리는 과정입니다. Preview라고 해서 반드시 나만 볼 수 있는 것은 아닙니다. 접근 보호 설정에 따라 로그인이 필요할 수도, 주소로 열릴 수도 있습니다.
작업 화면의 주소, 배포 상태를 보는 관리 주소, 방문자가 보는 사이트 주소는 서로 다릅니다. 다른 사람에게 보낼 때는 어떤 주소인지 확인해야 합니다. 관리 화면 링크를 보냈더니 로그인 화면이 나온 것은 페이지 코드가 틀려서가 아닐 수 있습니다.
공개 뒤에도 확인이 남습니다
공개 과정이 성공했다고 나왔다면 인터넷에서 페이지를 제공할 준비가 되었다는 뜻입니다. 내용이 정확한지, 링크가 맞는지, 입력과 저장이 예상대로 움직이는지는 여전히 확인해야 합니다. 새로운 주소에서는 저장 공간도 달라질 수 있습니다.
공개는 제작의 끝이라기보다 다른 환경에서 결과를 확인하는 다음 단계입니다. 그 차이를 알면 미리보기에서는 됐는데 공개 화면에서는 다른 결과가 나올 때 무엇을 비교해야 할지 알 수 있습니다.
세 주소가 섞이는 사례
지수가 AI 대화의 주소를 친구에게 보냈더니 로그인 화면이 나왔습니다. 다음에는 Vercel에서 배포 상태를 확인하던 관리 주소를 보냈는데 역시 친구가 페이지를 볼 수 없었습니다. 마지막으로 방문자용 사이트 주소를 열어 확인한 뒤 보내자 소개 페이지가 나타났습니다. 같은 작업과 관련된 주소라도 목적이 다를 수 있습니다.
AI 대화 주소는 제작 과정을 여는 자리이고, 관리 주소는 배포와 설정을 보는 자리이며, 사이트 주소는 방문자가 결과를 보는 자리입니다. 어떤 주소를 보내야 하는지 알면 로그인 화면이 나왔을 때 코드를 전부 고치는 혼란을 줄일 수 있습니다. 주소 이름만 보고 추측하기보다 실제로 그 주소에서 무엇이 열리는지 봅니다.
주소를 다른 사람에게 보내기 전에
공개용 파일과 보관용 복사본
사이트의 첫 화면을 index.html로 제공하더라도 보관용 폴더 이름에는 날짜나 확인 상태를 붙일 수 있습니다. 공개 파일 이름을 계속 바꾸는 대신 보관하는 시점을 구분하는 방식입니다. 나중에 어떤 파일을 올렸는지 알 수 있도록 기록하면 공개 결과와 원본을 연결하기 쉽습니다.
복사본이 여러 개 생기면 어느 것이 최신인지 정해야 합니다. 최신이라는 말도 단순히 마지막으로 받은 파일인지, 마지막으로 작동을 확인한 파일인지 다를 수 있습니다. ‘수정 중’과 ‘확인 완료’를 구분해 두면 되돌릴 때 기준을 찾기 쉽습니다.
검토용 공개와 비공개는 같지 않습니다
Preview라는 이름은 보통 변경을 검토하는 용도를 가리킵니다. 그 주소를 누가 열 수 있는지는 보호 설정에 따라 달라질 수 있습니다. 이름에 미리보기가 들어 있다고 해서 민감한 자료를 넣어도 된다고 생각하지 않습니다. 로그인하지 않은 환경에서 실제로 어떻게 열리는지 확인할 수 있습니다.
반대로 로그인 화면이 나온다고 반드시 배포가 실패한 것은 아닙니다. 접근 보호가 의도된 설정일 수 있습니다. 누구에게 보여 주려는지 정하고 그 목적과 현재 동작을 비교합니다. 이 확인은 코드의 내용과 별도로 공개 설정에서 살펴야 할 수 있습니다.
공개 뒤의 첫 확인은 새 환경 확인입니다
도구 안에서 잘 보이던 화면을 인터넷 주소에서 다시 보는 것은 같은 확인을 쓸데없이 반복하는 일이 아닙니다. 파일 위치, 외부 링크, 자료 저장 공간과 접근 범위가 달라질 수 있기 때문입니다. 공개 주소를 기준으로 글과 동작을 다시 확인해야 합니다.
확인 결과를 적을 때는 어떤 주소에서 했는지도 함께 남깁니다. ‘미리보기에서 저장 확인’과 ‘공개 주소에서 저장 확인’은 다른 기록입니다. 이 차이를 알면 나중에 특정 환경에서만 생기는 문제를 설명하기가 쉬워집니다.
“미리보기 주소를 친구에게 보내도 되나요?”
주소의 접근 범위와 자료의 공개 가능 여부를 먼저 확인합니다. 어떤 미리보기는 로그인한 계정만 볼 수 있고, 어떤 검토용 주소는 보호 설정에 따라 다른 사람도 열 수 있습니다. 주소에 Preview라는 말이 있다고 접근 범위가 자동으로 정해지는 것은 아닙니다.
보내기 전에 그 주소에서 실제로 무엇이 열리는지 확인합니다. 제작 대화나 배포 관리 화면인지 방문자가 볼 페이지인지 구분합니다. 예시 자료로 검토를 부탁하는 경우에도 상대가 접속할 수 있는지와 불필요한 개인 자료가 없는지 확인하면 됩니다.
친구에게 로그인 화면이 나온다면 코드 전체를 다시 만드는 것보다 주소와 보호 설정을 먼저 봅니다. 내가 볼 수 있다는 것과 상대도 볼 수 있다는 것은 다른 조건입니다. 상대의 계정에 불필요한 권한을 요구하거나 비밀번호를 공유하는 방식으로 간단히 해결하려 하지 않습니다.
꼭 기억하세요
미리보기·보관·공개는 별개의 단계입니다. 주소가 생기면 그 주소에서 다시 확인합니다.