워드프레스 라이트박스(Lightbox) 플러그인 / 이미지 확대 하는 방법

워드프레스 라이트박스(Lightbox) 플러그인 / 이미지 확대 하는 방법

 

보통 블로그나 게시판의 이미지는 Contents Layout 사이즈에 맞춰서 표시가 됩니다.

그래서 가로 폭이 좁은 게시판이나 포스팅일수록 이미지 본문 삽입 시 원본 이미지 보다 작아져서 보기 힘들 때가 있는데요.

그럴 때 유용한 기능이 바로 Lightbox 입니다.

* Lightbox : 화면을 채우고 나머지 웹 페이지를 흐리게 하여 이미지와 비디오를 표시하는 JavaScript 라이브러리로 Lightbox를 사용하여 축소된 이미지를 원본 이미지 크기 또는 확대 하여 볼 수 있는 기능. 

쉽게 설명하자면, 이미지를 클릭하면 위 이미지처럼 이미지가 팝업 창처럼 나타나게 하는 기능입니다.

당연하지만 이미지를 닫을 수도 있고, 기능에 따라 사이즈를 조절하여 볼 수도 있죠.

 

이 Lightbox 기능은 본문에 이미지가 삽입 된다면 가독성을 위해 꼭 필요한데요.

특히, 화면이 작은 모바일에서는 더더욱 필요한 기능입니다.

 

타 사이트에서는 아주 당연한 기능이지만,

워드프레스에서는 해당 기능이 있는 테마나 텍스트 에디터 편집기를 사용하는 게 아니라면 플러그인을 설치해야만 사용이 가능합니다.

개인적으로 저는 플러그인 사용을 추천 하는데요.

이미지를 훨씬 더 높은 퀄리티로 볼 수 있기 때문입니다. 

 

 

사용 방법은 플러그인 마다 동일합니다.

플러그인을 다운 받아 활성화 한 후, 플러그인 설정 창에서 취향에 맞게 설정을 하고, 본문에서 이미지 삽입 후 편집 창에 들어가면, 링크 대상에 미디어 파일 항목이 생기는데요. 해당 항목으로 변경하여 업데이트하면 Lightbox 기능이 설정 됩니다.

그럼 이제 Lightbox에 대한 설명을 마치고 플러그인을 소개하겠습니다.

 

 

 

추천 플러그인

본 글에서 소개하는 플러그인들은 제가 직접 검색하여 찾아보고 사용해 보았습니다.

해당 플러그인의 설정 창, 사용 화면 등 리뷰를 적어 놨으니 참고하시고 마음에 드시는 플러그인을 사용하시길 바랍니다.

 

Simple Lightbox

활성 설치 : 100,000+

아시다시피 너무 많은 플러그인 사용은 웹페이지의 속도 저하로 이어집니다.

하지만, 이 플러그인은 비교적 가볍기 때문에 속도에 큰 영향을 미치지 않습니다.

 

플러그인 설정 창 입니다.

보시다시피 기본적으로 슬라이드 기능을 제공합니다.

 

플러그인 사용 화면 입니다.

슬라이드는 자동 설정 뿐만 아니라 화살표 버튼을 통해 수동으로도 이미지를 넘길 수 있습니다.

그리고 이미지에 캡션을 표시할 수도 있습니다.

* 캡션을 입력하지 않을 경우, 이미지의 제목이 표시 됩니다.

이미지를 더 확대하는 기능은 없지만, 용량이 가볍고 기본적인 기능은 제공하고 있기 때문에 개인적으로 충분히 사용해 볼만한 플러그인이라고 생각합니다.

 

 

 

Meow 라이트박스

활성 설치 : 7,000+

개인적으로 가장 추천 드리는 플러그인 입니다.

현재 저도 이 플러그인을 사용하고 있는데요.

설정 창도 간단 명료하고, 유료 버전이 아니더라도 다양한 기능을 사용할 수 있는데,

무엇보다 굳이 미디어 파일 링크를 설정하지 않아도 모든 이미지에 라이트박스가 자동으로 적용 되는 것이 가장 마음에 듭니다.

 

자세한 설명은 밑에서 보시죠.

플러그인 설정 창 입니다.

[생기 – 애니메이션 전환] 항목을 보시면 [확대/축소] 기능이 있는데, 이게 줌 기능을 뜻하는 것이 맞다면 충분히 구매할만한 가치가 있다고 생각합니다.

 

구매는 연간과 평생을 선택할 수 있는데, 개인적으로 이 정도 금액이라면 꽤 합리적이라고 생각합니다.

