개념 : 반응형 웹 디자인

"반응형 웹 디자인"은 그 이름에서 알 수 있듯이 웹에 적응한 "반응형 디자인"의 개념입니다. 때때로 "RWD"라는 용어 또는 단순히 "반응형"이라는 용어로 축약됩니다. (사람들은 보통 "이 웹사이트가 반응이 좋습니까?"라고 묻습니다.)
그리고 이상적으로는 라이브로 진행되는 모든 웹사이트는 모바일 장치의 등장과 함께 점점 더 중요해졌기 때문에 반응형이어야 합니다.

Photo imported from Unsplash

사실 반응형 웹 디자인은 웹사이트를 모바일에서 "즐겁게 사용할 수 있도록"만드는 데 적용되는 많은 개념 중 하나일 뿐이며, 모바일에만 국한되지 않고 다음과 같은 경우에도 가치가 있다는 것을 알고 있습니다.

► 태블릿,

► 패블릿(스마트폰과 태블릿 사이에 위치한 중간 단말기),

► 컴퓨터 및 모든 유형의 화면,

► 현대 텔레비전,

► 자동차 대시보드,

► 휴대용 게임 콘솔,
… 그리고 웹 브라우저를 통해 웹사이트를 볼 수 있는 거의 모든 장치.
따라서 반응형 웹 디자인이 반드시 "모바일 버전"을 의미하는 것은 아니며 "적응형 웹 디자인"과 같은 개념의 문을 여는 것입니다.

적응형 웹 디자인

이 용어는 웹 페이지를 요청하는 장치에 따라 웹 사이트의 사용자 인터페이스가 다르다는 개념입니다. 예를 들어 컴퓨터에서 지도를 요청하면 페이지에 Google 지도 프레임이 로드되지만 모바일에서 동일한 요청을 하면 대신 지도 링크가 표시될 수 있습니다. 이것은 대부분 삶의 질 조정인 여러 가지 이유로 발생합니다.
모바일은 반드시 컴퓨터와 동일하게 작동하지는 않지만 일반적으로 사양 측면에서 덜 강력합니다.

따라서 이 개념은 사용자 장치에 적합한 기능적(따라서 시각적인) 디자인을 기반으로 합니다. 이 개념의 가장 극단적인 경우는 적응된 기능뿐만 아니라 완전한 전용 사이트(한 주소에는 컴퓨터 버전 사이트, 다른 주소에는 모바일 버전 사이트)를 제공하는 것일 수 있습니다.

반응형 웹 디자인

The one-size fits all term that is the most popular. 

이에 대한 예부터 시작하겠습니다. 큰 화면에 표시되는 4개의 큰 열 플렉스 박스 디스플레이는 모바일에서 그리드 디스플레이로 나머지 2개 위에 2개 요소로 요약됩니다. 따라서 동일한 장치에서 페이지를 세로 모드로 표시하는지 가로 모드로 표시하는지에 따라 렌더링이 다를 수 있습니다.

데스크톱 우선

이 개념은 "모바일 퍼스트"라는 개념이 등장하기 전에는 이름이 없었지만 애초에 컴퓨터에 표시되도록 만들어진 사이트를 의미합니다. 그런 다음 태블릿 및 모바일 버전에 시각적 차이가 추가됩니다.

모바일 퍼스트

이것은 작은 화면에서 초대형 화면까지 반응형 디스플레이를 가능하게 하는 "반응형 웹 디자인"의 원래 아이디어에 가장 가까운 접근 방식입니다. 이 접근 방식은 먼저 모바일과 같은 작은 장치(따라서 이름)에서 사이트 및 디자인을 생각한 다음 디자인을 더 큰 장치로 확장하는 것을 포함합니다.

이 접근 방식은 무한한 응답성을 허용하는 것 외에도 가장 작은 장치가 최소한의 리소스를 로드하도록 하는 데 도움이 됩니다. 웹 사이트를 만드는 데 권장되고 보다 실용적인 방법입니다.