[웹사이트] Awair 홈페이지 통합하기 - 웹플로우로 만드는 다국가 홈페이지

웹플로우는 개발자의 도움 없이도 홈페이지를 수월하게 관리할 수 있도록 돕습니다. 자바스크립트에 대한 이해가 높을수록 더 높은 수준의 웹사이트를 만들 수 있습니다. 저는 어웨어에 입사하기 전부터 웹플로우를 통해 웹사이트를 제작해왔는데, 다행히도 어웨어는 웹플로우로 웹사이트를 제작/관리하는 흔치 않은 회사였습니다.

 

그런데 어웨어가 모든 홈페이지를 웹플로우로 제작하여 관리하는 건 아니었습니다. 어웨어는 여러 국가를 대상으로 사업해서 국가별로 다른 웹사이트를 갖고 있었는데, 빌딩 방식 역시 달랐습니다.

 

두 개의 독립된 웹플로우 홈페이지

미국 홈페이지: www.getawair.com

영국/유럽 홈페이지: uk.getawair.com

 

미국 홈페이지와 영국 홈페이지는 각각 독립적으로 존재했기 때문에 다음과 같은 문제가 있었습니다.

• 정보를 업데이트할 때마다 같은 작업을 각각의 홈페이지에 해야한다.
• 호스팅비가 두 배로 발생한다.

 

그런데, 사실 두 웹사이트는 가격 정보만 다르고 나머지 내용은 모두 같았습니다. 두 홈페이지 모두 미국식 영어로 서비스를 소개했었죠.

 

개발팀에 의해 빌딩된 웹사이트

한국 홈페이지: kr.getawair.com

일본 홈페이지: jp.getawair.com

 

이외에도 어웨어에는 예전 개발팀이 빌딩한 웹사이트가 있었습니다. 개발자가 만든 웹사이트는 개발팀이 반드시 필요하다는 문제가 있습니다. 하지만 어웨어의 개발팀은 홈페이지의 업데이트를 도와줄 수 없다는 문제가 있었습니다.

• 새롭게 빌딩되었기 때문에 코드에 대한 이해도가 낮다.
• 더 중요한 업무로 이미 매우 바쁜 상태이다.
• 회사는 한국 비즈니스에 많은 리소스를 쓰고싶지 않다.

따라서, 수년 동안 한국홈페이지의 정보를 업데이트할 수 없었습니다.

 

저는 네 홈페이지를 모두 웹플로우로 통합함으로써 유지/관리를 용이하도록 개선했습니다.

4개의 도메인이 모두 한 웹사이트에 연결되었습니다.

 

미국과 영국 홈페이지 통합하기

앞서 말씀드렸다시피 두 홈페이지의 정보는 거의 같습니다. 오직 가격만이 달랐죠. 저는 uk.getawair.com 도메인을 영국 홈페이지가 아니라 미국 홈페이지로 연결했습니다. 기존에 미국 홈페이지로 제작된 웹사이트는 www.getawair.com, uk.getawair.com 두 도메인이 모두 연결되게 되었죠.

 

그리고 다음으로 했던 작업은 서브도메인에 따라 보여주는 정보를 다르게 하는 것이었습니다. 즉, www.getawair.com으로 방문할 경우 미국 가격 정보를, uk.getawair.com으로 방문할 경우 영국 가격 정보를 노출하도록 변경한 것이죠.

웹플로우에서는 두 웹사이트의 가격 정보가 모두 포함되어 있습니다,

 

이를 위해서는 자바스크립트를 활용했습니다. 웹플로우로는 두 가지 가격을 모두 작성해두고, 각각의 가격에 Value를 부여했죠. 그리고 자바스크립트를 통해 설정한 Value에 따라 필요없는 가격을 지우도록 했습니다.

const deleteDiv = function() {
  if (country == "UK") {
    document.querySelectorAll('[country="US"]').forEach(function(e) {
      e.parentElement.removeChild(e);
    });
  } else if (country == "US") {
    document.querySelectorAll('[country="UK"]').forEach(function(e) {
      e.parentElement.removeChild(e);
    });
  }
};

 

한국 홈페이지 통합하기

한국 홈페이지를 통합하는 과정은 미국, 영국 홈페이지를 통합하는 것과 다소 달랐습니다. 왜냐하면 사용하는 폰트와 HTML의 언어 값이 다르기 때문이었습니다. 

한국어 홈페이지를 별도로 생성

가장 먼저 저는 한국 홈페이지에 사용할 페이지들을 먼저 만들었습니다. 그리고 자바스크립트를 통해 kr 서브도메인(가령, kr.getawair.com)으로 접속할 경우, 앞서 만든 페이지(www.getawair.com/kr/home)로 리다이렉팅 시켰습니다.

  var redirectKR = function() {
    if (subdomain == "kr"){
      window.location.href='http://www.getawair.com/kr/home';
    }
  }

 

 

그리고 한국어 페이지에 도달했을 때 HTML의 언어 값을 한국어로 바꿔줬습니다. 

if (country == "KR") {
	document.documentElement.setAttribute("lang", 'kr');
}

 

일본 홈페이지

일본에서는 매출이 없었기에 일본 홈페이지는 기존 미국 홈페이지로 이동하도록 수정했습니다.

 

이제 어웨어의 모든 웹사이트들은 기술적으로 하나의 웹사이트입니다.

이를 통해, 호스팅 비용 절감과 운영 효율화를 동시에 얻었습니다.

• 미국 홈페이지: www.getawair.com
• 영국/유럽 홈페이지: uk.getawair.com
• 한국 홈페이지: kr.getawair.com
• 일본 홈페이지: jp.getawair.com