실행 가능한 HTML 문서: HTML 리다이렉트

Q: HTML 페이지를 다른 페이지로 리다이렉트하려면 어떻게 하나요?

기존 페이지의 에 를 넣고, 대체 수단으로 본문에 새 페이지로 가는 일반 링크를 두세요. 서버를 제어할 수 있다면 301 리다이렉트가 더 나아요.

Q: HTML에서 5초 후에 리다이렉트하려면 어떻게 하나요?

세미콜론 앞의 숫자를 초 단위 지연 시간으로 정하세요. 처럼요. 페이지에서 리다이렉트된다고 독자에게 알리고 링크도 주세요.

Q: 페이지가 자동으로 새로고침되게 하려면 어떻게 하나요?

URL 없이 지연 시간만 준 meta refresh를 쓰세요. 은 30초마다 페이지를 다시 불러와요. 페이지 전체를 다시 불러와서 독자를 방해하니, 실시간 데이터에는 JavaScript로 페이지 일부만 업데이트하는 게 보통 더 나아요.

Q: JavaScript로 리다이렉트하려면 어떻게 하나요?

location.replace('https://example.com/new')를 쓰세요. 방문 기록에서 현재 페이지를 대체하기 때문에, 뒤로 가기 버튼을 눌러도 리다이렉트한 페이지로 돌아가지 않아요. location.href = url도 동작하지만 기존 페이지가 방문 기록에 남아요.

meta refresh 태그로 리다이렉트하기

순수 HTML에서 리다이렉트는 기존 페이지의 <head>에 넣는 <meta http-equiv="refresh"> 태그예요.

<meta http-equiv="refresh" content="0; url=https://example.com/new-page">

숫자는 초 단위 지연 시간이고, 그다음 세미콜론, 그다음 url=과 이동할 주소가 와요. 0이면 페이지가 로드되자마자 리다이렉트해요. 여기 완전한 "페이지가 이동했어요" 파일이 있어요. 이 미리보기가 그대로 머물도록 지연 시간을 한 시간으로 정했어요. 실제 페이지에서는 0이나 몇 초를 쓰면 돼요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="refresh" content="3600; url=https://example.com/new-page">
  <link rel="canonical" href="https://example.com/new-page">
  <title>This page has moved</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>This page has moved</h1>
  <p>Go to the <a href="https://example.com/new-page">new page</a>.</p>
  <p id="out" style="color: #6b7280;"></p>
  <script>
    const content = document.querySelector('meta[http-equiv="refresh"]').content;
    const [seconds, target] = content.split(';');
    document.getElementById('out').textContent =
      'The browser will go to ' + target.trim().slice(4) + ' in ' + seconds + ' seconds.';
  </script>
</body>
</html>

대체 수단 두 가지가 페이지를 안전하게 만들어요. 눈에 보이는 링크(브라우저가 새로고침을 따르지 않는 사람과 직접 고르고 싶은 스크린 리더 사용자를 위해)와, 검색 엔진에 어느 URL이 진짜인지 알려 주는 <link rel="canonical">이에요. 여기서 지연 시간을 0으로 바꾸면 미리보기 자체가 example.com으로 떠나요. Reset을 누르면 예제가 돌아와요.

페이지 자동 새로고침

