기존 HTML 페이지에서 코딩 없이 이미지를 교체하는 방법

제목도 정했고 색도 잘 어울립니다. 수업 일정과 가격도 입력했습니다. 그런데도 아직 템플릿처럼 보입니다. 다른 공방 홈페이지에 가져다 놓아도 어색하지 않을 만큼 사진이 평범하기 때문입니다.

HTML 템플릿에 내 사진을 넣는 일은 공개 직전에 하는 마무리 작업 중 하나입니다. AI로 만든 랜딩 페이지나 디자이너에게 받은 페이지도 비슷합니다. 구성은 이미 잘 맞지만 사진은 지금의 상품이나 서비스, 새 시즌에 맞춰야 할 수 있습니다. 페이지를 열어 둔 채 교체하면 새 사진을 주변 문구와 함께 보며 판단할 수 있습니다.

가상의 도예 공방 Claywell 페이지에서 역할이 다른 이미지 두 장을 바꿉니다. 첫 화면의 흑백 정물 사진은 작업대 사진으로, 소재 소개의 여러 식기 사진은 도자기 그릇 하나를 보여 주는 예시 이미지로 교체합니다.

기존 HTML 페이지에서 바로 이미지 바꾸기

먼저 HtmlDrag의 온라인 HTML 파일 편집기에서 ‘HTML 업로드’로 기존 파일을 엽니다. Claywell 파일에는 원래 이미지와 글꼴, 스타일이 포함돼 있어 수업 페이지 전체를 보면서 편집할 수 있습니다.

새 사진을 고르기 전에 기존 페이지에서 사진이 어떤 역할을 하는지 살펴보세요. Claywell의 첫 화면에는 도자기 정물 사진과 노란색 수업 안내 카드, 손으로 흙을 빚는 모습이 나란히 있습니다. 왼쪽 사진만 바꾸면 제목과 가격, 오른쪽 사진을 그대로 보면서 첫인상이 어떻게 달라졌는지 판단할 수 있습니다.

방문자가 보고 싶은 것부터 생각하고 사진 고르기

도예 수업 페이지와 그릇을 판매하는 쇼핑몰에 비슷한 사진이 쓰이더라도, 방문자가 궁금해하는 점은 다릅니다. 완성품 사진을 보면 어떤 그릇이 나오는지 알 수 있습니다. 반면 점토와 도구가 놓인 작업대를 보면 직접 만들어 보는 장면이 떠오릅니다. 초보자를 위한 수업이라면 첫 사진에서 그런 모습을 상상할 수 있어야 합니다.

소재 소개까지 읽어 내려온 사람은 그릇을 더 자세히 보고 싶어 합니다. ‘완벽한 모양은 없다’는 제목 옆에서는 컵과 접시가 여러 개 있는 사진보다, 그릇 하나를 보여 주는 이미지가 고르지 않은 가장자리와 유약의 질감을 더 잘 드러냅니다. 첫 화면과 본문이 답하는 질문이 다른 셈입니다.

사진을 고를 때는 가로세로 비율과 피사체 주변의 여백, 실제 화면에서 보이는 디테일을 함께 보세요. 가로 사진이라도 좁은 영역에 들어가면 중요한 부분이 잘릴 수 있습니다. 반대로 배경에 여유가 있는 세로 사진은 넓은 영역에서도 쓸 수 있습니다.

보유한 사진을 고르거나 다른 사람에게 준비를 부탁할 때는 원하는 조건을 짧게 적어 두면 도움이 됩니다.

초보자를 위한 도예 수업 페이지입니다. 첫 화면에는 작업대 사진을, 소재 소개에는 그릇 하나가 잘 보이는 이미지를 사용합니다. 데스크톱과 모바일에서 사진이 잘릴 수 있으니 손과 그릇 가장자리 주변에 여백을 남겨 주세요. 확정한 페이지 구성과 수업 정보는 유지하고, 소개하는 내용과 맞는 이미지를 고릅니다.

Claywell에서는 첫 화면의 정물 사진과 본문의 식기 사진을 각각 출발점으로 삼았습니다. 사진을 주변 문구와 함께 보면 어떤 이미지로 바꿀지 기준이 생깁니다.

기존 레이아웃에서 첫 화면의 대표 사진 바꾸기

새 작업대 사진은 도구와 점토, 작업이 이뤄지는 공간을 보여 줍니다. 오른쪽에 있는 손 사진은 흙을 빚는 동작을 가까이서 보여 줍니다. 방문자는 두 장을 함께 보며 공방 분위기와 실제로 어떤 일을 하는지 짐작할 수 있습니다.

HtmlDrag에서 바꿀 사진을 마우스 오른쪽 버튼으로 클릭해 ‘이미지 교체...’를 선택합니다. 안내 카드와 다른 사진이 맞닿아 있다면 교체할 사진 자체를 선택했는지 먼저 확인합니다.

