1. 반응형 웹 디자인/모바일 퍼스트의 이해 > 퍼블리싱강좌

퍼블리싱강좌

본 게시판은 강좌를 연재하는 회원님들을 위한 전용 게시판입니다.
강좌를 연재하시려는 경우 미리 관리자에게 알려 주십시오.
알리지 않고 등록되는 글은 팁 게시판 등으로 이동됩니다.

1. 반응형 웹 디자인/모바일 퍼스트의 이해 정보

반응형웹 1. 반응형 웹 디자인/모바일 퍼스트의 이해

본문

목차

  1. 반응형 웹 이란?
    1. 들어가기전에
    2. 반응형 웹 (디자인) 이란?
    3. 사전적 정의
  2. 반응형 웹 기법들
    1. CSS3 미디어 쿼리 (media query)
    2. 유동형 그리드 (fluid grids)
    3. 유동형 이미지 (fluid/flexible images)
    4. 반응형 레이아웃 (responsive layouts)
    5. 반응형 네이게이션/메뉴
  3. 모바일 퍼스트 (mobile first)
    1. 모바일 퍼스트 반응형 웹 구현
    2. 모바일 퍼스트 원칙/기법
    3. 점진적 향상 vs 우아한 퇴화
    4. 반응형 웹의 단계
  4. 관련 논쟁
    1. 그냥 폭 320px 짜리 웹사이트
    2. 최적화 vs 적응형
  5. 첫번째 강좌를 마치며
  6. 참고문헌/자료

반응형 웹 이란?

들어가기전에

반응형 웹 디자인 뿐만아니라 많은 새로운 웹 개념/기법/기술 등이 주로 영어권에서 제안되고 채택되기에, 이 강좌에서 사용하게될 자료들도 대부분 영문 자료를 이용하고 있습니다. 한글로 번역되어 받아들여지는 단어들은 가능한한 사용하겠지만, 이 강좌가 ‘번역’에 촛점을 맞추고 있지 않기에, 한글 단어가 통용되지 않는 경우는, 영문도 같이 표기할것 입니다. 예를 들어, 반응형 웹 (responsive web) 처럼 표기할 것입니다. 영문 이해에 문제가 없는 분들은, 해당 자료를 직접 참조하시는 것이 훨씬 정확하고 많은 정보를 얻을 수 있을것 입니다.

강좌 제목에 모바일 퍼스트를 굳이 넣은 이유는, 반응형 웹 디자인에 모바일 퍼스트의 원칙을 적용하는 것이 무척 중요하다고 생각했기 때문입니다.

또한 모든 강좌 내용은 구글 문서를 통해서 작성된 후 여기에 복사될 예정이므로, 최신 업데이트를 위해서는 원 구글 문서 링크를 참조하시길 바랍니다. 매회 강좌에 마지막 부분에 원본 구글문서 링크를 남기겠습니다.

반응형 웹 (디자인) 이란?

우선 ‘반응형 웹 디자인’과 ‘반응형 웹’의 차이는, ‘개념/기법/과정’과 ‘그 결과물’ 로 볼 수 있을것 입니다. 하지만, 많은 경우 ‘반응형 웹’ (또는 ‘반응형웹’ 한 단어) 라 할때 ‘반응형 웹 디자인’도 포함해서 지칭하기에, 이 강좌에서도 섞어서 사용할 것입니다.

‘반응형 웹 디자인’이라는 단어는 Ethan Marcotte(이하 EM)가 A List A Part의 글 Responsive Web Design으로 처음 사용했습니다. 그는 그의 글에서 CSS3 미디어쿼리를 이용하여, 페이지의 레이아웃, 이미지와 타이틀의 크기등을 해당 스크린(크기)에 적절하게 바꾸고 유동형 이미지를 이용하는 것을 보여주었습니다. 아래 이미지는, 반응형 웹 테스터 사이트의 하나인 http://mattkersley.com/responsive/ 에서 EM이 사용한 예제를 320px과 768px 스크린에서 봤을때의 결과물입니다. CSS3 미디어 쿼리 (media query)를 이용한 레이아웃과 유동형 레이아웃 (fluid layout), 유동형 또는 유연한 이미지 (fluid images / flexible images) 기법등이 이용되었습니다.

