WordPress 웹사이트를 재설계하는 방법: 궁극적인 체크리스트

아아, 워드프레스 웹사이트 재설계…

이 임무와 관련된 다양한 문제에 대해 생각할 때 일반적으로 약간의 스트레스를 받는 경향이 있습니다.

이 중요한 순간에 서버에서 간단한 Command + Option + Escape 또는 Ctlr + Alt + Del 을 수행하고 쉽게 다시 시작하는 것을 꿈꾸지 않는 사람이 누가 있겠습니까?

불행히도 웹사이트를 재설계하는 것은 항상 그보다 약간 더 복잡합니다 . 그리고 실수, 실수, 실수는 너무 빨리 발생합니다...

WPMarmite는 이 큰 프로젝트에 안심하고 접근할 수 있는 모범 사례를 공유하고 싶었습니다.

준비 되었나요? 이 게시물에서는 업스트림 전략에서 온라인 출시에 이르기까지 WordPress 웹사이트를 재설계하기 위해 고려해야 할 모든 요소에 대해 자세히 설명합니다.

최고의 WordPress 프로젝트에는 최고의 호스트가 필요합니다!

WPMarmite는 Bluehost: 뛰어난 성능, 뛰어난 지원을 권장합니다. 멋진 시작을 위해 필요한 모든 것.

블루호스트 사용해보기

WordPress 웹사이트를 처음부터 만드는 방법을 배우려면 전체 가이드 를 확인하세요 .

WordPress 웹사이트를 재설계하기 전의 4단계

웹사이트를 재설계하기 위해 WordPress를 사용하기 전에 다양한 구조적 요소를 작업해야 합니다.

맞습니다: 당신은 당신이 무엇을 하고 있는지도 모르고 시작할 것이라고 생각하지 않았습니까?

1. 재설계의 목표 설정

모든 프로젝트와 마찬가지로 aWordPress 웹사이트를 재설계하려면 목표가 있어야 하며 이를 정확하게 정의해야 합니다(프리랜서, 웹 에이전시 또는 비전문 웹마스터인지 여부).
다음 단계를 안내할 명확하고 간결한 목표입니다 .

자신에게 다음과 같은 질문을 하는 것입니다. 왜 웹사이트를 다시 디자인하고 싶습니까? 여기에는 여러 가지 이유가 있을 수 있습니다.

• 새 테마를 선택하거나 페이지 빌더를 선택 하여 사이트 디자인을 변경합니다 .
• 사이트 관리를 업데이트하십시오 . 플러그인 또는 WordPress CMS 버전이 업데이트된 적이 없거나, 다른 플러그인 간에 충돌이 있거나, 테마가 잘못 수정된 경우가 이에 해당합니다. 이는 웹사이트의 성능과 일상적인 관리에 영향을 줄 수 있는 모든 문제입니다.
• SEO를 최적화하십시오 . 특히 트래픽이 감소했거나 증가하지 않았는지, 사용자 경험이 현재 불안정한지 또는 HTML 코드가 Google 로봇에 최적화되어 있지 않은지 자문해 보는 목표입니다.
• 현재 디자인에서 수용할 수 없는 새로운 기능을 사이트에 추가하십시오 . 방문자가 보다 직관적이고 사용하기 쉽게 만들 수도 있습니다.
• 웹사이트 (또는 전자상거래) 의 기술 구조를 개선 하여 보안을 강화하고 로딩 속도를 개선하며 트리 구조를 수정하십시오.
• 귀하의 사이트를 다른 웹 호스팅 서버로 마이그레이션하십시오 .
• 특히 WooCommerce 매장이 있는 경우 더 많은 매출 을 올리십시오.
• 더 최신 웹사이트를 제공 하는 경쟁업체와 함께 귀하의 사이트를 최신 상태로 만드십시오 . 이를 활용하여 브랜드 이미지와 평판을 높일 수 있습니다.

잘 구성된 문서에 이러한 다양한 목표를 기록하십시오. 웹사이트 재설계를 구성하기 위해 구성 요소를 구성한다는 것을 알 수 있습니다.

2. 재설계 프로젝트 구조화

이제 재설계의 목적에 대한 명확한 아이디어를 얻었으므로 프로젝트의 주요 라인을 결정하는 여러 단계에 대해 이야기해 보겠습니다.

와이어프레임 생성

와이어프레임이라는 용어가 종을 울리나요?

이 단계가 중요하므로 주제에 대한 빠른 검토가 필요합니다.

와이어프레임은 웹 페이지의 다양한 요소를 단일 문서에 배열하는 데 도움이 되는 구조적 모형입니다.

