웹 디자인 워크플로를 만드는 방법: 전체 가이드

고객이나 고용주가 귀하를 웹 디자이너로 고용하려는 이유는 정확히 무엇입니까? 무엇보다도 그들은 당신의 독창성, 독창성 및 디자인 통찰력을 활용하기를 원합니다. 그러나 이러한 특성만으로는 귀하가 효율적이거나 효과적인 기여자가 될 것이라는 보장이 없으며 그것도 중요합니다.

고객은 물론 당신이 그들을 위해 놀라운 것을 디자인하기를 원합니다. 하지만 그들이 원하는 것이 또 무엇인지 아십니까? 그들은 모든 것이 순조롭게 진행되기를 원합니다.

이를 수행하는 가장 좋은 방법 중 하나는 작업 방식에 대한 구조를 만드는 것입니다.

반복 가능하고 최적화된 웹 디자인 워크플로우를 만드는 방법을 배우려면 계속 읽으십시오. 웹 디자인 워크플로가 무엇인지, 왜 필요한지, 시작하기 전에 무엇이 필요한지 알아봅니다.

또한 고객과의 첫 번째 킥오프 회의 주최부터 인계 후 웹사이트 유지 관리 제공까지 워크플로우에 포함되어야 하는 10단계를 세분화합니다.

웹 디자인 워크플로란 무엇입니까?

웹 디자인 워크플로는 웹 사이트를 만드는 데 필요한 모든 단계, 단계 및 작업을 설명하는 상세한 프레임워크입니다. 계획에서 실행 및 출시 후 프로세스의 모든 측면을 다룹니다.

웹 디자인에 대한 이 구조화된 접근 방식은 전체 프로세스가 잘 문서화되고 따라하기 쉬우며 성공을 위해 최적화되어 있으므로 디자이너는 프로젝트 관리의 스트레스에서 해방됩니다.

웹 디자인 워크플로는 디자이너마다, 에이전시마다 다를 수 있지만 일반적으로 모두 동일한 단계를 사용합니다.

1단계: 연구

이 단계에서 웹 디자이너는 클라이언트를 포함한 다양한 리소스를 사용하여 다음에 대한 정보를 수집합니다.

• 회사
• 웹사이트 목표
• 대상 고객
• 산업
• 경쟁
• 디자인 및 콘텐츠 트렌드

또한 디자이너는 로고 파일, 이미지 및 기타 브랜드 자산과 같이 이 시점에서 클라이언트로부터 필요한 모든 것을 수집합니다.

2단계: 계획

정보 수집이 완료되면 디자이너는 웹 사이트를 계획합니다. 이 단계에서 그들은 웹사이트 정보 계층 구조, UX 개념(메인 페이지의 웹사이트 와이어프레임) 및 시각적 디자인 개념을 제시합니다.

이러한 도구는 초기 연구와 함께 실행 단계에서 사용되어 프로젝트에 관련된 모든 사람(예: 디자이너, 작가, 개발자 및 SEO)이 동일한 프로젝트 프레임워크를 사용하도록 합니다.

3단계: 실행

이 단계에서 디자이너와 해당 팀(있는 경우)은 모든 부분을 통합하여 완벽하게 작동하는 웹 사이트를 만듭니다.

그들은 웹 사이트를 위한 모든 콘텐츠, 그래픽 및 반응형 디자인을 만들 것입니다. 또한 UX 전략을 구현하여 웹사이트가 보기 좋게 보일 뿐만 아니라 방문자에게 기분 좋게 느껴지도록 할 것입니다.

구현 외에도 웹 사이트 및 콘텐츠 내에 버그나 오류가 없는지 확인하기 위해 여러 라운드의 QA 및 테스트가 수행됩니다. 클라이언트는 또한 수행된 작업을 검토하고 피드백을 제공하고 궁극적으로 승인을 받기 위해 반복됩니다.

4단계: 출시

웹사이트가 완성되고 승인되면 웹디자이너가 라이브 서버로 옮기고 공식적으로 시작합니다.

그런 다음 클라이언트는 모든 웹 사이트 결과물을 제공받습니다. 현장에서 추가 유지 보수 작업이 수행될 경우 이 시점에서도 논의되고 시작됩니다.

웹 디자인 워크플로우가 필요한 이유는 무엇입니까?

다음은 웹 디자인 워크플로우에서 수행할 수 있는 몇 가지 작업입니다.

스트레스 없는 작업 방식

귀하의 워크플로는 클라이언트 온보딩에서 버그 없는 웹사이트 시작에 이르기까지 모든 것을 설명합니다. 완전한 계획을 세우면 새로운 프로젝트를 진행할 때 스트레스를 덜 받게 됩니다.

보다 정확한 타임라인 생성

반복 가능한 워크플로 프로세스를 만들면 각 단계와 작업을 완료하는 데 걸리는 시간을 알기까지 오래 걸리지 않습니다. 이 데이터를 사용하면 작업에 대한 타임라인을 보다 정확하게 정할 수 있으므로 항상 제 시간에 작업을 완료할 수 있습니다.

또한 이 정보를 통해 고객에게 프로세스에 대해 투명하게 공개할 수 있으므로 클라이언트가 어둠 속에 있거나 언제 다시 연락할지 궁금해하며 기다리지 않습니다.

작업 속도 향상

반복 가능한 워크플로의 또 다른 이점은 그것이 제2의 천성이 된다는 것입니다. 여전히 워크플로 체크리스트를 참조하여 모든 작업이 올바른 순서로 완료되었는지 확인하고 싶겠지만 모든 작업을 훨씬 더 빠르게 처리할 수 있습니다.

백트래킹에 더 적은 시간 소요

문서화된 프로세스가 없으면 작지만 필수적인 단계를 놓치기 쉽습니다. 또한 프로세스 대신 메모리에서 작업할 때 오류 및 실화에 더 취약합니다. 워크플로우 프로세스는 역추적 및 수정에 소요되는 시간을 줄여야 합니다.

더 쉽게 화재에 참석

잘 문서화된 웹 디자인 프로세스는 생산성을 크게 향상시킵니다. 작업을 완료하는 더 좋고 빠른 방법을 발견하면 고객 긴급 상황이나 개인 문제를 처리할 수 있는 "자유" 시간이 더 많아지고 이를 위해 일정을 타협할 필요가 없습니다.

더 나은 결과 제공

프로세스 없이 작업하면 주의를 끌기 위해 경쟁하는 수많은 것들이 있을 것입니다. 다음에 작업할 내용을 기억하려고 합니다. 상황이 어떻게 진행되고 있는지 알고 싶어하는 클라이언트의 이메일에 응답합니다. 작업 중인 웹 사이트에 대한 최상의 접근 방식을 파악합니다. 작업 흐름은 작업에 구조와 순서를 가져오므로 조정하는 대신 만드는 데 집중할 수 있습니다.

이익 마진 증가

생산성이 향상되고 오류나 문제가 줄어들어 더 빠르고 스마트하게 작업할 수 있습니다. 프로젝트를 더 빨리 완료하면 더 많은 작업을 수행할 수 있어 수익 마진이 크게 향상됩니다.

웹 디자인 워크플로우를 시작하기 전에 필요한 것

이상적으로는 작업하는 모든 프로젝트에서 사용할 수 있는 하나의 웹 디자인 워크플로 템플릿을 만들 수 있습니다. 모든 작업이 조금씩 다르기 때문에 작업 흐름의 세부 사항에 직접 반영할 수 있도록 몇 가지 사항이 필요합니다.

시작하기 전에 웹 디자인 워크플로를 사용자 지정하고 마무리하려면 다음이 필요합니다.

1. 사용 가능한 리소스 및 팀원 목록

웹사이트에서 단독으로 작업하는 경우 이 문제에 대해 걱정할 필요가 없습니다. 그러나 팀 구성원이나 계약자와 공동 작업을 하는 경우에는 누가 참여할지, 역할은 무엇인지 적어두고 작업 가능 여부를 확인하여 그에 따라 작업을 예약할 수 있습니다.

당신은 이것을 위해 멋진 것이 필요하지 않습니다. 스프레드시트는 다음을 수행합니다.

2. 프로젝트 관리 소프트웨어

웹 디자인 워크플로를 문서화하고 관리하는 가장 좋은 방법은 디지털화되고 복제하기 쉬운 프로젝트 관리 플랫폼에 설정하는 것입니다.

