워드프레스 KBoard 사진 이미지 원본 등록 방법

code 2018.01.10 16:29
적용 대상 버전: KBoard 게시판 5.3.4

KBoard는워드프레스 한국형 게시판 중 가장 많이 사용하는 플러그인이 입니다. 커스터마이징도 잘 되고 커뮤니티를 통한 개발사의 지원이 활발히 이루어 지고 있고 이를 통한 기능 개선이 꾸준히 이루어지고 있어서 사용중 발생하는 어지간한 문제는 어떻게든 해결이 가능합니다.

워드프레스에서 KBoard 사용시 사진 파일을 등록하면 jpg 이미지 원본이 등록되지 않고 dpi 변경, exif 소실, 이미지 품질 바뀜 현상이 발생 하는 경우가 있습니다.
dpi 등이 유지되더라도 파일 용량을 비교해 보시면 원본이 아님을 알 수 있습니다.

이것은 등록되는 모든 파일에서 나타나는 현상은 아니고 사진의 exif 태그에 사진의 방향을 나타내는 Orientation 태그가 포함될 경우에만 나타납니다.

KBoard에서는 exif 정보가 있는 사진 파일에 등록되는 시점에 Orientation 태그 정보를 체크하여 이미지 회전값을 보정하여 저장하도록 되어 있습니다.

이때 Orientation 정보가 포함되어 있지 않은 파일은 원본 그대로 저장되며
 Orientation 정보를 포함하고 있는 파일은 Orientation 태그 값의 종류와 상관없이(회전이 필요없는 사진도 포함하여) 모두 워드프레스 내부 이미지 처리 메서드인 wp_images_editor에 의해 재저장 됩니다.

문제는 이 때 발생하는데 재저장 과정에서 exif 정보가 소실 되며 dpi정보가 바뀌고 이미지 품질이 떨어집니다.

wp_images_editor 에서 이미지 저장시 이미지 퀄리티를 높여서 저장하도록 할 수는 있지만 dpi등이 변경된다면 출력 품질에 영향을 받습니다.

또 exif가 소실되면 exif를 활용한 사진 관리가 불가능 하게 되겠죠.

해결방법은 사진이 등록될때 이미지 재처리를 하는 KBoard의 imageOrientation() 함수기능을 동작하지 않도록 하면 됩니다.
 imageOrientation() 의 위치는 KBFileHandler.class.php 파일에 있으며 해당 함수에서 이미지 저장을 실행하는 save($image) 가 포함된 라인만 주석처리 해 주면 됩니다.

해당 함수를 그대로 사용하고 이미지 퀄리티만 높이고 싶다면 해당 부분을 주석 처리하지 않고 바로 윗 라인에 wp_images_editor를 통해 퀄리리를 조절하는 라인만 추가해 줘도 됩니다. (퀄리티 설정을 100으로 한다면 오히려 사진 용량이 늘어나는 경우도 있겠죠^^)

재미있는 것은 이미지 로테이션을 수행하는 imageOrientation() 함수는 재대로 동작하지 않는 것 같은데, 해당 함수와 상관없이 KBoard에는 Orientation을 보정 해주는 스크립트가 포함된 것 같다는 것입니다.
테스트를 해보니 워드프레스에서 Orientation을 처리해 주고 있었습니다. 플러그인 활성화없이 테스트 해 보니 img 태그에 url 만 걸어도 워드프레스 내의 페이지에서는 Orientation값에 해당하는 로테이션을 보정하여 화면에 보여줍니다. 언제부터 가능한 기능이었는지...^^; Orientation이 보정이 필요한 사진을 그동안 잘 다룰 일이 없어서 몰랐었네요. 특히나 순수 사진파일들은 플러그인들을 통해서만 거의 처리를 했었으니깐요.ㅎㅎ

예를 들어 Orientation 태그에 bottom right 나 right top 등으로 설정되어 회전값 보정이 필요한 사진들을 imageOrientation() 함수를 거치지 않고 KBoard에 등록하면 KBoard에서 회전값이 보정되어 바른 방향으로 사진이 보여진다는 것입니다. 등록한 사진을 다시 다운 받아보면 원본은 수정없이 원래 그대로 뒤집히고, 돌아간 상태로 유지되어 있습니다.

그런데 imageOrientation() 함수를 통해 재처리되도록 하면 오히려 회전값 보정이 되지 않은채 뒤집히거나 돌아간 상태 그대로 표시됩니다.
exif정보가 살아 있다면 그나마 표시라도 바로 될 것인데, 파일을 다운 받아서 확인 해 보면 exif정보만 지워진 상태로 이미지는 회전된 상태 그대로 유지되어 있습니다.

특이점은 KBoard의 데모페이지에서는 사진을 등록하면 dpi나 exif는 유지되어 있습니다. 그래도 이미지 품질은 재처리 되면서 용량이 많이 줄어들어 있습니다.(간단히 파일 용량을 비교해 보면 알 수 있습니다.)

imageOrientation() 함수의 개선을 KBoard 커뮤니티에 건의하였습니다.

그런데 문득 의문이 드는 건 KBoard에서  회전값을 보정한 상태로 사진을 표시해 주고 있는데 굳이 imageOrientation() 함수를 사용항 필요가 있을까 하는 생각이 드네요.ㅎㅎ
imageOrientation() 를 사용해서 지금 얻을 수 있는 효과는 이미지 용량 축소뿐인데 이미지 imageOrientation() 는 용량 축소를 위해 사용되도록 한 함수가 아니니깐요.
그리고 앞에서 설명했듯이 Orientation 값이 없는 파일은 재처리를 하지 않기 때문에 원본 파일 그대로 등록됩니다.