EM의 반응형 웹 예

그는 그 이전에도 Fluid Grids라는 글에서, 고정된 px 대신 em 또는 %를 사용하여 기존 그리드 시스템을 '반응형'으로 바꾸는 것을 보여주었고, 이후에는Fluid Images라는 글에서, 비슷한 접근 방법을 이미지/비디오에도 적용하는 사례를 보여주었습니다.

또다른 예로, 우리나라 반응형 웹 관련 서적 출간 등 (워드프레스 기반) 반응형 웹 전파를 선도하고 있는 웹액추얼리 사이트의 320px, 768px, 1024px 스크린 예입니다.

웹액추얼리 반응형 웹

그밖에 들여다 볼만한 대표 사이트로

  1. 대표적인 반응형 웹 사이트를 모아놓은 mediaqueri.es
  2. EM이 참여한 대표적인 반응형 웹 사이트: http://bostonglobe.com/
  3. 우리나라 최초의 반응형 웹이라고 알려져 있는 다음 사전
  4. 테블릿과 스마트폰에 반응하는 네이버 모바일
  5. xe기반 네이버 개발자 블로그
  6. 서울시 홈페이지 첫페이지만

반응형 웹의 사전적 정의

그렇다면 반응형 웹 디자인 이란 무엇일까요?

Responsive web design (often abbreviated to RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

반응형 웹 디자인 (줄여서 RWD) 은 웹 디자인의 한 접근방법으로, 데스크탑 모니터부터 모바일 폰까지 등 많은 종류의 기기에서 최적의 사용환경 - 최소한의 리사이징, 패닝, 스크롤링으로도 읽기 쉽고 접근하기 쉬운 환경을 제공하는 사이트를 만드는 것을 말한다.

반응형 웹 디자인: 위키피디아의 정의

이런 반응형 웹을 가능하게 하는 요소 기술들로는, CSS3 미디어쿼리를 이용한 적응형 레이아웃, 유동형 그리드, 유동형/유연한 이미지 등이 있습니다.

반응형 웹 기법들

CSS3 미디어 쿼리 (media query)

CSS3 이전에서 ‘print’, ‘screen’ 등 미디어 타입등을 사용하던 것을, CSS3에서는 스크린 폭/높이 등 (예: min-width: 320px) 디바이스관련 여러 정보를 이용하여 스타일을 바꿀 수 있게 되었습니다.  사실상 반응형 웹이 가능하게 된 큰 이유이기도 합니다.

유동형 그리드 (fluid grids)

반응형 웹 이전부터 사용되어 온, 그리드 시스템과 달리, EM등이 제안하는 유동형 그리드는, 고정된 px이 아닌 em이나 %를 사용하는 것 입니다. 또한, 반응형 유동형 그리드라고 제안되는 경우, CSS3 미디어쿼리를 이용하여 특정 스크린에 따라서 그리드 시스템을 바꿀 수 있습니다.

유동형 이미지 (fluid/flexible images)

유동형 그리드와 마찬가지로, 고정된 px이 아닌 em과 %를 이용하는 접근방법으로, 특히 이 경우, max-width를 사용하고, 이를 처리하지 못하는 IE7-의 경우 적절한 javascript를 사용하는 것을 의미합니다. ( EM의 유동형 이미지 )

반응형 레이아웃 (responsive layouts)

아직 통용되는 단어는 아니지만, 결국 반응형 웹을 완성하기 위해서는 반응형 레이아웃을 구현해야 합니다. 그렇지 않다면, 스크린별 레이아웃을, 수많은 if-and-else로 나누어서 브라우져에 보내줘야 하는 일이 발생합니다.

모바일 퍼스트로 유명Luke Wroblewski (이하 LukeW)는 반응형 레이아웃을 다섯가지 패턴으로 정리하기도 했습니다 (LukeW의 글: 다중기기 레이아웃 패턴들).

반응형 네이게이션/메뉴

모바일에서 메뉴를 어떻게 (줄여서) 보여줄것인지도 고민해야 합니다. 많은 경우, 내림버턴 등을 이용해서 필요할 때만 보이게 합니다. 이에 관해서 Brad Frost반응형 네이게이션 패턴들을 정리했습니다.

모바일 퍼스트 (mobile first)

웹 디자인을 할때, 모바일을 먼저 생각해서 디자인/프로그래밍을 한다는 개념으로, LukeW에 의해서 주장되었습니다. 아래의 내용은, 공개된 pdf 화일가 출처입니다.

  1. 모바일의 엄청난 성장 = 기회 ( GROWTH = OPPORTUNITY )
  2. 모바일 기기의 제약 = 집중 ( CONSTRAINTS = FOCUS )
  3. 모바일 기기의 기능 = 혁신 ( CAPABILITIES = INNOVATION )

LukeW는 모바일 퍼스트가 가능한 그리고 필요한 이유에 대해서, 위의 세가지 조건과 가능성을 제시했습니다. 모바일의 성장과 모바일 기기가 가지고 있는 기능들에 대해서는 우리가 일상생활에서 지켜보고 또 사용하고 있으니 다시 얘기할 필요가 없겠지만, 모바일의 제약을 집중의 기회로 보는 것이야 말로, 모바일 퍼스트의 핵심이라고 생각합니다.

그가 들은 제약은 세가지로, 1) 스크린의 크기, 2) 네트워크 속도/품질, 3) 사용하는 모드, 등이며, 이들 제약들이 모두 모바일 사이트를 보다 컨텐츠 중심으로 불필요한 기능/형식/꾸미기/이동 등을 강제로 최소화시키는 집중된 사이트를 만들게 하는 요인이라는 것입니다.

