Divi 5 마스터 코스
Part 1: What To Prepare Before Building Your Divi 5 Website
이 시리즈에서는 다음과 같은 내용을 다룹니다(각 편이 게시될 때마다 링크를 추가할 예정입니다):
- Divi 5 웹사이트를 제작하기 전에 준비해야 할 사항 (현재 위치)
- Divi 5 인터페이스의 모든 측면 살펴보기
- 디자인 변수를 활용한 Divi 5 글로벌 디자인 시스템 구축
- 더 빠르고 일관성 있는 웹 디자인을 위한 Divi 5 프리셋 활용법
- Divi 5 홈페이지를 처음부터 만들기
- Divi 5에서 사용자 정의 헤더 및 내비게이션 만들기
- Divi 5에서 맞춤형 푸터 만들기
- Divi 5 테마 빌더를 사용하여 글로벌 웹사이트 템플릿 만들기
- Divi 5 웹사이트의 핵심 내부 페이지 구축하기
- Divi 5에서 Flexbox 마스터하기
- Divi 5에서 CSS 그리드 마스터하기
- Divi 5 웹사이트를 완벽한 반응형으로 만들기
- 대화형 오프캔버스 요소 만들기 (팝업 등)
- Divi 5 루프 빌더 마스터하기
- Divi 5 파워 유저 워크플로
- Divi 5 웹사이트 검토, 다듬기 및 출시
2부: Divi 5 인터페이스의 모든 측면 살펴보기
준비가 끝났으니, 이제 Divi 5 비주얼 빌더를 사용해 볼 차례입니다. Divi 5는 이제 베타 단계를 완전히 벗어나 정식 출시되었으며, 완전히 새롭게 단장된 현대적이고 고성능의 인터페이스를 제공합니다.
3부: 디자인 변수를 활용한 Divi 5 글로벌 디자인 시스템 구축
디자인 변수는 Divi 5 디자인 시스템의 모듈, 프리셋, 템플릿 및 기타 구성 요소에서 참조할 수 있는, 이름이 지정된 재사용 가능한 값입니다. 개별 모듈 내에 일회성 값을 저장하는 대신, 중요한 값을 한 번 정의하여 사이트 전체에서 재사용할 수 있습니다. Divi 5에서는 색상, 글꼴, 숫자, 이미지, 텍스트 문자열 및 링크가 이에 포함됩니다.
4부: 더 빠르고 일관성 있는 웹 디자인을 위한 Divi 5 프리셋 활용법
이제 4부에서는 Divi 5 프리셋을 사용하여 이러한 변수들을 재사용 가능한 디자인 시스템으로 전환해 보겠습니다. 여기서 여러분은 옵션 그룹 프리셋과 요소 프리셋을 만드는 방법, 프리셋 관리자에서 이를 정리하는 방법, 그리고 더 큰 유연성을 위해 중첩 및 스택 프리셋을 사용하는 방법을 배우게 될 것입니다.
5부: Divi 5 홈페이지를 처음부터 만들기
이번 섹션에서는 해당 라이브러리를 활용해 코워킹 스페이스 웹사이트의 홈페이지를 섹션별로 단계적으로 구축해 보겠습니다. 홈페이지는 첫 화면의 헤로 섹션부터 마지막의 FAQ 섹션까지 총 7개의 섹션으로 구성되어 있습니다. 각 섹션은 고유한 구조와 콘텐츠 우선순위, 시각적 역할을 가지고 있습니다. 디자인 작업이 이미 완료되었기 때문에, 이번 구축 과정의 대부분은 반복적인 스타일링 작업보다는 구성 요소들을 조립하는 데 중점을 둘 것입니다.
6부: Divi 5에서 사용자 지정 헤더 및 내비게이션 만들기
이제 6부에서는 Divi 5의 테마 빌더를 사용하여 맞춤형 헤더와 내비게이션을 만들어 모든 페이지의 상단 부분을 구성해 보겠습니다. Flexbox 설정, 프리셋, 변수 및 인터랙션 기능을 활용하여 공지 바, 로고, 메인 내비게이션 메뉴, 소셜 미디어 링크, 그리고 행동 유도(CTA) 버튼이 포함된 반응형 헤더를 제작할 것입니다.
7부: Divi 5에서 사용자 지정 푸터 만들기
이 글을 다 읽을 때쯤이면, 여러분의 코워킹 사이트 상단에는 세 가지 스타일로 구성된 열이 있는 글로벌 푸터가 적용될 것입니다. 이 열들은 브랜드 블록, 주소 및 소셜 미디어 블록, 그리고 포인트 색상 배경을 배경으로 한 연락처 CTA로 이루어져 있습니다. 그 아래에는 현재 연도를 동적으로 불러와 자동으로 업데이트되는 한 줄짜리 저작권 행을 추가하게 됩니다. 이 튜토리얼은 푸터 스타일이 거의 전적으로 3부 의 디자인 변수와 4부.의 요소 프리셋을 사용하여 적용되기 때문에 빠르게 진행할 수 있습니다.
8부: Divi 5의 테마 빌더를 사용하여 글로벌 웹사이트 템플릿 만들기
이제 8부에서는 테마 빌더 를 사용하여 코워킹 웹사이트의 나머지 부분도 하나의 통일된 브랜드처럼 보이도록 만들 것입니다. 템플릿 기반 페이지를 하나하나 수동으로 디자인하는 대신, 게시물, 아카이브, 검색 결과 및 오류 페이지에 자동으로 적용되는 재사용 가능한 레이아웃을 만들 것입니다.
9부: Divi 5 웹사이트의 핵심 내부 페이지 구축하기
5부에서는 코워킹 스페이스 웹사이트의 홈페이지를 제작했습니다. 그 후, 6부 와 7부에서는 테마 빌더를 사용하여 전역 헤더와 푸터를 추가했습니다. 8부에서는 게시물, 아카이브, 검색 결과 및 404 페이지용 글로벌 템플릿을 만들었습니다.
이제 사이트의 핵심 내부 페이지를 제작할 준비가 되었습니다. 이 코워킹 웹사이트의 경우, ‘연락처’ 페이지와 ‘이벤트’ 페이지를 만드는 것을 의미합니다.
10부: Divi 5에서 Flexbox 활용하기
Divi 5에서는 Flexbox 제어 기능을 비주얼 빌더에 직접 통합하여, 별도의 CSS를 작성하지 않고도 간격, 정렬, 줄 바꿈 및 요소 배치를 관리할 수 있습니다. 이 글에서는 Divi 5에서 Flexbox가 어떻게 작동하는지, 주요 레이아웃 설정들의 기능은 무엇인지, 그리고 이러한 설정을 활용해 간단한 반응형 레이아웃을 구축하는 방법을 알아보겠습니다.
Part 11: Mastering CSS Grid In Divi 5
CSS 그리드를 사용하면 2차원 레이아웃을 정밀하게 제어할 수 있습니다. 항목을 행이나 열로만 배열하는 대신, 행과 열을 동시에 정의할 수 있습니다. 그런 다음 해당 구조 내에 자식 요소를 배치할 수 있습니다. Divi 5에서는 섹션(Sections), 행(Rows), 열(Columns), 그룹(Groups) 및 지원되는 중첩 모듈 컨테이너와 같은 레이아웃 지원 컨테이너에서 그리드를 사용할 수 있습니다. 컨테이너를 그리드로 설정하면 설정 패널에서 트랙 수, 간격, 정렬, 항목 배치, 규칙 기반 오프셋과 같은 주요 그리드 설정을 제어할 수 있습니다.
12부: Divi 5 웹사이트를 완벽하게 반응형으로 만들기
반응형 디자인은 개발 과정 전반에 걸쳐 고려되었지만, 이번 최종 점검 단계에서 모든 요소를 세밀하게 다듬을 것입니다. 목표는 스마트폰, 태블릿, 데스크톱, 와이드 스크린 및 그 사이의 모든 브레이크포인트에서 사이트가 완성도 높게 느껴지도록 하는 것입니다. 이번 단계에서는 사이트 전체를 점검하고, 주요 레이아웃을 미세 조정하며, Divi 5의 반응형 도구를 활용하고, 디자인 변수 및 프리셋을 통해 전체적인 일관성을 유지할 것입니다. 이 과정을 마치면 사이트는 출시 준비가 훨씬 더 완료된 상태가 될 것입니다.
Part 16: Auditing, Polishing, And Launching Your Divi 5 Website
디자인 변수를 생성하고, 프리셋을 구축하며, 테마 빌더 템플릿을 만들고, 플렉스박스(Flexbox)와 CSS 그리드를 숙달하고, 루프 빌더를 활용해 보았으며, 파워 유저를 위한 더 효율적인 워크플로우를 익혔습니다. 이제 한 걸음 물러서서 모든 것을 비판적인 시각으로 검토하고, 세부 사항을 다듬으며, 사이트 출시를 준비할 때입니다. 이 글에서는 출시 전 전체 점검 과정을 단계별로 살펴보고, 시각적 및 기능적 세부 사항을 확인하며, 성능 설정을 검토하고, 접근성 및 SEO 기본 사항을 강화하며, 다양한 기기와 브라우저에서 테스트를 수행한 후, 최종 출시 단계를 마무리할 것입니다.