Files

T

koriweb 5ba5a55c78 feat: Wiki 지식 자산 업데이트 - UX Scenarios, Frontend, Game Design, Topics 추가 [2026-05-08]

2026-05-08 19:52:07 +09:00

4.0 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, inferred_by, tech_stack

title

Relative Positioning (상대적 배치)

📌 한 줄 통찰 (The Karpathy Summary)

"고정된 좌표의 감옥에서 벗어나 주변과의 '관계' 속에서 자리를 잡고, 변화하는 환경(Viewport)에 유연하게 조응하는 질서를 부여하라" — 요소의 위치를 고정된 절대값이 아닌, 부모 요소나 주변의 다른 요소들과의 상대적인 거리를 기준으로 결정하는 디자인 및 레이아웃 배치 방식.

📖 구조화된 지식 (Synthesized Content)

추출된 패턴: "Hierarchical Flow and Adaptive Alignment" — 문서의 흐름(Flow)을 깨지 않으면서 현재 위치를 기준으로 미세 조정하거나, 부모 요소를 기준점(Origin)으로 삼아 하위 요소들의 가독성을 확보하는 레이아웃 패턴.
핵심 메커니즘:
- Relative to Self: 자신의 원래 위치를 기준으로 상/하/좌/우 이동.
- Relative to Parent: 부모 박스의 경계선을 기준으로 정렬 (주로 Absolute와 결합).
- Percentage-based: 화면 너비나 높이에 비례한 크기와 간격 설정.
- Flex/Grid Flow: 주변 요소들과의 관계에 따라 자동으로 위치와 크기 조절.
의의: 모바일, 태블릿, 데스크탑 등 다양한 디바이스 환경에서 일관된 사용자 경험을 제공하는 반응형 웹 디자인(Responsive Design)의 핵심 토대.

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

과거 데이터와의 충돌: 픽셀(px) 단위의 정교한 배치가 최고라 믿던 시대에서, 이제는 다양한 해상도에 유연하게 대응하는 상대적 단위(em, rem, %, vh/vw)와 레이아웃 엔진(Flexbox, Grid) 중심의 설계로 패러다임이 완전히 전환됨.
정책 변화: Antigravity 프로젝트의 모든 UI 컴포넌트는 사용자의 화면 환경에 상관없이 최적의 가독성을 유지하기 위해, 상대적 배치와 반응형 레이아웃 원칙을 엄격히 준수하여 제작됨.

🔗 지식 연결 (Graph)

Modern-Website-Architecture, Frontend-App-Development, Product-Thinking-in-AI, User-Interface-Design-Principles
Raw Source: 10_Wiki/Topics/AI/Relative-Positioning.md

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

언제 이 지식을 쓰는가:

(TODO)

언제 쓰면 안 되는가:

(TODO)

🧪 검증 상태 (Validation)

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

🧬 중복 검사 (Duplicate Check)

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

🕓 변경 이력 (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: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)

4.0 KiB Raw Blame History