본문으로 건너뛰기
Agent.SpaceAgent 입문Agent.Space 열기
Agent 입문7장07 / 08

웹페이지를 다 만들었다면: 저장, 미리보기, 공유는 각각 다른 단계예요

약 6분 분량

이 장을 읽고 나면지금 보고 있는 게 어느 버전인지 알고, 알맞은 전달 방법을 고를 수 있어요.

드디어 마음에 들어서 친구들에게 초대 페이지를 보여 주려고 해요. 브라우저 주소를 복사해서 보냈는데, 친구가 안 열린대요.

Agent에게 웹사이트를 다시 만들라고 하기 전에 잠깐만요. 복사한 건 아마 여러분 Workspace 안의 주소일 거예요. 내 Workspace에서 페이지가 보이는 것과, 다른 사람이 공개 링크로 들어올 수 있는 건 서로 다른 일이에요.

먼저 눈앞의 네 가지를 구분해요

보이는 것무슨 뜻인지
채팅 속 답장이나 코드Agent가 내용을 보여 줬을 뿐, 파일이 저장됐다는 뜻은 아니에요
파일 영역의 index.html프로젝트에 실제 파일이 있어서 보거나 계속 고칠 수 있어요
사이트 미리보기정해진 한 버전의 전체 웹사이트이고, Workspace 멤버만 볼 수 있어요
“게시됨”이 붙은 공개 링크고른 버전이 밖에 공개되어, 링크가 있는 사람은 누구나 열 수 있어요

이 네 가지는 한 프로젝트 안에 함께 있을 수 있지만, 서로를 “다 됐다”는 증거로 대신 쓸 수는 없어요. 특히 “게시됨”은 사이트에 실제로 보이는 상태와 공개 링크로 확인해야 해요. 채팅 요약 한 줄만 믿으면 안 돼요.

저장된 웹페이지 파일이 미리보기 페이지와 이어지고, 미리보기와 공개 접속을 뜻하는 지구본 사이에 직접 눌러야 하는 게시 버튼이 있는 모습.
파일, 미리보기, 공개 버전은 각각 한 단계씩이에요. 준비가 되면 게시할지는 여러분이 정해요.

파일 미리보기와 전체 웹사이트 미리보기

파일 영역에서 index.html을 열면 파일 미리보기가 보여요. 우리처럼 한 파일에 다 들어 있는 단일 페이지를 확인하기에 좋아요. 페이지가 다른 파일이나 외부 리소스를 불러와야 한다면 미리보기에 “일부 콘텐츠는 전체 웹사이트 미리보기가 필요합니다.”라는 안내가 떠요.

전체 웹사이트는 여러 파일로 이루어질 수 있어요. 이럴 때 파일 미리보기 위의 “전체 웹사이트 미리보기”를 누르면, Agent.Space가 웹페이지 폴더 전체를 하나의 사이트로 준비해서 대화 오른쪽에 열어 줘요. 위쪽에는 “웹사이트 폴더: weekend-walk · Workspace 멤버만 열람 가능”이라고 적혀 있어요. 우리가 페이지를 weekend-walk 폴더에 따로 넣은 이유가 바로 이거예요. 파일이 Workspace 최상위 폴더에 있으면 여기서 “전체 웹사이트에는 전용 폴더가 필요합니다.”라는 안내가 뜨고, “Agent에게 웹사이트 정리 요청”을 눌러 폴더 하나로 옮겨 달라고 할 수 있어요.

준비된 사이트는 나중에 왼쪽 사이드바 “더 보기”의 “사이트”에서 언제든 찾을 수 있어요. Agent가 대화 중에 준비한 웹사이트도 카드로 나타나는데, 그 카드는 그 답장을 만들 때의 버전에 고정되어 있어요.

파일을 고쳤다면 미리보기 업데이트를 잊지 마세요

사이트에는 준비한 그 순간의 버전이 저장돼요. 나중에 원본 파일을 고쳐도, 사이트 도구 모음에서 새로고침을 누르면 같은 버전을 다시 불러올 뿐 새 작품으로 바뀌지 않아요. “미리보기 업데이트”를 누르고, 새 버전이 준비되면 그때 보세요.

초대장을 한 번 내보낸 뒤에 다시 원고를 고친 것과 비슷해요. 원고가 바뀌었으니, 이미 내보낸 건 다시 내보내야 하죠.