아이디어는 실제로 만들려는 사용자 경험에 대한 명확한 아이디어를 얻기 위해 사이트 의 여러 페이지의 프레임워크를 배치하는 것입니다.

나는 이 기사에서 예를 들었고, 여기 다시 내 요점을 설명하기 위한 것입니다.

밀레니엄 페이퍼 + 연필 방법으로 가벼운 재설계가 가능하다면 디지털 도구를 사용하여 와이어프레임을 디자인하는 것이 좋습니다.

이렇게 하면 필요한 경우 쉽게 수정할 수 있을 뿐만 아니라 이러한 와이어프레임을 팀(또는 웹 마케팅에서 일하는 사촌)과 공유할 수 있습니다.

이를 위해 몇 가지 도구 만 추천할 수 있습니다.

• Balsamiq Wireframes : 유료 소프트웨어이지만 30일 무료 평가판을 사용하면 잘 만들어진 와이어프레임을 디자인할 수 있는 충분한 시간을 얻을 수 있습니다.
• MockFlow : 이것은 편리한 프리미엄 온라인 도구입니다. 무료 버전을 사용하면 시작하기 위해 최대 3개의 페이지를 만들 수 있습니다.
• Sketch : 적절하게 사용하는 방법을 알고 있다면 매우 강력한 협업 웹 디자인 플랫폼입니다. 30일 무료 평가판을 제공한 다음 월 $9부터 유료 서비스를 제공합니다.
• Canva : 와이어프레임 전용 도구는 아니지만 다양한 기능 덕분에 더 가까이 다가갈 수 있습니다. 그리고 무엇보다도 많은 기능을 갖춘 무료 버전이 있습니다.

그리고 이 시점에서 WordPress 웹사이트를 재설계할 때 무엇을 기대해야 하는지 더 명확하게 알 수 있습니다.

목업 디자인하기

와이어프레임이 재설계된 페이지의 구조에 대한 비전을 제공하는 경우 모형은 디자인 자체를 통합합니다 .

페이지 레이아웃 소프트웨어(예: InDesign)를 통해 생성된 웹 페이지 레이아웃에는 특정 기술이 필요할 수 있으며 시간이 많이 소요되는 단계입니다.

따라서 질문은 다음과 같습니다. 재설계를 위해 그래픽 모형을 정말로 만들어야 합니까? 대답은 간단합니다.

• 예, 자신만의 테마를 만들고 싶다면 . 이 경우 재설계된 웹사이트를 처음부터 디자인해야 하므로 모든 그래픽 요소를 쉽게 시각화할 수 있습니다.
• 아니요, 기존 테마를 사용하고 다시 디자인하려는 경우입니다. 더 간단한 솔루션. 그러나 이 경우 목표에 따라 새 테마를 선택해야 합니다.
  당신을 돕기 위해 WPMarmite는 당신이 필요로 하는 리소스를 가지고 있습니다: 최고의 무료 테마 목록. 즐기다!
  

WPMarmite 가입자 가입

마지막 WPMarmite 게시물(및 독점 리소스도 포함)을 가져옵니다.

지금 구독

새로운 트리 구조에 대해 생각해 보세요.

예, 안심할 수 있습니다. 우리는 여전히 원예가 아니라 웹사이트 재설계에 대해 이야기하고 있습니다!

트리 구조를 디자인한다는 것은 다른 페이지 사이에 존재할 링크를 상상하고 방문자가 사이트에서 자신의 길을 찾을 수 있는 모든 방법에 대해 생각하는 것을 의미합니다.

간단히 말해서, 트리 구조를 생성함으로써 사용자의 다양한 탐색 경로에 대해 생각하게 됩니다.

어떻게 해야 할까요?

트리 구조를 설계하고 다음을 포함하는 것을 기억하십시오.

• 기본 탐색 메뉴와 잠재적인 보조 메뉴.
• 바닥글 및 바닥글에 포함될 수 있는 링크.
• 특히 블로그에서 가능한 사이드바.
• 블로그 등의 다양한 카테고리

이러한 다이어그램을 사용 하면 서로 다른 페이지 간에 잘 만들어진 메쉬 를 만드는 것을 잊을 수 없습니다. 이는 원활한 사용자 경험을 보장합니다.

와이어프레임과 마찬가지로 이 다이어그램을 종이에 만들거나 GlooMaps 또는 Octopus와 같은 온라인 도구를 사용할 수 있습니다.

사양 설계

글쎄, 이 단계에서 당신은 구조화 요소를 잘 가지고 있다. 이제 이 모든 것을 주요 문서인 사양으로 수집할 때입니다.