이렇게 하면 프로젝트에 관련된 모든 사람에게 수행해야 할 작업에 대한 명확한 가시성을 제공할 뿐만 아니라 손에 쥐고 있어야 하는 일부 작업을 자동화할 수 있습니다. 예를 들어:

• 이해 관계자에게 작업 할당
• 각 작업에 기한 추가
• 미리 알림을 설정하여 이해 관계자가 기한을 미리 알 수 있도록 합니다.

Trello, monday.com 및 Asana와 같은 웹 디자이너를 위한 수많은 훌륭한 프로젝트 관리 도구가 있습니다.

Trello에서 워크플로 템플릿은 다음과 같이 표시될 수 있습니다.

3. 웹 디자인 기술

마지막으로 원하는 것은 프로젝트가 시작된 후 사용할 웹 디자인 기술을 파악하는 것입니다. 대신 사용할 도구를 이미 알고 있어야 합니다. 작업마다 동일한 도구를 사용하면 파악하기가 훨씬 쉬울 것입니다.

예를 들어 일부 사용자는 Sketch 또는 Photoshop과 같은 플랫폼에서 디자인한 다음 WordPress에서 모든 것을 개발하는 것을 선호할 수 있습니다.

반면 웹사이트를 디자인하고 개발하는 보다 간소화된 방법을 선호하는 경우 전적으로 WordPress에서 작업하여 다음을 생성하도록 선택할 수 있습니다.

• 사이트 구조
• 와이어프레임
• 맞춤 설계 구성요소
• 글로벌 스타일
• 목업

또한 Elementor를 사용하면 전체 디자인 및 개발 워크플로우를 쉽게 관리할 수 있습니다.

4. 업무 범위

잠재 고객을 위한 웹 사이트 제안서를 작성할 때 작업 범위(SOW)도 계획해야 했습니다. 다음 섹션이 포함됩니다.

• 소개
• 개요 및 목표
• 업무 범위
• 단계 및 작업 목록
• 일정 및 이정표
• 예산
• 산출물
• 기술 요구 사항
• 포함
• 제외

이 문서는 프로젝트를 설정할 때 프로젝트의 첫 번째 단계에서 중요한 역할을 할 것입니다. 프로젝트의 폴더에 저장했는지 확인하고 웹 디자인 워크플로우가 그 특성을 반영하는지 확인하십시오.

워드 프로세서에서 이들 중 하나를 쉽게 생성한 다음 PDF로 저장할 수 있습니다.

5. 만들 디자인 요소 목록

서명된 고객 계약서 및 SOW를 살펴보십시오. 그런 다음 자신이 생성할 책임이 있는 항목을 기록합니다. 직업마다 다를 수 있습니다.

예를 들어 클라이언트 A의 경우 다음을 생성해야 할 수 있습니다.

• 심벌 마크
• 스타일 가이드
• 10페이지 웹사이트
• 조건부 서식이 있는 연락처 양식
• 리드 마그넷 팝업

그러나 클라이언트 B의 경우 다음을 생성할 수 있습니다.

• 5페이지 웹사이트
• 세일즈 퍼널 랜딩 페이지
• 스트라이프 사용 체크아웃

디자인하고 있는 모든 항목의 목록을 작성하면 시작 전에 추가하거나 제거할 단계를 알 수 있습니다.

리소스를 나열한 동일한 스프레드시트에 이 목록을 추가합니다.

6. 제작할 콘텐츠 목록

경우에 따라 콘텐츠를 만들지 않을 수 있습니다. 대신 클라이언트에서 가져옵니다. 그럼에도 불구하고 이것은 여전히 ​​거쳐야 할 중요한 단계입니다.

복사가 필요한 페이지를 기록하십시오. 그런 다음 누가 콘텐츠 제공을 담당하는지 기록해 둡니다.

이것은 고객이나 카피라이터와 함께 첫 번째 단계에서 참조하게 될 것입니다. 계속해서 리소스를 나열한 동일한 스프레드시트에 이 목록을 추가합니다.

웹 디자인 워크플로에 포함할 항목

다음 단계는 웹 디자인 워크플로의 기초를 제공합니다.

1단계: 클라이언트 시작 회의 주최

클라이언트 온보딩 프로세스는 나머지 프로젝트가 어떻게 진행되는지에 대한 단계를 설정합니다. 이 라이브 킥오프 통화 중 귀하의 목표는 다음과 같아야 합니다.

