참고 : (1) 티스토리 반응형 스킨을 왜 만들어야 하는가?

(2) 이번 반응형 스킨에 쓰인 기법들

(3) 기본 블로그 레이아웃 짜기

(4) 반응형 블로그 레이아웃 짜기

(5) 블로그 레이아웃 추가사항

(6) 티스토리 스킨 제작 팁




티스토리는 기본적으로 이미지가 고정되도록 설계되어 있습니다.


그 사실을 티스토리 설정에서 알 수 있지요. 다음과 같은 부분이 있기 때문입니다.



티스토리에서 제공하는 '글쓰기 가로폭' 기능에 맞춰져서 이미지가 자동으로 리사이즈 되도록 설계되어 있습니다.


근데 문제는... 우리가 만들 스킨은 반응형이지 않습니까...


티스토리의 시스템대로라면 이미지 크기가 고정되어 모바일 등 화면크기가 줄어들었을 때 이미지가 줄어들지 않아서 짤리는 현상을 보게 될 것입니다.



그래서 블로그 레이아웃은 반응형으로 만들었는데... 이미지를 반응형에 맞게 사이즈가 자동 조절되도록 만들지 않으면 위의 그림같이 이미지가 짤리게 됩니다.


문제는 이러한 이미지 짤림 현상이 이미지를 온전히 파악할 수 없게 만들어서, 블로그 구독자들의 불편을 초래한다는 사실입니다.


따라서 이 부분을 조절하는 방법을 생각해내야 합니다.


문제는 이 이미지가 자동적으로 조절되는 메커니즘이 CSS로 제어되는게 아니라 html의 인라인 속성으로 제어된다는 사실입니다.


그것도 style="height:xxx;"와 같은 방식이 아니라 html 태그에 인라인으로 <img src="xxx" width="xxx" height="xxx" >와 같은 방식으로 들어갑니다.


이거 조절하려면 꽤나 짜증나겠죠?


그래서 처음 nQuark 1.0 에서는 위의 속성을 제어하기 위해 이런 jQuery 코드를 썼습니다.


function resizeImg(){

$("#content .entry .article .imageblock img").each(function(){

var oldx = $(this).attr("width");

var oldy = $(this).attr("height");

//console.log("oldx = "+oldx+" , oldy = "+oldy);

if ( $(document).innerWidth() >= 1200 ) {

var newx = 1200 * 0.514;

var newy = newx *(oldy / oldx);

else if ( $(document).innerWidth() >= 800 ) {

var newx = $(document).innerWidth() * 0.514;

var newy = newx *(oldy / oldx);

}

else {

var newx = $(document).innerWidth() * 0.753;

var newy = newx *(oldy / oldx);

}

var naturalx = this.naturalWidth;

//console.log("newx = "+newx+" , naturalx = "+naturalx);

//console.log( $(document).innerWidth() );

if ( naturalx == 0 || newx < naturalx ) {

$(this).attr("width", newx);

$(this).attr("height", newy);

$(this).parents(".imageblock").css("width", newx);

$(this).parents(".imageblock").css("height", newy);

}

});

// $("#content .entry .article .entry-ccl img").attr("width", "15px");

// $("#content .entry .article .entry-ccl img").attr("height", "15px");

}


문제는 티스토리에서 자바스크립트의 naturalWidth가 제대로 동작하지 않는 버그가 있다는 사실입니다.


naturalWidth는 이미지 원본의 넓이를 나타내는 값입니다. 따라서 naturalWidth로 값을 받아와서 그 값을 기준으로 화면에 본문을 나타내는 부분이 더 좁으면 이미지를 줄이고 더 넓다면 이미지를 줄이지 않아야 합니다.


하지만 버그로 인해 빈번하게 이 값이 0으로 반환되었습니다.


그래서 if문을 제어할 때 원래 0인 경우는 고려하지 않아야 하는데 0인 경우에도 무조건적으로 리사이즈 되도록 만들게 되었습니다.


그 결과...


작은 이미지도 자동적으로 리사이즈 되어 걷보기에 보기 흉한 블로그 이미지가 나타나게 되었습니다.


이는 명백한 버그이므로 하루빨리 수정해야 했습니다만...


꽤나 시간이 지나고 나서 수정하게 되었습니다.




결론적으로 말하면 nQuark 1.0 에서 사용했던 위와 같은 알고리즘으로는 티스토리의 블로그 이미지 리사이즈 문제를 완벽하게 해결할 수 없습니다.


알고리즘 자체를 뜯어고쳐야 합니다.


function resizeImg(){

$("#content .entry .article .imageblock img").each(function(){

var oImgWidth = $(this).attr("width");

var oImgHeight = $(this).attr("height");

if( typeof(oImgWidth) != "undefined" ){

           $(this).css({

               'max-width':oImgWidth+'px',

               'max-height':oImgHeight+'px',

               'width':'100%',

               'height':'auto'

 });

$(this).parents(".imageblock").css({

'width':'100%',

'height':'100%'

});

}

});

}


이 방법은 타 블로그에서 소개한 방법과 유사합니다.


참고 : http://www.erzsamatory.net/86


결론적으로 말하면 제가 스스로 문제를 해결했다기보단, 검색에 의존한 부분이 더 많습니다.


다만 타 블로그에서 소개하는 대로 height를 100%로 맞추면 안드로이드 모바일 기기에서 세로길이가 리사이즈되지 않아 이미지가 찌그러지는 문제가 발생합니다.


비영리IT센터의 반응형 웹 기술과 관련된 글에서 이러한 부분에 대한 힌트를 얻을 수 있습니다.


http://readme.skplanet.com/?p=9739&utm_source=%EB%B9%84%EC%98%81%EB%A6%ACIT%EC%A7%80%EC%9B%90%EC%84%BC%ED%84%B0+%EB%A6%AC%EC%8A%A4%ED%8A%B8&utm_campaign=b3fbd7fa9b-2014-01-26-02&utm_medium=email&utm_term=0_d6faa99e7e-b3fbd7fa9b-152764549&ct=t(2014-01-26-01)&goal=0_d6faa99e7e-b3fbd7fa9b-152764549&mc_cid=b3fbd7fa9b&mc_eid=87f3c92e0a




결론적으로 말하면 웬만한 배경지식 없이 티스토리 이미지를 반응형에 맞게 조절하는 부분의 알고리즘을 스스로 짜기는 어렵습니다. 좀 더 공부가 필요한 부분인 듯 하네요.





저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

  1. 귀여운걸 2015.03.07 23:00 신고  댓글주소  수정/삭제  댓글쓰기

    덕분에 많이 배워갑니다..
    티스토리의 이미지 가변적으로 변하게 하는거 궁금했었는데 감사해요^^

  2. 달빛천사7 2015.03.08 06:21 신고  댓글주소  수정/삭제  댓글쓰기

    일요일 아침인데 머해염 전 요즘 네이버에서 놀아염 네이버가 놀기는 좋군염 ㅎㅎ.

  3. 천추 2015.03.08 22:48 신고  댓글주소  수정/삭제  댓글쓰기

    ㅎㅎ 저도 처음에는 반응 형 블로그를 만들었었는데, 최근에는 모바일도 일반 블로가 보이게 해놨습니다. 좋은 정보 잘 보고 갑니다

  4. Yowu 2015.03.18 19:47 신고  댓글주소  수정/삭제  댓글쓰기

    잘 읽고 갑니다.

티스토리 툴바