[WEB DESIGN] FULL SCREEN BACKGROUND

 

풀 스크린 배경 : 이미지나 동영상을 화면 전체에 가득 채워서 풀 스크린으로 보여주는 기법

- 사이트에 접속하자마자 방문자의 시선을 한눈에 사로잡을 수 있음

- 주로 원 페이지 사이트에서 주로 사용하지만, 첫 화면에만 사용할 수 있음

 

기대 효과

- 기존 사이트를 그대로 사용하면서도 사이트 방문자들에게 사이트의 주제나 분위기를 단번에 전달함

 

장점

- 내용이 한 화면씩 바뀌는 경우에 적합

- 바뀌는 화면마다 풀 스크린 배경을 사용하면 더욱 효과적

 

단점

- 처음 사이트를 로딩하는 데 어느 정도 시간이 걸림

- 사용자들이 많거나 모던 브라우저 사용자들이 많이 접속한다면 풀 스크린 배경 사용을 자제하는것이 좋음

- 화면에 표시할 내용이 많은 경우에도 풀 스크린 배경은 적합하지 않음

 

 

---

 

 

풀 스크린 배경 : 이미지

- 어떤 스마트 기기에서도 배경 이미지를 볼 수 있게 설정해줘야 함

- 이미지 파일 형식 : GIF, JPEG, PNG 등을 주로 사용

  - GIF : 사용가능한 색상 수가 512가지로 제한되기 때문에 텍스트나 아이콘, 버튼 등 간단한 그래픽 이미지에 주로 사용

  - JPEG / PNG : 사진이나 다양한 색감을 표현는데 주로 사용하기 떄문에 배경 이미지 파일로 주로 사용

- 고품질의 큰 이미지 사용

- 주로 넓이 1100px ~ 1200px인 사진을 사용

- 이미지 최적화 : 이미지 파일은 그대로 유지하면서 파일 용량을 줄이는 과정

- 예시 : https://accounts.kakao.com/login/kakaostory

카카오스토리

 

 

풀 스크린 배경 : 동영상

- 방문자의 호기심을 더 자극해 끝까지 보게 만듦

- 회사 홍보나 제품 광고가 필요한 사이트에서 주로 사용

- 20초에서 30초 정도로 짧은 동영상을 사용하는것이 좋음

- 모바일 브라우저에는 동영상 풀 스크린 배경을 사용할 수 없어서 대신에 보여줄 포스터 이미지를 함께 넣어야함

- 동영상 파일 형식 : MP4 / 이전 브라우저는 WebM이나 Ogg 형식

- 인코딩 : 동영상 파일 변환 프로그램

- 동영상은 재동 재생 : <video>에 autoplay 속성 추가

- 가급적 오디오는 제거하고 넣기

- 예시 : http://www.dfy.co.kr/seoul/

디파이 더 커런트 | D.FY