반응형 / 적응형 웹의 정의에 대한 질문이 있습니다.

피그마 배리어블을 활용한 디자인 시스템 구축하기

모드를 활용한 반응형 디자인 구현하기

해결된 질문

작성

112

수정됨

안녕하세요. 좋은 강의 잘 보고 있습니다. 디자인 시스템을 구축하는데 있어 큰 도움이 될 것 같습니다. 🙇‍♂

영상 초반 반응형과 적응형 웹의 정의 설명 부분에서 질문이 있습니다.

제가 아는 기준에선 반응형은 기기에 상관없이 브라우저의 사이즈에 따라 미디어 쿼리로 구현해놓은 브레이크 포인트에 맞춰서 스타일이 달라지는 것이고, 적응형은 클라이언트의 기기를 웹서버에서 미리 파악하여 해당 레이아웃을 서버에서 내려주는 방식으로 알고 있습니다.

이에 따라 반응형은 브라우저의 크기가 변경될때마다 레이아웃을 비롯한 스타일이 변경되고, 적응형은 이미 내려 받은 소스코드가 해당 레이아웃이므로 변경이 없을텐데요.

그래서 예시로 알려주신 애플 웹 사이트는 반응형 웹이고, 적응형의 예시는 네이버가 아닐까 생각이 들었습니다.

제가 아는 것이 틀렸을수도 있고, 디자인에서는 반응형/적응형에 대한 정의가 조금 다른 것일수도 있다고 생각이 들었고, 무엇보다, 협업을 하면서 정확한 정의로 커뮤니케이션이 이루어져야할 것 같아, 어떻게 보면 강의에서 중요한 개념은 아닐 수 있지만, 이 부분에 대해서 조금 더 설명을 듣고 싶어 질문을 남기게 되었습니다.

감사합니다!

웹-디자인 figma figma-tokens 디자인-시스템 아토믹-디자인 figma-variable

답변 2

볼드 UX

지식공유자

it님 질문 주셔서 감사합니다.

우선 수강하시는데, 혼동을 드려서 죄송합니다.

강의 자료를 체크해본 결과 저명한 디자인 자료에서는 애플의 웹사이트가 적응형 디자인의 예시로 언급되어 있습니다. 아래 자료는 디자이너 관점에서 맞추어져 있으며, 디자이너들이 모든 Breakpoint의 디자인을 만들어야 한다는 것을 강조합니다.

아티클 자료.

https://www.wix.com/blog/responsive-vs-adaptive-design

https://www.interaction-design.org/literature/article/adaptive-vs-responsive-design?srsltid=AfmBOoqxXh6216tJS39Psb9h7-zWaZPUK_FCG4UzdCQ1p2czrXaewNkh

하지만 말씀해주신 기준(기술적인 관점)에서는 애플 웹사이트는 반응형이 맞습니다. 미디어쿼리가 734px, 1068px, 1441px 등의 기준점으로 만들어져있기 때문입니다.

말씀해주신 대로 강의 전반적으로는 크게 중요한 부분은 아니지만 개발자와 협업 과정에서 정확한 정의가 필요한 만큼 강의를 빠르게 수정하도록 하겠습니다.

정말 감사합니다.

감사합니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

it님, 질문하신 내용과 관련하여, 반응형 및 적응형 웹 디자인의 정의에 대해 몇 가지 기존의 유사한 질문과 답변을 찾아보았습니다. 아래 내용이 도움이 되기를 바랍니다.

유사한 질문과 답변

픽스드, 플루이드 반응형 레이아웃 그리드 적용 질문
- 이 질문에서는 반응형과 적응형 웹 디자인의 차이점, 그리고 둘 중 어떤 것을 더 많이 사용하는지에 대해 논의되었습니다. 반응형 디자인은 화면 크기에 따라 유동적으로 변하는 레이아웃을 사용하며, 픽스드와 플루이드 레이아웃의 차이점도 설명되어 있습니다. 이 답변은 브라우저의 크기 변경에 따라 스타일이 달라지는 반응형 웹과 적응형 웹 간의 차이를 명확히 이해하는 데 도움이 됩니다.
타이포그래피 스타일 네임에 관하여
- 질문자님의 정확한 이해를 돕기 위해, 타이포그래피 스타일의 네이밍 규칙과 스타일 적용 방법에 대해 논의된 이 질문도 참고할 수 있습니다. 반응형/적응형 디자인에서 각기 다른 디바이스나 해상도에 따라 어떻게 스타일을 적용할지에 대한 이해를 높일 수 있습니다.

요약된 설명

반응형 웹 디자인(Responsive Web Design): 미디어 쿼리를 사용하여 브라우저의 크기에 따라 레이아웃과 스타일이 자동으로 변경되는 디자인 방식입니다. 이는 브라우저 크기에 대한 유동적인 반응을 의미하며, 예시로 애플 웹 사이트와 같이 화면 크기에 따라 레이아웃이 변하는 사이트들이 있습니다.
적응형 웹 디자인(Adaptive Web Design): 서버나 클라이언트 측에서 특정 디바이스의 특성을 사전에 인식하고 해당 디바이스에 최적화된 레이아웃을 미리 준비하는 방식입니다. 이 방식은 디바이스별로 별도의 레이아웃이 존재하며, 예시로는 네이버와 같이 디바이스에 따라 다른 레이아웃을 서빙하는 사이트들이 있습니다.

질문자님의 정의가 틀리지 않으며, 웹 개발 및 디자인에서 중요한 개념입니다. 디자인 시스템에서도 이러한 차이를 명확히 이해하고 적용하는 것이 협업과 커뮤니케이션에 도움이 될 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변