JavaScript로 웹사이트 푸터의 현재 연도 자동 업데이트하기

웹사이트 푸터에 현재 연도를 자동으로 업데이트하는 것은 생각보다 아주 간단한 작업입니다. 그러나 의외로 많은 웹사이트 운영자들이 현재 연도를 표시하는 것이 얼마나 중요한지 인식하지 못하고 있습니다. 현재 연도 표시는 저작권 보호 차원에서도 중요하지만, 방문자에게 사이트가 지속적으로 관리되고 있다는 신뢰감을 주는 역할도 합니다.

대부분의 오래된 웹사이트, 심지어 일부 최신 사이트에서도 푸터의 HTML은 다음과 같은 형태로 작성되어 있습니다.

<span>© 2018 Company Name</span>

이 코드의 구성 요소는 다음과 같습니다.

© 기호를 사용한 저작권 표시
연도 표기
회사명

이처럼 정적(static) 타임스탬프 방식을 사용하면 웹사이트 운영자는 매년 새해가 될 때마다 연도를 수동으로 수정해야 합니다. 이는 매우 비효율적인 방식입니다.

게다가 모든 웹사이트가 푸터 정보를 손쉽게 수정할 수 있는 사용자 친화적인 관리자 대시보드를 갖추고 있는 것은 아닙니다. 그렇다면 운영자는 직접 HTML 파일을 열어 수정하거나, 개발자에게 수정을 의뢰해야만 합니다. 결국 시간과 비용이 불필요하게 낭비되는 셈입니다.

구식 타임스탬프가 브랜드 이미지에 미치는 악영향

현재 연도가 아닌 과거 연도가 표시되어 있으면, 실제로 사이트가 잘 관리되고 있더라도 방문자에게는 방치된 웹사이트처럼 보일 수 있습니다. 오늘 어떤 웹사이트에 방문했는데 저작권 연도가 2015년으로 되어 있다면 어떻게 느끼시겠습니까?

그렇습니다. "이 사이트는 아직 운영 중인가?"라는 의문이 들 것입니다. 이는 곧바로 사이트에 대한 신뢰도 하락으로 이어집니다.

이 글을 끝까지 읽고 나면, 여러분의 사이트든 고객의 사이트든 더 이상 이런 고민을 할 필요가 없어질 것입니다.

JavaScript getFullYear() 메서드로 현재 연도 표시하기

앞서 본 정적 타임스탬프 대신, JavaScript의 기본 날짜 메서드인 getFullYear()를 푸터에 적용하여 동적으로 만들어 보겠습니다.

먼저 브라우저 개발자 콘솔(또는 콘솔 기능이 있는 에디터)에 아래 코드를 입력해 동작을 테스트해 보겠습니다.

document.write(new Date().getFullYear());

Enter 키를 누르면 브라우저 화면 좌측 상단에 현재 연도가 출력되는 것을 확인할 수 있습니다.

아래 CodePen 예제에서도 실제 코드가 작동하는 모습을 확인할 수 있습니다. 콘솔 창을 살펴보세요.

정상적으로 작동하는 것을 확인했다면, 이제 getFullYear() 코드를 앞서 만든 푸터 HTML 안에 넣어 보겠습니다.

<span>
  &copy;<script>document.write(new Date().getFullYear());</script> Company Name
</span>

실행 결과는 다음과 같습니다.

축하합니다! 이제부터는 연도를 일일이 수정할 필요가 전혀 없습니다. JavaScript가 방문자의 시스템 시간을 기준으로 항상 올해 연도를 자동으로 표시해 줍니다.

설립 연도와 현재 연도 함께 표시하기

예를 들어 시작 연도가 2016년이라면, 위 코드에 2016-을 추가하기만 하면 됩니다.

<span>
  &copy; 2016-<script>document.write(new Date().getFullYear());</script> Company Name
</span>