홈페이지 리뉴얼 사례, 워드프레스 블로그를 뉴스형 첫 화면으로 바꿨어요

결론부터 말씀드리면, 홈페이지 리뉴얼은 글과 주소는 그대로 두고 첫 화면, 카테고리 화면, 디자인을 새로 짜는 작업이에요. 이번 사례는 중국 출장·비즈니스 블로그 차이나노트의 워드프레스 사이트예요. 최신 글이 줄줄이 나오던 첫 화면을 뉴스처럼 섹션이 나뉜 화면으로 바꿨고, 고객이 직접 글을 올리고 고쳐도 모양이 깨지지 않게 만들었어요.

이 글 요약

• 대상: 워드프레스 블로그(무료 테마 GeneratePress), 글 18편, 카테고리 3개
• 바꾼 것: 뉴스형 첫 화면, 카테고리 페이지, 사이드바, 하단 문구, 편집 화면
• 그대로 둔 것: 글 주소, 검색 제목, 기존 글 내용
• 새로 깐 플러그인: Code Snippets 1개
• 비용: 사이트 상태를 보고 견적(상담 무료)

홈페이지 리뉴얼 전에는 어떤 상태였나요?

리뉴얼 전 첫 화면은 워드프레스 기본값인 최신 글 목록이었어요. 글이 쌓일수록 첫 화면에는 가장 최근 몇 편만 보이고, 어떤 주제를 다루는 블로그인지는 한눈에 들어오지 않았어요.

그 밖에도 손볼 곳이 있었어요.

• 상단 메뉴가 지정돼 있지 않아 페이지 3개가 자동으로 떠 있었어요.
• 사이드바에는 영어로 된 기본 위젯(최근 댓글, 보관함)이 그대로 있었어요.
• 쓰지 않는 테마가 여러 개, 쓰지 않는 페이지 빌더(Elementor)도 깔려 있었어요.
• 하단에 "GeneratePress로 제작됨" 문구가 남아 있었어요.

홈페이지 리뉴얼은 어떤 순서로 진행했나요?

순서는 백업, 시안, 확인, 공개였어요. 운영 중인 사이트라 방문자에게 공사 중인 화면이 보이지 않게 하는 데 신경을 썼어요.

1. 작업 전에 UpdraftPlus로 사이트 전체를 백업해 PC에 내려받았어요. 문제가 생기면 이 상태로 되돌릴 수 있어요.
2. 첫 화면은 실제 글과 사진을 넣은 시안을 먼저 만들어 보여 드렸어요. 카테고리 화면은 시안 3개(A 언론사형, B 매거진형, C 목록형)를 버튼으로 바꿔 가며 비교할 수 있게 했어요.
3. 고른 안을 비공개 페이지와 시험 주소에서 먼저 띄워 보고, 확인을 받은 뒤 공개로 바꿨어요.

첫 화면은 어떻게 바뀌었나요?

첫 화면은 대표 기사 하나와 주제별 섹션으로 나눴어요. 위에서부터 순서는 이래요.

• 대표 기사(사진과 어두운 글 상자)와 오른쪽 최신 글 5개
• 비즈니스·트렌드 카드 3개와 문의 상자
• 출장 팁 목록 4개와 카테고리 목록
• 안내 배너, 바이어 Q&A 카드

시안에서는 사진 위에 제목 글씨를 겹쳤어요. 그런데 이 블로그는 대표 이미지 안에 이미 제목 글씨가 들어 있어서, 겹치면 글씨끼리 부딪혔어요. 그래서 사진과 글 상자를 좌우로 나눴어요.

카테고리 페이지는 왜 A형으로 정했나요?

세 시안 중 고른 것은 A 언론사 섹션형이었어요. 첫 화면과 같은 분할 상자로 맨 위 글을 크게 보여 주고, 나머지는 썸네일 목록과 페이지 번호로 이어져요.

카테고리 이름 아래에는 글 수와 다른 카테고리로 가는 버튼을 넣었어요. 사이드바 맨 위에는 문의 상자를, 최신 글에는 작은 썸네일을 붙였어요.

리뉴얼 뒤에도 고객이 직접 운영하기 쉬운가요?

리뉴얼에서 가장 신경 쓴 부분이에요. 고객이 글을 쓰고 화면을 고쳐도 디자인이 깨지지 않게 만드는 것이요.

• 새 카테고리 자동 섹션: 카테고리를 새로 만들고 글을 올리면 첫 화면 아래쪽에 그 섹션이 저절로 생겨요. 글이 없는 카테고리는 숨겨요.
• 배너를 일반 블록으로: 처음엔 코드 블록이라 고객이 문구를 못 고쳤어요. 문단·제목·버튼 블록으로 바꿔 편집기에서 바로 고칠 수 있게 했어요.
• 편집 화면도 실제처럼: 첫 화면을 편집할 때도 실제 화면과 같은 모양으로 보이게 했어요.
• 디자인은 한 곳에: 색과 글씨 크기는 전부 "추가 CSS" 한 곳에 모았어요. 강조색은 한 줄만 바꾸면 사이트 전체가 바뀌어요.

