|
|
| Material Design 3의 Text Field 컴포넌트 |
[clearfix]
1. 개요
- 表 示 字 / Placeholder문자나 이미지 등이 들어갈 자리에 임시로 채워 놓는 내용물을 의미한다. 사실 디지털상의 레이아웃 말고도 임시 대체물에는 전부 적용 가능한 표현이라 영어 회회에선 상황에 따라 사람, 물건 등에 종종 자유롭게 쓰인다.
어떤 디자인의 레이아웃을 잡아 놓거나 할 때, 아직 내용이 정해지지 않았거나 내용이 가변적인 경우 임시로 내용이 들어갔을 때의 전체적인 모양을 확인할 수 있게 하기 위해서 사용한다.
2. 예시
나무위키에서는 이미지가 들어갈 자리에 임시적으로 넣을 빈 이미지 파일을 분류:파일/자리 표시자에 업로드하여 사용하기도 한다.https://fakeimg.pl/이라는 자리 표시자 이미지를 자동으로 생성해주는 웹사이트도 있다. 사용방법은
https://fakeimg.pl/<너비>x<높이>/<배경색>/<글자색>/?text=<문자>&font=<폰트명>[1]로 주소를 입력하면 그에 맞는 이미지를 생성해준다. 더 자세한 사용방법은 해당 사이트 참조. 유사한 사이트로는
https://placeholderjs.com가 있다. 그 외에
placeholder.com이라는 사이트도 많이 사용되었으나, 2023년 4월경부터 도메인 소유자가 바뀌어 캐나다의 창고 대여 서비스로 접속된다. 내부 주소인
via.placeholder.com/는 2024년 10월부터 접속이 되지 않고 있다.2.1. 견본
영문 텍스트의 경우 관습적으로 로렘 입숨을 사용하며 관련 자동 프로그램도 많이 만들어져 있다. C언어 등 유명한 프로그래밍 예제인 Hello, world!부터 컴퓨터 그래픽을 하다보면 만나게 되는 레나 포르센, 3D 그래픽의 유타 주전자, 스탠퍼드 토끼 등도 이에 해당 된다.2.2. 게임
게임 UI 디자인의 경우 너비상 넣을 수 있는 최대값을 확인하기 위해 999999 등의 큰 값을 넣기도 한다. 단순히 디자인 상의 화면을 확인하기 위한 것으로 시스템 상의 카운터 스톱이나 오버플로와는 전혀 관계 없다.게임에서는 간혹 자리 표시자를 강하게 인지시켜 개발 과정에서 빼먹지 않기 위해 섬뜩하거나 강렬한 것을 넣었다가 개발 과정에서 까먹고(...) 그대로 이스터 에그나 괴담처럼 남아버리는 경우도 있다. 아타리 게임즈의 캘리포니아 스피드의 표지판에 기괴한 문구가 발견된 적이 있었는데,[2][해석] 이것 또한 나중에 밝혀진 바로는 자리 표시자 텍스처 때문에 만들어진 거라고. 당시에는 '아주 아주 가끔은 나도 그런다.'가 유행어로 불린 만큼 큰 화제에 오른 적이 있었다. 니켈로디언의 네모바지 스폰지밥 공식 플래시 게임 《SpongeBob Saves the Day》에서 발견된 섬뜩한 캐릭터 yummer 역시 당시엔 논란이 되었으나 나중엔 자리 표시자인 것이 확인되었다.
2.3. 견본용 이름
3. 텍스트 상자에서
사용자가 문자를 입력하는 텍스트 상자에 미리 적혀 있는 문자를 의미하기도 한다. 이를테면 나무위키의 검색창에 미리 적혀 있는 'Search'를 의미한다.일반적으로 텍스트 상자의 텍스트가 입력된 상태가 아니라는 것을 사용자에게 알려주기 위해 조금 연한 회색을 사용한다. 다만 이 회색이 저시력자에 대한 접근성을 해칠 우려가 있으며, 그렇다고 고대비 환경으로 설정하여 플레이스홀더가 잘 보이게 설정하면 앞서 말한 텍스트가 입력된 상태와 혼동을 줄 수 있다는 문제점이 있다.
텍스트 상자 외부의 위쪽이나 왼쪽에서 무슨 텍스트를 입력할지를 알려주는 레이블과는 달리 텍스트 상자의 내부에 적혀 있어 공간을 덜 차지한다. 대신 사용자가 상자에 텍스트를 입력하면 원래 있던 자리 표시자가 사라지고 사용자의 텍스트로 대체되어 자리 표시자의 내용을 볼 수 없어지기 때문에 그 내용을 단기적으로 기억해야한다. 만약 깜빡할 경우 내용이 무엇이었는지 확인하기 위해서는 다시 사용자가 입력한 텍스트를 지워야하는 불편함이 있다. 그래서 회원가입 폼의 비밀번호 조건을 자리 표시자에 적는 건 별로 좋은 방법이 아니다.
이를 해결하기 위해 텍스트 입력전에는 플레이스홀더였다가 텍스트를 입력하면 해당 플레이스홀더가 레이블로 바뀌는 인터랙션을 구현한 예[4]도 있다.
상술한 여러 가지 문제점 때문에 일부 UI 관련 블로그들에서는 극단적으로 자리 표시자를 아예 사용하지 말라는 글이 보이기도 한다. 다만 여전히 일반적인 사용자들에게는 충분히 매력적이고 다른 대체 텍스트 등을 활용하는 방법으로 접근성을 개선할 수 있기 때문에 여전히 메이저 기업들의 회원가입 폼이나 여러 인터페이스들에서 아직 빈번하게 찾아볼 수 있다.
가끔 버그로 인해 플레이스홀더가 진짜 입력된 텍스트로 인식되기도 한다.
로그인 창에서도 ID PASSWORD 등으로 많이 적혀 있다.
쇼핑몰 등에서는 지금 핫한 아이템을 미리 완성해서 그대로 검색을 누르면 해당 아이템이 검색되게 만들기도 한다.