실수로부터 웹 디자인을 배우는 방법

웹은 단일한 단일 프레임워크로 만들어지지 않습니다. 모듈화로 인해 인터넷에서 보는 모든 것을 구성하는 모든 부분을 배우는 것이 훨씬 더 어렵습니다.

누구나 개발 시간, 프로그램 속도를 늦추거나 프로그램에 버그를 도입하는 실수를 저지를 수 있습니다. 뿐만 아니라 어떤 종류의 실수로 인해 일자리를 찾을 때 불리한 상황에 놓이게 됩니다.

웹사이트를 디자인하거나 프로덕션으로 시작할 때 가능한 한 적은 문제가 발생하도록 하는 모범 사례가 있습니다. 다음은 주니어 웹 개발자가 저지르는 가장 일반적인 5가지 실수와 이를 피하는 방법입니다.

jQuery에 대한 과도한 의존

jQuery는 지금까지 세계에서 가장 인기 있는 JavaScript 프레임워크입니다. 생성하자마자 프로젝트에 적용하는 것이 유혹적으로 보일 수 있지만 그렇게 서두르지는 마십시오.

jQuery는 웹 개발 속도를 높이는 많은 편리한 방법을 제공하지만 너무 많이 사용하지 않는 것이 중요합니다. 새로운 웹 개발자는 거의 항상 jQuery의 API 메소드가 어떻게 작동하는지보다 이해하는 실수를 범합니다.

일부 개발자는 JavaScript가 완전히 작동하는 방식 을 이해하지 못하기 때문에 많은 고용주가 jQuery를 있으면 좋은 것이 아니라 책임으로 간주 합니다.

jQuery를 사용하는 데 아무런 문제가 없습니다. 가능하다면 스스로 JavaScript 메소드를 사용하는 데 익숙해지십시오. 구현하는 데 시간이 걸리는 편리한 방법에 대해서는 jQuery에만 의존하십시오.

CSS 프레임워크에 지나치게 의존

Semantic UI 및 Bootstrap과 같은 CSS 프레임워크는 많은 시간을 절약할 수 있습니다. 수동으로 스타일을 지정하고 앱 내부에 반응형 디자인을 통합할 필요가 없습니다.

그러나 jQuery와 마찬가지로 자신의 CSS 코드를 작성하지 않는 사이클에 빠지기 쉽습니다. 하루가 끝나면 사이트는 일반적이고 절반만 완성된 것처럼 보일 것입니다. 극단적으로 보면 당신과 같은 생각을 가진 수십 개의 다른 웹사이트처럼 보일 수도 있습니다.

CSS 코드 작성 전문가가 아닌 경우 매뉴얼을 읽고 멘토를 찾을 수 있으며 연구 가이드가 저를 위해 연구 보고서를 작성하고 제공하는 것과 같이 필요한 정보를 제공할 수 있습니다. 좋은 질적 도움으로 당신을. 코드 작성에 더 직관적일 수 있는 다양한 프레임워크가 있습니다.

Bootstrap과 같은 프레임워크는 삶을 더 쉽게 만들어 줍니다 . 과도한 의존을 피하려면 CSS 스타일링 자체를 배우고, 전처리기를 사용하여 개발 속도를 높이는 방법을 배우고, 색상 이론을 연구하여 어떤 색상이 어울리고 어떤 색상이 그렇지 않은지 알아보세요. 개념을 제대로 이해하면 더 이상 프레임워크가 필요하지 않다는 것을 깨닫게 될 것입니다.

복구 도구가 없는 경우

가장 필요할 때 복구 도구가 없으면 웹 사이트가 충돌하고 웹 사이트가 중단될 수 있습니다. 웹 사이트를 변경할 때마다 웹 사이트가 좋지 않을 위험이 있습니다. 빠질 수 있는 안전망이 있는지 확인하려면 WP 재설정과 같은 복구 도구를 활용하는 것이 좋습니다.

WP Reset은 웹사이트에 문제가 발생할 때 최고의 솔루션입니다. 아마도 문제는 WP 관리자에 액세스할 수 없거나 죽음의 흰색 화면이 나타나는 것입니다. 그것이 무엇이든 WP Reset은 당신의 등을 가지고 있습니다. 웹 사이트를 빠르고 쉽게 복구할 수 있는 유용한 청소 도구가 함께 제공됩니다.

또한 플러그인 및 테마를 빠르게 설치하거나 결함이 있는 경우 비활성화하는 데 사용할 수 있습니다. 또한 WP Reset의 기능인 Snapshots는 웹사이트를 변경하기 전에 웹사이트의 스냅샷을 자동으로 만들어 계획대로 진행되지 않는 경우 해당 스냅샷을 복구할 수 있습니다.

이 플러그인이 제공하는 가장 강력한 옵션은 설치를 완전히 지우고 모든 플러그인, 테마 및 데이터베이스 항목을 제거할 수 있는 핵 재설정 옵션입니다. 그러나 정말로 필요할 때만 사용하십시오.

속도를 위해 사이트를 최적화하는 것을 잊음

jQuery에 지나치게 의존하는 것의 한 가지 효과는 안티 패턴 습관에 빠지는 경향이 있다는 것입니다. 브라우저가 처음 로드되면 스크립트를 배치한 위치에 따라 페이지가 로드되기 전에 JavaScript 및 CSS 코드를 실행해야 합니다.

상상할 수 있듯이 스크립트가 너무 많으면 웹사이트 속도가 느려집니다. 사용하지 않는 CSS 클래스를 사용하면 웹사이트의 번들 크기가 증가하고 마찬가지로 속도가 느려집니다.