운영 중에 문의 상자 제목을 바꾸자 "있나 / 요?"처럼 단어 중간에서 줄이 끊겼어요. 그래서 한글을 단어 단위로 줄바꿈하고, 두 줄 제목은 길이를 맞추는 설정을 사이트 전체에 넣었어요.

홈페이지 리뉴얼하면 검색 노출은 괜찮나요?

글 주소를 바꾸지 않으면 리뉴얼 때문에 검색 노출이 사라지지 않아요. 이번 리뉴얼은 글 주소를 하나도 바꾸지 않았기 때문에 옛 주소를 새 주소로 넘겨 주는 작업(301 리다이렉트)이 필요 없었어요.

대신 조심할 일이 하나 있었어요. 첫 화면용 페이지 이름을 "홈"으로 정하자 검색에 뜨는 사이트 제목이 "홈 - 차이나노트"로 바뀌었어요. 검색 제목 설정(Yoast SEO)에서 사이트 이름과 소개 문구를 쓰도록 지정해 원래 제목 "차이나노트 - 중국을 직접 보고, 겪고, 기록합니다"로 돌려놨어요.

리뉴얼 중에 수정 요청은 어떤 게 나왔나요?

공개 뒤에 나온 수정 요청이에요. 대부분 실제 글과 사진을 넣어 봐야 보이는 것이었어요.

• 대표 이미지 잘림: 정사각형(1:1) 대표 이미지를 가로로 긴 틀에 넣다 보니 이미지 속 글씨가 잘렸어요. 모든 썸네일을 1:1로 바꿨어요.
• 대표 기사 아래 빈 공간: 오른쪽 목록을 작은 정사각 썸네일 5줄로 바꿔 대표 기사와 높이를 맞췄어요(473px과 479px로 측정).
• 하단 제작 문구: "GeneratePress로 제작됨"을 지우고 "© 연도 차이나노트"만 남겼어요.
• 안 쓰는 Elementor: 공개 페이지와 글 20개를 검사해 쓰는 곳이 0개인 것을 확인하고, 끈 뒤 사이트가 정상인지 보고 삭제했어요.

홈페이지 리뉴얼 업체에 맡기기 전에 무엇을 정리하면 좋나요?

아래 네 가지만 있으면 상담이 빨라요. 정리가 안 돼 있어도 괜찮아요. 사이트 주소만 보내 주시면 지금 상태부터 같이 봐요.

• 사이트 주소와, 쓰는 도구(워드프레스, 카페24, 아임웹 등)
• 마음에 드는 참고 사이트 1~2개
• 가장 바꾸고 싶은 화면(첫 화면, 상품 화면, 문의 화면 등)
• 리뉴얼 뒤 직접 고치고 싶은 부분(배너, 문구, 메뉴 등)

비용은 사이트 상태와 바꿀 화면 수에 따라 달라서, 보고 나서 견적을 드려요. 워드프레스 비용이 어떻게 정해지는지는 워드프레스 홈페이지 제작 비용 글에, 맞춤 제작과의 차이는 워드프레스 홈페이지 제작 업체 비교 글에 정리해 뒀어요.

자주 묻는 질문

홈페이지 리뉴얼하면 기존 글과 검색 순위가 사라지나요?

글 주소를 그대로 두면 사라지지 않아요. 차이나노트도 글 주소를 하나도 바꾸지 않았어요. 주소를 꼭 바꿔야 하면 옛 주소마다 새 주소로 넘겨 주는 설정을 함께 해요.

유료 테마를 새로 사야 하나요?

꼭 그렇지는 않아요. 이번 리뉴얼은 쓰던 무료 테마 GeneratePress를 그대로 두고 디자인과 기능을 얹었어요.

리뉴얼 뒤에 문구나 배너는 직접 고칠 수 있나요?

네. 배너와 문의 상자는 워드프레스 편집기의 일반 블록으로 만들어서, 글 고치듯 바꿀 수 있어요. 새 카테고리 섹션은 자동으로 생겨요.

워드프레스가 아닌 홈페이지도 리뉴얼할 수 있나요?

네. 다른 도구로 만든 사이트도 상태를 보고 그대로 손볼지, 새로 만들지 같이 정해요.

홈페이지 리뉴얼 비용은 얼마인가요?

바꿀 화면 수와 기능에 따라 달라서, 사이트를 보고 견적을 드려요. 상담과 견적은 무료예요.

우리 사이트도 이렇게 바꿀 수 있을지 궁금하면 사이트 주소를 카카오톡 채널로 보내 주세요. 맡길 수 있는 제작 범위는 제작 의뢰 안내에 있어요.