교체 창에서 ‘기기에서 업로드’를 선택하면 저장된 파일을 올릴 수 있습니다. 이미 인터넷에 올린 이미지라면 ‘온라인 이미지 사용’에서 주소를 입력합니다. 이번 작업에서는 미리 준비한 작업대 사진 파일을 업로드했습니다.

교체한 뒤에는 새 사진이 첫 화면에 어떤 영향을 주는지 살펴봅니다. 사진에 볼거리가 많아져도 수업 가격과 주요 버튼은 쉽게 찾을 수 있어야 합니다. 사진 목록의 썸네일만 볼 때보다 원래 페이지에 놓고 판단하는 편이 정확합니다.

이 페이지에서는 질감이 풍부한 작업대 사진과 단순한 노란색 안내 카드가 서로 대비됩니다. 화면에 맞게 잘린 뒤에도 작업대가 무엇인지 알아볼 수 있습니다. 대표 사진을 고를 때도 장면이 잘 읽히는지, 제목에서 다음 행동으로 자연스럽게 이어지는지 확인해 보세요.

상세 이미지는 한 가지 특징이 잘 보이게 고르기

상세 이미지에서는 방문자가 살펴볼 특징을 하나 정하는 편이 좋습니다. 도자기라면 가장자리나 유약, 표면의 질감일 수 있습니다. 다른 상품이라면 잠금 장치나 마감, 라벨일 수 있습니다. 어떤 부분을 보여 줄지부터 정한 다음 얼마나 가까이 담을지 결정합니다.

Claywell의 두 번째 교체에는 미리 AI로 만든 도자기 그릇 예시 이미지를 썼습니다. 옅은 유약과 고르지 않은 윤곽이 그릇의 모양을 설명하는 글과 잘 어울립니다.

첫 사진과 같은 기능으로 교체했습니다. 원본은 세로형이지만 데스크톱의 이미지 영역은 가로로 더 넓습니다. 그릇 주변에 여백이 있어 가로형 영역에 맞춰 잘라도 가장자리가 온전히 보입니다.

가까이에서 보면 그릇 전체를 옆 설명과 함께 살펴볼 수 있습니다. 상품이나 소재 이미지에도 같은 기준을 적용해 보세요. 글에서 소개하는 특징이 사진에서 실제로 보이나요? 중요한 부분이 잘린다면 레이아웃을 바꾸기 전에 여백이 넓은 원본을 쓰거나 구도를 바꿔 잘라 보세요.

바꾼 이미지가 잘리거나 흐릿해 보이는 이유

원본 이미지의 가로세로 비율과 페이지의 이미지 영역 비율이 다르면, 공간을 채우는 과정에서 사진의 일부가 잘릴 수 있습니다. 예를 들어 CSS의 object-fit: cover는 원래 비율을 유지하면서 영역을 채우고, 밖으로 나가는 부분은 잘라 냅니다.

사진 앱에서는 온전한 이미지가 웹페이지에서는 일부만 보이는 이유입니다. 실제 페이지에서 피사체의 테두리를 확인하고, 중요한 부분이 남는 구도를 고르세요. 전체를 억지로 맞추려고 사진을 늘이거나 누르면 보여 주려는 물건의 모양도 달라집니다.

데스크톱 미리보기에서는 평소 읽는 크기로 첫인상을 살펴볼 수 있습니다. 사진을 오래 들여다보지 않아도 어떤 활동인지 이해할 수 있나요? 사진과 제목이 잘 맞고 주요 버튼도 쉽게 찾을 수 있나요?

소재 소개에서는 글을 읽으면서 그릇의 형태와 표면을 확인할 수 있어야 합니다. 각 이미지가 놓인 위치까지 내려가 살펴보면 페이지를 한눈에 축소해 볼 때는 놓치기 쉬운 문제도 발견할 수 있습니다.

잘림은 없는데 이미지가 흐릿하다면 원본부터 살펴보세요. 작은 썸네일을 넓은 영역에 맞춰 키우면 디테일이 부족합니다. 실제 표시 크기에 맞는 원본을 웹용으로 내보낸 다음 방문자가 보게 될 크기로 확인하세요. 페이지에 작게 표시한다고 해서 내려받는 이미지 파일의 용량이 줄어들지는 않습니다.

변경 사항을 저장하고 모바일 화면도 확인하기

두 이미지가 주변 내용과 잘 어울리면 ‘버전 저장’으로 변경 사항을 저장합니다. 웹사이트에 반영할 파일이 필요하다면 내보내기 창의 ‘편집된 HTML’에서 ‘HTML 다운로드’ 또는 ‘HTML 복사’를 선택할 수 있습니다.

Claywell 프로젝트에는 두 교체 결과를 저장했습니다. 나중에도 업데이트한 소재 소개를 다시 편집할 수 있습니다. 수업 일정이나 상품, 계절 사진을 바꿀 때 이 버전에서 작업을 이어 갈 수 있습니다.