개발자들이 모바일 퍼스트를 원칙으로 사이트를 만들면서, 사이트가 진짜로 제공해야 할 내용과 기능이 무엇인지 깨닫게 되었다고들 하고, 사용자들 또한, 데스크탑 사이트보다 모바일 사이트가 훨씬 사용하기 편하고, 자신이 원하는 작업을 빠르게 처리한다고 이야기 합니다.

모바일 퍼스트 반응형 웹 구현

그렇다면 어떻게 해야 모바일 퍼스트가 될까요? 대표적인 방법으로 CSS3 미디어 쿼리를 사용할때, CSS3가 적용되지 않는 경우를 모바일 브라우져로 가정하는 것입니다.

정찬명님의 Mobile first strategy for CSS designer 글에서 이런 원칙을 적용한 예를 들었습니다. (아래 코드 출처: 정찬명님 블로그)

@media (max-width:799px) { ... CSS for Mobile ... }  /* 이 코드는 799px 이하의 해상도에서 해석 됩니다 */ 
@media (min-width:800px) { ... CSS for Desktop ... } /* 이 코드는 800px 이상의 해상도에서 해석 됩니다 */
        
... CSS for Mobile ...
@media (min-width:800px) { ... CSS for Desktop ... }
        

즉, @media 가 작동하지 않는 모바일 브라우져도 아무런 문제없이 의도된대로 모바일에 해당하는 CSS가 적용됩니다.

모바일 퍼스트 원칙/기법

그 이외에도, 모바일 스크린을 위해서, 콘텐츠를 다시 정렬하고 조직하는 일도 필요합니다.

LukeW는 대표적인 사례로, '콘텐츠를 네비게이션 보다 우선' (Content over navigation) 하라고 주장합니다. 일반적으로 웹사이트 디자인 시 따로 따로 떨어져 있는 페이지들을 어떻게 잘 연결하느냐가 중요한 문제이기에, 페이지 상단과 좌측 또는 하단의 많은 영역을 네비게이션으로 할당합니다. 하지만 스크린이 작은 모바일의 경우, 특히 상단이나 좌측의 네비게이션을 화면에 먼저 보여주느라, 실제로 중요한 콘텐츠는 스크롤을 한참 해야 보이는 문제가 발생하기도 합니다. 이런 문제점은, youtube 등의 모바일 버전에서도 알 수 있듯이, 메뉴/네비게이션은 상단의 한 버튼으로 축소시켜놓고, 첫 화면부터 콘텐츠를 보여주는 것으로 해결합니다.

점진적 향상 vs 우아한 퇴화 (progressive enhancement vs. graceful degradation)

모바일 퍼스트와 같이 얘기되는 접근 방법중 하나가, 점진적 향상인것 같습니다.  원래 정의는 저사양의 기기나 오래된 브라우져에 맞춰서 디자인된 웹 사이트가 고사양 기기의 현대적인 브라우져는 보다 많은 기능과 스타일을 제공하는 것입니다 (출처: 위키피디아). 이를 모바일 퍼스트 처럼 반응형 웹의 기본적 스타일/스크립을 저사양/오래된 브라우져에 맞추는 것으로 볼 수 있습니다.

반대로 고사양/현대적인 브라우져에 맞춰진 웹 사이트가, 그렇지 못한 기기/브라우져에서도 별 문제없이 ‘우아하게’ 보여질 수 있도록 준비하는 것 또한 중요할것입니다.

이 강좌가 모바일 퍼스트를 중심으로 하는 것이 아니기에, 이 강좌에서는, 반응형 웹 디자인 과정에서, 모바일 퍼스트, 점진적 향상, 우아한 퇴화 등의 개념들을 항상 고려하며 진행하는 것이 좋다고 생각합니다.  더 구체적인 내용은 Brad Frost의 Mobile-First Responsive Web Design 글(영문)을 읽어보세요.

반응형 웹의 단계

(이 부분은 지극히 주관적인 생각입니다.)

반응형 웹을 3단계 (개발단계가 아닌 완성의 척도로서의 단계)로 나누어 보면

  1. 데스크탑 웹 사이트가 모바일에서도 별 문제없이 나오도록 구현 (일종의 우아한 퇴화)
  2. 모바일 퍼스트를 원칙으로 불필요한 내용을 정리하는 과정을 거친 구현 (일종의 점진적 향상)
  3. 내용을 중심으로 디바이스별로 특화된 콘텐츠/기능/레이아웃/스타일을 제공하도록 구현

하는 것으로 볼 수 있다고 생각합니다.

아마도, 이미 만들어져 있는 데스크탑 용 웹 사이트를 모바일에서도 잘 나오도록 하는 것 (반응형 웹 1단계)이 대부분의 반응형으로 받아들여지지 않나 생각됩니다. 예를 들어, 좌우측 사이드를 모바일에서는 안보이게 하거나 선형화시키는 일이나 상단 메뉴를 모바일에서 버튼을 이용해서 보이게 만드는 방식 등입니다.  주로 레이아웃, 스타일 등의 변화에 촛점을 맞추게 됩니다.

2단계는, 레이아웃이나 스타일 보다는, 웹사이트의 콘텐츠와 기능에 대해서 모바일 퍼스트의 관점으로 재구성하는 것이라 생각됩니다.  모바일 퍼스트를 전략적으로 적용했던 몇몇 웹사이트의 경우, 모바일의 제약들이 해당 웹사이트가 제공해야할 콘텐츠와 기능에 대해서 다시 한번 생각하고 사용자가 꼭 필요한 기능을 중심으로 우선순위와 선별적 제공을 하는 디자인을 하게 되는 것입니다.

3단계는, 조금은 미래지향적이고 서버측 기술 (RESS: Responsive Design + Server Side Components) 이 필요할 수 있어서 순수한 반응형 웹이라고 하기는 힘들지만, 반응형 웹의 최종 목표인, 모든 디바이스에서 사용자가 원하는 컨텐츠를 보기 좋게 제공하는 것이기에, 반응형 웹의 완성단계라 생각합니다. 대표적으로 futurefriend.ly (번역)가 주장하는 내용과 일맥상통할 수 있습니다.

관련 논쟁

논쟁이라고 하기는 그렇지만, 당연히 나올 수 있는 반론으로, 여러 기기에 특화되어 표현되어야 할 웹을 '너무 일반화를 함으로써 발생하는 문제점'들이 제기 되었습니다.

관련 흐름을 (1년이상 전이기는 하지만) 정리한 글로 Jason의 글이 있습니다. 그는 레이아웃(Layout)과 콘텐츠(Content)를 한축으로, 기능(Capability)과 목적(User Intent)을 다른 축으로 했을때, 유동형 디자인/미디어 쿼리 나 반응형 이미지 등, 현재의 반응형 웹 기법들이 기능적으로는 가능하게 하지만, 실제로 사용자들에게 중요한 ‘목적’인 레이아웃의 순서, 레이아웃 이나 선택적 콘텐츠 등은 현재로서는 불가능하지 않느냐 지적하였습니다.

