직관만으로 OK! Webflow 반응형 디자인 만드는 법【6days】

반응형 디자인

반응형 디자인이란 PC나 태블릿, 스마트폰 등 화면 크기에 맞춘 웹사이트를 디자인하는 것입니다. 다양한 기기 대응에 필요하며 SEO 최적화에서도 상당히 중요합니다.

스마트폰이 주류가 된 현대에는 스마트폰 크기의 웹사이트를 만드는 것이 필수 불가결이 되었습니다. PC마다 표시 크기도 달라, 다양한 기기에 대응한 웹사이트, 즉 반응형 디자인이 요구됩니다. 지금까지 만든 홈페이지를 기반으로 태블릿판·스마트폰판 반응형 디자인을 만들어 갑시다.

반응형 디자인이란? PC나 태블릿, 스마트폰 등 화면 크기에 맞춘 웹사이트를 디자인하는 것. SEO 최적화에서도 상당히 중요.

“☆”브레이크포인트란

Webflow에서 반응형 디자인을 만들려면 먼저 브레이크포인트를 이해해야 합니다.

브레이크포인트란 전체 크기에 반영되는 효과를 지정할 수 있는 곳. 웹사이트 제작은 반드시 브레이크포인트부터 합시다.

또한 브레이크포인트에 가까운 크기일수록 효과의 우선순위가 높습니다. 즉 태블릿 크기에서 한 변경은 가로·세로 화면의 스마트폰에도 적용되고, 가로 화면에서 한 변경은 세로 화면에 계승됩니다. 가장 작은 세로 화면 스마트폰 크기에서 한 변경은 다른 곳에 계승되지 않습니다. 브레이크포인트보다 큰 크기는 이 반대입니다.

1. 데스크톱

제작 화면 중앙 위에 표시된 기기 아이콘에서 크기별 웹사이트를 만들 수 있습니다. “☆” 마크가 붙은 브레이크포인트를 기준으로 다른 크기의 사이트가 자동 생성되므로 그것들을 보기 좋게 조정해 갑시다.

먼저 크기를 바꿔 가며 사이트가 어떻게 변하는지 확인합니다.

• 왼쪽 위 “눈” 마크 클릭→프리뷰 모드로 이전
• 화면 끝을 더블 클릭 앤 드래그해 화면 축소

지금까지 만든 Container에는 Max Width:1200px을 지정했습니다. 그래서 표시 기기가 1200px 이하가 되면 콘텐츠가 가장자리에 붙어 읽기 어렵습니다. 여백을 만들어 읽기 쉬운 디자인으로 바꿉시다.

• Container 선택
• Padding: 30px

2. 태블릿

태블릿 크기에서는 디자인 면에서 큰 변경은 필요 없어 보입니다. 다만 전체적으로 여백이 커 보이므로 Section에 지정된 상하 margin을 축소합시다.

• Section 선택
• margin 상하: 30px

메뉴 안 변경

내비바에 주목. 기기 크기가 작아지면서 내비바의 링크들은 메뉴 안에 들어갑니다. 프리뷰 모드로 메뉴를 선택해 봅시다.

열어 보면 배경색·글자가 기본값 그대로입니다. 태블릿 크기에서 바꿔 두면 작은 크기에도 효과를 줄 수 있으므로 여기서 변경합니다.
※스마트폰 크기에서 변경하면 태블릿에는 영향이 없습니다.

변경할 때는 어느 크기를 선택 중인지 주의합시다.

• 태블릿 크기를 선택 중인지 확인
• 내비바 심벌을 더블 클릭. Menu Button 선택
• 화면 오른쪽 설정에서 “Menu : Show” 선택

메뉴를 “Show”로 설정하면 메뉴가 항상 표시되어 메뉴 안을 편집할 수 있게 됩니다. 이 상태로 메뉴 안 콘텐츠를 클릭하면 클래스 옆에 초록색으로 “Open”이 표시됩니다. “메뉴가 열려 있을 때의 설정”이라는 의미입니다.

• 초록 태그 유무 확인
• Background: Black

내비 링크 선택

• Padding 상하: 10px으로 변경
• 배경: 검정

컨택트 버튼 선택(콤보 클래스)

• margin 상하: 0으로 설정
• 배경: 검정
  ※콤보 클래스이므로 배경 검정을 두 번 지정합니다.
• Radius: 0px

3. 스마트폰 가로·세로(랜드스케이프·포트레이트)

가로를 “랜드스케이프”, 세로를 “포트레이트”라고 부릅니다. landscape는 풍경(화)이라는 뜻으로 풍경화는 캔버스를 가로로 놓고 그리는 것에서, portrait는 초상(화)이라는 뜻으로 초상화는 캔버스를 세로로 쓰는 것에서 유래했습니다.

