CA BLOG

영향과 유산. 논의할 필요도 없이 당연한 말이다. 이제 막 유년기에 돌입한 웹디자인 역시 예외가 아니다. 웹디자인은 전임자인 인쇄디자인에 매우 큰 영향을 받았다.

하지만 시간이 흐를수록 웹은 더욱 예측할 수 없는 방향으로 진화하고 있다. 우리는 유래없는 기기와 브라우저의 홍수 속에서 살고 있다. 모바일 웹키트 같은 훌륭한 소형화면 브라우저들의 폭발적인 수요 때문에 이러한 상황은 더욱 악화되었다.

분화된 컨텐츠
특정 기기 또는 브라우저에 맞춤형으로 아무런 연결고리 없는 디자인들을 제작하는 대신, 각각을 동일한 경우의 서로 다른 면으로 다뤄야 할 필요가 있다. 반응적 웹디자인이란 사용 매체에 따라 그에 최적화된 화면을 선보이는 디자인을 의미한다. 이는 우리의 작업에 표준에 기반한 테크놀러지를 삽입함으로써 간단히 구현할 수 있다.

첫번째 구성 요소: 유동 그리드
우리는 지금 폰트 크기를 픽셀이 아닌, 그 요소가 선보일 곳에 대한 비율로 표현했다. 하지만 우리 그리드 내의 모든 요소 및 그 위에 얹혀진 요소들은, 동일한 방식을 사용해 비례값으로 나타낼 수가 있다. 다시 말하면, 우리는 특정한 요소의 원하는 크기만 얻은 것이 아니라, 실제로 그 텍스트가 선보일 공간에 대한 크기의 비율 역시 얻게 된 셈이다. 이를 통해 우리는 매체에 따라 픽셀에 기반한 폭이 변화한다 하더라도, 고유의 비율을 그대로 유지할 수 있게 되었다.

두번째 구성 요소: 유동 이미지
이미지를 재구성해서 비율에 맞게 크기를 바꾸고, 그 덕분에 선보일 공간보다 절대로 클 수 없게 한다면 어떨까? CSS를 살짝 수정함으로써 바로 이걸 성취할 수 있다.

세번째 구성 요소: 미디어 쿼리media query
미디어 쿼리에 들어가자. CSS3 스펙의 일부로, 미디어 쿼리는 우리 디자인을 렌더링하는 기기의 물리적 특성을 살펴볼 수 있게 해준다. 만일 기기가 쿼리에 설정된 테스트를 통과한다면, 그 내포된 CSS를 불러오게 된다. 우리의 유동 레이아웃의 크기가 재조정되면서, 미디어 쿼리는 화면에 펼쳐지는 이미지를 적합한 해상도 범위로 수정하게 된다. 그것이 넓은 데스크톱 브라우저창이든 모바일 기기든 말이다.

월간 CA(컴퓨터 아트) 2010년 11월호에서 발췌