설치 없이 시작하는 첫 화면

이 장은 프로그램을 설치하지 않고 브라우저만으로 화면 하나를 만들어, 내 휴대폰에서 열어 보는 데까지 가는 길을 다룹니다. 말로 부탁하는 방식에서 "만들게 하는" 방식으로 넘어가는 첫 번째 실습이며, 완전 초보자 대상 이틀 과정의 첫째 날 흐름을 옮긴 것입니다.

물어보기에서 만들게 하기로

지금까지 AI를 쓰는 방식은 대체로 물어보는 것이었습니다. "이번 주 할 일을 정리하는 방법을 알려 줘"라고 하면 글이 돌아옵니다. 이 장에서는 같은 일을 이렇게 바꿉니다. "이번 주 할 일을 날짜별로 한눈에 보는 화면을 만들어 줘." 이제 돌아오는 것은 글이 아니라 눈으로 볼 수 있는 화면입니다.

4장에서 본 순환이 그대로 적용됩니다. 말로 설명하고, AI가 만들고, 결과를 보고 고칠 곳만 다시 말합니다. 마음에 들 때까지 되풀이합니다. 이 장은 그 순환을 가장 작은 크기로 한 번 완주합니다.

핵심 처음 목표는 잘 만든 프로그램이 아니라, 말로 시켜서 화면이 나오고 그것이 내 휴대폰에서 열리는 경험입니다.

이 장의 범위와 안전선

범위는 화면 하나입니다. 로그인, 결제, 남의 개인정보가 얽힌 것은 이 장의 범위 밖입니다. 연습은 아래 규칙을 지키며 합니다.

• 가상의 정보만 씁니다. 실제 이름, 연락처, 건강 정보, 남의 사진과 글은 넣지 않습니다.
• 카드 입력, 결제, 업그레이드 창이 나오면 입력하지 않고 닫습니다.
• 약관과 동의 문구는 읽고 직접 누릅니다.
• 같은 문장을 두 번 보내지 않고, 결과가 나올 때까지 기다립니다.
• 검색 결과의 광고 링크는 누르지 않고, 서비스 주소를 주소창에 직접 입력합니다.
• 영어 화면이 나오면 버튼 이름의 뜻을 AI에게 물어 찾습니다.

준비물과 도구 고르기

필요한 것은 브라우저와 계정 하나입니다. 이 책은 Claude를 기준으로 쓰므로, 웹에서 Claude에게 화면을 만들게 하고 결과를 대화 옆 화면(아티팩트)에서 봅니다. 아티팩트는 8장에서 설명했습니다. 같은 일을 하는 다른 브라우저 서비스도 있지만, 이 장의 요령은 도구가 달라도 같습니다.

도구를 고를 때 볼 점은 세 가지입니다.

• 설치 없이 브라우저에서 쓸 수 있는가
• 만든 화면을 바로 보여 주는가
• 만든 자리에서 주소를 받을 수 있는가

세 번째는 도구마다 다릅니다. 화면까지만 보여 주고 주소는 주지 않는 도구도 있습니다. 아티팩트의 공유 방식은 아티팩트 안내에서 확인합니다(2026년 11월 기준). 주소를 주지 않는 도구로 만들었다면 이 장 끝의 다른 길을 씁니다.

무료로 쓸 수 있는 범위와 사용량 한도는 서비스마다, 시기마다 다릅니다. 숫자는 이 책에 적지 않았으니 요금제 페이지에서 직접 확인합니다. 한도가 있는 도구에서는 습관 두 가지가 도움이 됩니다.

• 짧게, 한 번에 제대로 요청합니다.
• 고칠 점은 모아서 한 번에 보냅니다.

긴 요청과 긴 대화일수록 한도를 더 많이 쓰기 때문입니다. 한도에 걸리면 새 계정을 만들지 말고, 시간을 두고 이어 가거나 옆 사람과 짝으로 진행합니다.

첫 시도: 한 줄 요청

먼저 아무 준비 없이 한 줄로 시켜 봅니다. 이 결과가 뒤의 비교 기준이 됩니다. 새 대화를 열고 아래 문장을 한 번만 보냅니다.

이번 주 할 일을 날짜별로 한눈에 보는 화면을 만들어줘.
화면의 모든 글자는 한국어로 해줘.

