PDF 뷰어 디자인 요청

aeroitems commented 10 years ago

PDF 뷰어를 만들어야 하는데 반응형 웹 형태로 디자인이 필요합니다. ImageMagick 을 이용해 PDF 파일을 이미지로 변형하도록 하였고 이미지는 3단계 압축율과 4단계의 이미지 사이즈를 관리자가 선택하여 업로드 할 수 있도록 하였습니다.

현재 PDF 뷰어의 내용을 참고하여 새로운 뷰어를 디자인 요청드립니다. 들어가야할 기능의 목록은 다음과 같습니다.

축소(Zoom out) / 확대(Zoom in) (5%~10% 단위)

알아서 맞춤(fit smart) / 페이지에 맞춤(fit page hight) / 페이지 너비에 맞춤(fit page width)

이전페이지(Previous page) / 다음페이지(Next page)

첫페이지로(goto first page) / 마지막 페이지로(goto last page)

시계방향으로 회전(Rotate right) / 반시계방향으로 회전(Rotate left)

전체목록보기(그리드뷰 - grid view)

양면펼쳐보기(view 2pages)/단면보기(view single page)

이북닫기(close ebook viewer)

leihaht commented 10 years ago

갤러리 페이지를 새롭게 만드는것을 구상중. 양면 펼쳐보기는 시중에 있는 수많은 jquery plug들중에서 있는지는 확인이 필요함. 만약 위 기능을 만족할만한 jquery plug이 없다면 새롭게 만들어야됨.

leihaht commented 10 years ago

검색해봤는데 역시 이미 누군가 만들어놓은게 있네요. 그런데, 무료는 아니고 유료입니다. http://codecanyon.net/item/real3d-flipbook-jquery-plugin/4281720?ref=splashmag jquery plug으로 제공하며 여러가지 버전이 있습니다. WebGL을 사용하는 3D 애니메이션, CSS3 애니메이션, jquery를 사용한 애니메이션 등등 다양하네요. 이미지를 회전하는 기능은 없는듯하네요.

다른 더 좋은게 있나 더 검색해볼게요.

leihaht commented 10 years ago

http://codecanyon.net/item/diamond-flipbook-jquery/3146425?ref=splashmag 이것도 괜찮아 보이네요. 역시나 이것도 유료네요.

leihaht commented 10 years ago

http://www.turnjs.com/ 이건 무료로 제공하는것 같네요. 상용으로도 쓸수있습니다. 그것말고도 pdf를 html5 로 변환하는 방법도 있군요.

jejoongkim commented 10 years ago

세가지 다 아주 훌륭하네요. 가격도 저렴하고..

leihaht commented 10 years ago

이미지를 불러올때 어떻게 불러오는지 자세히 알아야됩니다. pdf에서 이미지로 변환한후에 그후 어떻게 처리하는지 알고싶습니다. 가장 좋은 방법으로 보이는것은 이미지로 변환한후에 압축파일로 압축하고 실제 웹사이트에서 불러올때는 이미지 캐시를 통해 불러오는게 좋은듯하네요. 그렇게하면 이미지를 한번 로드하면 캐시에 저장이 되기에 빠른 로딩이 됩니다. 이걸 하는 방법은 여러가지지만 제가 검색해서 찾은것은 http://nielse63.github.io/php-image-cache/ 여기있는것이고, php를 통해 서버에서 처리하는것이네요. 그후에 압축된 이미지는 php의 배열을 통해 불러올수있네요.

baemoc commented 10 years ago

영문으로 되어있어, 사용법에 대해서는 최이사님과 상의해 봐야하겠습니다. 아래 궁금한 점을 적어놨습니다. 확인 부탁드리겠습니다.

압축파일이라는게 zip과 같은 파일을 말씀하시는건지, 이미지를 압축한다는 말씀이신지 궁금하네요?

현재 보여주신 이미지압축&캐싱 소스의 예시(이미지)를 보시면 이미지 압축으로 인한 색상이 변하는 것을 보실 수 있습니다. (PNG에서 JPEG로 바뀐 상태고, 퀄리티가 떨어진 상태입니다.)

원본이미지가 있고, 캐시를 이용하는 부분이 추가되는 것은 아닌지? (트래픽은 줄지만, 서버용량이 늘어나는 것은 아닌지?)

사이트별로+이북별로 캐시폴더를 따로 만들수 있는지?. (이북을 삭제하거나 변경하였을때, 캐시도 삭제되어야 합니다.)

leihaht commented 10 years ago

확실히 제가 자세히 알아보지 않고 추천을 드린것 같네요. 이런것도 있다고 말씀드리고 싶었던거구요.

이미지 압축방법에 대해서는 이미 아시겠지만 디자이너 입장에서 말씀드릴것은, 이미지 파일이 일정 용량보다 커진다면(예를 들면 2메가이상?) jpg으로 쓰는게 좋습니다. png 같은경우는 퀄리티를 보존하는 것은 굉장히 좋지만 용량을 줄이는점에서는 좋지않습니다.

웹사이트같은경우는 프린트용 이미지보다 dpi도 상대적으로 낮게 설정되있죠. 프린트용 이미지는 보통 일반적으로 300dpi를 쓰지만, 웹용 이미지는 모니터 스크린의 한계에 의해서 72dpi를 씁니다. 그리고 해상도도 프린트용에 비하면 굉장히 낮은 편이죠.

그래서 png는 아이콘이나 로고, UI 같은 용도로 쓰는게 일반적이고 대부분의 이미지는 jpg로 씁니다.

leihaht commented 10 years ago

제가 추천드린 사이트같은경우는 이미지 압축이 정확히 어떻게 되는지는 아직 알수없지만, 예제에 나와있는 이미지는 png를 jpg으로 변환한것으로 보이네요. png를 jpg로 변환하는것은 아무 문제가 없습니다. 오히려 그렇게 사용하는것을 권장하죠. 그에따라 이미지 퀄리티가 변하는것은 어쩔수없지요.

웹사이트에서의 이미지는 약간의 이미지 퀄리티가 변하는것은 감수해야된다고 생각합니다.

단, 원본 이미지를 다운로드해야되는것 같은경우는 따로 jpg로 압축하지않는 원본이미지를 다운로드해야겠지요. 원본이 png면 png, 큰 사이즈의 jpg면 역시 jpg가 되는거죠.

baemoc commented 10 years ago

PDF를 업로드 하여 서버에서 이미지로 변환할때, JPG로만 만들도록 해놨습니다. 퀄리티도 이미지 변환하는 과정에서 조절할 수 있습니다. 이미지 압축은 따로 필요하지 않을 것 같고, 캐싱의 필요 여부에 따라 캐싱 부분만 추가하면 되겠습니다.

netnamu / zinpack

PDF 뷰어 디자인 요청 #62