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

전진

· 13년 전 · 조회 3562 3562 · 댓글 15 15

링크

http://blog.gnuboard.org/2012/04/responsive-web-design/ (272)

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

모바일 웹이 활성화되면서, 하나의 코드로 여러 크기의 화면에 맞게 화면을 구성해주는 기법이 많이 도입되고 있습니다. 시하님도 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

- Responsive.less

- 여러가지 (반응형) 그리드 시스템: 1, 2, 3, 4

- 모든 모바일 환경에 대응하는 media query 템플릿: Andy Clark’s template

- IE6~8 등에서 CSS media query를 처리할 수 있게 하는 Respond.js, CSS3-Mediaqueries.js

- 여러 모바일기기의 스크린 크기의 창을 열는 1, 한꺼번에 테스트하는 2, 3

댓글 작성

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

로그인하기

댓글 15개

지운아빠

프로필 보기 이 회원 글보기

13년 전

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

전진

프로필 보기 이 회원 글보기

13년 전

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

지운아빠

프로필 보기 이 회원 글보기

13년 전

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

전진

프로필 보기 이 회원 글보기

13년 전

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

지운아빠

프로필 보기 이 회원 글보기

13년 전

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

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

지운아빠

프로필 보기 이 회원 글보기

13년 전

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

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

지운아빠

프로필 보기 이 회원 글보기

13년 전

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

전진

프로필 보기 이 회원 글보기

13년 전

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

전진

프로필 보기 이 회원 글보기

13년 전

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

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

지운아빠

프로필 보기 이 회원 글보기

13년 전

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

/ 2

1 2

게시글 목록

번호	제목	글쓴이	조회	날짜
8265	스크롤 소스 구합니다 2	북금곰	435	9년 전
20403	PHP 숫자를 한글표기로 바꾸기 입니다.	Angelos	615	9년 전
20402	Mobile Android,IOS 앱용 아이콘 템플릿 참고 사이트	인덱스웹	481	9년 전
20401	PHP 여러문장을 한번에 자동 줄바꿈 하기 입니다.	Angelos	544	9년 전
20400	웹서버 서버 동시접속자 설정 변경하기	인덱스웹	478	9년 전
8259	반응형웹 템플릿 좀 봐주세요. 5	아나이스	734	9년 전
20399	PHP 디렉토리의 모든 파일을 읽어 목록으로 만들기 입니다.	Angelos	461	9년 전
20398	PHP PHP 버전이 낮아 imagerotate() 함수가 없을때 대신 사용하는 함수	뿌하하	451	9년 전
8255	가운데 정렬좀 요~~~ 3	북금곰	387	9년 전
8249	시안 퍼블리쉬 해주신느분 있나요? 5	북금곰	498	9년 전
8246	부트스트랩은 어디서 받나요? 2	북금곰	434	9년 전
8242	소스구해요 3	북금곰	507	9년 전
20396	PHP 간단하게 자동으로 테이블 너비 조정하기 입니다. 1	Angelos	585	9년 전
8240	PHP MYSQL 장문 필드 검색 질문 입니다. 2	뜨거운형제들	370	9년 전
20395	PHP 문자열자르기 (문자별 다른 너비 해결)	PASKRAN	437	9년 전
20394	MySQL 테이블 복사 쿼리	서로웹	432	9년 전
31033	기타 많이들 사용하시는 Slider 에 대해서... 2	kiplayer	571	9년 전
28385	밀려요 2	북금곰	394	9년 전
20393	PHP 현재 접속중인 사용자 나타내기	Angelos	515	9년 전
28380	디스플라이 인라인이 안되요,, 4	북금곰	367	9년 전
20392	MySQL mysql select 후 update 하기	서로웹	411	9년 전
28377	노란색박스가 가운데로 오게하려면 어떻게 하나요? 2	북금곰	324	9년 전
20391	PHP 다른 페이지로 이동하는 방법 3가지 입니다.	Angelos	504	9년 전
20390	PHP 한글문자열 자르는 법 입니다.	Angelos	398	9년 전
20389	PHP mysql_query 전체 갯수 빨리 알아보기 입니다.	Angelos	403	9년 전
20388	PHP POST값 통째로 인코딩하기, 배열, iconv	서로웹	443	9년 전
20387	PHP 이메일주소 검사하기 입니다.	Angelos	400	9년 전
20386	웹서버 php 확장자 내 맘대로 바꾸기 입니다.	Angelos	397	9년 전
20385	PHP 문자열을 한 문자씩 나누어 출력하기 입니다.	Angelos	347	9년 전
20384	node.js Node js 게시판 프로젝트 소개합니다.	snshero	739	9년 전
20383	PHP pc 모바일 체크 1	서로웹	803	9년 전
20382	PHP 계정 사용량(용량) 확인	서로웹	772	9년 전
8238	어도비에서 만든 텍스트에디터 Brackets 1	띠아블	690	9년 전
20380	PHP textarea 입력한 엔터값 출력하기 1	서로웹	471	9년 전
20379	MySQL 소수점 반올림 버림	서로웹	671	9년 전
28376	html page 이동시 흰색 깜박임 없앨수 있나요??	분석	780	9년 전
28372	헤더영역 position: fixed 했는데 가로 스크롤이 안되네요 3	모두	465	9년 전
20378	jQuery jQuery version 1.9 이상에서 $.browser 사용하기	띠아블	763	9년 전
20377	PHP 에러 로그파일 생성하기	서로웹	723	9년 전
8235	CRM 고객관리 프로그램 2	별이님	1,119	9년 전
20375	PHP 간단한 특정 IP 차단하기 입니다. 1	혀니천사	727	9년 전
20374	PHP 다른 사이트의 내용을 자동으로 긁어오기 입니다.	혀니천사	926	9년 전
20373	PHP 후이즈검색 하기 입니다.	혀니천사	604	9년 전
20372	PHP 그래프 그리기 입니다.	혀니천사	706	9년 전
20371	JavaScript 자바스크립트로 구현한 number_format() 입니다.	혀니천사	488	9년 전
20370	JavaScript 금액 관련 숫자를 한글로 변환하기 입니다.	혀니천사	448	9년 전
28370	모니터 별 세로 해상도 채울 수 있나요? 1	지로쿨	577	9년 전
20369	PHP PHP 날짜 계산 관련 함수	서로웹	549	9년 전
28366	이제 3년되가는 퍼블리셔입니다. 3	분석	725	9년 전
20368	jQuery jQuery 1.x와 2.x 버전 동시에 사용하기	서로웹	436	9년 전
20367	PHP 요일, 시간마다 다른 CSS 제어하기 입니다.	혀니천사	525	9년 전
20366	PHP iframe내의 id셀렉터 입니다.	혀니천사	472	9년 전
20365	JavaScript 사업자 등록번호 검사하기 입니다.	혀니천사	415	9년 전
20364	PHP 폼전송을 통해서 페이지를 이동하기 입니다.	혀니천사	485	9년 전
20363	JavaScript 항상 같은곳에 광고창 만들기 입니다.	혀니천사	375	9년 전
20362	JavaScript 부메뉴 나오게 하기 입니다.	혀니천사	393	9년 전
20361	JavaScript 특정문자 제거하기 입니다.	혀니천사	355	9년 전
20360	JavaScript 휴대폰번호 검사 하기 입니다.	혀니천사	405	9년 전
20359	JavaScript 이미지 좌우로 이동 갤러리 입니다.	혀니천사	388	9년 전
8231	웹 html 에디터는 어떻게 구현하시나요? 3	o1o111	844	9년 전
20358	PHP 파일 확장자 검사 함수 입니다.	혀니천사	359	9년 전
20357	JavaScript 쉬운 replaceAll 입니다.	혀니천사	290	9년 전
20356	PHP 그누보드 최근 게시물 파싱하기 입니다.	혀니천사	556	9년 전
20355	PHP [알고리즘]퀵 정렬(Quick Sort)	슈와이	367	9년 전
20354	PHP php로 옥션 지마켓 11번가 쿠팡 위메프 등의 발주내역서 파일을	판도라g	394	9년 전
20353	PHP array_unique 배열중복값 제거	서로웹	343	9년 전
20352	JavaScript 콤보스타일 메뉴 입니다.	혀니천사	314	9년 전
20351	JavaScript 쿠키를 이용한 레이어 공지창 입니다.	혀니천사	277	9년 전
20350	JavaScript 효과있는 텍스트 틱커 입니다.	혀니천사	263	9년 전
20349	PHP [알고리즘]힙 정렬(Heap Sort)	슈와이	317	9년 전
20348	PHP HTTP 인증 하기 입니다.	혀니천사	334	9년 전
20347	JavaScript 외부 문서 불러오기 입니다.	혀니천사	273	9년 전
20346	JavaScript 지정한 날짜까지 New 이미지를 띄워주기 입니다.	혀니천사	217	9년 전
20345	MySQL Common MySQL Queries 다양한 MySQL 쿼리 예제	서로웹	333	9년 전
20344	JavaScript 메일 주소 검사하기 체크박스 입니다.	혀니천사	269	9년 전
20343	JavaScript 무단링크 금지하기 입니다.	혀니천사	295	9년 전
20342	PHP 간단하게 마우스,드래그,복사 등 막기 입니다.	혀니천사	319	9년 전
20341	MySQL DB백업 및 복원	서로웹	360	9년 전
20340	JavaScript 페이지가 다른 사이트의 프레임에 갇히는 것을 막기 입니다.	혀니천사	251	9년 전
20339	PHP 다른 사이트로 이동시 또는 창 닫을 시에 자동 로그아웃 하기 입니다.	혀니천사	290	9년 전
20338	PHP PHP에 MYSQL 와 자바스크립트 연동 예제 입니다.	혀니천사	354	9년 전
20337	jQuery input text 대문자만 받는 Jquery	서로웹	277	9년 전
20336	PHP 현재 페이지 URL 출력하기 입니다.	혀니천사	394	9년 전
20335	JavaScript 이미지 업로드와 미리보기 입니다.	혀니천사	326	9년 전
20334	JavaScript 배경음악 랜덤 재생 하기 입니다.	혀니천사	258	9년 전
20333	JavaScript css 지원 여부 확인해서 다른 페이지로 이동하기 입니다.	혀니천사	227	9년 전
20332	JavaScript 하부메뉴가 보였다가 숨겨졌다 하는 토글버튼 입니다.	혀니천사	278	9년 전
20331	JavaScript 개별 페이지에 인덱스로 거쳐 들어오게 하기 입니다.	혀니천사	226	9년 전
20330	JavaScript 랜덤으로 이미지 출력 되기 입니다.	혀니천사	262	9년 전
20329	JavaScript 사용자 해상도 알아내기 입니다.	혀니천사	288	9년 전
20328	JavaScript 붙여넣기 금지하기 입니다.	혀니천사	229	9년 전
20327	MySQL 대소문자 데이터 조회하기	서로웹	287	9년 전
20326	JavaScript 퇴장시 팝업창 한번한 띄우기 입니다.	혀니천사	244	9년 전
20325	PHP www 주소 리다이렉션 시켜주기 입니다.	혀니천사	352	9년 전
20324	PHP 신문 기사를 긁어오기 입니다. 1	혀니천사	446	9년 전
20323	JavaScript 시도, 구군, 동 주소 select	슈와이	394	9년 전
20322	MySQL 커리로 DB 테이블 명세서 출력하기	서로웹	355	9년 전
20321	JavaScript 브라우저 해상도 구분없는 절대 x,y 좌표 값 구하기 입니다	혀니천사	311	9년 전
20320	PHP rss 읽어오기 입니다.	혀니천사	356	9년 전
20319	JavaScript 자바스크립트로 Ajax 효과내기 입니다.	혀니천사	295	9년 전

이전 다음

1 2 3 4

전체 목록