사이트 전역의 target=_blank 제거 | 모바일 새 창 링크 UX 개선

기존 사이트를 정리하다가 링크 대부분에 target="_blank"가 붙어 있는 것을 발견했습니다. 외부 링크만 그런 것이 아니라 메뉴, 게시글 제목, 페이지네이션, 자료 링크까지 새 창으로 열리고 있었습니다.

처음에는 큰 문제가 아니라고 생각했습니다. 새 창으로 열리면 기존 페이지가 남으니 사용자를 배려하는 방식처럼 보였기 때문입니다. 하지만 모바일에서 직접 눌러보니 전혀 달랐습니다. 뒤로 가기가 끊기고, 탭이 쌓이고, 사용자가 원래 보던 흐름으로 돌아가기 어려웠습니다.

이 글은 target="_blank"를 무조건 쓰지 말라는 글이 아닙니다. 오래된 사이트에서 새 창 링크를 전역으로 걷어내면서, 어떤 링크는 현재 탭으로 바꾸고 어떤 링크는 새 창으로 남겼는지 정리한 글입니다.

새 창 링크를 예외로 처리하고 보안 속성을 추가하는 PHP 링크 생성 함수 코드

사이트 전체에 남아 있던 새 창 링크

처음 확인한 코드는 이런 형태였습니다.

<a href="/board/notice" target="_blank">공지사항</a>
<a href="/board/856" target="_blank">게시글 제목</a>
<a href="/board/list.php?page=2" target="_blank">2페이지</a>

새 창 링크가 외부 사이트로 나가는 곳에만 있는 것이 아니었습니다. 내부 메뉴와 게시글 목록에도 그대로 들어가 있었습니다.

운영자 입장에서는 이유가 있었을 겁니다.

사용자가 원래 페이지를 닫지 않게 하고 싶다.

겉으로는 그럴듯합니다. 하지만 실제 사용 흐름에서는 반대로 작동했습니다. 사용자는 사이트 안에서 자연스럽게 이동하는 것이 아니라, 클릭할 때마다 새 탭을 관리해야 했습니다.

뒤로 가기가 끊긴 모바일 흐름

가장 큰 문제는 모바일에서 보였습니다. 게시판 목록에서 글을 눌렀는데 새 창으로 열리면, 사용자는 글을 읽은 뒤 뒤로 가기로 목록에 돌아가려고 합니다.

하지만 새 창에는 이전 방문 기록이 없습니다. 뒤로 가기를 눌러도 목록으로 돌아가지 않거나, 브라우저가 그냥 창을 닫는 것처럼 느껴질 수 있습니다.

원래 기대한 흐름은 이렇습니다.

목록 → 게시글 → 뒤로 가기 → 목록 → 다음 게시글

하지만 target="_blank"가 붙으면 이렇게 바뀝니다.

목록 → 새 탭으로 게시글 열림 → 뒤로 가기 불가 → 탭 닫기 → 원래 탭 찾기

이탈을 막으려고 새 창을 썼지만, 실제로는 사용자가 흐름을 잃고 떠날 가능성이 더 커졌습니다.

탭이 쌓이면서 생긴 불편

데스크톱에서는 새 탭이 몇 개 쌓이는 정도로 끝날 수 있습니다. 하지만 모바일에서는 탭 관리가 훨씬 불편합니다.

메뉴를 두세 번 누르고 게시글을 몇 개 열면 금방 탭이 여러 개가 됩니다. 백그라운드 탭은 메모리에서 내려가기도 하고, 다시 열면 페이지가 새로 로드되기도 합니다.

즉, 새 창이 기존 페이지를 안전하게 보존해준다는 생각도 항상 맞지 않았습니다.

사용자에게 필요한 것은 강제로 새 창을 띄우는 것이 아니라, 현재 탭에서 자연스럽게 이동하고 필요할 때 직접 새 탭을 선택할 수 있게 하는 것이었습니다.

사용자의 선택권을 빼앗는 문제

새 창으로 열고 싶은 사용자는 방법을 이미 알고 있습니다.

마우스 휠 클릭
Ctrl 또는 Command 클릭
길게 눌러 새 탭에서 열기
우클릭 후 새 탭에서 열기

