적응형 설계 소개

모바일 장치로 웹사이트를 방문하는 동안 사이트의 데스크톱 버전이 더 작은 화면에 압축되어 콘텐츠를 보려면 확대하고 전환해야 할 수도 있습니다. 또는 데스크톱 버전을 훌륭하게 만드는 내용과 만남이 부족한 단순화된 모바일 버전으로 연결될 수도 있습니다. 그러나 이상적으로는 브라우저 너비에 따라 콘텐츠를 재배열하고 재배치하는 레이아웃인 적응형 웹사이트를 만나게 됩니다.

여기서는 적응형 디자인의 세 가지 측면을 살펴보겠습니다.

1. 콘텐츠 재배치
2. 고정 비율
3. 상대적 비율
4. 중단(미디어 쿼리)

콘텐츠 재배치

콘텐츠 재배치란 브라우저의 뷰포트 너비에 따라 너비를 수정하는 콘텐츠를 의미합니다. 예를 들어, 기본 설정이 있는 단락은 브라우저의 너비가 줄어들 때 자동으로 내용의 방향을 바꿉니다. 디자이너 캔버스의 가장자리를 드래그하여 이 동작을 에뮬레이트할 수 있습니다.

고정 비율

고정 픽셀 너비를 활용할 때는 신중을 기하는 것이 중요합니다. 예를 들어 이미지에 500px 너비를 할당하면 데스크톱이나 태블릿에서 눈에 띄게 보일 수 있습니다. 그러나 이미지를 더 작은 모바일 장치에서 볼 경우 이미지 너비는 500px로 고정되어 있으며 더 좁은 뷰포트(일반적으로 500px 미만)에 맞춰 조정되지 않습니다.

상대적 비율

여기에는 브라우저 너비나 상위 요소와 같은 다른 구성요소를 기준으로 요소의 크기를 설정하는 작업이 수반됩니다. 이미지에 픽셀 기반 크기를 활용하는 대신 %, VW(뷰포트 너비) 또는 VH(뷰포트 높이)와 같은 다양한 단위를 사용하는 것을 고려해 보세요. 이미지에 %를 사용하고 브라우저 너비를 조정하면 그에 따라 조정되지만 px 기반 이미지는 그렇지 않다는 것을 알 수 있습니다.

요소의 너비와 높이를 관리하기 위해 다양한 단위를 적용하는 방법에 대해 자세히 알아보세요.  

방해

디자인 레이아웃은 일반적으로 단일 이미지의 너비를 관리하는 것보다 훨씬 더 복잡합니다. 중단점(미디어 쿼리로도 인식됨)을 사용하면 콘텐츠 위치 변경을 평가할 수 있을 뿐만 아니라 다양한 장치 너비 범위에 따라 디자인과 레이아웃을 조정할 수도 있습니다.

‍

더 살펴보세요:

• 중단점 시작
• 더 큰 디스플레이를 위한 디자인