로고 그리드 시스템

로고 그리드 시스템은(는) 무엇을 하나요?

목적

로고 그리드 시스템은 '소셜 프루프' 로고(예: 고객 브랜드, 기술 파트너, 미디어 언급)를 정리하고 표현하기 위한 방법론을 제공합니다. 표준 이미지 갤러리와 달리 로고 그리드는 다양한 종횡비(세로형, 가로형, 정사각형)와 시각적 밀도를 가진 로고가 균형 잡히고 '무게'가 같아 보이도록 광학적 정규화가 필요합니다. 이 스킬은 브랜드의 2차 신뢰 신호가 기본 디자인을 지원하면서 시각적 혼란을 일으키거나 외부 브랜드의 무결성을 훼손하지 않도록 보장합니다.

사용 사례

• '로고 클라우드': 히어로 섹션 아래에 있는 고객 로고의 가로 행.
• '프레스 바': 푸터나 사이드바의 미디어 언급(예: 'As seen in...').
• 통합/파트너 디렉토리: 기술 생태계를 보여주는 그리드.
• 스폰서십 섹션: 페이지 하단의 이벤트 또는 프로젝트 기여자.
• 마키/티커: 브랜드 마크의 무한 가로 스크롤.

사용하지 말아야 할 경우

• 기본 브랜드 아이덴티티: 사이트 자체 로고 디자인(전문 브랜딩/아이덴티티 스킬 사용).
• 아이콘그래피: 작고 기능적인 UI 심볼(iconography-system 사용).
• 상품 목록 페이지(PLP): 기본 콘텐츠가 브랜드 마크가 아닌 제품 자체인 경우.
• 탐색 메뉴: 기본 사이트 탐색에 텍스트 대신 로고를 사용하는 경우.

입력

1. 에셋 인벤토리: 다양한 형식의 로고 모음(SVG 선호).
2. 브랜드 무결성 규칙: 파트너 브랜드의 '클리어 스페이스' 및 색상 사용 요구 사항에 대한 지식.
3. 상위 컨텍스트: 그리드가 위치할 섹션의 너비와 배경색.
4. 시각적 계층 구조 우선순위: 로고가 눈에 띄게(풀 컬러) 또는 미묘하게(단색/음소거) 표시되어야 합니까?

출력

1. 정규화 매트릭스: 정사각형, 와이드, 세로형 로고에 대한 경계 상자 규칙 정의.
2. 시각적 처리 사양: 색상(회색조, 녹아웃 또는 원본), 불투명도, 호버 상태에 대한 규칙.
3. 반응형 그리드 청사진: 열 개수 계획(예: 모바일 2열, 데스크탑 6열).
4. 광학적 크기 조정 가이드: 시각적 무게 균형을 위한 특정 백분율 기반 크기 조정 규칙.

워크플로우

1. 에셋 형식 감사 및 표준화

모든 로고를 수집하고 SVG 형식을 우선시합니다. 래스터(PNG/JPG)만 사용 가능한 경우 고해상도(디스플레이 크기의 최소 2배)인지 확인합니다. 소스 파일에서 불필요한 패딩을 제거하여 '경계 상자'가 로고의 치수를 정확하게 반영하도록 합니다.

2. 정규화 컨테이너 설정

각 로고에 대해 '정규화 컨테이너'(고정 종횡비 상자, 일반적으로 정사각형 또는 3:2)를 만듭니다.

• object-fit: contain을 사용하여 각 로고를 이 컨테이너 안에 배치합니다.
• 광학적 조정: 상자를 단순히 채우지 마십시오. 와이드 로고는 더 많은 너비를 차지하지만 높이는 더 적게 차지해야 합니다. 정사각형 로고는 동일한 '잉크 밀도'를 유지하기 위해 와이드 로고보다 너비와 높이를 더 적게 차지해야 합니다.

3. 시각적 처리 정의

사이트의 미학과 브랜드 인지도의 균형을 맞추는 스타일을 선택합니다.

• 음소거/단색(표준): 일반적으로 filter: grayscale(1)에 감소된 opacity를 더하거나 단색 SVG 마스크로 작업할 때 color-mix()를 사용하여 모든 로고를 단일 색상(보통 진한 회색 또는 배경색의 '녹아웃')으로 변환합니다. 이렇게 하면 기본 CTA에서 주의를 분산시키는 '무지개 효과'를 방지할 수 있습니다.
• 호버/표시: 로고를 기본적으로 음소거 상태로 유지하고 호버할 때만 원래 브랜드 색상을 표시합니다.
• 풀 컬러: 로고 자체가 주요 매력인 경우(예: 유명 스폰서십 페이지)에만 사용합니다.

