코드 없는 웹 디자인을 위한 Webflow의 이점 – 사례 연구

디자이너-개발자 협업의 험난한 여정을 원활하게 하기 위해 수많은 디자인 도구 추가 기능이 고안되었습니다. 그러나 일반적인 웹 디자인 워크플로는 계속해서 비효율성과 창의성을 저해합니다. 코드가 없는 새로운 세대의 시각적 웹 디자인 도구는 디자이너가 기존 웹 개발의 지루함과 창의적인 족쇄에서 벗어날 수 있도록 약속합니다.

많은 노코드 웹 개발 플랫폼이 최근 하늘에서 온 만나처럼 디자인 환경에 상륙했습니다. "코드 장벽을 깨고" 열망하는 디자이너는 마침내 유토피아적인 코드 없는 미래 의 현실을 인식할 수 있습니다. 별이 일치하면 세부 사양과 함께 프론트 엔드 개발자에게 디자인을 넘겨야 할 필요가 없어집니다. 디자이너는 아트보드에서 요소를 시각적으로 자유롭게 정렬하고 안도의 한숨을 내쉬며 "게시"를 클릭할 수 있습니다.

코드 디자인 도구가 등장하지 않기 전에 디자이너는 모든 것을 구현하기 위해 프론트 엔드 개발자에 의존해야 했습니다. 웹 사이트의 텍스트를 다른 글꼴 크기로 변경하는 데 며칠이 걸릴 수 있습니다. 작은 마케팅 웹사이트나 단순한 랜딩 페이지의 경우에도 디자이너는 디자인을 넘겨주고, 편히 앉아서 손가락을 꼬고 모든 것이 픽셀 단위로 완벽하게 돌아오기를 기도했습니다. 그 과정은 마치 페인트가 마르는 것을 보는 것과 같았습니다.

기회를 감지한 "코드 없음" 웹사이트 빌더는 이제 어디에나 있습니다. 일부는 실험적이며 일부는 강력하고 유능합니다. 그러나 많은 사람들이 무한한 창의적 제어를 제공하는 데 있어 여전히 미달하고 있습니다. 거의 모두 중소기업을 대상으로 하는 유연하지 않은 템플릿 기반 플랫폼입니다.

대부분의 전문 디자이너는 코드를 건드리지 않고 절대적인 크리에이티브 제어를 통해 반응형 사이트를 빠르게 디자인하고 구축할 수 있는 기능을 갈망해 왔습니다. 코드 없는 패권을 위한 전쟁터가 이제 Editor X, Bubble, Ceros 및 Webflow와 같은 소수의 진지한 경쟁자들로 가득 차 있기 때문에 그 날이 빠르게 다가오고 있습니다.

Webflow 는 2013년에 경쟁에 뛰어 들었고 수년에 걸쳐 성숙한 제품으로 진화했습니다. Y Combinator의 스타트업 액셀러레이터 졸업생으로 시작된 Webflow는 코드 없는 웹 디자인 환경을 파괴하고 "모든 사람이 문서를 만드는 것처럼 강력하고 유연한 웹사이트를 쉽게 만들 수 있는" 세상을 꿈꿉니다.

이해 관계자로부터 동의를 얻는 방법

디자이너는 이러한 플랫폼의 기능을 발견하면서 곧 모든 규모의 회사가 코드 없는 웹 디자인 도구를 채택함으로써 이점을 얻을 수 있음을 깨닫게 됩니다. 특히 리소스가 제한된 소규모 팀의 경우 이점이 중요할 수 있습니다. 그러나 새로운 웹 디자인 도구에 열광하는 것만으로는 충분하지 않습니다. 이해 관계자가 전환을 승인하도록 설득해야 합니다.

디자이너는 어떻게 구현합니까? 저는 핵심 제품에 집중하는 단일 개발자와 함께 B2B 스타트업에서 제품 디자이너였습니다. 회사는 마케팅 웹사이트가 필요했지만 개발자 리소스가 없었습니다. 우리는 수수께끼에 직면했습니다. 개발자 없이 어떻게 웹사이트를 구축할 수 있습니까? Webflow를 탐색하고 능숙해지면서 혼자서도 할 수 있다는 것을 깨달았습니다.

나는 월요일에 이해 관계자 회의를 위해 Webflow에서 디자인을 구현하는 주말을 보냈습니다. 회의 중에 Webflows의 장점을 설명하고 디자인에서 코드로 이동하고 반응형 디자인을 만들고 빠르게 무언가를 변경하는 것이 얼마나 쉬운지 시연했습니다. 웹 페이지를 디자인하고 시작하는 데 며칠 밖에 걸리지 않습니다.

