이미지 · 동영상 넣기
이미지와 동영상은 사이트 인상을 좌우합니다. 추가 방법과 함께, 한국 사용자가 자주 놓치는 최적화 포인트를 정리합니다.
이미지 추가하기
- Insert → Image, 또는 파일을 캔버스로 드래그&드롭
- 여러 장을 한 번에 드래그하면 순서대로 배치됩니다
채우기 방식 (Fit vs Fill)
| 방식 | 동작 | 언제 |
|---|---|---|
| Fill | 프레임을 꽉 채우고 넘치는 부분은 잘라냄 | 썸네일, 배경, 카드 이미지 |
| Fit | 비율을 유지하며 프레임 안에 모두 보이게 | 로고, 제품컷, 잘리면 안 되는 이미지 |
스타일
오른쪽 패널에서 모서리 둥글기(Radius), 그림자(Shadow), 테두리(Border), 투명도(Opacity) 를 조절할 수 있습니다.
Framer는 발행 시 이미지를 자동 최적화합니다 — WebP 변환, 화면 크기에 맞는 여러 해상도 생성(반응형), 지연 로딩(lazy loading)까지 처리합니다. 그래서 직접 압축하지 않아도 되지만, 원본은 가로 2000px 내외로 올리는 게 좋습니다.
동영상 넣기
방법은 두 가지입니다.
- MP4 직접 업로드 — 내 동영상 파일을 올림 (배경 영상 등에 적합)
- YouTube / Vimeo 임베드 — 링크만 붙여넣으면 플레이어가 들어감
배경 동영상 설정
히어로 영역에 배경 영상을 쓸 때는 보통 세 가지를 함께 켭니다.
- 자동재생(Autoplay)
- 무음(Muted) — 모바일 자동재생의 필수 조건
- 반복(Loop)
⚠️
모바일 성능 주의 — 배경 동영상은 데이터·배터리를 많이 씁니다. 한국 방문자는 모바일 비중이 높으니, 모바일에서는 정지 이미지로 대체하는 것을 고려하세요. (반응형 디자인 참고)
이미지 출처 (저작권 주의)
상업적으로 쓸 이미지는 라이선스를 반드시 확인하세요. 무료로 안전하게 쓸 수 있는 대표 사이트:
- Unsplash, Pexels — 무료 고화질 사진 (상업적 사용 가능)
- 단, 사람 얼굴·브랜드 로고가 포함된 사진은 별도 주의
⚠️
네이버·구글 이미지 검색에서 받은 사진을 그대로 쓰면 저작권 침해가 될 수 있습니다. 출처와 라이선스를 확인하거나, 무료 스톡 사이트를 이용하세요.
다음 단계
자주 묻는 질문
Last updated on