DB없이 PHP만으로 구현한 쉽고 속도 빠른 웹갤러리 MWG v3.04

 

---

 

 

일자별 수정내역

 

20240208 v3.06 수정

- subdir의 오타 수정

 * 댓글로 알려주신 추동일님 감사합니다.

 

20220517 v3.05 수정

- undefined index 메시지 출력으로 인한 수정

  * 댓글로 알려주신 sej2y 님 감사합니다.

 

20200701 v3.04 수정

- jpeg 확장자 추가 : 확장자가 jpg가 아닌 jpeg도 지원하도록 추가함.

 

20151208 v3.03 수정

- 정렬 기능 추가

  a.이름순(기본) : 알파벳 순서

  b.이름역순 : 알파벳 역순

  c.날짜순 : 수정된지 오래된 파일부터

  d.날짜역순 : 최근 수정된 파일부터

 

  ※ 첨언 : 파일은 생성시간과 수정시간이 있습니다. 생성은 오래되었더라도 수정되면 날짜순에서 영향을 받을 수 있습니다.

 

20151005 v3.02 수정

- png 파일 썸내일 생성 안되는 것 수정

  (이상하다..... 전에 안되서 수정한건데, 다시 원복함)

 

20150907 v3.01 수정

- png 파일 지원이 비정상적이어서 이를 수정함.

- 샘플 이미지 추가(gif, png, jpg)

 

20150907 v3.00 수정

- Bootstrap v3 적용 (반응형)

   --> UI나 템플릿 적용하실 분들을 위하여 범용적인 형태의 프레임워크를 적용

 

- 이미지 경로가 타 폴더인 경우를 위한 코드 반영

   --> 관련하여 문제 이야기해주시고, 댓글로 수정코드 작성해주신 kwon님 감사합니다.

 

※ 업데이트 파일 존재여부를 자동확인하는 모듈은 추후 다시 구현예정입니다.

 

20150126 v2.00 수정

- 반응형 페이지로 변경(데스크탑/모바일 동일)

   --> 가로폭에 따라서 폴더/이미지 갯수 자동으로 결정

   --> 기존 사용하던 MWG.php 및 MWGMobile.php는 백업을 위하여 파일명(앞에 z_ 만 붙임)만 변경하여 보관

 

※ 다음 버전에서는 업데이트 파일 존재여부 자동 확인 모듈 탑재 예정

 

20141019 v1.41 수정

- 모바일 모드에서 버튼을 아이콘화

- 모바일 모드 기본 세팅변경(2x5에서 2x10줄로 늘림)

- 랜덤갤러리 로직 일부 수정

- 모바일 모드 썸네일 관련 하단 메시지 통일

 

20141017 v1.40 수정

- 디자인 약간 수정.. @_@;;

                                    +) 혹시 저보다 디자인 감각이 떨어지시는 분들을 위해....(설마 있겠어??)

 

20141016 v1.35 수정

- 랜덤이미지 기능 개선

  : 크롬 브라우저 memory leak 해결. (혹시 문제 발견하시면 연락부탁드립니다.)

 

20140820 v1.34 수정

- IE에서 이미지 이전/다음 작동이 되지 않던 문제 수정

                                    +) 버그 제보해주신 조성우님 감사합니다.

 

20140808 v1.33 수정

- 랜덤이미지 기능 개선

  : 크롬 브라우저 memory leak 부분 해결을 위하여 5번에 한번씩 페이지를 reload

                                    +) 아.. 이 버그 때문에 이렇게 구리게 해결해야하다니..

 

20140714 v1.32 수정

- 랜덤이미지 기능 개선

  : 크롬 브라우저 memory leak 현상 개선

=> 하지만 여전히 문제가 있네요.. 크롬.. 나빠 ㅠㅠ

 

20140706 v1.31 수정

- 랜덤이미지 기능 개선

  : 랜덤이미지 리스트에 중복제거 처리 및 모든 이미지를 랜덤으로 모두 재생한 다시 처음부터 재생

 

20140702 v1.3 수정

- 랜덤이미지 보기 기능 추가

  : 이미지를 랜덤으로 보고자 하는 폴더에서 랜덤보기를 누르면 해당 폴더 및 하위 폴더 모든 사진 리스트를 가져와서 

    5초마다 랜덤으로 이미지를 변경해서 보여줌

 

