반응형은 왜 필요한가

반응형을 찾는 분들은 많아졌지만, 정작 그게 뭔지, 왜 필요한지에 대해 모르시는 분들을 위해 제가 알고 있는 한에서 정리해보았습니다.

반응형 웹

반응형 웹은 말 그대로 사용자의 디바이스 환경에 따라 변화하는 웹을 뜻합니다. 지금 이 XE 타운도 반응형 웹입니다. PC 화면에서 브라우저의 크기를 조절해보면 사이트의 디자인이 크기에 맞춰 변화하는 것을 볼 수 있습니다. 기술적으로는 CSS3의 미디어 쿼리, 유동형 레이아웃 등의 기법이 사용됩니다.

반응형이 유행하는 이유는?

반응형의 가장 큰 장점은 디바이스 크기에 따른 개별적인 코딩없이 하나의 패키지 내에서 스마트폰, 태블릿 PC, 데스크탑 (프린터도 있다..) 등의 디바이스 환경에 대응할 수 있다는 것입니다.

기존의 고정형 웹은 모바일과 PC의 디자인을 개별적으로 제작해야했고, 코드 또한 분리되어 있었기 때문에 사이트에 변경점이 생기면 모바일과 PC를 개별적으로 수정해야하는 번거로움이 있었죠. 그래서 여전히 반응형을 사용하지 않는 사이트들은 PC와 모바일 뷰의 디자인이 상당히 다른 경우가 많습니다. 게다가 태블릿라는 새로운 플랫폼이 생기면서 모바일 뷰만으로는 모든 것을 해결하기 어려웠습니다.

반응형은 왜 필요한가

반응형을 사용하는 이유는 단연 개발 효율 때문입니다. 개발을 조금 배우신 분들이라면 "중복을 하나라도 빠짐없이 찾아내서 제거하라." 라는 말을 한 번쯤은 들어보셨을 겁니다.

여러분들이 게시판을 하나 추가하는데 모바일에도 똑같은 게시판을 하나 더 추가해야 한다면, 그리고 그 모바일의 종류가 무지막지하게 다양해서 그것들을 지원하기 위해 똑같은 게시판을 수없이 더 많이 만들어야 한다면 어떨까요? 게시판 하나 만드는 과정에 엄청난 시간을 쏟게 되겠죠. 결국 그 게시판들은 모두 같은 목적을 위해 만들어진, 본질적으로 전부 똑같은 게시판인데도 말이죠. 그런 이유 때문에 개발자들은 개발의 효율을 위해 '재사용성'이라는 기법을 고안했습니다. 예를 들어 내가 쓴 소설을 5명의 친구에게 나누어주기 위해 소설의 내용을 활자로 만든 다음 그걸 찍어서 나누어주는 것과 같습니다.

반응형도 이와 같은 이유에서 만들어졌습니다. 모바일과 PC의 중복을 제거하는 것입니다.

반응형을 안쓴다고 해서 본인의 사이트가 모바일을 지원할 수 없는 것이 아니라 개발자들이 개발을 더 수월하게 하기 위해서 고안된 방법인 겁니다.

반응형 웹이 적합하지 않는 상황

네이버를 가보면 최근에 디자인이 개편되었음에도 불구하고 모바일과 PC의 코드가 분리되어 있습니다. 스마트폰과 태블릿의 화면을 담당하는 모바일만 반응형으로 제작되었고, PC로 접속했을 때 나오는 화면은 고정형 웹입니다.

왜 그랬을까요?

네이버는 단순히 검색포탈로 그치지 않고, 미디어적 특성을 가지고 있는 사이트입니다. 따라서 메인에서 수많은 정보들을 제공해주어야만 합니다. 모바일은 그 수많은 정보들을 감당하기에는 크기가 너무 작습니다. 모바일에 맞는 디자인 구성이 필요하죠. 물론 반응형이라고 해서 불가능한 것이 아닙니다. 하지만 반응형을 안쓰는 가장 큰 이유는 PC와 모바일의 구성이 너무 많이 다르다보니 오히려 개발이 더욱 번거로워졌고, PC에서만 필요하고 모바일에서는 필요없는 데이터까지 전부 로딩해야하기 때문에 속도 측면에서도 비효율적이기 때문입니다.

하지만 스마트폰과 태블릿은 서로 제한된 화면 크기라는 특성을 공유하고 있기 때문에 화면에 뿌릴 수 있는 콘텐츠의 양이 거의 동일합니다. 그저 레이아웃 구성만 조금 달리하면 되죠. 그래서 네이버의 모바일 뷰는 스마트폰 뿐만 아니라 태블릿 환경까지 대응하도록 반응형으로 제작되어 있습니다.

요약

비개발자 입장에서 좀 더 이해가 되도록 부연설명을 붙이다보니 글이 상당히 길어졌습니다.

요약하자면, 

1. 하나의 소스로 스마트폰, 태블릿, PC 등의 화면을 대응할 수 있는 것이 반응형 웹이다.

2. 그렇기에 작성할 코드는 줄어들고 개발 효율이 높아진다.

3. 반응형이라고 무조건 좋은 것이 아니다.

라고 할 수 있습니다.

남들이 다 좋다고하는 것만 찾는 것이 다 좋은 선택이 되진 않습니다.

"PHP보다 node.js가 좋다."라는 말 참 많이 듣지만, 사실 각각의 선택들이 전부 양날의 검을 지니고 있거든요. 서로 장점과 단점을 나누고 있는 겁니다. node.js 좋다고 시작했다가 callback 함수가 산처럼 쌓이고 나서 멘탈 나가신 분들 분명 여기에도 계실 겁니다ㅋㅋㅋ

웹 사이트를 제작 중이거나 제작하실 예정이신 비개발자, 비전문가 분들, 더 옳은 선택을 위한 배움은 항상 즐겁고 설레는 법입니다. 항상 최선을 다하세요!