Content Placeholder

구조는 당근 SEED Content Placeholder(Apache-2.0)를 따른다 — 면 · 그림, 그림은 틀 높이의 50%(16 ~ 160), 제 모서리 없음. 값은 groo 토큰이고, SEED 와 다른 자리는 맨 아래 "SEED 와 다른 점" 에 적었다(2026-10-03 사용자 결정). groo 에 처음 두는 부품이다 — 옛 Aspect Ratio 스펙의 "이미지 로딩 전 placeholder" 한 줄을 대신한다.

수치 원본은 content-placeholder.yaml이다. 수치 표 자리([표: …])와 그림 자리([그림: …])는 사이트가 그 파일로 그린다 — GitHub 에서는 그 파일 · 그림 코드로 가는 링크로 보인다.

직접 골라 보기제목 링크 복사

틀 크기 · 비율 · 그림(아이콘)을 고르면 스펙대로 그린 대체 그림과 그 코드가 바뀐다. 틀을 줄이고 늘리면 그림이 16 ~ 160 사이에서 따라간다.

import { ContentPlaceholder } from "@/components/ui/content-placeholder"

{/* 틀 — 크기 · 비율 · 모서리는 틀이 정한다(그림 틀은 Image Frame 처럼 폭으로 — 240 → 8) */}
<div className="aspect-[4/3] w-[240px] overflow-hidden rounded-r2">
  <ContentPlaceholder label="사진" />
</div>

Anatomy제목 링크 복사

부위

Properties제목 링크 복사

크기 — 그림은 틀 높이의 절반제목 링크 복사

틀(이미지가 들어갈 자리)을 그대로 채우고, 그림은 틀 높이의 50% 정사각으로 가운데에 둔다 — 16 보다 작아지지 않고 160 보다 커지지 않는다. 틀 폭이 그보다 좁으면 폭에 맞춘다. 40 썸네일이면 20, 화면 폭 4:3 사진(360 × 270)이면 135, 그보다 크면 160 이다.

공통

색제목 링크 복사

면은 bg-neutral-weak(Skeleton 의 면과 같은 색), 그림은 stroke-neutral-weak 다 — SEED 의 그림 색(palette gray-400)과 같은 단계인 groo gray-400 이고, Bottom Sheet 손잡이와 같은 역할이다. 면 위 1.14 · 다크 1.20 으로 옅다 — 그림은 "여기에 그림이 있을 자리" 를 알리는 장식이고, 무엇이 없는지는 대체 글이 말한다.

그림 — 무엇이 없는지제목 링크 복사

기본은 lucide image 다. 자리가 무엇인지 아이콘으로 말할 수 있으면 그 아이콘을 쓴다 — 카드 그림 credit-card, 영수증 사진 receipt, 문서 file-text. 선 굵기는 24 격자 기준 1.5 로, 그림이 커지면 같은 비율로 굵어진다(Result Section 의 아이콘과 같은 결, v106).

Guidelines제목 링크 복사

불러오는 동안은 Skeleton제목 링크 복사

