이미지를 잘 다루자

이미지를 넣고 수정하는 방법을 설명하려고 한다. 이미지 위젯을 이용한 이미지 삽입은 기초편을 참고하고 직접 해보면 특별히 어려운 점이 없으므로 넘어가기로 하고 배경에 이미지를 넣는 방법을 소개하겠다.

그에 앞서 먼저 이미지 포맷에 대한 이야기를 잠깐하고자 한다.

웹에서 사용되는 이미지는 화질과 용량이라는 서로 반대되는 성질로 인해 고민이 필요하다. 좋은 화질을 제공하고 싶지만 좋은 화질의 이미지는 용량이 커지므로 서버의 전송량도 커지고 웹페이지를 불러오는 시간도 오래 걸리기 때문에 적절한 화질과 용량을 유지하는 것이 아주 중요하다.

보통 jpg와 png 포맷(어쩌다 애니메이션이 필요할 땐 gif)을 사용하게 되는데 투명한 배경이 필요한 경우가 아니라면 png보다는 jpg를 쓰는 편이 용량을 줄이는데 도움이 된다. 사실 png 포맷의 사진을 업로드해봐야 용량만 과도하게 커질 뿐 화질에서 탁월한 차이는 없다.

뿐만 아니라 대부분의 워드프레스 사이트에서는 이미지 최적화 플러그인을 설치하므로 배경이 투명하지 않은 png는 jpg 방식으로 자동 변환하거나 압축하므로 png 포맷의 고화질 이미지 업로드는 업로드 시간과 압축 시간만 소요되므로 작업 속도가 느려지는 단점만 추가하는 꼴이 된다. 게다가 png, jpg 모두 webp 방식의 웹 전용 이미지 포맷으로 변환하는 경우도 많으므로 jpg 화질 80~100으로 업로드하는 것이 여러 모로 편하다.

위 이미지에서 보는 것처럼 png로 업로드하지만 자동으로 webp 포맷으로 변환해서 보여주도록 해놓은 상태이다.

자. 이제 본 내용으로 들어가자. 엘리멘터에서는 이미지가 주로 2가지 형태로 사용된다.

하나는 이미지로 삽입되는 형태, 다른 하나는 컨테이너의 배경으로 삽입되는 형태이다.

배경에 이미지를 넣기 위해서 가장 먼저해야 할 일은 컨테이너를 만드는 것이다.

일정한 공간을 컨테이너로 지정해주고 컨테이너의 옵션에서 배경을 지정한다.

오른쪽 구조 패널을 보면 소셜 액트 컨테이너를 만들고 왼쪽 컨테이너 편집 패널에서 너비와 최소 높이를 지정한 것이 보인다. 이렇게 컨테이너를 생성한 다음 스타일 탭에서 배경을 지정할 수 있다.

스타일 탭의 배경 유형에는 네 가지 옵션이 있다. 붓 모양의 클래식 옵션부터 그래디언트, 동영상, 슬라이드쇼까지 총 네 가지의 옵션 중 한 가지를 선택한다.

먼저 클래식 옵션에서는 배경을 색상으로 채울 것인지 이미지로 채울 것인지 선택할 수 있다. 그래디언트~슬라이드쇼는 다른 레슨에서 다루고 이번 레슨은 클래식 옵션의 이미지만 살펴본다.

이미지가 표시되는 영역을 클릭하면 다른 이미지로 변경 가능하다.

원하는 이미지를 선택한 후 이미지의 옵션을 설정하는 법을 알아보자.

먼저 이미지가 화면 가로폭에 꽉 차야 한다면 해상도는 Full로 설정하는 것이 좋다. 컨테이너가 작아서 배경 이미지도 작다면 컨테이너 크기를 고려해서 적당한 해상도를 선택하면 된다.

위치는 가운데 가운데(버전에 따라 정중앙 등으로 표현되기도 함)로 설정하면 크게 문제가 없지만 이미지에서 보여주고 싶은 중요한 내용이 하단 혹은 상단에 위치한다면 상단 중앙 또는 하단 중앙으로 설정해도 무방하다.

첨부파일은 기본 그대로 두고 반복은 반복 없음으로 설정한다. 만약 패턴형태의 이미지를 반복해서 배경으로 깔고 싶은 경우는 반복(가로 세로 모두 반복), 반복-x(가로만 반복), 반복-y(세로만 반복)로 설정하면 된다.

표시 크기는 덮기또는 포함 등의 옵션이 있는데 대부분 덮기를 사용할 것이다.

덮기는 이미지 크기에 따라 컨테이너의 가로 또는 세로를 꽉 채우는 것이다. 즉, 사용자 디스플레이 해상도에 따라 컨테이너와 이미지의 크기가 맞지 않으므로 이미지의 가로 혹은 세로가 잘려나가는 경우가 생기는 옵션이지만 자연스럽게 컨테이너 배경을 채울 수 있고 포함은 컨테이너 안에 이미지 전체가 보이도록 채우기 때문에 컨테이너의 상하 또는 좌우 여백이 보이는 옵션이다.

기본, 자동을 사용하는 것보다는 덮기를 지정하는 편이 확실히 여백을 없앨 수 있다.