비주얼 섹션 이미지가 모바일에서 잘려 보일 때 대체방법

  아임웹 연구소 소장 해준  |  2017 . 09 . 18

시작에 앞서
아임웹을 사용하시는 많은 분들이 비주얼 섹션을 즐겨 사용하십니다. 저도 즐겨 쓰는 기능이죠. 그런데 비주얼 섹션 내 삽입하는 이미지에 따라서는 모바일에서 도저히 원하는 이미지로 보이지 않을 때가 있습니다.

아래 그림처럼 [로고]나 [텍스트]가 이미지 내 함께 들어간 경우 특히 조절이 어렵습니다. 좌우 또는 상하가 잘려 보이는 현상이 일어나기 때문입니다. 이럴 때 저는 이를 해결하기 위한 방법으로 슬라이드 갤러리를 사용해보실 것을 권장합니다.

갤러리 위젯 슬라이드 타입 A를 사용한 디자인




1단계, 갤러리 위젯 추가하기
상단메뉴 바로 아래 [빈 섹션]을 하나 추가하고, 갤러리 위젯을 삽입합니다.





2단계, 갤러리 가로 영역 확장 및 설정 창 열기
1) 갤러리 위젯이 삽입되면, 마우스 오른쪽 버튼을 클릭합니다.
2) 보조 메뉴가 나타나면, [가로 영역 확장]을 클릭합니다.
3) 갤러리가 좌우로 넓게 펼쳐치면, 이제 갤러리 설정을 편집해보겠습니다. 다시 한 번 마우스 오른쪽 버튼을 클릭해, 이번에는 [갤러리 설정]을 클릭합니다.





3단계, 갤러리 디자인 변경 및 사진 업로드
1) 갤러리 설정 창이 켜지면, 설정 창 상단에 [디자인] 탭으로 이동합니다.
2) [다른 스타일] 버튼을 클릭해, 아래 빨간 줄 쳐진 부분처럼 갤러리 타입을 [슬라이드]형 타입 A를 선택합니다.
3) 배경/테두리 옵션에서 투명도를 0으로 해줍니다. 이를 0으로 해주지 않을 경우 이미지 위에 반투명한 색이 함께 입혀지기 때문입니다. 컬러 팔레트를 이용해도 좋고, rgba (0,0,0,0) 이라고 입력해주셔도 됩니다.
4) 끝으로 설정 창 상단에서 [갤러리 설정] 탭으로 이동해, 슬라이드에 넣을 이미지를 추가합니다. *사진을 여러 개 사용하시는 경우 이미지는 반드시 그 비율이 동일해야 합니다. 예: 16:9비율, 1920x1080픽셀
5) 이 부분이 가장 중요합니다. 이미지를 추가했다면, 갤러리 위젯 하단 가장 끝부분을 마우스로 드래그하여, 이미지 비율을 맞춰주세요.






4단계, 게시하기 및 모바일에서 확인하기
자, [게시하기]를 누르고, 휴대폰으로 사이트에 접속해 확인해보겠습니다. 적정 비율로 이미지가 잘 나오는 것을 확인할 수 있습니다.


PC 모니터와 다르게 휴대폰에서는 가로 비율이 작아졌기 때문에, 사진도 함께 작아졌지만, 최소한 그 비율은 잘 유지하고 있는 것을 확인할 수 있습니다.




추가 정보
갤러리 위젯을 사용하면 이처럼, 사진 비율이 잘 유지되는 이미지를 추가할 수 있지만, 상단메뉴와 [겹치기]가 되지 않는 단점이 있습니다.
그래도 깔끔한 디자인을 원하시는 경우, 한 번 사용해보시길 바라요. :)



해준
배우고 익히고 나누는 | 해준씨 | 유용한 콘텐츠 마케팅 | 네이버 카페 '아임웹 연구소' 소장
jin@haejoon.com

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버페이, KCP 공식파트너입니다.