웹사이트 재설계 사양은 웹사이트 재설계에 필요한 다양한 기대치를 충족할 수 있는 매우 광범위한 문서입니다.

웹에서 많은 사양 템플릿을 찾을 수 있습니다. 그러나 다음을 반드시 포함해야 합니다.

• 웹 프로젝트 및 회사에 대한 설명과 이 프로젝트에서 웹사이트가 수행하는 역할에 대한 설명입니다.
• 새 웹사이트의 타겟 잠재고객 , 가능한 경우 정확하게 설명합니다.
• 재설계의 목표는 가능한 한 많이 그림으로 설명합니다. 예를 들어 목표 중 하나가 트래픽을 늘리는 것이라면 현재 웹사이트의 트래픽을 지정하는 것을 잊지 마십시오.
• 현재 웹사이트에서 복구할 요소 : 페이지 콘텐츠, 가능한 이미지 등
• 따르고자 하는 그래픽 경로 . 이렇게 하려면 와이어프레임과 목업을 사양과 스타일 가이드(시각적 아이덴티티를 정의함)에 통합하세요.
• 전자 상거래 상점, 블로그, 옵트인 모듈, 새로운 관리(백오피스) 추가 등과 같이 새롭게 디자인된 웹사이트 의 새로운 기능 요소
• 재설계 프로젝트의 주요 이정표 : 웹사이트를 언제 미리 보고 싶습니까? 언제 라이브로 하시겠습니까?

이제 훨씬 더 명확해지지 않습니까?

3. 처분할 수 있는 자원에 대해 생각해 보십시오.

이제 사업에 착수할 시간입니다.

귀하가 수락할 경우 귀하의 과제 는 다음과 같이 귀하가 처분할 수 있는 리소스를 나열하는 것입니다 .

• 예산 : 재설계에 얼마나 투자하고 싶습니까?
• 시간 : WordPress 웹 사이트를 다시 디자인하는 데 사용할 수 있는 시간은 얼마입니까?
• 기술 : 모든 목표를 스스로 달성할 수 있는 능력이 있습니까?
• 도구 : 플러그인, 테마, 페이지 빌더... 이러한 유형의 도구가 웹 기술에 제한이 있어도 목표를 달성하는 데 도움이 될 수 있습니까?

이 목록을 통해 외부 공급자 에게 문의해야 하는지 또는 팀 구성원과 함께 또는 자신의 수단으로 독립적으로 작업할 수 있다고 느끼는지 알 수 있습니다.

최고의 WordPress 전문가 찾기

Codeable은 WordPress 테마 디자인 또는 설치에서 맞춤형 플러그인 개발에 이르기까지 모든 것을 도와줄 수 있는 전문가와 연결해 드립니다.

코딩 가능

4. 리디렉션 계획 만들기

"좋아, 간다, 이거다!"

쉬운! 웹사이트를 재설계하는 동안 너무 자주 간과되는 마지막 단계가 있습니다. 바로 리디렉션 계획의 생성입니다 .

설명하겠습니다.

종종 웹사이트를 재설계할 때 URL이 변경됩니다. 새 페이지를 만드는 경우 특히 그렇습니다.

하지만 리디렉션을 수행할 생각 없이 새 웹사이트를 온라인에 넣으면 어떻게 될까요? SEO와 방문자의 탐색에 영향을 미치는 404 오류가 많습니다.

리디렉션 계획을 설계하는 데 이보다 쉬울 수 있는 것은 없습니다. Excel 또는 Google 스프레드시트를 열고 다음과 같이 표를 만듭니다.

웹 사이트가 온라인 상태가 되면 리디렉션 플러그인을 설정하고 이 테이블을 직접 가져올 수 있습니다.

영리하지, 그렇지?

좋습니다. 심호흡을 하고 재설계 자체에 대해 이야기해 보겠습니다.

WP Rocket으로 웹사이트 속도 향상

WordPress 전문가가 인정하는 가장 강력한 캐싱 플러그인을 사용하여 사이트를 로켓처럼 만드십시오.

WP 로켓을 사용해보십시오

재설계를 시작하는 3단계

이제 프로젝트가 잘 구성되고 조직화되었으므로 어떻게 해야 합니까? 이 3가지 필수 단계가 당신을 안내할 것입니다.

1. 현재 사이트에서 로컬 또는 직접 작업을 선택합니다.

기술적인 측면으로 들어가기 전에 먼저 다음 작업을 선택하십시오.

• 현재 사이트에서 직접 변경 사항을 "라이브" 통합합니다.
• 또는 개발 및 사전 프로덕션 서버 에서 새 사이트를 청중에게 제공하기 전에 테스트합니다.