• 프로젝트 목표, 일정 및 결과와 관련된 현실적인 기대치를 설정합니다.
• 클라이언트를 인터뷰하여 회사와 요구 사항에 대해 자세히 알아보고 웹사이트 요약에 모든 내용을 문서화합니다.
• 먼저 필요한 모든 것을 수집하십시오.

프로세스를 원활하게 진행하는 데 사용할 수 있는 몇 가지 도구가 있습니다.

1 – 클라이언트와 실시간으로 대화하고 화면을 공유하며 시작 통화를 녹음할 수 있는 Zoom 또는 Skype와 같은 화상 회의 소프트웨어 .

2 – 회사, 프로젝트 목표, 디자인 및 콘텐츠 취향 등에 대해 묻는 데 필요한 모든 질문 이 포함된 설문지. 이 웹사이트 디자인 설문지 기본서식을 사용하여 나만의 설문지를 만드세요.

3 – 웹 사이트를 만들고 완성하기 위해 필요한 자산 및 로그인 . 여기에는 다음이 포함될 수 있습니다.

• 브랜드 로고
• 스타일 가이드
• 프리미엄 테마 또는 플러그인 라이선스
• 이미지 자산
• 복사
• 웹 호스팅 및 도메인 로그인

Content Snare 또는 FileInvite와 같은 도구를 사용하여 이 프로세스를 간소화합니다.

2단계: 조사 및 준비 작업 수행

고객으로부터 회사에 대한 직접적인 정보를 얻는 것이 중요하지만 외부 조사도 수행해야 합니다.

어떤 유형의 웹사이트를 구축하든 관계없이 매번 수행하게 될 몇 가지 유형의 조사가 있습니다.

산업 분석 – 이러한 종류의 연구는 산업 내에서 일어나고 있는 일과 산업이 나아가고 있는 방향에 대한 단서를 제공합니다. 또한 산업별 웹 디자인 측면에서 추세가 무엇인지에 대한 좋은 감각을 제공합니다.

경쟁 분석 – 이러한 종류의 연구는 포지셔닝에 도움이 됩니다. 경쟁사의 웹사이트 중에서 트렌드가 어디에 있는지 파악할 수 있다면 동일한 수준에서 경쟁하는 웹사이트를 디자인할 수 있습니다. 그런 다음 고객의 사이트를 구축할 때 채울 수 있는 전략의 차이를 찾으십시오.

대상 고객 조사 – 귀하의 고객은 그들이 누구를 대상으로 하는지 알려줄 수 있습니다. 그들의 인구 통계, 필요, 두려움 및 동기에 대해 더 많이 배우는 것은 귀하에게 달려 있습니다. 그런 다음 디자인할 수 있고 카피라이터가 작성할 수 있는 정확한 사용자 페르소나를 만듭니다.

작업 범위에 따라 사이트에 적합한 전략을 수립할 수 있도록 검색 엔진 최적화와 관련된 연구를 수행해야 할 수도 있습니다.

이러한 보고서와 사용자 페르소나 프로필 외에도 고객이 아직 가지고 있지 않은 경우 스타일 가이드 또는 디자인 시스템을 만들어야 합니다.

이 문서는 귀하와 귀하의 팀이 앞으로 사용할 명확한 시각적 언어를 제공합니다. 또한 향후 웹 사이트를 훨씬 쉽게 업데이트하거나 재설계할 수 있습니다.

3단계: 사이트 구조 계획

가장 먼저 할 일은 사이트맵을 만드는 것입니다. 어떤 페이지가 필요하고 클라이언트가 말한 내용을 기반으로 페이지를 함께 연결하는 방법에 대한 좋은 아이디어가 있을 수 있습니다.

그러나 이전 단계에서 수행한 연구를 참조하여 누락된 것이 없는지 확인하십시오. 경쟁에서 포함된 추가 페이지 중 실적이 좋은 추가 페이지가 있을 수 있습니다. 또는 이름을 지정하는 방식이나 원래 계획한 것과 다르게 표시되는 순서일 수도 있습니다.

그런 다음 대상 고객에 대해 수집한 정보를 사용하여 사이트맵을 최적화하는 최선의 방법을 결정합니다.