20140628 v1.21 수정

- 모바일쪽 데스크탑보기 버튼 링크 수정

 

20140628 v1.2 수정

- 이미지 보기 상에서 이전/이후 이미지 보기 기능 추가

- 일부 버그 수정

 

20140625 v1.1 수정

- 모바일/데스크탑 보기 버튼 생성

- 썸네일 디렉토리로 인한 이미지 정렬 깨지는 부분 수정

 

 

---

 

 

1. 만든이의 말과 스크린샷

집에서 사용중인 NAS장비에 apache와 php가 지원되어 어떻게 활용할 수 있을까 궁리하다가..

웹갤러리 프로그램을 몇개(piwigo등..) 찾아보고 설치해보았으나.. NAS장비의 CPU 자체가 워낙 구리다보니..

썸네일을 만들어내는데 너무 오랜 시간이 걸려 퍼포먼스가 안나와서.. 도저히 사용할 수 없다는 판단아래..

(더더군다가 NAS장비에 무리도 주고..)

 

퍼포먼스 위주의 웹 갤러리 프로그램을 만들어보아야 겠다고 생각해서 하루 꼬박 투자해서 만들어보았습니다..

 

이름하여 MWG(Mrtroll Web Gallery) !!! (ㄷㄷ)

 

다운로드는 요기..

 

MWGv3.06.zip

3.51MB

 

본인은 퍼블리셔가 아니기 때문에.. 웹표준 웹접근성 웹2.0 따위 모릅니다 -_-.. 

걍 데탑(IE, 크롬)과 안드로이드 기기 몇종에서 테스트한게 전부이니.. 

부트스트랩을 적용하여 웹표준을 만족시켰습니다.

미려하게 쓰실분들은.. 알아서 바꿔서 쓰셨으면..;;;

 

현재 v3 스크린샷을 찍지 못한상태입니다. 차후 변경하도록 하겠습니다.

변경된 스샷 적용완료 :D

 

스크린샷은 요기...

 

 

0123

 

 

 

 

2. 개발환경

Apache/2.4.3 (Unix) 

PHP/5.4.8

GD Version/2.0

 

만든이의 말 : 

환경쪽은 잘 몰라서.. 다른 환경에서 오류나거나 해도 몰라요.. @_@ 

혹시 쓰시다가 이거 말고 필수적으로 있어야 하는 스펙이 있다면.. 알려주세요.

 

PHP나 Apache버전은 왠만하면 문제 없으리라 생각합니다만.. GD는 필수 입니다.

혹시 GD1.0 버전에서 동작하는지 테스트 가능하신 분이 계신다면 부탁드립니다.

 

 

3. 폴더 구조 및 파일 개요

 

먼저, 본 프로그램은 누구나 변경해서 사용할 수 있음을 알립니다.

또한 폴더 or 파일 표시에 사용한 아이콘은 GPL 라이센스를 따름을 밝힙니다.

더불어 이 프로그램을 사용하여 발생하는 문제점에 대하여서는 전적으로 사용자에게 있음을 알립니다.

(사실 기존 파일을 읽고 썸네일(작은이미지)만 생성하기 때문에 문제될건 없으리라 생각합니다만, 그냥 적어봤습니다.)

 

폴더구조

/MWG

   ㄴ /css

   ㄴ /font

   ㄴ /Gallery

   ㄴ /js

   ㄴ /MWGImages

   ㄴ index.html

   ㄴ MWGRandom.php

   ㄴ MWGv3.php

   ㄴ _index.html

   ㄴ _MWG.php

   ㄴ _MWGMobile.php

 

 

 

- /css : MWG에서 사용하는 스타일시트(부트스트렙3.0 포함)

- /font : 부트스트렙에서 지원하는 폰트(아이콘형태)를 지원하기 위한 파일

- /Gallery : MWG에서 기본적으로 읽는 디렉토리

- /js : 부트스트렙3.0에서 사용하는 자바스크립트 파일모음

- /MGWImages : MWG에서 사용하는 이미지 파일

 

