Placeholder를 사용하지 마세요.

이 글은 Don’t Use The Placeholder Attribute 를 번역, 핵심 내용만 짧게 요약한 글입니다.

자세한 부가 내용을 알고 싶으신 분들은 원문을 읽어보시길 추천드립니다.

들어가면서 : 

placeholder 속성은 많은 이슈가 있다. 왜 이것을 사용하면 안되는지 알아보자.

HTML5 사양의 일부로 도입된 placeholder 는 input에 아무 값이 없을때 입력을 돕기 위한 간단한 힌트(단어 또는 짧은 문장)를 나타낸다. 힌트는 예제이거나 간략한 설명이 될 수 있다.

겉으로 보기에는 직접적인 도움이 되지만, 많은 문제점을 야기할 수 있다. 다행히 필자는 이 속성을 그만 사용할 수 있다고 확신한다.

문제점들

1. 번역

크롬과 같은 자동 번역 기능이 있는 브라우저에서 번역 요청시 속성을 건너 뛴다. 속성이 변경되면 페이지의 논리 구조를 손상시킬 수 있기 때문에 이것은 예상된 동작이다.

브라우저에서 건너 뛰는 속성 중 placeholder도 있다. 그래서 placeholder는 번역되지 않으며 기존 언어로 유지된다.

적절한 label 대신 placeholder만 사용했다면 이 언어에 익숙하지 않은 사람들은 정확히 이해하고 조작할 수 없을 가능성이 높다.

2. 상호 운용성(Interoperability)

상호 운용성은 서로 다른 시스템이 정보를 교환하고 이해하도록 하는 방법이고, 이것은 인터넷과 보조 기술의 기초가 되는 부분이다.

컨텐츠를 의미에 맞게 정의하면 상호 운용이 가능하다. 이것은 input과 label을 연결 시키는 방식으로 동작한다. label은 사용자로 하여금 목적에 맞게 입력할 수 있도록 설명한다. input과 label을 연결하는 방법 id와 for를 일치시켜 사용하는 것이다.

이 id와 for의 연결이 없으면 보조 기술은 입력내용을 알 수 없다. 스크린리더나 보이스오버를 사용하는 유저들은 이 내용을 읽거나 조작하기 힘들 수 있다.

필자가 이를 언급하는 이유는 label 대신 placeholder를 자주 사용한다는데 있다. 이 방식은 디자이너들에게 큰 환영을 받는 방식이다. label없이 배치된 input들은 정확한 그리드 효과를 줄 수 있기 때문이다.

페이스북 화면

이 현상과 밀접한 관련이 있는 '플로팅된 레이블 효과'를 통해 label을 placeholder처럼 활용할 수 있다.

3. 힌트가 사라짐

placeholder는 유저가 입력하는 순간 사라진다. 다시 힌트를 보는 유일한 방법은 입력하고 있던 모든 내용을 삭제하는 방법 뿐이다. 별로다!

새 암호를 만들어야 되는데 기억력이 좋지 않다면 극복하기 어려울 것이다.

(최소 길이 몇 자였지? 암호의 조건이 뭐였지??) 다 지우지 않는 이상 알 방법이 없다.

또한, 처음 서비스를 사용하는 사람은 이미 입력되었다고 생각할 수 있다. 필수 입력란이라면 오류를 발생 시킬 것이고, 필수 입력란이 아니라면 중요할 수 있는 보조 정보를 놓치는 위험이 있을 수 있다.

4. 힌트의 제한

placeholder는 input너비로 제한된다. 모바일웹일 경우 중요한 정보가 잘릴 수 있다.

(이 코드가 어디에 있는지는 절대 찾을 수 없다.)

5. 색상

보통 placeholder는 연한 회색으로 제공된다. 너무 작거나 옅은 색상은 접근성이 좋지 않다.

오히려 이 예제는 입력되어 있는것 처럼 보인다. 버튼의 체크 아이콘도 이미 체크되어 있는것 처럼 보인다..

고대비 모드 또한 문제가 될 수 있다. 위 이미지는 이미 값이 입력된것 처럼 보인다.

해결책

우선 문제점을 정리 해보면,

• 자동 번역 불가
• label대신 이용되는 사례
• 내용 입력시 중요한 정보를 놓칠 수 있음
• 색상/고대비등 접근성 문제
• 제한된 스타일링
• 미리 채워진 정보처럼 보여 건너뛸 수 있음

이 문제점들을 어떻게 해결할 수 있을까?

디자인

placeholder를 입력창 위, label아래로 이동

• 시각적, 구조적 계층 구조 전달
• 뭘 입력하는지,
• 입력을 성공하기 위한 힌트
• 예시
• 번역기능
• 미리 채워진 정보로 보이지 않음
• 저시력 환경에서도 구별 가능
• 내용을 입력하면서 힌트 참고
• 의미론적이며 CSS를 통해 스타일링 가능

또는 입력창에 포커스되면 도움말을 보여주는 방법도 가능하다. 하지만 소프트웨어 키보드를 사용하는 환경에서 아래쪽에 배치할 경우 가릴 수 있으니 주의.

개발

위의 디자인을 코드로 표현하면 아래와 같다.

<div class="input-wrapper">
    <label for="employee-id">
        Your employee ID number
    </label>
    <p
        id="employee-id-hint"
        class="input-hint">
        Can be found on your employee intranet profile.
        Example: <samp>a1234567-89</samp>.
    </p>
    <input
        id="employee-id"
        aria-describedby="employee-id-hint"
        name="id-number"
        type="text" />
</div>

이 코드는 input과 label이  id/for로 연결되어 있다. placeholder의 역할은 p태그가 해주고 있다. 그런데 왜 label 내부에 도움말까지 넣지 않았는지 궁금할수 있을 것이다.

대답은, 개발자의 편의가 사용성 보다 우선 되어서는 안된다는 것이다. 스크린리더를 사용하여 input의 설명으로 p태그의 도움말에 접근할 수 있다.

또 label 내부에 도움말까지 포함하면 너무 장황해진다. label은 의미에 맞으면서도 간결한 것이 좋다. 너무 길면 다시 듣기 힘들고 완전히 다 안듣는 경우도 생길 수 있기 때문이다.

정리하면서

인터페이스가 사용자에게 요구하는것이 적을 수록 접근이 용이하다

placeholder가 필요한가?

좋은 카피 라이트는 목적을 명확하고 간결하게 설명할 수 있는 label을 만든다. label에 역할을 부여하자.