실제 컨텐츠가로드되는 동안 컨텐츠 모양을 표시하는 웹 디자인 패턴의 이름은 무엇입니까?


12

SPA (Single Page Application) 사이트가 컨텐츠를로드하기 전에 사이트 레이아웃을로드하고 표시하는 것이 일반적입니다. 최근에, 나는 단지 스피너 또는 "로드 중 ..."메시지를 보여주는 대신, 많은 사이트들이 텍스트와 이미지가 평평한 기하학적으로 채워져있는 내용이 채워질 템플릿 / 레이아웃을 보여줍니다. 모양.

슬랙의 예

하나의 작은 대기 텍스트 줄을 큰 메시지 덤프 또는 다른 것으로 대체하는 것보다 덜 문제가되기 때문에 좋은 패턴처럼 보입니다. 패턴을 읽고 싶습니다. 내 사이트에서 더 쉽게 수행 할 수있는 라이브러리를 찾을 수는 있지만 무엇을 호출 해야할지 모릅니다. 웹을 효과적으로 검색하기에 간결하게 설명하기조차 어렵습니다. . 내가 찾을 수있는 가장 가까운 예 는 연습에 특정 이름을 부여하지 않는 이 오래된 기사 였습니다 .

"자리 표시 자"는 내가 생각할 수있는 첫 번째 항목이지만, <input>이제 태그에는 실제 placeholdler속성이 있으며 많은 사람들이 필러 텍스트 또는 기타 내용 (Lorem Ipsum, Kitten Ipsum 등)에 대해 질문하므로 결과가 도움이되지 않는 경향이 있습니다. . 나는 업계 가이 관행에 대한 독특하고 설명적인 이름에 동의하고 아직 그것을 찾지 못했습니다.


2
당신의 기사는 "콘텐츠 자리 표시 자"라고 말합니다; 그 이름에 어떤 문제가 있습니까? 나는 이것을위한 "공식 이름"이 확실하지 않다
Luciano

특정 문자열을 사용하는 몇 가지 언급 (보통 Facebook 이름으로 호출)이 있습니다. 가장 좋은 리드는 이 라이브러리 이지만 Angular 선언적 / 반응성 모델에는 적합하지 않다고 생각합니다. 감사합니다.
Coderer

1
@Luciano 문제는 "컨텐츠 플레이스 홀더"도 Lorem Ipsum 및 이와 유사한 것들이 될 수 있다는 것입니다. 이것은 그래픽 디자인에도 유용하므로 용어 모호합니다.
yo '

답변:


18

나에게 일어난 첫 번째 일은 당신의 모범에서 보여지는 유형의 제안이 확실히 그리스어 로 언급되었다는 것 입니다.

검색이 UX 기술에 대한 여러 기사를 알려준 "로딩 화면에 사용 greeking"특히 이 하나 A와 개념을 의미 내용 자리 .

내가 생각하는 것만 큼 좋은 용어입니다.

특히 여기에는 그리스어이미지 자리 표시자가 있으며 전체를 함께 콘텐츠 자리 표시 자로 지칭 할 수 있습니다 .


2
흥미롭게도 "Greeking"이라는 용어의 기원이 무엇인지 궁금합니다.
Digital Lightcraft

1
@DigitalLightcraft '모두 그리스인'이라는 표현과 관련이있을 수 있습니다. 더 많은 정보를 원하시면, English.SE : P
Vincent

기쁜 마음으로, "인사말"의 기원을 알 수 없습니다. 흥미 롭습니다.
mayersdesign

2
lorem ipsum과 관련이있는 원점에 대한 흥미로운 내용 : "그리스어 링 (더미 텍스트라고도 함)을 사용하면 페이지 디자이너가 실제 내용을 산만하게하지 않고 페이지에 텍스트를 배치 할 수 있습니다. 그리스어의 역사는 불분명합니다. 20 세기 중반에 처음 사용 된이 글은 로마의 지도자 인 시세로 (Cicero)의 말에 기초한 글로 그리스어가 아닌 라틴어 였기 때문에이 더미 글의 이름이 잘못되었습니다. " 출처
Jamie Bull

4

마법의 단어가 될 것으로 보인다 greeking (감사합니다!)하지만 내가 그것을 응용 프로그램의 일반적인 모양을 얻기 위해 모의 내용을 레이아웃의 매우 구체적인 실천을 의미한다과 같은 용어는 "해골 화면"을 찾을 수있었습니다. 이론은 로드 시간에 대한 불안줄일 수 있다고 생각합니다 .


2

Facebook 은 약간 의 희미한 효과로 콘텐츠 자리 표시 자 기술을 대중화하고 그들의 코드를 오픈 소스 화했기 때문에 개발자 친구 중 일부는 Facebook의 희미한 효과라고 할 수 있습니다 .

쉬머 효과의 요점은 실제 내용이 여전히로드되고 있음을 나타내므로 사용자는 페이지가 고착되었다고 생각하지 않습니다.

여기에 이미지 설명을 입력하십시오


-1

이 패턴을 사용했을 때이를 스켈레톤 페이지라고했습니다. 동적 컨텐츠를 생성하는 큰 페이지에 매우 유용합니다.


4
이것이 기존 답변에 어떻게 추가됩니까? 코더가 이미 "골격"이라는 용어를 언급 한 것 같습니다
Zach Saucier

그래픽 디자인에 오신 것을 환영합니다! 평판이 충분 하면 정답이라고 생각하는 답변을 찬성 할 수 있습니다 . 또는 질문을 즐겨 찾기로 "별표"로 표시하면 새로운 답변에 대한 알림을받습니다.
Luciano

-4

그것들을 스켈레톤 스크린이라고합니다.


안녕하세요, GD.SE에 오신 것을 환영합니다. 다른 답변에서 이미 언급 한 정보를 두 번 게시하지 마십시오. 감사!
Vincent
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.