- index.html : 모바일 기기를 구분하여 모바일인 경우 MWGMobile.php로, 아닌경우 MWG.php로 이동하도록 되어있다.

                    MWGv3.php로 이동

- MWGRandom.php 특정폴더내 이미지를 랜덤으로 표시하는 프로그램

- MWGv3.php : MWG를 구동하는 기본 파일

- _index.html : 하위버전용 index.html (MWGv3에서 미사용)

- _MWG.php : 하위버전의 MWG파일 (MWGv3에서 미사용)

- _MWGMobile.php : 하위버전의 모바일기기용 MWG 페이지 (MWGv3에서 미사용)

 

 

4. 프로그램 설치 방법

설치랄 것도 없습니다. MySQL을 사용하지 않으므로..

그냥 첨부된 파일을 압축해제 후 업로드 하거나, 서버에 올리고 압축을 해제하면 끝!!

 

테스트를 원하시면 /Gallery 디렉토리 안에 이미지를 넣거나 특정 디렉토리를 만들어서 이미지를 넣어보세요.

 

5. 프로그램 동작 설명

MWG는 기본이 되는 갤러리 디렉토리(기본값은 /Gallery) 안에 있는 디렉토리 구조를 읽어서 

리스트를 썸네일 또는 아이콘 형태로 웹화면에 출력해 주는 프로그램입니다.

(참고로 Gallery 폴더내 파일에 대하여서는 참조만 할 뿐 어떠한 동작도 하지 않습니다.)

 

다만 특정 폴더에 접근했을 때 이미지파일(jpg, png, gif)이 있으면 해당 디렉토리에 썸네일 디렉토리(기본값은 /_thumbnail)를 만들고

이미지의 긴축 사이즈를 128px로 리사이즈하여 썸네일을 만듭니다.

(리샘플도 가능하도록은 설계하였습니다만 단순 리사이즈도 이미지가 몇메가쯤 되어버리면 처음 열 때 부하가 심해서.. 기본값은 리사이즈입니다.)

 

처음 해당 폴더나 페이지에 접근했을 때에만 썸네일을 만들고, 이후 파일이 존재하면 만들지 않습니다. (속도 향상)

이미지 외의 파일들은 누르면 다운로드 되도록 a 링크를 걸었으니, 혹 타인과 공유하고 싶은 파일이 있을 경우 사용하시면 

좋지 않을까 합니다.

 

※ 참고로 128픽셀로 리사이즈된 이미지는 제 경우는 3~4kb 수준이었습니다. 용량관리에 참고하세요.

 

썸네일의 경우 여러사람이 동시에 접근하거나 만들다가 오류가 발생한 경우를 감안하여 썸네일 재생성 버튼을 만들어 두었으니 썸네일이 정상적으로 표시되지 않으면 사용하실 수 있습니다.(저는 아직까지 문제가 된 경우를 본적은 없습니다만..)

 

 

6. 프로그램 내 변경 가능한 변수 또는 상수 설명

 

(... 생략 ...)

////////////////////////////

// static parameter

////////////////////////////

$rowcnt = 0;

$iconsPerRow = 2; // 한줄당 보여줄 파일 갯수

$filePerPage = $iconsPerRow * 5; // 한 화면에 보여줄 파일 개수

$filePerPage = 30; // 한 화면에 표시할 파일(이미지) 개수 (V2.00 부터 반응형으로 변경)

$numberOfPaging = 5; // 페이징 갯수

$pageTitle = "Mrtroll's Web Gallery"; // 타이틀

$dir_path = "./Gallery/";   // 갤러리 베이스 디렉토리

$icon_path = "./MWGImages/icons"; // 아이콘 파일위치

define("THUMBNAIL_DIRECTORY", "_thumbnail");  // 썸네일 파일 저장 디렉토리

define("THUMBNAIL_SIZE", "128");  // 썸네일 이미지의 긴축 사이즈 조절

define("THUMBNAIL_QUALITY", "80");  // 썸네일 이미지 80% 품질

(... 생략 ...)

 

 

7. 마치며

필요에 의해 나에게 필요한 최소한의 기능만 구현한 것이니.. 필요하시면 더 구현해서 사용하시고..

오류가 있는 부분에 대해서는 답글 달아주시면 최대한 고쳐보겠습니다..@_@