21. 실습 · 나의 첫 소개 페이지

이번에 만들 결과

별명, 소개 두 문장, 관심사 세 가지, 링크 하나가 있는 페이지를 만듭니다. 실습을 마치면 도구 안의 미리보기에서 글을 읽고 링크를 열 수 있어야 합니다. 마지막에는 문장 하나를 고치고 같은 작업을 다시 찾습니다. 지금은 인터넷 공개나 회원가입 기능을 만들지 않습니다.

컴퓨터에서 책과 AI 도구를 각각 열어 둡니다. 처음이라면 시작 안내의 Claude 웹에서 새 대화를 여세요. 다른 도구를 쓴다면 8장의 준비 순서를 확인합니다. 필요한 것은 로그인한 계정, 새 대화, 실제 페이지를 여는 미리보기입니다. GitHub·Vercel 가입과 파일 다운로드는 아직 필요하지 않습니다.

1. 준비 예시로 화면을 확인하기

실습용 새 대화를 열고 이름을 바꿀 수 있으면 ‘첫 소개 페이지’로 정합니다. 이전 작업이 있는 대화라면 그대로 덮어쓰지 않습니다. 아래 요청을 복사해 대화 입력칸에 붙여 넣습니다.

제목이 ‘미리보기 준비’인 작은 웹페이지를 HTML 한 파일로 만들어 줘.
이 도구 안에서 실제 화면으로 보여 줘. 코드 글자만 보여 주는 것으로 끝내지 마.
지금 환경에서 미리보기를 지원하지 않으면 그 사실을 알려 줘.
아직 외부 서비스 연결, 결제, 인터넷 공개는 하지 마.

결과가 자동으로 열리면 ‘미리보기 준비’라는 제목을 찾습니다. 열리지 않으면 답변에 생성된 HTML 결과를 선택합니다. Claude에서 파일 카드가 보이면 카드를 눌러 오른쪽 결과 패널을 엽니다. 패널 위에 **Preview(미리보기)**와 **Code(코드)**가 보이면 Preview를 선택하세요. 파일 카드에 ‘Code·HTML’이라고 적혀 있어도 미리보기로 전환해 화면을 볼 수 있습니다. 코드 속에 제목이 적혀 있는 것과 실제 페이지에 제목이 배치된 것은 다릅니다.

이어서 “제목만 ‘준비 완료’로 바꿔 줘”라고 보냅니다. 실제 화면의 제목까지 바뀌면 준비가 끝났습니다. 생성된 결과를 열 수 없거나 미리보기 기능이 없다면 8장의 화면별 안내로 돌아갑니다. 준비가 끝나기 전에는 다음의 긴 요청문을 보내지 않습니다.

2. 페이지에 넣을 내용 정하기

별명은 ‘봄’, 소개는 ‘책을 읽고 기억에 남는 문장을 기록합니다. 산책하며 동네의 작은 공간을 찾는 것을 좋아합니다.’로 시작할 수 있습니다. 관심사는 독서·산책·기록으로 정합니다. 자신의 말로 바꿔도 되지만 실제 개인정보는 넣지 않습니다.

링크는 이번 연습에서 사용할 공개 주소 하나를 정합니다. 아래에는 주소 형식을 시험할 수 있는 https://example.com을 넣었습니다. 이 주소는 실제 모임 신청이나 연락처가 아닙니다. 그대로 연습한다면 링크 문구도 ‘예시 사이트 보기’로 둡니다. 개인의 비밀 주소나 다른 사람의 자료 주소를 넣지 않습니다.

3. 첫 소개 페이지 부탁하기

준비 예시가 열린 대화에서 아래 요청을 보냅니다. 내용을 바꾸고 싶다면 별명과 소개 문장만 먼저 바꾸고, 나머지 조건은 유지해 봅니다.

나를 소개하는 한 페이지를 만들어 줘.
별명: 봄
소개: 책을 읽고 기억에 남는 문장을 기록합니다.
산책하며 동네의 작은 공간을 찾는 것을 좋아합니다.
관심사: 독서, 산책, 기록
링크 문구: 예시 사이트 보기
링크 주소: https://example.com

별명, 소개글, 관심사, 링크 순서로 배치해 줘.
밝은 배경과 읽기 쉬운 글자를 사용하고, 좁은 화면에서는 세로로 자연스럽게 배치해 줘.
링크는 키보드로도 이동하고 열 수 있게 해 줘.
첫 버전은 사진, 로그인, 결제, 자료 전송 없이 만들어 줘.
HTML·CSS를 포함한 독립적인 HTML 한 파일로 구성하고 외부 라이브러리는 쓰지 마.
파일 다운로드부터 요구하지 말고, 먼저 이 도구의 실제 미리보기로 보여 줘.

작업이 끝날 때까지 기다린 뒤 최신 결과를 엽니다. 별명, 소개글, 관심사 세 가지, 링크가 모두 보이는지 읽습니다. 빠진 내용이 있으면 그 부분만 알려 줍니다. 첫 화면이 예시와 색이나 간격이 다르다는 이유로 다시 만들 필요는 없습니다.

