웹사이트 공사 중 페이지 만드는 방법

웹사이트를 전면 개편하거나 수리하는 작업은 꽤 부담스럽게 느껴질 수 있습니다. 먼저, 사이트가 공사 중일 때 아무나 들여다보지 못하도록 일종의 가림막 뒤에 숨겨야 합니다. 그리고 사이트에 접근이 불가능해지면 방문자들은 혼란스러워할 수 있습니다. 사이트가 일시적으로 이용 불가능하다는 이유로 고객, 트래픽, 또는 Google 검색 순위를 잃고 싶어하는 사람은 없습니다.

다행히 간단한 해결책이 있습니다. 웹사이트에 ‘공사 중’ 페이지를 추가하는 것입니다. 공사 중 페이지를 스마트하게 디자인하면 브랜드 평판을 보호하고 부정적인 SEO 영향을 방지할 수 있습니다.

본 블로그에서 최대한 효과적으로 공사 중 페이지를 구축하고 시작하는 방법을 알아보세요.

웹사이트 공사 중 페이지란 무엇인가요?

웹사이트 공사 중 페이지는 웹사이트에 대대적인 변경사항 적용이 진행 중일 때 표시되는 임시 페이지입니다. 쉽게 말해, 사이트가 일시적으로 이용 불가능하다는 것을 방문자에게 알리는 것이 목적인 페이지입니다. 사이트가 공사 중인 동안에는 사이트를 탐색할 수 없다는 것을 알려야 사용자가 깨진 링크나 불완전한 콘텐츠를 보게 되는 상황을 방지할 수 있습니다. 마치 상점 창문에 "공사 진행으로 임시  휴업"과 같은 안내문을 붙이는 것과 같습니다.

"공사 중" 안내 페이지의 장점은 무엇인가요?

공사 중 페이지를 만들면 방문자가 사이트가 왜 바뀌었는지, 언제 돌아오는지 이해할 수 있도록 도와주므로 더 나은 고객 경험을 제공합니다. 특히 신규 업체라면 브랜드 인지도를 높일 수도 있습니다. 공사 모드를 마케팅 기회로 활용하세요. 사이트가 라이브되기 전까지 화제를 만들고 가입 이메일을 수집하세요. 그 동안 웹 트래픽을 Instagram(인스타그램), Facebook(페이스북), LinkedIn(링크드인) 같은 소셜 미디어 플랫폼으로 리디렉션하여 고객이 계속해서 회사와 소통할 수 있도록 할 수 있습니다.

웹사이트 공사 중 페이지 사용 사례

다음과 같은 이유로 대대적인 수정이나 업데이트가 필요할 때마다 “공사 중 모드를 활성화하는 것이 좋습니다.

• 대대적인 재디자인 및 재구축. 기존 사이트를 완전히 개편할 때 사용하세요. 예를 들어, 호스팅 플랫폼 변경, 새로운 디자인으로 리브랜딩, 또는 제품 카테고리 재구성 등입니다.
• 백엔드 유지보수. 보안상의 이유로 전체 사이트를 잠시 오프라인으로 전환해야 하는 경우가 있습니다. 데이터 무결성을 유지하기 위해 중요한 업데이트나 버그 수정을 수행해야 할 때 공사 중 모드를 활용할 수 있습니다.
• 초기 개발 단계. 도메인을 등록했지만 온라인 스토어를 출시할 준비가 되지 않았을 때, 이 페이지를 사용해 방문자에게 사이트 작업이 진행 중임을 알릴 수 있습니다. 출시 날짜가 가까워지면 공사 중 페이지를 출시 예정 페이지로 변경할 수 있습니다.

출시 예정 페이지 사용 시점

출시 예정 페이지는 공사 중 페이지와 비슷하게 임시로 표시되는 페이지입니다. 하지만 출시 예정 페이지는 보다 전략적인 마케팅 목적을 갖고 있습니다. 공사 중 페이지가 “사이트에 문제가 있어 수정 중임”이라는 인상을 준다면, 출시 예정 페이지는 새로운 사이트나 브랜드, 스토어에 대한 기대감을 조성하는 데 초점을 둡니다. 이메일 가입, 소셜 미디어 팔로우, 사전 주문 같은 방식으로 방문자의 참여도 유도합니다.