이 두 가지 옵션은 무엇을 수반합니까?

귀하의 사이트에서 온라인으로 직접 작업하는 것은 야만적입니다.

이 경우 모든 방문자가 변경 사항을 실시간으로 확인하고 이로 인해 발생할 수 있는 모든 버그와 함께 새로운 기능의 "기니피그" 역할을 합니다.

또한 수정하는 동안 오류가 발생하면 문제를 감지하고 해결할 때까지 웹 사이트에 영향을 미칩니다. 사이트를 사용할 수 없으며 기능이 작동하지 않습니다...

이러한 모든 문제를 피하기 위해 웹 사이트를 로컬에서 다시 디자인할 수 있습니다.

현지에서 일하는 것의 장점 은 많습니다.

• 안전하게 수정하십시오.
• 위험 없이 플러그인을 테스트하십시오.
• 온라인으로 전환하기 전에 최종 렌더링을 미리 봅니다.

현재 구성한 WP 관리를 유지하려는 경우에도 이상적인 솔루션입니다. 즉, 기존 웹사이트를 삭제하지 않고 WordPress 웹사이트를 수정할 수 있습니다.

그러나 완전히 새로운 관리에서 처음부터 시작하려면 WordPress를 로컬로 설치하는 방법을 살펴보십시오.

WPMarmite의 팁 : “물론 UpdraftPlus 또는 Duplicator와 같은 플러그인 덕분에 이전 웹사이트에서 요소를 검색할 수 있습니다. 이 플러그인을 사용하면 콘텐츠, 테마, 플러그인, 미디어 등 원하는 것을 관리자에게 다시 가져올 수 있습니다."

2. 재설계에 필요한 도구 획득

이제 WordPress 웹사이트의 재설계를 인수하는 데 필요한 모든 것을 나열하고 얻을 때입니다.

기억하십시오: 당신은 당신의 사양에 그것들을 나열했습니다.

여기에는 다음 이 포함될 수 있습니다 .

• 공식 디렉토리에서 사용할 수 있는 많은 것 중 하나가 (매우 인기 있는 Astra와 같이) 눈에 띈다면 새로운 테마 .
• 코드에 손을 대지 않으려면 Elementor 또는 Beaver Builder와 같은 페이지 빌더 .
• 놀라운 기능을 통합하는 새로운 플러그인 .

어떤 플러그인을 사용해야 할지 잘 모르시겠습니까? 아마도 우리의 필수 목록에서 원하는 것을 찾을 수 있을 것입니다.

도구 상자가 준비되었습니까? 모든 것을 설정하고 재설계의 마지막 중요한 단계인 콘텐츠로 넘어갑시다.

3. 새 웹사이트의 콘텐츠 준비

우선, 잊지 말아야 할 중요한 포인트.

웹사이트 리뉴얼 과정에서 부득이하게 이전 웹사이트의 콘텐츠를 복구할 수 있습니다.

이미지, 텍스트, 플러그인 구성: 생각해 보세요!

따라서 현재 WordPress 웹 사이트를 백업 하고 재설계에 넣을 내용을 비밀로 유지하십시오.

그러나 재설계를 하면 웹사이트 콘텐츠를 수정하여 타겟과 검색 엔진에 더 관련성 있고 매력적으로 만들 수 있다고 생각합니다.

따라서 SEO 전략 에 대해 생각해 보십시오. 새 웹사이트의 순위를 매기는 데 매우 중요합니다.

따라야 할 단계를 요약하는 것이 복잡하다면 여기에서 주요 내용을 알려드릴 수 있습니다.

• 한편으로는 순위를 매길 키워드를 정의합니다 . 이는 대상이 원하는 정보를 찾기 위해 Google에서 자발적으로 입력하는 표현입니다.
• 반면 에 각 페이지에서 통합해야 할 위치를 결정하십시오 . 타이틀 태그(hn) , 또는 이미지의 대체 텍스트는 예를 들어 SEO에 최적화되어야 합니다. Google은 이미지를 좋아합니다. 여기에서 먼저 귀하의 사이트를 이해하려고 합니다!
• 이러한 새로운 콘텐츠가 새롭게 디자인된 웹사이트에 통합되면 모든 것이 제대로 작동하는지 확인할 수 있습니다. 너무 자주 무시되는 페이지의 이미지 이름, 제목 및 메타 설명에 대해 특히 생각하십시오.

웹사이트의 페이지 SEO(콘텐츠 최적화)를 지원하려면 전용 SEO 플러그인을 사용하세요.

WPMarmite는 가장 유명한 Yoast SEO를 사용하지만 시장에서 효과적인 것은 아닙니다. 이 기사에서 경쟁업체에 대한 자세한 비교를 확인하십시오.