Jason의 반응형 웹 이해
Jason이 지적한 반응형 웹 문제점

이러한 비판은, 기능적인 반응형 웹 디자인을 뛰어넘어, 콘텐츠 퍼스트 등 새로운 접근방법을 생각하게 하기도 합니다.

모바일 웹이 아니라 그냥 폭 320px 짜리 웹사이트

James Pearce의 글에서 그는, 이러한 '단순한 레이아웃 조정이나 크기 조정'이 정말 모바일 웹을 위한 것인지 지적하고 있습니다. 구체적으로

  1. CSS 미디어쿼리는, 모든 html 내용과 이미지들을 모두 다운로드 받은 후 적용되기에, 네트워크의 속도나 가격이 중요한 모바일 웹을 실제로 고려하고 있지는 않다는 것과
  2. 데스크탑 사이트와 모바일 사이트는, 그 사용용도가 다르기에 전혀 다른 내용을 제공해야 할 때가 있다

고 그 한계를 지적하였습니다. 첫번째에 대해서는, 유동형 이미지나 RESS 등 기술적으로 해결하기 위한 노력들이 있습니다. 두번째는, 기회에서 보다 근본적인 전환을 요구합니다.

최적화 vs 적응형 (Optimization vs. Adaptation)

모바일 퍼스트의 주창자이기도 한 LukeW는, 그럼에도 불구하고 특정 기기에 '최적화'된 사이트를 제공하는 것과 하나의 '반응형' 사이트를 제공하는 것에 대해서 논의하고 있습니다. 정리하면,

  1. 최적화: 대상 기기/브라우져를 정확히 안다면 당연히 대상에 특화되고 최적화된 내용을 보내주어야 한다. 그렇기에 RESS가 중요하다.
  2. 적응형: 하지만 많은 경우 대상 기기/브라우져가 정해져 있지 않고, 또한 미래에 나올 기기에 대해서는 알수 없기에, 우리가 할 수 있는 최선을 다해서 적응해야 한다.
  3. 결론: 둘다 맞다.

언제나 그렇듯이 극단적인 방법은, 해결책이 아닙니다. LukeW는 더 나아가서 왜 모바일과 데스크탑 사이트를 별도로 만들어야 하는지에 대해서도 글을 남겼습니다. 이부분은 반응형 웹과는 조금 다른 스탠스를 취하고 있는듯 합니다.

또 다른 사람들은, 위 두 대립 관계를 adaptation (적응형) vs. responsive (반응형)로 이름을 붙이기도 합니다. (참조 링크)

첫번째 강좌를 마치며

지난번 스터디 때도 그랬지만, 처음 시작하는 것이 가장 어렵게 느껴집니다. 이미 알고 있는 분들에게는 뻔한 내용이되고, 처음 하시는 분들에게는 뜬구름 잡는 얘기만 될테니까요.  그래도 일단 용어나 핵심 기술들에 대해서 소개를 해놓고 구체적인 내용으로 들어가야 할것 같아서 애매모호하게 시작했습니다.

지난번 스터디 내용을 바탕으로 순서를 재조정하고 내용도 다듬고 예제도 추가했지만, 그래도 많이 부족한것 같습니다. 혹시 제가 잘못 이해하고 있거나, 중요한 내용을 빼어놓았다면 주저말고 알려주세요.  강좌라고는 하지만, 같이 공부하는 스터디라고 생각합니다.

