테스트 사이트 - 개발 중인 베타 버전입니다

반응형 웹 디자인 (Responsive Web Design)

· 13년 전 · 3523 · 15
(제목+내용으로만 검색해보고 없는것 같아서 올립니다.  내용상 중복되는 부분은.. ^^;)

모바일 웹이 활성화되면서, 하나의 코드로 여러 크기의 화면에 맞게 화면을 구성해주는 기법이 많이 도입되고 있습니다.  시하님도 v4 홈페이지에서 responsive layout을 구현하시면서 관심을 가지고 계시고, 아래 지운아빠님의 css를 이용한 레이아웃 컨트롤 도, 화면크기에 의한 조정은 아니지만, CSS를 이용해서 여러 layout으로 쉽게 바꾸는 것을 보여주셨습니다.  아마 여러 sir 회원분들도 비슷한 내용에 관심이 있거나, 이미 구현을 하셨으리라 생각됩니다.




저도 관심이 있는 분야이기에, 위와같이 나름 이런 저런 시도를 해봤습니다. 같은 코드로 여러 화면 크기에 맞춰서 CSS3 media query로 조정했는데, 그런데도 고민이 
"모바일 웹페이지를 따로 만드는 것이 더 낫지 않나?"
입니다. 비슷한 관심을 가지신 분들의 의견이 궁금하네요. ^^

어쨋든, 관련 링크를 남겨볼까 합니다.  (원래 내용은 제 블로그 글로 ^^;)  
(대부분의 링크는, 21가지 RWD 관련 툴 이라는 .net 글 에서 발췌했습니다.)

Ethan MARCOTTE 의  Responsive Web Design 글: 최초로 responsive web design 이라는 단어를 사용하고, CSS3 media query를 이용한 화면 조정 예를 보임
James Pears의 RWD에 대한 비판? 글 : 1. CSS3 media query는 모든 내용이 다 다운된 후에야 적용된다. 2. 데스크탑과 모바일 웹은, 보여주는 내용 자체가 다르다.
- 1번 단점을 극복하기 위하여,  Sencha.io 나 rwd-img.js와 같이, 환경에 맞는 크기의 이미지 화일을 제공해주는 방법
Less 기반의 Bootstrap이나 ’320 and Up’이 처럼 RWD가 반영된 템플릿들
- 클라이언트 (css, js)에서 가능한 부분과 서버 (user agent를 기반으로 다른 내용 생성)에서 해야할 내용으로 나누어 접근: RESS: Responsive Design + Server Side Components
브라우저에 크기에 따라서 해당 css를 선택적으로 로딩하는 adapt.js
여러가지 (반응형) 그리드 시스템: 1234
- 모든 모바일 환경에 대응하는 media query 템플릿: Andy Clark’s template
IE6~8 등에서 CSS media query를 처리할 수 있게 하는 Respond.jsCSS3-Mediaqueries.js
여러 모바일기기의 스크린 크기의 창을 열는 1, 한꺼번에 테스트하는 23

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 15개

13년 전
제가 한편으로는 추가적인 js 등의 사용을 극도로 꺼리는 편이라 위와 같은 생각을 하게 된 것일지도 모르겠습니다.
예를 들면, 'IE6~8 등에서 CSS media query를 처리할 수 있게 하는 Respond.js, CSS3-Mediaqueries.js' 같이 유용한 방법이 있더라도 가능한 한 추가적인 js 를 사용하지 않고 해결하는 방법을 선호하는 거지요... 쥐뿔 실력도 없는게 ㅠㅠ
네.. 제 고민도, 반응형 디자인이 재밌기는 한데,
실제로는 데스크탑용과 모바일용을 따로 만드는 것이 낫지 않을 까해서 남겼던 글입니다.

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

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

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

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

게시글 목록

번호 제목
12438
12437
12436
12435
12434
12433
12432
12431
12430
12429
12428
12427
12426
12425
12424
12423
12422
12421
12420
12419
12418
12417
12416
12415
12414