사이트맵 스케치와 관련하여 GlooMaps와 같은 무료 도구를 사용하여 모든 것을 설정합니다.

상대적으로 작은 페이지 세트로 작업하는 경우 쉬운 솔루션입니다.

전자 상거래 상점이나 와이어프레임이 서로 연결되는 방식을 보여주는 상점과 같은 고급 작업을 수행하려는 경우 FlowMapp이 좋은 옵션입니다.

와이어프레임 얘기가 나왔으니 말인데, 이것이 이 단계에서 정리해야 할 다른 것입니다.

와이어프레임은 각 페이지의 레이아웃을 보여주는 매우 기본적인 스케치입니다. 자리 표시자 콘텐츠를 사용하여 모든 것이 어떻게 조화를 이루고 흐르는지 보여줍니다.

와이어프레임을 만드는 한 가지 방법은 Balsamiq 또는 MockFlow와 같은 도구를 사용하는 것입니다. 또 다른 옵션은 Elementor로 와이어프레임을 만드는 것입니다.

이 옵션의 장점은 Elementor의 흑백 템플릿을 사용하여 전체 와이어프레임을 빠르게 구축할 수 있다는 것입니다. 따라서 페이지의 구조적 기반을 마련하는 데 시간을 소비하는 대신 레이아웃과 디자인을 조정하는 데 집중할 수 있습니다.

4단계: 콘텐츠 작성

이 단계는 모두 콘텐츠를 작성하는 사람에 따라 다릅니다.

클라이언트로부터 콘텐츠를 받는 경우 온보딩 단계에서 받는 것이 이상적입니다. 그렇지 않으면 제 시간에 프로젝트를 받지 못하면 프로젝트를 보류해야 할 위험이 있습니다.

제3자 카피라이터로부터 콘텐츠를 얻거나 직접 콘텐츠를 만들고 있다면 먼저 이에 대한 브리핑을 작성하는 데 시간을 할애해야 합니다.

콘텐츠 개요에는 각 페이지에 대한 다음 세부 정보가 포함되어야 합니다.

• 페이지 이름
• H1 텍스트
• 페이지의 내용과 다루어야 할 내용에 대한 간략한 설명
• 클라이언트의 관련 메모
• 행동을 요구하다
• 구조 또는 스타일을 반영하려는 유사한 웹 페이지에 대한 링크
• 단어 수 범위
• SEO 가이드라인 및 키워드(해당하는 경우)

할당된 공간에 맞게 사본을 작성할 수 있도록 작성자에게 모든 관련 연구 및 와이어프레임이 제공되는지 확인하십시오.

5단계: 웹사이트 모형 디자인

웹사이트의 복사 및 디자인을 처리하는 데는 두 가지 접근 방식이 있습니다.

옵션 1: 먼저 사본을 작성한 다음 콘텐츠가 완료되면 목업 작업을 하여 주변을 디자인할 수 있습니다.

옵션 2: 사본과 디자인을 동시에 생성합니다. 함께 사용하거나 사용하지 않습니다. 어느 쪽이든 귀하와 카피라이터는 동일한 참조 자료에 의존하므로 거의 동일한 결과에 도달해야 합니다. 즉, 가능하면 협력하는 것이 좋습니다.

시작할 준비가 되면 수행한 모든 조사 및 계획을 가지고 현대적이고 매력적이며 효과적인 웹 디자인으로 변환하십시오.

다시 말하지만 옵션이 있습니다. 일부 디자이너는 라이브 서버(및 클라이언트의 엿보는 눈)에서 떨어져 웹사이트를 디자인하는 것을 선호합니다. 이 경우 Adobe Photoshop 또는 Sketch와 같은 선호하는 디자인 소프트웨어에서 정적 목업을 만들 수 있습니다. 이 경로로 이동하면 추가 개발 작업이 필요합니다.

당신이 할 수 있는 또 다른 일은 당신 자신의 서버에 스테이징 환경을 설정하거나 그것을 하기 위해 Local by Flywheel과 같은 도구를 사용하는 것입니다. 그런 다음 실제 WordPress 설치에서 목업을 디자인합니다.

Elementor를 사용하여 와이어프레임을 만든 경우 Elementor에서도 목업을 디자인하는 것이 합리적입니다.

