워드프레스 이미지 클릭시 확대 되게 하는 방법 라이트박스 플러그인

 

네이버, 티스토리, 블로그스팟에 익숙하셔서 놓치기 쉬운 것이 있습니다. 바로 라이트박스죠. 여태껏 워드프레스에서 당연히 기본 제공되는 기능인 줄 알았지만, 아닌것을 알게 되서 바로 플러그인을 설치했습니다. 지금부터 라이트박스의 뜻과 사용한 플러그인을 말씀드리겠습니다.

워드프레스 라이트박스 뜻과 플러그인 소개

라이트박스란?

사진을 클릭 했을 때, 팝업으로 뜨는 것을 말합니다. 팝업으로 뜨면서 뒷 배경은 흐려지기 때문에 라이트 박스라고 불리는 것이라고 합니다.

참고로 팝업으로 뜨면서 사진을 원본 크기로 볼 수 있게 해줍니다. 블로그에 큰 사이즈로 사진을 넣더라도 본문 컨텐츠의 폭에 의해서 작아지는 경우가 있습니다. 이럴 때, 사진을 클릭하면 원본 사이즈로 크게 볼 수 있죠. 이 블로그는 구글 블로거(블로그 스팟)라 라이트박스가 자동으로 지원이 됩니다. 

추가 수정) 지금 확인해보니 제 블로그스팟에서도 그냥 사진으로 창이 전환되지 라이트박스가 실행되지는 않았네요...? 대체 왜 이러는지 모르겠습니다.

워드프레스 라이트박스 지원 유무

제 사이트 기준으로 지원이 안 됩니다. 소극적으로 말씀드릴 수 밖에 없는 게 제가 아직 초보라서 기본 기능인데 못 찾은 걸 수 있기 때문입니다. 하지만 찾아보니 다들 플러그인이나 코드를 사용하시는 것으로 보아 원래 지원이 안 되는 것이 맞는 것 같습니다.

아무튼 그래서 사진을 클릭하면 사진만 뜨는 창으로 바뀝니다. 검색자분들이 자세히 보셨으면 좋겠어서 사진을 첨부하는 경우가 많았는데, 이렇게하면 뒤로가기가 아니라 창닫기를 누르시는 경우가 있더라구요.

추가 수정 합니다. 현재 워드프레스 버전에서 기능을 지원하고 있습니다. 굳이 따로 플러그인을 사용하지 않으셔도 돼요.

Responsive Lightbox & Gallery 플러그인

제가 최종적으로 설치한 플러그인입니다. 

사실 다른 플러그인이 더 최근에 업데이트를 한 것 같은데, 대부분 이걸 사용하시더라구요. 혼자서 다른 걸 사용하기에는 여태 워프에게 많이 데여봤으므로(애드 인서터 문단 기준을 잘 못 사용해서 광고가 사라졌다?!) 일단 대세를 따라가기로 했습니다.

차라리 제 모국어가 영어라면 설명이라도 읽어보고 필요한 기능이 있는지 여러모로 따져보겠지만, 전 최소 20년을 영어를 배웠지만 아직 울렁증이 있답니다. 그래서 그냥 남들이 많이 사용하는거로 갔어요.

설정하기

특별히 건드릴 부분은 없었고, 플러그인 활성화 후 위의 사진과 같이 세팅을 했습니다. 

위에 있는 첫번째 붉은 박스 항목이 팝업 프레임 모양을 결정해주는 것이니까 설정을 해보시면서 원하는 디자인을 찾아주세요. 저는featherlight를 선택했습니다.

enable은 활성화를 한다는 뜻이므로 체크를 해주시면 돼요.

참고하실 부분

참고로 글에 사진을 넣으실 때 링크 버튼을 클릭하신 다음에 미디어 어쩌구로 설정을 해주셔야 합니다. 링크 주소를 붙여넣으시는 것이 아니라 링크 걸기 버튼을 누르면 두가지 메뉴가 뜨는데 거기서 선택해주시면 돼요.

그냥 사진만 넣어두시면 기능이 적용이 안 되더라구요. 클릭을 해도 아무 일도 일어나지 않습니다.

마치며

어떤 플랫폼이던 장점과 단점은 확실한 것 같습니다. 기본적인 기능은 지원해주지만 섬세한 설정은 힘든 블로그스팟, 처음부터 끝까지 모두 입맛에 맞게 설정할 수 있지만 사람 당황스럽게 하는 워드프레스... 역시 이렇게 알아가는 재미가 있네요. 훈훈한 척하는데 긍정적이게 생각해야지 뭐 어떡하나요.