반대로 target="_blank"가 걸린 링크를 현재 탭에서 여는 방법은 훨씬 제한적입니다. 사이트가 새 창을 강제하면 사용자의 기본 탐색 습관을 막는 셈입니다.

그래서 기준을 바꿨습니다.

기본값: 현재 탭
예외: 작업 흐름을 보호해야 하는 링크만 새 창

새 창은 배려가 아니라 예외 동작으로 봐야 했습니다.

접근성에서 생기는 혼란

스크린 리더 사용자에게도 새 창 링크는 혼란을 줄 수 있습니다. 링크를 눌렀는데 페이지가 바뀐 것인지, 새 창이 열린 것인지 바로 알기 어렵기 때문입니다.

그래서 새 창을 꼭 써야 하는 경우에는 링크 텍스트에 알려주는 편이 좋습니다.

<a href="https://external.example.org/report.pdf"
   target="_blank"
   rel="noopener noreferrer">
  연간 보고서 PDF (새 창에서 열림)
</a>

또는 보이는 문구를 짧게 유지하고 aria-label로 보완할 수 있습니다.

<a href="https://external.example.org/report.pdf"
   target="_blank"
   rel="noopener noreferrer"
   aria-label="연간 보고서 PDF, 새 창에서 열림">
  연간 보고서 PDF
</a>

중요한 것은 예상과 다른 동작을 미리 알려주는 것입니다. 사용자가 클릭한 뒤에야 새 창이 열렸다는 사실을 알게 하면 불편이 커집니다.

rel 속성까지 함께 점검

새 창 링크를 남기는 경우에는 rel="noopener noreferrer"도 같이 확인했습니다.

<a href="https://external.example.org"
   target="_blank"
   rel="noopener noreferrer">
  외부 사이트 (새 창)
</a>

rel="noopener"가 없으면 새로 열린 페이지가 window.opener를 통해 원래 페이지에 접근할 수 있습니다. 내부 링크만 있다면 위험이 작아 보일 수 있지만, 사용자가 입력한 URL이나 외부 자료 링크가 섞이면 보안 문제가 될 수 있습니다.

noreferrer는 이동한 페이지에 참조 URL을 보내지 않는 역할도 합니다. 상황에 따라 분석 데이터가 줄 수 있으니 내부 정책에 맞게 선택해야 하지만, 오래된 사이트에서는 새 창 링크에 아무 rel도 없는 경우가 많아 최소한 noopener는 붙이는 편이 안전했습니다.

링크 생성 함수의 기본값 변경

사이트 곳곳에 직접 <a> 태그를 쓰는 방식이면 수정이 끝나지 않습니다. 새 글이나 새 기능을 만들 때 다시 target="_blank"가 붙을 수 있기 때문입니다.

그래서 링크를 출력하는 공통 함수를 바꿨습니다.

<?php
function renderLink(string $url, string $label, bool $newWindow = false): string
{
    $safeUrl = htmlspecialchars($url, ENT_QUOTES, 'UTF-8');
    $safeLabel = htmlspecialchars($label, ENT_QUOTES, 'UTF-8');

    if (!$newWindow) {
        return sprintf('<a href="%s">%s</a>', $safeUrl, $safeLabel);
    }

    return sprintf(
        '<a href="%s" target="_blank" rel="noopener noreferrer">%s (새 창)</a>',
        $safeUrl,
        $safeLabel
    );
}
?>

이렇게 하면 기본은 현재 탭입니다. 새 창이 필요한 경우에만 true를 넘겨야 합니다.

echo renderLink('/board/856', '게시글 제목');
echo renderLink(
    'https://external.example.org/report.pdf',
    '연간 보고서 PDF',
    true
);

기본값을 바꾸는 것만으로 새 창 링크가 다시 늘어나는 것을 막을 수 있었습니다.

사이트 전역 검색으로 남은 target 확인

공통 함수만 고쳐도 끝이 아니었습니다. 오래된 사이트에는 직접 박힌 링크가 많았습니다. 그래서 파일 전체에서 target="_blank"를 검색했습니다.

grep -rn "target=\"_blank\"\|target='_blank'\|target=_blank" ./ --include="*.php" --include="*.html" --include="*.tpl"

찾은 뒤에는 전부 삭제하지 않고 성격별로 나눴습니다.