속도 최적화에 많은 것이 들어갑니다. 글꼴, 이미지, 추가 JavaScript 및 CSS 파일, 파일 압축과 같은 몇 가지 요소가 제 역할을 합니다. 이것들을 마스터 했다면 파일에서 사용하지 않는 CSS 클래스와 JavaScript 메소드를 제거할 수 있는 Webpack 및 Rollup과 같은 패키지 번 들러를 살펴보십시오.

불완전한 입력 유효성 검사

지금까지 구축한 웹사이트의 가장 중요한 부분 중 일부는 양식입니다. 그것이 사람이 정보를 서버에 전달할 수 있는 유일한 방법이기 때문에 항상 해당 정보에 대해 어느 정도 온전한 검사를 수행해야 합니다.

인터넷에서 가장 일반적인 공격 벡터 중 일부는 여전히 XSS 공격과 SQL 주입입니다. 주니어 개발자들이 저지르는 경향이 있는 실수는 프론트엔드에서만 입력 유효성 검사를 하는 것입니다.

모든 입력 유효성 검사는 비활성화하기 쉬운 JavaScript를 통해 수행됩니다. 즉, Sytian Web Developer Philippines의 Kenneth Sytian은 항상 백엔드와 프론트엔드 모두에서 입력 유효성 검사를 수행할 것을 권장합니다. 또한 주입 공격을 불가능하게 하려면 영숫자가 아닌 모든 문자를 이스케이프해야 합니다.

SEO의 중요성 무시

아름다운 웹사이트를 만들고 배포하는 것만으로는 충분하지 않습니다. 사람들이 귀하가 제공하는 콘텐츠를 보고 감상하는 것도 마찬가지로 중요합니다. 이를 수행하는 가장 좋은 방법은 SEO 지식 과 구현을 개선하는 것입니다.

SEO는 끊임없이 변화하는 게임 규칙의 루프를 유지하기 위해 지속적인 연구가 필요한 길고 복잡한 프로세스입니다. 아치형 범위로 인해 개발 프로세스가 끝날 때 완료되도록 무시해서는 안됩니다.

이미지에 항상 설명적인 'alt' 태그를 사용하는 것과 같은 일부 관행은 적극적으로 처리해야 합니다. 이미 프로젝트를 완료했을 때 Alt 및 메타 태그를 찾기 위해 모든 파일을 스캔한다고 상상해 보십시오.

파비콘이 없다

파비콘은 설정이 간단하기 때문에 불필요한 것으로 무시하기 쉽지만 그 존재는 꽤 중요합니다. 최신 웹에서는 사용자가 나중에 다시 방문할 수 있도록 여러 탭을 열어두는 것이 일반적입니다. 파비콘은 사이트를 한 눈에 볼 수 있도록 일종의 책갈피 역할을 합니다. 하나가 없으면 사용자가 그 과정에서 흥미를 잃을 수 있습니다.

수상 경력에 빛나는 UX 디자이너인 Michelle Dipp은 Photoshop에서 직접 생성하는 대신 온라인에서 찾을 수 있는 무료 그래픽 디자인 도구를 사용할 것을 권장합니다. 번거로움 없이 나만의 템플릿을 만들 수 있도록 파비콘 템플릿을 제공하는 템플릿을 찾을 수도 있습니다.

반응형 디자인 무시

반응형 디자인 은 웹사이트가 갖추어야 할 가장 중요한 것 중 하나입니다. 인터넷의 대부분의 트래픽은 모바일 장치에서 발생합니다. 화면 크기에 따라 다른 콘텐츠를 표시하는 사이트가 없으면 상당한 불이익을 받게 됩니다. 경쟁업체가 동일한 제품을 제공하는 경우 특히 그렇습니다.

사용자 경험을 개선할 수 있는 한 가지 방법은 웹사이트에 고정 요소를 구현하는 것입니다. 고정 요소는 사용자가 탐색하는 동안 페이지에 고정된 상태로 유지되는 요소입니다. 요소가 고정되면 액세스하기가 더 쉽고 항상 한 곳에 있다는 것을 알 수 있습니다. 이는 휴대전화에서 필수입니다.

즉, WP Sticky는 스티커 요소를 만드는 데 사용할 수 있는 완벽한 플러그인입니다. WP Sticky를 사용하면 한 줄의 코드를 작성하지 않고도 원하는 만큼 많은 요소를 고정할 수 있습니다. 화면에서 바로 요소를 선택하기만 하면 됩니다.

WP Sticky를 사용하면 메뉴, 머리글, 바닥글 등을 고정할 수 있습니다. 또한 요소의 위치, 불투명도를 조정하고 특정 게시물에서 요소를 추가하거나 제거할 수 있습니다.

게다가 Google이 페이지 순위를 매길 때 고려하는 요소 중 하나입니다. 페이지가 모바일에서 반응하지 않는 경우 웹마스터 콘솔에서 사이트를 업데이트하라는 경고 이메일을 받게 될 것입니다.

결론

적절한 웹 디자인에는 시간이 걸립니다. 연구 시간, 작업 시간, 권장 사례에 익숙해지는 데 더 많은 시간이 필요합니다. 개발 시간에 실수를 한다고 해서 세상이 끝나는 것은 아닙니다. 대신, 학습 경험으로 직면하는 모든 좌절을 받아들이십시오. 그것들을 사용하여 적절한 웹 디자인에 대한 지식과 응용을 향상시키십시오.

–

저자 소개

Becky Holton은 최고의 에세이 작성 서비스인 Bestdissertation.com의 저널리스트이자 블로거입니다. 그녀는 교육 기술, 전문 작문에 관심이 있으며 항상 AustralianWritings에서 유익한 연설을 지원할 준비가 되어 있습니다. 트위터에서 그녀를 팔로우하세요.