참고문헌/자료

  1. Ehtan Marcotte, Responsive Web Design, A Book A Part eBook, ISBN 978-0-9844425-7-7
  2. Ethan Marcotte, Responsive Web Design, A List A Part, http://www.alistapart.com/articles/responsive-web-design/, 2010
  3. Ethan Marcotte, Fluid Grids, A List A Part, 2009
  4. Ethan Marcotte, Fluid Images, A List A Part, 2011
  5. Ethan Marcotte, Fluid Images, Unstoppable Robot Ninja, 2009
  6. Responsive Web Design, Wikipedia,
  7. Luke Wroblewski, Multi-Device Layout Patterns, LukeW.com, 2012
  8. Brad Frost, Responsive Navigation Patterns, bradfrostweb.com, 2012
  9. Luke Wroblewski, Mobile First, A Book A Part eBook, ISBN 978-1-937557-02-7
  10. Luke Wroblewski, Mobile First, LukeW.com, 2009
  11. 신현석, Mobile first strategy for CSS designer, Naradesign.net, 2012
  12. Jason, More Responsive Design, Please, JASONTHINGS.com, 2011
  13. James Pearce, Not a mobile web, merely a 320px-wide one, tripleodeon.com, 2010
추천10
스폰서링크

댓글 전체

출근하며 대략적으로 살펴봤는데 PC에서 정독해봐야겠네요.
이런 수준높은 반응형 강좌를 sir 에 모시게 되어 정말 감개무량합니다. ㅠㅠㅠ
리자님이 강좌하시는 분들을 대상으로 소정의 기념품을 드릴 수 있도록 알아보라고 어제 저녁 술김에 말씀을 하셨는데 진짜 진행될지는 두고봐야 알 것 같습니다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
아 퍼블리싱 스터디에 참여하시는 분들께도 기념품을 드리고 싶다고 하시더라구요. ㅎㅎㅎ
허걱.. 이제 아니네요..
한때 첫페이지이긴 했지만 반응형 이었는데..
죄송합니다. 최종 확인을 했어야 했네요.. 수정하겠습니다.
1.CSS 미디어쿼리는, 모든 html 내용과 이미지들을 모두 다운로드 받은 후 적용되기에, 네트워크의 속도나 가격이 중요한 모바일 웹을 실제로 고려하고 있지는 않다는 것과

2.데스크탑 사이트와 모바일 사이트는, 그 사용용도가 다르기에 전혀 다른 내용을 제공해야 할 때가 있다

-------------------------------------------
1번내용이 심히 공감이 가네요. 결국 모바일환경은 pc보다 인터넷이 느리고 패킷또한 유료인데 모바일에서는 보이지도 않는(불필요한) 이미지와 코드들을 다운로드 받는다는건데...

반응형웹이 사용자 우선이 아니라 개발자 우선으로 되있는게 아닌가 싶기도 하네요.
@media (min-width:800px) { background-image: url(../img/2MB짜리배경화면.jpg); }

이렇게 해서 모바일 퍼스트로 개발한다면 2MB크기의 배경화면이 모바일에서는 로드가 안되는건가요?
모바일 퍼스트가 단순히 기술적으로만 접근하는게 아니라 컨텐츠 구성적인 면도 있다고 생각을 하는데요. 굳이 구분하자면 컨텐츠 퍼스트라고도 하시던데, 암튼 이런 방법론을 선택했을 때 2mb 짜리 배경화면을 선택할 일이 있을까요?
아이고, 컨텐츠퍼스트를 알수가 없어서 말씀을 못드리겠네요. 결국 `불필요한` 이라고 정의된 기능/형식/꾸미기/이동 들과 타협을 통해 `우아한 퇴화`를 해야하는거군요.
body { }
@media (min-width:800px) { body { background-image: url(../img/2MB짜리배경화면.jpg); }  }
이런식으로 하신다는 거죠?
아마 거의 대부분의 모바일 기기/브라우져에서 다운되지 않을것 같습니다.
조금 촛점이 다르지만 (display:none 이용) 비슷한 실험이 있었고,
그에 대해서 정리한 제 블로그 글이 있습니다. 한번 참고해 보세요. :)
http://blog.gnuboard.org/2012/04/media-query-image-downloads/
굳이 사족을 붙히자면,
쇼핑몰 사진들 처럼, 모든 사진들에 @media min-width 조건으로 일일이 큰 사진화일을 지정할 수 없는 경우도 있습니다. 그런 경우 아래 남긴 링크 또는 제 다른 블로그 글 (반응형 이미지)에서 정리된 기법을 사용할 수도 있습니다. http://blog.gnuboard.org/2012/04/responsive-images/
아, 이러다가 반응형 이미지에서 할 밑천이 다 드러나겠는데요? ^^;
사실 크게 문제가 되는 것은, 데스크탑용 큰 이미지 일것 같습니다.
그 문제를 해결하기 위한 방법등을 '반응형 이미지'에서 다뤄보겠습니다. :)
질문다는 중에 이글을 봤네요 기대하겠습니다 ^^