다음과 같은 경우에는 공사 중 페이지보다 출시 예정 페이지를 사용하는 것이 좋습니다.

• 새 웹사이트 출시. 전자상거래 스토어를 출시하기 전에, 제품에 관심 있는 잠재고객들의 이메일을 수집하고 기대감을 조성할 수 있습니다.
• 신제품/컬렉션 사전 출시. 새로운 제품 라인을 발표할 때, 사전 주문 기능을 제공해 수요를 파악하고 고객이 정식 출시 전에 아이템을 예약할 수 있도록 할 수 있습니다.
• 리브랜딩. 새로운 브랜드 정체성을 티저 형태로 공개하며, 업그레이드된 룩앤필(look and feel)에 대한 관심을 끌어낼 수 있습니다.
• 이벤트/세일 프로모션. 예정된 반짝 세일, 시즌 이벤트, 특별 프로모션을 미리 알리고, 알림 수신용 이메일 가입을 유도할 수 있습니다.

Shopify 웹사이트를 "공사 중"으로 설정하는 방법

웹사이트에 대대적인 수정이나 유지보수가 필요할 경우, 공사 중 모드(유지보수 모드라고도 함)를 활성화해야 합니다. 이 기능은 사이트를 비공개로 전환하고, 방문자에게 나중에 다시 방문하라는 메시지를 보여줍니다. Shopify에서는 이를 간단하게 설정할 수 있습니다.

Shopify의 기본 비밀번호 페이지 사용하기

이는 스토어를 공사 중 상태로 전환하는 가장 쉽고 빠른 방법입니다. Shopify는 바로 활성화해서 커스터마이징할 수 있는 기본 비밀번호 보호 페이지를 제공합니다. 코딩 지식도 필요하지 않습니다. 아래 단계를 따라 설정할 수 있습니다.

1. Shopify 관리자로 이동합니다.

2. 온라인 스토어 > 환경설정으로 이동합니다.

3. 스토어 액세스 제한/비밀번호 보호 섹션을 찾습니다.

4. "비밀번호로 방문자 액세스 제한" 옆의 체크박스를 선택합니다.

5. 액세스 권한을 부여하고 싶은 사람(팀 멤버나 베타 테스터 등)과 공유할 비밀번호를 해당 필드에 입력합니다.

6. 텍스트 필드에 방문자에게 보여줄 메시지를 작성합니다. 이 필드를 비워두면 방문자가 혼란스러울 수 있으니 간단히 몇 줄이라도 남기는 것이 좋습니다.

7. 저장을 클릭합니다.

비밀번호 보호를 활성화하면 누군가 웹사이트에 접속할 때마다 비밀번호 페이지가 표시되어, 원치 않는 접근을 차단합니다. 이 페이지가 사실상 공사 중 페이지(또는 출시 예정 페이지) 역할을 하게 됩니다. 이 페이지에는 다음과 같은 특별한 기능이 있습니다.

• 테마 에디터에서 일반 페이지와 구분되는 전용 헤더와 푸터 섹션
• 고객이 웹사이트 재오픈 소식을 받아볼 수 있도록 구독을 유도하는 이메일 가입 배너 섹션

비밀번호 페이지 설정 편집하기

비밀번호 페이지는 원하는 대로 자유롭게 사용자 지정할 수 있습니다. Shopify 테마 에디터에서 콘텐츠, 색상 구성, 폰트 등을 직접 수정할 수 있으며, 제공되는 설정은 사용하는 테마와 템플릿에 따라 달라질 수 있습니다. 아래 단계를 따라 편집 옵션을 살펴보세요.

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

2. 편집할 테마를 찾아 사용자 지정(customize)을 클릭합니다.

3. 홈페이지 드롭다운 메뉴를 클릭한 다음 비밀번호를 클릭합니다.

비밀번호 페이지의 섹션을 편집하려면 다음 단계를 따르세요.

1. 편집하고 싶은 섹션을 클릭합니다. 대부분의 테마에서는 헤더, 콘텐츠, 공사 템플릿, 푸터 섹션을 편집할 수 있습니다.

