디자이너가 알아야 할 10 가지 웹 개발 개념

저는 10 년 넘게 웹 개발자로 일했습니다. 대부분의 시간 동안 저희 회사는 웹 사이트와 애플리케이션에서 웹 디자이너와 함께 일하면서 하청 개발 팀으로 일했습니다. 또한 자체 소형 CMS 제품을 개발하여 퍼치 , 이는 많은 웹 디자이너가 사이트에 대한 간단한 컨텐츠 관리를 제공하기 위해 사용합니다. Perch를 지원하는 과정에서 사람들이 일하는 방식과 어려움을 겪고있는 개념을 볼 수 있습니다.

프리랜서로 활동하거나 자체 에이전시를 운영하는 디자이너는 고객에게 기술 개념을 자신있게 설명해야한다는 것을 알게 될 수 있습니다. 최종 클라이언트는 종종 새 사이트를 시작하는 데 필요한 다양한 전문성을 인식하지 못하며 웹 디자이너를 통해 프로세스를 안내합니다. 따라서 개발 작업을 아웃소싱하는 경향이 있더라도 개발에 대한 이해가 있으면 고객과 작업의 기술적 부분에 대해 논의 할 수있는 이점을 얻을 수 있습니다. 또한 개발자와 작업 할 때 지식은 의사 소통 속도를 높이고 오해를 방지하는 데 도움이됩니다.



이 기사에는 프로젝트에서 웹 디자이너와 작업 할 때와 Perch를 지원할 때 설명했던 주제에 대한 추가 정보에 대한 몇 가지 작은 팁과 링크가 포함되어 있습니다.



1. 사용자 중심 기능 사양 작성

개발 작업을위한 기능 사양 또는 요약은 기관 생활의 일부입니다. 그들은 클라이언트를 머리 위로 이기고 사이트를 개선하는 변경을 방지하는 데 사용할 수 있기 때문에 약간의 나쁜 언론을 얻습니다. 그러나 시간과 비용을 인용해야하는 경우에는 그 추정치를 기반으로 할 무언가가 필요하고 개발 작업을 하도급하는 경우 개발자가 무엇을 구축해야하는지 명확하게 파악해야합니다.

개발 사양은 사용자가 수행 할 수있는 작업에 중점을두고 애플리케이션을 명확하게 설명해야합니다. 사용자 (방문자와 관리자 모두)가 수행해야하는 작업에 집중하면 안정적으로 인용 할 수 있고 예방에 도움이되는 사양을 만들 수 있습니다. 기능 크리프 .



2. 계획 할 때 프로그래밍 구조 고려

개발자가 일련의 요구 사항을 고려할 때 우리는 프로그래밍 구조 측면에서 생각하는 경향이 있습니다. 이러한 구성에 대한 이해는 사양을 개발하고 인터페이스를 설계 할 때 실제로 도움이 될 수 있습니다.

조건부 논리 – if… then… else ...

조건부 논리의 예는 다음 요구 사항 일 수 있습니다. 사용자가 로그인 한 경우 '내 계정'링크를 표시하고, 그렇지 않으면 로그인 및 계정 생성을위한 링크를 표시합니다. 흐름을 설계 할 때 다른 것을 잊기 쉽습니다. 항상 조건이 충족되지 않으면 어떻게되는지 고려하십시오.

루프

많은 개발은 반복되는 정보 청크로 구성됩니다. 아마도 데이터베이스에 저장된 제품이 있고 목록으로 표시하고 끝까지 동일한 마크 업 블록을 반복해서 표시하려고 할 수 있습니다.



영화 아트 디렉터가되는 방법

한 페이지에 멋지게 표시 할 항목이 너무 많으면 어떻게됩니까? 어떤 종류의 페이징 (이전 및 다음)이 필요하거나 데이터의 일부만 표시하는 다른 방법이 필요합니다. 사람들이이 데이터를 어떤 방식 으로든 정렬 할 수 있습니까? 다른 방식으로 표시해야하는 특수한 경우가 있습니까? 필터링은 데이터베이스의 제품에 대해 추가 정보를 저장해야 할 가능성이 높으므로 이러한 규칙은 사양에 설명되어야합니다.

