[UX/UI] 반응형과 적응형

제안서를 작성하며 내가 반응형과 적응형 디자인에 대해 제대로 알고 있지 못하다는 것을 인지했다.

 

이를 바로잡기 위한 공부를 기록으로 남긴다.

 

정리

구분	반응형	적응형
정의	하나의 레이아웃을 사용하여 다양한 디바이스의 화면 크기에 맞게 콘텐츠를 자동으로 재배치	미리 정의된 여러 레이아웃을 사용하여 특정 디바이스에 맞는 레이아웃을 제공
장점	1. 유지보수 효율성: 하나의 소스 코드를 수정하면 모든 기기에 적용됨​ 2. 일관된 사용자 경험: 모든 플랫폼에서 일관된 콘텐츠 경험 제공​  3. 미래 대비: 새로운 화면 크기나 디바이스에서도 별도의 추가 작업 없이 작동​	1. 맞춤화된 경험: 각 디바이스에 최적화된 디자인 제공 ​ ​ 2. 성능 최적화: 필요한 리소스만 로드하여 성능 향상​ ​ 3. 디자인 자유도: 특정 디바이스에 맞게 디자인 가능​
단점	1. 복잡한 코드: 다양한 기기 크기를 지원하기 위해 복잡한 CSS와 설계 필요​ 2. 성능 문제: 모든 CSS를 로드하므로 일부 기기에서 성능 저하 가능 3. 디자인 통제 어려움: 특정 기기에서 요소의 크기나 순서를 세밀하게 제어하기 어려움​	1. 높은 유지보수 비용: 여러 레이아웃을 관리해야 하므로 유지보수가 복잡하고 비용 증가 2. SEO 문제: 일관되지 않은 콘텐츠가 SEO에 부정적인 영향 가능​  3. 새로운 디바이스 대응 어려움: 새로운 디바이스가 출시될 때마다 추가 작업 필요​
예시	드롭박스(링크)	아마존(링크)

 

반응형과 적응형 구분하는 법

1. 브라우저 크기 조절: 브라우저 창 크기를 줄이거나 늘리면 메뉴가 축소되어 햄버거 메뉴로 전환되고, 콘텐츠 배치가 세로로 변경됩니다.

 

2. 개발자 도구 사용: '디바이스 모드'로 전환하면 다양한 화면 크기에서 레이아웃이 동적으로 조정됩니다.

 

 

 

예시 - 아마존

화면 변화에 따라 크기가 바뀌지만 레이아웃은 변하진 않음

 

예시 - 드롭박스

헤더 요소, 본문 텍스트, 입력 박스 및 CTA 버튼 등 구성과 이미지가 변함

 

확실히 기획 시 반응형이 적응형보다는 수월할 것 같다.

 

가볍게 정리만 하려고 했는데 생각보다 공부 시간이 길어졌네..

 

다음엔 또 다른 기획 공부를 아카이빙 해보자 :D