이미지 요소: 크기·정렬·링크

상품 사진이나 배너를 페이지에 넣었는데 너무 크게 나오거나 한쪽으로 붙어 있어서 고민하신 적이 있으신가요? 이 글에서는 이미지 요소를 넣고, 사진을 바꾸고, 크기 모드와 너비·정렬을 정하고, 사진을 눌렀을 때 이동할 링크를 거는 과정을 편집 화면에서 확인한 순서대로 안내합니다. 요소 패널과 미니툴바, 속성 패널의 기본 구조는 별도 글에서 다루고, 필터와 모양, AI로 이미지를 만들고 고치는 방법도 별도 글에서 다룹니다.

1. 이미지 넣고 사진 바꾸기

섹션을 선택한 뒤 왼쪽의 요소 추가를 열고 미디어 > 이미지를 누르면 자리표시 이미지가 섹션 안에 들어갑니다. 처음에는 왼쪽에 붙어서 보입니다.

사진을 바꾸려면 이미지를 눌러 선택하고, 오른쪽 위의 점 세 개를 눌러 펼친 막대에서 그림 모양의 이미지 편집을 엽니다. 창 맨 위의 이미지 교체를 누르면 이미지 관리 창이 열립니다. 속성 패널의 이미지 교체 버튼도 같은 창을 엽니다. 이 창에는 탭이 다섯 개 있습니다.

• 미디어 저장소: 올려 둔 사진 목록입니다. 사진을 누르면 바로 바뀌고, 마우스를 올리면 파일 이름과 삭제 버튼이 나타납니다.
• 링크 추가: 이미지 주소(URL)를 넣으면 저장소에 저장해 두고 쓸 수 있습니다.
• 이미지 검색: 키워드로 사진을 찾습니다.
• 파일 업로드: PNG, JPG, WebP, GIF, SVG 파일을 최대 10MB까지 올립니다. 이 글의 예시 사진은 이 탭으로 올렸고, 올리자마자 이미지가 바뀌면서 창이 닫혔습니다.
• AI 생성: 모델과 설명을 정해 사진을 만드는 탭입니다. 크레딧을 쓰므로 이 글에서는 열어서 위치만 확인했고, 별도 글에서 다룹니다.

2. 속성 패널에서 크기 모드와 너비 정하기

이미지 편집 창 맨 아래의 전체 속성 패널 열기를 누르면 오른쪽에 속성 패널이 열립니다. 콘텐츠 탭에 이미지 설정(크기 모드, 너비), 정렬, 이미지 교체, 동적 이미지, 필터, 위치 이동이 차례로 있습니다.

크기 모드는 네 가지입니다. 같은 사진을 모드만 바꿔 비교했습니다.

• 원본 비율 (권장): 높이를 자동으로 두어 사진 비율을 그대로 유지합니다.
• 너비 맞춤: 너비를 100%로 하고 높이는 자동입니다.
• 채우기(잘림): 높이를 정해 둔 틀에 사진을 가득 채우고 넘치는 부분은 잘립니다. 높이가 없으면 300px로 시작했습니다.
• 높이 맞춤: 높이를 300px로 고정하고 너비는 자동입니다. 이 모드에서는 너비 슬라이더가 사라집니다.

너비는 슬라이더나 숫자 입력칸으로 20~100% 사이를 정합니다. 칸 너비에 대한 비율이라서 30%, 50%, 75%, 100%로 바꾸면 그만큼 사진이 줄어듭니다.

3. 정렬하기

정렬의 화살표 버튼 세 개(왼쪽, 가운데, 오른쪽)로 사진 위치를 정합니다. 사진이 칸보다 좁을 때 차이가 보이므로 너비를 먼저 줄여 두세요. 아래는 너비 30%에서 세 버튼을 차례로 누른 모습입니다.

4. 보이는 부분 고르기

크기 모드를 채우기(잘림)로 두면 사진 일부만 보입니다. 이때 이미지 편집 창의 맞춤/위치 탭에서 이미지 위치 아홉 칸 중 하나를 누르면 보일 부분이 바뀝니다. 왼쪽 위를 누르면 하늘과 구름이, 오른쪽 아래를 누르면 산 쪽이 보였습니다.

같은 탭의 맞춤 방식은 틀 안에 사진을 넣는 방법입니다. 자르기는 틀을 가득 채우고, 맞춤은 사진 전체가 보이도록 넣어 남는 곳을 비워 두고, 채우기는 틀에 맞게 늘려서 사진이 찌그러져 보이며, 원본은 원래 픽셀 크기로 보여 줍니다.

5. 사진에 링크 걸기

이미지 편집 창의 링크 탭에 이미지 클릭 시 이동할 링크를 입력하고 Enter를 누르면 사진에 링크가 걸립니다. 입력칸에는 https:// 주소, / 로 시작하는 경로, #앵커 형식이 안내되어 있습니다. 새 탭에서 열기를 체크하면 새 탭으로 열리고, 링크 제거를 누르면 링크가 사라집니다. 미니툴바의 링크 넣기를 열어 보면 같은 주소가 들어 있어서 두 곳 중 편한 쪽에서 고치시면 됩니다.

같은 창 아래쪽의 대체 텍스트 (alt)에는 사진 설명을 적습니다. 입력한 뒤 Enter 또는 적용을 눌러야 반영됩니다. 저장하고 새로고침한 뒤에도 링크, 새 탭 설정, 대체 텍스트, 너비, 정렬이 그대로 남아 있었습니다.

6. 이렇게 활용해 보세요

• 상품 사진은 너비를 50% 안팎으로 줄이고 가운데 정렬한 뒤 상세 페이지 주소를 링크로 걸어 둘 수 있습니다.
• 배너는 크기 모드를 채우기(잘림)로 두고 이미지 위치를 바꿔서 중요한 부분이 보이게 맞출 수 있습니다.

7. 알아 두실 점

• 이 글의 화면은 모두 데스크탑 편집 화면 기준입니다.
• AI 생성과 이미지 편집 창의 AI 수정 탭은 크레딧을 씁니다. 화면에 표시되는 예상 크레딧을 확인한 뒤 사용하세요.
• 필터, 모양(마스크), 모서리 반경은 별도 글에서 다룹니다.

이미지를 컨테이너 안에 넣어 배치하신다면 컨테이너의 크기와 정렬을 다룬 글도 함께 참고해 보세요.