대화 옆에 화면이 나타납니다. 다른 사람과 모양이 달라도 정상입니다. 같은 요청에도 결과가 매번 달라지는 것은 1장에서 설명한 성질입니다. 마지막 줄은 이후 모든 요청에 붙이는 정형 문구로 삼습니다. 영어로 나오는 일을 막아 줍니다.

화면을 보고 아쉬운 점을 적어 둡니다. 누구를 위한 화면인지, 무엇을 빼야 하는지 AI가 알 수 없었으니 당연히 아쉽습니다.

만들 것 하나 고르기

연습할 주제를 하나 정합니다. 기준은 세 가지입니다.

• 반복해서 하는 일
• 손으로 적는 일
• 기억에 의존하는 일

가상의 예로는 가족 일정표, 여행 준비 점검표, 개인 사업의 간단한 장부, 구직 활동 관리표가 있습니다. 이 장은 가족 일정표로 진행합니다. 한 주제를 끝까지 끌고 가는 편이 이해가 빠릅니다. 이어지는 6장도 같은 주제로 이어 갑니다.

범위는 화면 하나까지입니다. 여러 화면, 로그인, 저장 기능은 욕심내지 않습니다.

요청문은 네 칸

한 줄 요청이 아쉬웠던 이유는 정보가 없었기 때문입니다. 요청문에는 네 칸을 채웁니다.

3장의 맥락, 제약, 출력 형식과 같은 틀입니다. "하지 않을 것"이 가장 중요한 칸입니다. 이 칸이 비어 있으면 AI가 범위를 멋대로 넓힙니다.

AI에게 요청문을 쓰게 하기

네 칸을 처음부터 쓰기 어렵다면 메타 프롬프팅으로 AI가 쓰게 합니다. 3장의 되묻게 하기와 비슷하지만 두 가지가 다릅니다. 질문을 번호를 붙여 한꺼번에 받고, 산출물이 "화면을 만드는 AI에게 그대로 붙여 넣을 요청문"입니다. 새 대화를 열고 대괄호를 내 것으로 바꿔 보냅니다.

나는 [가족 일정을 챙기는 사람]이야. [우리 가족 이번 주 일정표] 화면을 AI로 만들고 싶어.
먼저 나에게 질문을 5개 이하로 번호를 붙여 한꺼번에 물어봐 줘. 내가 답하기 전에는 요청문을 쓰지 마.
내 답을 받으면, 화면을 만드는 AI에게 그대로 붙여 넣을 요청문을 써 줘.
요청문에는 누가 쓰는지, 무엇을 위한 것인지, 화면에 보일 것, 빼 줄 것(로그인 · 결제 · 데이터베이스 · 실제 이름과 연락처)을 넣고, 한국어로, 화면 하나로 끝나게 써 줘.

질문에는 번호를 붙여 짧게 답합니다. 답은 가상의 정보로만 합니다. 완성된 요청문은 메모장에 복사해 보관합니다. 이 요청문은 이 장에서 계속 씁니다.

한 번에 하나씩 묻는 3장의 방식과 번호를 붙여 한꺼번에 받는 이 방식 중 어느 쪽이 낫다고 정해진 것은 없습니다. 생각이 정리되지 않았으면 하나씩, 답이 빠르게 나오면 한꺼번에 받는 편이 편합니다.

같은 대화에서 다시 만들고 비교하기

요청문을 만든 같은 대화에서 아래 문장을 보냅니다.

이 요청문대로 하나의 HTML 파일로 화면을 만들어줘. 로그인과 데이터베이스는 빼줘.

HTML은 웹 화면을 만드는 글 형식이며, 파일 하나로 열립니다. 이번 화면을 첫 시도의 화면과 나란히 놓고 비교합니다. 가상의 예로, 첫 화면이 "화 회식, 수 요가" 정도의 나열이었다면 요청문 화면은 "요일 · 누구 · 할 일"이 표로 정돈되어 나옵니다. 차이가 요청문에서 왔다는 것을 눈으로 확인하는 것이 이 실습의 목적입니다.

고칠 점은 모아서 한 번에

결과를 보고 확인할 것은 글자, 순서, 빠진 것입니다. 마음에 안 드는 곳을 바로바로 보내지 말고 메모장에 모아 적은 뒤 한 번에 보냅니다.

제목 아래에 "이번 주 일정 ○개"를 보여주고, 오늘 칸은 굵은 테두리로 하고, 글자를 지금보다 크게 해줘.