다만, 평생은 첫해에만 업데이트 지원을 한다고 하는데, 아마 구매 했던 해가 지나가면 이후 업데이트 지원이 없다는 것 같네요.

그 점이 아쉽습니다.

 

라이트박스 일반 화면. 라이트박스 풀스크린 화면. 이미지를 한번 더 클릭한 화면.

플러그인 사용 화면 입니다.

앞서 말했듯이 유료 버전이 아니더라도 다양한 기능을 사용할 수 있는데,

 

우선, 이미지의 제목을 표시할 수 있습니다.

풀 스크린 화면으로 전환하면 표시된 제목을 가릴 수도 있습니다.

개인적으로는 제목 보단 캡션을 표시하는 게 더 좋은데, 그런 건 없는 것 같아 아쉽습니다.

 

그 밖에 라이트박스 상태에서 이미지를 클릭하여 한번 더 확대를 할 수 있고, 화살표 버튼을 통해 이전/다음 사진으로 넘기는 것도 가능합니다.

 

앞서 말했듯, 개인적으로 이 플러그인에 가장 마음에 드는 부분은 이미지를 편집하지 않아도 모든 이미지에 자동으로 Lightbox가 적용 되는 것 입니다. 그래서 이미지 마다 일일이 작업할 필요가 없어서 너무 편리합니다.

 

 

 

 

 

비 추천 플러그인

이번 항목에서는 제가 사용해보면서 별로라고 느꼈던 플러그인을 소개하겠습니다.

개인적으로 무언가 비판하는 내용은 작성하고 싶지 않는데요.

하지만, 이러한 내용도 누군가에게는 도움이 되지 않을까 싶어 작성했습니다.

 

WP Image Zoom

활성 설치 : 20,000+

플러그인 이름에서 알 수 있듯이 줌 기능이 있는 플러그인입니다.

하지만, 해당 기능은 무료가 아닌 유료 입니다.

자세한 설명은 밑에서 보시죠.

플러그인 일반 설정 창 입니다.

다른 라이트박스 기능을 가진 테마나 플러그인과 호환이 가능한 모양입니다.

 

줌 설정 창입니다.

위에 이미지처럼 마우스 커서가 닿는 곳에 돋보기처럼 확대해 볼 수 있다는 것 같습니다.

 

사용 화면 입니다.

이미지 밑에 캡션이 표시가 되는 것 말고는 다른 기능이 없었습니다.

 

앞서 말했듯이, 줌 기능 유료 버전에서만 사용이 가능한데요.

개인적으로 이 플러그인의 아이덴티티라고 볼 수 있는 줌 기능을 사용하려면 돈을 내야 한다는 게 마음에 안 들었습니다.

이건 마치 팥빵을 시식해보라고 내놓았는데, 팥은 들어있지 않고, 팥이 들어있는 팥빵을 먹고 싶다면 돈 내고 사라는 격이지 않습니까??

보통의 다른 플러그인처럼 일부라도 사용할 수 있게 만들어 놨으면 제가 이런 글을 작성 하지 않았을 겁니다.

이럴 거면 플러그인 이름을 줌이 아니라 그냥 라이트 박스라고 지었어야 한다고 봅니다.

팥빵이 아니라 그냥 빵이라고.

 

그나마 다행?인 것은 구매를 하면 영구적으로 사용이 가능하다는 것입니다.

제가 보기에는 이 플러그인은 라이트박스 플러그인이라기 보단 라이트박스에 부가적으로 줌 기능을 사용할 수 있게 해주는 플러그인이 아닌가 싶습니다.

 

 

 

Responsive Lightbox & Gallery

활성 설치 : 200,000+

이용자 수가 가장 많은 플러그인 입니다.

정말 다양한 디자인의 라이트 박스와 기능을 제공하고 있는데요.

하지만, 모든 기능이 전반적으로 부족하고, 기능을 추가할 수 있는 프로그램들이 있지만 유료로만 이용할 수 있고 기간제 입니다.

 

자세한 설명은 밑에서 보시죠.

일반 설정 창 입니다.

이곳에서 라이트박스를 선택할 수 있습니다.

 

라이트박스 설정 창 입니다.

이곳에서 각각 다른 라이트박스의 설정을 할 수 있습니다.

 

[스와이프 박스]부터 하나씩 보여드리겠습니다.

[스와이프 박스] 사용 화면 입니다.

따로 조작 기능은 없었습니다.

방향키를 누르면 이미지가 옆으로 움직이는 모습을 보여줬지만 이동하지는 않았습니다.

 

 