"와 이거 짱이다!" 라는 확신이 있어야 공부도 하고 싶거든요. 그누보드처럼 ㅋㅋ
관련 논쟁에서

실제로 사용자들에게 중요한 ‘목적’인 레이아웃의 순서, 레이아웃 이나 선택적 콘텐츠 등은 현재로서는 불가능하지 않느냐 지적하였습니다.

의 실사용자들은 사이트 제작자들을 일컫는 것인가요?
아마도 접속하는 사람들을 말하지 않나 싶네요.
사람들이 데탑이든 모바일이든, '사이트에 와서 하고 싶어하는 일이 무엇이냐' 같이요..

어디선가 봤던 문장 중에
'Top tasks dictate use cases; use cases dictate content'
있더군요.
저는 콘텐츠가 중요할 것라 봤는데, 그 컨텐츠를 결정하는 것은,
가장 우선 수행해야하는 (또는 사람들이 가장 기대하는) 기능/일이고,
그런 일이 결정되면 '사용 방법' 또는 UX가 결정되며,
그런 사용방법/UX가 결국 콘텐츠를 결정한다고 거죠..

있는 사이트를 반응형이나 모바일로 바꾸는 것이 아니고
새로운 사이트를 반응형/모바일까지 고려해서 만드는 것이라면
아마 당연히 거치는 과정일것 같습니다.
새로운? 기술이나 개념에 대한 학습은 일단 최대한 미루고 늦추고 보는데 (괜히 건드렸다 출구 못 찾고 헤맨적이 많아서...ㅠ) 이 강좌를 보니 이제 슬슬 발동을 걸어야지 싶네요^^ 좋은 글 감사합니다~
잘 읽었습니다. 어렵네요.. :)

본문중에

신현석님의 Mobile first strategy for CSS designer 글에서 이런 원칙을 적용한 예를 들었습니다. (아래 코드 출처: 신현석님 블로그)

링크는 나라디자인 홈페이지(정창명)인데 오타 인것 같아서요.
앗, 이런 엄청난 실수를.. 지적 너무 감사합니다. ^^

글은.. 제가 워낙 쉬운것도 어렵게 쓰는 재주가 있어서..  죄송하네요.. ^^;
Toby Yun님이 연재중인 반응형 웹 첫번쨰 글입니다.

RWD #1. Prologue : 모든 크기의 화면에 대응되는 디자인
http://tobyyun.tumblr.com/post/55770417057/rwd-1-prologue
이렇게 요청을 남기지시 않고 하시는 분들도 계실텐데, 우선 감사드립니다.
헌데, 여기 내용은, 저 개인 뿐만 아니라, sir 도 관련이 있기에,
그리고 (계획으로) 내용이 계속 업데이트 될 예정이라
가능하면 요약정도와 링크정도로 사용하시면 어떨까 생각해봅니다.

관심을 가져주셔서 감사합니다. ^_^
Toby Yun님의 반응형 웹 세번째 글입니다.

RWD #3. 모바일 퍼스트(모바일 우선주의)
http://tobyyun.tumblr.com/post/58232536556/rwd-3

재밌는 것은, Toby님이 국내 환경에는 '데스크탑 퍼스트'가 적절하지 않은가 하는 의문을 남기셨는데,
저도 비슷한 고민을 해본 적이 있습니다. http://blog.gnuboard.org/2012/04/mobile-first-vs-desktop-first/
이 강좌를 진작에 읽었다면 1주일 간의 뻘짓은 없었을거 같습니다. 저의 무식함을 유식으로 채워 주셔서 감사합니다. 계속 정독 하겠습니다.

RESS가 이런 개념이였네요.
우리말로 서버우선, 서버처리 이런식으로 대체가 안될까요? ^^;;;; 영어 어려워요.
전체 277
퍼블리싱강좌 내용 검색

회원로그인

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT