HTML5는 최신 웹 디자인 언어로, 등장과 동시에 웹 디자인 업계에 큰 변화의 물결을 일으켰습니다. 기존의 HTML에서 HTML5로의 전환이 이루어졌는데, 두 기술의 가장 큰 차이점을 살펴보면 HTML5를 더욱 특별하고 우수하게 만드는 핵심 요소는 바로 반응성(Responsiveness)입니다.
웹 페이지의 반응성이란 브라우저에 로드된 후 사용 중인 매체(기기)에 따라 웹 페이지가 제공하는 출력 또는 반응을 의미합니다.
기존 HTML에는 여러 가지 한계가 있었고, 이러한 한계는 새로운 버전의 필요성을 불러일으켰습니다. 웹 디자이너들은 빠르게 변화하는 기술 환경에 맞춰 유연하게 웹 페이지를 제작할 수 없었습니다.
최신 기술 환경에서는 사용자들이 데스크톱, 노트북, 스마트폰, 아이패드 등 다양한 기기로 웹 페이지에 접속합니다. 게다가 이러한 기기들은 각각 서로 다른 화면 크기를 가지고 있습니다. 웹 디자이너들은 모든 기기에 적합한 솔루션을 찾고 있었고, 그 해답으로 HTML5가 등장했습니다.
리퀴드 레이아웃(Liquid Layout)
HTML5는 HTML, CSS, JavaScript가 하나로 결합된 형태입니다. 이를 통해 사용자는 물처럼 유연한 레이아웃의 웹 페이지를 만들 수 있습니다. 물이 담긴 용기의 모양을 따른다는 것을 우리는 잘 알고 있습니다. 마찬가지로 리퀴드 레이아웃은 디자이너가 지정된 컨테이너 안에서 콘텐츠를 자유롭게 배치할 수 있도록 해줍니다. 동일한 웹사이트를 아이패드에서 열면 화면 크기에 맞게 조정되고, 모바일에서 같은 URL에 접속하면 모바일 화면에 맞춰 표시됩니다.
웹 디자이너들이 또 한 번 고민했던 부분은 콘텐츠와 관련된 것이었습니다. 모바일 화면에는 다른 콘텐츠를 보여주고, 노트북 화면에는 또 다른 콘텐츠를 보여주고 싶다면 어떻게 해야 할까요? 아주 간단한 예시를 통해 이 개념의 심리학적 배경을 설명해 보겠습니다. 사무실에서 갑자기 팀원들과 야외 점심 파티 계획을 세웠다고 상상해 보세요. 휴대폰을 꺼내 근처 식당을 검색할 수 있는 웹페이지를 열고, 원하는 조건으로 필터링한 후 요구 사항에 가장 잘 맞는 곳을 선택할 것입니다. 반면, 주말에 점심 파티를 가기로 계획했다면 어떨까요? 이런 경우에는 아마 노트북을 열어 같은 웹사이트의 페이지를 천천히 둘러보고, 다양한 혜택과 추가 옵션들을 꼼꼼히 확인하게 될 것입니다.
이 예시를 통해 우리는 모바일로 웹페이지를 여는 사용자는 아마도 시간에 쫓기고 있어서 디자인을 둘러볼 여유가 없다는 것을 알 수 있습니다. 이러한 사용자는 세련된 UI보다 기능성을 더 중요하게 생각합니다. 하지만 동일한 웹페이지를 노트북이나 데스크톱 브라우저에서 볼 때는 디자인을 감상할 시간이 충분히 있을 것입니다.
반응형은 웹 디자이너가 페이지를 기기의 화면 영역에 맞게 늘리거나 줄이고, 이미지나 태그를 숨기거나 표시할 수 있도록 해줍니다.
반응형 웹 디자인(Responsive Web Design)은 사용자의 기기 화면 해상도에 따라 레이아웃을 조정하며 웹 페이지를 개발하는 개념입니다. 웹 디자이너는 레이아웃을 조정하여 관련 정보를 먼저 제시할 수 있습니다. 영업시간, 전화번호, 오시는 길, 메뉴 링크 등이 그 예입니다. 반면 책상에서 볼 때의 식당 페이지는 모바일에서는 신경 쓰지 않았던 다양한 화려한 요소들을 모두 담고 있을 것입니다.
반응형 웹 디자인(RWD)의 레이아웃은 픽셀이나 포인트 같은 고정값 대신 em이나 백분율(%) 같은 유동적인 단위를 사용하여 구현됩니다.
웹 페이지에 반응성을 부여하려면 페이지 구조를 변경하고 HTML5의 기본 개념을 적용해야 합니다. HTML5로 코드를 작성할 때의 기본 지침은 다음과 같습니다.
- 콘텐츠는 HTML 파일에 작성한다
- 디자인과 배치는 CSS 파일에 작성한다
- 유효성 검증은 JavaScript 파일에 작성한다
따라서 반응형을 구현하려면 기기 화면 크기의 변화에 따라 CSS 파일만 교체하면 되고, HTML 페이지에 담긴 콘텐츠는 그대로 유지됩니다.
RWD 전략
반응형 웹 디자인은 전통적인 우아한 성능 저하(Graceful Degradation) 방식 대신 점진적 향상(Progressive Enhancement) 방식을 사용합니다.
우아한 성능 저하는 최신의 가장 발전된 브라우저에 호환되는 웹 페이지를 구축하는 데 중점을 둡니다. 이후 구버전 브라우저에 대한 지원도 제공되지만, 예상되는 오류나 문제점들은 함께 따라오게 됩니다.
반면 점진적 향상은 브라우저가 아닌 콘텐츠에 초점을 맞춥니다. 이 개념을 '콘텐츠 우선' 접근법이라고 생각하면 되는데, 마치 땅콩 M&M 초콜릿과 비슷합니다.
- 땅콩: 풍부한 시맨틱 HTML로 마크업된 콘텐츠
- 부드러운 크림 코팅: CSS
그리고 단단한 사탕 껍질 역할로 JavaScript(JS)를 추가합니다.
RWD 프레임워크
HTML5 프레임워크는 재사용 가능한 CSS 및 JS 파일과 더미 텍스트가 미리 정의된 사전 제작 템플릿입니다. 이러한 프레임워크는 초보 개발자들이 기본적인 디자인 작업을 빠르게 시작하는 데 도움을 줍니다. 레이아웃이 정의되어 있고 디자인이 미리 만들어져 있기 때문입니다.
반응형을 구현하기 위한 다양한 프레임워크가 시장에 출시되어 있습니다. 가장 인기 있고 구현하기 쉬운 것은 Twitter Bootstrap입니다. 이 외에도 Foundation, Skeleton, Boilerplate, Kickstart 등이 있으며, 대부분의 프레임워크는 초기 레이아웃 개발을 위해 그리드 시스템을 기반으로 사용합니다.
Twitter Bootstrap은 모바일 우선(mobile-first) 접근 방식을 채택하고 있으며, 무료로 사용할 수 있고 설치도 간편합니다. 범용 CSS 파일이 패키지에 포함되어 있어 웹 페이지의 대부분의 요소와 컨트롤을 디자인하는 데 도움이 됩니다. 다양한 유형의 레이아웃이 제공되어 웹 페이지 제작에 폭넓게 활용할 수 있습니다.
반응형 웹 디자인은 가장 주목받는 기술로, 점차 모든 웹사이트의 표준 요구 사항이 되어가고 있습니다. 온라인에서 구현을 위한 다양한 지원 자료를 찾을 수 있으며, 활용할 수 있는 도구들도 많이 있습니다.