애플이 새로 출시할 iMac에 플로피 디스크 드라이브를 장착하지 않기로 하면서
스티브 잡스는 하키 스타 웨인 그레츠키의 말을 인용했습니다- "퍽이 있던 곳이 아니라, 퍽이 있을 곳으로 움직여라"
새로운 도구를 배운다면 앞으로 발전할 기술에 집중하는 것이 좋은데, 현재 업계 표준 수준을 다 배우는 시점에는
이미 그 기술이 죽은 시점일 가능성이 크기 때문입니다
이 강의에서는 Photoshop이나 WordPress(워드프레스)와 같은 업계 표준을 다루지 않습니다
대신 미래의 도구인 Figma와 Webflow를 다룰 것입니다
대부분의 사람들은 변화를 꺼리기 때문에 세상이 이 도구를 따라오는 것은 시간이 조금 걸릴 것입니다
하지만 언젠가는 반드시 따라오게 되어 있습니다
현재 어떤 컴퓨터도 플로피 디스크를 사용하지 않는 것과 같습니다
이 영상에서는 Webflow를 소개하면서 몇 가지 질문에 답을 해 보겠습니다
Webflow란 무엇입니까?
Webflow는 다른 도구들과 달리 노코드, 즉 코드 없이 웹사이트를 구축하는 도구입니다
이 도구를 사용하여 전문 웹 디자이너의 수준으로 반응형 웹사이트를 설계 및 구축할 수 있습니다
이 모든 것을 코드 작성 없이 할 수 있습니다
코드 부분은 Webflow가 대신 써 주기 때문입니다
Webflow가 깔끔한 semantic(시맨틱) 코드를 작성해 주므로 사용자는 시각 요소만을 사용해 설계하면 됩니다
이 완성된 코드를 내보내거나 보관하고 Webflow에서 웹사이트를 호스팅할 수 있습니다
Webflow는 웹 디자이너 역할에 더해 WordPress와 같은 CMS 플랫폼이기도 합니다
즉 블로그나 전자 상거래 웹사이트 같은 본격적인 dynamic(동적) 웹사이트를 만들 수 있다는 의미입니다
Webflow의 큰 특징 중 하나는 바로
다른 플랫폼에는 없는 풍부한 애니메이션과 상호작용을 구축할 수 있다는 점입니다
코딩은 JavaScript(자바스크립트)에 대한 고급 지식을 요구하지만, Webflow에서는 코딩 없이도
시각 요소를 사용해 모든 작업을 할 수 있습니다
Webflow 학습은 새로운 초능력을 배우는 것과 같아서
마치 산업을 변화시키는 혁신적인 도구와 같습니다
비유하자면 웹 디자인의 테슬라와 같은 존재로, X(전 Twitter)에는 이미 Webflow의 팬이 가득합니다
오랜 경험을 가진 개발자부터 Dropbox(드롭박스)의 디자인 디렉터까지 팬층이 매우 다양합니다
Webflow로 구축한 웹사이트의 사례를 보여 드리겠습니다
그렇게 멀리 가지 않아도 바로 찾을 수 있습니다
Webflow 그 자체가 Webflow를 사용해 구축한 웹사이트로
일반적인 웹사이트와는 다르게 비전통적인 레이아웃과 복합 상호작용 및 애니메이션으로 가득합니다
도구로서의 Webflow의 힘을 보여 주는 좋은 예입니다
또한, 다른 Webflow 디자이너가 게시한 프로젝트를 둘러볼 수 있는 공개 페이지도 있습니다
몇 가지 예만 들어도 Webflow를 통해 이룰 수 있는 가능성이 얼마나 무궁무진한지
확인할 수 있습니다
하지만 이것이 한계가 없는 도구는 아닙니다
일단 Webflow로 웹 애플리케이션을 만들 수는 없습니다
적어도 지금은 그렇습니다
웹 애플리케이션의 예시로는 Airbnb, 페이스북, Dropbox, YouTube 등이 있는데
이는 사용자 생성 콘텐츠, 즉 사용자가 로그인해서 콘텐츠를 만들어 추가할 수 있는 모든 애플리케이션을
칭합니다
이것은 일반 기업 웹사이트보다 수백 배는 더 복잡하며, 웹 디자인의 영역이라기보다는
소프트웨어 및 웹 개발의 영역에 속합니다
물론 웹사이트의 프론트엔드에 속한 모든 부분은 Webflow를 사용해 만들 수 있습니다
예를 들어 Webflow로 설계 및 개발을 완료하여 HTML, CSS, JavaScript(자바스크립트) 등 특정 형식의 코드를 내보내면
이 프론트엔드 코드를 개발자에게 전달하여 웹 애플리케이션으로 연결하도록 안내해 줄 수 있습니다
이 강의에서 그 부분들을 다루지는 않을 것입니다
이 강의에서는 대부분의 웹에서 볼 수 있는 일반적인 웹사이트의 설계와 구축을 다루겠습니다
Webflow에서 구축 가능한 또다른 유형의 웹사이트는 전자 상거래 사이트입니다
Webflow의 최신 버전에 있는 내용이지만, 이 강의에서는 다루지 않겠습니다
전자 상거래 사이트에 대한 수요가 일반적인 웹사이트의 수요보다 훨씬 적기 때문에
먼저 일반적인 웹 디자인에 대한 작업 경험을 충분히 쌓으신 후에
전자 상거래 사이트의 웹 디자인과 웹 개발로 넘어가시기를 권해 드립니다
단순하고 직관적인 일반 웹사이트보다 전자 상거래 웹사이트 개발이 훨씬 더 복잡하므로
더 복잡한 작업에 먼저 뛰어드는 것은 무모한 일이기 때문입니다
다음으로는 Webflow에 대한 실질적 수요가 어느 정도 있는지에 대한 질문입니다
고객들이 WordPress(워드프레스), Drupal(드루팔) 등의 특정 플랫폼을 전문으로 하는 웹 디자이너를 요구하기도 하므로
타당한 질문입니다
제 답은 '수요가 있다'입니다
다른 플랫폼과 마찬가지로 Webflow 디자이너에 대한 수요 또한 분명히 있습니다
비록 WordPress(워드프레스)에 대한 수요만큼 크지는 않더라도, 큰 문제가 되지 않는 이유는
웹사이트와 웹 디자이너에 대한 수요 대부분은 플랫폼을 특정하지 않기 때문입니다
대부분의 고객은 어떤 플랫폼으로 웹사이트를 구축하는지 크게 신경 쓰지 않습니다
만약 고객이 여러분을 웹 디자이너로서 신뢰한다면, 여러분의 플랫폼에 대한 선호와 판단 또한 신뢰할 것입니다
물론 왜 Webflow를 사용해서 작업을 해야 하는지 설명을 해야 할 때도 있습니다
그러나 Webflow의 기능 하나만 제시해도 고객을 설득하기에는
충분할 것입니다
고객은 웹사이트를 최신 상태로 유지해야 하는데
즉 콘텐츠를 생성하거나 페이지 내용을 최신 상태로 유지해야 하고
새로운 블로그 게시물 등을 생성해야 합니다
WordPress(워드프레스)에서 콘텐츠를 최신 상태로 유지하기 위해서는 굉장히 복잡하고 투박한데다 사용자 친화적 설계와는 거리가 먼
이렇게 생긴 관리 패널을 사용해야 합니다
고객의 구미를 당기게 하는 방법은 아닙니다
너무 복잡해서 겁을 주는 모습을 하고 있습니다
반면에 Webflow에서는 관리 패널이나 기이한 텍스트 편집기를 사용하지 않고도 고객이 직접 콘텐츠를 추가할 수 있습니다
눈에 보이는 대로 설계를 할 수 있는 것입니다
즉 사진을 변경하고 텍스트를 수정하면서 웹사이트를 망칠까봐 걱정하지 않아도 됩니다
Webflow를 사용하면 고객에게 더 많은 이점이 있을 수 있습니다
이 부분은 강의에서 프리랜싱에 대해 다룰 때 더 가르쳐 드리겠습니다
Webflow 학습을 시작하자마자 바로 웹사이트 구축 작업을 하기는 어렵습니다
SquareSpace(스퀘어스페이스)만큼 직관적인 도구는 아니기 때문입니다
Webflow는 일반 웹 디자이너와 개발자가 사용하는 일반적인 코드 구조를 기반으로 하기 때문에
학습 곡선이 분명 존재합니다
예를 들어 Webflow에 HTML 요소를 추가하고 CSS 클래스를 사용하여 스타일을 지정한다고 하면
웹사이트 코딩 때 하는 작업과 유사한 작업입니다
HTML과 CSS에 경험이 있다면 매우 유용할 것입니다
물론 경험이 없더라도 걱정하지 않으셔도 됩니다
사전 경험이 전혀 필요하지 않기도 하고
제가 강의를 통해 모두 가르쳐 드리기 때문입니다
이 강의를 마치시는 시점에는 Webflow의 전문가가 되어
바로 웹사이트 제작 의뢰를 맡을 수 있게 될 것입니다
Webflow는 무료이나 웹사이트를 공개하기 위해서는 호스팅 비용을 지불해야 합니다
금액은 월 15달러입니다
그러나 호스팅 비용은 모든 웹사이트 소유자가 지불해야 하는 것이므로 무료 플랫폼이더라도 예외는 없습니다
WordPress(워드프레스)도 동일합니다
그리고 여러분은 이 부분에 대해 신경 쓰지 않으셔도 됩니다
여러분이 지불하는 내용이 아니기 때문입니다
호스팅 비용은 고객이 지불하는 것입니다
결론적으로 Webflow는 저를 포함한 수많은 사람의 커리어를 바꾸어 주었습니다
여러분도 그렇게 될 것입니다