사이트 메인 영상을 모바일까지 고려해서 만드는 방법
웹사이트 메인 화면에 영상을 넣으면 확실히 분위기가 좋아집니다.
특히 여행 사이트나 브랜드 사이트에서는 첫 화면 영상만 잘 만들어도 전체 퀄리티가 훨씬 높아 보입니다.
하지만 여기서 중요한 점이 있습니다.
PC에서는 영상이 넓고 시원하게 보이지만, 모바일에서는 화면 비율이 달라지기 때문에 영상이 작게 보이거나 좌우가 잘려 보일 수 있습니다.
그래서 사이트용 영상은 처음부터 모바일 화면까지 고려해서 제작하는 것이 중요합니다.
## PC와 모바일 화면 비율 차이
PC 화면은 보통 가로형입니다.
1920 x 1080
즉, 16:9 비율입니다.
반면 모바일 화면은 세로형입니다.
1080 x 1920
즉, 9:16 비율입니다.
이 차이 때문에 PC에서는 잘 보이던 장면이 모바일에서는 잘려 보일 수 있습니다.
## 핵심은 중앙 배치
사이트 메인 영상에서 가장 중요한 것은 핵심 피사체를 화면 중앙에 두는 것입니다.
예를 들어 부산 골프 여행 사이트라면,
광안대교
골프 치는 사람
부산 야경
해운대 바다
골프장 풍경
이런 핵심 요소는 최대한 중앙에 배치하는 것이 좋습니다.
좌우 끝에 중요한 요소를 배치하면 모바일 화면에서 잘려서 보이지 않을 수 있습니다.
## 영상 안에 글자는 넣지 않는 것이 좋음
사이트 메인 영상에는 글자를 직접 넣지 않는 것이 좋습니다.
영상은 배경으로 사용하고,
타이틀이나 설명 문구는 HTML과 CSS로 따로 올리는 방식이 좋습니다.
이렇게 하면 PC와 모바일에서 글자 크기, 위치, 줄바꿈을 따로 조절할 수 있어서 반응형 작업이 훨씬 편합니다.
## 영상은 너무 복잡하지 않게
모바일 화면은 작기 때문에 너무 많은 디테일이 들어간 영상은 오히려 복잡해 보일 수 있습니다.
좋은 영상은 다음과 같습니다.
여백이 있는 영상
중앙 구도가 안정적인 영상
너무 밝지 않은 영상
텍스트가 올라갈 공간이 있는 영상
움직임이 과하지 않은 영상
반대로 피해야 할 영상은 다음과 같습니다.
화면 끝에 중요한 요소가 있는 영상
작은 글자가 들어간 영상
너무 빠르게 움직이는 영상
너무 밝아서 글자가 안 보이는 영상
디테일이 너무 많은 영상
## PC용과 모바일용 영상을 따로 만드는 것도 좋음
실무에서는 PC용 영상과 모바일용 영상을 따로 제작하는 경우도 많습니다.
PC용은 넓은 풍경 위주의 가로 영상으로 만들고,
모바일용은 인물이나 핵심 장면 중심의 세로 영상으로 만드는 방식입니다.
예를 들어,
PC용 영상
광안대교 전체가 보이는 와이드 영상
모바일용 영상
골프 스윙 장면이나 부산 야경 중심의 세로 영상
이렇게 나누면 각 화면에서 훨씬 자연스럽게 보입니다.
## 사이트에 적용할 때 CSS 설정
사이트에서 영상을 배경처럼 사용할 때는 보통 아래와 같은 CSS를 사용합니다.
```css
video{
width:100%;
height:100vh;
object-fit:cover;
}
```
여기서 중요한 속성이 `object-fit: cover`입니다.
이 속성은 화면을 꽉 채워주는 대신, 화면 비율에 맞지 않는 부분은 잘라냅니다.
그래서 모바일에서 좌우가 잘릴 수 있습니다.
따라서 영상 제작 단계에서부터 중요한 장면은 중앙에 배치해야 합니다.
## 텍스트 가독성을 위한 오버레이
영상 위에 글자를 올릴 경우에는 어두운 오버레이를 넣는 것이 좋습니다.
```css
.hero::before{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,0.45);
}
```
이렇게 하면 영상이 살짝 어두워지고, 흰색 텍스트가 더 잘 보입니다.
부산 야경이나 골프장 영상처럼 밝고 어두운 부분이 섞여 있는 영상에서는 오버레이가 특히 중요합니다.
## 정리
사이트 메인 영상을 만들 때는 단순히 예쁜 영상을 넣는 것보다, PC와 모바일에서 어떻게 보일지를 같이 생각해야 합니다.
가장 중요한 기준은 다음과 같습니다.
핵심 요소는 중앙에 배치하기
영상 안에 글자는 넣지 않기
텍스트는 HTML/CSS로 따로 올리기
모바일에서는 좌우가 잘릴 수 있다는 점 생각하기
가능하면 PC용과 모바일용 영상을 따로 제작하기
영상 위에는 어두운 오버레이 넣기
이 기준만 지켜도 사이트 메인 영상의 완성도가 훨씬 좋아집니다.
특히 여행 사이트나 포트폴리오 사이트에서는 첫 화면 영상이 전체 인상을 결정하기 때문에, 영상 구도와 반응형 화면을 반드시 같이 고려하는 것이 좋습니다.
웹사이트 메인 화면에 영상을 넣으면 확실히 분위기가 좋아집니다.
특히 여행 사이트나 브랜드 사이트에서는 첫 화면 영상만 잘 만들어도 전체 퀄리티가 훨씬 높아 보입니다.
하지만 여기서 중요한 점이 있습니다.
PC에서는 영상이 넓고 시원하게 보이지만, 모바일에서는 화면 비율이 달라지기 때문에 영상이 작게 보이거나 좌우가 잘려 보일 수 있습니다.
그래서 사이트용 영상은 처음부터 모바일 화면까지 고려해서 제작하는 것이 중요합니다.
## PC와 모바일 화면 비율 차이
PC 화면은 보통 가로형입니다.
1920 x 1080
즉, 16:9 비율입니다.
반면 모바일 화면은 세로형입니다.
1080 x 1920
즉, 9:16 비율입니다.
이 차이 때문에 PC에서는 잘 보이던 장면이 모바일에서는 잘려 보일 수 있습니다.
## 핵심은 중앙 배치
사이트 메인 영상에서 가장 중요한 것은 핵심 피사체를 화면 중앙에 두는 것입니다.
예를 들어 부산 골프 여행 사이트라면,
광안대교
골프 치는 사람
부산 야경
해운대 바다
골프장 풍경
이런 핵심 요소는 최대한 중앙에 배치하는 것이 좋습니다.
좌우 끝에 중요한 요소를 배치하면 모바일 화면에서 잘려서 보이지 않을 수 있습니다.
## 영상 안에 글자는 넣지 않는 것이 좋음
사이트 메인 영상에는 글자를 직접 넣지 않는 것이 좋습니다.
영상은 배경으로 사용하고,
타이틀이나 설명 문구는 HTML과 CSS로 따로 올리는 방식이 좋습니다.
이렇게 하면 PC와 모바일에서 글자 크기, 위치, 줄바꿈을 따로 조절할 수 있어서 반응형 작업이 훨씬 편합니다.
## 영상은 너무 복잡하지 않게
모바일 화면은 작기 때문에 너무 많은 디테일이 들어간 영상은 오히려 복잡해 보일 수 있습니다.
좋은 영상은 다음과 같습니다.
여백이 있는 영상
중앙 구도가 안정적인 영상
너무 밝지 않은 영상
텍스트가 올라갈 공간이 있는 영상
움직임이 과하지 않은 영상
반대로 피해야 할 영상은 다음과 같습니다.
화면 끝에 중요한 요소가 있는 영상
작은 글자가 들어간 영상
너무 빠르게 움직이는 영상
너무 밝아서 글자가 안 보이는 영상
디테일이 너무 많은 영상
## PC용과 모바일용 영상을 따로 만드는 것도 좋음
실무에서는 PC용 영상과 모바일용 영상을 따로 제작하는 경우도 많습니다.
PC용은 넓은 풍경 위주의 가로 영상으로 만들고,
모바일용은 인물이나 핵심 장면 중심의 세로 영상으로 만드는 방식입니다.
예를 들어,
PC용 영상
광안대교 전체가 보이는 와이드 영상
모바일용 영상
골프 스윙 장면이나 부산 야경 중심의 세로 영상
이렇게 나누면 각 화면에서 훨씬 자연스럽게 보입니다.
## 사이트에 적용할 때 CSS 설정
사이트에서 영상을 배경처럼 사용할 때는 보통 아래와 같은 CSS를 사용합니다.
```css
video{
width:100%;
height:100vh;
object-fit:cover;
}
```
여기서 중요한 속성이 `object-fit: cover`입니다.
이 속성은 화면을 꽉 채워주는 대신, 화면 비율에 맞지 않는 부분은 잘라냅니다.
그래서 모바일에서 좌우가 잘릴 수 있습니다.
따라서 영상 제작 단계에서부터 중요한 장면은 중앙에 배치해야 합니다.
## 텍스트 가독성을 위한 오버레이
영상 위에 글자를 올릴 경우에는 어두운 오버레이를 넣는 것이 좋습니다.
```css
.hero::before{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,0.45);
}
```
이렇게 하면 영상이 살짝 어두워지고, 흰색 텍스트가 더 잘 보입니다.
부산 야경이나 골프장 영상처럼 밝고 어두운 부분이 섞여 있는 영상에서는 오버레이가 특히 중요합니다.
## 정리
사이트 메인 영상을 만들 때는 단순히 예쁜 영상을 넣는 것보다, PC와 모바일에서 어떻게 보일지를 같이 생각해야 합니다.
가장 중요한 기준은 다음과 같습니다.
핵심 요소는 중앙에 배치하기
영상 안에 글자는 넣지 않기
텍스트는 HTML/CSS로 따로 올리기
모바일에서는 좌우가 잘릴 수 있다는 점 생각하기
가능하면 PC용과 모바일용 영상을 따로 제작하기
영상 위에는 어두운 오버레이 넣기
이 기준만 지켜도 사이트 메인 영상의 완성도가 훨씬 좋아집니다.
특히 여행 사이트나 포트폴리오 사이트에서는 첫 화면 영상이 전체 인상을 결정하기 때문에, 영상 구도와 반응형 화면을 반드시 같이 고려하는 것이 좋습니다.
#사이트 메인 영상을 모바일까지 고려해서 만드는 방법