모바일 화면은 따로 확인하세요. 이미지 영역이 좁아지거나 보조 사진이 빠지고, 수업 안내의 위치도 바뀔 수 있습니다. 좁은 공간에서도 피사체가 알아보기 쉬운지 보세요. Claywell을 모바일 너비로 보면 새 작업대 사진과 노란색 안내 카드가 좁은 첫 화면에 함께 나타납니다.

사진을 바꾸고 나서야 설명 한 줄이 더 필요하다는 걸 알아차리기도 합니다. 소재를 설명하는 짧은 캡션을 삽입하거나 상품 사진에 상세 페이지 링크를 추가할 수 있습니다. 수업 구성을 비교할 정보가 필요하다면 HtmlDrag에서 표를 삽입하고 셀, 행, 열을 편집할 수 있습니다.

주변을 손볼 때는 작업을 마친 요소를 잠가 실수로 옮기는 일을 줄일 수 있습니다. 기간이 지난 프로모션 요소는 삭제할 수 있습니다. 이런 수정으로 새 이미지와 현재 안내 내용이 어울리게 만들 수 있습니다.

업데이트한 페이지를 쓰기 전에 다음 항목을 확인하세요.

• 교체하려던 사진이 바뀌었고 주요 피사체가 뚜렷합니다.
• 데스크톱과 모바일 모두에서 방문자에게 필요한 디테일이 보입니다.
• 웹용으로 준비한 이미지가 실제 표시 크기에서도 선명합니다.
• 캡션과 대체 텍스트, 출처 표기가 새 이미지에 맞습니다.
• 링크가 있는 이미지를 누르면 의도한 페이지가 열립니다.
• 저장한 프로젝트와 게시에 쓰는 HTML에 변경 사항이 들어 있습니다.

이미지 내용이 달라지면 대체 텍스트도 함께 검토해야 합니다. Google의 이미지 검색 가이드에서는 페이지 맥락에 맞는 유용한 대체 텍스트를 권장합니다. 검색어를 줄줄이 넣기보다 무엇이 보이는지 구체적으로 적는 편이 좋습니다.

HTML 페이지의 이미지 교체에 관한 자주 묻는 질문

AI로 만든 HTML 페이지에서도 이미지를 바꿀 수 있나요?

네. 편집기에서 HTML 파일이 정상적으로 열려야 합니다. 스타일과 이미지가 제대로 표시되는지 확인하고, 바꿀 사진을 선택하세요. 새 이미지가 준비돼 있다면 별도로 생성할 필요 없이 적용할 수 있습니다.

이미지 파일을 업로드할까요, 이미지 URL을 쓸까요?

사용이 확정된 파일이 기기에 있다면 업로드하세요. 이미지가 안정적으로 접근할 수 있는 주소에 올라가 있다면 URL을 써도 됩니다. 갤러리나 로그인 화면 링크만 있다면 이미지 파일을 바로 열 수 있는 주소를 먼저 확인하세요.

세로 이미지를 넓은 영역에 넣어도 되나요?

피사체 주변에 얼마나 여유가 있느냐에 따라 다릅니다. 이 사례의 그릇처럼 배경이 넉넉하면 가로형 영역에 맞춰 잘라도 중요한 부분이 남습니다. 원본에 여백이 적다면 실제 영역에 넣어 보고 모바일 너비에서도 확인하세요.

이미지를 교체하면 캡션이나 링크도 함께 바뀌나요?

이미지, 캡션, 출처 표기, 클릭 시 열리는 페이지는 각각 확인해야 합니다. 교체 후 주변 문구가 새 이미지에 맞는지 살펴보고, 링크가 있으면 올바른 곳으로 연결되는지 확인하세요.

교체용 웹사이트 이미지는 어느 정도 크기가 적당한가요?

실제 표시 영역에 맞는 해상도를 확보하고 웹에서 사용하기 적당한 용량으로 준비하세요. 첫 화면의 큰 사진은 작은 카드보다 디테일이 더 필요합니다. 화면에서의 품질과 현재 업로드 제한을 기준으로 판단하면 됩니다.

교체 결과를 저장하면 운영 중인 사이트에도 반영되나요?

저장한 변경 사항은 HtmlDrag 프로젝트에 남습니다. 별도로 호스팅하는 웹사이트에는 편집한 HTML을 해당 사이트의 게시 절차에 따라 반영해야 합니다.

작업대 사진은 공방에서 손을 움직이는 모습을 떠올리게 하고, 그릇 하나를 담은 이미지는 유약과 형태에 집중하게 합니다. 기존 HTML 템플릿에 임시 사진이나 오래된 이미지가 남아 있다면 HTML 시각 편집기에서 파일을 열고, 각 사진이 있던 자리에서 어울리는 이미지로 바꿔 보세요.