URL을 빼면 지연 시간 뒤에 페이지가 스스로 다시 불러와져요. content="5"는 5초마다 다시 불러와요. 아래 첫 번째 상자는 그 태그가 있는 작은 페이지라서 직접 볼 수 있어요. 로드 시각이 5초마다 바뀌고, 입력란에 쓴 텍스트는 새로고침 때문에 지워져요. 두 번째 상자는 대신 JavaScript로 시계를 최신으로 유지하고, 입력한 텍스트도 남아요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Auto refresh</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .pane { flex: 1; min-width: 220px; border: 2px solid #e5e7eb; border-radius: 8px; padding: 10px; }
    iframe { width: 100%; height: 110px; border: 0; }
    h2 { font-size: 14px; margin: 0 0 6px; }
  </style>
</head>
<body>
  <div class="row">
    <div class="pane">
      <h2>meta refresh, content="5"</h2>
      <iframe id="refreshing" title="Page that refreshes itself"></iframe>
    </div>
    <div class="pane">
      <h2>JavaScript, setInterval</h2>
      <p>Time: <strong id="clock"></strong></p>
      <input placeholder="Type here">
    </div>
  </div>
  <script>
    document.getElementById('refreshing').srcdoc =
      '<meta http-equiv="refresh" content="5">' +
      '<body style="font-family: system-ui, sans-serif; margin: 0;">' +
      '<p>Loaded at: <strong id="t"></strong></p>' +
      '<input placeholder="Type here">' +
      '<script>t.textContent = new Date().toLocaleTimeString();<\/script>';
    const tick = () => { document.getElementById('clock').textContent = new Date().toLocaleTimeString(); };
    tick();
    setInterval(tick, 1000);
  </script>
</body>
</html>

새로고침은 페이지 전체를 다시 불러와서, 독자가 그 페이지에서 하던 일을 끊어요. 벽에 걸린 상태 화면처럼 아무도 조작하지 않는 페이지라면 괜찮아요. 대시보드, 점수, 피드에는 두 번째 상자처럼 바뀌는 부분만 업데이트하세요.

JavaScript로 리다이렉트하기

사용자의 선택, 로그인 상태, 화면 크기처럼 브라우저만 아는 무언가에 따라 리다이렉트해야 한다면 JavaScript를 쓰세요.

// Replaces the current page in the history: Back skips it
location.replace('https://example.com/new-page');

// Adds a history entry: Back returns to this page
location.href = 'https://example.com/new-page';

리다이렉트에는 거의 항상 location.replace가 맞아요. location.href를 쓰면 뒤로 가기를 눌렀을 때 리다이렉트한 페이지로 돌아가고, 그 페이지가 다시 리다이렉트해서 사용자가 갇혀요.

서버 리다이렉트를 쓰세요

meta refresh나 스크립트는 브라우저가 기존 페이지를 내려받은 뒤에야 실행돼요. 서버 리다이렉트는 HTML을 보내기 전에 상태 코드와 새 주소로 요청에 응답해요.

301(영구 이동) 또는 308: 페이지가 완전히 새 위치로 옮겨졌어요. 검색 엔진은 기존 URL의 순위를 새 URL로 옮겨요.
302(찾음) 또는 307: 임시 이동이에요. 기존 URL이 계속 주 URL이에요.

설정 방법은 호스팅에 따라 달라요. 흔한 형태 몇 가지예요.

# Apache (.htaccess)
Redirect 301 /old-page https://example.com/new-page

# nginx (inside a server block)
location = /old-page { return 301 https://example.com/new-page; }

# Netlify or Cloudflare Pages (_redirects file)
/old-page  /new-page  301

리다이렉트 규칙이 없는 정적 호스팅처럼 서버를 전혀 바꿀 수 없을 때 meta refresh를 쓰세요. Google은 즉시 이동하는 meta refresh를 영구 리다이렉트로, 지연이 있는 것을 임시 리다이렉트로 취급하니, 지연 0이 301에 더 가까워요.

시간 지연 리다이렉트와 접근성

지연이 있는 리다이렉트는 독자가 문장을 읽는 도중에 다른 곳으로 보내 버릴 수 있어요. 접근성 지침(WCAG)은 시간 지연 리다이렉트를 실패로 보고, 즉시 리다이렉트는 괜찮다고 봐요. 꼭 기다려야 한다면 페이지에 알리고("10초 후에 이동합니다"), 사람들이 자기 속도로 이동할 수 있도록 항상 링크를 넣으세요.

자주 하는 실수

리다이렉트 루프. 서로를 새로고침하는 두 페이지는 독자를 끝없이 왔다 갔다 하게 해요. 대상 페이지가 사람들을 어디로 보내는지 확인하세요.
엉뚱한 곳을 가리키는 상대 URL. url=new-page는 현재 URL 기준으로 해석되어서, /docs/old에서는 /docs/new-page로 가요. 헷갈리면 url=/new-page 같은 전체 경로를 쓰세요.
대체 링크가 없음. 본문에 새 페이지로 가는 일반 링크를 항상 넣으세요.
리다이렉트에 location.href를 씀. 뒤로 가기 버튼이 리다이렉트 루프로 이어져요. location.replace를 쓰세요.
서버를 제어할 수 있는데 meta refresh를 씀. 대신 301을 설정하세요. 더 빠르고 모든 도구에 더 명확해요.

자주 묻는 질문

HTML 페이지를 다른 페이지로 리다이렉트하려면 어떻게 하나요?

기존 페이지의 <head>에 <meta http-equiv="refresh" content="0; url=https://example.com/new">를 넣고, 대체 수단으로 본문에 새 페이지로 가는 일반 링크를 두세요. 서버를 제어할 수 있다면 301 리다이렉트가 더 나아요.

HTML에서 5초 후에 리다이렉트하려면 어떻게 하나요?

세미콜론 앞의 숫자를 초 단위 지연 시간으로 정하세요. <meta http-equiv="refresh" content="5; url=https://example.com/new">처럼요. 페이지에서 리다이렉트된다고 독자에게 알리고 링크도 주세요.

페이지가 자동으로 새로고침되게 하려면 어떻게 하나요?

URL 없이 지연 시간만 준 meta refresh를 쓰세요. <meta http-equiv="refresh" content="30">은 30초마다 페이지를 다시 불러와요. 페이지 전체를 다시 불러와서 독자를 방해하니, 실시간 데이터에는 JavaScript로 페이지 일부만 업데이트하는 게 보통 더 나아요.

meta refresh 리다이렉트는 SEO에 나쁜가요?

Google은 따라가요. 즉시 이동하는 meta refresh(지연 0)는 영구 리다이렉트처럼, 지연이 있는 것은 임시 리다이렉트처럼 취급해요. 그래도 더 빠르고 모든 크롤러와 브라우저가 이해하기 때문에 서버 쪽 301이 권장 방법이에요.

JavaScript로 리다이렉트하려면 어떻게 하나요?

location.replace('https://example.com/new')를 쓰세요. 방문 기록에서 현재 페이지를 대체하기 때문에, 뒤로 가기 버튼을 눌러도 리다이렉트한 페이지로 돌아가지 않아요. location.href = url도 동작하지만 기존 페이지가 방문 기록에 남아요.