카드 일러스트레이션은(는) 무엇을 하나요?
아이디어
카드는 그 자체를 독자가 필요로 하는 만큼 단순화하고, 의도적으로 프레이밍하며, 모든 주석에는 이유가 있습니다. 회색 바탕 위에 평면으로 크게 배치된 인터페이스 또는 문서 조각; 주변에는 가는 선으로 연결된 여러 개의 모노스페이스 기술 노트가 있습니다. 카드 텍스트를 읽지 않아도 리소스를 이해할 수 있어야 합니다.
어휘
각 장면은 다음 구성 요소 중 3~5개로 구성됩니다(전부 사용하지는 않음).
장면을 그리기 전에 참고할 시각 자료:
references/vocabulaire.png(및.svg): 12개의 개별 구성 요소가 각각 패널에 분리되어 있으며, 한 줄짜리 규칙이 함께 있습니다.references/exemple-noir-et-blanc.png및references/exemple-accent-couleur.png(및.svg): 두 가지 모드로 된 동일한 완성 장면. 강조된 요소의 색상만 변경됩니다.references/accent-palette.png및.json: 부드러운 버전과 함께 팔레트의 10가지 색조.
| 구성 요소 | 설명 |
|---|---|
| 배경 | 연한 회색 패널 (#F3F3F2 ~ #F5F5F4), 모서리 16~24px, 13:10 비율. 그림자나 테두리 없음. |
| 장면 (stage) | 점선 gray-300 사각형. 내부에 매우 연한 격자가 있습니다. 작업 영역을 나타냅니다. 선택 사항으로 '이것은 디자인 공간입니다'라는 의미. |
| 창 | 흰색 창, 회색 점 3개로 된 제목 표시줄, gray-200 테두리, 부드러운 그림자. 장면이나 패널에서 벗어납니다 (오른쪽이나 아래가 잘림): 의도적인 프레이밍입니다. URL이 중요하면 주소 표시줄 포함. |
| 골격 | 회색 둥근 막대(gray-200)의 보조 텍스트, 선으로 구분된 목록 행, 회색 원형 아바타. 의미를 전달하는 요소만 실제 단어를 가집니다("Share", "Publish"). |
| 스택 | 여러 카드가 약간씩 수직으로 어긋나게 쌓여 있으며, 각 카드의 상단만 보입니다(파일 이름, 제목). 맨 위 카드는 제목과 단락이 완전히 표시됩니다. 문서 집합을 보여줄 때 사용. |
| 팝오버 | 창 가장자리(기둥, 셀 행)를 겹치는 작은 흰색 카드. 창보다 그림자가 더 강해 위에 있는 것처럼 보입니다. |
| 주석 | gray-500 모노스페이스 텍스트, 11~13px, 객체 외부에 배치: 속성(data-target="share"), 상태(작은 카드 안의 { open: false }), 파일 경로, 결정. 이미지가 보여주는 것을 작업실 언어로 명명합니다. |
| 지시선 | 주석에서 시작하여 요소에서 4px 채워진 점으로 끝나는 얇은 gray-400 선. 직선 또는 부드러운 곡선 하나. 반환을 위한 점선 화살표. |
| 단계 띠 | 빈 원과 각각 아래에 모노스페이스 레이블이 있는 수평선; 현재 단계는 채워져 있습니다. 리소스를 프로세스 내에 배치할 때 사용. |
| 연락처 시트 | 번호가 매겨진(01 ~ 06) 작은 썸네일 격자, 하나만 선택되고 지시선으로 확대 버전에 연결됩니다. 시리즈의 한 요소를 볼 때 사용. |
| 치수 | 그려진 측정값(선, 양쪽 끝 마감, "4px"), 마치 주석이 달린 목업처럼. 정밀한 세부 사항용. |
| 번호표 | 읽기 순서대로 요소 위에 배치된 채워진 원 1, 2, 3. 작업이 진행 중이면 커서 포함. |
두 가지 모드
스킬은 두 가지 모드 중 하나로 시작되며, 단 한 가지, 즉 강조된 단일 요소의 색상만 변경됩니다. 배경, 표면, 골격, 주석, 구성 및 제스처는 동일하게 유지됩니다.
| 모드 | 호출 방법 | 강조 요소 |
|---|---|---|
| 흑백 | /card-illustrations noir et blanc, "흑백으로", "모노크롬", "무채색" | 채워진 gray-900 잉크 (위에 흰색 텍스트) |
| 컬러 강조 | /card-illustrations accent, "강조 색상으로", "컬러로" | 팔레트의 한 색조, 안정적인 식별자에서 추출 |
모드 선택: 먼저 인자나 요청의 단어를 따릅니다. 지시가 없으면 이미 온라인에 있는 장면의 모드를 따라 라이브러리의 일관성을 유지합니다. 없으면 흑백 모드를 사용합니다. 같은 그리드에서 두 모드를 절대 혼합하지 마십시오. 모드를 변경하면 보이는 모든 카드를 한꺼번에 다시 그려야 합니다. 코드에서 모드는 모든 장면에서 읽는 단일 상수(ACCENT_MODE: 'ink' | 'color')이며, 라이브러리를 한 줄로 전환할 수 있습니다.
강조: 회색과 색상 한 방울 (컬러 강조 모드)
장면은 회색(배경, 흰색 표면, 골격, 주석)을 유지합니다. 하나의 요소만 강조 색상을 가집니다: 현재 단계, 선택된 썸네일, 치수, 체크된 상자, 기본 버튼, 선택된 요소. 나머지는 모두 회색 또는 잉크 색상입니다. 일러스트레이션에만 강조가 예약되어 사이트의 인터페이스(버튼, 링크, 내비게이션)는 단색으로 유지됩니다.
팔레트는 OKLCH에서 동일한 명도와 채도(L 0.655, C 0.11)를 가진 10가지 색조로 구성되며, 색상만 다릅니다. 이는 10가지 색상을 sRGB 영역 내에서 유지하고 흰색 배경에서 3:1 이상의 명도 대비(그래픽 요소 기준)를 제공하는 가장 선명한 설정입니다. 각 색조에는 부드러운 버전(L 0.95, C 0.03)이 있어 색상이 들어간 배지나 연한 배경에 사용됩니다. references/accent-palette.png에 견본, references/accent-palette.json에 값이 있습니다.
| 이름 | 강조 | 부드러운 |
|---|---|---|
| 빨강 | #CB756E | #FFE7E4 |
| 산호 | #C87A56 | #FFE9DE |
| 주황 | #BF8242 | #FDEBDA |
| 호박 | #AF8B37 | #F8EDD8 |
| 녹색 | #63A266 | #E3F4E2 |
| 에메랄드 | #42A680 | #DDF5E9 |
| 청록 | #0DA5A5 | #D8F5F5 |
| 하늘 | #389DC7 | #DBF3FF |
| 파랑 | #6B90D4 | #E4EFFF |
| 보라 | #9284CE | #EEEBFF |
사용 규칙:
- 장면당 하나의 색조, 무작위로 선택되지만 안정적으로:
accentFor(id)함수는 리소스 식별자(간단한 해시)에서 색조를 추출하여 서버와 브라우저에서 동일한 색상을 얻고 수화 오류를 방지합니다.Math.random()을 사용하지 마십시오. - 채워진 강조 위의 텍스트는 흰색이며 굵게(최소 11px) 표시됩니다. 부드러운 배경 위에서는 텍스트가 강조 색상 자체를 사용합니다.
- 같은 장면에 두 가지 색조를 사용하지 마십시오. 색조 간의 그라데이션도 사용하지 마십시오. 녹색과 주황색의 가용성 표시줄은 색상이 주제인 예외입니다.
- 참조 예시: 활성 탭이 색조로 표시되고, 기본 버튼이 채워지며, 체크박스가 색상으로 표시되고, 슬라이더가 회색 격자 배경에서 부드러운 색조의 선명한 색상 커서를 가지는 인터페이스 요소 견본판.
색조 추가: L 0.655 및 C 0.11로 계산하고, sRGB 영역 내에 있고 흰색 대비 3:1 이상인지 확인한 후, 색상상 이웃 사이에 배치합니다.
구성
- 객체는 왼쪽이나 중앙에, 주석은 오른쪽이나 아래에, 절대 내용 위에 배치하지 않습니다.
- 프레임이 잘립니다: 패널에서 벗어나는 창은 축소된 전체 창보다 더 크고 실제처럼 보입니다.
- 패널 여백은 넉넉하게(8
10%) 유지합니다. 35개의 구성 요소를 사용합니다. 하나를 추가할지 망설여지면 추가하지 않습니다. - 카드 크기(약 350px 너비)에서 읽을 수 있어야 합니다: 텍스트 최소 11px, 모노스페이스 포함.
- 글꼴: 시뮬레이션된 인터페이스에는 산세리프 글꼴, 주석에만 시스템 모노스페이스(
ui-monospace,font-mono)를 사용합니다.
장면이 보여줘야 할 것
조각은 리소스가 무엇인지와 용도를 말해야 하며, 내부 메커니즘을 보여주지 않습니다. 집단 지성 워크숍은 시간표보다는 여러 사람의 포스트잇이 있는 보드와 선택된 포스트잇의 투표로 보여줘야 합니다. 체크리스트는 체크된 상자로, 의례는 주간의 두 회의로 보여줘야 합니다. 조각이 이해를 위해 설명이 필요하면 잘못된 조각입니다. 주석은 명확히 할 뿐, 모호한 이미지를 보완하지 않습니다.
호버 시
장면당 하나의 제스처만 있으며, 문서가 하는 일을 나타냅니다: 상자가 체크되고, 다음 배지가 채워지고, 팝오버가 올라오고, 다음 썸네일이 선택됩니다. Transform 및 opacity, 300ms, 부드러운 가속 곡선, 포인터 장치 전용, 최대 몇 픽셀만 움직입니다.
구현 (React 및 Tailwind)
- 패널(배경)당 하나의 컴포넌트와 장면당 하나의 컴포넌트, 리소스 식별자로 선택됩니다.
- 모든 장면에서 공유하는 몇 가지 빌딩 블록: 표면(흰색 카드, 부드러운 그림자), 배지, 골격 막대, 호버 제스처 상수(지속 시간, 이동 거리).
- 동일한 렌더 함수가 그리드, '계속 보기' 카드, 캐러셀을 제공합니다.
- 리소스의 세부 페이지는 썸네일 대신 실제 콘텐츠(모델 다이어그램, 덱의 슬라이드)로 열릴 수 있습니다.
리소스 추가
- 한 문장: 어떤 조각이 리소스를 대표하는지, 색상을 취할 단일 요소는 무엇인지, 어떤 주석(최대 두 개)이 이를 명명하는지.
- 어휘에서 3~5개의 구성 요소를 선택합니다. HTML과 Tailwind로 장면을 작성하고, 패널의 백분율로 위치를 지정하며, 단어는 언어별 사전(프랑스어의 줄 바꿈 없는 공백)에 넣습니다.
- 장면 선택기에 추가하고 호버 제스처도 추가합니다.
- 1280px 2x 및 390px에서 정지 상태와 호버 상태의 그리드를 캡처합니다. 확인: 카드 크기에서 읽을 수 있는지, 단일 요소에 단일 색상만 있는지, 주석이 객체 외부에 있는지, 의도 없이 잘린 부분이 없는지.
제외된 항목
- 등각 투영 '종이' 시트: 실제 자료처럼 읽힙니다.
- 축소된 다이어그램의 썸네일: 텍스트를 읽을 수 없고 요소가 너무 많습니다.
- 워크숍 시간표: 메커니즘을 보여줄 뿐 본질을 보여주지 않습니다.
- 그라데이션, 장면 내 여러 색상, 팔레트 외부의 채도가 높은 색상.