2. 변경사항을 적용합니다. 예를 들어, 헤더에 브랜드 로고를 추가하고, 이메일 가입 배너와 맞춤 메시지를 추가하고, 푸터에 소셜 미디어 링크를 추가할 수 있습니다.

3. 필요하다면 비밀번호 페이지에 추가 세부 사항이 있는 다른 섹션과 블록을 추가하세요.

4. 저장을 클릭합니다.

플러그인으로 온라인 스토어를 "공사 중"으로 설정하는 방법

공사 중 페이지를 설정하는 또 다른 방법은 Shopify 앱 스토어의 WordPress 플러그인이나 유사한 Shopify 앱을 사용하는 것입니다. 복잡한 기술 작업을 대신 처리하는 플러그인을 이용하면, 코딩 지식 없이도 페이지를 디자인하고 활성화할 수 있습니다.

이러한 플러그인에 인기 있는 플랫폼인 WordPress의 일반적인 단계는 다음과 같습니다:

1. 로그인. WordPress 관리자 대시보드에 로그인합니다. yourdomain.com/wp-admin으로 이동하세요.

2. 플러그인 찾기. 사이드바의 플러그인으로 이동해 새로 추가하기를  클릭합니다. 검색창에 선택한 공사 중 템플릿 플러그인의 이름을 입력합니다. 일부 플러그인은 이를 유지보수 모드 페이지라고 부릅니다.

3. 플러그인 설치. 검색 결과에서 플러그인을 찾아 지금 설치를 클릭한 다음 활성화를 클릭합니다.

설정 메뉴(또는 WordPress 사이드바의 플러그인 전용 새 메뉴) 아래에서 설정을 조정할 수 있습니다. 

정확한 설정은 플러그인에 따라 다르지만, 일반적으로 다음과 같은 단계를 따릅니다.

1. 공사 중 또는 유지보수 페이지 모드 활성화. 모드를 켜는 토글이나 상태 옵션을 찾으세요.

2. 페이지 디자인. 공사 웹사이트 템플릿 중 하나를 선택한 다음 콘텐츠를 커스터마이징합니다. 헤드라인, 서브헤딩, 본문 텍스트를 편집해 사이트가 공사 중이라는 것과 그 이유를 명확하게 전달하세요.

3. 자산 업로드. 로고를 업로드하고 브랜드 색상과 폰트를 선택합니다. 카운트다운 타이머, 이메일 가입 양식, 소셜 미디어 링크, 연락처 정보 같은 핵심 요소를 포함하세요.

4. 선택적 예외사항. 일부 사용자(예: 관리자, 편집자)가 공사 중 페이지를 보지 않도록 제외하고 싶을 수 있습니다. 그러면 팀이 방문자는 임시 페이지를 보는 동안 여전히 라이브 사이트에 액세스해서 작업할 수 있습니다.

4. SEO 설정 관리. 공사 중 페이지의 SEO 제목, 메타 설명, 키워드를 구성합니다. 플러그인이 올바른 HTTP 상태 코드(유지보수 모드의 경우 ‘503 Service Unavailable’)를 전송하는지 확인하세요. 이는 검색 엔진에게 나중에 다시 확인하라고 알려주며, 검색 결과 순위에는 부정적인 영향을 주지 않습니다.

5. 이메일 마케팅과 통합. 일부 플러그인은 이메일 마케팅 서비스(Mailchimp, ConvertKit 등)와 통합되어 새로운 가입자를 목록에 쉽게 추가할 수 있습니다.

6. 미리보기 및 게시. 플러그인의 미리보기 기능을 사용해 페이지가 다양한 기기(데스크톱, 태블릿, 모바일)에서 방문자에게 어떻게 보일지 확인하세요. 완료하려면, 변경사항을 저장하고 활성화하세요.

웹사이트를 다시 접속하도록 만드는 방법

웹사이트를 다시 온라인 상태로 전환할 준비가 되면, Shopify의 기본 비밀번호 보호 기능을 사용한 경우 이전에 설정했던 동일한 섹션으로 이동해 액세스 제한 체크박스를 해제한 뒤 변경 사항을 저장하면 됩니다.

