coastdigitalgroup/coastai-skills

이미지 및 미디어 시스템

목적

이미지 및 미디어 시스템은 시각 자산이 웹사이트 디자인에 통합되는 방식을 관리하는 방법론을 제공합니다. 이미지, 일러스트레이션, 비디오가 단순한 "장식"이 아니라 사용자 경험의 기능적 일부임을 보장합니다. 이 시스템은 종횡비, 반응형 아트 디렉션, 텍스트 가독성(오버레이) 에 대한 규칙을 수립하여 화면 크기나 콘텐츠 복잡성에 관계없이 미디어가 높은 영향력과 접근성을 유지하도록 합니다.

사용 사례

• 새 웹사이트의 아트 디렉션 및 시각적 스타일 표준 수립.
• UI 구성 요소 라이브러리(예: 카드, 히어로)에 대한 일관된 종횡비 매트릭스 정의.
• 배경 이미지 및 비디오에 대한 고대비 텍스트 오버레이 설계.
• "아트 디렉션" 미디어의 반응형 자르기 및 초점 유지 관리.
• 갤러리, 기능 하이라이트, 사례 연구와 같은 미디어 중심 섹션의 구성 표준화.

사용하지 말아야 할 경우

• 기술적 자산 최적화: 압축, 파일 형식, 지연 로딩과 같은 기술적 문제는 website-development의 responsive-images를 사용하세요.
• 로고 및 브랜딩 디자인: 기본 브랜드 아이덴티티 자체(로고, 마크)의 디자인은 일반적으로 웹 디자인 외부에서 수립됩니다.
• 아이콘: 작고 기능적인 UI 기호는 iconography-system을 사용하세요.
• 장식 전용 패턴: 콘텐츠와 상호 작용하지 않는 순수 추상적이고 의미 없는 배경 질감.

입력

1. 브랜드 아트 디렉션: 의도된 시각적 "음성"(예: 자연스러운, 기술적인, 고대비, 미니멀리스트).
2. 콘텐츠 인벤토리: 필요한 미디어 유형(예: 제품 사진, 인물 사진, 추상 배경).
3. 반응형 그리드 시스템: 미디어가 위치할 레이아웃 컨텍스트.
4. 타이포그래피 시스템: 미디어와 상호 작용하거나 그 위에 위치할 텍스트 스타일.

출력

1. 종횡비 매트릭스: 특정 구성 요소 유형에 매핑된 정의된 비율 세트(예: 16:9, 1:1, 4:3).
2. 오버레이 가독성 사양: 텍스트 대비를 보장하기 위한 스크림, 그라데이션, 블러 처리 표준.
3. 아트 디렉션 맵: 모바일, 태블릿, 데스크탑에 대한 정의된 초점 규칙 및 자르기 전략.
4. 구성 청사진: 미디어가 인접 콘텐츠와 관련되는 방식에 대한 규칙(예: 50/50 분할, 인세트 미디어, 풀 블리드).

워크플로

1. 시각적 언어 정의

모든 미디어에 일관된 "필터" 또는 스타일을 설정하여 응집력을 보장합니다:

• 처리: 채도, 온도, 대비에 대한 규칙을 정의합니다.
• 밀도: 이미지가 복잡하거나 상세해야 하는지, 미니멀하거나 여유로워야 하는지 결정합니다.
• 구성: 이미지 내 "여백"에 대한 표준을 설정합니다(예: "모든 제품 사진에는 10%의 여백이 있어야 함").

2. 종횡비 표준 수립

일관된 비율 세트를 사용하여 레이아웃 "점프"를 방지하고 리듬을 유지합니다:

• 시네마틱 (16:9 / 21:9): 히어로 섹션과 몰입형 비디오에 가장 적합합니다.
• 표준 (4:3 / 3:2): 기사 미리보기 및 일반 사진에 가장 적합합니다.
• 정사각형 (1:1): 제품 목록, 아바타 및 소셜 그리드에 가장 적합합니다.
• 세로 (3:4 / 9:16): 모바일 우선 콘텐츠와 긴 기능 하이라이트에 가장 적합합니다.

3. 텍스트 가독성(오버레이) 설계

미디어 위에 텍스트를 배치할 때 "가독성 레이어"를 사용합니다:

• 스크림: 미묘하고 반투명한 검정색 또는 흰색 오버레이(보통 10-40% 불투명도).
• 그라데이션: 텍스트 뒤 영역을 어둡게 하고 이미지의 나머지 부분은 선명하게 유지하는 방향성 페이드(예: 아래에서 위로).
• 블러: 텍스트 뒤 영역에 backdrop-filter 블러를 적용하여 시각적 노이즈를 줄입니다.
• 텍스트 배치: 이미지에서 가장 "조용한" 부분에 텍스트를 정렬합니다.

4. 반응형 아트 디렉션 설정

이미지는 다양한 화면 모양에 맞게 "자르기"를 변경해야 합니다:

