LESSON 03

스타일 바꾸고 사진 넣기

영상 3:34~5:56 · 좋아하는 사이트 주소로 디자인 따라가기, 이미지 첨부

오늘의 목표

말로 설명하기 어려운 디자인을 '좋아하는 사이트 주소'로 요청하고, 내 사진·이미지를 첨부해 홈페이지에 넣습니다.

예상 소요 시간 약 30분

출처: 누나IT 채널. 이 강은 누나IT 님의 영상을 보며 따라 하는 강의예요. 영상 속 화면 조작을 글로 다시 정리했고, 영상의 말을 그대로 옮기지 않아요. 아래 구간을 꼭 직접 보세요.

이 강에서 보는 영상 구간

영상 3:34~5:56을 봐요. 결과가 마음에 안 들 때 고치는 법과 이미지를 넣는 법이 나와요.

출처: 누나IT 채널 「클로드로 홈페이지 만들기 코딩 없이 깃허브 배포까지」 · 구간 3:34~5:56 · 유튜브에서 보기. 영상이 안 나오면 이 링크로 열어요.

영상이 알려 주는 방법 두 가지

1. 스타일 바꾸기

  • 분위기를 말로 요청할 수 있어요(미니멀하고 믿음직한 느낌, 화려하고 활기찬 느낌, 따뜻하고 손맛 있는 느낌 같은 방향).
  • 하지만 초보에게는 이런 표현이 어려워요. 그래서 영상은 내가 좋아하는 사이트의 주소를 복사해서 "이 사이트 스타일로 고쳐 줘" 하고 시키는 쉬운 방법을 보여 줘요. 클로드가 그 사이트를 분석해 비슷한 분위기로 만들어 준다고 해요.

2. 이미지 넣기

  • 입력창의 + 버튼 → 파일 또는 사진 추가로 내 이미지를 올려요. 영상에서는 책 표지 두 장, 프로필 사진, 영상 썸네일 네 장을 한꺼번에 선택했어요.
  • 그런 다음 어떤 사진을 어디에 넣을지 말해요. 예를 들어 프로필 사진은 소개 부분에, 썸네일은 대표 영상 자리에 링크와 함께, 책 표지는 각 책 자리에요.
  • 결과에서 썸네일을 누르면 영상이 재생되는 것까지 확인해요.

내 걸로 따라 하기

#2 프롬프트 3-1🟢 초급

(좋아하는 사이트 주소) 이 사이트의 색과 분위기를 참고해서 지금 홈페이지 디자인을 고쳐 줘. 내용은 그대로 두고 스타일만 바꿔 줘.

사진은 + 버튼으로 올린 뒤 이렇게 말해요. "첨부한 프로필 사진을 소개 부분에 넣어 줘."

사진 주의: 얼굴이 나온 사진, 다른 사람이 찍힌 사진은 공개돼도 괜찮은지 확인해요. 남의 사이트 디자인은 분위기만 참고하고, 그 사이트의 글·로고·사진을 그대로 가져오지 않게 해요.

영상 제작자는 무료 버전에서 이미지 삽입이 안 될 때가 있다고 말해요(4강에서 다시 나와요). 안 되면 다시 시도해 보거나 유료 버전을 쓰는 방법이 있어요.

🧪 실습

  • 좋아하는 사이트 주소 하나를 정해 프롬프트 3-1로 스타일을 바꿔 봤다
  • 마음에 안 들면 "더 단순하게", "색을 더 따뜻하게"처럼 한 가지씩만 다시 시켰다
  • 내 사진 1~2장을 + 버튼으로 첨부해 원하는 자리에 넣었다
  • 넣은 사진이 공개돼도 괜찮은 사진인지 확인했다

다음 강의

4강에서 만든 홈페이지를 링크로 공유해 보고, 왜 HTML 파일로 내려받는지 이해해요.