[예쁜 사진] 설정 창 입니다.

[예쁜 사진] 사용 화면 입니다.

확대 기능이 있긴 하지만, 스크롤 바로만 움직일 수 있어서 조작감이 불편합니다.

이전 다음 사진으로 이동하는 표시가 있지만 화살표나 해당 버튼을 눌러도 이동 되지 않았습니다.

 

 

[팬시박스] 설정 창 입니다.

[팬시박스] 사용 화면 입니다.

라이트박스 팝업이 떴을 때, 마우스 휠을 통해 콘텐츠 이동이 가능한 것 빼고는 다른 기능은 없었습니다.

 

 

[니보 라이트박스] 설정 창 입니다.

[니보 라이트박스] 사용 화면 입니다.

이미지 크기, 이미지 외부의 음영을 제외하면 팬시박스와 차이점이 없습니다.

 

 

[이미지 라이트박스] 설정 창 입니다.

[이미지 라이트박스] 설정 화면 입니다.

이것도 이미지 크기, 이미지 외부 음영을 제외하면 팬시 박스, 니보 라이트 박스와 차이점이 없습니다.

 

 

[TorRU] 설정 창 입니다.

 

[TorRU] 사용 화면 입니다.

따로 조작하는 기능은 없었습니다.

 

 

[깃털빛] 설정 창 입니다.

 

[깃털빛] 사용 화면 입니다.

사진 밑에 캡션이 표시 되기는 하지만 따로 조작하는 기능은 없었습니다. 

 

 

[웅장한 팝업] 설정 창 입니다.

 

[웅장한 팝업] 사용 화면 입니다.

따로 조작하는 기능은 없었습니다.

 

 

이처럼 살펴보니 다양한 디자인의 Lightbox를 제공하고는 있지만 전반적으로 기능이 부족한데요.

그래서인지 따로 기능을 확장시키는 프로그램이 있습니다.

 

하지만, 유료 입니다. 그것도 기간제…

확장 프로그램을 전부 확인해보지는 않고 2~3개 확인해 봤는데, 모두 유료이고 같은 금액인 것으로 보아 전부 유료인 것 같습니다.

그래서 이용자 수는 많지만, 무료로 사용하기에는 부족하고 유료로도 아쉽다는 생각이 들었습니다.

 

 

 

Lightvox & Modal WordPress Plugin – FOOBox

활성 설치 : 100,000+

이 플러그인도 활성 설치 수가 많아서 한번 사용해 보았는데요.

유료로는 어떨지 모르겠지만, 무료로 사용하기에는 아쉬웠습니다.

 

자세한 설명은 밑에서 보시죠.

설정 화면 입니다.

 

사용 화면 입니다.

이미지에 대체 텍스트와 캡션이 표시되는 거 말고는 다른 기능이 없어 무료로 사용하기에는 부족한 것 같습니다.

하지만, 이미지 대체 텍스트와 캡션의 표시는 가장 마음에 들었습니다.

 

유료 버전은 홈페이지에서 직접 데모로 살펴 볼 수 있고 연간 / 평생으로 구매할 수 있다고 하니 참고 바랍니다.

홈페이지에서 데모로 직접 확인해보니 화살표를 통한 슬라이드는 지원해주는 것 같습니다.

만약에 Lightbox도 자동 적용이라면 충분히 구매할만한 가치가 있다고 생각합니다.

나중에 기회가 된다면 직접 구매해서 리뷰를 남겨보겠습니다.

 

 

 

이상으로 Lightbox 플러그인에 대한 글을 마치도록 하겠습니다.

혹시, 제가 소개한 플러그인에서 놓쳤던 부분을 아시거나, 다른 좋은 플러그인을 아시거나, 모든 이미지에 Lightbox가 자동으로 적용되는 방법이나, 이미지에 확대 or 줌 하는 방법, 화살표를 통해 이미지 이동하는 방법에 대해 아시는 분이 있으시다면 댓글 남겨주시면 감사드리겠습니다.

 

읽어주셔서 감사합니다. 

밑에 좋아요 버튼을 눌러주시면 포스팅 하는 저에게 큰 힘이 되고 콘텐츠의 방향성을 잡는 데에도 도움이 됩니다.

혹시, 궁금한 점이나 원하시는 주제가 있으시다면 댓글 남겨주세요.

구글 검색 키워드(첫 페이지) : 워드프레스 이미지 확대, 워드프레스 라이트박스, 워드프레스 lightbox, 워드프레스 (플러그인 이름), (플러그인 이름) 플러그인