자유광장자유

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

 

반응형 웹

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

 

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

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

 

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

 

 

반응형은 왜 필요한가

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

 

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

 

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

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

 

 

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

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

 

왜 그랬을까요?

 

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

 

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

 

 

요약

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

요약하자면, 

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

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

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

라고 할 수 있습니다.

 

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

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

 

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

 

글쓴이 SNAX

profile
안녕하세요! Digital Product Designer, Calvin Snax입니다.
제 작업물을 확인해보시거나 작업을 의뢰하고 싶으신 분들은 제 사이트를 방문해주세요.
http://calvinsnax.com

XE & Rhymix 제작 자료
equeer 레이아웃: https://calvinsnax.com/equeer
XE 알림센터 모듈 스킨 C!rculator Lite: https://winx.kr/Ea5QVRoF
  • profile
    라라펠 2018.02.09 14:20:43

    그래서 scss less 등등... css도 선택폭이 넓고 굳이 node.js가 아니더라도 윈도우 서버라면 C++, C#(ASP or Native), JAVA등으로 ws 서버를 직접 구축할수도 있고... 리눅스라면 파이썬 등등... (사실 선택폭은 매우 넓지만 효율성까지 본다면야...)

    몇년전만 해도 PC기준으로 반응형을 제작하는게 유행이었지만 이제는 모바일을 기준으로 반응형을 제작한다던가, 가지수가 많아지는 느낌입니다.

     

    Github도 네이버처럼 사이트 특성상 모바일뷰 따로 PC뷰 따로 있고 기능도 모바일에는 제한적으로 들어가고 있으니까요 뭐 사이트가 다루는 컨텐츠에 따라 선택하는게 맞는 것이겠지요...

  • profile
    라라펠 2018.02.09 14:31:58
    제일 중요한건 내가 트렌드가 되느냐 아니면 트렌드에 휩쓸리느냐 인것 같네요.
  • ?
    삼바홍 2018.02.09 16:01:15
    사족이긴 한디.. 파판유저 신가봐요 방갑습니다 저도 라라펠만 했었는뎅 ㅋㅋㅋ
  • profile
    기진곰 2018.02.09 14:51:43

    요즘은 모바일 사용자가 더 많기 때문에 반응형 디자인도 "모바일 퍼스트"로 하더군요. 예전에는 PC용 디자인을 먼저 만들고 그걸 적당히 간소화해서 모바일용으로 바꾸었다면, 이제는 모바일용 디자인을 먼저 만들고 그걸 확대해서 PC용으로 만드는 느낌...

     

    그런데 PC 화면도 점점 커지고 있기 때문에 (예전에는 1024x768이면 충분했지만 이제는 Full HD가 기본이니까요) 모바일용 디자인을 뻥튀기해서 PC 화면에 뿌려 놓으면 굉장히 허전합니다. 요즘 여백이 많고 글자가 큰 디자인이 유행하는 것은 애플 등 몇몇 회사가 먼저 시도한 것을 따라하는 부분도 있지만, 넓은 화면을 채울 방법이 없어서 어쩔 수 없이 그렇게 만드는 것 같기도 해요. 정보의 밀도가 낮아지는 것은 그냥 스크롤하는 것으로 때우고...

     

    4K짜리 PC부터 320px짜리 아이폰SE까지 모든 화면에 맞는 디자인을 만드는 것은 쉬운 일이 아니니, 대화면용/소화면용으로 일단 2가지를 만들고 그 안에서 어느 정도 반응형으로 구현하는 것이 적당한 타협점이 아닐까 싶네요.

    2
  • profile
    라르게덴 2018.02.09 14:56:03
    이런글이 자유광장에 있으면 쉽게 묻힙니다.
    작업하기 같은 공간에 올려두시면 나중에도 도움이 될 거 같네요. :)
    https://xetown.com/resources
  • ?
    삼바홍 2018.02.09 16:00:02
    한참 반응형 반응형 하니까.. 웹관련해서 암것도 모르는데 나름 공대생이라고 친구 부탁으로 어설프게 만들어준게 반응형이였죠..

    결국엔 태블릿은 배제하고 그냥 모바일과 PC를 따로 만들어서 쓰고 있습니다.
  • profile
    키아 2018.02.10 03:21:06
    결국 모바일과 PC는 분리되어야 마땅하다 느껴지고 모바일내에서 모바일끼리 반응형이 구성되는게 알맞다고 봅니다. 네이버도 그러고 있죠 현재 ^^

서버에 요청 중입니다. 잠시만 기다려 주십시오...