플러그인의 경우, 플러그인 설정으로 이동해 상태를 ‘꺼짐’ 또는 ‘비활성화’로 전환하면 됩니다. 그러면 전체 웹사이트가 다시 공개되어 누구나 다시 접속할 수 있게 됩니다.

웹사이트 공사 중 페이지에 포함할 내용

• 눈길을 끄는 헤드라인과 설명 문구
• 예상 시작 날짜 또는 진행 상황
• 매력적인 비주얼
• 명확한 행동 유도 문구(CTA)
• SEO 키워드
• 연락처 정보
• 소셜 미디어 링크

공사 중 페이지에 포함해야 할 내용은 다음과 같습니다.

눈길을 끄는 헤드라인과 설명 문구

사이트가 일시적으로 이용할 수 없거나 준비 중임을 방문자에게 안내하는 사용자 친화적인 메시지를 작성하세요. 긍정적인 톤을 유지하면서 사이트가 왜 공사 중인지 간단히 설명하면 좋습니다. 방문자는 상황을 미리 공유받는 것을 선호합니다. 메시지에는 다음과 같은 주요 질문에 대한 답변이 포함되면 도움이 됩니다.

• 사이트가 왜 닫혀있나요?
• 언제 다시 열리나요?
• 다른 곳을 통해 서비스를 이용할 수 있나요?
• 어떻게 연락할 수 있나요?

Baking a Difference는 고객을 배려하여 공사 중 페이지를 어떻게 제작할 수 있는지를 잘 보여주는 사례입니다. 스토어가 현재 구축 중이며 기술적 이유로 지연되고 있음을 방문자에게 알리고, 재오픈 예정 날짜를 제시하여 기대치를 명확히 설정합니다. 또한 브랜드 강화를 위해 로고를 표시하고, 방문자가 이메일 알림 목록에 가입할 수 있도록 안내합니다. 소셜 아이콘은 페이지 하단의 푸터에 배치되어 있습니다. 이처럼 단순하면서도 명확하고 정보가 담긴 페이지는 사이트가 오프라인 상태일 때 생길 수 있는 불필요한 궁금증을 말끔히 해소하는 데 도움이 됩니다.

예상 시작 날짜 또는 진행 상황

가능하다면 스토어가 언제 정상 운영될 예정인지에 관한 시간 정보를 추가하세요. 구체적인 날짜, 예상 오픈일, 혹은 진행률을 표시하는 막대(바) 형태도 괜찮습니다. 이는 방문자에게 “곧 다시 열립니다”라는 신호를 주며, 다시 방문하도록 유도합니다. 반면, 방문자가 아무 정보도 없는 빈 페이지를 보게 되면 사이트가 왜 이용 불가능한지조차 전혀 알 수 없습니다. 이는 방문자에게 정보를 제공하고, 재참여를 유도할 중요한 기회를 놓치는 셈입니다.

예를 들어, 아래에 보이는 비밀번호 보호 페이지는 로고와 화려한 배경을 사용하고 있지만, 사이트가 왜 오프라인인지, 공사 중인지, 언제 다시 열리는지에 대한 설명이 전혀 없습니다. 이는 방문자에게 혼란을 줄 가능성이 매우 큽니다.

GRIM 고스 주얼리 리테일러의 공사 중 페이지와 비교해보세요. 여기서는 최소한 몇 가지 정보를 제공합니다. 예를 들어, “사이트가 곧 열린다”는 안내가 있으며, 헤더에는 “사이트가 테스트 중”이라는 추가 맥락과 우측 상단의 비밀번호로 입장 링크도 볼 수 있습니다. 시기에 관한 정보는 없지만, 방문자는 적어도 지금 사이트에 어떤 작업이 진행되고 있는지 감을 잡을 수 있습니다. 또한 푸터에 있는 소셜 아이콘은 방문자가 브랜드 소식을 계속 팔로우할 수 있는 또 다른 경로를 제공합니다. 그리고 푸터의 소셜 아이콘은 계속 이들 브랜드에 접근할 수 있는 다른 방법을 안내합니다.

매력적인 비주얼

