네이버 스마트에디터 자동 링크 문제 해결 (http 입력 시 a태그 깨짐)

네이버 스마트에디터를 사용해 글을 작성하다 보면 http 또는 https가 포함된 주소가 자동으로 <a> 태그로 변환되는 경우가 있습니다.

예를 들어 아래처럼 작성했을 때입니다.
전자공시시스템(http://dart.fss.or.kr)에서 확인하실 수 있습니다.
등록 후 실제 HTML을 보면 다음처럼 링크 태그가 깨진 상태로 저장되는 문제가 발생하기도 합니다.

전자공시시스템(<a href="">http://dart.fss.or.kr)에서</a> 확인하실 수 있습니다.

이 문제는 스마트에디터를 사용하는 사이트에서 꽤 자주 발생하는 자동 링크 처리 문제입니다.
저 역시 게시판을 개발하면서 같은 문제를 겪었고 몇 가지 방법으로 해결했습니다.

스마트에디터의 자동 URL 링크 기능

네이버 스마트에디터에는 URL 자동 링크 기능(AutoLink) 이 있습니다.
에디터 내부에서 다음 패턴을 발견하면 자동으로 링크를 생성합니다.

http://
https://
www.

문제는 문장 안에 괄호가 포함된 URL입니다.

(http://dart.fss.or.kr)
스마트에디터의 URL 파서는 다음처럼 잘못 인식하는 경우가 있습니다.
http://dart.fss.or.kr)
즉 괄호까지 URL로 인식하면서 HTML이 아래처럼 깨집니다.

<a href="">http://dart.fss.or.kr)에서</a>

게시판 프로그램을 개발하면서 아래 방법들을 사용했습니다.

URL 앞뒤에 공백을 넣기

전자공시시스템 (http://dart.fss.or.kr) 에서 확인

URL을 문장과 분리하면 자동 링크 오류가 거의 발생하지 않습니다.

괄호 대신 다른 문자 사용

괄호 때문에 URL 파싱 오류가 생기므로 아래처럼 작성합니다.

전자공시시스템 - http://dart.fss.or.kr
전자공시시스템 : http://dart.fss.or.kr

HTML 등록 후 후처리

게시판 프로그램에서 저장하기 전에 정규식으로 URL을 정리하는 방법도 있습니다.
예를 들어 PHP에서 괄호 문제를 제거하는 방식입니다.

$content = preg_replace(
	'/\((https?:\/\/[^\s\)]+)\)/',
	'(<a href="$1">$1</a>)',
	$content
);

이렇게 하면 (http://dart.fss.or.kr) 형태를 정상 링크로 변환할 수 있습니다.

자동 링크 기능 비활성화

스마트에디터 설정에서 AutoLink 기능을 끄는 방법도 있습니다.
스마트에디터2 기준으로는 플러그인을 제거하면 됩니다.

“SE2M_AutoLink.js” 이 플러그인을 제거하면 http 입력 시 자동 링크 생성이 되지 않습니다.
단점은 모든 URL을 직접 링크로 만들어야 합니다.

네이버 스마트에디터에서 http 또는 https 주소가 자동으로 a 태그로 변환되는 것은 기본 기능입니다.

하지만 URL 주변에 괄호나 특수문자가 포함되면 에디터가 URL 범위를 잘못 판단하면서 링크가 깨질 수 있습니다.

특히 아래와 같은 형태는 주의하는 것이 좋습니다.

(http://example.com)

실제 운영 중인 게시판이라면 단순히 작성 방법을 수정하는 것보다 서버에서 후처리를 통해 HTML을 정리하는 방식이 가장 안정적입니다.

개발자 입장에서는 에디터의 자동 링크 기능을 완전히 신뢰하기보다 저장 전후의 HTML을 한 번 더 검증하는 것이 좋습니다.