스마트폰 가로(랜드스케이프)

랜드스케이프에서는 PC보다 화면이 상당히 작아집니다. 본격적으로 크기를 바꿔 갑시다.

• H1 선택
• 폰트 크기: 30px
• Height: 1.1−

• H1 아래 문장 선택
• margin 아래: 30px

사진과 문장을 가깝게 했다면 한번 태블릿판으로 돌아가 랜드스케이프에서 변경한 margin이 영향을 주지 않았는지 확인합시다.

랜드스케이프로 돌아가 다른 요소도 변경합니다.

• Section: margin 상하 15px
• CMS 상부 / H2 선택: font Size 22px
• CMS 안 / H3 선택: font Size 18px
• 핑크 태그 BODY 선택
• 폰트 크기: 13px

CMS 콘텐츠의 사진 표시 수정

CMS 사진이 맞는 크기로 표시되지 않으므로 개선해야 합니다. 이를 위해 한번 베이스 브레이크포인트의 PC 크기로 돌아갑시다.

• CMS 이미지 선택
• Width·Height: 100%
• Fit: cover

이미지 크기를 100%로 하면 크기가 유연하게 변하는 이미지가 됩니다. Fit: cover를 지정하면 이미지의 가로세로비를 유지할 수 있습니다. 그러나 이대로는 CMS 콘텐츠마다 크기가 달라 아름답지 않으므로 CMS 안의 DIV 블록(Project detail)을 선택해 크기를 지정합니다.

• Project detail 선택
• Min Height: 500px

여기서는 미니멈으로 지정합니다. 미니멈 지정은 말 그대로 “지정 수치보다 작아지지 않는 최솟값 설정”입니다. 미니멈으로 지정하면 글자가 콘텐츠에서 넘치지 않고 유연하게 신축해 줍니다. 반응형 디자인에서는 가능한 한 유연하게 크기가 변하는 방법으로 수치를 지정하는 것을 추천합니다.

• 태블릿 크기 선택
• 방금 지정한 미니멈을 300px으로 변경

스마트폰 세로(포트레이트)

가장 작은 포트레이트. 스마트폰 세로는 사용자가 가장 많은 크기입니다. 확인하면 상당히 타이트하게 표시되어 가로 배열로는 대응할 수 없는 부분도 있습니다. 곳곳에서 조정합시다.

• CMS 그리드 선택
• 이미지 열을 우클릭해 삭제
• 콘텐츠 아래 표시된 이미지 선택
• Min Height: 200px

• Project detail 선택
• Min Height: Auto

• Bottom text 선택
• margin top: Auto→15px으로 변경

문의 폼을 세로 배열로

• 부모 요소(그 요소를 감싸는 요소) 선택
• 그리드는 위 방법으로 세로 배열
• DIV 블록은 레이아웃에서 Flex box를 사용해 세로 배열

푸터를 세로 배열로

푸터에서도 그리드를 선택해 한 열로 만듭니다. 텍스트 폭도 조정합시다.

• 푸터의 Paragraph 선택
• PC 크기(브레이크포인트)로 돌아간다
• Max Width: 50%→500px

포트레이트 전체를 보고 마지막으로 조금 조정합니다. 주로 Padding과 margin을 축소합니다.

• Container 지정
• 좌우 Padding: 10px

• Collection item 선택
• 상하 margin: 10px

전체를 축소해 확인하면 아래 사진처럼 내비바의 로고와 메뉴가 줄바꿈되어 버린 것을 볼 수 있습니다. Width를 지정해 이 문제를 해소합시다.

• Logo에 Width: 150px

이것으로 포트레이트 조정은 완료입니다.

4. 데스크톱보다 큰 화면

큰 화면은 한번 만들면 삭제할 수 없습니다. 큰 화면에서의 표시도 확인하기 위해 만들어 봅시다. 아이콘 맨 끝 “︙”을 클릭합니다.

• 1920px 생성

• Container 선택 / Max Width: 1600px

• H1 선택 / font size: 56px, Height: 1.1-

• H2 선택(CMS, 문의 폼) / font size: 40px, Height: 1.1-

• CMS 상부 paragraph 선택 / margin bottom: 30px

정리

이번에는 반응형 디자인 제작을 했습니다. 제작 시 주의점은 새 요소를 추가할 때 반드시 “베이스 브레이크포인트에서 추가한다”는 것. 불필요한 수고를 줄이기 위해서도 조심합시다. 1회부터 이번까지의 스텝으로 메인 페이지 제작의 80%가 완료되었습니다.

다음부터 2회에 걸쳐 프로젝트 페이지, 즉 클릭해서 이동한 곳을 만듭니다. Webflow 조작에 어느 정도 익숙해졌나요? 즐기면서 배워 갑시다!