One-site-fits-all? 반응형 & 적응형 웹
나에게만 맞는 적응형 웹과 모두에게 맞는 반응형 웹
웹 기반 서비스를 기획하게 된다면 반드시 마주하게 될 그 단어!
웹사이트의 양대 산맥인 ‘반응형’과 ‘적응형’ 웹페이지에 대해 이야기하고자 합니다.
두 방식 모두 각자의 장점이 명확한, 매력적인 친구들입니다. 지금 보고 있는 웹사이트는 반응형인지 적응형인지 한 번 알아보도록 하자구요!
반응형과 적응형의 가장 근본적인 차이는 “하나의 웹 페이지로 모든 크기의 화면에 대응할 수 있는가?”인데요, 이는 웹페이지 화면을 늘리고 줄여보면 쉽게 확인할 수 있습니다.
PC web에서 브런치를 보고 계신 분들이라면 브라우저 사이즈를 한 번 조절해보세요!
NAVER 메인 화면처럼 아무리 브라우저 창의 크기를 바꿔도 화면 내의 구성 요소들은 그대로라면?
빠밤~ 적응형 웹입니다.
Youtube 화면처럼 브라우저 창의 크기를 마음대로 늘였다 줄였다 했을 때, 안에 있는 컴포넌트들이 나의 움직임에 맞춰 변한다면?
짜잔~ 반응형 웹입니다!
적응형 웹사이트와 반응형 웹사이트의 특징은 기성복 사이즈에 대입해서 생각하면 더 이해가 쉽습니다. 제가 잊을래야 잊을 수 없도록, 찰떡같이 설명해드리도록 하겠습니다!
그럼 반응형 웹사이트와 적응형 웹사이트를 조금 더 자세히 알아볼까요?
나에게 잘 맞는 웹, 적응형 웹사이트 (Adaptive Website)
적응형 웹은 특정 환경에 ‘적응’된 최적의 화면으로 구성된 웹사이트입니다.
대표적인 적응형 웹사이트로는 Naver를 들 수 있는데요, Naver는 PC에서 접근할 때는 https://www.naver.com/로 연결되고, Mobile에서 접근할 때는 https://m.naver.com/으로 연결됩니다. 아예 url까지 분리한, 완전한 적응형 웹으로 볼 수 있습니다!
적응형 웹은 개별 화면에 특화된 화면을 통해 환경별 최적의 사용자 경험을 제공할 수 있습니다.
적응형 웹은 S, M, L… 등 체형에 맞게 여러 사이즈로 제작되는 옷과 그 특징이 유사합니다. 사람마다 체형이 다르고, 그 체형에 맞는 사이즈로 옷이 제작됩니다. 내가 M 사이즈라고 말하면, 직원은 나에게 잘 맞는 M 사이즈의 옷을 제공해줍니다. 이렇게 입은 옷은 전혀 어색함 없이 나와 잘 맞습니다.
하지만, 나의 체형과 맞는 사이즈가 없다면? 그 옷을 사서 입기가 어려워집니다. 물론 다른 사이즈의 옷을 어떻게 입을 수는 있겠지만, S 사이즈는 들어가지 않고, L 사이즈는 너무 커서 입었을 때 어색하게 느껴집니다.
만약 S, M, L 사이즈만 있는 옷을 XL 사이즈인 사람에게 팔고자 한다면? 기존 옷은 팔 수가 없고 새롭게 XL 사이즈에 맞는 옷을 제작해야겠죠?
다시 적응형 웹으로 돌아가봅시다. 적응형 웹은 스마트폰, 태블릿, 데스크탑 등 각자의 환경에 가장 적합한 웹 화면을 각각 만들어서 제공합니다. 적응형 웹은 마치 옷가게의 직원처럼 사용자의 디바이스 정보를 받아 사용자의 환경에 가장 적합한 레이아웃을 제공해주게 됩니다.
데스크탑에 맞춰 만든 화면을 스마트폰에서 확인하면 너무 커서 화면을 다 확인할 수 없거나, UI가 깨지는 현상이 발생하곤 합니다. 반대의 경우도 마찬가지입니다. 만약 적응형 웹사이트를 통해 데스크탑 환경에만 서비스를 제공하던 회사에서 스마트폰에서도 서비스를 제공하고자 한다면, 스마트폰 환경에 맞는 새로운 화면을 만들어내야 합니다.
이렇게 만든 화면들은 각각의 환경에 가장 적합하게 설계될 수 있습니다. 설계할 때는 특정 사이즈의 화면만 고려하면 되기 때문에 빠르게 진행될 수 있습니다. 또한, 반응형 웹에 비해 코드가 가벼워 빠르게 사이트를 불러올 수 있습니다.
하지만, 서비스 제공 유연성이 떨어지고, 수정 시 개발된 모든 화면을 개별적으로 수정해야 하는 운영 상의 번거로움이 있습니다.
One-site-fits-all! 반응형 웹사이트 (Responsive Website)
반응형 웹은 사용자의 환경에 ‘반응’하여 상황에 따라 적절한 화면을 보여주는 웹사이트입니다.
대표적인 반응형 웹 서비스로 Youtube를 들 수 있는데요, 반응형 웹사이트로 구현된 Youtube는 어디서 접근해도 https://www.youtube.com/으로 연결됩니다.
반응형 웹은 하나의 웹사이트를 통해 모든 환경에서에서 일관된 사용자 경험을 제공할 수 있습니다.
반응형 웹의 기반은 CSS의 “미디어 쿼리(Media Queries)” 기능인데요, 쉽게 설명하면 ‘미디어 환경에 따라 어떻게 보여줄 지 설정할 수 있는 기능’입니다.
미디어 쿼리를 활용하면 한 화면을 데스크탑 사이즈에서는 어떻게 보여줄지, 태블릿 사이즈에서는 어떻게 보여줄지, 모바일 사이즈에서는 어떻게 보여줄지 설정할 수 있습니다. 이를 통해 여러 디바이스에 유연하게 대응이 가능합니다!
데스크탑은 화면이 넓으니 여러 컨텐츠를 한 줄에 일렬로 보여주고 싶지만, 모바일에서는 컨텐츠를 하나씩만 보여주고 싶다면? 미디어 쿼리를 통해 화면 해상도에 따라 한 줄에 보여줄 컨텐츠 수를 설정하면 됩니다!
반응형 웹은 프리 사이즈로 제작되는 옷과 그 특징이 유사합니다. 모든 사람이 입을 수 있도록 one-size로 제작되고, 직원은 누가 오든 그 옷을 건네주면 됩니다!
프리 사이즈의 옷은 대부분의 체형의 사람들에게 모두 무난하게 맞습니다. 하지만 누구에게도 완전 fit하지는 않습니다. 모두에게 맞는 옷이어야 하다 보니 디자인도 제한적일 수밖에 없습니다. (고무줄 필수,,,)
누구나 입을 수 있는 옷을 디자인하기 위해서는 많은 고민이 필요합니다. 하지만, 만들고 난 이후에 판매자는 짱 편합니다! 한 사이즈의 옷만 있어서 재고 관리도 쉽고, 누가 오던 해당 사이즈의 옷을 건네주면 되어서 다시 새로운 무언가를 만들 필요가 없습니다.
이렇게 반응형 웹은 one-size 옷처럼, 하나의 웹사이트로 모든 디바이스 환경을 커버할 수 있습니다. 반응형 웹에 어떤 디바이스로 접근해도 적당한 웹 화면을 볼 수 있습니다. 많이 사용되는 스마트폰, 태블릿, 데스크탑은 물론 32:9 비율이라는 새롭고 특이한(?) 환경에서도 그에 맞는 화면을 제공해줄 수 있습니다.
반응형 웹을 설계할 때에는 모든 해상도에서 보여질 화면을 고려하여야 하기 때문에, 처음 기획 시에 많은 시간과 노력이 필요합니다. 또, 여러 환경에 대응해야 하다 보니 사이트가 좀 무겁고, 로딩에 상대적으로 오랜 시간이 소요됩니다.
하지만, 한 번 만들어 놓으면 하나의 웹사이트만 관리하면 되기 때문에 운영이 용이하고, 환경에 구애받지 않는 일관된 서비스를 제공할 수 있습니다.
반응형 웹과 적응형 웹의 특징을 정리해볼까요?
이제 적응형과 반응형 잘알이 된 멋진 독자님!
앞으로 웹 사이트를 이용할 때, 적응형 웹인지 반응형 웹인지 한 번씩 확인해보는 건 어떨까요?