4. 간격 및 리듬 적용

fluid-spacing-system을 사용하여 로고 간 간격을 정의합니다.

• 거터 너비: 각 로고 주변에 브랜드 가이드라인을 존중할 충분한 '클리어 스페이스'(일반적으로 로고 높이의 최소 50%)를 확보합니다.
• 정렬: 안정적인 수평선을 만들기 위해 정규화 컨테이너를 중심축(가로 및 세로 모두)에 정렬합니다.

5. 반응형 리플로우 설계

더 작은 화면에서 그리드가 어떻게 축소되는지 매핑합니다.

• 데스크탑: 행당 5-8개 로고.
• 태블릿: 행당 3-4개 로고.
• 모바일: 행당 2개 로고(또는 공간이 매우 제한된 경우 가로 '마키' 스크롤).
• 축소: 모바일에서 로고가 계속 읽을 수 있도록 합니다. 로고가 '흐릿해지면' 해당 브랜드 아이덴티티의 '마크 전용' 버전으로 전환합니다.

의사 결정 규칙

• '잉크 밀도' 규칙: 매우 '무겁거나' 단색인 로고(예: 채워진 원)는 '가벼운' 또는 공기가 많은 로고(예: 얇은 워드마크)보다 10-15% 더 작게 크기를 조정하여 무게가 같아 보이도록 해야 합니다.
• 회색조 기본값: 항상 단색 로고로 시작합니다. 클라이언트가 모든 파트너에 대해 '브랜드 진정성'을 특별히 요구하는 경우에만 색상을 추가합니다.
• 중앙 수평선: 항상 로고를 행 내에서 세로로 중앙 정렬합니다. 높이가 다른 로고를 상단 정렬하면 비전문적으로 보이는 '계단' 효과가 발생합니다.
• 최대 너비/높이: 정규화 컨테이너의 max-height(예: 40px ~ 60px)를 정의하여 단일 로고가 섹션을 지배하는 것을 방지합니다.

제약 조건

• 접근성: 모든 로고에는 회사 이름을 나타내는 alt 속성이 있어야 합니다(예: alt="Acme Corp 로고"). 섹션에 '우리의 파트너'와 같은 제목이 있는 경우 로고는 중복을 피하기 위해 장식용(alt="")으로 표시될 수 있습니다.
• 브랜드 무결성: 로고를 늘리거나 왜곡하지 마십시오. 로고의 내부 비율을 변경하지 마십시오.
• 반응성: 그리드는 유동적이어야 합니다. 전체 그리드에 고정 픽셀 너비를 사용하지 말고 max-width 제약 조건과 함께 100% 너비를 사용하십시오.

일반적인 실패 패턴

• '거대한 정사각형': 정사각형 로고가 와이드 로고와 같은 높이를 차지하여 3배 더 크게 보입니다.
• 색상 혼란: 다른 팔레트의 화려한 로고를 혼합하여 사이트가 '링크 팜'처럼 보이게 만듭니다.
• 소스 패딩: 로고 파일 자체 내에 다른 양의 '여백'을 남겨 두어 자동 정렬을 불가능하게 만듭니다.
• 모바일 밀집: 모바일 화면에서 한 행에 4개의 로고를 맞추려고 시도하여 모두 읽을 수 없게 만듭니다.
• 계단식 정렬: 높이가 다른 로고를 상단 정렬하여 들쭉날쭉하고 산만한 하단 가장자리를 만듭니다.

검증 기준

• 로고가 광학적으로 균형 잡혀 있습니다(어느 로고도 눈에 띄게 '더 무거워' 보이지 않음).
• 모든 로고가 일관된 시각적 처리를 공유합니다(예: 모두 회색조).
• 정렬이 셀 내에서 가로 및 세로 모두 중앙에 맞춰져 있습니다.
• 소스 파일은 내부 패딩이 없는 SVG 또는 고해상도 래스터입니다.
• 모바일 보기에서 밀집을 피하고 가독성을 유지합니다.
• 접근성: 모든 로고에 적절한 alt 텍스트 또는 장식용 표시가 있습니다.
• 각 브랜드의 '클리어 스페이스' 요구 사항이 준수됩니다.