<div id="readability-page-1" class="page"><div><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Nanum Gothic&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;Andrew의 Alternatives to Placeholder Text 소개하고자 합니다.&quot;}]}]}">Andrew의 Alternatives to Placeholder Text 소개하고자 합니다.<blockquote data-app="{&quot;type&quot;:&quot;quotation&quot;,&quot;kind&quot;:&quot;quote&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;플레이스홀더 텍스트의 UX 원칙 3가지&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;(요약문)&quot;}]}">플레이스홀더 텍스트의 UX 원칙 3가지 (요약문)</blockquote><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Nanum Gothic&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;플레이스홀더 텍스트는 HTML 입력란에서 일반적으로 사용되지만, 이를 적절히 이해하지 못한 디자이너와 개발자들이 무분별하게 활용하는 경우가 많습니다. 복잡한 폼에서 텍스트 도움말을 제공하거나 시각적 미를 높이기 위해 입력 레이블을 제거하는 경향이 있지만, 이는 많은 사용성 문제를 일으킬 수 있습니다.&quot;}]}]}]}">플레이스홀더 텍스트는 HTML 입력란에서 일반적으로 사용되지만, 이를 적절히 이해하지 못한 디자이너와 개발자들이 무분별하게 활용하는 경우가 많습니다. 복잡한 폼에서 텍스트 도움말을 제공하거나 시각적 미를 높이기 위해 입력 레이블을 제거하는 경향이 있지만, 이는 많은 사용성 문제를 일으킬 수 있습니다.<p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Nanum Gothic&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;플레이스홀더 텍스트의 주요 문제점은 다음과 같습니다. &quot;}]}]}]}">플레이스홀더 텍스트의 주요 문제점은 다음과 같습니다.&nbsp;<p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Nanum Gothic&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;첫째, 플레이스홀더가 입력을 시작할 때 사라지므로 사용자는 입력 내용을 기억해야 해 단기 기억에 부담을 줍니다. 이는 특히 긴 입력란이나 복잡한 정보를 입력할 때 실수로 이어질 수 있습니다. &quot;}]}]}]}">첫째, 플레이스홀더가 입력을 시작할 때 사라지므로 사용자는 입력 내용을 기억해야 해 단기 기억에 부담을 줍니다. 이는 특히 긴 입력란이나 복잡한 정보를 입력할 때 실수로 이어질 수 있습니다.&nbsp;<p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Nanum Gothic&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;둘째, 플레이스홀더가 사라지면 입력란의 의미를 확인하기 어려워 사용자 경험이 저하됩니다. &quot;}]}]}]}">둘째, 플레이스홀더가 사라지면 입력란의 의미를 확인하기 어려워 사용자 경험이 저하됩니다.&nbsp;<p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Nanum Gothic&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;셋째, 입력란 위에 레이블을 배치하면 사용자는 즉시 입력란의 목적을 이해하게 되어 데이터 입력을 유도하는 효과가 있습니다. 레이블이 항상 보이면 사용자가 입력해야 할 내용을 명확히 인식할 수 있습니다.&quot;}]}]}]}">셋째, 입력란 위에 레이블을 배치하면 사용자는 즉시 입력란의 목적을 이해하게 되어 데이터 입력을 유도하는 효과가 있습니다. 레이블이 항상 보이면 사용자가 입력해야 할 내용을 명확히 인식할 수 있습니다.<p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Nanum Gothic&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;예시 텍스트를 입력란 아래에 배치하는 것도 효과적입니다. 이는 사용자가 입력을 하더라도 예시가 항상 보이게 하여 입력해야 할 내용을 명확히 기억할 수 있도록 도와줍니다. 예시 텍스트는 빈 입력란의 어포던스 역할을 강화하고, 사용자가 입력란의 목적과 예시를 동시에 확인할 수 있게 해 직관적인 경험을 제공합니다.&quot;}]}]}]}">예시 텍스트를 입력란 아래에 배치하는 것도 효과적입니다. 이는 사용자가 입력을 하더라도 예시가 항상 보이게 하여 입력해야 할 내용을 명확히 기억할 수 있도록 도와줍니다. 예시 텍스트는 빈 입력란의 어포던스 역할을 강화하고, 사용자가 입력란의 목적과 예시를 동시에 확인할 수 있게 해 직관적인 경험을 제공합니다.<p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Nanum Gothic&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;또한, 플레이스홀더 텍스트를 긴 메시지 전달의 수단으로 사용하는 것은 비효율적입니다. 사용자가 입력을 시작하면 중요한 정보를 잃게 되어 혼란을 초래할 수 있습니다. 긴 메시지를 플레이스홀더에 담으려면 사용자가 내용을 기억해야 하므로 인지적 부담이 증가합니다. 이로 인해 디자이너와 개발자가 UI 디자인의 기본 원칙을 간과하게 되며, 사용자 경험이 저하됩니다. 대신, 입력란 위에 간단한 레이블이나 예시 텍스트를 배치하는 것이 더 효과적입니다.&quot;}]}]}]}">또한, 플레이스홀더 텍스트를 긴 메시지 전달의 수단으로 사용하는 것은 비효율적입니다. 사용자가 입력을 시작하면 중요한 정보를 잃게 되어 혼란을 초래할 수 있습니다. 긴 메시지를 플레이스홀더에 담으려면 사용자가 내용을 기억해야 하므로 인지적 부담이 증가합니다. 이로 인해 디자이너와 개발자가 UI 디자인의 기본 원칙을 간과하게 되며, 사용자 경험이 저하됩니다. 대신, 입력란 위에 간단한 레이블이나 예시 텍스트를 배치하는 것이 더 효과적입니다.<p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Nanum Gothic&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;플레이스홀더 텍스트를 보조 레이블로 사용하는 것 또한 바람직하지 않습니다. 일반적인 레이블을 사용하면 사용자가 입력란의 의미를 쉽게 이해하게 되며, 필요한 정보를 즉각적으로 파악할 수 있어 전체적인 사용자 경험이 개선됩니다.&quot;}]}]}]}">플레이스홀더 텍스트를 보조 레이블로 사용하는 것 또한 바람직하지 않습니다. 일반적인 레이블을 사용하면 사용자가 입력란의 의미를 쉽게 이해하게 되며, 필요한 정보를 즉각적으로 파악할 수 있어 전체적인 사용자 경험이 개선됩니다.<p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Nanum Gothic&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;마지막으로, 플레이스홀더 텍스트를 사용할 경우 몇 가지 원칙을 따라야 합니다. &quot;}]}]}]}">마지막으로, 플레이스홀더 텍스트를 사용할 경우 몇 가지 원칙을 따라야 합니다.&nbsp;<p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Nanum Gothic&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;첫째, 입력란에 적는 텍스트보다 더 옅은 색을 사용해야 합니다. 이는 가독성을 높이고 입력 유도 기능을 강화하며 혼란을 줄이는 데 도움이 됩니다. &quot;}]}]}]}">첫째, 입력란에 적는 텍스트보다 더 옅은 색을 사용해야 합니다. 이는 가독성을 높이고 입력 유도 기능을 강화하며 혼란을 줄이는 데 도움이 됩니다.&nbsp;<div data-app="{&quot;type&quot;:&quot;img&quot;,&quot;align&quot;:&quot;content-full&quot;,&quot;mobileAlign&quot;:&quot;full&quot;,&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/2fEJ/image/cAZHS_4RDfbymnYdt3dgEhBY02U.jpeg&quot;,&quot;caption&quot;:&quot;&quot;,&quot;width&quot;:&quot;1000&quot;,&quot;height&quot;:&quot;386&quot;,&quot;originalName&quot;:&quot;41.jpeg&quot;}"><img src="https://img1.daumcdn.net/thumb/R1280x0.fjpg/?fname=http://t1.daumcdn.net/brunch/service/user/2fEJ/image/cAZHS_4RDfbymnYdt3dgEhBY02U.jpeg" data-filename="41.jpeg"></div><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Nanum Gothic&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;둘째, 모든 스크린에서 잘 보여야 하며, 지나치게 옅은 색은 가독성을 저하시킵니다. &quot;}]}]}]}">둘째, 모든 스크린에서 잘 보여야 하며, 지나치게 옅은 색은 가독성을 저하시킵니다.&nbsp;<p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Nanum Gothic&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;셋째, 입력란을 클릭한 후에도 플레이스홀더 텍스트가 사라지지 않도록 해야 합니다. 이는 사용자의 단기 기억 부담을 줄이고 혼란을 방지하여 사용자 경험을 높이는 데 효과적입니다.&quot;}]}]}]}">셋째, 입력란을 클릭한 후에도 플레이스홀더 텍스트가 사라지지 않도록 해야 합니다. 이는 사용자의 단기 기억 부담을 줄이고 혼란을 방지하여 사용자 경험을 높이는 데 효과적입니다.<p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Nanum Gothic&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;결론적으로, 플레이스홀더 텍스트의 사용은 신중해야 하며, 대안을 통해 사용자 경험을 개선하는 것이 중요합니다.&quot;}]}]}]}">결론적으로, 플레이스홀더 텍스트의 사용은 신중해야 하며, 대안을 통해 사용자 경험을 개선하는 것이 중요합니다.위글은 요약문입니다.이 글에 대한 전체 번역 원문(구체적인 사례 등)은 아래 링크를 클릭해주세요~<p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;anchor&quot;,&quot;url&quot;:&quot;https://maily.so/uiux/posts/5e9bd410&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;https://maily.so/uiux/posts/5e9bd410&quot;}],&quot;target&quot;:&quot;_blank&quot;}]}"><a target="_blank" href="https://maily.so/uiux/posts/5e9bd410">https://maily.so/uiux/posts/5e9bd410</a></div></div>

UX 컨설턴트 전민수

Andrew의 Alternatives to Placeholder Text 소개하고자 합니다.  플레이스홀더 텍스트의 UX 원칙 3가지(요약문)  플레이스홀더 텍스트는 HTML 입력란에서 일반적으로 사용되지만, 이를 적절히 이해하지 못한 디자이너와 개발자들이 무분별하게 활용하는 경우가 많습니다. 복잡한 폼에서 텍스트 도움말을 제공하거나 시각적 미를 높이기 위

[UX#26] 플레이스홀더 텍스트의 UX 원칙 3가지

댓글