나는 또한 Webflow의 CMS 기능과 SEO가 통합될 수 있는 용이성을 시연했습니다. 다음으로, 개발자를 참여시키는 데 드는 추가 비용 없이 모든 것을 구현하는 단일 디자이너 의 비용 절감에 대해 설명했습니다. 그들은 팔렸다.

이것은 또한 완전한 창의적 통제력을 회복할 수 있는 기회이기도 했습니다. 저는 더 이상 Sketch에서 모형을 만들고 개발자에게 디자인을 전달하는 디자이너가 아니었습니다. 이 새로운 패러다임은 저를 웹 개발 강자로 변화시켰습니다. 저는 디자인, 구축, 테스트, 조정, SEO 통합, A/B 테스트 및 사이트 게시를 할 수 있었습니다. 그것은 힘이 되었고 회사에서 더 강한 목소리를 냈습니다.

Webflow 디자인 사례 연구

업베스트에서는 회사의 핵심 제품 디자인과 함께 비주얼 브랜딩도 담당했습니다. 여기에는 빈번한 업데이트를 수용해야 하는 회사의 반응형 웹 사이트가 포함되었습니다. 업베스트는 초기 단계의 스타트업이었고 제품은 여전히 ​​진화하고 있었습니다. 따라서 다양한 마케팅 페이지를 제작하고 A/B 테스트해야 했습니다. 또한 CMS 시스템을 사용하여 블로그 기사를 게시하고 다양한 판매 프로모션을 위한 전용 랜딩 페이지를 시작해야 했습니다.

게다가 복잡한 문제는 회사가 초창기에 몇 가지 중심축을 만들었다는 것입니다. API 판매에서 블록체인 지갑 구축, 부동산 회사에 "자산 토큰화" 제공에 이르기까지 다양했습니다. 결과적으로 우리가 앞으로 나아가면서 Webflow에서 다양한 랜딩 페이지를 디자인해야 했습니다.

클릭하면 전체 크기의 이미지를 볼 수 있습니다.

Webflow를 시작하는 것은 비교적 간단했습니다. 튜토리얼은 Webflow University를 통해 제공됩니다. 며칠 만에 마케팅 웹사이트의 첫 번째 버전을 디자인하고 구축했습니다. 끌어서 놓기 인터페이스는 사용이 간편했으며 클릭 한 번으로 다양한 화면 크기에 대한 디자인을 검사할 수 있었습니다. Webflow로 작업하면서 반응형 레이아웃을 위해 상자 모델로 페이지를 올바르게 조합하는 방법에 대해서도 많은 것을 배웠습니다.

모든 사람들이 웹사이트의 시각적 브랜딩에 동의한 후 Webflow에서 우리 모두가 따를 수 있는 스타일 가이드를 만들었습니다. 또한 후속 페이지 빌드를 위해 다양한 클래스와 재사용 가능한 기호를 설정했습니다. Webflow의 심볼은 Sketch의 심볼 및 Adobe XD의 마스터 구성 요소와 유사한 방식으로 작동합니다. 심볼이 업데이트되면 프로젝트에 있는 해당 구성요소의 다른 모든 인스턴스가 업데이트를 반영합니다.

첫 번째 웹사이트를 런칭한 후 Webflow에 점점 익숙해졌습니다. 다양한 메트릭을 추적하기 위해 Google 태그 관리자 및 Hotjar와 같은 측정 도구를 설치하는 방법을 배웠습니다. 다양한 마케팅 자산을 수집하는 속도도 향상되었습니다. 회사는 제품이 발전함에 따라 다양한 레이아웃과 콘텐츠를 테스트해야 했으며 Webflow를 사용하면 개발자에게 의존하지 않고도 디자인을 변경하고 신속하게 출시할 수 있습니다.

클릭하면 전체 크기의 이미지를 볼 수 있습니다.

Webflow는 사이트를 미리 볼 수 있는 스테이징 링크를 제공하므로 이해 관계자는 디자인의 발전을 확인하고 즉각적인 피드백을 제공할 수 있습니다. 조정이 공식화되면 Sketch와 같은 디자인 도구로 돌아가는 대신 Webflow에서 직접 변경하고 사이트를 스테이징에 게시할 수 있습니다. 출력은 모든 코드로 즉시 스테이징 사이트에 게시되어 다른 검토를 위해 준비됩니다. 모든 것이 순조로웠을 때 나는 사이트를 회사 도메인에 게시했습니다.

