[유용정보] HTML5의 placeholder 속성

placeholder 속성은 한 단어나 짧은 구로 이루어진 ‘힌트’를 나타냅니다. 이러한 힌트는 사용자가 입력 상자에 데이터를 입력하는데 도움을 줍니다. 보통 아이디나 비밀번호를 입력하는 UI에서 ‘아이디를 입력하세요’나 ‘영어와 숫자로 이루어진 비밀번호를 입력하세요.’와 같은 메시지를 입력 영역의 자리에서 제공하는 경우에 사용됩니다.

다음과 같이 마크업합니다.

<label>비밀번호: <input type="password" name="password"></label>

브라우저에서는 다음과 같이 나타납니다.

그리고 입력 상자에 커서가 위치하게 되면 다음과 같이 placeholder 속성의 값으로 작성된 문자열이 사라지는 것을 볼 수 있습니다.

placeholder 속성을 사용하지 않았을 경우에는 추가적인 마크업이 필요했습니다.

<label>비밀번호: <span class="placeholder">비밀번호를 입력하세요</span> <input type="password" name="password" ></label>

또한, 이것만으로는 placeholder 메시지가 입력 상자 위에 위치한 것처럼 보이도록 만들수 없기 때문에 CSS를 함께 적용해야만 했습니다.

label{position:relative;}
label .placeholder{position:absolute;top:4px;left:50px;z-index:2;}

위와 같이 .placeholder 클래스를 갖는 span 요소를 절대 위치로 정의하여 입력 상자 위에 떠 있는 것처럼 보이도록 스타일링을 해야 했습니다. 여기서 입력 상자에 포커스가 위치한 경우 placeholder 메시지를 감추어야 하기 때문에 추가적인 스타일과 자바스크립트 함수가 필요하게 됩니다. 이것만 보더라도 HTML5의 placeholder 속성이 얼마나 유용한지 알 수 있습니다. 하지만 안탑깝게도 모든 브라우저에서 이 속성을 사용할 수는 없습니다. 예상하겠지만 IE는 6~9사이의 어떤 브라우저도 HTML5의 placeholder 속성을 지원하지 않습니다. 방법은 있습니다. 부담스럽다고 느낄수 있겠지만 Nikita Vasilyev가 만든 placeholder.js 스크립트를 사용하면 IE에서도 동일한 효과를 얻을 수 있습니다. IE6에서조차도 작동하는 것을 볼 수 있습니다. https://github.com/NV/placeholder.js 에서 소스를 구할 수 있습니다.

다만, IE에서는 password 타입의 입력 상자에서는 placeholder 텍스트를 제대로 보여주지 못합니다. 또 한가지 고민이 있습니다. 현재 개별 브라우저는 placeholder 텍스트에 대한 스타일 지원이 미흡합니다. 때문에 디자이너가 사용자가 입력하는 텍스트와 placeholder 텍스트를 구분하여 색상과 글꼴을 디자인했다면 우리는 이를 해결할 필요가 있습니다.

우선 다행스러운건 Nikita Vasilyev의 스크립트가 placeholder 텍스트의 색상을 지정할 수 있도록 돕고 있다는 점입니다. Nikita Vasilyev의 스크립트를 직접 고치지 않았다면 placeholder 기능이 추가된 입력 요소들은 .text-placeholder 클래스를 갖도록 설계되어 있습니다. 따라서 다음과 같은 CSS를 추가만 해 주면 됩니다.

.text-placeholder{color:blue;}

IE7에서 본 화면입니다. placeholder 텍스트가 CSS에서 정의한대로 파란색으로 나타나는 것을 볼 수 있습니다. 그런데 이번에는 크롬과 사파리 그리고 파이어폭스에서 문제를 일으킵니다. 이들 브라우저에서는 파란색으로 보이지 않습니다.

웹킷 기반의 크롬과 사파리 그리고 파이어폭스는 placeholder 텍스트를 CSS에서 처리할 수 있도록 벤더 전용 속성을 제공하고 있었습니다.

::-webkit-input-placeholder{color:blue;} /* 웹킷 전용 속성 */
textarea:-moz-placeholder, input:-moz-placeholder{color:blue;} /* 파이어폭스 전용 속성 */

이제 크롬과 사파리, 파이어폭스에서도 파란색 placeholder 텍스트를 볼 수 있습니다.

[데모]

placeholder 속성은 전통적인 방식을 매우 경제적으로 만들어줍니다. 마크업을 추가하고, CSS로 포지셔닝을 하고, 자바스크립트로 사용자 클릭에 따라 보여지거나 감추어지는 동작을 구현해야 하는 과정을 마크업 속성 하나로 처리하기 때문입니다. 하지만 낡은 IE들은 속성을 지원하지 않고 있다는 것이 다시 한 번 우리를 실망스럽게 만듭니다. 그렇지만 이미 jQuery를 사용하고 있다면 Nikita Vasilyev의 스크립트를 추가하여 위와 같이 placeholder를 구현하는 것은 그렇게 나쁜 방법은 아닐겁니다. 이미 우리는 이 기능을 위해서 함수를 만들어 사용하고 있었으니까요.

솔직히 심플하게 작성된 placeholder 함수가 HTML5의 placeholder 속성에 NV의 스크립트를 추가한것보다 더 효율적일 수 있습니다. 그래서 든 생각인데 별도의 프레임워크에 기대지 않으면서 위의 몇가지 이슈를 모두 해결해주는 깔끔한 스크립트가 공개되면 사소한 고민을 털어버릴수 있지 않을까 싶습니다. :)