세 가지를 한 번에 시키면 요청이 한 번으로 끝납니다. 하나씩 보내면 세 번을 보내야 하고 대화가 길어집니다. 사진은 AI에게 만들게 하지 말고, 가지고 있는 사진이나 저작권 걱정이 없는 이미지를 씁니다.

4장은 한 번에 하나씩 고치라고 했습니다. 두 방식은 목적이 다릅니다. 무엇이 효과가 있었는지 알고 싶을 때는 하나씩, 사용량 한도가 있는 도구에서 횟수를 아껴야 할 때는 모아서 보냅니다. 서로 영향을 주지 않는 가벼운 수정은 모으고, 어디서 문제가 생겼는지 모를 때는 하나씩 확인합니다.

막힐 때 쓰는 문장 다섯 가지

오류 문구는 요약하지 않고 그대로 붙입니다. 4장에서 말한 원칙과 같습니다.

주소 받고 휴대폰에서 열기

화면이 만족스러우면 주소를 받습니다. 주소가 있으면 누구나 같은 한 곳을 보고, 고치면 같은 주소에서 최신이 보입니다. 파일을 메신저로 보내는 방식과의 차이는 18장에서 표로 설명합니다.

공개하기 전에 확인합니다.

1. 화면에 가상의 연습 내용만 있고 실명과 전화번호가 없는가.
2. 공개 범위가 어디까지인가. 주소만 알면 누구나 열 수 있는 방식은 아닌가.
3. 만든 도구가 무엇을 공개하는지 화면 안내를 읽었는가.

그다음 도구가 안내하는 공유 또는 게시 기능으로 주소를 받습니다. 받은 주소는 메모해 두고, 휴대폰 브라우저의 주소창에 직접 입력해 열어 봅니다. 설치할 앱은 없습니다. 내 휴대폰에서 내 화면이 열리면 이 장의 도달선에 닿은 것입니다.

만든 도구가 주소를 주지 않는다면 화면을 HTML 파일로 받아 두었다가, 6장의 방법으로 호스팅 서비스에 올려 주소를 붙입니다.

흔한 실수

• 한 줄로 "만들어 줘"만 보냅니다. 누구를 위한 것인지, 무엇을 뺄지 알 수 없어 산으로 갑니다.
• 고칠 점을 하나씩 보내다 한도에 걸립니다.
• 실제 이름과 연락처로 연습합니다. 공개 주소는 검색에 잡힐 수 있습니다.
• 결제 창이 떠서 당황해 카드를 입력합니다. 연습에 결제는 필요 없으니 닫습니다.
• 다른 사람의 화면과 모양이 다르다고 걱정합니다. 같은 요청에도 결과는 다르게 나옵니다.

실습

1. 한 줄과 요청문 비교하기

위의 한 줄 요청과 요청문 결과를 나란히 놓고, 가장 크게 달라진 점 세 가지를 메모장에 적습니다. 그다음 아래 문장을 보내 비교의 이유를 AI에게 설명받습니다.

방금 만든 두 화면에서 달라진 점이 요청문의 어느 칸 때문인지 쉬운 말로 설명해줘.

2. 모아서 한 번에 고치기

내 화면에서 고칠 점을 세 가지 이상 메모장에 적고 한 번에 보냅니다. 말하지 않은 부분은 그대로 두라는 문장을 함께 붙입니다.

아래 고칠 점을 반영해줘. 말하지 않은 부분은 그대로 둬.
[메모장에 적은 고칠 점]

3. 공개 전 점검과 주소 열기

실명과 연락처가 없는지 점검하고, 주소를 받아 휴대폰에서 직접 입력해 열어 봅니다. 열리지 않으면 어떤 화면이 나왔는지 그대로 AI에게 붙여 물어봅니다.

정리

• 물어보기는 글을 받고, 만들게 하기는 화면을 받습니다. 순환은 4장과 같습니다.
• 한 줄 요청과 네 칸 요청문(쓰는 사람, 목적, 화면, 하지 않을 것)을 나란히 비교하면 요청문의 힘이 눈에 보입니다.
• 요청문이 막막하면 AI에게 질문을 받게 한 뒤 요청문을 쓰게 합니다.
• 사용량 한도가 있는 도구에서는 짧게, 한 번에, 고칠 점은 모아서 보냅니다.
• 공개 전에는 가상 내용만 있는지 확인하고, 받은 주소를 내 휴대폰에서 열어 봅니다.