이렇게 하는 것의 이점은 단지 시간을 절약하는 것이 아니라 엄청난 이득입니다. 또한 목업에 기능을 추가(작동하는 프로토타입으로 전환)할 수 있으므로 고객에게 제공할 때 고객이 검토하고 승인할 수 있는 보다 현실적인 것을 갖게 됩니다.

6단계: 고객과 함께 웹사이트 검토

고객 검토에 대해 말하자면, 콘텐츠와 디자인 모두를 포함하여 생성한 모든 것을 검토하기 위해 고객을 프로젝트에 루프로 연결해야 하는 시점입니다.

클라이언트 검토 단계에서는 항상 체계적이고 실제적인 접근 방식을 취하는 것이 가장 좋습니다. 그렇지 않으면 클라이언트 피드백이 모호하거나 불규칙하거나 다루기 힘들 수 있습니다.

올바른 종류의 피드백을 받을 수 있도록 다음과 같은 몇 가지 조치를 취할 수 있습니다.

Zoom 또는 Skype를 통해 라이브 워크스루를 주최하십시오.

클라이언트에게 화면 공유 컨트롤을 넘겨주고, 프로토타입에 대한 링크를 제공하고, 프로토타입을 보도록 초대하고, 실시간으로 질문을 할 수도 있습니다.

클라이언트가 스스로 피드백을 남길 수 있는 기회를 제공합니다.

이를 수행하는 한 가지 방법은 웹 사이트에 BugHerd와 같은 시각적 피드백 도구를 설치하는 것입니다. 그러면 클라이언트가 메모와 질문을 페이지의 관련 부분에 드롭합니다.

그들이 제공하는 피드백의 종류에 대해 좀 더 제어하고 싶다면 UsabilityHub와 같은 사용자 테스트 도구가 더 적합할 것입니다.

이렇게 하면 사이트 컨텍스트 내에서 질문을 하고 클라이언트가 좋은 피드백을 제공하도록 안내할 수 있습니다.

이 단계에서 염두에 두어야 할 다른 사항은 얼마나 많은 사람들이 피드백을 제공할 수 있는지입니다.

귀하의 고객은 참여하고 싶은 수많은 부서장이 있을 수 있습니다. 작업의 크기와 범위에 따라 이치에 맞을 수 있습니다. 그러나 소규모 웹 사이트의 경우 검토 및 피드백을 수행할 한 사람을 선택하거나 내부적으로 작업하여 일관되고 통합된 피드백을 제공하도록 선택할 수 있습니다.

7단계: 웹사이트 개발 완료

고객이 카피 및 웹사이트 디자인을 진행하면 다음 단계는 사이트를 개발 단계로 옮기는 것입니다.

WordPress 외부에서 디자인을 만든 경우 귀하 또는 귀하의 개발자는 WordPress에서 디자인을 다시 만들거나 사용자 지정 코딩하기 위해 훨씬 더 긴 개발 단계가 필요합니다.

WordPress에서 프로토타입을 디자인했다면 이 단계가 훨씬 빨라질 것입니다. 개발 작업을 바로 건너뛰고 완료해야 하는 모든 추가 작업으로 이동합니다.

예를 들어:

• 복사본에 흐름(아직 없는 경우).
• 내부 링크를 수정합니다.
• 관련 SEO를 추가합니다.
• 속도를 위해 최적화하십시오.
• 사이트 보안을 강화하십시오.

클라이언트가 아직 구현되지 않은 피드백이 있고 프로젝트 범위 내에 있는 경우 이 단계에서 구현하십시오.

8단계: 품질 보증 테스트 수행 및 사이트 마무리

혼자서 작업하는 경우 다른 사람(예: 동료 디자이너 또는 카피라이터)을 찾아 사이트를 살펴보세요. 몇 주 또는 몇 달 동안 작업한 것을 새로운 눈으로 바라볼 수 있다는 것은 좋은 일입니다.

팀과 함께 작업하는 경우 역할에 따라 다양한 유형의 QA를 위임하는 것이 좋습니다. 예를 들어 카피라이터는 모든 콘텐츠와 SEO 구현을 검토해야 합니다. 다른 디자이너나 개발자는 버그, 오류, 손상된 요소 등을 확인하기 위해 연습을 수행해야 합니다.

