메타플라이어매뉴얼/웹사이트

4. 이미지·동영상·버튼 넣기

이미지·동영상으로 내용을 설명하고 버튼으로 방문자의 다음 행동을 안내합니다. 예시 이미지는 실제 사용할 자료로 교체해 주세요.

1단계. 이미지 추가하고 교체하기

  1. 라이브러리의 이미지를 추가하고 선택합니다.
  2. 오른쪽 이미지 소스 → 이미지 선택하기를 클릭합니다.
  3. 선택 창에서 기존 리소스를 찾거나 사용할 파일을 업로드한 뒤 선택합니다.
  4. 창이 닫히면 썸네일과 캔버스의 이미지가 바뀌었는지 확인합니다.
이미지 인스펙터: 이미지 소스, 모바일 이미지, 크기 기준, 채우기 및 이미지 링크
이미지 설정 — 일반 이미지와 모바일 이미지를 구분하고 크기·채우기 방식을 확인합니다.

2단계. 이미지가 잘리는 방식 정하기

설정
화면에서 보이는 차이
영역에 맞추기
지정한 영역 높이를 기준으로 표시합니다. 채우기 방식에 따라 여백이나 잘림이 생길 수 있습니다.
이미지에 맞추기
원본 비율에 맞춰 높이가 정해집니다.
꽉 채우기
영역을 빈틈없이 채우며 이미지 일부가 잘릴 수 있습니다. 얼굴·로고·글자가 잘리지 않는지 확인하세요.
비율 유지
원본 비율을 유지해 보여줍니다. 영역과 비율이 다르면 여백이 생길 수 있습니다.
늘이기
영역에 맞게 늘어나 원본 모양이 달라질 수 있습니다.

모바일에서 다른 사진을 쓰려면 모바일 이미지에 별도 이미지를 선택하고 실제 모바일 게시 화면에서 확인합니다.

3단계. 동영상 넣기

  1. 라이브러리에서 동영상을 추가합니다.
  2. 동영상 주소 입력란에 지원되는 영상 주소를 입력합니다. 잘못된 주소라는 안내가 나오면 주소 형식을 확인합니다.
  3. 비율·최대 너비·모서리 등을 조절합니다. 가로 영상과 세로 영상은 각각 원본 비율에 맞춰 확인합니다.
  4. 자동 재생·음소거·반복·컨트롤·썸네일 옵션이 필요한지 선택합니다.
  5. 게시 화면에서 썸네일을 클릭하여 재생되는지, 소리와 조작 버튼이 의도대로 동작하는지 확인합니다.

안내

자동 재생은 브라우저 정책이나 영상 제공자의 설정에 따라 제한될 수 있습니다. 자동 재생을 켰다는 이유만으로 모든 기기에서 즉시 재생된다고 가정하지 마세요. 방문자가 직접 재생할 수 있는지도 확인합니다.

4단계. 버튼 문구와 동작 설정하기

  1. 버튼을 추가하고 자세히 보기 등 눌렀을 때의 결과를 알 수 있는 문구를 입력합니다.
  2. 동작을 링크 이동으로 설정하고 직접 입력 또는 링크 불러오기로 이동할 주소를 지정합니다.
  3. 외부 주소는 https://를 포함한 전체 주소를 확인합니다. 같은 사이트의 페이지는 링크 불러오기에서 대상 페이지를 선택하면 오타를 줄일 수 있습니다.
  4. 새 탭 열기 여부와 버튼의 글자·배경색·너비·정렬을 확인합니다.
  5. 게시한 실제 페이지에서 버튼을 눌러 목적지와 새 탭 동작을 확인합니다.

클립보드 복사 등 다른 동작을 선택했다면 해당 동작에 필요한 값을 입력하고 방문자 화면에서 결과를 확인합니다. 편집 캔버스에서 선택되는 것만으로 링크 동작까지 확인된 것은 아닙니다.

완료 확인

  • 샘플 이미지와 문구를 실제 내용으로 교체했습니다.
  • PC·모바일에서 중요한 이미지 영역이 잘리지 않습니다.
  • 영상이 재생되고 버튼이 올바른 주소로 이동합니다.