dev.opera의이 기사 프로그래머가 아닌 사람을위한 간단한 용어로 프로그래밍의 기본을 설명합니다.

3. 설계 할 때 – 오류 상태를 잊지 마십시오.

개발을위한 개요를 개발하거나 초기 디자인을 만들 때 양식의 오류 상태와 유효성 검사를 잊지 마십시오. 이러한 사항을 개발자에게 맡기면 프로그래머가 설계 한 오류 메시지가 표시됩니다.

프로그래머로부터 디자인을 보호하십시오! 특히 사이트를 구축하기 위해 개발자에게 디자인을 넘겨주는 상황에 처해 있고 그 이후로 많은 입력이 없을 수 있습니다. 사용자가 양식을 작성하거나 사이트와 상호 작용해야하는 다양한 위치를 생각해보십시오. 개발자에게 메시지가 표시되는 방식과 사용자 경험에 대한 명확한 지침을 제공하여 디자인을 보호하십시오.

뒤에서 사람을 그리는 방법

4. 데이터베이스 설계의 기본 사항과 데이터 저장 방법을 배웁니다.

완전히 정적 인 사이트가 아니라면 (데이터가 HTML로 저장되는 경우) 어떻게 든 데이터를 저장하게됩니다. 데이터가 저장되는 방법을 이해하면 웹 디자이너로서의 생활이 더 쉬워집니다. 사이트에서 사용하기 위해 데이터를 잘 저장하기 위해 개발자가 내려야하는 결정과 디자인을 약간만 변경해도 많은 작업을 수행 할 수있는 이유를 이해하는 데 도움이됩니다.

5. 버전 제어를 사랑하는 법 배우기

특히 고독한 설계자에게는 소스 또는 버전 제어가 불필요 해 보일 수 있지만 버전 제어는 작업 백업을 제공하여 데이터 손실을 방지하는 데 도움이 될 수 있습니다. 원격으로 호스팅되는 버전 제어 시스템을 사용하면 다른 위치에서 작업하기가 더 쉬워집니다. 매일 저녁 시스템에 작업을 확인하고 다음날 어떤 이유로 집에서 작업해야하는 경우 진행 상황을 확인하고 중단 한 부분을 정확하게 선택할 수 있습니다.

요즘에는 우수한 호스팅 버전 제어 공급자가 많이 있습니다. 예를 들어 GitHub콩 줄기 . 콩나무는 또한 버전 관리에 대한 훌륭한 가이드 처음 사용하시는 분들을 위해.

6. 전문적인 개발 환경 조성

Perch를 지원함으로써 사람들이 일하는 방식에 대한 환상적인 통찰력을 얻었습니다. 사람들이하는 무서운 일 중 일부는 다음과 같습니다.

라이브 사이트에서 직접 개발

라이브 웹 사이트에서 파일을 직접 변경하는 사람들의 수에 항상 놀랐습니다. 이것은 끔찍한 작업 방법이며 라이브 사이트에서 무언가를 깨뜨릴 가능성이 있기 때문이 아닙니다. 서버의 파일에서 직접 개발하는 경우 이것이 사용 가능한 최신 파일의 유일한 사본 일 가능성이 높습니다. 서버에 문제가 있으면 전체 사이트가 손실 될 수 있습니다.

라이브 사이트의 하위 폴더에서 개발

사람들이하는 다른 일은 라이브 사이트에서 개발하지만 하위 폴더에서 개발하는 것입니다. 이것은 라이브 사이트를 직접 변경하는 것이 아니라 라이브 서버의 하위 폴더에 존재하는 사이트의 유일한 사본이라는 문제가 여전히 있음을 의미합니다.

하위 폴더 (라이브 사이트 또는 로컬 서버)에서 개발할 때 두 번째 문제가 있습니다. 이렇게하면 사이트를 한 수준 위로 이동할 때 루트의 모든 경로가 잘못됩니다. 일부 스크립트는 루트의 경로를 알아야하므로 라이브로 전환 할 때 환경의 변화로 인해 문제가 발생할 수 있습니다. Drew McLellan이 귀하가 하위 폴더에서 사이트 구축 중지 .

