피그마 활용 3주차 반응형과 적응형 3-5

반응형과 적응형

 

화면의 크기에 따라 디자인이 변하는 원리를 같이 알아봐요!

 

해상도에 맞게 움직이는 유동적인 디자인

• 우리가 다루는 디자인은 데스크탑부터 모바일까지 화면의 크기가 다양합니다.
• 따라서 디자인도 화면의 크기에 대응해서 레이아웃이 달라야 합니다.

   모바일에서 데스크탑 화면이 나오면 어떻게 될 지는 잘 아시겠죠…? 네.. 난리나여

• 해상도에 따라 레이아웃을 변경하는 방법은 대표적으로 반응형 디자인과 적응형 디자인이 있어요.

 

반응형 디자인과 적응형 디자인

 

반응형 디자인

• 반응형 디자인은 말 그대로 반응하는 디자인이에요.

변화가 점진적이라고 표현하기도 해요!

• 해상도의 변화에 실시간으로 반응해요.
• 반응(Respond)한다고 해서, 반응형은 영어로 Responsive라고 불러요

적응형 디자인

• 적응형 디자인은 한번 적응하면 움직이지 않은 고정된 디자인이에요.
• 해상도가 변하더라도 반응을 하지 않거나 실시간으로 변하지 않아요.
• 적응(Adapt)한다고 해서, 적응형은 영어로 Adaptive라고 해요.

반응형과 적응형의 차이 및 특징

반응형과 적응형의 가장 큰 특징은 변화의 과정이 실시간인지 아닌지예요.

반응형 디자인과 적응형 디자인의 움직임

 

해상도가 변해도 디자인은 이미 처음 해상도에 적응한 상태에요.

해상도가 변하면 디자인이 실시간으로 반응해요.

 

 

 

디자인을 브라우저에 띄울 때의 차이

 

반응형 디자인은 하나의 디자인을 놓고, 화면 크기의 움직임을 감지해서 실시간으로 반응해요.

적응형 디자인은 디자인을 처음 화면에 띄울 때, 화면의 크기를 감지해서 정해진 디자인만 보여줘요.

 

 

모든 웹사이트가 반응형 또는 적응형으로 딱 나뉘어지진 않아요.

대부분의 서비스들은 필요에 따라 두 가지를 섞어서 사용하는 것이 일반적입니다!

 

 

 

반응형 웹사이트 그리드 만들기

아래 실습을 따라하며 반복해보세요!

 

플러그인 설치하기

플러그인 검색창에 ‘Responsive’ 를 검색해주세요.

디자인을 반응형으로 볼 수 있도록 도와주는 플러그인이에요.

 

Try it out

커뮤니티에 있는 플러그인을 즐겨찾기에 등록해서 사용하는 개념이에요!

플러그인 상세페이지에는 제작자가 등록해 둔 사용방법, 특징 등이 있으니 사용 전에 꼭 읽어보시는 걸 추천드립니다!

 

 

새로 열린 드래프트 파일에서 Save 버튼 누르기

Try it out(한번 써 보기)을 누르면 내 드래프트에 새로운 디자인 파일이 자동으로 생성되고 방금 설치한 플러그인 소개 패널이 자동으로 떠 있어요. 연습 파일에서 한번 써보고, 마음에 들면 즐겨찾기에 등록하면 됩니다 :) 마음에 들지 않으면, 그냥 파일을 닫아버리면 돼요!

 

 

 

데스크탑 그리드 만들기

 

 

 

태블릿, 모바일 그리드 만들기

쉬프트 쥐누르면 레이아웃 히든 쇼 가능

반응형 그리드 적용하기

 

왕왕! 코드로도 반응형 그리드 짜봤던적이 있는데, 너비를 정해두고 세가지로 만들긴해도 미세하게 달라지는 부분도 있어서 되게 짜증나는게 반응형이었는데...

 

아직까지는 플러그인 설치해서 늘였다 줄였다하니 그저 재밌다.. ㅋㅋ

 

이제 그안에 ui 넣으면 날리 나겠지?ㅎㅎ

 

아이콘 폰트 컴포넌트 오토레이아웃 반응형 등

 

다하면 복잡해질것같은 예감....사용자와 인터뷰도 하고 디자인도 설계해야되고... 할일 많ㅇ..