말로 만드는
내 소개 페이지 한 장


개발자가 AI에게 왜 이렇게 부탁하는지 쉬운 말로 풀어 드려요.
글이나 사진을 이름 붙여 저장한 것이 파일이에요. 모양과 색을 정하는 일이 디자인이에요.
오늘의 순서
- 소개 글로 페이지를 만듭니다.
- 사진을 넣고 모양과 색을 정하는 디자인 규칙을 줍니다.
- 내 글과 사진으로 바꾼 뒤 한 가지를 고칩니다.
- 파일을 받아 다시 열고 폰에서도 확인합니다.
시작 전에 세 곳만 찾아요
123노트북을 작동시키는 운영체제에는 윈도우와 맥이 있어요.
- 인터넷 창을 여는 프로그램을 크롬(Chrome)이라고 해요. 크롬 주소 칸에 https://claude.ai를 입력하세요.
- 본인 정보를 확인해 서비스를 여는 것이 로그인이에요. 로그인은 본인이 해 주세요.
- 왼쪽 위의 새로 만들기를 누르세요. 글을 쓰는 곳을 입력칸이라고 해요. 가운데 입력칸을 찾아보세요.
- 입력칸 오른쪽의 위쪽 화살표가 보내기예요. 글을 붙인 뒤 누릅니다. 아직 누르지 마세요.
눈으로 확인
- 새로 만들기와 입력칸, 보내기 화살표를 찾았습니다.
- 복사는 글을 임시로 담고, 붙여 넣기는 담은 글을 옮기는 일이에요. 윈도우는 Ctrl+C와 Ctrl+V, 맥은 Command+C와 Command+V를 씁니다.
- 입력칸에서 다음 줄로 내려 쓰는 줄 바꿈은 Shift+Enter예요.
재료와 내 소개를 준비해요
- 글로 부탁하면 답이나 화면을 만들어 주는 도구가 AI예요. 오늘은 AI 서비스인 Claude를 사용해요.
- 서비스를 쓰는 내 정보를 계정이라고 해요. 본인 무료 계정으로 실습합니다.
- 컴퓨터에 일을 시키는 글은 코드예요. 오늘은 코드를 직접 입력하지 않고 부탁한 뒤 결과를 보며 고칩니다.
- 파일을 모아 두는 공간이 폴더예요. 바탕화면에 내페이지_재료와 내페이지_결과 폴더를 만드세요.
- 스마트폰, 소개 글 서너 줄, 사진 네 장. 노트북과 충전기를 가져오시면 좀 더 편하게 수업할 수 있어요. 사진이 없으면 제공된 꽃집 사진 네 장을 씁니다. 얼굴 사진과 다른 사람의 개인 정보, 회사 비공개 자료는 빼 주세요.
- AI에게 보내는 요청 글을 프롬프트라고 해요. 다음 쪽부터 요청 글 전체를 복사합니다.




1단계: 요청 글과 설명
- 새로 만들기를 누르세요. 1단계만 새 대화에서 시작합니다.
- 4쪽 요청 글 전체를 복사해 가운데 입력칸에 붙여 넣으세요.
- 입력칸 오른쪽 위쪽 화살표를 한 번 누르세요.
- ‘생각 중’이 보이면 기다리세요. 답에 결과 카드가 나오면 눌러 오른쪽 결과 창을 여세요. 결과 창이 이미 열렸으면 바로 확인합니다.
- 요청 글과 첨부 상태를 확인한 뒤 한 번만 보냅니다.
강사가 앞선 요청을 해 봤을 때는 단계마다 30~40초쯤 걸렸어요. 이번 요청은 더 걸릴 수 있어요. 만드는 중에는 다시 보내지 말고 기다려 주세요.
답 끝의 확인 사항은 읽으세요. 다음에 할 일을 묻는 질문은 답하지 않고 다음 단계로 넘어가도 돼요.
2쪽 그림의 ①②③ 순서예요.
복사할 요청 글
볼 사람: 나를 처음 만나는 사람입니다.
할 일: 한국어 소개 페이지 한 장을 만들어 주세요. 첫 화면, 소개, 하는 일 카드 3개, 사진 모음, 연락, 맨 아래 한 줄을 넣어 주세요.
자료: 수업용 가상 인물 김하늘입니다. 동네 꽃집을 운영합니다. 계절 꽃으로 작은 꽃다발을 만듭니다. 꽃을 처음 고르는 분도 편하게 둘러보면 좋겠습니다. 하는 일은 꽃 소개, 꽃다발 만들기, 꽃 돌보기입니다.
지킬 것: 첫 화면에 이름, 한 줄 소개, 사진 자리, 연락 구역으로 가는 버튼이 바로 보이게 해 주세요. 위에 큰 빈 곳이나 빈 색 띠를 두지 마세요. 지금은 사진을 넣지 마세요. 없는 경력과 연락처는 만들지 마세요. 발송, 결제, 외부 연결은 넣지 마세요. 컴퓨터와 폰에서 읽기 쉽게 크기와 배치를 맞춰 주세요.
받을 것: 결과 화면과 1_글만.html 파일 하나를 주세요. 외부 설치 없이 열리는 HTML로 만들어 주세요.
요청 글 설명
AI가 만든 페이지를 보여 주는 곳이 결과 화면이에요. 대화에 붙은 작은 결과 카드를 누르면 오른쪽 결과 창에서 볼 수 있어요.
크롬에서 열리는 페이지 파일 형식이 HTML이에요. 이름 끝이 .html이에요.
“외부 설치 없이” 열리고 사진도 파일 안에 담아 달라고 부탁해요. 개발자는 다른 파일이나 프로그램이 없으면 페이지가 열리지 않을 수 있어서 이렇게 부탁해요. 그러면 파일 하나를 받아 크롬처럼 파일을 열 수 있는 앱에서 사진까지 확인할 수 있어요.
컴퓨터와 폰에서 읽기 좋게 크기와 배치를 맞춰 달라고 부탁해요. 개발자는 넓은 화면을 그대로 줄이면 폰에서 글자가 작아질 수 있어서 이렇게 부탁해요. 파일 하나로 두 화면에서 읽기 편한 페이지를 만들 수 있어요.
폰으로 하는 방법은 수업에서 같이 봐요.
1단계: 결과를 확인해요




눈으로 확인
- 김하늘이라는 이름과 꽃집 소개 글이 맞나요?
- 김하늘의 이름과 소개, 사진 자리, 연락 버튼이 첫 화면에 보이나요? 아직 사진은 없어야 합니다.
- 받을 파일: 1_글만.html.
2단계: 요청 글과 설명
- 1단계와 같은 대화에서 계속하세요.
- 입력칸 왼쪽 +를 눌러 준비한 사진 네 장을 고르세요. 여러 장은 윈도우 Ctrl, 맥 Command를 누른 채 클릭해 고르고 선택을 마칩니다. 사진 파일을 입력칸으로 끌어다 놓아도 돼요.
- 입력칸에 사진 네 장이 붙었는지 확인하세요. 사진만 먼저 보내지 마세요.
- 6쪽 요청 글 전체를 같은 입력칸에 붙여 넣고 보내기 화살표를 한 번 누르세요.
- 요청 글과 첨부 상태를 확인한 뒤 한 번만 보냅니다.
12복사할 요청 글
앞에서 만든 페이지에 첨부한 사진 4장을 넣어 주세요. 첫 번째는 첫 화면에, 나머지 세 장은 사진 모음에 넣고 사진 번호만 붙여 주세요.
이름, 글, 하는 일 카드, 구역 순서와 색은 유지해 주세요. 사진 내용을 추측하거나 인터넷 사진으로 바꾸지 마세요. 첫 화면의 이름, 소개, 사진, 연락 버튼이 컴퓨터와 폰에서 바로 보이게 해 주세요.
사진을 파일 안에 포함해 2_사진.html 파일 하나와 결과 화면을 주세요. 사진을 쓸 수 없거나 포함할 수 없으면 알려 주세요.
요청 글 설명
사진이나 파일을 대화에 붙이는 일이 첨부예요. 이 화면에서는 입력칸 왼쪽 +를 눌러요.
쓸 사진을 입력칸에 붙인 뒤 AI에게 그 사진을 넣어 달라고 부탁해요. 개발자는 사진을 주지 않으면 AI가 다른 사진을 넣을 수 있어서 실제 파일을 함께 보내요. 윈도우 파일 탐색기나 맥 Finder에서 사진을 골라 끌어다 놓거나 + 단추로 붙이면 내가 고른 사진을 쓸 수 있어요.
폰으로 하는 방법은 수업에서 같이 봐요.
2단계: 결과를 확인해요




눈으로 확인
- 첫 사진은 첫 화면에, 나머지 세 장은 사진 모음에 보이나요?
- 사진 모음에는 사진 번호가 붙었나요?
- 대화 화면뿐 아니라 받은 파일에서도 사진 네 장이 모두 보이는지 확인하세요.
- 받을 파일: 2_사진.html.
3단계: 요청 글과 설명
- 같은 대화의 아래쪽 입력칸을 찾으세요.
- 8쪽 요청 글을 붙여 넣으세요. 글과 사진은 그대로 두고 모양만 바꿉니다.
- 보내기 화살표를 한 번 누르세요.
- 새 결과 카드를 열어 2단계와 색, 글자 크기, 간격을 비교하세요.
- 요청 글과 첨부 상태를 확인한 뒤 한 번만 보냅니다.
복사할 요청 글
글과 사진, 구역 순서는 그대로 두세요.
옅은 종이 바탕에 진한 회색 글자와 갈색 강조를 써 주세요.
기본 글꼴을 쓰고 본문은 폰에서 읽기 편한 18px 이상으로 해 주세요.
줄과 구역 사이를 넉넉히 띄우고 모서리는 살짝 둥글게 해 주세요.
첫 화면 위에 큰 빈 곳 없이 이름, 소개, 사진, 연락 버튼이 보이게 해 주세요.
새 내용이나 효과는 넣지 말고 결과 화면과 3_디자인.html 파일 하나를 주세요.
요청 글 설명
개발자는 폰에서 글자가 너무 작아지지 않도록 크기를 함께 부탁해요. 18px 글자를 폰에서 직접 읽어 보세요.
글자 모양을 정하는 것이 글꼴이에요.
폰으로 하는 방법은 수업에서 같이 봐요.
폰 카메라의 ‘1200만 화소’에서 화소는 사진을 이루는 작은 점이에요. 화면도 작은 점들로 그려지며, 웹에서는 크기를 px(픽셀)로 나타내요.
아래는 18px 글자 상자를 확대한 그림이에요. 위에서 아래로 18칸을 세어 보세요.

3단계: 결과를 확인해요




눈으로 확인
- 색, 글자 크기, 간격 중 실제로 바뀐 한 가지를 말해 보세요.
- 소개 글과 사진, 구역 순서가 유지됐나요?
- 18px 이상을 요청했더라도 폰에서 편하게 읽히는지는 직접 확인하세요.
- 받을 파일: 3_디자인.html.
4단계: 요청 글과 설명
보내는 법
- 같은 대화에서 계속하세요.
- 내 사진으로 바꾸려면 먼저 입력칸 왼쪽 +로 새 사진을 붙이세요. 유지하려면 사진을 새로 붙이지 않습니다.
- 10쪽 요청 글의 대괄호와 안내를 지우고 볼 사람, 이름, 소개를 채우세요. 사진 조건은 하나만 남기세요.
- 보내기 화살표를 한 번 누르고 결과를 확인하세요.
- 사진과 글이 맞지 않는다는 안내가 나오면 내용을 읽으세요. 바꿀 사진이 있으면 +로 붙이고 ‘사진을 이걸로 바꿔 주세요’라고 보내세요.
복사할 요청 글
볼 사람: [이 페이지를 볼 사람]
예시 이름 김하늘과 꽃집 글을 아래 내 글로 모두 바꿔 주세요.
내 이름: [이름]
한 줄 소개: [소개 한 줄]
내 소개: [소개 글 서너 줄]
하는 일: [하는 일 3개]
연락 방법: [공개할 연락 방법 / 없으면 안내만 남기기]
사진: [앞서 붙인 사진 유지 / 새로 붙인 사진만 사용]
내가 주지 않은 경력, 숫자, 연락처는 만들지 마세요. 자료가 없는 내용은 빼고 구역과 디자인은 유지해 주세요. 발송, 결제, 외부 연결은 넣지 마세요.
결과 화면과 내페이지_초안.html 파일 하나를 주세요. 바꾸지 못한 곳은 알려 주세요.
요청 글 설명
초안은 처음 만든 것으로, 앞으로 고쳐 갈 파일이에요.
폰으로 하는 방법은 수업에서 같이 봐요.

4단계: 결과를 확인해요




눈으로 확인
- 김하늘과 꽃집 예시 글이 내 글로 바뀌었나요?
- 내가 주지 않은 경력, 숫자, 연락처가 생기지 않았나요?
- 사진 유지와 교체 중 내가 고른 조건이 맞나요? 사진과 소개가 맞지 않는다는 안내를 놓치지 마세요.
- 받을 파일: 내페이지_초안.html.
5단계: 요청 글과 설명
보내는 법
- 고치기 전에는 마지막 결과 카드의 다운로드 화살표를 눌러 파일부터 받아 보관하세요.
- 잘못된 글이나 잘리는 부분 중 한 가지만 고르세요.
- 12쪽 빈칸을 채워 같은 대화의 입력칸에 붙여 넣으세요.
- 보내기 화살표를 한 번 누르세요.
- 새 결과를 열어 요청한 부분이 실제로 바뀌었는지 보세요.
복사할 요청 글
지금 잘되는 부분은 유지하고 아래 한 가지만 고쳐 주세요.
어디에서: [예: 첫 화면]
무엇을 했을 때: [예: 폰 크기로 열었을 때]
지금 모습: [예: 사진이 너무 커서 연락 버튼이 안 보입니다]
원하는 모습: [예: 사진 높이를 줄여 첫 화면에 연락 버튼도 보이게 해 주세요]
다른 글, 사진과 구역은 유지해 주세요. 결과 화면과 내페이지_완성.html 파일 하나를 주세요. 고친 곳과 확인하지 못한 곳을 알려 주세요.
요청 글 설명
파일 받기는 AI가 준 파일을 내 기기에 저장하는 일이에요. 이 기능을 다운로드라고 해요.
폰으로 하는 방법은 수업에서 같이 봐요.

5단계: 결과를 확인해요




눈으로 확인
- 고쳤다는 답만 읽지 말고 결과를 열어 보세요.
- 바꿔 달라고 한 한 가지가 고쳐졌나요? 나머지 글과 사진은 유지됐나요?
- 실패하면 마지막으로 잘 열리는 파일도 보관하세요.
- 받을 파일: 내페이지_완성.html.
완성 파일을 받아요
①②- 같은 대화에서 완성 파일을 받습니다.
- 같은 대화의 마지막 답에서 내페이지 완성 결과 카드를 찾으세요. 초안 카드와 구분하세요.
- 카드의 다운로드 아이콘을 눌러 파일을 받으세요. 화면에서 찾기 어려우면 강사와 함께 확인하세요.
저장한 파일도 다시 열어요
따라 해 보세요
- 저장된 파일을 찾아보는 프로그램은 윈도우의 파일 탐색기와 맥의 Finder예요. 다운로드 폴더에서 받은 파일을 찾으세요.
- 받은 파일을 내페이지_결과 폴더에 보관하고 크롬으로 다시 여세요.
- 글자가 잔뜩 나오거나 사진이 안 보이면 강사를 불러 주세요. 이름 끝의 .html을 혼자 고치지 마세요.
사진까지 파일 안에 담아 달라고 했으므로 파일 하나만 받으면 돼요. 별도 설치 없이 크롬으로 다시 열고 사진도 확인하세요.


눈으로 확인
- 대화의 결과 화면과 받은 파일을 각각 열었습니다.
- 내 글과 사진이 받은 파일에도 보입니다.
- 대화에서 사진이 보여도 받은 파일에서는 사라질 수 있습니다. 확인하지 못했다면 미확인으로 남깁니다.
폰에서 같은 대화를 열어요
1
- 아이폰에서 인터넷 창을 여는 프로그램에는 Safari도 있어요. 안드로이드는 크롬, 아이폰은 Safari 또는 크롬에서 claude.ai를 여세요.
- 노트북에서 쓴 본인 계정으로 로그인하세요.
- 대화 목록에서 오늘의 대화를 찾고 마지막 내페이지 완성 카드를 누르세요.
- 노트북의 파일 저장 위치를 폰 주소 칸에 입력하지 마세요.
눈으로 확인
- 같은 계정과 같은 대화인지 확인했습니다.
폰에서 아래까지 내려 봐요
따라 해 보세요
- 마지막 결과를 열고 아래까지 내려 보세요.
- 이름과 소개가 잘리는지, 사진이 모두 보이는지 확인하세요.
- 안 열리면 강사를 불러 주세요. 노트북 창을 좁혀 볼 수 있지만 폰에서 직접 확인한 것과 구분합니다.
같은 파일이지만 컴퓨터에서는 넓게, 폰에서는 세로로 배치가 바뀌어요. 두 화면에서 모두 읽기 편한지 봐 주세요.
눈으로 확인
- 글이 잘리지 않습니다.
- 사진이 모두 보입니다.
- 폰 직접 확인: 했습니다 / 못 했습니다.
- 노트북 좁은 창 확인: 했습니다 / 못 했습니다.