웹 서버없이 로컬로 개발

서버 측 개발을 수행하지 않는 경우 로컬로 작업하여 브라우저에서 파일 시스템의 파일을 미리 보거나 Dreamweaver 또는 다른 편집기를 사용하여 브라우저에서 미리 볼 수 있습니다. 다시 한 번, 이렇게하면 웹 사이트의 일부로 페이지가 표시되지 않으므로 라이브로 이동할 때 경로에 문제가 발생할 수 있습니다.

개발자는 항상 라이브 환경을 최대한 가깝게 미러링해야한다는 것을 알고 있습니다. 이렇게하면 사이트를 라이브로 이동할 때 발생할 수있는 많은 문제를 방지 할 수 있습니다.

나 자신을 사진으로 포토샵하고 싶어

모든 사람이 자신의 로컬 웹 서버를 운영하도록 제안하고 싶습니다. 사이트가 일반적으로 HTML 및 CSS이거나 PHP를 사용하는 경우 MAMP Mac에서는 EasyPHP 또는 XAMPP Windows에서는 잘 작동합니다. 파일이 사이트의 루트에있을 수 있도록 각 사이트에 대한 가상 호스트를 만듭니다.

7. 코드 및 기타 자산 재사용

개발자는 처음부터 작성하는 것보다 가능한 경우 코드를 재사용하는 것을 좋아합니다. 재사용은 시간을 절약 할뿐만 아니라 동일한 실수를 반복해서하는 것을 절약 할 수 있습니다.

코드를 재사용한다고해서 모든 사이트에 CSS 프레임 워크 또는 동일한 상용구를 사용해야하는 것은 아닙니다. 유용한 스 니펫 라이브러리를 유지할 수 있습니다.

많은 코드 편집기를 사용하여 코드를 스 니펫 또는 클립으로 저장할 수 있으며 독립형 도구 및 웹 애플리케이션 이 목적을 위해 설계되었습니다.

재사용은 코드에만 국한된 것이 아니라 일반적인 인터페이스 요소를 저장하여 Photoshop의 디자인에 적용 할 수 있습니다. 시간을 절약하는 한 가지 방법은 데스크톱에 테스트 업로드 파일 폴더를 유지하는 것입니다. 제가하는 일의 대부분은 콘텐츠 관리 시스템을 개발하고 테스트하는 것이므로 종종 이미지와 파일의 업로드를 테스트해야합니다. 일부 테스트 파일을 유지함으로써 계정에서 클라이언트의 테스트 서버로 중요한 PDF를 업로드하지 않습니다.

8. 책임을 제 3 자에게 이전하는 것이 좋은 생각인지 아십시오.

모든 것을 수행하고 모든 것을 자신의 사이트에 유지하고 싶은 유혹이 있습니다. 그러나 때때로 클라이언트에게 제안 할 가장 책임감있는 것은 일부 기능에 대해 타사를 사용하는 것입니다. 이에 대한 좋은 예는 지불을 처리하고 이메일을 보낼 때입니다.

결제 페이지

사이트에서 온라인으로 결제해야하는 경우 많은 결제 서비스 제공 업체가 전체 API 통합 옵션을 제공하거나 사이트의 보안 페이지에서 결제를받을 수 있습니다. 보안에 대해 확신이없고 PCI DSS 요구 사항이 귀하에게 미치는 영향을 이해하지 않는 한, 카드 세부 정보 수집을 PSP에 맡기는 것이 더 나은 결정 인 경우가 많습니다. 그러면 귀하와 귀하의 고객은 보안에 대해 걱정할 필요가 없습니다. 카드 세부 정보.

이메일 보내기

레이어 포토샵을 뒤집는 방법

