본문으로 이동

반응형 웹 디자인

위키백과, 우리 모두의 백과사전.
컴퓨터 화면의 위키백과 스크린샷
휴대전화 화면의 위키백과 스크린샷
반응형 스킨인 벡터 2022가 적용된 위키백과를 컴퓨터 화면(왼쪽)과 휴대전화 화면(오른쪽)에서 본 스크린샷. 요소들이 모바일에 더 적합한 레이아웃으로 자동 재배치된다.
반응형 웹 디자인의 원리를 설명하는 격언인 "콘텐츠는 물과 같다"

반응형 웹 디자인(Responsive web design, RWD) 또는 반응형 디자인은 최소 크기부터 최대 크기까지 다양한 장치와 창 또는 화면 크기에서 웹 페이지가 잘 렌더링되도록 하여 사용성과 만족도를 보장하는 것을 목표로 하는 웹 디자인 접근 방식이다.[1][2]

반응형 디자인은 가변 그리드(fluid proportion-based grids),[3][4] 유연한 이미지,[5][6] 그리고 @media 규칙을 확장한 CSS3 미디어 쿼리[7][8][9][10] 등의 기술을 사용하여 웹 페이지 레이아웃을 열람 환경에 맞게 조정한다.[1] 구체적인 방식은 다음과 같다:

  • 가변 그리드 개념은 페이지 요소의 크기를 픽셀이나 포인트 같은 절대 단위가 아닌 백분율(%)과 같은 상대 단위로 설정할 것을 요구한다.[4]
  • 유연한 이미지 또한 상대 단위로 크기가 조정되어, 이미지를 포함하는 HTML 요소 밖으로 표시되는 것을 방지한다.[5]
  • 미디어 쿼리는 사이트가 표시되는 장치의 특성(예: 브라우저 창의 너비나 물리적 화면 크기)에 따라 페이지가 서로 다른 CSS 스타일 규칙을 사용할 수 있게 한다.
  • 반응형 레이아웃은 데스크톱, 노트북, 태블릿, 스마트폰 등 어떤 장치의 화면 크기에도 자동으로 조정되고 적응한다.

반응형 웹 디자인은 모바일 장치 사용자가 웹사이트 방문자의 대다수를 차지하게 되면서 더욱 중요해졌다.[11][12] 예를 들어 2015년에 구글은 모바일겟돈을 발표하고 모바일 장치에서 검색할 때 모바일 친화적인 사이트의 페이지 순위를 높이기 시작했다.[13] 모바일 사용량이 증가함에 따라 향상된 로딩 속도, 터치 친화적인 내비게이션, 모바일 중심 SEO와 같은 최적화 관행은 사용성을 보장하고 검색 가시성을 유지하는 데 필수적이 되었다.[14]

반응형 웹 디자인은 사용자 인터페이스 가소성의 한 예이다.[15]

과제 및 기타 접근 방식

[편집]

루크 브로블스키는 반응형 및 모바일 디자인의 몇 가지 과제를 요약하고 다중 장치 레이아웃 패턴 카탈로그를 만들었다.[16][17][18] 그는 단순한 반응형 웹 디자인 접근 방식과 비교하여, 장치 경험 또는 RESS(서버 측 구성 요소를 결합한 반응형 웹 디자인) 접근 방식이 모바일 장치에 더 최적화된 사용자 경험을 제공할 수 있다고 제안했다.[19][20][21] Sass와 같은 스타일시트 언어의 서버 측 CSS 생성기 구현이 이러한 접근 방식의 일부가 될 수 있다. 구글은 스마트폰 웹사이트에 대해 다른 접근 방식보다 반응형 디자인을 권장해 왔다.[22]

많은 출판사가 반응형 디자인을 구현했지만, 반응형 디자인 채택의 한 가지 과제는 일부 배너 광고와 비디오가 가변적이지 않다는 점이었다.[23] 그러나 검색 광고와 (배너형) 디스플레이 광고는 특정 장치 플랫폼 타겟팅과 데스크톱, 스마트폰 및 일반 휴대폰을 위한 다양한 광고 크기 형식을 지원하게 되었다. 플랫폼마다 서로 다른 랜딩 페이지 URL이 사용되거나, 페이지에 다양한 광고 변체를 표시하기 위해 Ajax가 사용되기도 했다.[24][17][25] CSS 테이블은 고정 레이아웃과 가변 레이아웃이 혼합된 하이브리드 구성을 가능하게 했다.[26]

모바일 사이트 검증기 및 모바일 에뮬레이터부터 Adobe Edge Inspect와 같은 동시 테스트 도구에 이르기까지 반응형 웹 디자인을 검증하고 테스트하는 많은 방법이 있어 왔다.[27] 크롬, 파이어폭스, 사파리 브라우저와 개발자 도구는 서드파티 도구와 마찬가지로 반응형 디자인 뷰포트 크기 조정 도구를 제공한다.[28][29]

역사

[편집]