새 버전이 맞는지 확인하고 싶다면 지난 장의 수정을 활용하세요. 모이는 시간이 제목 아래로 옮겨졌는지 보면 돼요. 파일에서는 고쳐졌는데 사이트에서는 아직 맨 아래에 있다면, 먼저 미리보기를 업데이트하세요. 여러분이 예전 버전을 보고 있었다는 이유로 Agent가 같은 파일을 두 번 고치게 하지 마세요.

Agent가 디버깅을 위해 개발 서버를 띄우면, 채팅에 “개발 미리보기”라고 표시된 웹페이지가 나타나기도 해요. 이건 실행 중인 서버에 의존하고, 길어야 몇 시간만 열 수 있어요. 서버가 멈추거나 Workspace가 잠들면 Agent에게 다시 실행해 달라고 해야 해요. 한 번 열렸다고 그 임시 주소가 영원히 유효한 건 아니에요.

내 컴퓨터에도 한 부 남기고 싶다면

파일 영역에서 index.html 줄의 “…” 메뉴를 누르고 “파일 다운로드”를 고르세요. 이번 작업은 한 파일에 다 담고 외부 리소스를 쓰지 않게 했으니, 내려받은 뒤 내 브라우저로 바로 열 수 있어요.

나중에 이미지, 스크립트처럼 여러 파일이 들어간 페이지를 만든다면, 필요한 파일도 함께 챙겨야 해요. 파일 영역에서는 한 번에 파일 하나씩 내려받아요. 폴더 전체가 필요하면 Agent에게 압축 파일로 묶어 달라고 하세요.

다운로드는 직접 보관하거나 다른 사람에게 파일을 건넬 때 좋아요. 받는 사람이 갖는 건 파일 사본이에요. 나중에 Workspace에서 원본을 고쳐도 그 사람의 사본은 저절로 바뀌지 않아요.

준비가 되면, 그때 공개 게시를 정해요

먼저 사이트에서 공유할 버전을 한 번 훑어본 다음, 사이트 도구 모음의 “사이트로 게시”를 누르세요. 확인 창이 알려 줄 거예요. 링크가 있는 사람은 누구나 볼 수 있고, 나중에 Workspace 초안을 고쳐도 공개 사이트는 저절로 바뀌지 않는다고요. 문제가 없으면 “게시”를 누르세요.

게시가 끝나면 사이트에 “게시됨”이 붙고, 옆에 “공개 링크 복사”와 “공개 사이트 보기”가 나타나요. 공개 링크는 고정된 주소라서 나중에 업데이트를 게시해도 바뀌지 않아요. 복사해서 로그인하지 않은 브라우저 창에서 한 번 열어 보세요. 다른 사람에게 보이는 게 내가 보여 주고 싶은 내용인지 확인하는 거예요.

게시하면 이 버전이 밖에서 보이게 되니, 먼저 예시 행사를 한 번 더 확인하세요. 이번은 지어낸 연습이니 “예시 행사”와 가상의 장소라는 설명은 남겨 둬야 해요. 실제 행사로 바꿀 때는 날짜, 장소, 연락처 정보를 꼭 확인하세요.

나중에 고쳐도 공개 버전은 저절로 안 바뀌어요

이후에 계속 고친다면 순서는 이래요. 파일 고치기 → “미리보기 업데이트” → 새 버전 확인하기. 이때 사이트에 “게시되지 않은 변경 사항”이 보이는데, Workspace에서 보는 버전이 공개 버전보다 새롭다는 뜻이에요. 문제없으면 “업데이트 게시”를 누르세요. 그래야 사람들이 보는 내용이 바뀌어요.

“게시 및 공유” 창에서는 지금까지 게시한 버전을 보고, 예전 버전으로 되돌리거나, 사이트를 내릴 수도 있어요. 내린 뒤에도 필요하면 다시 게시할 수 있어요.

당분간 게시하지 않아도 괜찮아요. 만들고, 파일을 저장하고, 미리보기를 확인한 것만으로도 첫 연습은 충분히 완성이에요. 다음 장에서는 친구들을 Workspace로 불러요. 한 대화에서 함께 이야기하고, 각자 Agent를 불러 일을 나누고, 다시 함께 이 초대 페이지를 확인해 볼게요.

더 자세한 설명이 필요하다면 영어로 된 미리보기, 게시, 내보내기 가이드를 이어서 읽어 보세요.