이번 장에서는 진짜로 만들어 봐요. 연습할 행사 이름은 “주말 산책 모임”이에요. 속도 경쟁도 없고, 걸음 수 자랑도 없고, 지치면 잠깐 앉아 쉬어도 돼요.
마지막에는 weekend-walk 폴더와 그 안의 index.html 파일 하나가 생겨요. HTML은 웹페이지 파일 형식 중 하나예요. 지금은 이 파일에 페이지 내용을 저장할 수 있고, 열어서 볼 수도 있다는 것만 알면 돼요. 웹페이지를 폴더에 따로 넣는 건 7장에서 바로 전체 웹사이트로 미리 보고, 게시할지 정할 수 있게 하려는 거예요.
시작하기 전에 두 가지만 준비해요
먼저 Agent.Space를 열고 계정에 로그인하세요. 이 가이드는 지금 탭에 그대로 두고 다른 탭에서 작업하면, 언제든 돌아와 볼 수 있어 편해요.
그다음 쓸 수 있는 사용 한도가 있는지 확인하세요. Agent.Space에는 두 가지 결제 방식이 있어요. 플랜과, 쓴 만큼 내는 크레딧이에요. 새로 가입한 계정은 보통 “신규 가입 보너스”를 받는데, 먼저 사용량에 따라 요금이 매겨지는 모델에 쓸 수 있어요. 정확한 금액, 유효 기간, 쓸 수 있는 모델은 제품 화면에 보이는 대로예요. 쓸 수 있는 한도가 없다면 전체 흐름을 먼저 끝까지 읽어 두세요. 같은 작업을 몇 번이고 다시 보낼 필요는 없어요.
이번에는 이미지나 도메인을 준비할 필요도, 소프트웨어를 설치할 필요도 없어요. 행사, 장소, 코스는 모두 연습용으로 지어낸 자료예요.
1. 이 일을 위한 Workspace 만들기
처음 로그인하면 Agent.Space가 불러 드릴 이름을 적고 간단한 질문 몇 개에 답해 달라고 한 뒤, 환영 페이지로 안내해요. 여기에는 카드가 두 장 있어요. “예시 살펴보기”는 읽기 전용 예시 프로젝트를 열어 줘서, 다른 사람이 뭘 만들었는지 먼저 구경하기 좋아요. “Workspace 만들기”가 이번에 우리가 갈 길이에요. 이미 Workspace가 있다면 왼쪽 위의 Workspace 전환 메뉴에서 “새 Workspace”를 고르면 똑같아요.
“새 Workspace” 창에서 이 세 가지를 채워요.
- 이름: 기본값은 “내 Workspace”예요. “주말 산책 모임”으로 바꿔요.
- 클라우드 컴퓨터 위치: Agent의 클라우드 컴퓨터와 Workspace 파일이 이 지역에 놓여요. 시간대에 맞춰 하나를 추천해 주니, 보통은 그대로 쓰면 돼요. 만든 뒤에는 바꿀 수 없어요.
- 시간대: 기본값은 브라우저 설정을 따라요. 모든 멤버와 Agent가 이 시간대를 함께 써요.
“Workspace 만들기”를 누르세요. 다 되면 왼쪽 위에 방금 적은 이름이 보여요. 여기가 이번 프로젝트의 보금자리예요.
2. Agent와 호환 모델 고르기
만들고 나면 페이지가 바로 물어봐요. “어떤 Agent와 시작할까요?” 아래에 늘어선 카드들이 고를 수 있는 Agent예요. Codex가 기본으로 선택되어 있고, Claude Code나 목록에 있는 다른 사용 가능한 Agent로 바꿔도 돼요.
모델은 입력창 아래의 모델 버튼에서 골라요. 보통 Agent.Space가 지금 쓸 수 있는 모델 하나를 미리 골라 둬요. 처음에는 그대로 둬도 되고, 사용 한도가 있는 다른 호환 모델로 바꿔도 돼요. Agent와 모델의 차이는 언제든 2장에서 다시 볼 수 있어요.
화면에 “플랜 필요”, “할당량 소진”, “크레딧 부족”이 뜨면 옆에 있는 버튼으로 플랜을 고르거나 충전하세요. 모델이 호환되지 않을 때, 사용 한도가 없을 때, 서비스가 잠시 안 될 때는 해결 방법이 서로 달라요. 먼저 화면에 나온 정확한 이유를 확인하세요.
3. 아래 작업을 보내 보세요
여러분이 보내는 작업 요청을 Prompt라고도 해요. 아래 내용은 그대로 복사해서 써도 돼요. 먼저 한 번 그대로 해 보고, 그다음 내 행사로 바꿔 보세요.
이 지시문에는 목표, 자료, 완료 방법이 들어 있어요. 내용이 조금 많은 건 나중에 대조해 확인할 거리를 만들기 위해서예요. Agent가 무슨 마법 같은 형식만 알아듣기 때문이 아니에요. 타이핑하기 귀찮다면 입력창의 “음성 입력”을 눌러 말로 해도 돼요. 말을 마치면 글자로 바뀐 내용을 한 번 확인하세요.
4. 일하는 모습을 보고, 질문에도 귀 기울여요
보내고 나면 Agent는 현재 폴더를 읽고, 파일을 만들고, 검사를 실행할 수 있어요. 도구 이름과 실행 기록이 보이는 건 정상이에요. 지금 작업 중이라는 단서예요.
어떤 스타일을 원하는지 답장에서 물어볼 수도 있어요. 그냥 입력창에 답하면 돼요. “심플하게, 친구한테 보내는 주말 초대장처럼요.” Agent가 아직 바쁠 때 보낸 내용은 먼저 대기열에 들어갔다가, 차례가 오면 실행돼요.
어떤 Agent는 특정 작업을 하기 전에 “요청자의 확인 필요”라는 권한 요청을 띄워요. 버튼에 적힌 글자는 Agent가 직접 정해요. 무엇을 하려는지, 어디에 하려는지 잘 보고 결정하세요. 확실하지 않으면 “이 요청 취소”를 고르면 돼요. 이번 작업 범위는 초대 페이지를 만들고 확인하는 것뿐이에요.
다 끝나면 먼저 요약에 weekend-walk/index.html이 있는지, 어떤 확인은 끝났고 어떤 건 아직인지 보세요. “완료”라는 말만 보고 창을 닫지는 마세요.
5. 파일을 찾아 열어 봐요
Agent의 답장에 이 파일 카드가 보이면 눌러 보세요. 오른쪽에 바로 열려요. 왼쪽 사이드바의 “파일”로 들어가 weekend-walk 폴더를 열고 index.html을 눌러도 돼요. HTML 파일은 기본적으로 미리보기로 열려요. 코드를 보고 싶으면 “편집”이나 “분할 보기”으로 바꾸세요.
여기서 보이는 건 파일 미리보기예요. 페이지와 스타일이 한 파일에 다 들어 있어서 온전히 보여요. 코드를 채팅에만 줬다면 이렇게 한마디 덧붙이면 돼요.
파일은 있는데 열리지 않는다면, 화면에 나온 정확한 오류를 Agent에게 알려 주고, “파일 열기” 단계에서 실패했다고 말해 주세요. 원인부터 찾고, 그다음 어떻게 고칠지 정해요.
6. 꼼꼼하지만 트집 잡지 않는 검사관 되기
페이지 폭을 휴대폰 정도로 좁혀서 한 번 읽어 보고, 버튼도 눌러 보세요. 이런 것들을 확인해요.
- 행사 이름, 예시 표시, 시간, 장소, 코스, 준비물이 다 있어요.
- 작은 화면에서도 글자가 잘 읽히고, 페이지 전체를 좌우로 끌 필요가 없어요.
- “참여 방법 보기”를 누르면 정말 참여 방법으로 이동해요.
- 페이지가 몰래 정보를 입력하는 신청서로 바뀌지 않았어요.
레이아웃이 여기 설명과 똑같지 않아도 괜찮아요. Agent가 만드는 스타일은 매번 다를 수 있으니, 먼저 이 요구 사항을 채웠는지 보세요.
첫 웹페이지가 열린다면 이번 장에서 가장 중요한 일은 끝났어요. 다음 장에서는 구체적인 한 곳을 골라 고쳐 보면서, “뭔가 좀 아쉬운데”를 Agent가 실행할 수 있는 요청으로 바꾸는 법을 알아볼게요.