피그마 7일차 - 플러그인 Break points를 이용한 반응형 웹사이트 만들기!

안녕하세요 시란입니다. 

 

이번 시간에는 반응형 홈페이지를 쉽게 작업하는 방법을 알아보도록 하겠습니다. 

먼저 준비물은 각 웹 홈페이지가 되겠습니다. 

사이즈별로 desktop 버전, 모바일버전, 태블릿버전을 만들어줍니다. 

그리고 버튼 배치나 아이콘 배치를 각각 해주면 됩니다. 

저는 아래 사진과 같은 예시 페이지들을 가져왔습니다. 

 

 

그리고 나서 반응형 페이지 작업을 쉽게 도와주는 breakpoints라는 어플을 설치하도록 하겠습니다. 

현재 breakpoints는 유료네요. 

이 breakpoints라는 플러그인은 우리가 지금 준비한(만든) 모바일화면, 태블릿 화면, 데스크톱 화면을 하나의 프레임으로 만들어서

해당 프레임의 크기를 변경하면 자동으로 모바일, 태블릿, 데스크톱으로 변경해줍니다. 

무료버전 사용하기를 통해 15일동안 사용할 수 있습니다.

 

그리고 continue를 눌러보면 아래와 같이 나옵니다. 

New Adaptive Layout 을 눌러줍니다. 

 

그럼 아래 화면과 같이 나오죠. 

플러스 버튼을 눌러줍니다. 

여기서 가로쪽에 있는 플러스 버튼을 눌러줍니다.

왜냐하면 보통 가로 길이에 따라서 모바일, 태블릿 등의 화면 크기가 바뀌어지기 때문이죠

 

 

자 이렇게 세번 플러스 버튼을 클릭한 후 가로 수치를 수정해줘야합니다. 

 

제가 준비한 화면 크기를 참고하시면 다음과 같습니다. 

데스크톱 가로: 1600

테블릿 가로:1024

아이폰 14 가로 :428

위의 수치를 각각 입력해줍니다. 

그리고 나면 보라색 화살표가 다음 플러스버튼을 연결하라고 하죠?

클릭해봅니다. 

플러스 버튼을 누르면 이렇게 프레임을 선택하라는 문자가 나오게 됩니다. 

먼저 320 - 427 사이의 크기에서 적용될 프레임을 선택하라고 나오죠?

그렇다면 iPhone 14 plus 프레임을 선택해주면 되겠네요!

 

그럼 아래와 같이 iphone 14 plus 프레임이 우리가 저번 시간에 배웠던 컴포넌트 화 되는것을 알 수 있습니다. 

그리고 한번 Responsive Layout 프레임을 선택해서 가로 길이를 조절해봅시다!

 

자 이렇게 화면이 작아지면 모바일 화면이 나오죠?

그럼 마찬가지로 다른 프레임들도 채워줍시다.

여기서 만약 이런 오류가 나오는 경우가 있을꺼에요.

난 분명 클릭을 잘 했는데 지금 아래처럼 데스크톱 화면이 컴포넌트화가 안된 경우가 발생했네요.

이럴경우 위에 빈 컴포넌트로 만들어진 Desktop-1 은 지워줍니다. 

그리고 우리 저번시간에 배운대로 desktop - 1 을 직접 컴포넌트화 시켜줍니다. 

 

 

자 이렇게 모든 프레임이 컴포넌트화 되었습니다. 

그리고 나서 한번 반응형 프레임의 가로 길이를 조절해봅시다.

 

모바일 > 태블릿 > 데스크톱 화면으로 잘 변경되는것을 알 수 있습니다. 

 

자 여기까지 반응형 프레임 작성 방법에 대해서 알아보았습니다. 

 

이제 반응형 페이지 작업이 한결 쉬워졌겠네요.

다음번에도 좋은 정보로 찾아뵙겠습니다 

감사합니다.