• 원글정보:  작성일시 2012.04.13 02:08:20
• 조회 1,115
• 댓글 15

댓글보기

  지운아빠 2012.04.20 15:46:00       

 반응형 웹디자인에서 가장 궁금한 것이 min-width 가 300 인데 본문에 나오는 이미지의 넓이가 300을 초과하면 이 이미지를 어떻게 처리해주는가에요.
img {max-width:300px} 로 처리하는 방법도 있겠지만 예컨데 900px 짜리가 300px 로 나오면 1/3 로 줄어드는 것인데, 이 때 이미지 내 설명문구 같은 것은 가독성 부분을 완전히 포기해야 하는 걸까요?
이미지 크기를 반응형 레이아웃에 따라 조절할 경우 CPU 점유율? 사용량?이 올라간다는 단점이 있다는 얘기도 들어본 것 같습니다.
일반 웹페이지에서는 문제가 덜 할 수 있지만 만약 쇼핑몰이라든지... 그런 경우는 어찌하는 것이 좋을까요?       

                                    이미지 크기에 대한 부분이, 아마도 반응형 웹디자인의 큰 약점으로 지적받는 것 같아요..
말씀하신대로 가독성, cpu, 통신량 등, 동일한 이미지로 클라이언트에서 알아서 처리하는 방법만으로는 해결하지 못하는 부분이 있을것 같습니다.
더더군다나 쇼핑몰같은 경우라면.. (잘은 모르지만) sench.io나 rwd-img.js 처럼 그때그때 맞는 크기의 이미지를 동적으로 불러오는 방식이 그나마 맞지 않을까 합니다.                   

             지운아빠 2012.04.20 16:08:20       

                                    이미지를 동적으로 불러오는 것도 불필요한 트래픽이 유발될 가능성을 내포하고 있는 것 같아요. 뭐 이거야 지엽적인 문제고 일단 가장 큰 사용, 운영 상의 문제점은 맞는 크기의 이미지를 여러개, 상황에 따라서는 두자리수까지 제작해야 될 수도 있다는 것 같아서 이것도 큰 문제가 아닌가 싶네요... ㅠ                   

                                    음.. 그래서 제 블로그글에서 남긴 방법인데..
이미지를 등록할때 자동으로 생성하도록 만드는 것은 어떨지..
한 세가지 정도.. 일반, 테블릿용, 스마트폰 용..
가독성이 문제가 된다면, 사용자가 크롭할 수 있는 옵션을 주는 ..
이미 반응형 하고는 다른 얘기네요. ^^;                   

            지운아빠 2012.04.20 16:21:10       

                                    http://sir.co.kr/bbs/board.php?bo_table=cm_free&wr_id=732847#c_732856

방금 그런 요지의 댓글을 달았는데 재밌네요... ㅎㅎㅎ                   

             지운아빠 2012.04.20 15:53:44       

                                    반응형 웹디자인을 할 때는 모바일에서부터 시작해서 확장해나가는 것이 이상적이라고 하더군요.
처음 디자인 할 때부터 이러한 상황에 대해 인지를 하고 디자인을 하는 것이, 단순히 반응형으로만 퍼블리싱하는 것보다 나을 것 같습니다.

한편으로 이런 생각도 해봤는데 피씨는 xhtml/css2.1↑/px base로, 모바일은 html5/css3/% base 로 CSS를 작성하여 서버사이드에서 브라우저에 따라 알맞는 CSS를 내보내주는 방법으로 출력을 하면 어떨까도 싶습니다. 물론 디자인 혹은 기획 단계에서 이 상황을 충분히 인지하고 진행을 시켜야겠지요.
모바일 페이지를 따로 만들지 않고, 미디어쿼리를 이용하지 않아도 원하는 결과를 얻을 수 있는 또 다른 대안이 되지 않을까 싶습니다.                   

             지운아빠 2012.04.20 16:12:42       

                                    물론 모바일에서는 보여지지 않을 컨텐츠는 서버사이드에서 제외처리를 해줘야 할텐데... 이러면 소스가 많이 복잡해지겠지요?                   

                                    아마도, 모바일홈 소스를 따로 관리하는 것과, 통합 (복잡한) 소스를 관리하는 것, 둘을 비교해서 결정하는 전략적인 결정 사항이 되겠네요.. ^^;
그누보드 스킨+첫페이지 정도를 만드는 수준에서는 한번 생각해 볼만 하지 않을까 해서요..                   

                                    네.. 흔히들 모바일 퍼스트라고들 하더군요.. ^^

제 생각에는, 반응형 디자인을 효과적으로 사용할 만한 곳은,
대형 쇼핑몰이나 대기업 홈페이지보다는
모바일홈을 따로 투자하기에 부담이 되는, 중소 쇼핑몰, 개인 블로그, 작은 커뮤니티 등에서 사용하는 것이 아닐까 합니다.            

            지운아빠 2012.04.20 16:23:23       

                                    네 저도 동감입니다. 중소쇼핑몰도 커스터마이징이 많아지다 보면 점점 반응형을 쓰기가 어려워질 수도 있겠죠.
그리고 유지/보수 주체가 운영하는 사업장 내에 있어야 될 것 같습니다.                   

             지운아빠 2012.04.20 15:58:42       

                                    제가 한편으로는 추가적인 js 등의 사용을 극도로 꺼리는 편이라 위와 같은 생각을 하게 된 것일지도 모르겠습니다.
예를 들면, 'IE6~8 등에서 CSS media query를 처리할 수 있게 하는 Respond.js, CSS3-Mediaqueries.js' 같이 유용한 방법이 있더라도 가능한 한 추가적인 js 를 사용하지 않고 해결하는 방법을 선호하는 거지요... 쥐뿔 실력도 없는게 ㅠㅠ                   

                                    네.. 제 고민도, 반응형 디자인이 재밌기는 한데,
실제로는 데스크탑용과 모바일용을 따로 만드는 것이 낫지 않을 까해서 남겼던 글입니다.

그런데, 중간에 테블릿이 끼니까, 데스크탑+테블릿나, 테블릿+스마트폰을 묶어서 처리하면 그래도 장점이 있지 않을까 했던것입니다.

가장 처음 생각했던 것은, 제가 시험했던 대상이기도 한, 그누보드 모바일을 따로 만들필요가 있나 하는 생각이었고요..
지적하신 이미지 부분은.. 스마트폰위에서는 어짜피 어떤 방식이든 그림을 작게 만들어야 할테니 서버든 css3 어디선가는 처리해야 할테고요..                   

             지운아빠 2012.04.20 16:24:20       

                                    나중에라도 개선된 정보나 방법을 얻게 되시면 알려주세요. ^^

지금 얼핏 든 생각인데 스크립트로 이미지의 alt 내용을 이미지 바로 하단에 뿌려주는 방법도 한 대안이 될 수 있을 거 같습니다. (특히 쇼핑몰에서)
이미지야 크기가 줄어들어도 크게 인식률이 낮아지진 않지만 글자 같은 경우가 걱정인데 이렇게 하면 대체텍스트가 제공되니 접근성이 어느 정도 보장되지 않을까요?                   

                                    오.. alt 보여주는 것, 딱이네요. ^^
자동으로 alt를 워터마크로 그림에 넣어주는 것도 괜찮겠네요..

아마, 반응형을 사용하려면, 이미지에 글을 넣지 말라는 가이드라인이 필요할듯..