사진 파일 원본을 다루는 분이나 exif정보 소실이 문제가 되는 분들은 imageOrientation()를 사용하지 않는 것이 좋을 것 같고

오히려 원본 사진과 상관없이 글의 첨부 이미지나, 단체의 사진 게시, 공유용도로 웹 포토 앨범을 주로 운영 하시는 분들은 imageOrientation()함수 부분을 변형하여 wp_images_editor를 통해 일괄적으로 일정 퀄리티 이하로 재처리 되도록 하는 것도 사이트 운영과 용량관리에 좋을 방법이 될 수 있을 것 같습니다.


html 유효성 검사 Markup Validation Service

code 2015.12.31 11:07
http://validator.w3.org/

 

HTML, CSS, JavaScript, PHP, SQL, and JQuery developers site

code 2015.12.31 10:38

브라우저 html5 지원 점수

code 2015.12.26 19:22

http://html5test.com/

사용하는 브라우저의 항목별 html5 지원 여부 확인 

컴퓨터에 연결해서 스트릭(안드로이드폰) 인터넷 사용하는 방법

code 2012.09.14 01:41

http://cafe.naver.com/dellboom 의 Q&A 게시판에 올라왔던 글을 보고 복잡하지 않을것 같아 해보았습니다.( http://cafe.naver.com/dellboom/20238 )

(델스트릭을 USB로 윈도우XP에 연결 후 윈도우의 인터넷을 스트릭에서 공유)

먼저 델은 BUSYBOX가 설치된 루팅된 상태이고, 터미널 에뮬레이터가 설치되어 있어야 합니다.
(ADB SHELL 도 가능하나 테더링과 동시에 유지되지 않을 수 있습니다.)
윈도우xp는 델과 usb테더링에 필요한 드라이버가 설치되어야 합니다.

1. 윈도우xp의 '제어판>네트워크 연결'에서 현재 사용중인 어댑터의 속성>고급> 에서 인터넷 연결 공유 항목을 체크하여
인터넷 연결 공유(ICS)기능을 활성화시킵니다.

2. 델을 usb테더링 모드로 윈도우와 연결합니다.
   윈도우의 커멘드창에 IPCONFIG /all 를 하면  
   'Android USB Ethernet/RNDIS' 에 IP와 게이트웨이 DNS등이 할당된 것을 볼 수 있습니다.
   (할당된 IP를 기억해 둡니다.)

3. 윈도우xp의 '제어판>네트워크 연결'을 보면 새롭게 추가된 어댑터가 보입니다.
   정보에   'Android USB Ethernet/RNDIS' 가 표시되어 있습니다.
   이 어댑터를 선택>오르쪽 클릭>속성 에 들어가서 '인터넷 프로토콜(TCP/IP)를 선택합니다.

4. 인터넷 프로토콜(TCP/IP)'을 선택하고 속성을 클릭합니다.
   '다음 IP 주소 사용'을 선택하고
   앞서 IPCONFIG /all 에서 확인했던 IP와 서브넷 마스크를 입력하고
   EX) IP Address. . . . . . . . . . . . : 192.168.42.75
        Subnet Mask . . . . . . . . . . . : 255.255.255.0 
  게이트웨이와 DNS란은 비워두고 확인을 하여 설정창을 모두 빠져나옵니다.

5.저는 USB를 통한 연결이 정확히 작동하는것을 확인하기 위해 네트워크 설정에서
  델의 WIFI와 모바일 네트워크설정의 데이터사용(3G)까지 다 off시켰습니다. 

6.이제 델에서 터미널 에뮬레이터를 실행합니다.
(위에서 wifi와 3g가 OFF되지 않았다면 eth0 과 rmnet0 에도 IP가 할당되어 있을것입니다.)
busybox ifconfig 를 이용해 usb0 에 네트워크가 할당되어 있는지 확인합니다.
usb0      Link encap:Ethernet  HWaddr XXXXXXXX
다음은 아래 명령을 입력하고 관리자 에뮬레이터에 ROOT권한을 부여해줍니다. 
su
다음은 앞서 pc쪽 어댑터에서 확인한 ip주소를 케이트웨이 주소로 입력합니다.
route add default gw 192.168.42.75  dev usb0
ping yahoo.com 을 입력하여 네트워크 연결을 확인해 봅니다.

*동일 환경에서 반복해서 사용해야 한다면 스크립트를 장성해 두면 더 간단히 사용할 수 있을듯 합니다.
하지만 동일 환경에서 다시 이방법을 사용한다면 스크립트에 들어갈 내용은 마지막 다음 명령 뿐입니다.  
route add default gw  192.168.42.75  dev usb0

p.s.
제가 한 것처럼 3G가 OFF될 경우는 일부 네트워크 기능의 사용이 원할하지 않을 수 있습니다. 

  • gafas carrera 2013.04.12 00:27 ADDR 수정/삭제 답글

    우리가 삶을 바꿀 가능한 모든 기회를 포착해야한다는 후회하고 후회 왼쪽으로 생명을 방지하기 위해.

  • Michael Kors outlet 2013.07.15 01:25 ADDR 수정/삭제 답글

    태양이 바다에 미광을 비추면,나는 너를 생각한다.