그런 다음 도구를 사용하여 기술 검사를 수행할 수 있습니다.

BrowserStack을 사용한 반응형 테스트 :

LambdaTest를 사용한 크로스 브라우저 테스트 :

SolarWinds를 사용한 웹 사이트 오류 검사 :

Dead Link Checker로 깨진 링크 검사:

WAVE를 사용한 접근성 테스트 :

결국 속도, 보안 및 SEO를 테스트해야 합니다. 그러나 웹 사이트가 활성화될 때까지는 그렇게 할 수 없습니다.

해당 영역의 잠재적인 문제에 대해 사이트를 평가하기 위해 시작 후 시간을 예약해야 합니다. WordPress 보안 플러그인을 사용하여 문제를 모니터링할 수 있습니다. SEO 및 속도를 위해 Google의 Core Web Vitals 도구를 사용하십시오.

여기에서 포괄적인 웹사이트 QA 테스트를 수행하는 방법에 대한 추가 정보를 얻으십시오.

9단계: 사이트 시작 및 결과물 전달

웹사이트가 완성되고 고객이 기꺼이 서명하면 웹사이트를 라이브로 푸시할 때입니다.

사이트가 라이브 서버에서 생성되었고 방문자가 사이트를 볼 수 없도록 차단하는 유지 관리 페이지가 있는 경우 설정을 비활성화하기만 하면 됩니다.

사이트가 스테이징 서버에서 생성된 경우 클라이언트의 웹 호스팅 서버로 이동하고 도메인 이름에 연결합니다. 다음은 웹 사이트를 스테이징에서 라이브로 푸시하는 방법을 보여주는 빠른 자습서입니다.

라이브 서버에서 웹사이트를 가동하고 실행하면서 한 번 더 전체 검토를 수행하고 전환 중에 버그가 나타나지 않았는지 확인합니다.

완료되면 웹사이트를 Google Analytics에 연결합니다. 앞으로 사이트를 관리하려면 자신의 계정을 설정한 다음 고객에게 데이터 액세스 권한을 부여해도 됩니다.

사이트를 고객에게 양도하는 경우 Google Analytics 계정을 만들고 귀하를 관리자로 추가하는 방법에 대한 지침을 고객에게 제공하십시오. 그런 다음 해당 사이트에서 추적을 설정할 수 있습니다.

이 단계에서 마지막으로 해야 할 일은 고객에게 제공해야 할 결과물을 고객에게 제공하는 것입니다. 이는 원래 작업 범위와 특정 웹 디자인 프로세스에 따라 다릅니다.

제공할 프로젝트 인도물을 결정하려면 이 가이드를 참조하십시오.

10단계: 웹사이트 유지 관리 제공(선택 사항)

이 단계는 웹사이트 유지 관리를 제공하는 경우에만 적용됩니다. 그렇다면 이 단계가 진행됩니다. 일부 웹사이트의 경우 월별 체크인만 필요할 수 있습니다. 다른 사람들에게는 매주 또는 매일 참여해야 할 수도 있습니다.

그것은 모두 웹 사이트의 크기와 목적에 달려 있습니다. 예를 들어, 지역 법률 회사의 10페이지 문서에는 다음과 같은 기본 사항만 필요합니다.

• 백업
• 업데이트
• 보안 모니터링
• 성능 모니터링
• 오류 확인

그러나 전자 상거래 사이트는 보다 강력한 유지 관리 계획이 필요할 수 있으며 이를 통해 새 제품 업로드, 재설계, SEO, 성능 최적화 등도 관리해야 합니다.

이 16점 체크리스트를 사용하여 필요한 모든 웹사이트 유지 관리를 수행하십시오.

결론

고객을 위해 멋진 웹사이트를 디자인할 수는 있지만 워크플로우의 부족으로 인해 발생하는 많은 문제로 인해 고객과 귀하에 대한 만족도가 쉽게 떨어질 수 있습니다.

견고한 웹 디자인 워크플로우를 통해 고객의 목표를 완벽한 웹 사이트로 효과적으로 변환할 수 있는 단계별 실행 계획을 갖게 됩니다. 모든. 하나의. 시간.

또한 견고한 워크플로우를 통해 생산성을 크게 향상하고 결과적으로 수익 마진을 높일 수 있습니다.