AI로 홈페이지 세부 이미지 수정

AI로 인터넷 공간에 바로 홈페이지 만들기 시리즈 4번째 편입니다.

지난 시간에는 완성된 홈페이지의 헤더와 푸터 디자인을 수정했었지요?

https://itadventure.tistory.com/758

AI로 홈페이지 디자인 변경, 스티키 메뉴 적용하기

이번에는 세부 디자인 중 이미지를 수정할 차례입니다.

이미지를 바꾸는 건 쉬운 작업이니 무료 모델도 충분히 해낼수 있습니다.
무료 모델 SWE-1로 변경해서 진행해주시면 크레딧을 소모하지 않습니다.

클라이언트(고객)분이 디자인에 흡족해하며 본격적으로 세부 내용을 요구하는 상황을 가정하겠습니다.
홈페이지 첫화면의 그림을 바꿔달라고 하네요. 바로 이 부분입니다.

이번에는 클라이언트분이 준비한 이미지가 있습니다.
아래 이미지로 바꿔 달라고 합니다.
자유로운 분위기에서 책을 읽고 있는 분위기, 평화롭네요 ( 무료 이미지 사이트 픽사베이에서 가져왔습니다. )

이미지를 적용할때는 관례적으로 홈페이지 하위폴더로 'images' 또는 'img' 등으로 이름을 지어주는게 좋습니다. AI도 그 관례에 익숙하거든요.

우리는 웹호스팅 공간을 Z:드라이브로 연결해 놓아서 폴더를 생성하고 이미지를 넣는 것은 매우 간단합니다.
윈도우 탐색기에서 Z:\www 폴더로 이동한 다음

images 폴더를 생성하고,

앞의 이미지를 다운받으시거나 또는 여러분께서 준비한 이미지가 있다면
그 이미지를 images 폴더 내에 넣어주시면 됩니다.

이제 Windsurf 로 가시면 방금 생성한 'images' 폴더가 있고,
폴더를 펼쳐주시면 금방 넣은 이미지 파일도 있을텐데요.

이 상태에서 첫페이지의 그림을 '바꿔치기'하시면 됩니다.
그런데 첫페이지를 보니 그림이 하나 둘이 아닙니다.

AI에게 그림을 바꿔 달라고 해야 하는데 어떻게 설명해야 할까요?

오늘도 하나의 IT 지식을 배울 차례입니다.
바로 바이브 코더를 위해 없어서는 안되는 '개발자 도구' 툴인데요. ( 전통 코더도 좋아하는 도구입니다 )

크롬 브라우저에서 단축키 F12 키를 누르면 개발자 도구가 등장합니다.
화면 오른쪽이 아닌 아래쪽에 등장할 수도 있습니다.

저는 오른쪽으로 옮기는걸 선호하는 편인데요.
상황에 따라 다를 수는 있습니다.

개발자 도구 창 위치를 옮기려면 우측 삼점이 아이콘 선택 후,

창이 붙을 위치 Dock side 를 선택해 주시면 됩니다.
앞에서부터 창 분리(모니터가 2개인 경우 추천), 왼쪽, 아래, 오른쪽입니다.

이 개발자 도구는 디자이너 또는 프론트단 개발을 맡은 이들을 위한 멋진 도구인데요.
한번 익혀 놓으면 매우 유용합니다.

오늘은 이 도구로 수정 위치를 알아내는 방법을 살펴 보겠습니다.
엘리먼트 선택 아이콘을 클릭한 다음,

마우스를 홈페이지 화면의 여기저기에 가져다 대시면
사각형의 선택범위와 대략적인 설명이 나옵니다.

이제 그림을 넣을 위치로 이동하고 

그 위치를 클릭하시면 됩니다.
그러면 개발자 도구에 선택된 이미지의 HTML 코드가 표시됩니다.

코드가 매우 단순해 손으로 수정해도 되겠네요
하지만 어쩔때는 복잡한 경우도 간혹 있어 AI에게 요청하겠습니다.

코드가 선택된 상태에서 Ctrl + C 를 눌러주시면 됩니다.
그러면 해당 코드가 클립보드에 복사 됩니다.금방 보셨던 첫페이지는 index.php 입니다.
( php 에서 첫페이지는 index.php 또는 index.html 입니다 )

이어서 윈드서프 채팅창에 index.php 파일을 드래그해 놓습니다.

이어서 변경할 그림파일도 드래그해 넣습니다.

그리고 채팅창에 입력해 주세요.'
'아래 코드의 이미지를 변경해줘' 입력하고 Shift + Enter 를 누르면 입력공간이 아래 확보됩니다.

이 상태에서 Ctrl + V 키를 누르면 클립보드에 복사한 HTML 코드가 입력됩니다.

그리고 Enter 키를 눌러주시면 AI가 금방 수정해 줍니다.

처음에는 약간 혼동될 수 있는데요.
익숙해지면 이미지 변경에 30초밖에 안 걸리실 겁니다. ( 어떤 이미지를 넣을지 고민하는건 제외 )
순서를 다시 되새기자면 아래와 같습니다. 이번에는 다른 about.php 페이지를 시도해 볼께요.

1. 수정할 위치에 넣을 그림파일을 준비하고 images 폴더에 저장

2. 크롬브라우저에서 F12 단축키로 개발자 도구 창을 열고
  1) Select Element 아이콘
  2) 수정할 이미지 클릭!
  3) Ctrl + C 로 HTML 태그 복사

3. Windsurf 창을 열고
  1) 수정할 페이지를 채팅창에 드래그
  2) 변경할 이미지를 채팅창에  드래그
  3) 채팅창에 입력 : 아래 코드 이미지 수정해줘. Shift + Enter, Ctrl + V, Enter!

뭐 보나 마나 이런 간단한건 금방 됩니다.

사실 이런 작업은 굳이 바이브 코딩을 하지 않아도 됩니다.
전통 코딩이 더 빠르거든요.
약간 더 복잡하지만 설명을 입력하지 않기에 익숙해지면 15초 순삭입니다.해당 방법도 알려드릴께요.
우선 앞의 1, 2 과정은 똑같습니다.그 다음 Windsurf 에서 돋보기 아이콘(통합 검색)을 선택하시면 됩니다.

1) 그리고 Search 창에 Ctrl+V 키로 HTML 코드를 붙여넣으면
2) 검색위치가 표시됩니다. about.php 에 1건이 검색되었네요.

클릭하면 자동으로 해당 코드 위치로 이동합니다.

src="...." 이렇게 된 부분의 따옴표 내용을 삭제하고

잠깐 있으면 추천 코드를 보여줍니다. 맞으면 TAB, 틀리면 ESC 키를 눌러 줍니다.

추천코드가 다르면 금방 복사한 이미지 파일을 우클릭 - Copy Relative Path ( 상대 경로 복사 )

따옴표 내부를 클릭, Ctrl + V(붙여넣기), Ctrl + S (저장) 하시면 됩니다.

 

여러분은 어떤 방법이 나아 보이시나요?
후자의 방식에 익숙해지신다면 여러분은 바이브코딩과 전통코딩을 모두 넘나들 자질이 있으신겁니다 ㅎㅎ

오늘은 이미지 수정에 대해 알아 보았네요.
다음 게시글은 전화번호나 제목 등 세세한 내용을 수정하는 방법을 알아보는 걸 기약하겠습니다!

참, 검색 창 대신 다시 파일 목록을 보시려면 Explore 아이콘을 선택하시면 됩니다.

아무쪼록 필요하신 분께 도움되셨을까요?
오늘도 방문 감사합니다!