W3C의 HTML+ 명세에는 웹사이트가 사용자 기본 설정에 따라 렌더링되어야 한다고 명시되어 있었다.[30] 그러나 당시에는 웹 페이지 레이아웃의 사용자 정의 기능이 부족했다. 많은 웹 개발자들은 레이아웃을 사용자 정의하는 동시에 웹사이트에 기본적인 반응성을 부여하기 위해 일반적인 HTML 테이블을 사용했다.

브라우저 뷰포트 너비에 따라 의미 있는 방식으로 적응하는 레이아웃을 특징으로 하는 최초의 주요 사이트는 2001년 말에 출시된 Audi.com이었다.[31] 이 사이트는 위르겐 슈팡글(Jürgen Spangl)과 짐 칼바흐(정보 설계), 켄 올링(Ken Olling, 디자인), 얀 호프만(Jan Hoffmann, 인터페이스 개발)으로 구성된 razorfish 팀에 의해 제작되었다. 당시의 제한된 브라우저 성능으로 인해 인터넷 익스플로러에서는 브라우저 내에서 레이아웃이 동적으로 적응할 수 있었던 반면, 넷스케이프에서는 크기가 조정될 때 서버에서 페이지를 다시 로드해야 했다.

캐머런 애덤스(Cameron Adams)는 2004년에 데모를 제작했다.[32] 2008년까지 레이아웃을 설명하기 위해 "유연한(flexible)", "액체형(liquid)",[33] "가변형(fluid)", "탄력적(elastic)"과 같은 여러 관련 용어들이 사용되었다. CSS3 미디어 쿼리는 2008년 말과 2009년 초 사이에 본격적으로 사용될 준비가 거의 완료되었다.[34] 이선 마코트(Ethan Marcotte)는 2010년 5월 A List Apart에 게재한 기사에서 반응형 웹 디자인(responsive web design)이라는 용어를 만들고,[35] 이를 가변 그리드 / 유연한 이미지 / 미디어 쿼리를 의미하는 것으로 정의했다.[1] 그는 2011년에 쓴 짧은 저서 《반응형 웹 디자인》(Responsive Web Design)에서 그 이론과 실무를 설명했다. 반응형 디자인은 .net 잡지가 선정한 2012년 최고의 웹 디자인 트렌드에서 점진적 향상에 이어 2위를 차지했다.[36]

매셔블은 2013년을 '반응형 웹 디자인의 해'라고 불렀다.[37]

관련 개념

[편집]

모바일 우선 디자인(Mobile-first design)과 점진적 향상은 반응형 웹 디자인보다 먼저 등장한 관련 개념이다.[38] 기본적인 휴대폰의 브라우저는 자바스크립트나 미디어 쿼리를 이해하지 못했기 때문에, 복잡하고 이미지가 많은 사이트를 휴대폰에서 작동하게 하려고 기능 및 디자인을 깎아나가는 방식(우아한 성능 저하)보다는, 기본적인 웹사이트를 먼저 만들고 이를 스마트폰과 개인용 컴퓨터에 맞춰 향상시키는 관행이 권장되었다.[39][40][41][42]

사용자 인터페이스 가소성은 시스템의 물리적 특성과 환경의 변화를 견디면서 사용성을 유지하는 사용자 인터페이스의 능력을 말한다.[43]

같이 보기

[편집]

각주