이렇게 보이면 다음 단계로

예시를 새 탭에서 보기. 이 화면은 책의 완성 예시입니다. AI 도구의 화면 캡처가 아닙니다. 내 결과에서는 별명·소개 두 문장·관심사 세 가지·링크 하나를 찾으세요. 예시와 장식이 달라도 이 네 가지가 있으면 수정 단계로 갑니다.

4. 문장 하나 바꾸기

현재 소개글을 확인한 뒤 첫 문장만 고칩니다. 아래 요청의 바꿀 문장이 화면의 문장과 다르면 현재 문장으로 고쳐 보냅니다.

소개글의 첫 문장만 ‘한 달에 한 권을 읽고 짧은 감상을 남깁니다.’로 바꿔 줘.
별명, 두 번째 문장, 관심사, 링크 주소와 화면 배치는 그대로 유지해 줘.
바뀐 결과를 같은 미리보기에서 확인할 수 있게 해 줘.

새 문장이 실제 화면에 나타났는지, 그대로 두라고 한 부분은 유지되었는지 비교합니다. 답변에만 새 문장이 있고 화면이 그대로면 최신 결과가 선택되어 있는지 확인합니다. 그다음 “현재 미리보기에는 이전 문장이 보인다”고 상태를 전달합니다.

5. 읽기와 링크 동작 확인하기

브라우저 창의 폭을 줄여 소개글과 링크가 잘리지 않는지 봅니다. 화면 밖으로 나가면 어느 글이 잘리는지 설명하고 배치만 고쳐 달라고 합니다. 글자를 무조건 작게 줄이도록 요청하지 않습니다.

링크를 눌러 예시 사이트가 열리는지 확인합니다. 미리보기에서 외부 이동이 제한되면 표시된 주소가 맞는지 먼저 보고, 직접 열어 확인한 것과 구분해 기록합니다. 공개 실습에서 실제 사이트 주소로 다시 시험합니다. Tab 키로 링크에 도달했을 때 선택 표시가 보이는지도 봅니다.

6. 다시 찾을 수 있게 남기기

작업을 통째로 삭제하거나 새로 시작하지 말고 대화나 프로젝트 목록에서 현재 작업의 이름을 확인합니다. 목록으로 나갔다가 같은 작업을 다시 열어 마지막으로 바꾼 문장이 있는지 봅니다. 이름 변경 기능이 없다면 어떤 대화인지 구별할 수 있는 제목이나 날짜를 적어 둡니다.

화면을 다시 열 수 있다는 사실과 파일을 별도로 보관했다는 사실은 구분합니다. 파일로 꺼내는 것은 공개 준비에서 진행합니다. 지금은 최신 결과와 그 결과가 있는 작업을 정확히 찾는 것으로 마칩니다.

막혔을 때 돌아갈 지점

문제를 설명할 때는 지금 단계, 기대한 결과, 실제 보이는 상태를 적습니다. “3단계 뒤에 소개글이 한 문장만 보여”처럼 설명하면 확인할 범위를 좁힐 수 있습니다. 오류가 있다면 비밀 정보를 가린 문장을 함께 전달합니다.

이번 실습의 완료 기준

• 별명·소개글·관심사·링크가 화면에 보입니다.
• 문장 하나를 바꾸었고 다른 내용은 유지됩니다.
• 좁은 화면에서도 내용을 읽을 수 있습니다.
• 링크를 눌러 정한 주소가 열리고, Tab으로 선택한 뒤 Enter로도 열 수 있습니다.
• 같은 작업을 다시 열어 마지막 결과를 찾을 수 있습니다.

위 항목을 모두 직접 확인하면 완료입니다. 미리보기 제한 때문에 링크나 키보드 동작을 시험하지 못했다면 ‘보류’로 남깁니다. 예를 들어 ‘링크 이동 보류 — 29장 5단계의 공개 주소에서 다시 확인’이라고 적습니다. 다음 설명을 읽어도 되지만 확인 전에는 이 실습을 완료한 것으로 표시하지 않습니다. 실제로 눌렀는데 엉뚱한 곳이 열리면 환경 보류가 아니라 수정할 문제입니다.

현재 화면에서 [요청하지 않은 내용]은 내가 제공한 정보가 아니야.
그 부분만 제거해 줘.
별명, 내가 준 소개 두 문장, 관심사 세 가지, 예시 링크는 유지해 줘.
새로운 사실이나 기능을 대신 넣지 마.

좁은 화면에서 [잘리는 요소]가 화면 오른쪽으로 나가.
해당 요소가 자연스럽게 줄바꿈되거나 세로로 배치되도록 고쳐 줘.
글을 삭제하거나 모든 글자 크기를 아주 작게 줄이지 마.
소개 내용과 링크 주소는 유지해 줘.

꼭 기억하세요

부탁한 내용과 링크가 작동하고, 작은 수정과 다시 열기까지 확인하면 첫 실습이 끝납니다. 환경 때문에 확인하지 못한 항목은 보류로 남겨 29장에서 마칩니다.