8일 차에는 Webflow CMS 페이지의 반응형 디자인을 만듭니다. 홈페이지의 반응형 디자인을 만들었을 때와 큰 흐름은 같으니 술술 끝내 버립시다.
기기 크기별로 해설합니다. 데스크톱 크기의 표시가 전부 깔끔한지 확인하고, 이상한 곳이 없으면 태블릿 크기부터 시작합시다.
2023년 갱신ー CMS로 무엇을 할 수 있는지 해설한 글도 있습니다.
>Webflow CMS 완전 이해 가이드 2023
태블릿
각 크기에서 조정하면서 디자인 면에서도 조금 바꿔 갑니다. 곳곳에서 데스크톱으로 돌아가 사이트 전체를 변경합니다. 지금 어느 크기를 편집 중인지 잘 확인합시다. 또 크기 조정은 큰 기기부터 순서대로 한다는 것을 잊지 마세요.
Header와 메인 이미지
- 메인 이미지와 제목을 가깝게
・콤보 클래스 “secondary”를 쓴 Header 선택
・Margin bottom: 30px
- CMS 메인 이미지 선택
・Height: 300px
그리드 조정
아래로 스크롤하면 그리드 2개의 좌우 간격이 불일치한 곳을 발견합니다. 사진 쪽에 간격을 맞춥시다. 이 불일치는 전체에서 고치고 싶으므로 한번 데스크톱(브레이크포인트)으로 돌아갑시다.
- 프로젝트 설명문의 그리드 선택
・간격을 30px로 통일
다시 태블릿 크기로 돌아가 작업을 재개합니다. 프로젝트 설명문은 글자량이 많은 데 비해 왼쪽 블록은 휑합니다. 그리드를 편집해 전체를 왼쪽으로 당깁니다.
- 그리드 선택
- 1FR:1.5FR로 설정
CMS Link 조정
먼저 CMS Link의 텍스트를 조정합시다. 지난번 제작 때 배경색 관계로 글자를 검정으로 설정했습니다. 그러나 사이트 전체의 글자색이 흰색이므로 여기도 흰 글자를 쓰고 싶습니다. 그래서 이번엔 “텍스트 섀도”를 사용해 글자를 읽기 좋게 합니다. 데스크톱으로 돌아가 작업합시다.
- 글자색을 흰색으로 변경
- 텍스트 섀도 설정
※텍스트 설정의 “More type option”에서 설정
태블릿 크기로 돌아가 디자인을 확인하면 2행으로 줄바꿈된 영향으로 크기가 제각각입니다. 조정합시다.
- 이미지·텍스트가 든 Link Block 선택
- Height: 100%
- 레이아웃에서 Flex box 설정
- 텍스트가 든 Div 블록 선택
- 아래 이미지를 참고해 설정
이것으로 모든 높이를 맞출 수 있었습니다. 이미지가 너무 크니 조정합시다.
- CMS Link IMG 선택
- Height: 200px
아래로 스크롤해 문의 폼과 푸터를 봐도 특별히 바꿀 것이 없어 보이므로 태블릿 크기는 여기서 종료입니다.
스마트폰 가로(랜드스케이프)
Header와 메인 이미지
- 콤보 클래스 “secondary”를 쓴 Header 선택 / Margin bottom: 15px
- CMS 메인 이미지 선택 / Height: 150px
각 그리드 조정
프로젝트 설명문
랜드스케이프에서는 가로폭이 상당히 축소되므로 그리드를 세로 배열로 합니다. 여분의 Margin·Padding도 조정합시다.
- 그리드를 세로 1열로 변경
- Project info 선택 / Margin bottom: 15px
- Project Label 선택 / Margin bottom: 5px
CMS image
- CMS image 선택 / Height: 150px
- 그리드 선택 / 간격을 15px로 조정
CMS Link 조정
- 그리드 선택 / 세로 1열이 되도록 변경
- CMS Link IMG 선택 / Height: 150px
- 텍스트가 든 Div 블록 선택 / 클래스명 “Other project Label” / Padding 전방위 15px
마지막으로 전체를 확인하니 로고가 너무 가운데로 쏠린 느낌입니다. 다른 요소와 왼쪽 끝을 맞춥시다.
- Brand logo link 선택 / Padding left: 0px
스마트폰 세로(포트레이트)
사실 포트레이트에서는 큰 변경이 필요 없습니다. H2의 글자 크기를 조금 바꾸고 CMS 이미지의 높이를 조정하면 끝입니다.
- CMS Link IMG 선택 / Height: 120px
- “Other project label”의 텍스트를 작게
・Header 쪽은 18px
・Info 쪽은 12px, 행간(Line height)은 1(단위는 “−” 하이픈 선택)
데스크톱보다 큰 화면
전체적으로 작아 보이므로 요소를 크게 합니다.
프로젝트 설명문의 그리드를 0.25FR/1FR로 변경
CMS Image의 Height: 500px
정리
CMS 페이지의 반응형 디자인을 만들었습니다. Webflow에서는 반응형을 보면서 조정할 수 있어 직감의 “이쪽이 더 예쁘네”라는 느낌만으로 만들 수 있습니다.
“아직 시간이 걸린다”는 분도 꾸준히 조금씩 나아가면 자연히 작업 속도가 올라갑니다. 30분에 작업이 안 끝나도 좌절하지 않고 매일 임하는 습관이 중요합니다.
다음은 컨택트 페이지를 만듭니다. 이미 문의 폼을 만들었으니 특별히 힘든 작업은 없습니다.
자주 묻는 질문
Webflow의 반응형 디자인은 어떤 순서로 조정해야 하나요?
크기 조정은 큰 기기부터 순서대로 합니다. 데스크톱 크기의 표시가 깔끔한지 확인한 뒤 태블릿→스마트폰 가로→스마트폰 세로로 진행하고, 지금 어느 크기를 편집 중인지 잘 확인합시다.
배경색 때문에 글자가 잘 안 보일 때는?
텍스트 섀도를 사용해 글자를 읽기 좋게 합니다. 텍스트 설정의 “More type option”에서 설정할 수 있습니다.
스마트폰 세로에서도 큰 조정이 필요한가요?
사실 포트레이트에서는 변경이 별로 필요 없습니다. H2의 글자 크기를 조금 바꾸고 CMS 이미지의 높이를 조정하면 끝입니다.
줄바꿈으로 높이가 제각각이 된 CMS Link는 어떻게 맞추나요?
이미지와 텍스트가 든 Link Block을 Height 100%로 하고 레이아웃에서 Flex box를 설정한 뒤, 텍스트가 든 Div 블록의 Sizing으로 높이를 조정합니다. 이것으로 모든 높이를 맞출 수 있습니다.
