소개  새로운 프로젝트를 처음부터 다시 개발하는 모든 단계를 거쳐야 한다는 생각에 단조로움의 무게가 당신을 끌어내리는 듯한 느낌에 짜증이 난 적이 있습니까? 모든 프로젝트가 똑같이 지루한 프로세스를 따르기 때문에 창의력을 발휘할 여지가 거의 없다는 것은 개발자들 사이에서 공통적으로 나타나는 좌절감입니다.  하지만 이 악순환에서 벗어나 Webflow 개발 경험을 즐거움과 만족의 원천으로 바꿀 수 있는 방법이 있다고 말하면 어떻게 될까요? 비결은 Webflow 개발 워크플로를 한 단계 더 발전시킬 수 있는 모범 사례와 혁신을 사용하는 것입니다.  이 심층 가이드에서는 일상적인 개발 단계를 간소화하고 일반적인 문제를 극복하며 플랫폼의 잠재력을 최대한 활용하는 데 사용할 수 있는 기술을 살펴보겠습니다. 그러니 벨트를 매고 효율성이 지배하는 세계로 질주할 준비를 하세요.   1단계 - 성공을 위한 무대 설정  새로운 Webflow 프로젝트를 시작할 때 거기에서 확장할 수 있는 강력하고 효율적인 기반이 필요합니다. 이는 준비 단계이지만 개발은 이미 시작되었으며 성공을 위해 고려해야 할 중요한 사항이 있습니다.     1.1 스타일가이드  스타일 가이드를 프로젝트의 청사진으로 생각하면 그 우선순위가 분명해집니다. 스타일 가이드를 만드는 것은 프로젝트의 시작을 표시하여 클래스와 스타일이 전체적으로 예측 가능하게 작동하도록 보장합니다. 따라서 특정 페이지를 개발하기 전에 스타일 작업에 시간을 투자하십시오. 스타일 가이드를 만드는 방법에는 두 가지가 있습니다.  귀하의 선호도에 맞춰 처음부터 자신만의 기본 프로젝트를 생성하거나    ,   ,   등 이미 만들어진 오픈 소스 프레임워크를 사용하세요. Finsweet Relume Wizardry     1.2 변수  최근 Webflow 업데이트 덕분에 변수 사용이 더욱 직관적이고 효율적이 되었습니다. 변수를 잘 설계된 그룹으로 구성하면 개발을 단순화하고 효율성을 높일 수 있습니다. 다음과 같은 그룹을 만드는 것을 고려해 보는 것이 좋습니다.  일반적인 색상  배경  텍스트  텍스트 크기  텍스트 크기 모바일  컨테이너(최대 너비)  아이콘 크기  이러한 그룹이 생성되고 해당 클래스와 연결되면 쉽고 자신있게 웹 페이지 개발로 이동할 수 있습니다.  변수 생성 작업은 항상 모범 사례였으며 Webflow는 로우 코드 개발 영역에서 이러한 전통을 이어갑니다. 이러한 사전 정의된 그룹은 모든 프로젝트에 견고한 기반을 제공하여 보다 원활하고 구조화된 개발 프로세스를 가능하게 합니다. 그리고 고객이 색 구성표를 어두운 색에서 밝은 색으로 변경해 달라는 요청을 가지고 돌아오면 변수를 사용한 것에 대해 스스로 감사하게 될 것입니다.   1.3 접근성 우선순위 지정  접근성은 종종 프로젝트의 최종 단계에 맡겨지지만 그 중요성은 아무리 강조해도 지나치지 않습니다. 프로젝트 시작부터 접근성 기능 통합이 모든 결정과 추가하는 요소에 영향을 미치면서 최우선적으로 고려되어야 합니다.  Webflow는   공개적으로 제공했습니다. 주의 깊게 연구한 후에는 이 문제의 주요 사항에 대한 아이디어를 얻게 될 것입니다. 체크리스트를  Webflow의 뛰어난 이점 중 하나는 내장된 접근성 대시보드로, 시각 장애가 있는 사람들이 프로젝트를 어떻게 인식하는지에 대한 시각적 정보를 제공합니다. 이 기능을 사용하면 여러 접근성 필터를 통해 프로젝트를 보고 다양한 보기 조건을 시뮬레이션하고 잠재적인 개선 영역을 강조 표시할 수 있습니다.   이는 보다 공평하고 포용적인 디지털 환경을 조성하는 것입니다. 처음부터 접근성을 우선시함으로써 프로젝트의 유용성을 향상시킬 뿐만 아니라 능력에 관계없이 모든 청중이 프로젝트에 동등하게 액세스할 수 있도록 하겠다는 의지를 보여줍니다.   2단계 - 개발 프로세스 마스터하기  이제 디자인에 맞춰 모든 페이지를 직접 개발하는 단계로 진입하게 되었습니다. 이 단계를 성공적으로 통과하는 데 도움이 되는 몇 가지 권장 사항은 다음과 같습니다.     2.1 사용자 정의 코드  "그만. 왜? 무엇을 위해? 그런데 어떻게 이럴 수 있지?! 결국 미래는 이미 도래했는데 왜 지금 코드가 필요한가요?" - 하지만 솔직하게 말하면 코드에 대한 지식이 없어도 웹 개발을 이해하고 경력을 빨리 시작할 수 있습니다. 하지만 간단한 드래그 앤 드롭 기능으로 경쟁력을 유지하고 놀라운 것을 만들 수 있습니다. 로우 코드 플랫폼은 사실이 아닌 것 같습니다. 따라서   에서 이야기한 끝없는 개발과 학습에 오신 것을 환영합니다. 이전 기사     2.1.1 HTML  Webflow와 같은 로우 코드 플랫폼에서 작업할 때 구조를 생성하기 위해 div 및 텍스트 요소에만 의존하고 싶은 유혹이 있습니다. 그러나 이것이 어제 우리 자신과 다른 점입니다. 최소한 내 기사를 읽은 후에는 완제품의 품질에 대한 책임을 진다는 것입니다. <header>, <nav>, <main>, <aside>, <footer> 등과 같은 요소를 사용하고 올바른 제목 수준을 사용하여 마크업이 의미론적 규칙을 따르도록 하여 명확성과 접근성을 향상시키세요.   2.1.2 CSS:  미래의 모든 코드를 전역 코드와 로컬 코드로 정신적으로 나눕니다. Navbar 구성 요소에 전역 CSS를 추가합니다. 이렇게 하면 모든 페이지에서 액세스할 수 있으며 프로젝트를 게시하기 전에도 스타일이 어떻게 적용되는지 확인할 수 있습니다.  미디어 쿼리를 사용하여 코드에 마우스 오버 상태에 대한 스타일을 작성합니다. 이 방법을 사용하면 Haver 위치가 데스크탑에만 표시됩니다.   <style> @media screen and (hover:hover) { //Insert your code here... } </style>  1024px 와이드 화면에 대해 별도의 스타일을 작성하여 이 특정 크기의 장치와 관련된 고유한 레이아웃 문제를 해결하십시오.  Webflow에서 반응형 디자인을 만드는 것은 쉽지만 태블릿 레이아웃은 너비가 991픽셀부터 시작됩니다. 1024 화면은 모든 데스크톱 스타일을 자체적으로 적용하는 것으로 나타났습니다. 하지만 아직까지 1024 화면에 맞게 스타일을 따로 작성하지 않아도 되는 프로젝트는 단 한 번도 없었습니다. 이 항목은 확인을 위해 필수 항목이라고 생각합니다. 스타일을 별도로 등록할지 여부는 각 개별 프로젝트에 따라 다릅니다.  가독성을 높이고 다른 개발자와의 협업을 촉진하려면 CSS 코드에 주석을 추가하세요. 후속 프로젝트 편집 중에 자신과 다른 개발자의 삶을 더 쉽게 만드십시오.  이전 개발자로부터 프로젝트를 상속받은 경우 프로젝트를 보고 싶은 방식으로 그대로 두세요.   <style> /* About page Start */ //Insert your code here... /* About page End */ </style>  Webflow 애니메이션에만 의존하는 대신 CSS 애니메이션을 사용하여 페이지 성능에 영향을 주지 않고 페이지를 더 쉽고 효율적으로 만드는 것이 좋습니다.  Webflow에 내장된 애니메이션 도구를 사용하면 초보자도 다양한 상호 작용이 가능한 좋은 웹 사이트를 쉽게 만들 수 있습니다. 그러나 고급 개발 방법에 관해 이야기하는 경우 CSS 애니메이션은 매우 가볍고 존재로 인해 페이지 속도가 느려지지 않는다는 점에 유의하는 것이 중요합니다. 반대로, 기본적으로 요소의 CSS 속성 변경만을 목표로 하는 웹플로우 애니메이션은 JS를 통해 작동하므로 페이지 속도가 느려집니다. 이는 소규모 프로젝트에서는 눈에 띄지 않지만 대규모 프로젝트에서는 눈에 띕니다. 어쨌든 연습용이라 할지라도 기본 Webflow 애니메이션 대신 모든 프로젝트에서 CSS를 최대한 많이 사용하는 것이 좋습니다. 우리는   는 것을 기억합니다. 그것을 형성합시다. 수많은 반복 후에 습관이 나타난다  lottie 애니메이션과의 사용자 상호 작용이 계획되지 않은 경우 .json 대신 mp4 파일을 사용하거나 최적화된 .json을 사용하는 것이 훨씬 좋습니다. Safari의 성능에 감사드립니다.   2.1.3 자바스크립트:  다음은 오랫동안 당연한 것으로 여겨져 온 모범 사례입니다.  글로벌 프로젝트 스크립트에 대한 글로벌 설정 사용 및 로컬 스크립트에 대한 페이지 설정 사용을 포함하여 JavaScript 배치에 대한 모범 사례를 따르십시오.  페이지 로딩 시간을 최적화하려면 병렬로 로드할 수 있는 스크립트에 대해 <async> 및 <defer> 특성을 사용하세요.   2.2 웹플로우 구성요소  프로젝트 디자인을 연구할 때 프로젝트에서 어떤 반복 요소를 다른 페이지의 템플릿으로 사용할 수 있는지 스스로에게 얼마나 자주 묻습니까?    Webflow의 구성 요소를 사용하면 요소 및 하위 요소에서 사용자 정의 가능한 블록을 생성하여 일관되고 효율적이며 확장 가능한 디자인 작업 흐름을 유지할 수 있습니다. 사이트 전체에서 해당 블록을 재사용하고 한 곳에서 수정하여 반복되는 각 레이아웃을 개별적으로 수정하지 않아도 됩니다 (출처 -   ). https://university.webflow.com/lesson/comComponents?topics=layout-design  종종 이는 다음과 같을 수 있습니다:  Navbar  보행인  버튼 - 비표준인 경우 맞춤 디자인 및 효과 및/또는 분기형 구조가 있습니다.  CTA 배너 - 프로젝트 전반에 걸쳐 한두 가지 종류가 자주 사용됩니다.  그리고 제가 더 많이 사용하는 기호는   입니다. 태그와 클래스가 있는 빈 섹션이 있어야 하며 그 안에 컨테이너, 제목 2, 단락 및 여러 개의 빈 div 블록을 포함한 모든 표준 클래스가 있어야 합니다. 이것은 여러분이 사용하게 될 가장 일반적으로 사용되는 구성 요소입니다. 장담합니다. 추가하고 연결을 해제한 후 개발 부분을 완료하세요. 기본으로 추가하면 각 div 블록을 별도로 추가하는 대신 많은 시간을 절약할 수 있습니다.  섹션  코드를 사용하면 Webflow 구성 요소의 기능을 확장하고 HTML 페이지 구조에 액세스하지 않고도 매우 유연한 프로젝트 관리 시스템을 클라이언트에 제공할 수 있습니다. 이는 개발자가 프로젝트를 완료한 후 클라이언트가 프로젝트의 여러 디자인 측면을 제어할 수 있도록 하는 완전히 새로운 웹 개발 접근 방식입니다. 앞으로는 클라이언트가 이미 생성된 구성 요소를 기반으로 독립적으로 새 페이지를 쉽게 생성할 수 있을 것입니다. 근본적으로 새로운 요소를 개발해야 하는 경우에만 개발자를 고용해야 합니다. 구성 요소로 작업할 때 클라이언트는 완벽하게 준비된 HTML 구조를 파괴할 가능성이 거의 없습니다(그러나 우리 클라이언트는 종종 매우 능력이 있습니다).     2.3 미디어 자산 그룹화  자산 그룹화를 사용하면 자산을 더 쉽게 찾고 관리할 수 있습니다. 예를 들어, 대규모 탐색 표시줄이 있고 그 안에 아이콘이 포함된 링크가 많이 있습니다. 디자이너는 이미 그 중 일부를 준비했고, 다른 부분은 3일 안에 완료하겠다고 약속했으며, 마지막 부분은 아직 클라이언트가 고려 중입니다. 디자이너가 새 옵션을 그리는 동안 클라이언트는 그 중 절반을 검토하고 나머지 절반을 편집하고 승인한 후 최종적으로 개발을 위해 귀하에게 보냅니다. 자산 패널에는 이미 다른 이미지가 많이 있을 것입니다. 아이콘 이미지가 깨져서 나중에 찾거나 교체하는 것이 불편할 것입니다. 이 경우 자산을 그룹화하면 생활이 더 쉬워집니다. 그룹화를 사용하면 프로젝트의 모든 미디어를 깨끗하고 체계적으로 유지할 수 있습니다.   2.4 다음을 저장하기 위해 아카이브 폴더에 비축:    . 변경이나 편집이 있는 경우 정적 버전에서 수행한 다음 СMS 페이지로 전송하는 것이 훨씬 더 쉽습니다. Webflow의 СMS 페이지 특성은 필요한 모든 요소를 컬렉션의 해당 필드와 연결할 때 이 연결이 존재하는 요소를 복사하여 정적 페이지로 전송할 수 없다는 것입니다. 동적 СMS 페이지의 정적 버전    수많은 편집 작업을 자주 수행하므로 주의를 기울여야 하며 이미 구축된 프로젝트에서 제거하지 않아야 합니다. 이것을 아카이브 페이지로 옮기고 더 나은 때까지 그대로 두십시오. 요소의 초기 버전이 포함된 페이지입니다.     실험을 위한 테스트 페이지입니다.   3단계 - 최종 편집  프로젝트가 이제 실제로 수준이 향상되었다는 느낌을 남기지 않도록 프로젝트를 클라이언트에게 전송하기 전에 프로젝트 마지막에 수행해야 할 중요한 작업은 무엇입니까?   3.1 프로젝트 정리:  사용하지 않는 클래스와 애니메이션을 제거합니다.  주석 처리된 사용되지 않는 코드를 제거합니다.  사용하지 않는 미디어를 제거하십시오. 패널에 불필요한 항목이 많고 개별적으로 제거할 수 없는 경우   제안합니다. 모든 자산을 삭제하고 프로젝트를 게시하고 웹플로를 다시 로드하고 사용된 미디어만 패널 자산에 가져옵니다. 프로젝트에서. 해킹을   3.2 고객을 위한 프로젝트 사용자 매뉴얼을 만듭니다.  스타일 가이드 페이지 외에 완성된 프로젝트의 사용 방법을 설명하는 페이지가 있어야 합니다. 좋은 개발자는 클라이언트가 앞으로 프로젝트를 어떻게 관리할지 고민하는 사람이다. 변경하는 것이 얼마나 쉬울 것이며 고객이 변경을 관리하는 데 어느 정도의 자유를 누릴 수 있습니까? webflow 덕분에 이는 최대한 완벽에 가까워질 수 있습니다. CSS 지식과 웹플로우 구성요소의 작동 원리에 대한 이해가 있으면 현재 페이지를 쉽게 변경하거나 새 페이지를 생성할 수 있는 프로젝트를 구성할 수 있습니다.   3.3 백업에 고유한 이름을 지정하십시오.  설명성의 원칙은 개발자로서 이름을 지정하는 모든 것에 적용됩니다. 프로젝트의 모든 부분은 향후 귀하와 귀하의 동료에게 직관적이어야 합니다.   결론  결론적으로, 개발자로서 일상생활을 개선하기 위해 집중해야 할 주요 사항을 간략하게 요약해 보겠습니다.   1단계 - 준비  디자인 요소의 일관성과 예측 가능성을 보장하기 위해 스타일 가이드를 만듭니다.  개발을 간소화하고 효율성을 높이기 위한 변수 설정  포괄적이고 사용자 친화적인 웹사이트를 만들기 위해 처음부터 접근성을 우선시하세요.   2단계 - 직접 개발  웹 개발에서 무한한 가능성을 열어주는 귀중한 기술 세트로 코딩 능력을 추가하세요.  Webflow 구성 요소를 프로젝트의 미래 경쟁력을 위한 강력한 도구로 사용하세요.  쉽게 액세스하고 관리할 수 있도록 미디어 자산을 그룹으로 구성합니다.  나중에 사용하기 위해 사용하지 않는 요소를 저장하기 위해 아카이브 폴더를 유지합니다.   3단계 - 홈 스트레이트  사용하지 않는 요소와 자산을 정리하여 프로젝트 성능을 최적화합니다.  원활한 인계 및 고객 관리를 용이하게 하기 위해 고객 가이드를 만듭니다.  데이터 손실을 방지하고 연속성을 보장하기 위해 프로젝트의 의미 있는 백업을 저장하세요.  Webflow 개발의 효율성과 생산성을 극대화하려면 모범 사례를 채택하는 것이 필수적입니다. 이 접근 방식을 따르면 반복적인 작업에서 시간을 절약할 수 있을 뿐만 아니라 휴식, 자기 개발 및 혁신적인 프로젝트 생성을 위한 귀중한 리소스를 확보할 수 있습니다. 작업 흐름을 변화시키고 창의성을 발휘하여 더욱 멋진 것을 만들어 봅시다.  읽어 주셔서 감사합니다!  다른 개발자들의 삶을 더 쉽게 만드는 데 도움이 되도록 내 생각과 경험을 공유하게 되어 기쁩니다. 제가 배운 내용을 공유함으로써 개발 프로세스를 더욱 원활하게 만들고 모든 사람에게 더 나은 경험을 제공하고 싶습니다.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Read My Stories

이 오디오는 이야기의 원래 언어로 제작되었습니다!

개발자로서 일상 생활을 개선하는 3단계

About Author

코멘트

태그 걸기

이 기사는 다음에서 발표되었습니다.

Related Stories

성공적인 클라우드 마이그레이션을 위한 전체 가이드: 전략 및 모범 사례

포럼에서 피드까지: 소셜 미디어 알고리즘이 디지털 상호작용을 형성하는 방식

볼츠만 뇌 이론에 대한 간략한 소개

바다 항해: 데이터 레이크를 사용하여 프로덕션 등급 RAG 애플리케이션 개발

성공적인 클라우드 마이그레이션을 위한 전체 가이드: 전략 및 모범 사례

포럼에서 피드까지: 소셜 미디어 알고리즘이 디지털 상호작용을 형성하는 방식

볼츠만 뇌 이론에 대한 간략한 소개

바다 항해: 데이터 레이크를 사용하여 프로덕션 등급 RAG 애플리케이션 개발

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps