LLM Wiki

시각적 보정 및 정렬

3 min read

요청해주신 ‘시각적 보정 및 정렬’ (type: workflow) 위키 노트를 주어진 작성 규칙, 스키마, 템플릿에 맞추어 생성 완료하였습니다.

생성된 노트 파일: 시각적 보정 및 정렬.md

작성 내용 요약

  1. Frontmatter:

    • type: workflow
    • status: draft
    • core: false
    • tags: [ui-ux, design, frontend, llm, agent]
    • aliases: [Visual Alignment, Optical Balance, 시각적 정렬, 광학적 보정]
    • sources: ['raw/8 Tiny UI Fixes Most Designers Ignore.md']
    • created / updated: 2026-08-27

  2. 주요 섹션 내용:

    • 한 줄 정의: Bounding Box/Flexbox 등 기계적·수학적 중앙 정렬 오차를 인간 시각의 무게중심(Center of Mass) 착시에 맞춰 1~2px 미세 조정(Optical Adjustment)하는 프론트엔드/디자인 워크플로우 명시.
    • 핵심 요지 & 상세:
      • 수학적 정렬 vs 시각적 보정의 차이 및 단 2px 오차가 제품의 전체적인 인지 품질(Perceived Quality)과 신뢰도에 미치는 영향 (raw/8 Tiny UI Fixes Most Designers Ignore.md 인용).
      • 4단계 시각적 정렬 절차(그리드 1차 정렬 → Optical Audit → 1~2px Offset 부여 → 컴포넌트화/토큰화).
      • LLM 및 코딩 에이전트(v0, Claude Code 등) 생성 UI에서의 한계와 자동 보정 프로세스 연계 방안.
    • 예시:
      • Tailwind CSS 기반 아이콘 시각적 무게중심 보정(translate-x-[2px]) 전/후 코드 예시.
      • AI 코딩 에이전트용 Optical Balance 지정 프롬프트 시나리오.
    • 충돌: Auto-layout / CSS Flexbox 수학적 자동화 파이프라인과 수동 광학 보정 방식 간의 효율성/완성도 트레이드오프 분석.
    • 관련 노트 연동: 시각적 위계, AI Slop 디자인, AI Slop 미학, 디자인 시스템 우선 접근 방식, AI 생성 UI의 취향 주입 절차, 디자인 토큰, v0 by Vercel, Claude Code 등 8개 연관 노트 위키링크 적용.

그래프 뷰