임시 페이지라도 전문적인 인상을 주어야 합니다. 브랜드의 미적 감각을 반영한 고품질 이미지, 로고, 그리고 매력적인 배경 이미지나 색상을 활용하세요. 흔한 기본 공사 중 페이지만큼 아마추어스럽게 보이는 것은 없으며, 아무 정보도 없는 빈 페이지는 더 좋지 않습니다. 이런 경우, 고객이나 검색 엔진이 해당 사이트가 완전히 중단된 것으로 잘못 인식할 수도 있습니다.

Moonless 의류 스토어의 공사 중 페이지는 브랜드 색상과 스토어 로고, 제품 이미지 캐러셀, 이메일 가입 옵션 등을 포함하고 있습니다. 특히 출시 예정 날짜가 눈에 띄게 표시되어 있어 방문자에게 명확한 기대치를 전달합니다.

명확한 행동 유도 문구(CTA)

CTA를 추가해 방문자가 다음에 무엇을 하면 되는지 안내하세요. 이메일 가입이나 소셜 미디어 팔로우 링크 같은 옵션을 제공하면, 방문자의 관심을 유지하고 잠재고객을 확보하는 데 도움이 됩니다.

공정무역 패션 스토어인 BYTAVI의 공사 중 페이지에서는 맞춤 메시지를 통해 방문자에게 사이트가 곧 오픈될 예정임을 알리고, CTA 이메일 가입 버튼을 제공합니다. 푸터에는 Facebook(페이스북)과 Instagram(인스타그램) 링크가 있어 관심 있는 고객이 브랜드를 팔로우하며 계속 소식을 받아볼 수 있습니다. 폰트와 배경색도 브랜드 정체성을 반영해 맞춤화되어 있습니다.

SEO 키워드

사이트가 오프라인인 동안에도 검색 엔진 최적화(SEO)는 계속 유지해야 합니다. 검색 순위가 떨어지지 않도록 관리하는 것이 중요합니다. 이를 위해 공사 중 페이지의 제목, 메타 설명, 본문 메시지에 관련 키워드를 적절히 포함하세요. 이렇게 하면 검색 엔진이 크롤링할 콘텐츠가 생기고, 사이트가 일시적으로 오프라인일 뿐 계속 운영 중이라는 신호를 전달할 수 있습니다.

공사 중 모드를 플러그인으로 설정한 경우, 해당 페이지가 검색 엔진에 HTTP 503 Service Unavailable(HTTP 503 서비스 이용 불가) 상태 코드를 보내는지 반드시 테스트하세요. 이 상태 코드는 사이트가 유지보수를 위해 일시적으로 접속 불가 상태라는 것을 검색 엔진에 알려 SEO 순위를 보호해 줍니다. Shopify를 사용하는 사이트는 이 과정이 자동으로 처리됩니다.

연락처 정보

잠재고객과 파트너가 긴급한 문의를 위해 쉽게 연락할 수 있도록 관련 연락처 정보를 추가하세요. 이메일 주소, 전화번호, 또는 간단한 이메일 연락 양식을 포함할 수 있습니다. 일반적으로 문의하기 페이지에 들어가는 정보와 동일하다고 보면 간단합니다.

예를 들어, 애슬레저 의류 소매업체인 Athleia House of Versatile의 공사 중 페이지는 헤더에 브랜드 로고와 함께 긍정적인 메시지를 담고 있습니다. 페이지 중앙에는 간단한 연락 양식이 자리하고, 푸터에는 여러 소셜 아이콘이 배치되어 있습니다. 이 페이지를 방문하는 사람들은 사이트가 현재 구축 중이며 가까운 시일 내에 공개될 것임을 명확하게 알 수 있습니다.

소셜 미디어 링크

Instagram, LinkedIn, Facebook 등 소셜 미디어 프로필 링크를 추가하세요. 이렇게 하면 사이트에 다시 접속할 수 있기 전에도 고객이 브랜드와 소통할 수 있는 대체 채널을 제공할 수 있습니다. 또한 소셜 미디어 피드에서 웹사이트 상태 업데이트 정보를 공유하거나 고객 문의에 응답하는 데에도 활용할 수 있습니다.