이 강의는 6부로 구성되어 있습니다
1부에서는 좋은 설계의 비결을 배우게 됩니다
2부에서는 프로젝트 설계 실습을 하고
3부에서는 기업 홈페이지를 구축해보며 Webflow를 더 배워 보겠습니다
4부에서는 고객 의뢰를 처음부터 끝까지 진행해 보겠습니다
제가 각 고객 의뢰를 진행하는 것과 동일한 절차로 안내드릴 예정입니다
먼저 wireframing(와이어프레이밍)부터 시작해서, Figma를 사용하여 웹사이트 설계를 하고
Webflow를 사용하여 블로그를 설계 및 구축한 후 공개하여 고객에게 전달하는 과정까지
다뤄 보겠습니다
5부에서는 프리랜싱으로 돈을 버는 비결을 알려 드리고, 6부에서는 Webflow와 설계에 대한
심화 교육을 다루겠습니다
프로모션 영상에서는 Webflow를 먼저 언급했지만, 여기에서는 설계를 먼저 다룰 예정입니다
모든 훌륭한 웹사이트 프로젝트는 설계에서 시작합니다
모든 훌륭한 건물이 건설 이전에 건축 계획부터 시작하는 것과 같은 원리입니다
이 강의에서 Webflow를 다루는 시점이 3부부터이므로
미리 조금 언급을 하고 시작하겠습니다
Webflow를 열어서 잠깐 같이 살펴 보겠습니다
저번 수업 때 이미 Webflow 계정을 만드신 것으로 압니다
아직 계정이 없다면 Webflow.com에서 회원가입을 하시되
구글 크롬이나 사파리 브라우저를 사용하시면 됩니다
Webflow는 이 두 브라우저에서 가장 잘 작동합니다
회원가입을 하시면 이렇게 생긴 화면이 보일 것입니다
대시보드 화면에서 'New site' 버튼을 클릭하고
'Blank site'를 선택하시면 됩니다
플랫폼을 처음 사용하시는 경우에는 이렇게 onboarding(온보딩) 팝업 화면이 뜹니다
굳이 확인하실 필요는 없지만 원하신다면 보셔도 됩니다
이 부분이 작업이 이루어질 부분입니다
웹사이트를 여기에서 구축하게 됩니다
왼쪽에는 Navigator가 있습니다
페이지의 구조와 모든 객체를 표시해 줍니다
지금은 body라는 객체 하나밖에 없습니다
더하기 아이콘을 눌러 새 요소를 추가할 수 있습니다
여기 있는 Container를 중앙의 캔버스로 끌어와 추가하겠습니다
이 안에 제목과 단락을 추가해서
내용을 입력해 보겠습니다
텍스트를 입력하겠습니다
Container를 선택해서 Typography 메뉴 하단의 중앙 정렬을 설정하면 됩니다
그리고 화면 가운데로 텍스트를 옮겨서 Spacing(여백)을 추가해 보겠습니다
Container를 선택한 상태로 여기 있는 padding(패딩)이라는 handle(핸들)을 선택하면 됩니다
미리 보기 모드를 통해 페이지 모습을 실시간으로 확인할 수도 있습니다
Toolbar(툴바) 위의 Code Export에서는 Webflow가 작성한 코드를 확인할 수도
있습니다
HTML에서는 컨테이너, heading(헤딩), paragraph(단락) 등 추가한 객체를 확인할 수 있습니다
CSS에서는 상단 padding(패딩), 중앙 정렬 등 적용된 스타일 변화를 확인할 수 있습니다
이 코드를 내보내서 다른 곳에서 호스팅하는 것도 가능합니다
이 페이지는 Webflow 외부에서도 잘 작동하지만, 그 부분을 강의에서 다루지는 않겠습니다
가장 좋은 방법은 Webflow에 페이지를 게시하는 것입니다
Publish에서 Publish to Selected Domains를 클릭합니다
그러면 링크를 클릭해서 사이트를 열 수 있습니다
처음으로 직접 만들어 본 웹 페이지는 볼품없고 쓸모도 없습니다
Webflow라는 강력한 도구가 있다고 하더라도 웹 디자인에 대한 지식 없이는 모든 웹사이트가 이렇게 볼품없을 것입니다
언제나 디자인 기술이 우선이기 때문입니다
그러므로 Webflow를 보기 이전에 좋은 디자인에 대해 배워본 후에
3부부터는 Webflow를 사용해서 아름다운 웹사이트를 디자인해 보겠습니다