반응형 웹사이트의 다른 방법이 있는건가요?

이런 궁금증을 해결하는 가장 좋은 방법은 브라우저의 개발자도구를 이용하는 것이라고 생각해요. Chrome에서 개발자도구 -> 네트워크 탭을 보면 1. PC 버전 - 로딩하는 CSS : https://www.navercorp.com/css/ko/navercorp.css?20230321 2. Mobile 버전 - 로딩하는 CSS : https://www.navercorp.com/css/ko/mobile/naver.css?20220203 PC 환경과 모바일 디바이스를 대응하는 CSS가 별도로 구성되어 있고 환경에 따라 각 파일이 로딩되고 있어요. PC환경과 모바일 환경에서 렌더링되는 HTML도 달라요. 또한 동작하는 script 로직도 달라요. 각 환경별 로딩된 HTML을 복사하여 파일 diff를 해보면 차이점을 확인할 수 있어요. (Chrome에서 개발자도구 -> 네트워크 탭 -> www.navercorp.com 요청 선택 후 Response에서 응답 HTML 문자열 복사 -> vscode의 파일 Compare Selected 기능 등을 활용하여 diff) https://www.navercorp.com/ 사이트의 결론을 내보면 - PC or 모바일 환경에 따라 서버에서 다른 HTML, CSS를 응답해요. (즉, 적응형 or 반응형이 아닌 별개의 코드에요) - 그래서 로딩 후에 개발자도구로 디바이스 환경을 변경시에 PC환경에 대응된 형태가 그대로 보이는 것이에요. - 디바이스 환경 변경 후 새로고침을 하면 정상적으로 모바일 환경처럼 렌더링(동작)되는 것을 확인할 수 있어요. - 추가(이 사이트는 React를 사용하지 않았고 jQuery를 사용하여 구현되어 있어요)

스크립트로 User-Agent 에서 접속한 기기의 정보를 알수있어요. 데스크탑 안드로이드 ios 등등.. 아마도 모바일기기인 경우에만 해당 화면에 맞는 ui를 보여주도록 되어있을것 같네요.

적응형과 반응형이 있어요 근데 주로 반응형으로 개발을 많이들 한다고해서... 거의 그런 추세이구요 리액트나 뷰로 할적에는 미디어쿼리 관련된 패키지가 많다고해서~ 그걸로 써보세요.

1. 기본적으로 모바일, pc 등의 기기 구분과, os 구분까지 UA를 확인 가능한 메서드가 있습니다. 다만 이는 너무 많은 정보를 내포하고 있다고 판단되어서 구글(크롬)측에서는 UA가 아닌 client hints라는 기능을 개발하였고 적용도 되었다고 알고 있으니 확인해 보시면 좋을 것 같습니다. 사파리는 아직 안되는거 같네요 ㅎㅎ.. 2. 아래 링크는 제가 반응형에 대해 공부할 때 도움이 많이 되었던 포스트입니다. 반응형이란 무엇이고 실제로 어떤 식으로 작업을 하는지 예시가 잘 정리되어 있습니다. https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e0

반응형 웹사이트를 구현하는 데에는 여러 가지 방법이 있습니다. 미디어 쿼리를 사용하는 것 외에도 다음과 같은 방법들이 있습니다. 1. 사용자 에이전트 감지(User Agent Detection): 웹 브라우저에서 서버에 요청을 보낼 때 사용자 에이전트(User Agent)라는 정보가 포함됩니다. 이 정보를 통해 서버는 접속한 기기의 종류를 판단할 수 있습니다. 서버는 이를 기반으로 기기에 맞는 콘텐츠를 제공할 수 있습니다. 사용자 에이전트 감지는 JavaScript 또는 서버 측 프로그래밍 언어로 구현할 수 있습니다. 하지만 이 방법은 사용자 에이전트 문자열이 변경될 수 있고, 브라우저와 기기 종류가 다양하므로 완벽한 해결책은 아닙니다. 2. 서버 측 반응형 웹 디자인(Server-Side Responsive Web Design): 이 방법은 서버에서 기기의 정보를 확인하고, 기기에 맞는 다양한 뷰를 제공하는 것입니다. 즉, 서버가 기기에 따라 다른 HTML 및 CSS를 전송하여 반응형 웹사이트를 구현합니다. 이 방법은 클라이언트 측의 로딩 시간을 줄여 성능 향상에 도움이 되지만, 서버 측에서 더 많은 작업이 필요합니다. 3. CSS Flexbox 및 CSS Grid 사용: CSS Flexbox와 CSS Grid를 활용하여 레이아웃을 구성하면, 미디어 쿼리 없이도 반응형 웹 디자인을 구현할 수 있습니다. Flexbox와 Grid는 동적으로 요소의 크기와 위치를 조절할 수 있어, 화면 크기에 따라 콘텐츠가 자동으로 조절됩니다. naver.com 사이트의 경우, 크롬 개발자 도구에서 모바일 뷰로 전환하면 반응형이 적용되는 것을 확인할 수 있습니다. 이는 미디어 쿼리와 함께 사용자 에이전트 감지 또는 서버 측 반응형 웹 디자인 기법을 사용하여 구현되었을 가능성이 높습니다. 반응형 웹사이트 구현 방식에는 다양한 접근법이 있으며, 상황에 따라 적합한 방법을 선택하여 사용하면 됩니다.