개발 서버에서 로컬로 그리고 필요한 모든 WordPress 도구를 사용하여 프로젝트가 진행되고 있는 것을 볼 수 있습니다. 온라인 출시가 다가오고 있습니다.

성공적인 웹사이트 출시를 위한 3단계

나는 당신이 새로운 WordPress 웹사이트를 세상에 공개하는 것에 대해 흥분하고 있음을 느낄 수 있습니다.

시간을 내어 이 3단계를 살펴보고 주의 깊게 따르십시오.

1. 직접 프로덕션 또는 사전 프로덕션 서버 선택

"사전 프로덕션 서버"라는 용어가 당신에게 아무 의미가 없습니까? 걱정하지 마세요. 정의를 위해 잠시 휴식을 취하겠습니다.

사전 프로덕션 서버는 웹사이트가 가동되면 사용할 서버와 동일한 서버를 공유합니다 . WPMarmite가 이를 재설계하는 경우 Alex는 예를 들어 사전 프로덕션을 preprod.wpmarmite.com 에 배치하도록 선택할 수 있습니다. 이는 wpmarmite.com 과 동일한 환경이 됩니다.

그렇다면 왜 이 프리프로덕션 서버를 사용할까요?

• WordPress 개발자인 경우 클라이언트와 함께 재설계를 검증합니다.
• 사이트가 활성화되기 전에 버그를 테스트합니다.
• SEO 전략을 조정하려면 모든 키워드가 각 페이지에 포함되어 있는지 확인하십시오.

이 모든 것이 검증되면 라이브로 전환하여 새 웹 사이트를 배포할 수 있습니다. 자신이 있다면 물론 직접 생산을 선택할 수도 있습니다.

2. 잠재적인 문제가 있는지 새 웹사이트를 테스트합니다.

사전 프로덕션 서버(또는 WordPress 모험가인 경우 라이브)에서 새 웹사이트를 테스트해야 합니다.

문제를 성공적으로 테스트하는 열쇠 는 일반 방문자의 입장이 되어 주변을 클릭하고 발생한 문제를 기록해 두는 것입니다 .

아마도 설계 및 구조 문제를 보게 될 것입니다. 그러나 다음 사항도 확인하는 것을 잊지 마십시오.

• 수행되지 않은 리디렉션 및 데드 링크 또는 화이트 페이지 생성.
• 웹사이트의 성능은 GTMetrix, Pingdom 또는 Google의 PageSpeed ​​Insights 테스트에서 테스트합니다.
• 옵트인 포인트 , 잘 작동하는지 확인합니다.
• 문의 양식 , 견적 양식…
• 결제 , 전자상거래 사이트가 있는 경우(확인 이메일 포함, 회원 사이트 액세스…

모든 것이 아름답고 기능적이며 잘 연결되어 있으며 잘 조화되어 있습니까? 축하합니다! 마지막 단계는 여기에서 당신의 얼굴에 보이는 큰 미소를 향상시킬 것입니다.

3. 모든 타사 서비스 재활성화 및 재연결

자, 거의 다 왔습니다!

이제 WordPress 웹사이트에 연결된 모든 서비스와 플러그인을 다시 활성화 할 수 있습니다. 특히 다음 사항을 고려하십시오.

• 캐시 플러그인.
• MonsterInsights와 같은 Google Analytics를 사용하는 플러그인.
• Facebook 또는 Instagram과 같은 소셜 네트워크를 사용하는 플러그인.
• 플러그인 및 테마에 대한 다양한 라이센스 키.

그리고 보안은 모든 사람의 비즈니스(특히 귀하의 비즈니스)이므로 웹사이트를 보호하는 모든 요소를 ​​다시 활성화해야 합니다 .

갈 준비가 되셨나요? 그런 다음 Google Search Console에서 새 웹사이트의 색인을 생성합니다. 이 조작으로 인해 Google 로봇이 새 아기를 방문하여 새 버전에서 더 빨리 색인을 생성하도록 합니다.

타담! 재설계되고 성능이 향상되고 눈에 띄며 구조가 개선된 새 웹사이트는 그에 상응하는 트래픽을 수신할 준비가 되었습니다. 힘든 일이었지만 그만한 가치가 있었지 않습니까?

최근에 워드프레스 웹사이트를 재설계한 적이 있습니까?

당신이 겪었던 문제 또는 당신이 그것에 대한 자부심은 무엇입니까?

의견에 대해 모두 알려주십시오. WPMarmite 팀은 모든 내용을 주의 깊게 읽습니다.