다른 많은 디자이너의 경우와 마찬가지로 내가 선호하는 디자인 도구는 Sketch입니다. 준비가 되면 검토를 위해 다양한 이해 관계자와 디자인을 공유하겠습니다. 일단 승인되면 Webflow에서 구현하겠습니다. 잠시 후 Webflow에 너무 익숙해져서 Sketch를 사용할 필요가 없었습니다. 새 프로젝트가 있을 때마다 Webflow로 바로 이동했습니다. 이 새로운 워크플로를 통해 자금이 부족한 스타트업은 많은 시간과 비용을 절약할 수 있었습니다. 예를 들어, 리드 생성을 위한 마케팅 캠페인을 위해 Webflow에서 다음 랜딩 페이지를 완전히 만들었습니다.

블로그 요구 사항을 위해 이해 관계자와 Webflow 기본 사항을 공유하고 CMS를 사용하는 방법을 보여주었습니다. 일단 익숙해지면 블로그 기사를 직접 업로드했습니다. Webflow의 CMS 컬렉션 기능을 활용하여 이미 시스템을 설정했습니다. 기사 콘텐츠를 추가하고 라이브로 만들기만 하면 됩니다.

클릭하면 전체 크기의 이미지를 볼 수 있습니다.

Webflow를 디자인 프로세스에 통합

Webflow를 디자인 프로세스에 통합하는 것은 쉽습니다. 뿐만 아니라 특히 마지막 단계에서 많은 기존 설계 단계를 제거할 수 있습니다. 개발자 핸드오프가 없습니다. 이 마지막 단계를 제거하는 것만으로도 상당한 시간을 절약할 수 있습니다. 더 이상 사양을 수정하고 수고하지 않아도 됩니다.

디자이너가 Sketch/XD/Figma를 사용한 와이어프레이밍, 프로토타이핑 및 UI 디자인에 익숙하다면 해당 워크플로가 더 편안할 것입니다. 그러나 그들은 Webflow로 바로 이동하여 디자인을 조합하고 스테이징 링크를 사용하여 브라우저에서 실시간으로 테스트하는 것을 고려할 수 있습니다. 특히 소규모 프로젝트의 경우 그렇습니다. 범위에 따라 Webflow에서 프로젝트를 빌드하는 것이 다른 방법보다 더 오래 걸릴 수 있으므로 균형 요구 사항에 관한 것입니다. A/B 테스트 또는 다변수 테스트와 같은 설계 실험의 경우 Webflow로 직접 이동하여 설계, 구축 및 테스트하는 것이 합리적일 수도 있습니다.

디자이너는 다양한 Webflow 템플릿 호스트에서 선택하고 사용자 지정하여 프로젝트를 빠르게 시작할 수 있습니다. 모든 템플릿은 코드를 작성하지 않고 Webflow를 사용하여 구축되므로 Webflow의 시각적 개발 인터페이스로 완전히 사용자 지정할 수 있습니다.

디자인을 구성하는 구성 요소는 Webflow 기호로 변환되어 몇 분 안에 후속 페이지를 조합하는 데 재사용할 수 있습니다. Sketch와 마찬가지로 디자이너는 기호를 설정하고 각 구성 요소에 바인딩 가능한 필드를 만들고 각 인스턴스에 콘텐츠 재정의를 추가할 수 있습니다. 즉, 디자이너는 제목, 이미지 및 텍스트 블록이 있는 구성 요소를 만들고 다른 콘텐츠가 있는 페이지에서 재사용할 수 있습니다.

Webflow는 또한 디자인 시스템을 구축하기 위한 훌륭한 도구입니다. 심볼에 대한 콘텐츠 재정의의 최근 릴리스를 통해 팀이 브랜드의 시각적 아이덴티티 또는 핵심 가치를 손상시키거나 희석하지 않으면서 더 빠르게 디자인을 구축할 수 있도록 전체 디자인 시스템을 만들 수 있습니다.

어떤 코드 도구도 아이디어를 사람들이 사용할 수 있는 것으로 변환하는 데 필요한 시간과 코딩 전문 지식을 줄여줄 수 없습니다. 더 이상 프로그래머가 될 필요가 없어 다양한 배경과 관점을 가진 새로운 제작자에게 힘을 실어줍니다. Rise of No Code 에서 Product Hunt의 설립자 Ryan Hoover

웹 디자인을 위한 Webflow의 이점

Webflow에서 반응형 웹 사이트를 만드는 것은 인터페이스가 다른 장치에서 매끄럽게 편집 및 미리 보기를 통합하기 때문에 빠르게 수행할 수 있습니다. 클릭 한 번으로 디자이너는 데스크탑, 태블릿, 모바일에서 사이트가 어떻게 표시되는지 확인하고 각 화면의 레이아웃, 구성 요소 및 글꼴을 조정할 수 있습니다.

