Visual Literacy: AI가 디자이너처럼 보도록 가르치기
AI는 단순한 지시만 필요한 것이 아닙니다. 인간 전문성을 가르칠 수 있는 모델이 필요합니다.
이것이 무엇인가
Visual Literacy는 추론 프레임워크입니다 — 프롬프트 템플릿, 포맷팅 가이드, CSS 유틸리티가 아닙니다. AI가 인간이 정보를 지각하는 방식을 모델링하여 시각 디자인 결정을 내리도록 가르칩니다.
이것이 해결하는 문제: AI는 레이아웃을 생성할 수 있습니다. 그러나 레이아웃이 작동하는지는 말할 수 없습니다. 평평한 계층 구조, 깨진 리듬, 경쟁하는 강조, 인지 과부하를 인지하지 못합니다. 이 프레임워크는 명시적 추론 원칙으로서 이러한 지각 능력을 제공합니다.
이것은 인간의 판단을 보강합니다. 대체하지 않습니다.
Visual Literacy는 AI가 디자인에 대해 추론하도록 가르쳐 인간이 더 빠르고 더 나은 결정을 내릴 수 있게 하는 것이지, AI가 단독으로 결정을 내리도록 하는 것이 아닙니다.
목표는 협업입니다:
- AI는 구조화된 분석, 지각 추론, 진단 프레임워크를 제공합니다
- 인간은 의도, 취향, 맥락, 청중 지식, 최종 판단을 제공합니다
디자인을 8개 차원에서 0-5점으로 평가할 수 있는 AI는 유용합니다. 루브릭에서 점수가 낮다고 디자이너의 정보에 기반한 선택을 무시하는 AI는 그렇지 않습니다.
이 프레임워크를 사용하여 사고를 날카롭게 하되, 외주화하지 마십시오.
전제
AI는 시각적 직관을 가지고 있지 않습니다. 페이지가 균형 잡혀 있는지, 혼잡한지, 미완성인지, 혼란스러운지, 우아한지 즉시 인식할 수 없습니다. 이 직관은 명시적 추론 원칙으로 번역되어야 합니다.
AI에게 시각 문해력을 가르친다는 것은 정보를 형식화하는 방법뿐만 아니라 인간이 정보를 어떻게 지각하는지 가르치는 것을 의미합니다.
변화는 형식화에서 지각으로의 이동입니다.
핵심 원칙
모든 시각적 결정은 인간이 정보를 어떻게 지각하고 처리할 것인지에 대해 설명 가능해야 합니다.
시각적 선택이 인간의 이해를 돕는 이유를 설명할 수 없다면, 그것은 장식입니다. 인지의 관점에서 설명할 수 있다면, 그것은 디자인입니다.
빠른 시작
1. 스킬을 프로젝트에 복사
# 저장소 클론
git clone https://github.com/amberhoward/visual-literacy.git
# 프로젝트 스킬 디렉토리로 복사
cp -r visual-literacy/.opencode/skills/visual-literacy ./your-project/.opencode/skills/
2. AI에게 사용 지시
프롬프트 또는 시스템 메시지에 다음을 포함:
이 문서의 디자인을 평가하고 추론하기 위해 visual-literacy 스킬을 사용하세요.
3. 차이 확인
이전 (형식화 지시):
"제목을 더 크게 하고 여백을 더 추가하세요."
이후 (지각 추론):
"시각적 계층 구조가 불충분합니다 — 독자가 정보 구조를 스캔하고 식별할 수 없습니다. 관련 없는 섹션 사이의 간격이 섹션 내부 간격과 구분되지 않습니다. 제목-본문 대비를 높이세요. 개념적 거리를 나타내기 위해 섹션 간 간격을 섹션 내 간격의 2-3배로 사용하세요."
이 스킬을 사용해야 할 때
다음과 같은 경우 이 스킬을 사용하세요:
- 문서, 보고서, 프레젠테이션을 만들 때
- 인터페이스나 레이아웃을 디자인할 때
- 기존 디자인을 평가하거나 비평할 때
- 간격, 계층 구조, 그룹화, 강조에 대한 결정을 내릴 때
- 형식화 지시를 지각적 결정으로 번역할 때
- 무언가가 "이상하게 느껴지지만" 그 이유를 명명할 수 없을 때 디버깅할 때
- 디자인 리뷰나 UX 감사를 실행할 때
세 가지 모드
모드 1: 디자인 (사전 예방적)
새로운 것을 만들 때는 출력을 생성하기 전에 휴리스틱을 사용하여 시각적 결정을 추론하세요. 특정 레이아웃을 선택한 이유를 묻기 전에 설명하세요.
사용 방법: AI에게 디자인을 생성하기 전에 시각적 추론 과정을 설명하도록 요청:
이 페이지를 디자인하기 전에 지각 추론 과정을 설명하세요:
1. 정보 구조는 무엇입니까?
2. 인간은 이것을 어떻게 지각할 것입니까?
3. 독자에게 어떤 인지적 부담을 주고 있습니까?
4. 시각적 구조가 의도를 전달합니까?
그런 다음 그 추론에 기반하여 디자인을 생성하세요.
모드 2: 비평 (평가적)
기존 작업을 검토할 때는 지각 프레임워크를 사용하여 문제를 진단하세요. 무엇이 잘못되었는지, 왜 잘못되었는지, 어떤 인지 원칙이 위반되었는지 명명하세요.
사용 방법: 스크린샷, 코드, 또는 설명을 제공하고 구조화된 비평을 요청:
visual-literacy 평가 루브릭을 사용하여 이 디자인을 비평하세요.
각 차원을 0-5점으로 평가하고, 심각도 수준을 식별하며,
지각적 근거와 함께 구체적인 수정 권장 사항을 제공하세요.
모드 3: 번역 (교육적)
형식화 지시가 주어지면 이를 이면의 지각적 의도로 번역하세요. 그런 다음 문자 그대로의 지시가 아닌 지각적 목표를 실행하세요.
사용 방법: 형식화 지시를 제공하고 번역을 요청:
"이 페이지에 여백을 더 추가하고 싶습니다." 형식화-지각 번역 가이드를 사용하여
이 지시의 지각적 의도를 설명하고 올바르게 실행하세요.
지각 추론 과정
시각적 결정을 내리기 전에 다음 순서를 따르세요:
1. 정보 구조는 무엇인가?
- 주요 콘텐츠는 무엇인가?
- 중요성의 계층 구조는 무엇인가?
- 논리적으로 함께 그룹화되는 것은 무엇인가?
- 순서대로 읽어야 하는 것과 스캔할 수 있는 것은 무엇인가?
2. 인간은 이것을 어떻게 지각할 것인가?
- 눈이 가장 먼저 가는 곳은 어디인가? 그것이 올바른 위치인가?
- 독자가 5초 이내에 필요한 것을 스캔하고 찾을 수 있는가?
- 관련 개념이 시각적으로 연결되어 있는가?
- 콘텐츠를 통한 명확한 경로가 있는가?
3. 독자에게 어떤 인지적 부담을 주고 있는가?
- 각 지점에서 독자는 얼마나 많은 결정을 내려야 하는가?
- 작업 기억에 정보를 유지하도록 요구하고 있는가?
- 방해를 받았을 때 쉽게 위치를 되찾을 수 있는가?
- 밀도가 콘텐츠 유형에 적절한가?
4. 시각적 구조가 의도를 전달하는가?
- 모든 요소가 공간을 차지할 자격이 있는가?
- 간격이 관계를 전달하는가, 아니면 우연을 전달하는가?
- 패턴이 의도적으로 반복되는가, 아니면 일관성 없이 반복되는가?
- 페이지가 완성된 느낌인가, 아니면 버려진 느낌인가?
휴리스틱 프레임워크
8개 카테고리, 24개 휴리스틱, 하나의 우선순위 시스템.
| 카테고리 | 개수 | 핵심 질문 |
|---|---|---|
| 계층 구조 | 3 | 눈이 가장 먼저 어디를 봐야 하는지 알 수 있는가? |
| 그룹화 | 3 | 관련 항목이 시각적으로 연결되어 있는가? |
| 리듬 | 3 | 독자가 기대를 형성할 수 있는가? |
| 강조 | 3 | 중요한 정보가 눈에 띄는가? |
| 균형 | 2 | 시각적 무게가 의도적으로 분포되어 있는가? |
| 완결성 | 3 | 페이지가 해결된 느낌인가? |
| 흐름 | 3 | 콘텐츠를 통한 명확한 경로가 있는가? |
| 절제 | 3 | 모든 요소가 공간을 차지할 자격이 있는가? |
전체 카탈로그, 지각적 근거, 위반 사례, 진단 방법은 references/design-heuristics.md를 참조하세요.
휴리스틱 충돌 시 우선순위:
- 계층 구조 — 독자는 가장 중요한 것이 무엇인지 알아야 합니다
- 그룹화 — 독자는 무엇이 함께 속하는지 알아야 합니다
- 흐름 — 독자는 다음에 어디로 가야 하는지 알아야 합니다
- 강조 — 독자는 무엇이 가장 중요한지 알아야 합니다
- 리듬 — 독자는 기대를 형성할 수 있어야 합니다
- 균형 — 레이아웃이 안정적으로 느껴져야 합니다
- 완결성 — 페이지가 해결된 느낌이어야 합니다
- 절제 — 모든 요소가 그 자리를 차지할 자격이 있어야 합니다
지각 원리
인지 과학 기반. 디자인 규칙이 아니라 인간의 두뇌가 시각 정보를 처리하는 방식에 대한 사실입니다.
| 원리 | 설명 내용 |
|---|---|
| 게슈탈트 (근접성, 유사성, 폐쇄성, 연속성, 전경-배경, 공통 영역) | 두뇌가 자동으로 정보를 그룹화하는 방식 |
| 작업 기억 (Miller의 7±2, 인지 청킹) | 두뇌가 한 번에 처리할 수 있는 양 |
| 전주의적 처리 | 의식적 사고 전에 두뇌가 보는 것 |
| 읽기 패턴 (F-패턴, Z-패턴, 구텐베르크 다이어그램) | 눈이 페이지를 가로질러 움직이는 방식 |
| 신호 대 잡음비 | 두뇌가 걸러내야 하는 것 |
| 점진적 공개 | 두뇌가 이해를 계층적으로 구축하는 방식 |
| 일관성 | 두뇌가 예측을 형성하고 사용하는 방식 |
| 어포던스 | 시각적 형태가 기능을 전달하는 방식 |
전체 기반은 references/perceptual-principles.md를 참조하세요.
평가 루브릭
모든 디자인을 8개 차원에서 0-5점으로 평가하세요. 총점: /40.
| 차원 | 측정 내용 |
|---|---|
| 계층 구조 (0-5) | 독자가 읽지 않고도 중요성을 식별할 수 있는가? |
| 그룹화 (0-5) | 그룹 구성원 관계가 모호하지 않은가? |
| 리듬 (0-5) | 독자가 레이아웃에 대한 기대를 형성할 수 있는가? |
| 강조 (0-5) | 독자의 주의가 올바른 곳으로 가는가? |
| 흐름 (0-5) | 눈이 콘텐츠를 자연스럽게 이동하는가? |
| 균형 (0-5) | 시각적 무게가 의도적으로 분포되어 있는가? |
| 완결성 (0-5) | 페이지가 해결된 느낌인가? |
| 절제 (0-5) | 모든 요소가 공간을 차지할 자격이 있는가? |
| 총점 | 등급 |
|---|---|
| 0-10 | 심각 — 대대적인 재설계 필요 |
| 11-18 | 상당한 문제 — 여러 차원에서 작업 필요 |
| 19-25 | 기능적 — 특정 개선 필요 |
| 26-32 | 좋음 — 프로덕션 준비, 마무리 필요 |
| 33-38 | 우수 — 사소한 개선만 가능 |
| 39-40 | 탁월 — 이것을 예시로 가르치세요 |
점수 가이드, 심각도 분류(P0-P3), 수정 권장 사항은 references/evaluation-rubric.md를 참조하세요.
충돌 해결
휴리스틱이 반대 방향으로 당길 때:
| 충돌 | 해결 방법 |
|---|---|
| 계층 구조 vs. 미니멀리즘 | 미니멀리즘은 처리가 적다는 뜻이지, 처리가 없다는 뜻이 아닙니다. 최소 수단으로 최대 계층 구조를 만드세요. |
| 완결성 vs. 여백 | 완결성은 구조에서 오는 것이지 밀도에서 오는 것이 아닙니다. 60% 콘텐츠 / 40% 여백도 완성된 느낌을 줄 수 있습니다. |
| 일관성 vs. 강조 | 일관성이 기본값입니다. 강조는 예외입니다. 의도적으로, 드물게, 그리고 현저하게 깨뜨리세요. |
| 밀도 vs. 휴식 | 밀집 구역과 여유 구역을 번갈아 배치하세요. 멈춤을 위한 스캔 앵커를 제공하세요. |
| 관습 vs. 차별화 | 구조에 대해서는 관습을 따르세요. 콘텐츠와 미묘한 처리를 통해 차별화하세요. |
전체 해결 프레임워크는 references/heuristic-conflicts.md를 참조하세요.
형식화를 지각으로 번역하기
| 지시 | 지각적 의도 |
|---|---|
| "여백을 더 추가하세요" | 시각적 거리가 개념적 관계를 반영하지 않습니다. |
| "제목을 더 크게 만드세요" | 스캔하기에 계층 구조가 불충분합니다. |
| "문단을 나누세요" | 시각적 덩어리가 작업 기억 한계를 초과합니다. |
| "눈에 띄게 만드세요" | 요소가 중요도에 비해 더 많은 강조가 필요합니다. |
| "이것을 단순화하세요" | 콘텐츠 유형에 비해 인지 부하가 너무 높습니다. |
| "더 전문적으로 만드세요" | 시각적 신호가 콘텐츠의 권위 수준과 일치하지 않습니다. |
전체 번역 사전은 references/formatting-to-perception.md를 참조하세요.
아키텍처
이 스킬은 6개 계층 추론 아키텍처를 따릅니다:
정신 모델 → 전문가가 이 도메인을 지각하는 방식
↓
지각 원리 → 이유를 설명하는 인지 과학
↓
휴리스틱 → 실용적인 경험 법칙
↓
충돌 해결 → 규칙이 모순될 때 해야 할 일
↓
평가 루브릭 → 품질에 대한 구조화된 점수
↓
번역 계층 → 순진한 지시를 전문가 추론으로 변환
이 아키텍처는 도메인에 구애받지 않습니다. 시각 문해력은 첫 번째 응용입니다. 동일한 6개 계층은 AI가 건축, 의학, 교육, 리더십 또는 암묵적 전문성이 명확한 표현을 거부하는 모든 분야에서 전문가 인지를 가르치는 데 사용될 수 있습니다.
출력 요구 사항
이 스킬을 사용할 때는 항상:
- 모든 시각적 결정 뒤에 지각 원리의 이름을 명시하세요
- 레이아웃 선택의 인지적 효과를 설명하세요
- 미적 선호도가 아닌 위반된 원칙의 관점에서 문제를 진단하세요
- 비평할 때 평가 루브릭을 사용하여 디자인에 점수를 매기세요
- 피드백을 구현하라는 요청을 받으면 형식화에서 지각으로 지시를 번역하세요
안티 패턴
절대 하지 말아야 할 것:
- 이유를 설명하지 않고 "전문적으로 보인다"는 이유로 레이아웃을 선택하지 마세요
- 이해를 돕지 않는 장식 요소를 추가하지 마세요
- 간격, 타이포그래피, 색상을 임의의 미적 선택으로 취급하지 마세요
- "그냥 맞는 느낌이니까"라는 이유로 추론 단계를 건너뛰지 마세요
- 특정 콘텐츠를 고려하지 않고 휴리스틱을 기계적으로 적용하지 마세요
리트머스 테스트
시각적 디자인을 생성한 후, 스스로에게 물어보세요:
"모든 간격 결정, 모든 서체 선택, 모든 그룹화, 모든 강조를 인간이 이 정보를 어떻게 지각하고 처리할 것인지의 관점에서 설명할 수 있는가?"
그렇다면, 디자인은 추론된 것입니다. 아니라면, 그것은 장식입니다.