내부 메뉴 링크       → target 제거
게시글 제목 링크     → target 제거
페이지네이션 링크    → target 제거
외부 참고 자료 링크  → 새 창 유지 + rel 추가
PDF 다운로드 링크    → 새 창 유지 + 새 창 안내 문구
작성 중 도움말 링크  → 새 창 유지 검토

이렇게 분류하니 새 창을 남겨야 할 링크는 생각보다 많지 않았습니다.

새 창을 남긴 예외 기준

전부 현재 탭으로 바꾼 것은 아닙니다. 새 창이 더 나은 경우도 있었습니다.

링크 종류	처리	이유
내부 메뉴	현재 탭	일반 탐색 흐름
게시글 제목	현재 탭	목록으로 뒤로 가기 필요
페이지네이션	현재 탭	연속 탐색 흐름
외부 문서	새 창 가능	참고 후 돌아오는 용도
작성 폼 안 도움말	새 창 가능	작성 중 내용 보존
PDF 파일	새 창 가능	브라우저 미리보기 혼란 방지

기준은 “사이트에 붙잡아두기”가 아니었습니다. 현재 페이지에서 사용자가 하던 작업이 끊길 위험이 있는지를 봤습니다.

수정 후 확인한 사용자 흐름

수정 후에는 링크가 열리는지만 보지 않았습니다. 모바일에서 실제 탐색 흐름을 다시 확인했습니다.

메뉴 이동 후 뒤로 가기로 이전 화면 복귀
게시판 목록 → 글 → 뒤로 가기 → 목록 복귀
페이지네이션 이동 후 이전 페이지 복귀
외부 링크는 새 창 안내 문구 확인
새 창 링크에는 rel="noopener noreferrer" 포함 여부 확인
PDF 링크가 새 창에서 열리는지 확인

가장 큰 차이는 게시판 탐색이었습니다. 목록에서 글을 읽고 뒤로 가기로 돌아오는 기본 흐름이 자연스러워졌습니다. 새 창을 띄우던 때보다 사용자가 길을 잃을 가능성이 줄었습니다.

적용 후 달라진 점

수정 후에는 눈에 보이는 디자인 변화보다 사용 흐름이 좋아졌습니다.

모바일 뒤로 가기 흐름이 자연스러워짐
불필요하게 쌓이는 탭 감소
내부 메뉴와 게시판 탐색이 단순해짐
새 창 링크에 rel="noopener noreferrer" 적용
새 창이 필요한 링크에는 안내 문구 추가
링크 생성 함수의 기본값이 현재 탭으로 정리됨

분석 도구에서도 세션 흐름이 조금 더 자연스럽게 보였습니다. 새 창이 여러 번 열리면 사용자의 이동이 끊겨 보일 수 있는데, 내부 탐색을 현재 탭으로 돌리니 목록과 상세의 흐름을 파악하기 쉬워졌습니다.

target blank 점검 체크리스트

내부 메뉴 링크에 target="_blank"가 남아 있지 않은가
게시글 제목과 페이지네이션 링크가 현재 탭으로 열리는가
새 창을 남긴 링크에 rel="noopener noreferrer"가 있는가
새 창으로 열린다는 사실을 링크 텍스트나 aria-label로 알려주는가
링크 생성 함수의 기본값이 현재 탭인가
모바일에서 뒤로 가기로 목록에 돌아갈 수 있는가
PDF, 외부 문서, 작성 중 도움말처럼 예외 기준이 분명한가

새 창은 예외로 남기는 방향

target="_blank"는 사용자를 붙잡는 장치처럼 보이지만, 실제로는 탐색 흐름을 끊을 수 있습니다. 특히 모바일에서는 뒤로 가기와 탭 관리가 불편해지면서 사용자가 더 빨리 떠날 수 있습니다.

제가 얻은 기준은 단순합니다. 내부 링크는 현재 탭을 기본으로 두고, 새 창은 필요한 경우에만 예외로 남깁니다. 새 창을 열어야 한다면 그 사실을 사용자에게 알려주고, rel="noopener noreferrer"까지 같이 붙입니다.

사이트 운영자 입장에서는 새 창이 배려처럼 보일 수 있습니다. 하지만 사용자에게 더 중요한 것은 예측 가능한 이동입니다. 링크를 눌렀을 때 자연스럽게 이동하고, 뒤로 가기로 돌아올 수 있는 흐름이 더 기본에 가까웠습니다.