이미지를 불러오는 동안은 같은 모서리 · 같은 크기의 Skeleton 이다 — 이 그림은 다 불러왔는데 없거나 실패했을 때만 보인다. 불러오는 중과 없음이 같은 그림이면 기다려야 하는지 알 수 없다. 그림 자리의 스켈레톤 면은 처음부터 깐다 — 영역의 시간표(0 ~ 1초는 틀만)를 기다리지 않고, 빈 칸을 두지 않는다. 받아 둔 그림(붙는 순간 이미 받은 그림)은 스켈레톤 없이 바로 보인다. 그림 자리가 시간표에서 따르는 것은 10초 실패다 — 10초가 지나도 안 오면 이 그림이다(Skeleton 의 "기다리는 동안" · Image Frame 의 State — 웹 · 앱 레시피가 이미 이렇다, 2026-10-22 사용자 결정 4B — https://claude.ai/artifact/KPp9Lpd3v5KMgNrDn7pZmt).

깨진 이미지 · 빈 칸을 두지 않는다제목 링크 복사

불러오지 못하면 이 그림으로 바꾼다 — 브라우저의 깨진 이미지 아이콘과 대체 글이 그대로 보이거나, 투명한 빈 칸이 남거나, 다른 곳의 기본 그림(외부 주소)으로 바뀌지 않게 한다.

틀이 모양을 정한다제목 링크 복사

제 모서리 · 테두리 · 그림자가 없다 — 담는 틀(카드 · 썸네일)이 자르고 두른다. 그래서 같은 대체 그림이 둥근 썸네일에도 화면 폭 사진에도 맞는다.

대신 보이는 것 고르기제목 링크 복사

내용이 아직 없거나 · 없거나 · 못 받았을 때 그 자리에 무엇을 보일지는 이 절 한 곳에서 고른다 — Skeleton · Result Section · Image Frame · Avatar · Logo Tile · Chart 는 이 절을 가리키고 제 값 · 모양만 둔다(2026-10-22 사용자 결정 1B — https://claude.ai/artifact/KPp9Lpd3v5KMgNrDn7pZmt). 기다리는 시간 · 덮개(무엇으로 기다리나)는 Skeleton 의 "무엇으로 기다리나" 한 표이고 여기서 다시 적지 않는다. 비어 있음의 글 · 버튼은 Result Section 의 "비어 있는 까닭마다" 다.

① 영역(목록 · 카드 · 차트) — 상황 → 보이는 것

② 그림 자리 — 무엇이 · 언제 무엇으로

무엇을 Image Frame 으로 담는지(사람 · 물건 · 그림 · 분류 · 비율 상자)는 Image Frame 의 "무엇을 Image Frame 으로" 다.

③ 비슷한 것끼리

예외 · 주의

• 받아 둔 그림은 스켈레톤 없이 바로 — 붙는 순간 이미 받은 그림은 그대로 보인다(웹 · 앱 레시피가 이미 이렇다).
• 이니셜 · 첫 글자는 스켈레톤이 아니다 — 이름은 이미 와 있다. 그림이 오면 덮는다(Avatar · Logo Tile 의 결정).
• 있고 없고가 갈리는 섹션은 스켈레톤에 넣지 않는다 — 뜰지 알 수 없다(Skeleton 의 "틀은 먼저").
• 버튼은 그 화면이 할 수 있을 때만 — 보기만 하는 화면 · 걸러서 0건은 버튼 없이 둘 수 있다(SEED Result Section "버튼을 모두 사용하지 않을 수도 있습니다").
• 카드 · 띠 안의 결과는 medium · 좌우 0 — 카드 여백 24 가 맡는다. 화면 전체는 large.
• 숫자 자리를 "—" · "0원" 으로 채우지 않는다 — 기다리는 중이면 스켈레톤, 정말 0 이면 "0원".
• 자산 · 카드 로고의 글자 모노그램 · 아는 카드사의 그림 없는 카드는 이 그림이 아니다 — 앞은 Logo Tile 의 첫 글자, 뒤는 기관 색 면에 회사 · 카드 이름을 쓴 카드 면(Image Frame 의 카드 그림)이다. 모르는 카드사만 이 그림(credit-card)이다.

코드제목 링크 복사

레시피 recipes/shadcn/components/ui/content-placeholder.tsx 를 쓴다. 그림 틀은 Image Frame 이 이 그림을 대체 그림으로 쓰므로(아이콘은 fallbackIcon, 대체 글은 그림의 alt), 따로 부르는 것은 Image Frame 이 아닌 틀을 짤 때뿐이다. 아래 미리보기는 스펙 값으로 그린 모습이다.

• ContentPlaceholder — icon(lucide 아이콘 — 기본 ImageIcon), label(대체 글 — 주면 role="img" + 이름, 안 주면 보조 기술에 숨긴다). 크기 · 비율 · 모서리는 담는 틀이 정한다.

카드 그림 — 불러오지 못하면제목 링크 복사

import { CreditCard } from "lucide-react"
import { ImageFrame } from "@/components/ui/image-frame"

{/* 틀 — 비율 · 모서리(폭 112 → 8)는 Image Frame 이 정하고, 없거나 못 불러오면 이 그림을 그린다. 대체 글은 alt 를 이어받는다 */}
<ImageFrame ratio="card" width={112} src={card.imageUrl} alt={`${card.name} 카드 그림`} fallbackIcon={<CreditCard />} />

카드 그림은 보통 CardArt 로 그린다 — 아는 카드사는 카드 면, 모르는 카드사만 이 그림이다(Image Frame 의 "카드 그림").

Behavior제목 링크 복사

Accessibility제목 링크 복사

Do / Don't제목 링크 복사

✅ Do제목 링크 복사

• 없거나 불러오지 못한 이미지 자리를 옅은 면 + 그림으로.
• 그림은 자리를 말하는 아이콘 — 카드 · 영수증 · 문서.
• 불러오는 동안은 같은 모서리의 스켈레톤.
• 대체 글이 있던 이미지면 그 글을 자리 이름으로.

❌ Don't제목 링크 복사

• 깨진 이미지 아이콘 · 대체 글을 그대로 · 투명한 빈 칸.
• 외부 주소의 기본 그림으로 바꾸기.
• 불러오는 중과 실패를 같은 그림으로.
• 대체 그림에 제 모서리 · 테두리 · 그림자.

Specification제목 링크 복사

content-placeholder.yaml 의 규칙을 하나도 빼지 않고 그린다 — 웹 · 앱이 대체 그림을 만들 때 이 값을 그대로 쓴다.

SEED 와 다른 점제목 링크 복사

• 그림은 lucide 선 아이콘(기본 image, v106) — SEED 의 12가지 그림(당근 서비스별 — 부동산 · 중고차 · 알바 …)은 브랜드 자산이라 쓰지 않는다.
• 그림 색은 stroke-neutral-weak(groo gray-400) — SEED palette gray-400 의 짝. groo 면과 그림이 SEED 보다 조금 옅다(1.14 · 1.20 — SEED 1.22 · 1.50).
• 불러오는 동안에는 보이지 않는다 — SEED React Image Frame 은 불러오는 동안에도 이 그림을 보여 "불러오는 중" 과 "없음" 이 같아진다(SEED 디자인 문서는 로딩을 Skeleton 이라 적었다 — 그쪽을 따른다).
• 대체 글을 자리 이름으로 남긴다 — SEED 는 그림을 숨기기만 한다.

Migration notes제목 링크 복사

2026-10-22 — 대신 보이는 것 고르기 · 그림 자리는 처음부터 스켈레톤제목 링크 복사

"이 부품이 아닌 것" 목록을 "대신 보이는 것 고르기" 절로 넓혔다 — 영역 표(시간표 · 처음 · 이 기간 · 걸러서 0건 · 검색 0건 · 실패 · 다시 받기 실패) · 그림 자리 표(Image Frame · Avatar · Logo Tile · List 타일 · Chart) · 비교 표 · 예외 · 주의. Skeleton · Result Section · Image Frame · Avatar · Logo Tile · Chart 는 이 절을 가리킨다(1B). 그림 자리의 처음 1초는 코드대로 글을 맞췄다 — "이미지 틀도 시간표를 따른다"(이 문서) ↔ "처음부터 깐다 — 빈 칸이 없다"(image-frame.yaml)가 어긋나 있었다. 처음부터 스켈레톤, 받아 둔 그림은 바로, 시간표에서 따르는 것은 10초 실패다(4B — 웹 image-frame.tsx · 앱 p_image_frame.dart 가 이미 이렇다). 사용자 결정 — https://claude.ai/artifact/KPp9Lpd3v5KMgNrDn7pZmt. 고르지 않은 안: 흩어진 그대로(1A) · DESIGN.md 새 절(1C) · 두 문장 그대로(4A) · 1초부터 스켈레톤(4C). 값 변경 없음.

2026-10-03 — 새로 둔다(SEED Content Placeholder)제목 링크 복사

사용자가 비교 페이지의 "따라오는 것" 에서 정했다 — 이미지 자리는 기다리는 동안 같은 모서리의 스켈레톤, 없거나 실패하면 Content Placeholder(옅은 면 + 그림), 깨진 이미지 아이콘 · 빈 칸은 없앤다.

제품은 앱 적용 단계에서 옮긴다(2026-10-03 조사).

• Desk 웹 — <img> 9곳 중 실패 대체가 있는 곳은 4곳. 5곳은 실패하면 브라우저의 깨진 이미지 아이콘 + 대체 글이 보인다(widgets/card-detail/ui/CardInfoHeader.tsx:26 · 37 · AvailableBenefitsList.tsx:64 · AssetEditDialog.tsx:934 · 1042 — 쓰는 곳 없던 CardCatalogCombobox.tsx 의 두 곳은 2026-10-15 Command 와 함께 지웠다). 불러오는 동안은 빈 자리이고(entities/asset/ui/asset-logo.tsx:32-50 — 투명 40 × 40), 카드 혜택 그림만 회색 상자가 미리 자리를 잡는다(CardBenefitPage.tsx:191-205, 페이지 위 1.04:1).
• Desk 앱 — 이미지 9곳 모두 실패 대체는 있고(errorBuilder) 불러오는 동안의 표시는 0곳이다(loadingBuilder). 카드 목록은 회색 + 카드 아이콘(card/card_screen.dart:410-420), 카드 혜택 · 상세 · 혜택 시트 · 카드 추가(card_benefits_screen.dart:581-585 · card_detail_screen.dart:66-75 · card_benefit_detail_sheet.dart:314-320 · asset/card_add_dialog.dart:871 · 1046).
• HR 웹 — 규정 그림 12곳(culture-regulation/ui/Rule*.tsx)에 자리 · 실패 대체가 없다. 프로필 사진 실패 대체가 외부 github.com/shadcn.png 다(features/user-profile/ui/UserEditDialog.tsx:261-269).
• 자산 · 카드 로고의 글자 모노그램(웹 asset-logo.tsx:40 · 앱 asset/widgets/asset_logo.dart:24-37)은 2026-10-04 Logo Tile 로 정했다(첫 글자 먼저 · 그림이 오면 덮기 · 실패하면 첫 글자). 그림 틀은 Image Frame 이 이 그림을 대체 그림으로 쓴다.