본문 바로가기
웹 개발 이야기

반응형 웹과 적응형 웹

by Gommin 2023. 6. 15.

웹 제작에 있어서 모든 기기 및 플랫폼에서 원활하게 작동할 수 있으면서 디자인 면에서도 뛰어난 웹 제작하는 것이 매우 중요해지고 있습니다. 이를 위해 반응형 및 적응형 방식으로 웹을 제작하게 됩니다.

오늘은 반응혁과 적응형에 대해 알아보겠습니다.

 

반응형 웹

반응형 웹은 하나의 템플릿으로 감지된 화면 크기에 따라 자동으로 페이지가 재배열되는 유동적인 접근 방식을 이용하는 웹입니다.

반응형 웹을 제작할 때에는 화면 크기에 따라 요소들의 사이즈가 유동적으로 변동되어야 하기때문에 css에서 사이즈 지정 시,  px의 고정값이 아닌 %, em 처럼 백분율 단위의 값을 이용합니다.
그리고 미디어 쿼리를 이용하여 해상도에 따라 레이아웃의 사이즈가 변동되도록 제작합니다.

반응형 웹은 디바이스 상관 없이 모든 리소스를 다운로드 받기 때문에 로딩 속도가 조금 느립니다.

 

적응형 웹

적응형 웹은 브라우저가 주어진 플랫폼에 맞춰 특별히 생성된 레이아웃을 불러오는 웹 디자인 유형입니다.

모바일과 데스크탑 용의 디바이스 별  독립적인 템플릿을 제작하고, 웹 사이트에 접속한 기기를 감자하여 알맞은 페이지로 이동하게됩니다.
적응형 웹은 디바이스 별로 리소스르 다운로드 받기 때문에 로딩 속도가 빠릅니다.

 

반응형과 적응형 두가지 방식은 사용자 경험에 대해서는 큰 차이를 보이지 않습니다.
그렇다면 빈응형 웹과 적응형 웹 중 어떤 방식이 나의 서비스에 알맞을까요?

반응형 웹은 기기와 상관없이 모든 플랫폼에서 일관된 콘텐츠 경험을 제공합니다. 그렇기에 각각의 기기별 통제는 어렵습니다.
그리고 반응형으로 제작 시, 플랫폼 간 테스트 및 디자인 조정이 필요하므로 이에 대한 기간이 일반적인 기간보다 조금 더 필요할 수 있습니다.

적응형 웹은 각각의 기기에 맞는 최적화 된 디자인을 제공할 수 있고, 통합 콘텐츠 또는 광고 등 상황에 따라 알맞은 경험을 제공할 수 있습니다. 하지만 각각의 기기마다 일관된 콘텐츠가 제공되지 않으면 사용자에게 부정적인 영향을 미칠 수 있습니다.

 

제작하고 싶은 사이트에 대하여 디바이스별 디자인과 기능적 요소들을 구체화해보시면 제작하려는 서비스에 맞는 방식을 선택하실 수 있습니다. 구체화 작업이 힘드실 경우, 웹 에이전시에 문의하시면 구체화 작업(기획)에 도움을 드릴 것입니다.

위 글이 웹 제작을 의뢰하시려는 분들에게 도움이 되었으면 좋겠습니다.

 

댓글