끝내기 전에 체크해 주세요


- 마지막으로 잘 열리는 파일을 노트북에 보관하세요.
- 받은 파일에 내 글과 사진이 있는지 다시 확인하세요.
- 폰 직접 확인과 노트북 좁은 창 확인 중 무엇을 했는지 적으세요.
- 내가 보여 주고 싶은 화면만 함께 봅니다.
눈으로 확인
- 마지막으로 잘 열리는 파일을 보관했습니다.
- 받은 파일의 내 글과 사진을 확인했습니다.
- 직접 해 봄 / 예비 화면만 봄 / 아직 못 마침 중 하나를 적었습니다.
내가 고친 한 가지를 적어요
따라 해 보세요
- 고치기 전 모습: ______
- 고친 뒤 모습: ______
- 아직 확인하지 못한 것: ______
- 집에서도 같은 대화에서 한 가지씩 고쳐 달라고 해 보세요. 고치기 전 파일은 따로 보관해 주세요.
눈으로 확인
- 직접 만든 부분과 예비 화면에서 본 부분을 구분했습니다.
- 폰에서 직접 열었는지 남겼습니다.


오늘 나오는 말
| 말 | 쉬운 설명 |
|---|---|
| 디자인 | 모양과 색을 정하는 일이에요. |
| 크롬(Chrome) | 인터넷 창을 여는 프로그램이에요. |
| 로그인 | 본인 정보를 확인해 서비스를 여는 일이에요. |
| 입력칸 | 글을 쓰는 곳이에요. |
| 보내기 | 입력칸에 쓴 글과 붙인 파일을 보내는 기능이에요. 이 캡처에서는 위쪽 화살표예요. |
| 윈도우 / 맥 | 노트북을 작동시키는 운영체제예요. |
| 복사 / 붙여 넣기 | 글을 임시로 담은 뒤 원하는 곳으로 옮기는 일이에요. |
| 줄 바꿈 | 다음 줄로 내려 쓰는 일이에요. |
| AI | 글로 부탁하면 답이나 화면을 만들어 주는 도구예요. |
| Claude | 오늘 사용하는 AI 서비스예요. |
| 계정 | 서비스를 쓰는 내 정보예요. |
| 파일 | 글이나 사진을 이름 붙여 저장한 것이에요. |
| 코드 | 컴퓨터에 일을 시키는 글이에요. |
| 폴더 | 파일을 모아 두는 공간이에요. |
| 프롬프트 | AI에게 보내는 요청 글이에요. |
| 결과 화면 / 결과 창 | AI가 만든 페이지를 보여 주는 곳이에요. |
| 결과 카드 | 대화에 붙은 결과 파일을 여는 작은 상자예요. |
| HTML | 크롬에서 열리는 페이지 파일 형식이에요. 이름 끝이 .html이에요. |
| 첨부 | 사진이나 파일을 대화에 붙이는 일이에요. |
| 클립 | 파일을 붙이는 집게 모양 단추예요. 이번 캡처에서는 +가 보입니다. |
| px(픽셀) | 폰 카메라의 화소가 사진을 이루는 작은 점이듯, 화면도 작은 점들로 그려져요. 웹에서는 크기를 px(픽셀)로 나타내요. 숫자가 크면 글자가 커져요. |
| 글꼴 | 글자 모양을 정하는 것이에요. |
| 초안 | 처음 만든 것으로, 앞으로 고쳐 갈 파일이에요. |
| 파일 받기 / 다운로드 | 파일을 내 기기에 저장하는 일이에요. |
| 파일 탐색기 / Finder | 윈도우와 맥에서 저장된 파일을 찾아보는 프로그램이에요. |
| Safari | 아이폰에서 인터넷 창을 여는 프로그램이에요. |
| 외부 설치 없이 | 다른 프로그램을 설치하지 않고 받은 파일을 크롬으로 여는 조건이에요. 사진도 파일 안에 담아 달라고 해요. |
이게 이렇게 이어진다
오늘 배운 방법을 이어 가면 이런 것도 만들 수 있어요. 강사가 직접 만든 결과물이에요.



