Files

T

Antigravity Agent f8b21af4be Wiki cleanup: error-doc removal, dedup merge, link normalization

10_Wiki/Topics 대규모 정리:
- 오류 캡처/미완성 stub 문서 227개 제거
- 교차폴더 중복 43클러스터 병합 (63파일 → redirect)
- 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건
- 카테고리 MOC 6개 신규 생성
- Graph 섹션 미해결 related-keyword 링크 10,058건 제거

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-20 23:52:15 +09:00

5.8 KiB

Raw Blame History

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, tags, raw_sources, last_reinforced, github_commit, tech_stack

title

프론트엔드_및_UIUX_표준

📌 한 줄 통찰 (The Karpathy Summary)

"복잡한 UI 상태를 예측 가능한 흐름으로 관리하고, 사용자 경험(UX)을 기술적 구조로 구현하라." 단순히 화면을 그리는 것을 넘어, 컴포넌트 기반 설계(CDD)와 디자인 시스템을 통해 일관성을 유지하고 렌더링 최적화로 초저지연 인터랙션을 보장하는 것이 현대 프론트엔드의 핵심이다.

📖 구조화된 지식 (Synthesized Content)

추출된 패턴:

UI를 독립적인 컴포넌트로 분리(Atomic Design)하고, 단방향 데이터 흐름을 통해 상태를 제어하며, 디자인 시스템(Design Tokens)을 통해 시각적 일관성과 개발 생산성을 동시에 확보하는 아키텍처 패턴.

세부 내용:

프론트엔드 아키텍처:
- Component-Driven Development (CDD): Atomic Design(Atom -> Molecule -> Organism) 기반의 재사용 가능한 UI 설계.
- State Management: 전역 상태(Zustand, Redux)와 서버 상태(TanStack Query), 로컬 상태의 역할 분리.
- Rendering Strategies: Next.js App Router 기반의 서버 컴포넌트(RSC)와 클라이언트 컴포넌트의 조화로운 배치.
디자인 시스템 (Design Systems):
- Design Tokens: 색상, 타이포그래피, 간격 등을 변수화하여 플랫폼 간 일관성 유지.
- Pattern Library: 재사용 가능한 컴포넌트 집합과 사용 가이드라인 제공.
- Governance: 시스템 업데이트 및 확산 프로세스 정의.
UI/UX 디자인 및 전략:
- HCI (Human-Computer Interaction): 피츠의 법칙(Fitts's Law), 힉의 법칙(Hick's Law) 등 인지 심리학 기반 인터랙션 설계.
- Accessibility (WCAG): 스크린 리더 지원, 고대비 모드 등 보편적 디자인(Universal Design) 원칙 준수.
- UX Research: 사용성 테스트(UT), 데이터 기반 A/B 테스트를 통한 사용자 여정(User Journey) 최적화.
인간-컴퓨터 상호작용 (HCI):
- UCD (User-Centered Design): 사용자의 인지 모델(Mental Model)과 어포던스(Affordance)를 최우선으로 고려하는 설계 철학.
- Interface Evolution: GUI(그래픽) -> VUI(음성) -> NUI(자연스러운 행동) -> BCI(뇌파)로 확장되는 인터랙션 기술.
- Adaptive UI: 사용자의 숙련도, 선호도, 현재 맥락에 맞춰 인터페이스 구성을 실시간으로 변경하는 지능형 UI.
- Human-in-the-Loop: AI의 의사 결정 과정에 인간이 적절히 개입하여 신뢰성을 확보하는 설계 패턴.
성능 최적화:
- Web Vitals: LCP, FID, CLS 등 핵심 지표 관리.
- Optimization: Code Splitting, Lazy Loading, 이미지 최적화, 대규모 데이터 렌더링(Virtualization).

🤖 LLM 활용 힌트 (How to Use This Knowledge)

언제 이 지식을 쓰는가:

신규 프로젝트의 프론트엔드 기술 스택(React/Next.js 등) 및 폴더 구조를 설계할 때.
브랜드 아이덴티티를 반영한 확장 가능한 디자인 시스템을 구축할 때.
웹 페이지의 로딩 속도나 인터랙션 반응성이 낮아 성능 개선이 필요할 때.

언제 이 지식을 쓰면 안 되는가:

백엔드 로직 중심의 API 서버 개발이나 데이터 엔지니어링 작업 시.

주의사항 또는 알려진 한계:

조기 최적화: 복잡한 상태 관리 라이브러리 도입은 초기 개발 속도를 늦출 수 있으므로 프로젝트 규모에 맞춰 선택할 것.
디자인 부채: 디자인 시스템의 엄격한 준수는 창의적 UI 시도를 제한할 수 있으므로 유연한 확장성을 고려해야 함.

🔗 지식 연결 (Graph)

Related Topics: , 보안_및_시스템_신뢰성_표준, Cloud_Native
Next Step: AI 에이전트와 연동되는 동적 생성 UI(Generative UI) 패턴 연구 및 표준화.

🧪 검증 상태 (Validation)

정보 상태: verified
출처 신뢰도: A
검토 이유: (P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)

🧬 중복 검사 (Duplicate Check)

기존 유사 문서: (TODO: 인덱서 클러스터 리포트 참조)
처리 방식: UPDATE (자동 정규화)
처리 이유: Phase 1 정규화 — 옛 템플릿/누락 필드 보강.

⚠️ 모순 및 업데이트 (Contradictions & Updates)

과거 데이터와의 충돌: 없음
정책 변화: 없음

🕓 변경 이력 (Changelog)

날짜	변경 내용	처리 방식	신뢰도
2026-05-08	P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화)	UPDATE	A

💻 코드 패턴 (Code Patterns)

패턴 1: (TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)

# TODO

🤔 의사결정 기준 (Decision Criteria)

선택 A를 써야 할 때:

(TODO)

선택 B를 써야 할 때:

(TODO)

기본값:

(TODO)

❌ 안티패턴 (Anti-Patterns)

[안티패턴]: (TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)

5.8 KiB Raw Blame History