반응형, 적응형 웹에 대해 이야기를 해볼게요

서론

최근 10년 동안 스마트폰 사용자는 꾸준한 증가세를 보여왔으며, 이러한 추세는 앞으로도 계속될 것으로 예상된다.
스마트폰 보급이 확대되면서 인터넷에 접근할 수 있는 인구도 자연스럽게 늘어나, 웹 사용자 수 또한 스마트폰 사용자 증가와 비례하여 지속적으로 증가해 왔고 앞으로도 계속 증가할 것 같다.

 

원래 웹은 주로 PC 사용자를 위한 서비스로 설계되었지만, 스마트폰 보급률이 급격히 증가하면서 현재는 웹 접속 기기의 절반 이상이 모바일에서 이루어지고 있습니다. 이에 따라 스마트폰 환경에 최적화된 뷰를 제공하기 위한 반응형 웹(responsive web)과

적응형 웹(adaptive web) 이 대중화되었습니다. 원래도 pc view의 사이즈가 각각 달랐기 때문에 반응형 웹과 적응형 웹이 있기는 했습니다.

반응형 웹

반응형 웹은 viewport의 사이즈가 변경되면 디자인과 레이아웃이 변경된 viewport 크기에 맞춰지는 방식이다.

ex) https://www.toyota.co.kr

적응형 웹

적응형 웹은 viewport의 사이즈가 변경돼도 특정 사이즈에 충족된다면 미리 만들어진 정적인 레이아웃을 불러오는 방식이다.

ex) https://www.nike.com

 

사실 요즘의 웹은 반응형과 적응형의 경계가 허물어져서 사용되고 있는 것 같다. 위의 예시 사이트를 각각 가지고 왔지만 사실상 완벽한 반응형과 적응형은 아니다. css의 발전으로 요즘 트렌드는 반응형, 적응형의 장점들만 가져와 사용하는 식으로 되어있다.

프로젝트에서 사용하고 있는 방식 + 나의 생각

내가 현재 진행하고 있는 프로젝트는 디자이너 1명, 프론트엔드 1명(본인), 백엔드 1명으로 되어 있는데 나 혼자서 모든 페이지 + 반응형 or 적응형 웹까지 제작한다는 것은 많은 비용과 리소스가 필요하게 된다.

그래서 효율적인 방법을 생각해 보다 모바일 화면 비율을 그대로 pc 화면에서 모바일 화면 비율대로 보여주는 것이다.

 

 

위의 사진처럼 모바일 view의 비율을 그대로 크기만 키워서 pc에서 보여주는 것이다.

해당 방식으로 해본 결과 확실히 퍼블리싱의 양이 줄었고 pc width에 대해 고려할 부분이 없어져 신속한 개발 진행이 가능했다.

이미 많은 회사들이 pc 사용자보다 모바일 사용자가 더 많고 앞으로도 더 많아질 것이라고 생각해서 위와 같은 방식을 적용하는 웹 페이지들이 많아졌다.

https://pickle.plus - 피클플러스

https://teamstore.tigers.co.kr - 기아타이거즈 팀스토어

진행하고 있는 프로젝트

 

위와 같은 방식을 사용하는 대부분의 이유는 인력 부족 때문일 수도 있고 모든 기기에서 일관된 경험을 주기 위해서 일 수도 있다.

이유는 다양하다.

https://yozm.wishket.com/magazine/detail/2659

무신사는 왜 PC 버전 서비스를 종료했을까? | 요즘IT

 

마무리

시간이 지나면서 많은 것들이 변한다.

프론트엔드 기술도 그렇다 예전에는 html로만 개발을 하던 시절이 있었지만 요즘은 react 더 나아가 next를 사용하여 개발을 진행하기도 한다.

항상 변화하는 트렌드에 맞춰 생각을 해야 한다는 것을 느꼈다.+ 데이터를 중심으로 생각하기

 

https://github.com/bigbroCO-team/bigbro_company_client

GitHub - bigbroCO-team/bigbro_company_client