• 초점 유지: 이미지의 "주제"를 식별하고 컨테이너 모양이 변경될 때 계속 표시되도록 합니다(예: object-position 설정).
• 모바일 피벗: 모바일에서 가로 데스크탑 자르기(16:9)에서 정사각형 또는 세로 자르기(1:1 또는 4:5)로 전환하여 뷰포트 사용을 최대화합니다.
• 확대, 늘리지 않기: 이미지가 종횡비를 잃지 않도록 합니다. object-fit: cover를 사용하여 컨테이너를 채우면서 비율을 유지하고, CSS aspect-ratio 속성으로 공간을 예약하여 자산이 로드되기 전에 레이아웃이 이동하지 않도록 합니다.
• 아트 디렉션 자르기: 뷰포트별로 다른 자르기(크기뿐만 아니라)가 필요한 경우 여러 <source> 중단점이 있는 <picture> 요소를 사용합니다. 구성이 아닌 해상도만 변경되는 경우 단일 <img>에서 srcset/sizes를 사용합니다.

5. 구성 패턴 정의

미디어가 주변 레이아웃과 상호 작용하는 방식을 결정합니다:

• 풀 블리드: 미디어가 뷰포트 가장자리까지 확장됩니다. 영향력이 큰 소개 섹션에 가장 적합합니다.
• 인세트 / 포함: 미디어가 그리드 열 내에 유지됩니다. 보조 이미지에 가장 적합합니다.
• 레이어 효과: 미디어가 다른 요소(카드 또는 텍스트 등)와 겹쳐져 깊이를 만듭니다.

의사 결정 규칙

• 가독성 규칙: 이미지 위에 텍스트가 배치되면 WCAG AA 대비(4.5:1)를 충족해야 합니다. 충족하지 않으면 더 어두운 스크림을 적용하거나 텍스트를 이동합니다.
• 비율 일관성: 단일 행 또는 그리드의 모든 카드는 정렬을 위해 동일한 종횡비를 사용해야 합니다.
• 주제 우선 자르기: 종횡비가 모바일용으로 변경될 때 항상 이미지의 주제(예: 사람의 얼굴 또는 제품)를 우선시합니다.
• 빈 상태 대체: 이미지 로드에 실패하거나 제공되지 않은 경우를 위해 브랜드 색상의 브랜드 중립 그래픽을 사용하여 "Placeholder Style"을 정의합니다.
• 비디오 상호 작용: 항상 "재생/일시 중지" 컨트롤을 제공하고 사운드가 있는 비디오를 자동 재생하지 마십시오.
• 공간 예약: 모든 미디어 컨테이너는 브라우저가 자산을 다운로드하기 전에 레이아웃 공간을 예약할 수 있도록 정의된 aspect-ratio 또는 명시적인 width/height가 있어야 합니다.

제약 조건

• 접근성: 이미지 위의 텍스트는 화면 판독기로 읽을 수 있어야 합니다(이미지에 병합되지 않음). 모든 의미 있는 이미지에는 alt 텍스트가 있어야 합니다.
• 성능(디자인 측면): 아바타처럼 작게만 표시될 요소에 초고해상도가 필요하지 않도록 합니다.
• 반응성: 미디어로 인해 가로 스크롤이 발생해서는 안 됩니다. 레이아웃 이동(CLS)을 방지하기 위해 종횡비는 안정적으로 유지되어야 합니다.

일반적인 실패 패턴

• "대비 실패": 스크림 없이 밝거나 복잡한 이미지 위의 흰색 텍스트로 인해 텍스트를 읽을 수 없게 됩니다.
• "참수": 부적절한 반응형 자르기로 모바일에서 머리나 주요 주제가 잘립니다.
• "비율 수프": 동일한 페이지에 5가지 다른 종횡비를 사용하여 파편화되고 지저분한 시각적 리듬을 만듭니다.
• "자산 불일치": 고품질 사진을 "클립아트" 스타일 일러스트레이션과 혼합하여 브랜드 일관성을 깨뜨립니다.
• "늘리기": 이미지를 해당 비율과 일치하지 않는 컨테이너에 강제로 맞춰 왜곡을 초래합니다.

검증 기준

• 텍스트 오버레이가 있는 모든 이미지가 WCAG AA(4.5:1) 대비를 충족합니다.
• 유사한 구성 요소 유형(예: 모든 블로그 카드는 4:3) 내에서 종횡비가 일관됩니다.
• 모바일, 태블릿, 데스크탑 뷰포트에서 초점이 유지됩니다.
• 모든 의미 있는 이미지에 설명적인 alt 텍스트가 정의되어 있습니다.
• 미디어로 인해 가로 오버플로우나 레이아웃 왜곡이 발생하지 않습니다.
• 모든 자산에서 명확한 시각적 스타일(아트 디렉션)이 유지됩니다.
• 모든 미디어 컨테이너는 누적 레이아웃 이동(CLS)을 방지하기 위해 aspect-ratio 또는 명시적 크기를 통해 공간을 예약합니다.