내용 수정하기

AI가 만들어 준 페이지에 내 이름이 아닌 다른 이름이 들어가 있을 수 있습니다. 이번 절에서는 페이지 내용을 내 것으로 바꾸는 방법을 배웁니다.

수정할 파일 찾기

AI가 만든 코드는 보통 이 파일에 들어 있습니다:


src/app/page.tsx

Cursor 왼쪽의 파일 목록에서 src 폴더 → app 폴더 → page.tsx 파일을 클릭하면 열립니다.

파일을 열면 코드가 보입니다. 코드 전체를 이해할 필요는 없습니다. 우리가 할 일은 글자를 찾아서 바꾸는 것뿐입니다.

어떤 파일을 수정해야 할지 모르겠다면, AI 채팅창(Ctrl + L)에서 "자기소개 내용이 어느 파일에 있어?"라고 물어보세요. AI가 정확히 알려줍니다.

파일 안에서 AI가 넣어 둔 이름과 소개글을 찾습니다. 예를 들어 "홍길동" 또는 "Your Name" 같은 텍스트가 보일 겁니다.

방법 1: 직접 수정하기

방법 2: AI에게 요청하기

AI 채팅창(Ctrl + L)에서 이렇게 요청합니다:

이름을 '김영희'로 바꾸고, 소개글을 '서울에서 꽃집을 운영하고 있습니다. 꽃과 사람을 좋아합니다.'로 바꿔줘.

AI가 코드를 수정해 주면 Accept All을 클릭합니다.

두 가지 방법 모두 결과는 같습니다. 편한 쪽을 선택하세요.

자기소개 페이지에 내 사진을 넣어 봅시다.

1단계: 사진 파일 준비하기

사용할 사진 파일을 준비합니다. 파일 이름은 영문으로 간단하게 바꿔 두는 것이 좋습니다.

좋은 파일 이름	피해야 할 파일 이름
`my-photo.jpg`	`내사진 (2).jpg`
`profile.png`	`KakaoTalk_Photo_2024.jpg`

2단계: public 폴더에 넣기

3단계: AI에게 사진 적용 요청하기

AI 채팅창에서 이렇게 요청합니다:

public 폴더에 있는 my-photo.jpg 파일을 프로필 사진으로 사용해줘.

AI가 코드를 수정해 주면 Accept All을 클릭합니다.

public 폴더는 웹사이트에서 직접 접근할 수 있는 파일을 넣는 곳입니다. 사진, 아이콘 같은 파일을 여기에 넣으면 웹페이지에서 사용할 수 있습니다.

파일을 수정하고 Ctrl + S로 저장하면, Chrome에서 열어 둔 페이지가 자동으로 새로고침됩니다. 이 기능을 핫 리로드(Hot Reload)라고 합니다.

직접 새로고침 버튼을 누를 필요가 없습니다. 저장만 하면 바로 결과를 확인할 수 있어서 매우 편리합니다.

수정 → 저장 → 확인. 이 과정을 반복하면서 페이지를 완성해 나갑니다.

증상	확인할 것
사진 대신 빈 칸이 보임	파일 이름을 정확히 입력했는지 확인하세요. 대소문자도 구분합니다
사진이 깨져 보임	파일이 `public` 폴더 안에 있는지 확인하세요
아무 변화가 없음	Ctrl + S로 저장했는지 확인하세요

그래도 안 된다면 AI에게 "프로필 사진이 안 보여. 도와줘"라고 요청하세요. AI가 코드를 확인하고 문제를 찾아줍니다.