반응형 웹, 적응형 웹 정확한 뜻을 알고 계신가요?
기획자를 위한 용어.zip
웹 프로젝트를 진행하다보면 초반기에 이런 말들을 들어보셨을거에요.
반응형 구축인가요?
적응형 구축인가요?
기획자를 위한 용어집, 오늘은 이 반응형, 적응형 이라는 뜻이 대해서 알아보도록 하겠습니다.
아름다운 봄날입니다 :)우선 두가지 용어가 등장하게 된 배경에 대해서 먼저 알아볼게요.
예전에는 인터넷을 이용하기 위해서는 PC를 이용해야만 했었죠. 그러다보니 웹사이트를 만들때 기준이 되는 해상도는 PC 브라우저 기준으로 설정을 했습니다. 하지만 지금은 PC를 이용해서 인터넷을 사용하는 사람들보다 모바일을 통해서 인터넷을 활용하는 인구가 훨씬 더 많이 늘었습니다.
따라서 웹사이트를 만들때 PC로 접속하는 사용자와 모바일로 접속하는 사용자 모두를 고려해야 하는 상황이 되었습니다.
Mobile, PC, Tablet PC자, 이렇게 한 눈에 봐도 너무나 크기가 다릅니다.
이렇게 다양한 디바이스에서도 웹사이트를 보여주는 방법으로 쓰이는 것이 바로 반응형, 적응형 구축 방식입니다.
반응형 웹 Responsive web
말 그대로 사용자가 이용하고 있는 디바이스의 해상도에 따라 웹사이트의 크기가 변경되는 것을 뜻합니다.
이렇게 반응형을 구축을 진행하게 되면 PC의 큰 해상도에서 보여지던 이미지 사이즈는 같은 비율을 유지하면서 사이즈가 작아지고, 레이아웃 역시 일정한 규칙에 따라 가로 배열로 되어있던 화면이 세로 배열로 변경되게 됩니다. 따라서 이때의 레이아웃은 반응형으로 움직였을때도 무리 없이 정보를 확인할 수 있는 레이아웃을 구성하는 것이 좋습니다.
figma.com하지만 반응형 웹이라고 해서 완전히 모든 디자인을 PC와 모바일을 동일하게만 가는 것은 아닙니다.
위의 예시 이미지를 한번 보세요. 상단에 빨간색으로 표시된 영역을 보시면 PC버전에서는 메뉴들이 쭉 나열되어 있지만 모바일 버전에서는 아이콘 형태로 변경되어 제공되는 것을 확인할 수 있습니다. 이렇게 해상도에 맞춰 일부 디자인은 변경을 하여 제공할 수 있습니다.
이런 경우에는 나열되어 있는 메뉴들이 → 아이콘 형태로 변경되는 기준점을 정하게 됩니다.
그러다보니 반응형의 웹사이트는 구축 시 한 벌의 제작으로 완료가 되는 것이 가장 큰 장점입니다. 하지만 위의 메뉴 영역처럼 기능의 특징에 따라서는 일부 예외 처리를 해야한다는 점은 발생할 수 있습니다.
반응형으로 구축된 웹의 경우 일반적으로 어떤 디바이스에서 접속했을때나 동일한 URL을 유지하는 것이 일반적입니다. 어차피 달라지는 것은 해상도에 따른 레이아웃 배열, 일부 예외처리 구간이기 때문에 URL 경로를 별도로 지정해야하는 이유가 없어집니다.
적응형 웹 Adaptive web
반응형과 반대되는 개념의 구축이 바로 적응형 웹입니다.
서비스의 성격상 반응형 웹처럼 규칙적인 UI로 동작 시키는 것이 어려울때는 적응형 웹 형태로 구축을 진행하게 되는데 이는 말 그대로 PC용, 모바일용(필요에 따라서는 태블릿용까지도) 별도로 구축을 진행하게 됩니다. 여러벌의 산출물을 만들어내야 한다는 점에서는 단점이 될 수 있지만 사용자의 디바이스에 맞춰 서비스와 기능을 맞춤형으로 보여줄 수 있다는 장점이 있습니다.
naver.com적응형으로 제작된 사이트의 경우 접속하는 디바이스에 따라서 URL이 변경되기도 합니다.
이를테면 네이버를 생각하시면 쉬워요. 우리가 PC에서 네이버에 접속하면 www.naver.com 이라는 경로로 접속이 되지만, 핸드폰에서 접속을 하게되면 m.naver.com 이라는 경로로 자동적으로 연결이 됩니다. 다만 이 경우 사용자가 직접 해당 URL을 입력해서 접속하는 것이 아니라 www.naver.com 이라는 URL을 입력하게 되면 해당 사용자가 접속한 디바이스를 판단하여 모바일이라면 m.naver.com 이라는 경로로 포워딩을 시켜 웹사이트를 보여주는 방식입니다.
웹을 구축하는데 있어서 정답은 없습니다.
우리의 서비스가 더 알맞은 방법이 있을 뿐이랍니다. 따라서 개발 방향을 설정하실 때는 트랜드만 쫓아가지 마시고 반드시 프로젝트의 비즈니스 목적성과 주요 사용자층의 취향, 서비스 성격을 맞춰 선택하시기를 바랍니다.
Q. 이 사이트가 반응형인지, 적응형인지 어떻게 알 수 있나요?
A. 어떤 사이트를 보면서 이 사이트가 반응형인지 적응형인지 궁금하다면 이렇게 테스트 해보세요.
PC에서 접속했을때, 모바일에서 접속했을때 URL을 살펴보세요. 모바일에서 접속했을 때 m.xxxx.com 혹은 xxxx.com/m/ 이런 식의 경로가 지정되어 있다면 반응형으로 구축된 사이트일 가능성이 큽니다.
PC에서 해당 사이트에 접속한 후에 브라우저의 사이즈를 변경시켜 보세요. 아래 영상처럼 브라우저 사이즈를 줄였을 때 레이아웃이 일괄적으로 줄어든다면 이 역시 반응형 웹으로 구축된 사이트일 가능성이 높습니다.
#서비스기획, #웹기획, #웹기획강의 #서비스기획강의 #웹디자인 #figma #피그마 #figma강의 #피그마강의 #일대일수업 #반응형웹 #적응형웹 #기획용어 #레탑피그마
https://letapefigma.com