이메일을 보내는 것은 까다로운 작업입니다. 메일 클라이언트에서 이메일이 제대로 작동하고 스팸 필터를 통과하는 것은 어려울 수 있습니다. 또한 구독 취소 요청을 관리하고 실제로 얼마나 많은 메시지가 전달되는지 확인해야합니다. 다음과 같은 제 3 자 서비스 캠페인 모니터MailChimp 목록으로 보내기 위해 소인 응용 프로그램에서 메일을 보내는 경우 전자 메일에 대한 책임을 처리 전문가 인 제 3 자에게 이전 할 수 있습니다.

9. 저렴한 호스팅이 비싸다는 것을 깨달으십시오

매일 아침 커피 비용을 지불하는 것보다 매달 호스팅 비용을 적게 지불한다면 뭔가 잘못된 것입니다. 저품질 호스팅은 비용을 절감하는 것보다 시간이 훨씬 더 많이 소요됩니다.

호스트는 지원 측면에서 거의 제공하지 않고 각 물리적 서버에 엄청난 수의 사이트를로드하여 저렴한 호스팅을 제공합니다. 공유 서버에 존재하는 사이트가 많을수록 각 개별 사이트의 리소스가 적어지고 사이트가 느리게 실행될 수 있으며 데이터베이스 기반 웹 사이트의 경우 트래픽이 너무 많아 데이터베이스 서버에 연결 오류가 발생할 수 있습니다. 에 대처하기 위해.

사이트를 빠르게로드하고 문제가있는 경우 호스트가 도움을주기를 원한다면 호스팅 비용을 조금 더 지불하면 효과가 있습니다. 자세히 알아보기 웹 호스팅 선택 .

10. 보안에 대한 단서 확보

몇 가지 기본적인 예방 조치를 통해 사이트가 해킹되거나 손상 될 위험을 최소화 할 수 있습니다. 대부분의 공격은 개인적인 것이 아니라 일반적으로 설치되는 소프트웨어를 대상으로합니다. 그만큼 Badware 중지 사이트는 해킹 된 사이트에서 찾을 수있는 몇 가지 일반적인 사항을 설명합니다.

타사 소프트웨어로의 업그레이드는 사양의 일부 여야합니다.

서버에 타사 소프트웨어가 설치된 클라이언트를 업그레이드 할 방법이없는 상태로 두는 것은 무책임합니다. 블로그 소프트웨어, CMS, 포럼 등 제 3 자 코드를 사용하는 사람을 위해 사이트를 배포하는 경우 필요한 경우 소프트웨어를 업데이트하겠다는 클라이언트와 계약을 체결하거나 전달해야합니다. 그들이 스스로 할 수 있도록 정보를 제공합니다.

플러그인에 대해 매우 의심하십시오

사용중인 핵심 소프트웨어 (예 : WordPress)가 최신 상태라고 가정하면 해커는 보안이 취약하거나 맬웨어 자체의 호스트 인 플러그인을 통해 서버에 액세스 할 가능성이 훨씬 더 높습니다. 사이트에 코드를 추가하기 전에 조사를하고, 사용 후 사람들이 문제를보고하지 않는지 확인하십시오.

사이트가 손상된 경우 호스트의 다른 사용자가 동일한 문제를 겪고 있는지 확인하세요.

보안 위반을 일으킨 것은 설치 한 것이 아닐 수도 있습니다. 사이트가 해킹 된 경우 동일한 호스트의 다른 사람에게도 문제가 있는지 확인하세요. 이 문제는 호스팅 회사의 보안 상태가 좋지 않거나 제어판 소프트웨어를 기반으로 한 손상으로 인해 발생할 수 있습니다. 그들이 이것을 정말로 진지하게 받아들이지 않는다면 호스트를 바꿀 때입니다!

디자이너, 개발자, 카피라이터, 프로젝트 관리자 또는 다른 역할로 웹에 참여하든 상관없이 전체 스택에 대해 더 많이 이해할수록 더 잘 느껴집니다. 우리는 서로의 역할을 인식하고 배울 수있을 때 더 효과적으로 함께 일하며 다른 사람들이하는 일을 볼 때 우리 자신의 일에 도움이 될 수있는 팁이 종종 있습니다. 댓글에 팁에 대한 자신 만의 제안을 추가 할 수 있습니다.