반응형 웹디자인 (이단 마콧, 웹액츄얼리코리아)
책은 꽤 전에 읽었는데 이제 밑줄들을 올린다. 좋은 구절들이 많았는데 시간에 쫓기며 읽느라 밑줄을 많이 메모할 수가 없었다. 그럼, 아래부터 시작이다.
——
인쇄디자인을 경험한 디자이너가 알고 있는 조건들(웹디자인에도 적용하고 싶어지는)은 단지 프린트물에만 적용할 수 있습니다. 웹상에서는 이러한 제약 조건[고정된 사이즈, 고정된 내용 같은 것들 – 안형우]이 없다는 사실을 받아들이고 가변성을 고려한 디자인을 해야 합니다. 그러나 그보다 먼저 우리는 ‘흘러가는 세상의 흐름[웹의 유동성을 말하는 듯 – 안형우]을 받아야들여야만’ 합니다.
P.6
——
냉정하고 불편한 진실이지만 인터넷 익스플로러 6과 그 하위 버전은 max-width 속성을 지원하지 않습니다. IE7과 그 상위 버전은 어떤가요? max-width를 충분히 지원합니다.
P.54
——
[구버전 브라우저에 미디어쿼리를 적용하기 위해 – 안형우] 최근에 저는 respond.js 라고 불리는 스크립트를 자주 사용하고 있는데요( http://bkaprt.com/rwd/38/ ). 이 작고 민첩한 라이브러리는 스콧 젤 Scott Jehl이 개발한 것입니다. css3-mediaqueries.js 는 없는 것이 없을 만큼 기능이 많지만, respond 스크립트는 간단하게 구버전 브라우저에서 [미디어쿼리의 – 안형우] min-width와 max-width가 지원되도록 해 줍니다.
P.113
——
미디어쿼리는 진짜 끝내줍니다. … 그러나 미디어쿼리 단독으로는 반응형 사이트를 제작할 수 없습니다. 진정한 반응형 사이트란 가변 레이아웃에서 출발하며, 이 고정되지 않은 가변 레이아웃 기반 위에 미디어쿼리를 얹어서 제작하는 것을 말합니다. 여기에 여러 주장이 제기되고 있지만 특히 주목할 만한 점은 가변 레이아웃은 자바스크립트와 @media를 인식하지 못하는 기기와 브라우저에 충분한 대비책을 제공한다는 것입니다.
P.116
——
가변에서 시작해야 한다는 사실은 [반응형 사이트를 제작할 때 – 안형우] 만들어야 할 코드가 적다는 것을 의미합니다.
P.116
——
가장 중요한 것은 반응형 웹디자인이 모바일 웹사이트를 대체하고자 만들어진 것은 아니라는 점입니다. 저는 반응형 웹디자인은 디자인 철학이자 프런트 엔드 개발 전략의 일환이라고 믿습니다. 그리고 개발 전략으로서 프로젝트의 요구 조건을 충족하는지에 대해 평가한다는 의미를 지닙니다. 여러분이 데스크톱과 모바일 사이트를 분리해두는 것에 적합한 이유가 있을 수 있고, 반응형 방식으로 제공하는 것이 더 나을 수도 있습니다. 오직 여러분과 여러분의 사용자(방문자)만이 그 답을 알 수 있을 것입니다.
P.125 ~ 126
——
만약 모바일 테스트 세트 설정이 궁금하다면 ‘스마트폰 브라우저 동향’ ~ 기사를 추천합니다. 기사는 A List Apart에서 볼 수 있습니다. ( http://bkaprt.com/rwd/50/ ).
P.136
——
[모바일 우선주의를 적용해 디자인하면, 공통으로 적용되는 – 안형우] 스타일시트에는 색상과 서체에 관련된 규칙 외에는 별다른 규칙이 없기 때문에 모든 사용자에게 기본적인 (하지만 다행히도 여전히 매력적인) 사이트로 보입니다. 그 다음 480px, 600px, 860px과 1200px의 최소 뷰포트 너비로 4개의 해상도 분기점을 미디어 쿼리에 설정합니다. 해상도가 설정한 범위보다 커지면 그에 맞는 레이아웃 규칙이 적용됩니다. 그러나 미디어 쿼리가 지원되지 않는 브라우저를 통해 사이트에 접속하면 respond.js 자바스크립트 패치가 적용되지 않는 경우라도 매력적인 단일 단락의 레이아웃이 보입니다.
P.147
——
슬라이드 쇼를 작동시키기 위해 맷 마르퀴스 Mat Marquis라는 개발자가 디자인한 무료 jQuery 플러그인을 사용하겠습니다. ( http://bkaprt.com/rwd/55/ ). 제가 사용해본 것 중에서 가장 강력한 슬라이드 쇼 스크립트입니다. 이 스크립트는 가변 콘텐츠와 잘 작동해서 제가 매우 좋아합니다. 이 플러그인을 이용하면 슬라이드에 각각 다른 양의 텍스트나 이미지가 들어 있을 때 복잡한 CSS 짓거리에 의지하지 않고도 아주 쉽게 해결할 수 있습니다. (네, ‘짓거리’라고 했습니다. 저 지금 장난하는 것 아닙니다.)
P.152 ~ 153
——
스크립트에 간단한 해상도 테스트를 해볼 수 있습니다.
if (screen.width > 480) {
$(document).ready(function() { ... });
}
지금 보이는 if 구문은 min-width: 480px 미디어 쿼리와 동등한 자바스크립트입니다. 스크린 너비가 480픽셀보다 작으면 포함된 자바스크립트는 작동하지 않습니다.
이 접근 방식을 좀 더 다듬어보겠습니다. 이상적인 방법으로 Lab JS(http://labjs.com/)나 Head JS(http://headjs.com/)와 같은 가벼운 자바스크립트 로더를 사용하여 사용자의 스크린이 특정 해상도 범위 이상인 경우에 한해…
P.159 ~ 160
댓글 남기기