반응형 웹디자인 Responsive Web-Design

반응형 웹디자인에 대하여 알아봅니다.

 

 

반응형 웹디자인에 대한 이야기가 나온지는 이제 좀 되었네요.

 

그래도 아직 모르시는 분들과 이제 막 이쪽 분야에 관심을 가지고 계시는 분들을 위해 조금 내용을 정리해 봅니다.

 

 

 

 

 

반응형 웹디자인의 뜻부터 알아볼게요.

 

 

반응형 웹디자인을 단어별로 쪼개어서 살펴보면,

 

- 반응형 : 무언가에 반응하는 형태(형식 아니면 프로그램)를 말하는 것인데, 그럼 무엇에 반응을 할까?

웹서핑을 할 때 사용하는 도구에 반응을 합니다.

 

그런 도구에는 PC도 있고, 테블렛도 있고, 제일 많이 사용하는 모바일 휴대폰이 있겠죠.

 

이런 도구에 반응을 한다는 의미이고,

 

정확히 이야기하면 이런 도구의 화면 너비값(width)에 반응하는 것을 의미합니다.

 

 

- 웹 : 웹은 아실거구요.

 

- 디자인 : 무얼 디자인하는 걸까?

 

PC의 모니터에서, 휴대폰에서 보이는 웹의 화면을 디자인합니다.

 

 

 

각각 쪼갠 내용을 합쳐 보면,

 

"반응형 웹디자인"은

PC, 테블렛, 모바일 휴대폰의 각각 다른 화면의 너비값(width)에 따라 반응하도록 웹의 화면을 디자인하는 것으로 볼 수 있습니다.

 

PC는 넓은 모니터로 웹의 화면을 넓게 넓게 볼 수 있지만,

 

테블렛에서는 그 화면이 좀 좁아지고,

 

휴대폰에서는 웹 화면이 더욱 좁아지기 때문에

 

일반 사용자들에게 PC에서 보여주던 웹의 화면을 그대로 모바일에서 보여주면

 

모바일에서 웹화면의 글씨가 아주 작아져서 내용을 읽기에도 힘들고, 뭔가를 클릭하기에도 어려울테죠.

 

 

그래서 모바일에서는 PC와는 다른 웹화면을 보여주도록 디자인이 되어있습니다.

 

 

그럼 실무에서는 어떻게 반응형 웹디자인을 할까요?

 

 

 

이걸 설명하기 전에 우선 html과 css에 대해서 아셔야 하는데요.....

 

(설명할 다른 것들이 더 있지만 나머지는 생략할게요.)

 

 

html은 웹의 화면에 보이는 내용들의 "큰틀"이라고 생각하시면 됩니다.

예를 들면,

 

웹화면에서 보이는 뉴스기사의 제목, 사진(이미지), 기사내용, 기사를 쓴 날짜, 기사를 쓴 사람 이름 등등 이런 기본모양을 말합니다.

 

 

css는 이런 기본모양(큰틀)을 좀 더 이쁘게 만들어주는 역할을 합니다.

네이버랑 다음에서 같은 뉴스를 보는데도 글씨 크기나 줄간격, 이미지의 배치가 다른 것처럼

 

동일한 html이어도 css로 어떻게 이쁘게 만들어 주느냐에 따라서 웹화면에서 보이는 내용이 달라집니다.

 

(거꾸로 이야기하면 css가 없다면 네이버랑 다음에서 보는 뉴스 기사들이 차별화 되지 않고, 개성없이 똑같아 보이겠죠)

 

 

그럼 반응형 웹디자인에서 html과 css가 어떻게 활용될까요?

 

이지 짐작을 하시는 분들이 계실지 모르겠네요.

 

아주 간단히 설명을 드리면

 

 

html은 하나만 만들고,

 

 

PC용 css,

 

테블렛용 css,

 

모바일 휴대폰용 css를 각각 만들어 줍니다.

 

 

그럼 동일한 기사의 내용이 PC에서, 테블렛에서, 휴대폰에서 각각 너비값에 따라 최적화 되어서 일반 사용자들이 휴대폰의 좁은 화면에서도 뉴스기사를 PC의 모니터에서 보는 것처럼 편안하게 보실 수 있게 됩니다.

 

 

그런데 예전에는 css 뿐만 아니라 html도 PC용, 테블렛용, 모바일용을 각각 따로 만들었다고 합니다.

 

 

이게 얼마나 힘들고 비효율적일까요?

 

뉴스기사의 제목 한 글자만 고치며 되는데, html이 다 따로 되어 있으니 각각 수정을 하고.....혹시나 실수로 모바일에서 html을 수정을 안했으면, PC에서 보는 내용(디자인 말구요)과 모바일에서 보는 내용이 달라질테니까요.

 

 

요약을 하면,

 

IT환경의 변화에 따라 최근 다양해진 접속기기를 반영하는 유연한 홈페이지 온라인 서비스의 제공 필요에 의해 반응형웹디자인이라는 개념이 생겼습니다.

 

반응형에 최적화 되지 않은 경우 PC 화면에서 보여지는 이미지가 모바일 기기에서 일부만 표출되거나 사라져 사용자에게 원활한 정보전달이 이루어지지 않는 경우들이 발생했기 때문이죠.

 

반응형웹디자인이라는 개념으로 PC, 태블릿, 스마트폰의 다양한 접속 기기와 운영환경을 고려한 확장성 있는 홈페이지를 구축하게 된것이죠.

 

이렇게 웹디자이너 및 웹개발자들은 반응형웹디자인을 통해 사용자의 접속 기기별 맞춤형 홈페이지 서비스를 제공할 수 있게 된 것입니다.

 

요즘에는 PC 보다 모바일의 사용이 훨씬 많아지기 때문에 웹디잔을 할 때 부터 모바일 기반 웹디자인을 많이 합니다.

 

 

이상으로 간단히 반응형 웹디자인에 대한 개념을 알려 드립니다.

 

 

 

오늘도 즐거운 하루 되세요~~~~

 

 

 

요즘에는 흑당커피가 땡겨서......

 

전 한잔하러 갑니다.

 

술 말고 커피요~~~