Post View

모바일에서 이미지를 최대화 하는 플러그인을 제작했습니다.

제 블로그에는 설명을 위해 이미지를 함께 올리는 경우가 많은데요.
데스크탑이나 태블릿 환경에서는 이미지가 볼 수 있을 정도의 크기로 보여지지만, 휴대폰과 같이 사이즈가 작은 경우에는 이미지를 보는데 불편함이 있습니다.

플러그인을 사용하여 이미지를 어떻게 하면 크게 보여줄 수 있을지 찾아봤는데 위의 이미지처럼 모달 팝업으로 보여주는 형태만 보이더라구요.
문제는 모달 팝업으로 보여주는 경우에는 이처럼 이미지가 더 작게 보인다는점이었죠.

그래서 어떻게 하면 휴대폰에서도 큰 이미지를 볼 수 있을까 하다가 이미지를 스크롤이 생기도록 처리하면 어떨까? 라는 생각에 플러그인을 만들어보았습니다.
일단 플러그인은 https://github.com/kurien92/kreFullImage에서 확인하실 수 있구요.
데모 버전은 https://project.kurien.net/kreFullImage/에서 확인이 가능합니다.

작동하는 방식은 위의 이미지를 320 * 490(너비 * 높이)해상도에서 클릭했을 때 이미지와 화면의 사이즈에 맞춰서 스크롤이 생기게 되며 아래 이미지처럼 화면에 보여줍니다.

만약 해상도가 320 * 640(너비 * 높이)이고 이미지 사이즈가 1920 * 1080이라면 플러그인을 적용하고 이미지를 클릭하는 경우 이미지를 1137.77 * 640 사이즈로 가로 스크롤을 만들어 보여줍니다.
만약 해상도가 640 * 320이라면 이미지는 640 * 360으로 세로스크롤을 만들어 보여주게 됩니다.

이미지를 원본사이즈로 보여주는 방법도 있지만 그렇게 되면 한방향으로 움직이는게 아니라 오히려 더 이미지를 보기 어려울 것이라고 판단했고,
휴대폰에서 이미지를 가장 간단하면서 크게 보여줄 수 있는 방법은 한 방향으로 스크롤을 하는 것이라고 생각되어 이와같은 플러그인을 제작하고 블로그에 적용해두었습니다.

현재는 이미지를 클릭하는 경우 이미지가 화면 전체로 커지는 기능만 존재하기 때문에 사용자 UI/UX가 불편할 것이라고 생각되는데요.
그러한 문제들은 업데이트를 통해서 차차 해결해나갈 예정입니다.
물론 그와 동시에 블로그에도 적용 되겠죠?

필요하신 분은 마음껏 사용해주시고 좋은 아이디어가 있거나 프로그램 오류가 있다면 알려주시기 바랍니다!

Comments