Webflow의 장점:

• 압축된 타임라인. 아이디어에서 디자인, 프로토타이핑 및 MVP까지 더 빠른 경로.
• Webflow는 디자인-컨텐츠 간극을 연결합니다. 작가, 편집자, 마케팅 담당자가 웹사이트에서 콘텐츠를 즉시 업데이트할 수 있습니다.
• 디자이너는 Webflow에서 스케치를 건너뛰거나 다른 프로토타입 도구에서 저충실도 또는 고충실도 프로토타입을 만들 수 있습니다. 프로토타입이 테스트되면 신속하게 최종 제품으로 전환하고 웹에서 라이브로 만들 수 있습니다.
• 여러 사이트와 방문 페이지를 구축, 호스팅 및 유지 관리합니다.
• Hotjar 또는 Google 태그 관리자와 같은 측정 도구를 통합합니다.
• 마케터와 기타 비기술 인력의 진입 장벽을 낮춥니다.
• Webflow Editor를 통해 페이지에서 바로 다른 사람이 콘텐츠를 쉽게 편집할 수 있습니다.
• Webflow 전자 상거래는 온라인 비즈니스의 신속한 설계 및 확장을 가능하게 합니다.
• Webflow는 팀 템플릿으로 디자인 일관성과 속도를 제공합니다.
• 디자이너는 실제 콘텐츠로 사이트를 구축하고 Webflow의 CMS 컬렉션 (다른 팀이 기술 없이도 사용할 수 있는 콘텐츠 템플릿)을 활용할 수 있습니다.
• 자동 사이트 백업(버전 관리) 및 스테이징 URL.
• 사이트는 Webflow로 호스팅할 필요가 없습니다. 모든 웹사이트는 표준 HTML, CSS 및 JavaScript로 코딩되어 있으므로 모든 호스트에 사이트를 내보내고 업로드할 수 있습니다.
• Webflow를 떠날 때 HTML 및 CSS 파일과 함께 나중에 사용할 수 있도록 데이터베이스를 내보낼 수 있습니다.

요약

웹 개발을 위한 코드를 제거함으로써 수많은 비즈니스 이점을 실현할 수 있습니다. 표준 이하의 DIY 웹 디자인 도구를 능가하는 Webflow는 대부분의 전문 웹 디자인 요구 사항에 적합한 강력한 솔루션을 제공합니다. 플랫폼은 계속 진화하고 있으며 앞으로 더 흥미진진한 개발이 진행되고 있습니다.

저는 Webflow를 사용하여 두 달도 안 되는 기간에 혼자서 회사 웹사이트를 디자인하고 시작했습니다. Webflow는 디자인 프로세스에서 전례 없는 유연성을 제공하여 코드에 대해 걱정할 필요 없이 보다 창의적인 제어를 제공합니다. 코드가 없는 신속한 웹 디자인 워크플로는 더 빠른 출시 경로를 제공하고 기존 웹 개발에 비해 생산 비용을 절반으로 줄였습니다.

학습 곡선은 가파르지 않습니다. 몇 주 만에 Webflow의 모든 기능을 튜토리얼로 충분히 마스터할 수 있습니다. 디자이너가 Webflow를 배우면 전통적인 웹 개발 방식으로 돌아갈 수 없습니다.

코드 웹 디자인 도구는 여기에 머물지 않습니다. 그들이 제공하는 가치와 유연성은 의심의 여지가 없습니다. 코드 없는 운동은 기술이 진입 장벽이 아니라 창조를 가능하게 하고 촉진해야 한다는 근본적인 믿음에 기반을 두고 있습니다. Webflow를 사용하면 디자이너가 더 짧은 시간에 정교한 제품을 설계하고 구축할 수 있습니다. 디자이너가 비즈니스 속도를 따라갈 수 있도록 돕고 코딩을 못하는 사람들에게 기회의 세계를 열어줍니다. 탑승할 시간이 될 수 있습니다.

당신의 생각을 알려주세요! 아래에 귀하의 생각, 의견 및 피드백을 남겨주세요.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 포스트 플래시 시대의 웹 애니메이션
• 단순함이 핵심 - 최소한의 웹 디자인 탐색
• 반응형 디자인 – 모범 사례 및 고려 사항
• 잔인한 웹 디자인, 미니멀리스트 웹 디자인, 그리고 웹 UX의 미래
• 모든 트렌드가 가치가 있습니까? 웹 디자이너가 저지르는 가장 흔한 5가지 UX 실수