[편집]
  1. 1 2 3 Marcotte, Ethan (2010년 5월 25일). “Responsive Web design”. 《A List Apart》.
  2. ↑ Schade, Amy (2014년 5월 4일). “Responsive Web Design (RWD) and User Experience”. 《Nielsen Norman Group》. 2017년 10월 19일에 확인함.
  3. ↑ “Core concepts of Responsive Web design”. 2014년 9월 8일.
  4. 1 2 Marcotte, Ethan (2009년 3월 3일). “Fluid Grids”. A List Apart.
  5. 1 2 Marcotte, Ethan (2011년 6월 7일). “Fluid images”. A List Apart.
  6. ↑ Hannemann, Anselm (2012년 9월 7일). “The road to responsive images”. net Magazine.
  7. ↑ Gillenwater, Zoe Mickley (2010년 12월 15일). 《Examples of flexible layouts with CSS3 media queries》. Stunning CSS3. 320쪽. ISBN 978-0-321-722133.
  8. ↑ Gillenwater, Zoe Mickley (2011년 10월 21일). “Crafting quality media queries”.
  9. ↑ “Responsive design—harnessing the power of media queries”. Google Webmaster Central. 2012년 4월 30일.
  10. ↑ “@media rule”. 《w3.org》. W3C.
  11. ↑ “Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update 2014–2019 White Paper”. 《Cisco》. 2015년 1월 30일. 2015년 8월 4일에 확인함.
  12. ↑ “Mobile share of U.S. organic search engine visits 2021”. Statista. 2021년 10월 29일에 확인함.
  13. ↑ “Official Google Webmaster Central Blog: Rolling out the mobile-friendly update”. 《Official Google Webmaster Central Blog》. 2015년 8월 4일에 확인함.
  14. ↑ Ansary, Ayub (2024년 8월 18일). “How to Optimize Your Website for Mobile”. 《ayubansary.com》. 2025년 2월 20일에 확인함.
  15. ↑ Thevenin, D.; Coutaz, J. (2002). 〈Plasticity of User Interfaces: Framework and Research Agenda〉. 《Proc. Interact'99, A. Sasse & C. Johnson Eds, IFIP IOS Press》. Edinburgh. 110–117쪽.
  16. ↑ Wroblewski, Luke (2011년 5월 17일). “Mobilism: jQuery Mobile”.
  17. 1 2 Wroblewski, Luke (2012년 2월 6일). “Rolling Up Our Responsive Sleeves”.
  18. ↑ Wroblewski, Luke (2012년 3월 14일). “Multi-Device Layout Patterns”.
  19. ↑ Wroblewski, Luke (2012년 2월 29일). “Responsive Design ... or RESS”.
  20. ↑ Wroblewski, Luke (2011년 9월 12일). “RESS: Responsive Design + Server Side Components”.
  21. ↑ Andersen, Anders M (2012년 5월 8일). “Getting Started with RESS”. 《Creative Bloq》. 2012년 5월 12일에 원본 문서에서 보존된 문서.
  22. ↑ “Building Smartphone-Optimized Websites”.
  23. ↑ Snyder, Matthew; Koren, Etai (2012년 4월 30일). “The state of responsive advertising: the publishers' perspective”. .net Magazine.
  24. ↑ “Server-Side Device Detection: History, Benefits And How-To”. Smashing magazine. 2012년 9월 24일.
  25. ↑ JavaScript and Responsive Web Design Google Developers
  26. ↑ “The Role of Table Layouts in Responsive Web Design”. 《Web Design Tuts+》. 2013년 1월 23일. 2015년 5월 21일에 확인함.
  27. ↑ Young, James (2012년 8월 13일). “Top responsive web design problems... testing”. .net Magazine.
  28. ↑ “Responsive Design View”. 《Mozilla Developer Network》. 2015년 5월 21일에 확인함.
  29. ↑ Malte Wassermann. “Responsive design testing tool – Viewport Resizer – Emulate various screen resolutions - Best developer device testing toolbar”. 《maltewassermann.com》. 2015년 5월 21일에 확인함.
  30. ↑ “An Overview of HTML+”. 《w3.org》. W3C.
  31. ↑ Kalbach, Jim (July 22, 2012). "The First Responsive Design Website: Audi (circa 2002)."
  32. ↑ Adams, Cameron (2004년 9월 21일). “Resolution dependent layout: Varying layout according to browser width”. 《The Man in Blue》. 2024년 2월 24일에 원본 문서에서 보존된 문서. 2014년 8월 19일에 확인함.
  33. ↑ “G146: Using liquid layout”. 《w3.org》. 2015년 5월 21일에 확인함.
  34. ↑ “Media Queries”. 《w3.org》. 2015년 5월 21일에 확인함.
  35. ↑ “OutSeller Group - Organize, Optimize, Maximize”. 《outseller.net》. 2017년 2월 2일에 원본 문서에서 보존된 문서. 2015년 5월 21일에 확인함.
  36. ↑ Grannell, Craig (2012년 1월 9일). “15 top web design and development trends for 2012”. .net Magazine. 2013년 9월 11일에 원본 문서에서 보존된 문서. 2021년 10월 29일에 확인함.
  37. ↑ Cashmore, Pete (2012년 12월 11일). “Why 2013 Is the Year of Responsive Web Design”. 《매셔블》.
  38. ↑ “What is Responsive Web Design”. 2012년 7월 23일.
  39. ↑ Wroblewski, Luke (2009년 11월 3일). “Mobile First”.
  40. ↑ Firtman, Maximiliano (2011년 7월 30일). 《Programming the Mobile Web》. O'Reilly Media. 512쪽. ISBN 978-0-596-80778-8.
  41. ↑ “Graceful degradation versus progressive enhancement”. February 3, 2009. November 13, 2014에 원본 문서에서 보존된 문서.
  42. ↑ Parker, Todd; Wachs, Maggie Costello; Jehl, Scott (February 2010). 《Designing with Progressive Enhancement》. New Riders. 456쪽. ISBN 978-0-321-65888-3. 2010년 3월 1일에 확인함.
  43. ↑ Thevenin, D.; Coutaz, J. (2002). 〈Plasticity of User Interfaces: Framework and Research Agenda〉. 《Proc. Interact'99, A. Sasse & C. Johnson Eds, IFIP IOS Press》. Edinburgh. 110–117쪽.

외부 링크

[편집]
원본 주소 "https://ko.wikipedia.org/w/index.php?title=반응형_웹_디자인&oldid=41413386"