From c612160a137662a3897eed3ced916279c332cec8 Mon Sep 17 00:00:00 2001 From: Antigravity Agent Date: Sun, 26 Apr 2026 15:07:47 +0900 Subject: [PATCH] chore(wiki): reinforce knowledge batch #6-#10 (200 docs milestone) --- ...-26-Skybound_Combat_Safe_Micro_HUD_Pass.md | 79 ++ ...26-04-26-Skybound_Desktop_Side_Dock_HUD.md | 66 + ...d_Global_HUD_Result_UI_Tone_Unification.md | 102 ++ ...croll_and_Campaign_Footer_Stabilization.md | 93 ++ ...elUp_Modal_Text_Fit_and_Card_Layout_Fix.md | 77 ++ ...Enemy_Reduction_and_UI_Readability_Pass.md | 145 ++ 00_Raw/App Router.md | 25 + 00_Raw/Atomic Styling.md | 26 + 00_Raw/Base Web.md | 18 + 00_Raw/CLS (Cumulative Layout Shift).md | 35 + 00_Raw/Client-Side Rendering (CSR).md | 20 + 00_Raw/Core Web Vitals.md | 34 + 00_Raw/Design-to-Code Workflow.md | 19 + ...”ฉ ํŽ˜์ด์ง€ ์ „ํ™˜์œจ ๊ฐœ์„  ๋ฐ ์ดํƒˆ๋ฅ  ๊ฐ์†Œ(CRO).md | 20 + 00_Raw/Explicit Contracts.md | 22 + 00_Raw/Google Page Experience 2025.md | 22 + 00_Raw/Hydration Mismatch.md | 24 + 00_Raw/INP (Interaction to Next Paint).md | 40 + .../Incremental Static Regeneration (ISR).md | 27 + 00_Raw/Kiwi.com Migration.md | 24 + 00_Raw/LCP (Largest Contentful Paint).md | 20 + ...odern Frontend Engineering Architecture.md | 33 + 00_Raw/Modular Monolith.md | 19 + 00_Raw/Monorepo.md | 22 + ... ํ”„๋ก ํŠธ์—”๋“œ ์Šคํƒ€์ผ๋ง ๋ฐ UI ์ปดํฌ๋„ŒํŠธ ์•„ํ‚คํ…์ฒ˜ ์„ค๊ณ„.md | 33 + 00_Raw/React Router.md | 19 + 00_Raw/React SEO Guide.md | 22 + 00_Raw/Reusable UI Components.md | 25 + 00_Raw/SEO.md | 24 + ...ation) ๊ฒ€์ƒ‰์—”์ง„ ๋…ธ์ถœ ๋ฐ ์ƒ‰์ธํ™” ํ”„๋กœ์ ํŠธ.md | 36 + 00_Raw/Scalable Frontend Architecture.md | 18 + 00_Raw/Scalable UI Systems.md | 26 + 00_Raw/Search Engine Optimization (SEO).md | 24 + 00_Raw/Server-Side Rendering (SSR).md | 21 + 00_Raw/Tailwind CSS v4 ๋„์ž….md | 25 + 00_Raw/Tailwind CSS vs Styled Components.md | 29 + 00_Raw/Transient Props.md | 18 + 00_Raw/Turborepo ๋ฐ Nx ๋นŒ๋“œ ์‹œ์Šคํ…œ.md | 25 + .../Uber Base Web React Component Library.md | 19 + 00_Raw/Uber.md | 22 + ...–‘ํ•œ ๋‚ด๋ถ€ ์•ฑ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•œ ๋””์ž์ธ ์‹œ์Šคํ…œ ๋„์ž….md | 23 + ...Content Accessibility Guidelines (WCAG).md | 31 + 00_Raw/Web Performance Optimization.md | 25 + 00_Raw/Zero-runtime CSS.md | 22 + 00_Raw/kiwi.com ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ํ”„๋กœ์ ํŠธ.md | 25 + ...ธ ๊ธฐ๋Šฅ ์†Œ์œ ๊ถŒ์ด ํ•„์š”ํ•œ ๋Œ€๊ทœ๋ชจ React ํ”Œ๋žซํผ.md | 25 + ...์ดํŠธ์˜ ํ”„๋ก ํŠธ์—”๋“œ ์„ฑ๋Šฅ(LCP, INP, CLS) ๊ณ ๋„ํ™”.md | 31 + ...ธ์—”๋“œ๋ฅผ ๋Œ€์ฒดํ•˜๋Š” ๋ชจ๋“ˆ์‹ ๋ชจ๋†€๋ฆฌ์Šค ์•„ํ‚คํ…์ฒ˜ ์„ค๊ณ„.md | 25 + .../์ ‘๊ทผ์„ฑ ๋ฒ•์  ์ค€์ˆ˜๋ฅผ ์œ„ํ•œ WCAG 2.2 ์ ์šฉ.md | 30 + ...•œ ํ”„๋ŸฐํŠธ์—”๋“œ๋ฅผ ์œ„ํ•œ ์˜์กด์„ฑ ๋ฐ ํŒจํ‚ค์ง€ ๊ตฌ์กฐํ™”.md | 30 + 10_Wiki/Placeholder_Tracking_List.md | 1180 +++++++++++++++++ 10_Wiki/Topics/AI/ABA.md | 29 + 10_Wiki/Topics/AI/AGI.md | 29 + 10_Wiki/Topics/AI/AI Agents.md | 29 + 10_Wiki/Topics/AI/AI-Alignment.md | 28 + .../Topics/AI/API-Design for AI Services.md | 29 + .../Topics/AI/Algorithm-Complexity-Big-O.md | 31 + 10_Wiki/Topics/AI/Anthropic-Principle.md | 27 + 10_Wiki/Topics/AI/Artificial-Life.md | 29 + .../Topics/AI/Attention is All You Need.md | 29 + .../AI/Auto-GPT and Autonomous Agents.md | 29 + 10_Wiki/Topics/AI/BERT.md | 36 +- .../Topics/AI/Backpropagation Through Time.md | 28 + .../Topics/AI/Bayesian-Brain-Hypothesis.md | 29 + 10_Wiki/Topics/AI/Behavioral-Economics.md | 34 +- .../AI/Best-of-N Sampling (์ตœ์  ์ƒ˜ํ”Œ๋ง).md | 28 +- 10_Wiki/Topics/AI/Black-Box-Optimization.md | 29 + 10_Wiki/Topics/AI/Bloom-Filters in Search.md | 28 + 10_Wiki/Topics/AI/Boltzmann-Machines.md | 27 + .../AI/Brain-Computer Interface (BCI).md | 27 + 10_Wiki/Topics/AI/CAP-Theorem.md | 30 + 10_Wiki/Topics/AI/CLIP.md | 28 + 10_Wiki/Topics/AI/Catastrophic-Forgetting.md | 28 + 10_Wiki/Topics/AI/Causal-Inference.md | 28 + 10_Wiki/Topics/AI/Chaos-Theory in Systems.md | 29 + .../AI/Chrome DevTools Memory Profiling.md | 48 +- ...ome DevTools ๋ฉ”๋ชจ๋ฆฌ ๋ถ„์„ ๋ฐ ์„ฑ๋Šฅ ์ตœ์ ํ™”.md | 30 - 10_Wiki/Topics/AI/Circuit Discovery (ศธ ฿ฐ).md | 27 - 10_Wiki/Topics/AI/Circuit Discovery.md | 29 + 10_Wiki/Topics/AI/Cognitive-Architecture.md | 30 + 10_Wiki/Topics/AI/Collaborative-Filtering.md | 28 + .../Topics/AI/Combinatorial-Optimization.md | 37 +- 10_Wiki/Topics/AI/Complexity-Theory.md | 36 +- ... Neuroscience of Reinforcement Learning.md | 29 +- .../Topics/AI/Computational-Linguistics.md | 29 + 10_Wiki/Topics/AI/Computer-Vision.md | 30 + 10_Wiki/Topics/AI/Concept-Drift.md | 29 + 10_Wiki/Topics/AI/Concreteness-Principle.md | 28 + 10_Wiki/Topics/AI/Constitutional-AI.md | 27 + .../AI/Constraint-Satisfaction Problems.md | 32 + 10_Wiki/Topics/AI/Context-Aware-Computing.md | 29 + 10_Wiki/Topics/AI/Contrastive-Learning.md | 29 + .../Topics/AI/Control Systems Engineering.md | 30 +- 10_Wiki/Topics/AI/Control-Theory.md | 36 +- .../AI/Convolutional-Neural-Networks.md | 28 + .../Topics/AI/Cost-Benefit Analysis in AI.md | 28 + 10_Wiki/Topics/AI/Cross-Entropy Loss.md | 28 + 10_Wiki/Topics/AI/Curriculum-Learning.md | 28 + .../AI/Custom-ESLint-Rules-Development.md | 30 +- 10_Wiki/Topics/AI/Cybernetics Foundations.md | 29 + .../Topics/AI/Data-Augmentation Strategies.md | 29 + 10_Wiki/Topics/AI/Data-Ethics and Privacy.md | 29 + 10_Wiki/Topics/AI/Data-Flywheel-Effect.md | 30 + .../Topics/AI/Data-Pipeline Orchestration.md | 29 + .../AI/Decision-Trees and Random Forests.md | 28 + 10_Wiki/Topics/AI/Deep-Learning.md | 28 + 10_Wiki/Topics/AI/Deep-Q-Networks-DQN.md | 28 + 10_Wiki/Topics/AI/Deepfake-Technology.md | 28 + 10_Wiki/Topics/AI/Determinism-in-Computing.md | 29 + 10_Wiki/Topics/AI/DevOps-for-AI-MLOps.md | 30 + 10_Wiki/Topics/AI/Diffusion-Models.md | 35 +- 10_Wiki/Topics/AI/Dimensionality-Reduction.md | 28 + ...ted-Acyclic-Graph-Dependency-Management.md | 30 +- ...Discriminated-Unions-for-Error-Handling.md | 30 +- 10_Wiki/Topics/AI/Distributed-Computing.md | 29 + .../Domain-Driven Design (DDD) Type Safety.md | 25 - ...omain-Driven Design (DDD) in TypeScript.md | 25 - ...omain-Driven-Design (DDD) in TypeScript.md | 25 - .../Topics/AI/Domain-Driven-Design (DDD).md | 29 - ...omain-Driven-Design-(DDD)-in-TypeScript.md | 25 - .../Topics/AI/Domain-Driven-Design-(DDD).md | 25 - .../Domain-Driven-Design-Bounded-Context.md | 25 - 10_Wiki/Topics/AI/Domain-Driven-Design-DDD.md | 29 + ...Domain-Driven-Design-Interface-Modeling.md | 25 - .../AI/Domain-Driven-Design-in-TypeScript.md | 25 - .../Domain-Driven-Design-with-TypeScript.md | 25 - 10_Wiki/Topics/AI/Domain-Driven-Design.md | 31 - .../Topics/AI/Dopaminergic Reward Systems.md | 30 +- .../Dynamic Few-Shot (๋™์  ํ“จ์ƒท ์„ ํƒ ์ „๋žต).md | 28 +- 10_Wiki/Topics/AI/Edge-AI-and-Computing.md | 28 + .../Topics/AI/Eigenvalues-and-Eigenvectors.md | 31 + 10_Wiki/Topics/AI/Eligibility-Traces.md | 29 + 10_Wiki/Topics/AI/Embodied-AI.md | 29 + 10_Wiki/Topics/AI/Emergence-in-Systems.md | 28 + .../AI/Emotional-AI (Affective Computing).md | 29 + 10_Wiki/Topics/AI/End-to-End-Learning.md | 29 + 10_Wiki/Topics/AI/Ensemble-Methods.md | 28 + .../AI/Entropy in Information Theory.md | 28 + 10_Wiki/Topics/AI/Environment-Design-in-RL.md | 29 + 10_Wiki/Topics/AI/Epistemic-Uncertainty.md | 28 + .../Topics/AI/Ethics of Autonomous Systems.md | 29 + 10_Wiki/Topics/AI/Evolutionary-Computation.md | 30 +- 10_Wiki/Topics/AI/Expected Utility Theory.md | 30 +- 10_Wiki/Topics/AI/Experience-Replay.md | 29 + 10_Wiki/Topics/AI/Explainable-AI-XAI.md | 29 + .../Topics/AI/Exploding-Gradient Problem.md | 28 + .../Topics/AI/Exploration-vs-Exploitation.md | 29 + .../Topics/AI/Exploratory-Data-Analysis.md | 29 + 10_Wiki/Topics/AI/Extended-Reality-XR.md | 29 + 10_Wiki/Topics/AI/Extreme-Programming-XP.md | 30 + 10_Wiki/Topics/AI/Factor-Analysis.md | 28 + .../Topics/AI/Feature Clamping (ํ”ผ์ฒ˜ ๊ณ ์ •).md | 30 +- 10_Wiki/Topics/AI/Feature-Engineering.md | 38 +- 10_Wiki/Topics/AI/Federated-Learning.md | 36 +- 10_Wiki/Topics/AI/Feedback-Control-Systems.md | 30 +- .../Topics/AI/Feedback-Loops in Systems.md | 27 + 10_Wiki/Topics/AI/Few-Shot-Learning.md | 35 +- 10_Wiki/Topics/AI/Finite-Element-Analysis.md | 30 +- .../Topics/AI/Finite-State-Machines-FSM.md | 29 + 10_Wiki/Topics/AI/Fitness-Landscape.md | 28 + .../Fixed Time Step vs Variable Time Step.md | 32 +- 10_Wiki/Topics/AI/Flow State.md | 30 +- 10_Wiki/Topics/AI/Fluid-Dynamics for Games.md | 28 + 10_Wiki/Topics/AI/Focal-Loss.md | 27 + .../Functional-Programming-in-TypeScript.md | 31 +- 10_Wiki/Topics/AI/G-Stack Principles.md | 28 + 10_Wiki/Topics/AI/Gacha Mechanics Analysis.md | 29 +- 10_Wiki/Topics/AI/Gait-Analysis-Laboratory.md | 29 +- .../Topics/AI/Game Analytics (๊ฒŒ์ž„ ๋ถ„์„).md | 31 + 10_Wiki/Topics/AI/Game-Balance-Design.md | 28 + 10_Wiki/Topics/AI/Game-Economy-Design.md | 28 + 10_Wiki/Topics/AI/Game-Mechanics.md | 29 + 10_Wiki/Topics/AI/Game-Theory.md | 35 +- 10_Wiki/Topics/AI/Gamification-Strategies.md | 28 + 10_Wiki/Topics/AI/Gaussian-Processes.md | 28 + 10_Wiki/Topics/AI/Generative-AI.md | 28 + .../AI/Generative-Adversarial-Networks.md | 31 +- 10_Wiki/Topics/AI/Genetic-Algorithms.md | 36 +- 10_Wiki/Topics/AI/GitHub-Actions-CI-CD.md | 29 + 10_Wiki/Topics/AI/GloVe (Word Embeddings).md | 28 + .../AI/Goal-Oriented-Action-Planning.md | 28 + 10_Wiki/Topics/AI/Graph-Database.md | 28 + 10_Wiki/Topics/AI/Graph-Theory.md | 38 +- 10_Wiki/Topics/AI/Habit-Formation.md | 28 + 10_Wiki/Topics/AI/Hallucination-in-LLM.md | 31 + 10_Wiki/Topics/AI/Hebbian-Learning.md | 28 + .../AI/Hierarchical-Task-Network (HTN).md | 28 + 10_Wiki/Topics/AI/Human-AI-Collaboration.md | 28 + .../Topics/AI/Hyperparameter-Optimization.md | 36 +- 10_Wiki/Topics/AI/Image-Segmentation.md | 28 + 10_Wiki/Topics/AI/In-Context-Learning.md | 35 +- 10_Wiki/Topics/AI/Information-Theory.md | 28 + .../Topics/AI/Infrastructure-as-Code-IaC.md | 28 + .../AI/Integrated-Development-Environment.md | 28 + 10_Wiki/Topics/AI/Interpretability.md | 28 + 10_Wiki/Topics/AI/Knowledge-Graph.md | 28 + .../AI/LSTM (Long Short-Term Memory).md | 28 + 10_Wiki/Topics/AI/Layer-Normalization.md | 28 + 10_Wiki/Topics/AI/Learning-Rate-Scheduling.md | 29 + 10_Wiki/Topics/AI/Linear-Algebra-for-ML.md | 28 + 10_Wiki/Topics/AI/Liquid-Democracy.md | 28 + 10_Wiki/Topics/AI/LlamaIndex.md | 28 + 10_Wiki/Topics/AI/Local-Brain-Management.md | 28 + 10_Wiki/Topics/AI/Low-Rank-Adaptation-LoRA.md | 28 + .../Topics/AI/Machine-Learning-Lifecycle.md | 29 + 10_Wiki/Topics/AI/Multi-Agent-Systems-MAS.md | 28 + 10_Wiki/Topics/AI/NLP-Attention-Mechanisms.md | 28 + .../Topics/AI/Natural-Language-Processing.md | 29 +- .../Topics/AI/Neural-Architecture-Search.md | 28 + 10_Wiki/Topics/AI/Neural-Darwinism.md | 28 + .../AI/Neural-Networks (์‹ ๊ฒฝ๋ง ๊ธฐ์ดˆ).md | 29 + 10_Wiki/Topics/AI/Objective-Functions.md | 28 + 10_Wiki/Topics/AI/Ontological-Engineering.md | 28 + 10_Wiki/Topics/AI/Parallel-Computing.md | 36 +- .../Parameter-Efficient Fine-Tuning (PEFT).md | 29 + 10_Wiki/Topics/AI/Pattern-Recognition.md | 28 + 10_Wiki/Topics/AI/Perceptual-Learning.md | 28 + ...hysics-Informed Neural Networks (PINNs).md | 28 + 10_Wiki/Topics/AI/Policy-Gradient-Methods.md | 28 + 10_Wiki/Topics/AI/Predictive-Coding.md | 28 + .../Topics/AI/Principle-of-Least-Action.md | 28 + .../AI/Probabilistic-Graphical-Models.md | 28 + 10_Wiki/Topics/AI/Progressive-Disclosure.md | 28 + 10_Wiki/Topics/AI/Prompt-Engineering.md | 36 +- 10_Wiki/Topics/AI/Psychology-of-Learning.md | 28 + 10_Wiki/Topics/AI/Q-Learning Foundations.md | 28 + 10_Wiki/Topics/AI/Quantum-Computing-for-AI.md | 28 + .../Topics/AI/Regularization-Techniques.md | 28 + ...ement-Learning-from-Human-Feedback-RLHF.md | 28 + 10_Wiki/Topics/AI/Representation-Learning.md | 34 +- .../AI/Retrieval-Augmented-Generation-RAG.md | 28 + 10_Wiki/Topics/AI/Root-Cause-Analysis-RCA.md | 28 + 10_Wiki/Topics/AI/Semantic-Search.md | 35 +- 10_Wiki/Topics/AI/Sensor-Fusion.md | 28 + .../Topics/AI/Sequence-to-Sequence-Models.md | 28 + 10_Wiki/Topics/AI/Simulated-Annealing.md | 39 +- .../AI/Software-Architecture-Patterns.md | 29 + .../Topics/AI/Spiking-Neural-Networks-SNNs.md | 28 + .../Topics/AI/Statistical-Learning-Theory.md | 28 + .../AI/Stochastic-Gradient-Descent-SGD.md | 28 + 10_Wiki/Topics/AI/Strategic-Thinking.md | 28 + .../Supervised-Learning (์ง€๋„ ํ•™์Šต ๊ธฐ์ดˆ).md | 28 + .../Topics/AI/Symbolic-AI vs Connectionism.md | 28 + .../Topics/AI/System-Design for AI Scale.md | 28 + .../Topics/AI/Temporal-Difference-Learning.md | 28 + .../Topics/AI/Theory-of-Mind (ToM) in AI.md | 29 + 10_Wiki/Topics/AI/Time-Step-Logic-in-Games.md | 28 + 10_Wiki/Topics/AI/Tokenization-Strategies.md | 28 + .../AI/Transfer-Learning (์ „์ด ํ•™์Šต ๊ธฐ์ดˆ).md | 28 + 10_Wiki/Topics/AI/Transformer-Architecture.md | 28 + 10_Wiki/Topics/AI/Trustworthy-AI.md | 31 + .../Topics/AI/Turing-Machine Foundations.md | 29 + .../Topics/AI/Uncertainty-Quantification.md | 30 + .../AI/Universal-Approximation-Theorem.md | 27 + ...nsupervised-Learning (๋น„์ง€๋„ ํ•™์Šต ๊ธฐ์ดˆ).md | 29 + .../Topics/AI/Variational-Autoencoders-VAE.md | 28 + .../Topics/AI/Vector-Database Selection.md | 32 + .../Topics/AI/Visual-Effects-VFX-in-Games.md | 28 + .../Topics/AI/Voice-Assistant-Architecture.md | 29 + 10_Wiki/Topics/AI/Web3-and-AI-Integration.md | 28 + 10_Wiki/Topics/AI/Zero-Shot-Learning.md | 28 + ...ถ„๋ฆฌ_ - ๊ด€์‹ฌ์‚ฌ์˜ ๋ถ„๋ฆฌ (Separation of Concerns).md | 52 +- ...ฉ”์ธ ์ฃผ๋„ ์„ค๊ณ„ (Domain-Driven Design DDD).md | 40 - .../Domain-Driven Design (DDD).md | 19 - .../Domain-Driven Design (DDD).md | 43 +- 265 files changed, 8026 insertions(+), 1113 deletions(-) create mode 100644 00_Raw/2026-04-26-Skybound_Combat_Safe_Micro_HUD_Pass.md create mode 100644 00_Raw/2026-04-26-Skybound_Desktop_Side_Dock_HUD.md create mode 100644 00_Raw/2026-04-26-Skybound_Global_HUD_Result_UI_Tone_Unification.md create mode 100644 00_Raw/2026-04-26-Skybound_Hangar_Upgrade_Scroll_and_Campaign_Footer_Stabilization.md create mode 100644 00_Raw/2026-04-26-Skybound_LevelUp_Modal_Text_Fit_and_Card_Layout_Fix.md create mode 100644 00_Raw/2026-04-26-Skybound_Stage1_Enemy_Reduction_and_UI_Readability_Pass.md create mode 100644 00_Raw/App Router.md create mode 100644 00_Raw/Atomic Styling.md create mode 100644 00_Raw/Base Web.md create mode 100644 00_Raw/CLS (Cumulative Layout Shift).md create mode 100644 00_Raw/Client-Side Rendering (CSR).md create mode 100644 00_Raw/Core Web Vitals.md create mode 100644 00_Raw/Design-to-Code Workflow.md create mode 100644 00_Raw/E-commerce ๋žœ๋”ฉ ํŽ˜์ด์ง€ ์ „ํ™˜์œจ ๊ฐœ์„  ๋ฐ ์ดํƒˆ๋ฅ  ๊ฐ์†Œ(CRO).md create mode 100644 00_Raw/Explicit Contracts.md create mode 100644 00_Raw/Google Page Experience 2025.md create mode 100644 00_Raw/Hydration Mismatch.md create mode 100644 00_Raw/INP (Interaction to Next Paint).md create mode 100644 00_Raw/Incremental Static Regeneration (ISR).md create mode 100644 00_Raw/Kiwi.com Migration.md create mode 100644 00_Raw/LCP (Largest Contentful Paint).md create mode 100644 00_Raw/Modern Frontend Engineering Architecture.md create mode 100644 00_Raw/Modular Monolith.md create mode 100644 00_Raw/Monorepo.md create mode 100644 00_Raw/Next.js App Router ํ™˜๊ฒฝ์—์„œ์˜ ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ํ”„๋ก ํŠธ์—”๋“œ ์Šคํƒ€์ผ๋ง ๋ฐ UI ์ปดํฌ๋„ŒํŠธ ์•„ํ‚คํ…์ฒ˜ ์„ค๊ณ„.md create mode 100644 00_Raw/React Router.md create mode 100644 00_Raw/React SEO Guide.md create mode 100644 00_Raw/Reusable UI Components.md create mode 100644 00_Raw/SEO.md create mode 100644 00_Raw/SPA(Single Page Application) ๊ฒ€์ƒ‰์—”์ง„ ๋…ธ์ถœ ๋ฐ ์ƒ‰์ธํ™” ํ”„๋กœ์ ํŠธ.md create mode 100644 00_Raw/Scalable Frontend Architecture.md create mode 100644 00_Raw/Scalable UI Systems.md create mode 100644 00_Raw/Search Engine Optimization (SEO).md create mode 100644 00_Raw/Server-Side Rendering (SSR).md create mode 100644 00_Raw/Tailwind CSS v4 ๋„์ž….md create mode 100644 00_Raw/Tailwind CSS vs Styled Components.md create mode 100644 00_Raw/Transient Props.md create mode 100644 00_Raw/Turborepo ๋ฐ Nx ๋นŒ๋“œ ์‹œ์Šคํ…œ.md create mode 100644 00_Raw/Uber Base Web React Component Library.md create mode 100644 00_Raw/Uber.md create mode 100644 00_Raw/Uber์˜ Base Web ๋“ฑ ๋‹ค์–‘ํ•œ ๋‚ด๋ถ€ ์•ฑ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•œ ๋””์ž์ธ ์‹œ์Šคํ…œ ๋„์ž….md create mode 100644 00_Raw/Web Content Accessibility Guidelines (WCAG).md create mode 100644 00_Raw/Web Performance Optimization.md create mode 100644 00_Raw/Zero-runtime CSS.md create mode 100644 00_Raw/kiwi.com ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ํ”„๋กœ์ ํŠธ.md create mode 100644 00_Raw/๋…๋ฆฝ์ ์ธ ๊ธฐ๋Šฅ ์†Œ์œ ๊ถŒ์ด ํ•„์š”ํ•œ ๋Œ€๊ทœ๋ชจ React ํ”Œ๋žซํผ.md create mode 100644 00_Raw/๋ ˆ๊ฑฐ์‹œ ์›น์‚ฌ์ดํŠธ์˜ ํ”„๋ก ํŠธ์—”๋“œ ์„ฑ๋Šฅ(LCP, INP, CLS) ๊ณ ๋„ํ™”.md create mode 100644 00_Raw/๋งˆ์ดํฌ๋กœ ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ๋Œ€์ฒดํ•˜๋Š” ๋ชจ๋“ˆ์‹ ๋ชจ๋†€๋ฆฌ์Šค ์•„ํ‚คํ…์ฒ˜ ์„ค๊ณ„.md create mode 100644 00_Raw/์ ‘๊ทผ์„ฑ ๋ฒ•์  ์ค€์ˆ˜๋ฅผ ์œ„ํ•œ WCAG 2.2 ์ ์šฉ.md create mode 100644 00_Raw/ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ํ”„๋ŸฐํŠธ์—”๋“œ๋ฅผ ์œ„ํ•œ ์˜์กด์„ฑ ๋ฐ ํŒจํ‚ค์ง€ ๊ตฌ์กฐํ™”.md create mode 100644 10_Wiki/Placeholder_Tracking_List.md create mode 100644 10_Wiki/Topics/AI/ABA.md create mode 100644 10_Wiki/Topics/AI/AGI.md create mode 100644 10_Wiki/Topics/AI/AI Agents.md create mode 100644 10_Wiki/Topics/AI/AI-Alignment.md create mode 100644 10_Wiki/Topics/AI/API-Design for AI Services.md create mode 100644 10_Wiki/Topics/AI/Algorithm-Complexity-Big-O.md create mode 100644 10_Wiki/Topics/AI/Anthropic-Principle.md create mode 100644 10_Wiki/Topics/AI/Artificial-Life.md create mode 100644 10_Wiki/Topics/AI/Attention is All You Need.md create mode 100644 10_Wiki/Topics/AI/Auto-GPT and Autonomous Agents.md create mode 100644 10_Wiki/Topics/AI/Backpropagation Through Time.md create mode 100644 10_Wiki/Topics/AI/Bayesian-Brain-Hypothesis.md create mode 100644 10_Wiki/Topics/AI/Black-Box-Optimization.md create mode 100644 10_Wiki/Topics/AI/Bloom-Filters in Search.md create mode 100644 10_Wiki/Topics/AI/Boltzmann-Machines.md create mode 100644 10_Wiki/Topics/AI/Brain-Computer Interface (BCI).md create mode 100644 10_Wiki/Topics/AI/CAP-Theorem.md create mode 100644 10_Wiki/Topics/AI/CLIP.md create mode 100644 10_Wiki/Topics/AI/Catastrophic-Forgetting.md create mode 100644 10_Wiki/Topics/AI/Causal-Inference.md create mode 100644 10_Wiki/Topics/AI/Chaos-Theory in Systems.md delete mode 100644 10_Wiki/Topics/AI/Chrome DevTools ๋ฉ”๋ชจ๋ฆฌ ๋ถ„์„ ๋ฐ ์„ฑ๋Šฅ ์ตœ์ ํ™”.md delete mode 100644 10_Wiki/Topics/AI/Circuit Discovery (ศธ ฿ฐ).md create mode 100644 10_Wiki/Topics/AI/Circuit Discovery.md create mode 100644 10_Wiki/Topics/AI/Cognitive-Architecture.md create mode 100644 10_Wiki/Topics/AI/Collaborative-Filtering.md create mode 100644 10_Wiki/Topics/AI/Computational-Linguistics.md create mode 100644 10_Wiki/Topics/AI/Computer-Vision.md create mode 100644 10_Wiki/Topics/AI/Concept-Drift.md create mode 100644 10_Wiki/Topics/AI/Concreteness-Principle.md create mode 100644 10_Wiki/Topics/AI/Constitutional-AI.md create mode 100644 10_Wiki/Topics/AI/Constraint-Satisfaction Problems.md create mode 100644 10_Wiki/Topics/AI/Context-Aware-Computing.md create mode 100644 10_Wiki/Topics/AI/Contrastive-Learning.md create mode 100644 10_Wiki/Topics/AI/Convolutional-Neural-Networks.md create mode 100644 10_Wiki/Topics/AI/Cost-Benefit Analysis in AI.md create mode 100644 10_Wiki/Topics/AI/Cross-Entropy Loss.md create mode 100644 10_Wiki/Topics/AI/Curriculum-Learning.md create mode 100644 10_Wiki/Topics/AI/Cybernetics Foundations.md create mode 100644 10_Wiki/Topics/AI/Data-Augmentation Strategies.md create mode 100644 10_Wiki/Topics/AI/Data-Ethics and Privacy.md create mode 100644 10_Wiki/Topics/AI/Data-Flywheel-Effect.md create mode 100644 10_Wiki/Topics/AI/Data-Pipeline Orchestration.md create mode 100644 10_Wiki/Topics/AI/Decision-Trees and Random Forests.md create mode 100644 10_Wiki/Topics/AI/Deep-Learning.md create mode 100644 10_Wiki/Topics/AI/Deep-Q-Networks-DQN.md create mode 100644 10_Wiki/Topics/AI/Deepfake-Technology.md create mode 100644 10_Wiki/Topics/AI/Determinism-in-Computing.md create mode 100644 10_Wiki/Topics/AI/DevOps-for-AI-MLOps.md create mode 100644 10_Wiki/Topics/AI/Dimensionality-Reduction.md create mode 100644 10_Wiki/Topics/AI/Distributed-Computing.md delete mode 100644 10_Wiki/Topics/AI/Domain-Driven Design (DDD) Type Safety.md delete mode 100644 10_Wiki/Topics/AI/Domain-Driven Design (DDD) in TypeScript.md delete mode 100644 10_Wiki/Topics/AI/Domain-Driven-Design (DDD) in TypeScript.md delete mode 100644 10_Wiki/Topics/AI/Domain-Driven-Design (DDD).md delete mode 100644 10_Wiki/Topics/AI/Domain-Driven-Design-(DDD)-in-TypeScript.md delete mode 100644 10_Wiki/Topics/AI/Domain-Driven-Design-(DDD).md delete mode 100644 10_Wiki/Topics/AI/Domain-Driven-Design-Bounded-Context.md create mode 100644 10_Wiki/Topics/AI/Domain-Driven-Design-DDD.md delete mode 100644 10_Wiki/Topics/AI/Domain-Driven-Design-Interface-Modeling.md delete mode 100644 10_Wiki/Topics/AI/Domain-Driven-Design-in-TypeScript.md delete mode 100644 10_Wiki/Topics/AI/Domain-Driven-Design-with-TypeScript.md delete mode 100644 10_Wiki/Topics/AI/Domain-Driven-Design.md create mode 100644 10_Wiki/Topics/AI/Edge-AI-and-Computing.md create mode 100644 10_Wiki/Topics/AI/Eigenvalues-and-Eigenvectors.md create mode 100644 10_Wiki/Topics/AI/Eligibility-Traces.md create mode 100644 10_Wiki/Topics/AI/Embodied-AI.md create mode 100644 10_Wiki/Topics/AI/Emergence-in-Systems.md create mode 100644 10_Wiki/Topics/AI/Emotional-AI (Affective Computing).md create mode 100644 10_Wiki/Topics/AI/End-to-End-Learning.md create mode 100644 10_Wiki/Topics/AI/Ensemble-Methods.md create mode 100644 10_Wiki/Topics/AI/Entropy in Information Theory.md create mode 100644 10_Wiki/Topics/AI/Environment-Design-in-RL.md create mode 100644 10_Wiki/Topics/AI/Epistemic-Uncertainty.md create mode 100644 10_Wiki/Topics/AI/Ethics of Autonomous Systems.md create mode 100644 10_Wiki/Topics/AI/Experience-Replay.md create mode 100644 10_Wiki/Topics/AI/Explainable-AI-XAI.md create mode 100644 10_Wiki/Topics/AI/Exploding-Gradient Problem.md create mode 100644 10_Wiki/Topics/AI/Exploration-vs-Exploitation.md create mode 100644 10_Wiki/Topics/AI/Exploratory-Data-Analysis.md create mode 100644 10_Wiki/Topics/AI/Extended-Reality-XR.md create mode 100644 10_Wiki/Topics/AI/Extreme-Programming-XP.md create mode 100644 10_Wiki/Topics/AI/Factor-Analysis.md create mode 100644 10_Wiki/Topics/AI/Feedback-Loops in Systems.md create mode 100644 10_Wiki/Topics/AI/Finite-State-Machines-FSM.md create mode 100644 10_Wiki/Topics/AI/Fitness-Landscape.md create mode 100644 10_Wiki/Topics/AI/Fluid-Dynamics for Games.md create mode 100644 10_Wiki/Topics/AI/Focal-Loss.md create mode 100644 10_Wiki/Topics/AI/G-Stack Principles.md create mode 100644 10_Wiki/Topics/AI/Game Analytics (๊ฒŒ์ž„ ๋ถ„์„).md create mode 100644 10_Wiki/Topics/AI/Game-Balance-Design.md create mode 100644 10_Wiki/Topics/AI/Game-Economy-Design.md create mode 100644 10_Wiki/Topics/AI/Game-Mechanics.md create mode 100644 10_Wiki/Topics/AI/Gamification-Strategies.md create mode 100644 10_Wiki/Topics/AI/Gaussian-Processes.md create mode 100644 10_Wiki/Topics/AI/Generative-AI.md create mode 100644 10_Wiki/Topics/AI/GitHub-Actions-CI-CD.md create mode 100644 10_Wiki/Topics/AI/GloVe (Word Embeddings).md create mode 100644 10_Wiki/Topics/AI/Goal-Oriented-Action-Planning.md create mode 100644 10_Wiki/Topics/AI/Graph-Database.md create mode 100644 10_Wiki/Topics/AI/Habit-Formation.md create mode 100644 10_Wiki/Topics/AI/Hallucination-in-LLM.md create mode 100644 10_Wiki/Topics/AI/Hebbian-Learning.md create mode 100644 10_Wiki/Topics/AI/Hierarchical-Task-Network (HTN).md create mode 100644 10_Wiki/Topics/AI/Human-AI-Collaboration.md create mode 100644 10_Wiki/Topics/AI/Image-Segmentation.md create mode 100644 10_Wiki/Topics/AI/Information-Theory.md create mode 100644 10_Wiki/Topics/AI/Infrastructure-as-Code-IaC.md create mode 100644 10_Wiki/Topics/AI/Integrated-Development-Environment.md create mode 100644 10_Wiki/Topics/AI/Interpretability.md create mode 100644 10_Wiki/Topics/AI/Knowledge-Graph.md create mode 100644 10_Wiki/Topics/AI/LSTM (Long Short-Term Memory).md create mode 100644 10_Wiki/Topics/AI/Layer-Normalization.md create mode 100644 10_Wiki/Topics/AI/Learning-Rate-Scheduling.md create mode 100644 10_Wiki/Topics/AI/Linear-Algebra-for-ML.md create mode 100644 10_Wiki/Topics/AI/Liquid-Democracy.md create mode 100644 10_Wiki/Topics/AI/LlamaIndex.md create mode 100644 10_Wiki/Topics/AI/Local-Brain-Management.md create mode 100644 10_Wiki/Topics/AI/Low-Rank-Adaptation-LoRA.md create mode 100644 10_Wiki/Topics/AI/Machine-Learning-Lifecycle.md create mode 100644 10_Wiki/Topics/AI/Multi-Agent-Systems-MAS.md create mode 100644 10_Wiki/Topics/AI/NLP-Attention-Mechanisms.md create mode 100644 10_Wiki/Topics/AI/Neural-Architecture-Search.md create mode 100644 10_Wiki/Topics/AI/Neural-Darwinism.md create mode 100644 10_Wiki/Topics/AI/Neural-Networks (์‹ ๊ฒฝ๋ง ๊ธฐ์ดˆ).md create mode 100644 10_Wiki/Topics/AI/Objective-Functions.md create mode 100644 10_Wiki/Topics/AI/Ontological-Engineering.md create mode 100644 10_Wiki/Topics/AI/Parameter-Efficient Fine-Tuning (PEFT).md create mode 100644 10_Wiki/Topics/AI/Pattern-Recognition.md create mode 100644 10_Wiki/Topics/AI/Perceptual-Learning.md create mode 100644 10_Wiki/Topics/AI/Physics-Informed Neural Networks (PINNs).md create mode 100644 10_Wiki/Topics/AI/Policy-Gradient-Methods.md create mode 100644 10_Wiki/Topics/AI/Predictive-Coding.md create mode 100644 10_Wiki/Topics/AI/Principle-of-Least-Action.md create mode 100644 10_Wiki/Topics/AI/Probabilistic-Graphical-Models.md create mode 100644 10_Wiki/Topics/AI/Progressive-Disclosure.md create mode 100644 10_Wiki/Topics/AI/Psychology-of-Learning.md create mode 100644 10_Wiki/Topics/AI/Q-Learning Foundations.md create mode 100644 10_Wiki/Topics/AI/Quantum-Computing-for-AI.md create mode 100644 10_Wiki/Topics/AI/Regularization-Techniques.md create mode 100644 10_Wiki/Topics/AI/Reinforcement-Learning-from-Human-Feedback-RLHF.md create mode 100644 10_Wiki/Topics/AI/Retrieval-Augmented-Generation-RAG.md create mode 100644 10_Wiki/Topics/AI/Root-Cause-Analysis-RCA.md create mode 100644 10_Wiki/Topics/AI/Sensor-Fusion.md create mode 100644 10_Wiki/Topics/AI/Sequence-to-Sequence-Models.md create mode 100644 10_Wiki/Topics/AI/Software-Architecture-Patterns.md create mode 100644 10_Wiki/Topics/AI/Spiking-Neural-Networks-SNNs.md create mode 100644 10_Wiki/Topics/AI/Statistical-Learning-Theory.md create mode 100644 10_Wiki/Topics/AI/Stochastic-Gradient-Descent-SGD.md create mode 100644 10_Wiki/Topics/AI/Strategic-Thinking.md create mode 100644 10_Wiki/Topics/AI/Supervised-Learning (์ง€๋„ ํ•™์Šต ๊ธฐ์ดˆ).md create mode 100644 10_Wiki/Topics/AI/Symbolic-AI vs Connectionism.md create mode 100644 10_Wiki/Topics/AI/System-Design for AI Scale.md create mode 100644 10_Wiki/Topics/AI/Temporal-Difference-Learning.md create mode 100644 10_Wiki/Topics/AI/Theory-of-Mind (ToM) in AI.md create mode 100644 10_Wiki/Topics/AI/Time-Step-Logic-in-Games.md create mode 100644 10_Wiki/Topics/AI/Tokenization-Strategies.md create mode 100644 10_Wiki/Topics/AI/Transfer-Learning (์ „์ด ํ•™์Šต ๊ธฐ์ดˆ).md create mode 100644 10_Wiki/Topics/AI/Transformer-Architecture.md create mode 100644 10_Wiki/Topics/AI/Trustworthy-AI.md create mode 100644 10_Wiki/Topics/AI/Turing-Machine Foundations.md create mode 100644 10_Wiki/Topics/AI/Uncertainty-Quantification.md create mode 100644 10_Wiki/Topics/AI/Universal-Approximation-Theorem.md create mode 100644 10_Wiki/Topics/AI/Unsupervised-Learning (๋น„์ง€๋„ ํ•™์Šต ๊ธฐ์ดˆ).md create mode 100644 10_Wiki/Topics/AI/Variational-Autoencoders-VAE.md create mode 100644 10_Wiki/Topics/AI/Vector-Database Selection.md create mode 100644 10_Wiki/Topics/AI/Visual-Effects-VFX-in-Games.md create mode 100644 10_Wiki/Topics/AI/Voice-Assistant-Architecture.md create mode 100644 10_Wiki/Topics/AI/Web3-and-AI-Integration.md create mode 100644 10_Wiki/Topics/AI/Zero-Shot-Learning.md delete mode 100644 10_Wiki/Topics/AI/๋„๋ฉ”์ธ ์ฃผ๋„ ์„ค๊ณ„ (Domain-Driven Design DDD).md delete mode 100644 10_Wiki/Topics/Frontend_Mastery/Domain-Driven Design (DDD).md diff --git a/00_Raw/2026-04-26-Skybound_Combat_Safe_Micro_HUD_Pass.md b/00_Raw/2026-04-26-Skybound_Combat_Safe_Micro_HUD_Pass.md new file mode 100644 index 00000000..1ae82346 --- /dev/null +++ b/00_Raw/2026-04-26-Skybound_Combat_Safe_Micro_HUD_Pass.md @@ -0,0 +1,79 @@ +# Skybound Combat Safe Micro HUD Pass + +์ž‘์„ฑ์ผ: 2026-04-26 14:55 KST + +## ์š”์ฒญ ์š”์•ฝ + +- ๊ฒŒ์ž„ ํ™”๋ฉด ์œ„์— ์ •๋ณด UI๊ฐ€ ํฌ๊ฒŒ ๋–  ์žˆ์–ด ์ „ํˆฌ ํ™”๋ฉด์„ ๊ฐ€๋ฆฐ๋‹ค. +- ํ˜„์žฌ HUD ํฌ๊ธฐ์™€ ์ •๋ ฌ์ด ์ •๋ฆฌ์ •๋ˆ๋˜์–ด ๋ณด์ด์ง€ ์•Š๋Š”๋‹ค. +- ์ƒ์กด ์Šˆํ„ฐ ํ”Œ๋ ˆ์ด์—์„œ UI๊ฐ€ ์ „ํˆฌ ๊ณต๊ฐ„์„ ์นจ๋ฒ”ํ•˜๋Š” ๊ฒƒ์ด ๋งž๋Š”์ง€ ์žฌ๊ฒ€ํ† ๊ฐ€ ํ•„์š”ํ•˜๋‹ค. + +## ํ•ต์‹ฌ ๋ฌธ์ œ + +๊ธฐ์กด HUD๋Š” ์ •๋ณด๋ฅผ ๋งŽ์ด ๋ณด์—ฌ์ฃผ๋ ค๋Š” ๋ฐฉํ–ฅ์œผ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์—ˆ๋‹ค. + +ํ•˜์ง€๋งŒ Skybound๋Š” ์„ธ๋กœํ˜• ํƒ‘๋‹ค์šด ์ƒ์กด ์Šˆํ„ฐ์ด๊ธฐ ๋•Œ๋ฌธ์—, ์‹ค์ œ ํ”Œ๋ ˆ์ด ์ค‘์—๋Š” ์ „ํˆฌ ๊ณต๊ฐ„๊ณผ ํƒ„ ํšŒํ”ผ ์‹œ์•ผ๊ฐ€ ๊ฐ€์žฅ ์ค‘์š”ํ•˜๋‹ค. + +๊ธฐ์กด HUD ๋ฌธ์ œ: + +- HUD๊ฐ€ 2์ค„ ๊ตฌ์กฐ๋กœ ์ƒ๋‹จ ์ „ํˆฌ ๊ณต๊ฐ„์„ ํฌ๊ฒŒ ๋ฎ์—ˆ๋‹ค. +- `Best Run`์ฒ˜๋Ÿผ ์ „ํˆฌ ์ค‘ ์ฆ‰์‹œ ํŒ๋‹จ์— ํ•„์š”ํ•˜์ง€ ์•Š์€ ์ •๋ณด๋„ ์ƒ์‹œ ๋…ธ์ถœ๋˜์—ˆ๋‹ค. +- ๋ฒ„ํŠผ๊ณผ ์ƒํƒœ ์นด๋“œ๊ฐ€ ์ปค์„œ ๊ฒŒ์ž„ ํ™”๋ฉด๋ณด๋‹ค UI๊ฐ€ ๋จผ์ € ๋ณด์˜€๋‹ค. +- ์ •๋ณด ์šฐ์„ ์ˆœ์œ„๊ฐ€ `์ƒ์กด ํŒ๋‹จ`๋ณด๋‹ค `์ƒํƒœํŒ ๋…ธ์ถœ`์— ๊ฐ€๊นŒ์› ๋‹ค. + +## ์ ์šฉํ•œ ๋ณ€๊ฒฝ + +### ํ•œ ์ค„ Micro HUD๋กœ ์ถ•์†Œ + +ํ”Œ๋ ˆ์ด HUD๋ฅผ ํ•œ ์ค„์งœ๋ฆฌ ๋ฏธ๋‹ˆ ์ƒํƒœ๋ฐ”๋กœ ์ค„์˜€๋‹ค. + +๋‚จ๊ธด ์ •๋ณด: + +- Stage / Phase +- Tactical Level / EXP +- Hull Core +- Bombs +- Lock-On +- Fullscreen / Settings / Pause + +์ˆจ๊ธด ์ •๋ณด: + +- Best Run + +์˜๋„: + +- ์ „ํˆฌ ์ค‘ ๋ฐ”๋กœ ํ•„์š”ํ•œ ์ •๋ณด๋งŒ ๋‚จ๊ธด๋‹ค. +- ์ ์ˆ˜/๊ธฐ๋ก ์ •๋ณด๋Š” ๊ฒฐ๊ณผ ํ™”๋ฉด์ด๋‚˜ ๋ณ„๋„ ํ™”๋ฉด์—์„œ ํ™•์ธํ•˜๋Š” ๊ฒƒ์ด ๋” ์ž์—ฐ์Šค๋Ÿฝ๋‹ค. +- ์ƒ๋‹จ UI๊ฐ€ ๋ณด์Šค, ์ ๊ธฐ, ํƒ„๋ง‰, ์•„์ดํ…œ์„ ๊ฐ€๋ฆฌ์ง€ ์•Š๊ฒŒ ํ•œ๋‹ค. + +### ์นด๋“œ ํฌ๊ธฐ์™€ ์‹œ๊ฐ ๋ฌด๊ฒŒ ๊ฐ์†Œ + +HUD ์นด๋“œ์˜ ๋†’์ด, padding, border, button size๋ฅผ ๋ชจ๋‘ ์ค„์˜€๋‹ค. + +๋ณ€๊ฒฝ: + +- HUD ๋†’์ด ์•ฝ 38px ๊ธฐ์ค€์œผ๋กœ ์ถ•์†Œ +- ๋ฒ„ํŠผ ํฌ๊ธฐ ์ถ•์†Œ +- ์นด๋“œ ๊ทธ๋ฆผ์ž์™€ ์™ธ๊ณฝ์„  ๋‘๊ป˜ ์™„ํ™” +- Reticle ์žฅ์‹ ํˆฌ๋ช…๋„ ๊ฐ์†Œ + +์˜๋„: + +- ํ†ค์•ค๋งค๋„ˆ๋Š” ์œ ์ง€ํ•˜๋˜, ์ „ํˆฌ ํ™”๋ฉด์˜ ์ฃผ์ธ๊ณต์€ UI๊ฐ€ ์•„๋‹ˆ๋ผ ๊ธฐ์ฒด/์ /ํƒ„๋ง‰์ด ๋˜๊ฒŒ ํ•œ๋‹ค. +- ์‚ฌ์šฉ์ž๋Š” HUD๋ฅผ โ€œ๋ณผ ์ˆ˜๋Š” ์žˆ์ง€๋งŒ ์˜์‹ํ•˜์ง€ ์•Š์•„๋„ ๋˜๋Š”โ€ ์ˆ˜์ค€์œผ๋กœ ์ธ์ง€ํ•˜๊ฒŒ ํ•œ๋‹ค. + +## ์ˆ˜์ • ํŒŒ์ผ + +- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/ui/HUDOverlay.css` + +## ๊ฒ€์ฆ + +- `npm run build` ์„ฑ๊ณต +- ์ถœ๋ ฅ ๋””๋ ‰ํ„ฐ๋ฆฌ: `dist/33` + +## ํ›„์† ํ”Œ๋ ˆ์ดํ…Œ์ŠคํŠธ ์ฒดํฌ ํฌ์ธํŠธ + +- ์ƒ๋‹จ HUD๊ฐ€ ์ „ํˆฌ ํŒ๋‹จ์„ ๋ฐฉํ•ดํ•˜์ง€ ์•Š๋Š”์ง€ ํ™•์ธํ•œ๋‹ค. +- HP, Level, Bomb, Lock-On์ด ์ž‘์•„์กŒ์–ด๋„ ์ฝํžˆ๋Š”์ง€ ํ™•์ธํ•œ๋‹ค. +- `Best Run`์„ ์ˆจ๊ฒจ๋„ ํ”Œ๋ ˆ์ด ์ค‘ ์ •๋ณด ๋ถ€์กฑ์ด ๋Š๊ปด์ง€์ง€ ์•Š๋Š”์ง€ ํ™•์ธํ•œ๋‹ค. +- ๋ธŒ๋ผ์šฐ์ € ์ฐฝ๊ณผ ์ „์ฒดํ™”๋ฉด ์–‘์ชฝ์—์„œ HUD๊ฐ€ ๋„ˆ๋ฌด ์ž‘๊ฑฐ๋‚˜ ๊ฒน์น˜์ง€ ์•Š๋Š”์ง€ ํ™•์ธํ•œ๋‹ค. diff --git a/00_Raw/2026-04-26-Skybound_Desktop_Side_Dock_HUD.md b/00_Raw/2026-04-26-Skybound_Desktop_Side_Dock_HUD.md new file mode 100644 index 00000000..4ef2f8d1 --- /dev/null +++ b/00_Raw/2026-04-26-Skybound_Desktop_Side_Dock_HUD.md @@ -0,0 +1,66 @@ +# Skybound Desktop Side Dock HUD + +์ž‘์„ฑ์ผ: 2026-04-26 14:58 KST + +## ์š”์ฒญ ์š”์•ฝ + +- ํ”Œ๋ ˆ์ด ํ™”๋ฉด์—์„œ HUD๊ฐ€ ์ „ํˆฌ ํ•„๋“œ๋ฅผ ๊ฐ€๋ ค ๋ถˆํŽธํ•˜๋‹ค. +- ํ˜„์žฌ UI ๋ฐฐ์น˜๊ฐ€ ๊ฒŒ์ž„ ํ™”๋ฉด ์•ˆ์ชฝ์— ์žˆ์–ด ์„ธ๋กœ ์Šˆํ„ฐ ํ”Œ๋ ˆ์ด์™€ ๋งž์ง€ ์•Š์•„ ๋ณด์ธ๋‹ค. +- HUD๋ฅผ ์ •๋ฆฌํ•˜๋ฉด์„œ๋„ ์ „ํˆฌ ํ™”๋ฉด์„ ์นจ๋ฒ”ํ•˜์ง€ ์•Š๊ฒŒ ํ•ด์•ผ ํ•œ๋‹ค. + +## ํ•ต์‹ฌ ๋ฌธ์ œ + +์ด์ „ Micro HUD๋Š” ํฌ๊ธฐ๋ฅผ ์ค„์˜€์ง€๋งŒ ์—ฌ์ „ํžˆ ๊ฒŒ์ž„ ํ•„๋“œ ์•ˆ์ชฝ ์ƒ๋‹จ์— ๋ฐฐ์น˜๋˜์–ด ์žˆ์—ˆ๋‹ค. + +์„ธ๋กœํ˜• ํƒ‘๋‹ค์šด ์Šˆํ„ฐ์—์„œ๋Š” ์ƒ๋‹จ๋„ ์ ๊ธฐ, ํƒ„ํ™˜, ๋ณด์Šค, ์•„์ดํ…œ์ด ๋“ฑ์žฅํ•˜๋Š” ์‹ค์ œ ํ”Œ๋ ˆ์ด ๊ณต๊ฐ„์ด๋‹ค. + +๋”ฐ๋ผ์„œ HUD๊ฐ€ ์ž‘๋”๋ผ๋„ ํ•„๋“œ ์œ„์— ์˜ฌ๋ผ๊ฐ€ ์žˆ์œผ๋ฉด ๋‹ค์Œ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ธด๋‹ค. + +- ์ƒ๋‹จ์—์„œ ๋“ฑ์žฅํ•˜๋Š” ์ ๊ณผ ํƒ„ํ™˜์„ ๊ฐ€๋ฆฐ๋‹ค. +- ๋ณด์Šค๋‚˜ ์•„์ดํ…œ์ด HUD ๋’ค๋กœ ์ง€๋‚˜๊ฐˆ ๋•Œ ์ธ์ง€๊ฐ€ ๋Šฆ์–ด์ง„๋‹ค. +- ํ™”๋ฉด์˜ ์ฃผ์ธ๊ณต์ด ์ „ํˆฌ๊ฐ€ ์•„๋‹ˆ๋ผ UI์ฒ˜๋Ÿผ ๋ณด์ธ๋‹ค. + +## ์ ์šฉํ•œ ๋ณ€๊ฒฝ + +### Desktop Side Dock HUD + +๋ฐ์Šคํฌํ†ฑ ํ™”๋ฉด์—์„œ๋Š” HUD๋ฅผ ๊ฒŒ์ž„ ํ•„๋“œ ๋ฐ”๊นฅ ์˜ค๋ฅธ์ชฝ ๋ธ”๋ž™ ์—ฌ๋ฐฑ์œผ๋กœ ์ด๋™ํ–ˆ๋‹ค. + +ํ‘œ์‹œ ๊ตฌ์กฐ: + +- Stage / Phase +- Hull Core +- Tactical Level / EXP +- Bombs / Lock-On +- Fullscreen / Settings / Pause + +์˜๋„: + +- ํ”Œ๋ ˆ์ด ํ•„๋“œ๋ฅผ ์ตœ๋Œ€ํ•œ ๊นจ๋—ํ•˜๊ฒŒ ์œ ์ง€ํ•œ๋‹ค. +- ์ „ํˆฌ ํŒ๋‹จ์— ํ•„์š”ํ•œ ์ •๋ณด๋Š” ์œ ์ง€ํ•˜๋˜, ์‹ค์ œ ์ „ํˆฌ ๊ณต๊ฐ„ ์œ„์— ์˜ฌ๋ฆฌ์ง€ ์•Š๋Š”๋‹ค. +- ๋ฐ์Šคํฌํ†ฑ์˜ ๋„“์€ ๊ฒ€์€ ์—ฌ๋ฐฑ์„ UI ๋„ํฌ๋กœ ํ™œ์šฉํ•œ๋‹ค. + +### ์ข์€ ํ™”๋ฉด ๋Œ€์‘ + +ํ™”๋ฉด ํญ์ด ์ข์„ ๋•Œ๋Š” ์˜ค๋ฅธ์ชฝ ์—ฌ๋ฐฑ์ด ๋ถ€์กฑํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ๊ธฐ์กด Micro HUD ํ˜•ํƒœ๋ฅผ ์œ ์ง€ํ•œ๋‹ค. + +์˜๋„: + +- ๋ฐ์Šคํฌํ†ฑ์—์„œ๋Š” ์ „ํˆฌ ํ•„๋“œ๋ฅผ ์นจ๋ฒ”ํ•˜์ง€ ์•Š๋Š”๋‹ค. +- ์ข์€ ํ™”๋ฉด์—์„œ๋Š” HUD๊ฐ€ ํ™”๋ฉด ๋ฐ–์œผ๋กœ ์ž˜๋ฆฌ์ง€ ์•Š๋„๋ก ํ•œ๋‹ค. + +## ์ˆ˜์ • ํŒŒ์ผ + +- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/ui/HUDOverlay.css` + +## ๊ฒ€์ฆ + +- `npm run build` ์„ฑ๊ณต +- ์ถœ๋ ฅ ๋””๋ ‰ํ„ฐ๋ฆฌ: `dist/34` + +## ํ›„์† ํ”Œ๋ ˆ์ดํ…Œ์ŠคํŠธ ์ฒดํฌ ํฌ์ธํŠธ + +- ๋ฐ์Šคํฌํ†ฑ์—์„œ HUD๊ฐ€ ๊ฒŒ์ž„ ํ•„๋“œ ์˜ค๋ฅธ์ชฝ ๋ฐ”๊นฅ์œผ๋กœ ๋น ์ง€๋Š”์ง€ ํ™•์ธํ•œ๋‹ค. +- ์ƒ๋‹จ์—์„œ ๋“ฑ์žฅํ•˜๋Š” ์ ๊ธฐ์™€ ํƒ„ํ™˜์ด HUD์— ๊ฐ€๋ ค์ง€์ง€ ์•Š๋Š”์ง€ ํ™•์ธํ•œ๋‹ค. +- ์˜ค๋ฅธ์ชฝ ๋„ํฌ์˜ ๊ธ€์”จ๊ฐ€ ๋„ˆ๋ฌด ์ž‘๊ฑฐ๋‚˜ ๋ฉ€๊ฒŒ ๋Š๊ปด์ง€์ง€ ์•Š๋Š”์ง€ ํ™•์ธํ•œ๋‹ค. +- ๋ธŒ๋ผ์šฐ์ € ํญ์„ ์ค„์˜€์„ ๋•Œ HUD๊ฐ€ ํ™”๋ฉด ๋ฐ–์œผ๋กœ ์ž˜๋ฆฌ์ง€ ์•Š๋Š”์ง€ ํ™•์ธํ•œ๋‹ค. diff --git a/00_Raw/2026-04-26-Skybound_Global_HUD_Result_UI_Tone_Unification.md b/00_Raw/2026-04-26-Skybound_Global_HUD_Result_UI_Tone_Unification.md new file mode 100644 index 00000000..862a410d --- /dev/null +++ b/00_Raw/2026-04-26-Skybound_Global_HUD_Result_UI_Tone_Unification.md @@ -0,0 +1,102 @@ +# Skybound Global HUD Result UI Tone Unification + +์ž‘์„ฑ์ผ: 2026-04-26 14:48 KST + +## ์š”์ฒญ ์š”์•ฝ + +- ์ „์ฒด ๊ฒŒ์ž„ HUD/UI๊ฐ€ ์ •๋ฆฌ์ •๋ˆ๋œ ๋Š๋‚Œ์„ ์žƒ์—ˆ๋‹ค. +- ํ”Œ๋ ˆ์ด ์ค‘ HUD๊ฐ€ ํŒจ๋„ ๋‹จ์œ„๋กœ ํฉ์–ด์ ธ ๋ณด์ด๊ณ  ์‚ฌ์šฉ์ž ์นœํ™”์ ์ด์ง€ ์•Š๋‹ค. +- `MISSION_FAILED` ๊ฒฐ๊ณผ ํ™”๋ฉด์ด ์ด์ „ ์Šคํƒ€์ผ์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์–ด ํ˜„์žฌ `Stylized Casual Magitech` ํ†ค์•ค๋งค๋„ˆ์™€ ๋งž์ง€ ์•Š๋Š”๋‹ค. +- ๋ˆ„๋ฝ๋œ ๊ตฌํ˜• UI๊ฐ€ ์—†๋„๋ก ์ „์ฒด์ ์œผ๋กœ ์•ˆ์ •์ ์ด๊ณ  ๊น”๋”ํ•œ ๋ฐฉํ–ฅ์œผ๋กœ ๋งž์ถฐ์•ผ ํ•œ๋‹ค. + +## ํ•ต์‹ฌ ๋ฌธ์ œ + +์ด๋ฒˆ ๋ฌธ์ œ์˜ ํ•ต์‹ฌ์€ UI ์š”์†Œ ์ž์ฒด์˜ ์ƒ‰์ƒ๋ณด๋‹ค ์ •๋ณด ๊ตฌ์กฐ์˜€๋‹ค. + +๊ธฐ์กด ํ”Œ๋ ˆ์ด HUD๋Š” `Stage`, `Tactical Level`, `Hull Core`, `Bombs`, `Lock-On`, `Best Run`, ์„ค์ • ๋ฒ„ํŠผ์ด ๋ชจ๋‘ ๊ฐ™์€ ํ—ค๋” ๋ผ์ธ ์•ˆ์—์„œ ๋ฐ€์ง‘๋˜์–ด ์žˆ์—ˆ๋‹ค. + +๊ทธ ๊ฒฐ๊ณผ: + +- ๊ฐ ์ •๋ณด์˜ ์ค‘์š”๋„๊ฐ€ ์ž˜ ๊ตฌ๋ถ„๋˜์ง€ ์•Š์•˜๋‹ค. +- ํฐ ๋ฐ˜ํˆฌ๋ช… ๋ฐฐ๊ฒฝํŒ์ด ์ „ํˆฌ ํ™”๋ฉด ์œ„๋ฅผ ๋ฎ์–ด ์ •๋ˆ๊ฐ๋ณด๋‹ค ๋ถ€ํ”ผ๊ฐ์ด ์ปค์กŒ๋‹ค. +- ์ž‘์€ ํ™”๋ฉด๋น„๋‚˜ Campaign ํ”Œ๋ ˆ์ด ์ƒํ™ฉ์—์„œ ๋ชจ๋“ˆ ๊ฐ„ ๊ฐ„๊ฒฉ์ด ๋ถˆ์•ˆ์ •ํ•ด ๋ณด์˜€๋‹ค. + +Mission Failed ํ™”๋ฉด์€ ๋” ํฐ ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ๋‹ค. + +- `MISSION_FAILED`์ฒ˜๋Ÿผ ์‹œ์Šคํ…œ ๋ฌธ์ž์—ด์— ๊ฐ€๊นŒ์šด ํ‘œ๊ธฐ์˜€๋‹ค. +- ๊ฒฐ๊ณผ ์นด๋“œ๊ฐ€ ์–‡์€ ๊ธ€๋ž˜์Šค๋ชจํ”ผ์ฆ˜/์Šคํ‹ฐ์น˜ ์Šคํƒ€์ผ์— ๊ฐ€๊นŒ์›Œ, ํ˜„์žฌ์˜ ๋‘๊บผ์šด ์™ธ๊ณฝ์„ ๊ณผ ์„ ๋ช…ํ•œ ๋งˆ์ง€ํ…Œํฌ UI์™€ ๋งž์ง€ ์•Š์•˜๋‹ค. +- ์‹คํŒจ ์ƒํƒœ์—์„œ ์‚ฌ์šฉ์ž๊ฐ€ ๋‹ค์Œ์— ๋ฌด์—‡์„ ํ•˜๋ฉด ๋˜๋Š”์ง€ ์•ˆ๋‚ด๊ฐ€ ์•ฝํ–ˆ๋‹ค. + +## ์ ์šฉํ•œ ๋ณ€๊ฒฝ + +### Gameplay HUD ์ •๋ฆฌ + +HUD๋ฅผ ๋ช…ํ™•ํ•œ grid ์˜์—ญ์œผ๋กœ ์žฌ์ •๋ ฌํ–ˆ๋‹ค. + +๊ตฌ์กฐ: + +- ์ขŒ์ธก: Stage / Phase +- ์ค‘์•™ ์ƒ๋‹จ: Tactical Level / EXP +- ์šฐ์ธก ์ƒ๋‹จ: Hull Core +- ์ค‘์•™ ํ•˜๋‹จ: Bombs / Lock-On +- ์šฐ์ธก ํ•˜๋‹จ: Best Run +- ์ตœ์šฐ์ธก: Fullscreen / Settings / Pause + +๋ณ€๊ฒฝ ์˜๋„: + +- ํฐ ํ†ตํ•ฉ ๋ฐฐ๊ฒฝํŒ์„ ์ œ๊ฑฐํ•˜๊ณ , ์ •๋ณด๋ณ„ ์นด๋“œ๊ฐ€ ์ •ํ™•ํ•œ ์นธ์— ๊ณ ์ •๋˜๋„๋ก ํ–ˆ๋‹ค. +- ๊ฐ UI ๋ชจ๋“ˆ์˜ ํฌ๊ธฐ๋ฅผ ์ค„์—ฌ ์ „ํˆฌ ํ™”๋ฉด์„ ๋œ ๊ฐ€๋ฆฌ๊ฒŒ ํ–ˆ๋‹ค. +- `Stage`, `HP`, `Bomb`, `Lock-On`์ฒ˜๋Ÿผ ์ „ํˆฌ ํŒ๋‹จ์— ํ•„์š”ํ•œ ์ •๋ณด๊ฐ€ ๋น ๋ฅด๊ฒŒ ์ฝํžˆ๋„๋ก ํ–ˆ๋‹ค. +- ๋ชจ๋“  HUD ์นด๋“œ์— ๋™์ผํ•œ ์ง„ํ•œ ๋„ค์ด๋น„, ๋‘๊บผ์šด ์™ธ๊ณฝ์„ , ์‹œ์•ˆ/๋ผ์ž„/๊ณจ๋“œ ํฌ์ธํŠธ๋ฅผ ์ ์šฉํ–ˆ๋‹ค. + +### Mission Result / Mission Failed ํ™”๋ฉด ํ†ตํ•ฉ + +๊ฒฐ๊ณผ ํ™”๋ฉด์„ ํ˜„์žฌ ํ†ค์•ค๋งค๋„ˆ์— ๋งž๊ฒŒ ๋‹ค์‹œ ์Šคํƒ€์ผ๋งํ–ˆ๋‹ค. + +๋ณ€๊ฒฝ: + +- `MISSION_FAILED` โ†’ `MISSION FAILED` +- `MISSION_SUCCESS` โ†’ `MISSION CLEARED` +- `MISSION_COMPLETE` โ†’ `MISSION COMPLETE` +- ์‹คํŒจ ์‹œ `Recovery Beacon Received` ์ƒํƒœ ๋ฌธ๊ตฌ ์ถ”๊ฐ€ +- ์‹คํŒจ ์‹œ `Hull core collapsed. Refit, upgrade, and redeploy.` ์•ˆ๋‚ด ์ถ”๊ฐ€ +- ๊ฒฐ๊ณผ ์นด๋“œ, ์Šคํƒฏ ๊ทธ๋ฆฌ๋“œ, ๋ฒ„ํŠผ์„ ๋‘๊บผ์šด ์™ธ๊ณฝ์„  ๊ธฐ๋ฐ˜์˜ ๋งˆ์ง€ํ…Œํฌ ์นด๋“œ๋กœ ๋ณ€๊ฒฝ +- ์‹คํŒจ ์ƒํƒœ๋Š” ์˜ค๋ Œ์ง€/๋ ˆ๋“œ ๊ณ„์—ด, ์„ฑ๊ณต ์ƒํƒœ๋Š” ์‹œ์•ˆ/๋ผ์ž„ ๊ณ„์—ด๋กœ ๋ช…ํ™•ํžˆ ๊ตฌ๋ถ„ + +์˜๋„: + +- ์‹คํŒจ ํ™”๋ฉด๋„ ๊ฒŒ์ž„ ์„ธ๊ณ„๊ด€ ์•ˆ์˜ ๊ฒฐ๊ณผ ๋ณด๊ณ ์„œ์ฒ˜๋Ÿผ ๋ณด์ด๊ฒŒ ํ•œ๋‹ค. +- ์‚ฌ์šฉ์ž๊ฐ€ ์‹คํŒจ ํ›„ ๋ฐ”๋กœ ์žฌ๋„์ „ ๋˜๋Š” ๋ณต๊ท€๋ฅผ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•œ๋‹ค. +- ์„ฑ๊ณต/์‹คํŒจ/์™„๋ฃŒ ํ™”๋ฉด์ด ์„œ๋กœ ๋‹ค๋ฅธ ๋‚ก์€ ์Šคํƒ€์ผ๋กœ ๋ณด์ด์ง€ ์•Š๊ฒŒ ํ•œ๋‹ค. + +### Boss Warning ์ „์—ญ ์•Œ๋ฆผ ํ†ต์ผ + +๊ธฐ์กด ๋ณด์Šค ๊ฒฝ๊ณ ๋Š” Tailwind class ๊ธฐ๋ฐ˜์˜ ๋ถ‰์€ ๊ฒฝ๊ณ  ๋  2๊ฐœ๋กœ ์ถœ๋ ฅ๋˜์–ด ํ˜„์žฌ UI ํ†ค๊ณผ ๋”ฐ๋กœ ๋†€์•˜๋‹ค. + +๋ณ€๊ฒฝ: + +- `WARNING` ๋ฐ˜๋ณต ๋ ๋ฅผ ์ œ๊ฑฐ +- `BOSS SIGNAL` ๋งˆ์ง€ํ…Œํฌ ๊ฒฝ๊ณ  ์นด๋“œ๋กœ ๋ณ€๊ฒฝ +- ์˜ค๋ Œ์ง€/๋ ˆ๋“œ ๊ธฐ๋ฐ˜์˜ ์œ„ํ˜‘ ์ƒ‰์ƒ์€ ์œ ์ง€ํ•˜๋˜, ๋‘๊บผ์šด ์™ธ๊ณฝ์„ ๊ณผ ์นด๋“œํ˜• ๊ตฌ์กฐ๋กœ ํ†ต์ผ +- ๋ณด์Šค ์ง„์ž… ์‹œ ์‚ฌ์šฉ์ž๊ฐ€ ํ•ด์•ผ ํ•  ํ–‰๋™์„ ์งง๊ฒŒ ์•ˆ๋‚ด + +## ์ˆ˜์ • ํŒŒ์ผ + +- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/ui/HUDOverlay.css` +- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/ui/ResultCard.tsx` +- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/ui/ResultCard.css` +- `/Volumes/Data/project/Antigravity/Skybound/src/App.tsx` +- `/Volumes/Data/project/Antigravity/Skybound/src/App.css` + +## ๊ฒ€์ฆ + +- `npm run build` ์„ฑ๊ณต +- ์ถœ๋ ฅ ๋””๋ ‰ํ„ฐ๋ฆฌ: `dist/31` + +## ํ›„์† ํ”Œ๋ ˆ์ดํ…Œ์ŠคํŠธ ์ฒดํฌ ํฌ์ธํŠธ + +- ํ”Œ๋ ˆ์ด HUD๊ฐ€ ์ „ํˆฌ ํ™”๋ฉด์„ ๊ณผํ•˜๊ฒŒ ๋ฎ์ง€ ์•Š๋Š”์ง€ ํ™•์ธํ•œ๋‹ค. +- HUD ์ •๋ณด๊ฐ€ `Stage`, `Level`, `HP`, `Bomb`, `Lock-On` ์ˆœ์„œ๋กœ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ์ฝํžˆ๋Š”์ง€ ํ™•์ธํ•œ๋‹ค. +- Mission Failed ํ™”๋ฉด์ด ๋” ์ด์ƒ ์˜›๋‚  ์Šคํƒ€์ผ์ฒ˜๋Ÿผ ๋ณด์ด์ง€ ์•Š๋Š”์ง€ ํ™•์ธํ•œ๋‹ค. +- ์‹คํŒจ ํ›„ ์‚ฌ์šฉ์ž๊ฐ€ `Retry Mission`๊ณผ `Back to Title` ์„ ํƒ์„ ์‰ฝ๊ฒŒ ์ดํ•ดํ•˜๋Š”์ง€ ํ™•์ธํ•œ๋‹ค. +- Boss Signal ๊ฒฝ๊ณ ๊ฐ€ ์œ„ํ˜‘์ ์ด๋ฉด์„œ๋„ ํ˜„์žฌ UI ํ†ค์—์„œ ํŠ€์ง€ ์•Š๋Š”์ง€ ํ™•์ธํ•œ๋‹ค. diff --git a/00_Raw/2026-04-26-Skybound_Hangar_Upgrade_Scroll_and_Campaign_Footer_Stabilization.md b/00_Raw/2026-04-26-Skybound_Hangar_Upgrade_Scroll_and_Campaign_Footer_Stabilization.md new file mode 100644 index 00000000..5f369bc6 --- /dev/null +++ b/00_Raw/2026-04-26-Skybound_Hangar_Upgrade_Scroll_and_Campaign_Footer_Stabilization.md @@ -0,0 +1,93 @@ +# Skybound Hangar Upgrade Scroll and Campaign Footer Stabilization + +์ž‘์„ฑ์ผ: 2026-04-26 14:43 KST + +## ์š”์ฒญ ์š”์•ฝ + +- Hangar์˜ `Permanent Upgrades` ๋ชฉ๋ก ์•„๋ž˜์— ๋” ๋งŽ์€ ํ•ญ๋ชฉ์ด ์žˆ๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด์ง€๋งŒ ํ™•์ธํ•  ์ˆ˜ ์—†๋‹ค. +- ์—…๊ทธ๋ ˆ์ด๋“œ ๋ชฉ๋ก์—๋Š” ์Šคํฌ๋กค ๊ฐœ๋…์ด ํ•„์š”ํ•˜๋‹ค. +- Campaign ๋ชจ๋“œ๋กœ ์ „ํ™˜ํ•˜๋ฉด HUD/UI๊ฐ€ ๋ฌด๋„ˆ์ง€๊ณ , ํ•˜๋‹จ ์˜์—ญ์ด ๊น”๋”ํ•˜๊ฒŒ ์ •๋ ฌ๋˜์ง€ ์•Š๋Š”๋‹ค. +- ๋ชจ๋“œ๊ฐ€ ๋ฐ”๋€Œ์–ด๋„ ๊ธฐ๋ณธ์ ์ธ UI ํฌ๊ธฐ์™€ ๊ตฌ์กฐ๋Š” ํ”๋“ค๋ฆฌ์ง€ ์•Š์•„์•ผ ํ•œ๋‹ค. + +## ํ•ต์‹ฌ ๋ฌธ์ œ + +์ด๋ฒˆ ๋ฌธ์ œ๋Š” ๋‹จ์ˆœํžˆ ๋ฆฌ์ŠคํŠธ ๋†’์ด๊ฐ€ ๋ถ€์กฑํ•œ ๋ฌธ์ œ๊ฐ€ ์•„๋‹ˆ๋ผ, Hangar ํ™”๋ฉด ์ „์ฒด๊ฐ€ `์ƒ๋‹จ ํ—ค๋” / ์ค‘์•™ ์ฝ˜ํ…์ธ  / ํ•˜๋‹จ ์ถœ๊ฒฉ ์˜์—ญ`์„ ๋ช…ํ™•ํžˆ ๋‚˜๋ˆ„์ง€ ๋ชปํ•ด์„œ ๋ฐœ์ƒํ–ˆ๋‹ค. + +๊ธฐ์กด ๊ตฌ์กฐ์—์„œ๋Š” ์ค‘์•™ ์ฝ˜ํ…์ธ ๊ฐ€ ๋‚จ๋Š” ๋†’์ด๋ฅผ ์•ˆ์ •์ ์œผ๋กœ ๊ณ„์‚ฐํ•˜์ง€ ๋ชปํ–ˆ๊ณ , footer์—๋Š” Campaign ๋ชจ๋“œ์—์„œ๋งŒ `Tactical Support`๊ฐ€ ๋‚˜ํƒ€๋‚˜๋ฉด์„œ ๋ชจ๋“œ ์ „ํ™˜ ์‹œ ํ™”๋ฉด์˜ ์„ธ๋กœ ๋ฐฐ์น˜๊ฐ€ ํ”๋“ค๋ ธ๋‹ค. + +๊ทธ ๊ฒฐ๊ณผ: + +- ์—…๊ทธ๋ ˆ์ด๋“œ ๋ฆฌ์ŠคํŠธ๊ฐ€ ํ™”๋ฉด ์•„๋ž˜๋กœ ์ž˜๋ ค ๋ณด์˜€๋‹ค. +- footer์˜ Mission Mode, Tactical Support, Launch ๋ฒ„ํŠผ์ด ์„œ๋กœ ๊ฐ€๊นŒ์›Œ์ง€๊ฑฐ๋‚˜ ๊ฒน์ณ ๋ณด์˜€๋‹ค. +- Campaign/Blitz ๋ชจ๋“œ ์ „ํ™˜์ด ํ™”๋ฉด ์žฌ๋ฐฐ์น˜์ฒ˜๋Ÿผ ๋Š๊ปด์กŒ๋‹ค. + +## ์ ์šฉํ•œ ๋ณ€๊ฒฝ + +### Hangar ์ „์ฒด ๋ ˆ์ด์•„์›ƒ ์•ˆ์ •ํ™” + +`hangar-inner`๋ฅผ grid ๊ธฐ๋ฐ˜์˜ 3์˜์—ญ ๊ตฌ์กฐ๋กœ ๊ณ ์ •ํ–ˆ๋‹ค. + +๊ตฌ์กฐ: + +- Header +- Main content +- Footer controls + +์ค‘์•™ ์ฝ˜ํ…์ธ ๋Š” `minmax(0, 1fr)`๋กœ ๋‚จ์€ ๋†’์ด๋งŒ ์‚ฌ์šฉํ•˜๊ฒŒ ํ–ˆ๊ณ , ์ „์ฒด Hangar๋Š” ํ™”๋ฉด ๋ฐ–์œผ๋กœ ๋„˜์น˜์ง€ ์•Š๋„๋ก `overflow: hidden`์„ ์ ์šฉํ–ˆ๋‹ค. + +์˜๋„: + +- ์ƒ๋‹จ/์ค‘์•™/ํ•˜๋‹จ ์˜์—ญ์ด ์„œ๋กœ ์นจ๋ฒ”ํ•˜์ง€ ์•Š๊ฒŒ ํ•œ๋‹ค. +- ํ™”๋ฉด ๋†’์ด๊ฐ€ ๋‹ฌ๋ผ๋„ ํ•˜๋‹จ ๋ฒ„ํŠผ์ด ์ฝ˜ํ…์ธ ๋ฅผ ๋ฐ€์–ด๋‚ด๊ฑฐ๋‚˜ ๊ฒน์น˜์ง€ ์•Š๊ฒŒ ํ•œ๋‹ค. +- Campaign/Blitz ์ „ํ™˜ ์‹œ ๊ธฐ๋ณธ UI ํฌ๊ธฐ๊ฐ€ ๋ณ€ํ•˜์ง€ ์•Š๊ฒŒ ํ•œ๋‹ค. + +### Permanent Upgrades ๋‚ด๋ถ€ ์Šคํฌ๋กค ์ถ”๊ฐ€ + +`upgrade-list`์— ๋‚ด๋ถ€ ์Šคํฌ๋กค์„ ์ถ”๊ฐ€ํ–ˆ๋‹ค. + +๋ณ€๊ฒฝ: + +- `upgrade-shop`์€ ๋‚ด๋ถ€ ์ฝ˜ํ…์ธ ๋ฅผ ๊ฐ์‹ธ๋Š” ๊ณ ์ • ์˜์—ญ์ด ๋œ๋‹ค. +- `upgrade-list`๋งŒ ์„ธ๋กœ ์Šคํฌ๋กค๋œ๋‹ค. +- ์Šคํฌ๋กค๋ฐ”๋Š” ๊ธฐ์กด Stylized Casual Magitech ํ†ค์— ๋งž์ถฐ ์‹œ์•ˆ/๋ผ์ž„ ๊ณ„์—ด๋กœ ์Šคํƒ€์ผ๋งํ–ˆ๋‹ค. +- ์—…๊ทธ๋ ˆ์ด๋“œ ํ–‰ ๋†’์ด๋ฅผ ์กฐ๊ธˆ ์ค„์—ฌ ํ•œ ํ™”๋ฉด์—์„œ ๋” ๋งŽ์€ ํ•ญ๋ชฉ์„ ๋ณผ ์ˆ˜ ์žˆ๊ฒŒ ํ–ˆ๋‹ค. + +์˜๋„: + +- ๋ชฉ๋ก์ด ๊ธธ์–ด์ ธ๋„ Hangar footer๋ฅผ ๋ฐ€์–ด๋‚ด์ง€ ์•Š๋Š”๋‹ค. +- ์•„๋ž˜ ํ•ญ๋ชฉ์ด ์žˆ๋Š”์ง€ ์Šคํฌ๋กค๋ฐ”๋กœ ๋ช…ํ™•ํžˆ ์•Œ ์ˆ˜ ์žˆ๋‹ค. +- ์‚ฌ์šฉ์ž๊ฐ€ ์—…๊ทธ๋ ˆ์ด๋“œ ํƒญ์—์„œ ํ•ญ๋ชฉ์„ ์žƒ์–ด๋ฒ„๋ ธ๋‹ค๊ณ  ๋Š๋ผ์ง€ ์•Š๊ฒŒ ํ•œ๋‹ค. + +### Campaign Footer ์žฌ์ •๋ ฌ + +footer๋ฅผ `Mission Mode / Tactical Support / Launch` 3์—ด ๊ตฌ์กฐ๋กœ ๋ณ€๊ฒฝํ–ˆ๋‹ค. + +๋ณ€๊ฒฝ: + +- ์™ผ์ชฝ: Mission Mode +- ์ค‘์•™: Tactical Support +- ์˜ค๋ฅธ์ชฝ: Ignite & Launch + +Blitz ๋ชจ๋“œ์—์„œ๋Š” Tactical Support ์˜์—ญ์„ placeholder๋กœ ์œ ์ง€ํ•ด, ๋ชจ๋“œ๊ฐ€ ๋ฐ”๋€Œ์–ด๋„ footer ๋†’์ด์™€ ๋ฒ„ํŠผ ์œ„์น˜๊ฐ€ ํ”๋“ค๋ฆฌ์ง€ ์•Š๊ฒŒ ํ–ˆ๋‹ค. + +์˜๋„: + +- Campaign ๋ชจ๋“œ์—์„œ Tactical Support๊ฐ€ ๋‚˜ํƒ€๋‚˜๋„ Launch ๋ฒ„ํŠผ๊ณผ ๊ฒน์น˜์ง€ ์•Š๋Š”๋‹ค. +- Blitz ๋ชจ๋“œ์—์„œ๋„ ๋™์ผํ•œ UI ๊ณจ๊ฒฉ์„ ์œ ์ง€ํ•œ๋‹ค. +- ํ•˜๋‹จ ์กฐ์ž‘ ์˜์—ญ์ด ๋” ์ƒํ’ˆ์„ฑ ์žˆ๋Š” ๋Ÿฐ์ฒ˜ ํŒจ๋„์ฒ˜๋Ÿผ ๋ณด์ด๊ฒŒ ํ•œ๋‹ค. + +## ์ˆ˜์ • ํŒŒ์ผ + +- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/ui/HangarOverlay.css` + +## ๊ฒ€์ฆ + +- `npm run build` ์„ฑ๊ณต +- ์ถœ๋ ฅ ๋””๋ ‰ํ„ฐ๋ฆฌ: `dist/30` + +## ํ›„์† ํ”Œ๋ ˆ์ดํ…Œ์ŠคํŠธ ์ฒดํฌ ํฌ์ธํŠธ + +- `Permanent Upgrades` ๋ชฉ๋ก์—์„œ ์•„๋ž˜ ํ•ญ๋ชฉ๊นŒ์ง€ ์Šคํฌ๋กค๋กœ ํ™•์ธ ๊ฐ€๋Šฅํ•œ์ง€ ํ™•์ธํ•œ๋‹ค. +- Campaign/Blitz ์ „ํ™˜ ์‹œ footer ๋†’์ด์™€ Launch ๋ฒ„ํŠผ ์œ„์น˜๊ฐ€ ํ”๋“ค๋ฆฌ์ง€ ์•Š๋Š”์ง€ ํ™•์ธํ•œ๋‹ค. +- Tactical Support๊ฐ€ Campaign ๋ชจ๋“œ์—์„œ๋งŒ ๋ณด์ด๋”๋ผ๋„ ํ™”๋ฉด ๊ตฌ์กฐ๊ฐ€ ๊นจ์ ธ ๋ณด์ด์ง€ ์•Š๋Š”์ง€ ํ™•์ธํ•œ๋‹ค. +- 16:9, 16:10, ์ž‘์€ ๋…ธํŠธ๋ถ ๋†’์ด์—์„œ footer๊ฐ€ ๋‹ค์‹œ ์ค‘์•™ ์ฝ˜ํ…์ธ ๋ฅผ ์นจ๋ฒ”ํ•˜์ง€ ์•Š๋Š”์ง€ ํ™•์ธํ•œ๋‹ค. diff --git a/00_Raw/2026-04-26-Skybound_LevelUp_Modal_Text_Fit_and_Card_Layout_Fix.md b/00_Raw/2026-04-26-Skybound_LevelUp_Modal_Text_Fit_and_Card_Layout_Fix.md new file mode 100644 index 00000000..fa324961 --- /dev/null +++ b/00_Raw/2026-04-26-Skybound_LevelUp_Modal_Text_Fit_and_Card_Layout_Fix.md @@ -0,0 +1,77 @@ +# Skybound LevelUp Modal Text Fit and Card Layout Fix + +์ž‘์„ฑ์ผ: 2026-04-26 14:52 KST + +## ์š”์ฒญ ์š”์•ฝ + +- Tactical Upgrade ํ™”๋ฉด์—์„œ ์นด๋“œ ํ…์ŠคํŠธ๊ฐ€ ์ž˜๋ ค ๋ณด์ธ๋‹ค. +- `Skip Upgrade` ์„ค๋ช…์ด ์นด๋“œ ํ•˜๋‹จ์—์„œ ์ž˜๋ฆฐ๋‹ค. +- ์นด๋“œ ์ƒ๋‹จ ๋ฐฐ์ง€์™€ ์„ค๋ช… ํ…์ŠคํŠธ๊ฐ€ ์„œ๋กœ ๊ฒน์ณ ๋ณด์ธ๋‹ค. +- ์ „์ฒด์ ์œผ๋กœ ๋ชจ๋‹ฌ์ด ํ™”๋ฉด ์•ˆ์— ์•ˆ์ •์ ์œผ๋กœ fit ๋˜์ง€ ์•Š๋Š”๋‹ค. + +## ํ•ต์‹ฌ ๋ฌธ์ œ + +๋ ˆ๋ฒจ์—… ๋ชจ๋‹ฌ์˜ ๋ฌธ์ œ๋Š” ์นด๋“œ ๋†’์ด์™€ ํ…์ŠคํŠธ ์–‘์˜ ๋ถˆ์ผ์น˜์˜€๋‹ค. + +๊ธฐ์กด ์นด๋“œ์—๋Š” ๋‹ค์Œ ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ๋‹ค. + +- `skill-card`๊ฐ€ `overflow: hidden`์œผ๋กœ ์„ค์ •๋˜์–ด ๊ธด ์„ค๋ช…์ด ์นด๋“œ ๋‚ด๋ถ€์—์„œ ์ž˜๋ ธ๋‹ค. +- `WEAPON`, `PASSIVE`, `SKIP` ํƒœ๊ทธ๊ฐ€ absolute position์œผ๋กœ ๋–  ์žˆ์–ด ์ถ”์ฒœ ์‚ฌ์œ  ํ…์ŠคํŠธ์™€ ๊ฒน์ณค๋‹ค. +- `Skip Upgrade` ์นด๋“œ๋งŒ ๋‚ฎ์€ ๋†’์ด๋กœ ์ง€์ •๋˜์–ด ์„ค๋ช… ๋ฌธ์žฅ์ด ์ถฉ๋ถ„ํžˆ ๋“ค์–ด๊ฐ€์ง€ ์•Š์•˜๋‹ค. +- ์นด๋“œ ๋ชฉ๋ก ์ „์ฒด๋Š” ์Šคํฌ๋กค๋˜์ง€๋งŒ, ๊ฐœ๋ณ„ ์นด๋“œ ๋‚ด๋ถ€ ํ…์ŠคํŠธ๋Š” ์นด๋“œ ์•ˆ์—์„œ ์ž˜๋ฆฌ๋Š” ๊ตฌ์กฐ์˜€๋‹ค. + +## ์ ์šฉํ•œ ๋ณ€๊ฒฝ + +### ์นด๋“œ ๋‚ด๋ถ€ ๋ ˆ์ด์•„์›ƒ gridํ™” + +์นด๋“œ ๊ตฌ์กฐ๋ฅผ 3์—ด grid๋กœ ์ •๋ฆฌํ–ˆ๋‹ค. + +๊ตฌ์กฐ: + +- ์ขŒ์ธก: ์Šคํ‚ฌ ์•„์ด์ฝ˜ +- ์ค‘์•™: ์ถ”์ฒœ ์‚ฌ์œ , ์Šคํ‚ฌ๋ช…, ๋ ˆ๋ฒจ ๋ณ€ํ™”, ์„ค๋ช… +- ์šฐ์ธก: `WEAPON`, `PASSIVE`, `SKIP` ํƒ€์ž… ํƒœ๊ทธ + +์ด์ œ ํƒ€์ž… ํƒœ๊ทธ๊ฐ€ ํ…์ŠคํŠธ ์œ„์— ๋– ์„œ ๊ฒน์น˜์ง€ ์•Š๊ณ , ์นด๋“œ ๋‚ด๋ถ€์˜ ๋ช…ํ™•ํ•œ ์˜์—ญ์„ ๊ฐ–๋Š”๋‹ค. + +### ํ…์ŠคํŠธ ์ž˜๋ฆผ ๋ฐฉ์ง€ + +๊ฐœ๋ณ„ ์นด๋“œ์˜ `overflow: hidden` ์˜์กด์„ ์ œ๊ฑฐํ•˜๊ณ , ์นด๋“œ๊ฐ€ ๋‚ด์šฉ์— ๋งž๊ฒŒ ์ปค์ง€๋„๋ก ์กฐ์ •ํ–ˆ๋‹ค. + +๋ณ€๊ฒฝ: + +- ์ผ๋ฐ˜ ์นด๋“œ์™€ `Skip Upgrade` ์นด๋“œ ๋ชจ๋‘ ๋‚ด์šฉ ๊ธฐ๋ฐ˜ ๋†’์ด ์‚ฌ์šฉ +- ์„ค๋ช… ํ…์ŠคํŠธ๋Š” ์นด๋“œ ๋‚ด๋ถ€์—์„œ ์ž˜๋ฆฌ์ง€ ์•Š๊ฒŒ ์ฒ˜๋ฆฌ +- ์นด๋“œ ๋ชฉ๋ก ์˜์—ญ๋งŒ ์Šคํฌ๋กค ์œ ์ง€ +- ์นด๋“œ ๊ฐ„๊ฒฉ๊ณผ ํฐํŠธ ํฌ๊ธฐ ์กฐ์ • + +์˜๋„: + +- ํ…์ŠคํŠธ๋ฅผ ๊ฐ•์ œ๋กœ ์ˆจ๊ธฐ์ง€ ์•Š๋Š”๋‹ค. +- ํ™”๋ฉด์ด ์ž‘์œผ๋ฉด ์ „์ฒด ๋ชฉ๋ก์„ ์Šคํฌ๋กคํ•ด์„œ ํ™•์ธํ•œ๋‹ค. +- ์นด๋“œ ํ•˜๋‚˜ํ•˜๋‚˜์˜ ์ •๋ณด๋Š” ์นด๋“œ ์•ˆ์—์„œ ์˜จ์ „ํžˆ ์ฝํžŒ๋‹ค. + +### ์ž‘์€ ํ™”๋ฉด ๋Œ€์‘ + +ํ™”๋ฉด ๋†’์ด๊ฐ€ ๋‚ฎ์€ ๊ฒฝ์šฐ์—๋Š” ์ถ”์ฒœ ์‚ฌ์œ ์˜ ๋ณด์กฐ ์„ค๋ช…์„ ์ˆจ๊ธฐ๊ณ  ํ•ต์‹ฌ ๋ผ๋ฒจ๋งŒ ๋‚จ๊ธด๋‹ค. + +์˜๋„: + +- `New module`, ์Šคํ‚ฌ๋ช…, ๋ ˆ๋ฒจ ๋ณ€ํ™”, ์‹ค์ œ ํšจ๊ณผ ์„ค๋ช…์„ ์šฐ์„  ๋…ธ์ถœํ•œ๋‹ค. +- ์ž‘์€ ํ™”๋ฉด์—์„œ๋„ ์ค‘์š”ํ•œ ์˜์‚ฌ๊ฒฐ์ • ์ •๋ณด๊ฐ€ ์ž˜๋ฆฌ์ง€ ์•Š๊ฒŒ ํ•œ๋‹ค. + +## ์ˆ˜์ • ํŒŒ์ผ + +- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/ui/LevelUpModal.css` + +## ๊ฒ€์ฆ + +- `npm run build` ์„ฑ๊ณต +- ์ถœ๋ ฅ ๋””๋ ‰ํ„ฐ๋ฆฌ: `dist/32` + +## ํ›„์† ํ”Œ๋ ˆ์ดํ…Œ์ŠคํŠธ ์ฒดํฌ ํฌ์ธํŠธ + +- `Skip Upgrade` ์„ค๋ช…์ด ์นด๋“œ ์•ˆ์—์„œ ์ž˜๋ฆฌ์ง€ ์•Š๋Š”์ง€ ํ™•์ธํ•œ๋‹ค. +- `WEAPON`, `PASSIVE`, `SKIP` ํƒœ๊ทธ๊ฐ€ ์ถ”์ฒœ ์‚ฌ์œ  ํ…์ŠคํŠธ์™€ ๊ฒน์น˜์ง€ ์•Š๋Š”์ง€ ํ™•์ธํ•œ๋‹ค. +- ์นด๋“œ๊ฐ€ 4๊ฐœ ์ด์ƒ์ผ ๋•Œ ๋ชฉ๋ก ์Šคํฌ๋กค๋กœ ๋ชจ๋“  ํ•ญ๋ชฉ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ํ™•์ธํ•œ๋‹ค. +- ์ž‘์€ ํ™”๋ฉด ๋†’์ด์—์„œ๋„ ํ•ต์‹ฌ ์ •๋ณด๊ฐ€ ์ž˜ ๋ณด์ด๋Š”์ง€ ํ™•์ธํ•œ๋‹ค. diff --git a/00_Raw/2026-04-26-Skybound_Stage1_Enemy_Reduction_and_UI_Readability_Pass.md b/00_Raw/2026-04-26-Skybound_Stage1_Enemy_Reduction_and_UI_Readability_Pass.md new file mode 100644 index 00000000..827aeb07 --- /dev/null +++ b/00_Raw/2026-04-26-Skybound_Stage1_Enemy_Reduction_and_UI_Readability_Pass.md @@ -0,0 +1,145 @@ +# Skybound Stage 1 Enemy Reduction and UI Readability Pass + +์ž‘์„ฑ์ผ: 2026-04-26 14:38 KST + +## ์š”์ฒญ ์š”์•ฝ + +- Stage 1 ๊ธฐ์ค€์œผ๋กœ ์•„์ง ์ ๊ธฐ ๊ฐœ์ฒด์ˆ˜๊ฐ€ ๋งŽ๊ฒŒ ๋Š๊ปด์ง„๋‹ค. +- ํ˜„์žฌ๋ณด๋‹ค ์•ฝ 30% ์ ๊ฒŒ ๋‚˜์˜ค๋„๋ก ์กฐ์ •ํ•œ๋‹ค. +- ๋ ˆ๋ฒจ์—…/์—…๊ทธ๋ ˆ์ด๋“œ ๋ชฉ๋ก์ด ์ž˜๋ ค ๋ณด์ด๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ๋‹ค. +- Campaign ๋ชจ๋“œ๋กœ ์ „ํ™˜ํ•˜๋ฉด UI๊ฐ€ ๋‹ฌ๋ผ์ง€๋ฉด์„œ ๋ชฉ๋ก์ด ๋” ์ž˜๋ฆฐ๋‹ค. +- ๋ชจ๋“œ๊ฐ€ ๋ฐ”๋€Œ์–ด๋„ ๊ธฐ๋ณธ UI ํฌ๊ธฐ๋Š” ๋ณ€๊ฒฝ๋˜์ง€ ์•Š์•„์•ผ ํ•œ๋‹ค. +- Gameplay HUD๊ฐ€ ์ƒํ’ˆ์„ฑ ์žˆ๋Š” UI๋ผ๊ธฐ๋ณด๋‹ค ํ”„๋กœํ† ํƒ€์ž…์ฒ˜๋Ÿผ ๋ณด์ด๊ณ , ์ •๋ณด๊ฐ€ ๋„ˆ๋ฌด ๋งŽ์•„ ์ธ์ง€๊ฐ€ ์–ด๋ ต๋‹ค. + +## ํ•ต์‹ฌ ๋ฌธ์ œ + +์ด๋ฒˆ ํ”ผ๋“œ๋ฐฑ์€ ์ „ํˆฌ ๋ฐธ๋Ÿฐ์Šค์™€ UI ๊ตฌ์กฐ ๋ฌธ์ œ๊ฐ€ ๊ฐ™์ด ์—ฐ๊ฒฐ๋˜์–ด ์žˆ์—ˆ๋‹ค. + +1. Stage 1์€ ์ •์ฐฐ๋Œ€ ์ปจ์…‰์œผ๋กœ ์ค„์˜€์ง€๋งŒ ์—ฌ์ „ํžˆ ์ฒด๊ฐ ๋ฌผ๋Ÿ‰์ด ๋งŽ์•˜๋‹ค. +2. Level Up ํ™”๋ฉด์€ `Skip Upgrade`์™€ ์Šฌ๋กฏ ์ •๋ณด๊ฐ€ ์ถ”๊ฐ€๋˜๋ฉด์„œ ์นด๋“œ ์ˆ˜๊ฐ€ ๋Š˜์–ด๋‚ฌ๊ณ , ํ™”๋ฉด ๋†’์ด์— ๋”ฐ๋ผ ๋ชฉ๋ก์ด ์ž˜๋ฆด ์ˆ˜ ์žˆ์—ˆ๋‹ค. +3. Hangar๋Š” Campaign ์„ ํƒ ์‹œ `Tactical Support`๊ฐ€ ๋‚˜ํƒ€๋‚˜ footer ๋†’์ด๊ฐ€ ๋ฐ”๋€Œ๊ณ , ์ค‘์•™ ๋ชฉ๋ก ์˜์—ญ์„ ๋ฐ€์–ด๋‚ด๋Š” ๊ตฌ์กฐ์˜€๋‹ค. +4. Gameplay HUD๋Š” ์ขŒ์šฐ ํŒจ๋„ ์ •๋ณด๋Ÿ‰์ด ๋งŽ๊ณ , ์‹ค์ œ ํ”Œ๋ ˆ์ด ์ค‘ ์ค‘์š”ํ•œ ์ •๋ณด๋ณด๋‹ค ์žฅ์‹์„ฑ ์ •๋ณด๊ฐ€ ๋งŽ์•˜๋‹ค. + +## ์ ์šฉํ•œ ๋ณ€๊ฒฝ + +### Stage 1 ์ ๊ธฐ ์ˆ˜ 30% ๊ฐ์†Œ + +Stage 1 `First Contact` ํ”„๋กœํ•„์˜ ๊ฐœ์ฒด์ˆ˜์™€ ์ตœ๋Œ€ ๋™์‹œ ์  ์ˆ˜๋ฅผ ์ค„์˜€๋‹ค. + +๋ณ€๊ฒฝ: + +- `capBase: 12` โ†’ `8` +- opening density: `4` โ†’ `3` +- swarm density: `12` โ†’ `8` +- climax elite density: `2` โ†’ `1` + +๋˜ํ•œ Stage 1์—๋งŒ phase cap add scale์„ ์ ์šฉํ–ˆ๋‹ค. + +Stage 1์˜ ์••๋ฐ•/์Šค์›œ/ํด๋ผ์ด๋งฅ์Šค phase์—์„œ ์ถ”๊ฐ€๋˜๋Š” ์ตœ๋Œ€ ์  ์ˆ˜๋ฅผ 65%๋งŒ ๋ฐ˜์˜ํ•˜๋„๋ก ํ–ˆ๋‹ค. + +์˜๋„: + +- Stage 1์€ ๋ณด์Šค๊ฐ€ ํ”Œ๋ ˆ์ด์–ด๋ฅผ ์–•๋ณด๋Š” ์ •์ฐฐ ๋‹จ๊ณ„๋กœ ์œ ์ง€ํ•œ๋‹ค. +- ์  ์ˆ˜๋Š” ํ™•์‹คํžˆ ์ค„์ด๋˜, ๊ณต๊ฒฉ๋ ฅ/์œ„ํ˜‘์€ ์œ ์ง€ํ•ด ๊ธด์žฅ๊ฐ์„ ๋‚จ๊ธด๋‹ค. +- ํ™”๋ฉด์„ ์ ์œผ๋กœ ์ฑ„์šฐ๊ธฐ๋ณด๋‹ค ํšŒํ”ผ์™€ ๋ฌด๊ธฐ ์ดํ•ด์— ์ง‘์ค‘ํ•˜๊ฒŒ ํ•œ๋‹ค. + +### Level Up ๋ชฉ๋ก ์ž˜๋ฆผ ๋ฐฉ์ง€ + +`LevelUpModal`์˜ ์นด๋“œ ๋ชฉ๋ก ์˜์—ญ์— ๋‚ด๋ถ€ ์Šคํฌ๋กค์„ ์ถ”๊ฐ€ํ–ˆ๋‹ค. + +๋ณ€๊ฒฝ: + +- overlay๋Š” ํ™”๋ฉด ๋ฐ–์œผ๋กœ ๋„˜์น˜์ง€ ์•Š๊ฒŒ ์ฒ˜๋ฆฌ +- container๋Š” `max-height`๋ฅผ ๊ฐ–๊ณ  ๋‚ด๋ถ€์—์„œ๋งŒ ์Šคํฌ๋กค +- card grid๋Š” `overflow-y: auto` +- 4๋ฒˆ์งธ ์นด๋“œ ๋˜๋Š” `Skip Upgrade` ์นด๋“œ๊ฐ€ ์ž˜๋ฆฌ์ง€ ์•Š๋„๋ก ๋†’์ด ์กฐ์ • +- ์Šคํฌ๋กค๋ฐ”๋„ ํ†ค์•ค๋งค๋„ˆ์— ๋งž์ถฐ ์‹œ์•ˆ/๋ผ์ž„ ๊ณ„์—ด๋กœ ์Šคํƒ€์ผ๋ง + +์ด์ œ ์นด๋“œ๊ฐ€ ๋งŽ์•„์ ธ๋„ ๋ชจ๋‹ฌ ์ „์ฒด๊ฐ€ ์ž˜๋ฆฌ๋Š” ๋Œ€์‹  ๋ชฉ๋ก ๋‚ด๋ถ€์—์„œ ์Šคํฌ๋กค๋œ๋‹ค. + +### Campaign/Blitz ๋ชจ๋“œ ์ „ํ™˜ ์‹œ UI ๋†’์ด ๊ณ ์ • + +Hangar footer์—์„œ Campaign ๋ชจ๋“œ์ผ ๋•Œ๋งŒ `Tactical Support`๊ฐ€ ๋“ฑ์žฅํ•˜๋ฉฐ ๋ ˆ์ด์•„์›ƒ ๋†’์ด๊ฐ€ ๋ฐ”๋€Œ๋˜ ๋ฌธ์ œ๋ฅผ ์ˆ˜์ •ํ–ˆ๋‹ค. + +๋ณ€๊ฒฝ: + +- footer๋ฅผ ๊ณ ์ • grid row ๊ตฌ์กฐ๋กœ ๋ณ€๊ฒฝ +- Tactical Support ์˜์—ญ์„ ํ•ญ์ƒ ์Šฌ๋กฏ์œผ๋กœ ํ™•๋ณด +- Blitz์—์„œ๋Š” ํ•ด๋‹น ์˜์—ญ์„ placeholder๋กœ ์ˆจ๊น€ ์ฒ˜๋ฆฌ +- Launch ๋ฒ„ํŠผ ์œ„์น˜๊ฐ€ Campaign/Blitz ์ „ํ™˜์— ๋”ฐ๋ผ ์ถœ๋ ์ด์ง€ ์•Š๋„๋ก ๊ณ ์ • + +์˜๋„: + +- ๋ชจ๋“œ๊ฐ€ ๋ฐ”๋€Œ์–ด๋„ ๊ธฐ๋ณธ UI ํฌ๊ธฐ์™€ ๋ฆฌ์ŠคํŠธ ๊ณต๊ฐ„์ด ๋ณ€ํ•˜์ง€ ์•Š๊ฒŒ ํ•œ๋‹ค. +- ์‚ฌ์šฉ์ž๊ฐ€ Campaign/Blitz๋ฅผ ๋ฐ”๊ฟ”๋„ ํ™”๋ฉด์ด ์žฌ๋ฐฐ์น˜๋˜๋Š” ๋Š๋‚Œ์„ ์ค„์ธ๋‹ค. + +### Gameplay HUD ์ •๋ณด ๊ตฌ์กฐ ๊ฐœ์„  + +๊ธฐ์กด HUD๋Š” ์ขŒ์šฐ ์‚ฌ์ด๋“œ ํŒจ๋„์— ๋„ˆ๋ฌด ๋งŽ์€ ์ƒํƒœ ์ •๋ณด๊ฐ€ ์žˆ์—ˆ๊ณ , ์‹ค์ œ ํ”Œ๋ ˆ์ด ์ค‘ ํ•„์š”ํ•œ ์ •๋ณด๋ณด๋‹ค ํ”„๋กœํ† ํƒ€์ž…์„ฑ ์ •๋ณด๊ฐ€ ๊ฐ•ํ–ˆ๋‹ค. + +์ด๋ฒˆ ํŒจ์Šค์—์„œ๋Š” HUD๋ฅผ ์ƒ๋‹จ compact bar ์ค‘์‹ฌ์œผ๋กœ ์žฌ๊ตฌ์„ฑํ–ˆ๋‹ค. + +๋‚จ๊ธด ํ•ต์‹ฌ ์ •๋ณด: + +- Stage / Phase +- Tactical Level / EXP +- Hull Core HP +- Bombs +- Lock-On +- Best Run +- Fullscreen / Settings / Pause buttons + +์ค„์ธ ์ •๋ณด: + +- ์ขŒ์ธก ๋Œ€ํ˜• pilot/status panel +- ๊ณผํ•œ nav item +- Chain Bonus ํŒจ๋„ +- ๊ธด ์„ธ๋กœ thrust meter +- ์ค‘๋ณต ์žฅ์‹์„ฑ ํ…์ŠคํŠธ + +๊ฒฐ๊ณผ: + +- ์‹œ์•ผ ์–‘์˜†์„ ๋œ ๊ฐ€๋ฆฐ๋‹ค. +- ์ฃผ์š” ์ƒ์กด ์ •๋ณด๊ฐ€ ํ•œ ์ค„์— ๋ชจ์ธ๋‹ค. +- HUD๊ฐ€ ์ž‘์•„์ง€๊ณ  ์ฝ๊ธฐ ์‰ฌ์›Œ์กŒ๋‹ค. +- ํ”Œ๋ ˆ์ด ์ค‘ ์ /ํƒ„๋ง‰ ๊ฐ€์‹œ์„ฑ์ด ์ข‹์•„์ง„๋‹ค. + +## ์„ค๊ณ„ ์˜๋„ + +์ด๋ฒˆ ๋ณ€๊ฒฝ์˜ ํ•ต์‹ฌ์€ โ€œ์ ๊ฒŒ ๋ณด์—ฌ์ฃผ๋˜ ๋” ์ž˜ ์ฝํžˆ๊ฒŒโ€ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด๋‹ค. + +๊ฒŒ์ž„ ํ”Œ๋ ˆ์ด ์ค‘ HUD๋Š” ์„ธ๊ณ„๊ด€์„ ๋ณด์—ฌ์ฃผ๋Š” ์žฅ์‹ํŒ์ด ์•„๋‹ˆ๋ผ, ์‚ฌ์šฉ์ž๊ฐ€ ์ฆ‰์‹œ ํŒ๋‹จํ•ด์•ผ ํ•˜๋Š” ์ •๋ณด๋งŒ ๋น ๋ฅด๊ฒŒ ์ฝ๊ฒŒ ํ•ด์ค˜์•ผ ํ•œ๋‹ค. + +๊ทธ๋ž˜์„œ ๋‹ค์Œ ์šฐ์„ ์ˆœ์œ„๋กœ ์žฌ๋ฐฐ์น˜ํ–ˆ๋‹ค. + +1. ์ง€๊ธˆ ๋ช‡ ์Šคํ…Œ์ด์ง€์ธ๊ฐ€? +2. ํ˜„์žฌ ํŽ˜์ด์ฆˆ๊ฐ€ ์œ„ํ—˜ํ•œ๊ฐ€? +3. HP๋Š” ์•ˆ์ „ํ•œ๊ฐ€? +4. ๋ ˆ๋ฒจ์—…๊นŒ์ง€ ์–ผ๋งˆ๋‚˜ ๋‚จ์•˜๋‚˜? +5. Bomb/Lock-On์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š”๊ฐ€? + +๋‚˜๋จธ์ง€ ์ •๋ณด๋Š” ํ”Œ๋ ˆ์ด ์ค‘ ์ƒ์‹œ ๋…ธ์ถœ ์šฐ์„ ์ˆœ์œ„์—์„œ ์ œ์™ธํ–ˆ๋‹ค. + +## ์ˆ˜์ • ํŒŒ์ผ + +- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/config/CombatTimeline.ts` +- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/ui/HangarOverlay.tsx` +- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/ui/HangarOverlay.css` +- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/ui/HUDOverlay.tsx` +- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/ui/HUDOverlay.css` +- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/ui/LevelUpModal.css` + +## ๊ฒ€์ฆ + +- `npm run build` ์„ฑ๊ณต +- `/sprites/player.png` ๊ฒฝ๊ณ  ์—†์Œ +- ์ถœ๋ ฅ ๋””๋ ‰ํ„ฐ๋ฆฌ: `dist/29` + +## ํ›„์† ํ”Œ๋ ˆ์ดํ…Œ์ŠคํŠธ ์ฒดํฌ ํฌ์ธํŠธ + +- Stage 1 ์ดˆ๋ฐ˜ ์  ์ˆ˜๊ฐ€ ์•ฝ 30% ์ค„์–ด๋“  ์ฒด๊ฐ์ด ๋“œ๋Š”์ง€ ํ™•์ธํ•œ๋‹ค. +- Stage 1์ด ๋„ˆ๋ฌด ๋น„๊ฑฐ๋‚˜ ์‹ฌ์‹ฌํ•ด์ง€์ง€๋Š” ์•Š์•˜๋Š”์ง€ ํ™•์ธํ•œ๋‹ค. +- Level Up ํ™”๋ฉด์—์„œ 4๋ฒˆ์งธ ์นด๋“œ์™€ `Skip Upgrade`๊ฐ€ ์ž˜๋ฆฌ์ง€ ์•Š๋Š”์ง€ ํ™•์ธํ•œ๋‹ค. +- Campaign/Blitz ์ „ํ™˜ ์‹œ Hangar footer์™€ ๋ชฉ๋ก ์˜์—ญ ๋†’์ด๊ฐ€ ํ”๋“ค๋ฆฌ์ง€ ์•Š๋Š”์ง€ ํ™•์ธํ•œ๋‹ค. +- ์ƒˆ HUD๊ฐ€ ์‹ค์ œ ํ”Œ๋ ˆ์ด ์ค‘ ๋” ์ฝ๊ธฐ ์‰ฌ์šด์ง€ ํ™•์ธํ•œ๋‹ค. +- HUD๊ฐ€ ๋„ˆ๋ฌด ์ž‘๊ฑฐ๋‚˜ ํ•„์š”ํ•œ ์ •๋ณด๊ฐ€ ๋น ์กŒ๋‹ค๊ณ  ๋Š๊ปด์ง€์ง€ ์•Š๋Š”์ง€ ํ™•์ธํ•œ๋‹ค. diff --git a/00_Raw/App Router.md b/00_Raw/App Router.md new file mode 100644 index 00000000..a7c120c4 --- /dev/null +++ b/00_Raw/App Router.md @@ -0,0 +1,25 @@ +# [[App Router]] + +## ๐Ÿ“Œ Brief Summary +App Router๋Š” React Server Components(RSC)๋ฅผ ํ•ต์‹ฌ์œผ๋กœ ๋„์ž…ํ•˜์—ฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋ Œ๋”๋ง ๋ฐฉ์‹์„ ์žฌ๊ตฌ์„ฑํ•œ Next.js 15์˜ ์ƒˆ๋กœ์šด ์•„ํ‚คํ…์ฒ˜ ํŒจ๋Ÿฌ๋‹ค์ž„์ž…๋‹ˆ๋‹ค [1]. ์ „ํ†ต์ ์ธ ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง ๋ฐฉ์‹๊ณผ ๋‹ฌ๋ฆฌ, ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋Š” ํด๋ผ์ด์–ธํŠธ์— JavaScript๋ฅผ ์ „์†กํ•˜์ง€ ์•Š๊ณ  ์„œ๋ฒ„์—์„œ๋งŒ ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค [1, 2]. ์ด ์•„ํ‚คํ…์ฒ˜๋Š” React ์ƒํƒœ๊ณ„์˜ ์Šคํƒ€์ผ๋ง ํŒจ๋Ÿฌ๋‹ค์ž„์— ์ค‘๋Œ€ํ•œ ์˜ํ–ฅ์„ ๋ฏธ์น˜๋ฉฐ, ํŠนํžˆ Styled Components์™€ ๊ฐ™์€ ๋Ÿฐํƒ€์ž„ CSS-in-JS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ํ˜ธํ™˜์„ฑ ๋ฐ ์„ฑ๋Šฅ ์ตœ์ ํ™” ์ „๋žต์— ๊ทผ๋ณธ์ ์ธ ๋ณ€ํ™”๋ฅผ ์š”๊ตฌํ•ฉ๋‹ˆ๋‹ค [3-5]. + +## ๐Ÿ“– Core Content +* **์„œ๋ฒ„ ๋ฐ ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ์˜ ๋ช…ํ™•ํ•œ ๋ถ„๋ฆฌ:** + App Router ํ™˜๊ฒฝ์—์„œ ์ปดํฌ๋„ŒํŠธ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋กœ ์ž‘๋™ํ•˜๋ฉฐ, ํด๋ผ์ด์–ธํŠธ๋กœ ์ „์†ก๋˜๋Š” JavaScript ๋ฒˆ๋“ค ํฌ๊ธฐ๋ฅผ ์ตœ์†Œํ™”ํ•˜์—ฌ ์„ฑ๋Šฅ์„ ํ–ฅ์ƒ์‹œํ‚ต๋‹ˆ๋‹ค [2, 6]. ์ƒํƒœ ๊ด€๋ฆฌ๋‚˜ ๋ธŒ๋ผ์šฐ์ € API ํ˜ธ์ถœ, ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ ๋“ฑ ์ƒํ˜ธ์ž‘์šฉ์ด ํ•„์š”ํ•œ ์˜์—ญ์—๋งŒ `'use client'` ์ง€์‹œ์–ด๋ฅผ ๋ช…์‹œํ•˜์—ฌ ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ๋กœ ์„ ์–ธํ•˜๋Š” ์ „๋žต์„ ์ทจํ•ฉ๋‹ˆ๋‹ค [6, 7]. ํ•˜์ด๋“œ๋ ˆ์ด์…˜(Hydration) ํ”„๋กœ์„ธ์Šค ์—ญ์‹œ ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ์— ๋Œ€ํ•ด์„œ๋งŒ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค [8]. + +* **๊ธฐ์กด CSS-in-JS ์Šคํƒ€์ผ๋ง ํŒจ๋Ÿฌ๋‹ค์ž„๊ณผ์˜ ์ถฉ๋Œ:** + App Router์˜ ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ ํ™˜๊ฒฝ์—์„œ๋Š” React Context๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค [4, 5]. ๋”ฐ๋ผ์„œ ๋‚ด๋ถ€์ ์œผ๋กœ React Context์— ์˜์กดํ•˜์—ฌ ํ…Œ๋งˆ ๋“ฑ์„ ๊ด€๋ฆฌํ•˜๋Š” ๋Ÿฐํƒ€์ž„ CSS-in-JS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ(Styled Components, Emotion ๋“ฑ)๋Š” ๋ณธ์งˆ์ ์ธ ํ˜ธํ™˜์„ฑ ๋ฌธ์ œ๋ฅผ ๊ฒช๊ฒŒ ๋ฉ๋‹ˆ๋‹ค [3, 4]. ์ด๋กœ ์ธํ•ด Next.js App Router๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜๋Š” ์‹ ๊ทœ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” Tailwind CSS, CSS Modules, ๋˜๋Š” ๋Ÿฐํƒ€์ž„ ์˜ค๋ฒ„ํ—ค๋“œ ์—†์ด ๋นŒ๋“œ ํƒ€์ž„์— ์ •์  CSS๋ฅผ ์ƒ์„ฑํ•˜๋Š” vanilla-extract ๋ฐฉ์‹์ด ์ ๊ทน ๊ถŒ์žฅ๋ฉ๋‹ˆ๋‹ค [4, 9]. + +* **App Router ๋‚ด ๋Ÿฐํƒ€์ž„ CSS-in-JS(Styled Components) ํ†ตํ•ฉ ๋ฐฉ๋ฒ•:** + Next.js 15 App Router ํ™˜๊ฒฝ์—์„œ ๋ถ€๋“์ดํ•˜๊ฒŒ Styled Components๋ฅผ ์œ ์ง€ํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ, 'Style Registry(์Šคํƒ€์ผ ๋ ˆ์ง€์ŠคํŠธ๋ฆฌ)' ํŒจํ„ด์„ ๋„์ž…ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค [10]. ์ด๋Š” ๋ Œ๋”๋ง ์ค‘์— CSS ๊ทœ์น™์„ ์ˆ˜์ง‘ํ•˜๊ณ , `useServerInsertedHTML` ํ›…์„ ์‚ฌ์šฉํ•ด HTML ํ—ค๋“œ์— ์ฃผ์ž…ํ•œ ๋’ค, ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋ ˆ์ง€์ŠคํŠธ๋ฆฌ๋ฅผ ์ œ๊ณตํ•˜๋Š” ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ๋กœ ๊ฐ์‹ธ๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค [10]. + +* **ํ…Œ๋งˆ ๋ฐ ์Šคํƒ€์ผ ์ ์šฉ์˜ ๋ณ€ํ™”:** + ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ์—์„œ๋Š” `ThemeProvider` ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ž‘๋™ํ•˜์ง€ ์•Š๊ณ  ๋‹จ์ˆœํžˆ ํ†ต๊ณผ(pass-through)ํ•˜๋Š” ์—ญํ• ๋งŒ ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค [11, 12]. ๋”ฐ๋ผ์„œ App Router(RSC ํ™˜๊ฒฝ)์—์„œ ํ…Œ๋งˆ๋ฅผ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” React Context ๋Œ€์‹  ์ˆœ์ˆ˜ CSS ์‚ฌ์šฉ์ž ์ง€์ • ์†์„ฑ(CSS ๋ณ€์ˆ˜)๊ณผ `createTheme` ํ—ฌํผ ํ•จ์ˆ˜๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ์— ๋ณ€์ˆ˜๋ฅผ ์ง์ ‘ ์ฐธ์กฐ์‹œํ‚ค๋Š” ์ •์ ์ธ ํ…Œ๋งˆ ๋ฐฉ์‹์œผ๋กœ ์ „ํ™˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค [11-13]. + +## ๐Ÿ”— Knowledge Connections +- **Related Topics:** [[React Server Components]], [[Tailwind CSS]], [[Styled Components]], [[CSS-in-JS]] +- **Projects/Contexts:** [[Next.js 15]] +- **Contradictions/Notes:** ์†Œ์Šค์˜ ํ‰๊ฐ€์— ๋”ฐ๋ฅด๋ฉด, ๊ธฐ์กด Pages Router์—์„œ ์‚ฌ์šฉํ•˜๋˜ ๋ฐฉ์‹์˜ Styled Components/Emotion ๊ธฐ๋ฐ˜ ์•„ํ‚คํ…์ฒ˜๋Š” App Router ์‹œ์Šคํ…œ์œผ๋กœ ๋„˜์–ด์˜ค๋ฉด์„œ ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ(Context ์‚ฌ์šฉ ๋ถˆ๊ฐ€)์™€์˜ ๊ตฌ์กฐ์  ๋ถˆ์ผ์น˜๋ฅผ ๊ฒช์Šต๋‹ˆ๋‹ค [3, 4]. ๊ฒฐ๊ณผ์ ์œผ๋กœ ํ™•์žฅ ๊ฐ€๋Šฅํ•˜๊ณ  ์ตœ์ ํ™”๋œ ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ๊ตฌ์ถ•ํ•˜๋ ค๋ฉด Tailwind CSS ๊ฐ™์€ ์ œ๋กœ ๋Ÿฐํƒ€์ž„(Zero-runtime) ๋˜๋Š” ์œ ํ‹ธ๋ฆฌํ‹ฐ ํผ์ŠคํŠธ ๋ฐฉ์‹์œผ๋กœ ์ „ํ™˜ํ•˜๊ฑฐ๋‚˜ [9, 14], Style Registry์™€ CSS ๋ณ€์ˆ˜๋ฅผ ํ™œ์šฉํ•˜๋Š” ๋ณต์žกํ•œ ์šฐํšŒ ํŒจํ„ด์„ ๊ตฌํ˜„ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค [10, 12]. + +--- +*Last updated: 2026-04-26* \ No newline at end of file diff --git a/00_Raw/Atomic Styling.md b/00_Raw/Atomic Styling.md new file mode 100644 index 00000000..2a753fc4 --- /dev/null +++ b/00_Raw/Atomic Styling.md @@ -0,0 +1,26 @@ +# [[Atomic Styling]] + +## ๐Ÿ“Œ Brief ๋‹จ๋ฝ +Atomic Styling(๋˜๋Š” Atomic CSS)์€ ๋‹จ์ผ ๋ชฉ์ ์„ ๊ฐ€์ง„ ์ž‘๊ณ  ๊ตฌ์ฒด์ ์ธ ์œ ํ‹ธ๋ฆฌํ‹ฐ ํด๋ž˜์Šค(Atomic classes)๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๋งˆํฌ์—…(HTML/JSX) ๋‚ด์—์„œ ์ง์ ‘ UI๋ฅผ ๊ตฌ์„ฑํ•˜๊ณ  ์Šคํƒ€์ผ๋งํ•˜๋Š” ์ ‘๊ทผ ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค [1-3]. Tailwind CSS์™€ ๊ฐ™์€ ํ”„๋ ˆ์ž„์›Œํฌ์—์„œ ์ฃผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ์ด๋ฅธ๋ฐ” '์œ ํ‹ธ๋ฆฌํ‹ฐ ํผ์ŠคํŠธ(Utility-first)' ๋ฐฉ๋ฒ•๋ก ๊ณผ ๋งฅ๋ฝ์„ ๊ฐ™์ด ํ•˜๋ฉฐ, ๊ฐœ๋ฐœ์ž๊ฐ€ ๋ณ„๋„์˜ ์ปค์Šคํ…€ CSS ํŒŒ์ผ์„ ์ž‘์„ฑํ•  ํ•„์š”๋ฅผ ์—†์• ์ค๋‹ˆ๋‹ค [4-6]. ์ด ๋ฐฉ์‹์€ ๋””์ž์ธ ์‹œ์Šคํ…œ์˜ ์ผ๊ด€์„ฑ์„ ์œ ์ง€ํ•˜๋ฉด์„œ๋„ ํ”„๋กœ๋•์…˜ ํ™˜๊ฒฝ์—์„œ ๋งค์šฐ ์ž‘์€ CSS ๋ฒˆ๋“ค ํฌ๊ธฐ์™€ ๋›ฐ์–ด๋‚œ ๋ Œ๋”๋ง ์„ฑ๋Šฅ์„ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์ด ํ•ต์‹ฌ์ž…๋‹ˆ๋‹ค [2, 7, 8]. + +## ๐Ÿ“– Core Content +* **์ž‘๋™ ์›๋ฆฌ (How it works):** + Atomic Styling์€ `flex`, `pt-4`, `text-gray-500`, `rounded-lg`์™€ ๊ฐ™์ด ํ•˜๋‚˜์˜ CSS ์†์„ฑ์ด๋‚˜ ์•„์ฃผ ์ž‘์€ ๋‹จ์œ„์˜ ์‹œ๊ฐ์  ์†์„ฑ๋งŒ์„ ๋‚˜ํƒ€๋‚ด๋Š” ์ €์ˆ˜์ค€(low-level) ์œ ํ‹ธ๋ฆฌํ‹ฐ ํด๋ž˜์Šค๋“ค์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค [2-4]. ๊ฐœ๋ฐœ์ž๋Š” ๋ณ„๋„์˜ CSS ํŒŒ์ผ์— ํด๋ž˜์Šค ์ด๋ฆ„์„ ์ง“๊ณ  ๊ทœ์น™์„ ์ž‘์„ฑํ•˜๋Š” ๋Œ€์‹ , HTML์ด๋‚˜ React JSX ๋งˆํฌ์—… ๋‚ด์— ์ด ํด๋ž˜์Šค๋“ค์„ ์ง์ ‘ ์กฐํ•ฉ(compose)ํ•˜์—ฌ ์›ํ•˜๋Š” ๋””์ž์ธ์„ ๊ตฌ์ถ•ํ•ฉ๋‹ˆ๋‹ค [2, 3, 5]. + +* **์ฃผ์š” ์žฅ์  (Advantages):** + * **๊ฐœ๋ฐœ ์†๋„ ๋ฐ ์ผ๊ด€์„ฑ:** HTML/JSX์™€ CSS ํŒŒ์ผ ๊ฐ„์˜ ์ปจํ…์ŠคํŠธ ์ „ํ™˜ ์—†์ด ๋ฐ”๋กœ ์Šคํƒ€์ผ๋ง์„ ํ•  ์ˆ˜ ์žˆ์–ด ๋น ๋ฅธ ํ”„๋กœํ† ํƒ€์ดํ•‘๊ณผ ๊ฐœ๋ฐœ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค [2, 5, 9]. ๋˜ํ•œ ์‚ฌ์ „์— ์ •์˜๋œ ๋””์ž์ธ ํ† ํฐ(๊ฐ„๊ฒฉ, ์ƒ‰์ƒ, ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ ๋“ฑ)์„ ๊ฐ•์ œํ•˜๋ฏ€๋กœ ํ”„๋กœ์ ํŠธ ์ „๋ฐ˜์—์„œ ์‹œ๊ฐ์  ์ผ๊ด€์„ฑ์„ ์œ ์ง€ํ•˜๊ธฐ ์‰ฝ์Šต๋‹ˆ๋‹ค [7, 9, 10]. + * **์„ฑ๋Šฅ ๋ฐ ์ž‘์€ ๋ฒˆ๋“ค ํฌ๊ธฐ:** Tailwind CSS์™€ ๊ฐ™์€ ๋„๊ตฌ๋Š” ๋นŒ๋“œ ์‹œ ํ”„๋กœ์ ํŠธ๋ฅผ ์Šค์บ”ํ•˜์—ฌ ์‹ค์ œ๋กœ ์‚ฌ์šฉ๋œ ํด๋ž˜์Šค๋งŒ ์ตœ์ข… CSS์— ํฌํ•จ์‹œํ‚ค๊ณ  ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ์Šคํƒ€์ผ์€ ์ œ๊ฑฐ(Purge)ํ•ฉ๋‹ˆ๋‹ค [7, 8]. ์ด๋ฅผ ํ†ตํ•ด ํ”„๋กœ๋•์…˜ CSS ๋ฒˆ๋“ค ํฌ๊ธฐ๋ฅผ 5~20kb ์ˆ˜์ค€์œผ๋กœ ๋งค์šฐ ์ž‘๊ฒŒ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋Ÿฐํƒ€์ž„์— JavaScript๋กœ ์Šคํƒ€์ผ์„ ์ฃผ์ž…ํ•˜๋Š” CSS-in-JS์™€ ๋‹ฌ๋ฆฌ ๋Ÿฐํƒ€์ž„ ์˜ค๋ฒ„ํ—ค๋“œ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค [7, 11-13]. + * **์œ ์ง€๋ณด์ˆ˜์„ฑ ํ–ฅ์ƒ:** React์—์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ญ์ œํ•  ๋•Œ ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ ๋งˆํฌ์—…์— ๊ฒฐํ•ฉ๋œ ์Šคํƒ€์ผ๋„ ํ•จ๊ป˜ ์‚ฌ๋ผ์ง€๋ฏ€๋กœ, ์ฝ”๋“œ๋ฒ ์ด์Šค์— ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” '๊ณ ์•„(orphaned)' CSS๊ฐ€ ๋ˆ„์ ๋˜๋Š” ๊ฒƒ์„ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค [7, 13]. + +* **๋‹จ์  ๋ฐ ํ•œ๊ณ„ (Disadvantages and Limitations):** + * **์žฅํ™ฉํ•œ ๋งˆํฌ์—… (Verbose Markup):** ์Šคํƒ€์ผ์„ ๋งˆํฌ์—…์— ์ง์ ‘ ์ ์šฉํ•˜๋ฏ€๋กœ, ๋ณต์žกํ•œ ์ปดํฌ๋„ŒํŠธ์˜ ๊ฒฝ์šฐ `className` ๋ฌธ์ž์—ด์ด ๋งค์šฐ ๊ธธ์–ด์ ธ ์ฝ”๋“œ ๊ฐ€๋…์„ฑ์ด ๋–จ์–ด์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [7, 14]. + * **ํ•™์Šต ๊ณก์„ :** ๋ฐฉ๋Œ€ํ•œ ์œ ํ‹ธ๋ฆฌํ‹ฐ ํด๋ž˜์Šค ์ด๋ฆ„๊ณผ ๊ตฌ์„ฑ ๋ฐฉ์‹์„ ์ˆ™์ง€ํ•ด์•ผ ํ•˜๋ฏ€๋กœ ์ดˆ๊ธฐ ํ•™์Šต์— ์‹œ๊ฐ„์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค [14, 15]. + * **์ปดํฌ๋„ŒํŠธ ์บก์Šํ™”์˜ ๋ถ€์žฌ:** ์ˆœ์ˆ˜ํ•˜๊ฒŒ Atomic ํด๋ž˜์Šค๋งŒ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ ์ปดํฌ๋„ŒํŠธ ์ˆ˜์ค€์˜ ์Šคํƒ€์ผ ์บก์Šํ™”๊ฐ€ ๋ถ€์กฑํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ, ๋Œ€๊ทœ๋ชจ ์•ฑ์—์„œ๋Š” ๋ฐ˜๋ณต๋˜๋Š” ์œ ํ‹ธ๋ฆฌํ‹ฐ ํŒจํ„ด์„ React ์ปดํฌ๋„ŒํŠธ๋กœ ์ถ”์ถœํ•˜์—ฌ ์žฌ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹์ด ํ•„์ˆ˜์ ์œผ๋กœ ๋™๋ฐ˜๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค [14, 16, 17]. + +## ๐Ÿ”— Knowledge Connections +- **Related Topics:** [[Tailwind CSS]], [[CSS-in-JS]], [[Utility-first CSS]], [[Atomic Design]] +- **Projects/Contexts:** [[Next.js App Router]], [[Scalable Design Systems]], [[Component Library Architecture]] +- **Contradictions/Notes:** ์†Œ์Šค [7]์™€ [14]๋Š” Atomic Styling์ด ๋งˆํฌ์—…์„ ์žฅํ™ฉ(Verbose)ํ•˜๊ฒŒ ๋งŒ๋“ค์–ด ๊ฐ€๋…์„ฑ์„ ํ•ด์น  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ง€์ ํ•˜์ง€๋งŒ, ์†Œ์Šค [16]์€ ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ๊ทน๋ณตํ•˜๊ธฐ ์œ„ํ•ด `@apply`๋ฅผ ๋‚จ์šฉํ•˜๊ธฐ๋ณด๋‹ค๋Š” ํŒจํ„ด์„ React ์ปดํฌ๋„ŒํŠธ๋กœ ์ถ”์ถœ(Component Abstraction)ํ•  ๊ฒƒ์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค. ์„ฑ๋Šฅ ์ธก๋ฉด์—์„œ๋Š” ๋Ÿฐํƒ€์ž„ ์ฃผ์ž… ๋ฐฉ์‹์˜ Styled Components๋ณด๋‹ค Atomic CSS ๋ฐฉ์‹(Tailwind)์ด ์›”๋“ฑํžˆ ์œ ๋ฆฌํ•˜๋‹ค๊ณ  ์—ฌ๋Ÿฌ ์†Œ์Šค์—์„œ ๊ณตํ†ต์œผ๋กœ ์ฃผ์žฅํ•ฉ๋‹ˆ๋‹ค [12, 13]. + +--- +*Last updated: 2026-04-26* \ No newline at end of file diff --git a/00_Raw/Base Web.md b/00_Raw/Base Web.md new file mode 100644 index 00000000..9db99b9d --- /dev/null +++ b/00_Raw/Base Web.md @@ -0,0 +1,18 @@ +# [[Base Web]] + +## ๐Ÿ“Œ Brief Summary +Base Web์€ ์ˆ˜๋งŽ์€ ๋‚ด๋ถ€ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ผ๊ด€์„ฑ์„ ์œ ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ์šฐ๋ฒ„(Uber)์—์„œ ๊ฐœ๋ฐœํ•˜๊ณ  2018๋…„์— ์˜คํ”ˆ์†Œ์Šค๋กœ ๊ณต๊ฐœํ•œ React ์ปดํฌ๋„ŒํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด์ž ๋””์ž์ธ ์‹œ์Šคํ…œ์ž…๋‹ˆ๋‹ค [1-3]. ๊ธฐ๊ธฐ์— ๊ตฌ์• ๋ฐ›์ง€ ์•Š๋Š” ๋ฒ”์šฉ์ ์ธ ๊ธฐ๋ฐ˜์„ ์ œ๊ณตํ•˜์—ฌ, ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋“ค์ด ๋ฐ˜๋ณต์ ์ธ UI ๊ตฌ์ถ• ์ž‘์—…์„ ํ”ผํ•˜๊ณ  ์•ˆ์ •์ ์ด๋ฉฐ ์ ‘๊ทผ์„ฑ์ด ๋›ฐ์–ด๋‚œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋น ๋ฅด๊ณ  ์‰ฝ๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋„๋ก ๋•์Šต๋‹ˆ๋‹ค [2]. ํŠนํžˆ ๋ณต์žกํ•œ ์ปดํฌ๋„ŒํŠธ์˜ ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ์‹œ ๋ฐœ์ƒํ•˜๋Š” ์†์„ฑ(prop) ๋น„๋Œ€ํ™” ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๊ณ ์œ ํ•œ '์˜ค๋ฒ„๋ผ์ด๋“œ(Overrides)' ํŒจํ„ด์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ํ•ต์‹ฌ์ ์ธ ํŠน์ง•์ž…๋‹ˆ๋‹ค [4, 5]. + +## ๐Ÿ“– Core Content +- **๋„์ž… ๋ฐฐ๊ฒฝ ๋ฐ ํšจ์œจ์„ฑ ์ฆ๋Œ€**: ์šฐ๋ฒ„๋Š” ์‚ฌ๋‚ด ์ˆ˜๋ฐฑ ๊ฐœ์˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์šด์˜ํ•˜๋ฉด์„œ ๋ฐœ์ƒํ•˜๋Š” ๊ฐœ๋ฐœ ๋ฆฌ์†Œ์Šค ๋‚ญ๋น„์™€ UI ๋ถˆ์ผ์น˜๋ฅผ ์ค„์ด๊ณ ์ž ๊ณตํ†ต๋œ ๋””์ž์ธ ์–ธ์–ด๋ฅผ ๋‹ด์€ Base Web์„ ๊ตฌ์ถ•ํ–ˆ์Šต๋‹ˆ๋‹ค [1, 6]. ๋‚ด๋ถ€ ๋ฐ์ดํ„ฐ์— ๋”ฐ๋ฅด๋ฉด, ์ปค์Šคํ…€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ตฌ์ถ•ํ•˜๋Š” ๊ฒƒ์— ๋น„ํ•ด ๊ฐœ๋ฐœ ์†๋„๋Š” 3๋ฐฐ ๋น ๋ฅด๊ณ , ์‹œ๊ฐ์  ๋ถˆ์ผ์น˜๋Š” 4๋ฐฐ ๊ฐ์†Œํ•˜๋ฉฐ, ์ฝ”๋“œ ์–‘์„ 50%๋‚˜ ์ค„์—ฌ์ฃผ๋Š” ๊ฐ•๋ ฅํ•œ ์ƒ์‚ฐ์„ฑ ํ–ฅ์ƒ ํšจ๊ณผ๋ฅผ ๋ณด์˜€์Šต๋‹ˆ๋‹ค [7]. +- **์‹ ๋ขฐ์„ฑ(Reliability) ๋ฐ ์ ‘๊ทผ์„ฑ(Accessibility) ๋ณด์žฅ**: ๋ชจ๋“  React ์ปดํฌ๋„ŒํŠธ์— ์‹œ๊ฐ์  ํšŒ๊ท€(visual regression) ํ…Œ์ŠคํŠธ๋ฅผ ๊ฑฐ์น˜๋ฉฐ, Puppeteer๋ฅผ ํ™œ์šฉํ•œ ์ข…๋‹จ ๊ฐ„(E2E) ํ…Œ์ŠคํŠธ๋ฅผ ์ˆ˜ํ–‰ํ•˜์—ฌ ํ”ฝ์…€ ๋‹จ์œ„์˜ ์ •ํ™•์„ฑ๊ณผ ๋ฒ„๊ทธ ์—†๋Š” ํ™˜๊ฒฝ์„ ๋ณด์žฅํ•ฉ๋‹ˆ๋‹ค [8]. ๋˜ํ•œ ํ‚ค๋ณด๋“œ ํƒ์ƒ‰๊ณผ ํ™”๋ฉด ํŒ๋…๊ธฐ(screen reader), ARIA ์—ญํ• ์„ ์™„๋ฒฝํžˆ ์ง€์›ํ•˜์—ฌ ์ ‘๊ทผ์„ฑ ๊ธฐ์ค€์„ ์ถฉ์กฑํ•ฉ๋‹ˆ๋‹ค [9, 10]. ๋ชจ๋ฐ”์ผ ํ™˜๊ฒฝ ๋ฐ ๋„คํŠธ์›Œํฌ๊ฐ€ ์—ด์•…ํ•œ ์‚ฌ์šฉ์ž๋ฅผ ์œ„ํ•ด Styletron์„ ์ ์šฉ, ์•„ํ† ๋ฏน(atomic) ์Šคํƒ€์ผ๋ง์œผ๋กœ ๋ฒˆ๋“ค ํฌ๊ธฐ๋ฅผ ์ตœ์ ํ™”ํ•ฉ๋‹ˆ๋‹ค [9]. +- **ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ์•„ํ‚คํ…์ฒ˜: ์˜ค๋ฒ„๋ผ์ด๋“œ(Overrides) ํŒจํ„ด**: ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ UI ์ปดํฌ๋„ŒํŠธ ์„ค๊ณ„ ์‹œ ๋ฌด์ˆ˜ํžˆ ๋งŽ์€ ์†์„ฑ์ด ๋ˆ„์ ๋˜๋Š” "prop soup" ํ˜„์ƒ์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด Base Web์˜ ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ๋Š” `overrides` prop์„ ๋…ธ์ถœํ•ฉ๋‹ˆ๋‹ค [5, 11]. ์ด ํŒจํ„ด์„ ํ†ตํ•ด ๊ฐœ๋ฐœ์ž๋Š” ์ƒˆ๋กœ์šด ์†์„ฑ์„ ์ถ”๊ฐ€ํ•˜์ง€ ์•Š๊ณ ๋„ ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์˜ ํŠน์ • ํ•˜์œ„ ์š”์†Œ(sub-element)์— ์ปค์Šคํ…€ ์†์„ฑ์ด๋‚˜ ์Šคํƒ€์ผ์„ ์ฃผ์ž…ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์‹ฌ์ง€์–ด ๋‚ด๋ถ€ ์ปดํฌ๋„ŒํŠธ ์ž์ฒด๋ฅผ ์™„์ „ํžˆ ๋‹ค๋ฅธ ํ”„๋ ˆ์  ํ…Œ์ด์…˜ ์ปดํฌ๋„ŒํŠธ๋กœ ๊ต์ฒดํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค [12-14]. ์ด๋Š” ์ตœ์ƒ์œ„ API๋ฅผ ๊น”๋”ํ•˜๊ฒŒ ์œ ์ง€ํ•˜๋ฉด์„œ๋„ ๊ณ ๋„์˜ ์ปค์Šคํ„ฐ๋งˆ์ด์ง•์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค [12]. +- **๋””์ž์ธ ์‹œ์Šคํ…œ ๊ด€์ธก์„ฑ(Observability)**: ์šฐ๋ฒ„๋Š” ๋Œ€๊ทœ๋ชจ๋กœ ๋””์ž์ธ ์‹œ์Šคํ…œ์˜ ์ฑ„ํƒ์„ ์žฅ๋ คํ•˜๊ธฐ ์œ„ํ•ด 'Base Counter'๋ผ๋Š” ๋„๊ตฌ๋ฅผ ๋„์ž…ํ–ˆ์Šต๋‹ˆ๋‹ค [15, 16]. ์ด๋Š” ํ™”๋ฉด์˜ ๋ทฐ ํŠธ๋ฆฌ๋ฅผ ๋ถ„์„ํ•˜์—ฌ Base ์ปดํฌ๋„ŒํŠธ์™€ ์ผํšŒ์„ฑ ์ปค์Šคํ…€ ์ปดํฌ๋„ŒํŠธ์˜ ์‚ฌ์šฉ ๋น„์œจ์„ ๊ฒฐ์ •๋ก ์ ์œผ๋กœ ์ธก์ •ํ•˜๋ฉฐ, ๋””์ž์ธ ํ’ˆ์งˆ ์ง€ํ‘œ๋ฅผ ์—”์ง€๋‹ˆ์–ด๋ง ์ง€ํ‘œ์™€ ๋™์ผํ•œ ์ˆ˜์ค€์œผ๋กœ ๊ด€๋ฆฌํ•˜์—ฌ ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ํ”„๋ก ํŠธ์—”๋“œ ๊ด€๋ฆฌ๋ฅผ ์‹คํ˜„ํ•ฉ๋‹ˆ๋‹ค [15, 17, 18]. + +## ๐Ÿ”— Knowledge Connections +- **Related Topics:** [[Design Systems]], [[Reusable UI Components]], [[Overrides Pattern]], [[Accessibility (A11y)]], [[Styletron]] +- **Projects/Contexts:** [[Uber's Internal Web Applications]], [[Scalable Frontend Architecture]] +- **Contradictions/Notes:** ์ปดํฌ๋„ŒํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๊ตฌ์ถ• ์‹œ ํ™•์žฅ์„ฑ์„ ํ™•๋ณดํ•˜๋Š” ๋ฐฉ์‹์— ๊ด€ํ•˜์—ฌ, ์†Œ์Šค์—์„œ๋Š” Base Web์ด ๋ณต์žกํ•œ ์—ฃ์ง€ ์ผ€์ด์Šค๋ฅผ ๋‹ค๋ฃจ๊ธฐ ์œ„ํ•ด [[Overrides Pattern]]์„ ์‚ฌ์šฉํ•˜๋Š” ๋Œ€ํ‘œ์  ์‚ฌ๋ก€๋กœ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค [5]. ์ด์™€ ๋ณ‘ํ–‰ํ•˜์—ฌ, ์ตœ๊ทผ React ์ƒํƒœ๊ณ„์—์„œ๋Š” ์Šคํƒ€์ผ๋ง๊ณผ UI ๋กœ์ง์„ ์™„์ „ํžˆ ๋ถ„๋ฆฌํ•˜๋Š” [[Headless Components]]๋‚˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์—ฌ๋Ÿฌ ํ•˜์œ„ ๊ตฌ์กฐ๋กœ ์ชผ๊ฐœ์–ด ์ƒํƒœ๋ฅผ ๊ณต์œ ํ•˜๋Š” [[Compound Components]] ํŒจํ„ด๋„ ๋›ฐ์–ด๋‚œ ์žฌ์‚ฌ์šฉ์„ฑ ๋Œ€์•ˆ์œผ๋กœ ํ•จ๊ป˜ ์ œ์‹œ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค [19-21]. + +--- +*Last updated: 2026-04-26* \ No newline at end of file diff --git a/00_Raw/CLS (Cumulative Layout Shift).md b/00_Raw/CLS (Cumulative Layout Shift).md new file mode 100644 index 00000000..f12bf768 --- /dev/null +++ b/00_Raw/CLS (Cumulative Layout Shift).md @@ -0,0 +1,35 @@ +# [[CLS (Cumulative Layout Shift)]] + +## ๐Ÿ“Œ Brief Summary +CLS(Cumulative Layout Shift)๋Š” ์›นํŽ˜์ด์ง€๊ฐ€ ๋กœ๋“œ๋˜๋Š” ๋™์•ˆ ๋ฐœ์ƒํ•˜๋Š” ์˜ˆ๊ธฐ์น˜ ์•Š์€ ๋ ˆ์ด์•„์›ƒ ์ด๋™์˜ ์ด๋Ÿ‰์„ ์ธก์ •ํ•˜์—ฌ ํŽ˜์ด์ง€์˜ ์‹œ๊ฐ์  ์•ˆ์ •์„ฑ์„ ํ‰๊ฐ€ํ•˜๋Š” Core Web Vitals์˜ ํ•ต์‹ฌ ์ง€ํ‘œ์ž…๋‹ˆ๋‹ค. ์ด ์ง€ํ‘œ๋Š” ํ…์ŠคํŠธ๋‚˜ ๋ฒ„ํŠผ์ด ๊ฐ‘์ž๊ธฐ ์›€์ง์—ฌ ์‚ฌ์šฉ์ž๊ฐ€ ์ž˜๋ชป๋œ ํด๋ฆญ์„ ํ•˜๊ฑฐ๋‚˜ ๋ฐฉํ•ด๋ฐ›๋Š” ๊ฒฝํ—˜์„ ๋ฐฉ์ง€ํ•˜๋Š” ๋ฐ ์ค‘์ ์„ ๋‘ก๋‹ˆ๋‹ค. 2025๋…„ ๊ธฐ์ค€, CLS๋Š” ์‚ฌ์šฉ์ž ๊ฒฝํ—˜(UX)๊ณผ ๊ฒ€์ƒ‰ ์—”์ง„ ์ˆœ์œ„(SEO)๋ฅผ ๊ฒฐ์ •์ง“๋Š” ์ค‘์š”ํ•œ ์š”์†Œ๋กœ ํ‰๊ฐ€๋˜๋ฉฐ, ์šฐ์ˆ˜ํ•œ ์›น ์„ฑ๋Šฅ์„ ์œ„ํ•ด ํ•„์ˆ˜์ ์œผ๋กœ ์ตœ์ ํ™”ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. + +## ๐Ÿ“– ๊ธฐCore Content +**CLS์˜ ์ค‘์š”์„ฑ ๋ฐ ๋น„์ฆˆ๋‹ˆ์Šค ์˜ํ–ฅ** +* CLS๋Š” ์‚ฌ์šฉ์ž์˜ ํ™”๋ฉด ์‹œ๊ฐ์  ์•ˆ์ •์„ฑ์„ ํ‰๊ฐ€ํ•˜๋ฉฐ, ์›น ์‚ฌ์šฉ์ž ์ค‘ 70%๊ฐ€ ์‹œ๊ฐ์  ์•ˆ์ •์„ฑ์„ ๋ธŒ๋žœ๋“œ ์‹ ๋ขฐ ๊ตฌ์ถ•์˜ ํ•ต์‹ฌ ์š”์†Œ๋กœ ๊ผฝ์Šต๋‹ˆ๋‹ค [1]. +* ํŽ˜์ด์ง€๊ฐ€ ๋ถˆ์•ˆ์ •ํ•˜์—ฌ ๋ฐœ์ƒํ•˜๋Š” ์˜ˆ๊ธฐ์น˜ ๋ชปํ•œ ๋ ˆ์ด์•„์›ƒ ์ด๋™์€ ์‚ฌ์šฉ์ž์˜ ๋ถˆ๋งŒ์„ ์•ผ๊ธฐํ•˜๊ณ  ์ดํƒˆ๋ฅ ์„ 15%๊นŒ์ง€ ์ฆ๊ฐ€์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [2-5]. +* CLS ์ ์ˆ˜๋ฅผ 0.25์—์„œ 0.05 ์ˆ˜์ค€์œผ๋กœ ๊ฐœ์„ ํ•˜๋ฉด ์ „ํ™˜์œจ์ด ํ‰๊ท  8% ์ƒ์Šนํ•˜๊ณ , ์ดํƒˆ๋ฅ ์€ 10% ๊ฐ์†Œํ•˜๋ฉฐ, ์ˆ˜์ต์ด 6% ์ฆ๊ฐ€ํ•˜๋Š” ์‹ค์งˆ์ ์ธ ๋น„์ฆˆ๋‹ˆ์Šค ํšจ๊ณผ๋ฅผ ๊ธฐ๋Œ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [6]. + +**2025๋…„ ๊ธฐ์ค€ CLS ์ž„๊ณ„๊ฐ’** +* ๊ธฐ์กด์˜ '์šฐ์ˆ˜(Good)' ๊ธฐ์ค€์€ 0.1 ๋ฏธ๋งŒ์ด์—ˆ์œผ๋‚˜, 2025๋…„ Google์˜ Core Web Vitals ์—…๋ฐ์ดํŠธ์— ๋”ฐ๋ผ 0.08 ๋ฏธ๋งŒ์œผ๋กœ 25% ๋” ์—„๊ฒฉํ•ด์กŒ์Šต๋‹ˆ๋‹ค [7, 8]. +* ์‹œ๊ฐ์  ์•ˆ์ •์„ฑ์„ ์œ„ํ•ด ๋ชจ๋“  ์ตœ์ ํ™” ์ž‘์—… ํ›„ ์ตœ์ข… CLS ์ˆ˜์น˜๋ฅผ 0.08 ๋ฏธ๋งŒ์œผ๋กœ ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์ด 2025๋…„์˜ ํ•„์ˆ˜ ํ‘œ์ค€์ž…๋‹ˆ๋‹ค [9]. + +**CLS๋ฅผ ์•…ํ™”์‹œํ‚ค๋Š” ์ฃผ์š” ์›์ธ** +* **ํฌ๊ธฐ๊ฐ€ ์ง€์ •๋˜์ง€ ์•Š์€ ๋ฏธ๋””์–ด:** ์ด๋ฏธ์ง€๋‚˜ ๋น„๋””์˜ค์— ๋ช…์‹œ์ ์ธ ํฌ๊ธฐ๊ฐ€ ์—†์œผ๋ฉด ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๊ณต๊ฐ„์„ ํ™•๋ณดํ•˜์ง€ ๋ชปํ•ด ๋กœ๋”ฉ ์‹œ ์ฝ˜ํ…์ธ ๊ฐ€ ๋ฐ€๋ ค๋‚ฉ๋‹ˆ๋‹ค [4, 5, 10]. +* **๋™์  ์ฝ˜ํ…์ธ  ์‚ฝ์ž…:** ๋ฐฐ๋„ˆ, ๊ด‘๊ณ , ์•Œ๋ฆผ ๋“ฑ ๊ธฐ์กด ์ฝ˜ํ…์ธ ์˜ ์œ„์ชฝ์— ์‚ฌ์šฉ์ž์˜ ์ƒํ˜ธ์ž‘์šฉ ์—†์ด ๋™์ ์œผ๋กœ ์‚ฝ์ž…๋˜๋Š” ์š”์†Œ๊ฐ€ ๋ ˆ์ด์•„์›ƒ์„ ๋ฐ€์–ด๋ƒ…๋‹ˆ๋‹ค [4, 5, 10]. +* **์›น ํฐํŠธ์˜ ์ง€์—ฐ ๋กœ๋”ฉ:** ํฐํŠธ๊ฐ€ ๋Šฆ๊ฒŒ ๋กœ๋“œ๋˜๋ฉด์„œ ๋ฐœ์ƒํ•˜๋Š” FOIT(Flash of Invisible Text)๋‚˜ FOUT(Flash of Unstyled Text) ํ˜„์ƒ์ด ํ…์ŠคํŠธ ํฌ๊ธฐ์™€ ์ค„๋ฐ”๊ฟˆ์„ ๋ณ€๊ฒฝ์‹œ์ผœ ๋ ˆ์ด์•„์›ƒ์„ ๋’คํ‹€๋ฆฌ๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค [4, 5, 10]. +* **์ž˜๋ชป๋œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์†์„ฑ ์‚ฌ์šฉ:** `transform`์ด ์•„๋‹Œ `top`, `left`, `width`, `height` ๊ฐ™์€ ๋ ˆ์ด์•„์›ƒ ์†์„ฑ์„ ๋ณ€๊ฒฝํ•˜๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜์€ ๋ Œ๋”๋ง ํŠธ๋ฆฌ์˜ ์žฌ๊ณ„์‚ฐ์„ ์œ ๋ฐœํ•˜์—ฌ ํ™”๋ฉด์„ ํ”๋“ค๋ฆฌ๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค [10, 11]. + +**ํšจ๊ณผ์ ์ธ CLS ์ตœ์ ํ™” ๋ฐ ๊ฐœ์„  ์ „๋žต** +* **๋ช…์‹œ์  ํฌ๊ธฐ ๋ฐ ๋น„์œจ ์ง€์ •:** ๋ชจ๋“  ์ด๋ฏธ์ง€, ๋น„๋””์˜ค ์š”์†Œ์— `width`, `height` ์†์„ฑ์„ ๋ถ€์—ฌํ•˜๊ฑฐ๋‚˜ CSS์˜ `aspect-ratio`๋ฅผ ์„ค์ •ํ•˜์—ฌ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋ Œ๋”๋ง ์ „ ๊ณต๊ฐ„์„ ํ• ๋‹นํ•˜๋„๋ก ํ•ฉ๋‹ˆ๋‹ค [4, 8, 9, 12, 13]. +* **๋™์  ์š”์†Œ์˜ ๊ณต๊ฐ„ ์˜ˆ์•ฝ(Placeholder):** ๊ด‘๊ณ  ์Šฌ๋กฏ, ์ž„๋ฒ ๋“œ ์ฝ˜ํ…์ธ , ๋™์  ๋Œ“๊ธ€/๋ฆฌ๋ทฐ ์˜์—ญ์—๋Š” `min-height`๋ฅผ ํ™œ์šฉํ•œ ํ”Œ๋ ˆ์ด์Šคํ™€๋”๋ฅผ ์ ์šฉํ•˜์—ฌ ์ฝ˜ํ…์ธ  ๋กœ๋”ฉ ์ „ํ›„์˜ ๋ ˆ์ด์•„์›ƒ ๋ณ€๊ฒฝ์„ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค [9, 12-14]. +* **CSS `transform` ํ™œ์šฉ:** ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๊ตฌํ˜„ํ•  ๋•Œ๋Š” ๋ ˆ์ด์•„์›ƒ ๋ณ€๊ฒฝ์— ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๊ณ  GPU ๊ฐ€์†์„ ํ™œ์šฉํ•˜๋Š” CSS `transform`(์˜ˆ: `translateX`)์„ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค [8, 11, 15]. +* **ํฐํŠธ ๋กœ๋”ฉ ์ตœ์ ํ™”:** ์›น ํฐํŠธ ์‚ฌ์šฉ ์‹œ CSS์— `font-display: swap` ๋˜๋Š” `font-display: optional`์„ ์„ค์ •ํ•˜์—ฌ ํ…์ŠคํŠธ์˜ ๊ตฌ์กฐ์  ๋ณ€๋™์„ ์ตœ์†Œํ™”ํ•ฉ๋‹ˆ๋‹ค [4, 8, 9, 13, 15]. +* **๋ ˆ์ด์•„์›ƒ ๊ฒฉ๋ฆฌ(CSS Containment):** CSS์˜ `contain: layout style paint` ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ ํŠน์ • ๋™์  ์œ„์ ฏ์ด๋‚˜ ์นด๋“œ์˜ ๋ ˆ์ด์•„์›ƒ ๋ณ€๊ฒฝ์ด ๋ถ€๋ชจ๋‚˜ ํ˜•์ œ ์š”์†Œ์— ํŒŒ๊ธ‰๋˜์ง€ ์•Š๋„๋ก ์ฐจ๋‹จํ•ฉ๋‹ˆ๋‹ค [14]. + +## ๐Ÿ”— Knowledge Connections +- **Related Topics:** [[Core Web Vitals]], [[SEO (Search Engine Optimization)]], [[LCP (Largest Contentful Paint)]], [[INP (Interaction to Next Paint)]], [[Web Performance Optimization]] +- **Projects/Contexts:** [[Google Page Experience 2025 Update]], [[Frontend Performance Checklist]] +- **Contradictions/Notes:** ๋งŽ์€ ์†Œ์Šค์—์„œ ์—ฌ์ „ํžˆ ์ผ๋ฐ˜์ ์ธ CLS์˜ ์šฐ์ˆ˜(Good) ์ž„๊ณ„๊ฐ’์„ 0.1 ๋ฏธ๋งŒ์œผ๋กœ ์–ธ๊ธ‰ํ•˜๊ณ  ์žˆ์œผ๋‚˜ [3, 4, 16, 17], 2025๋…„ Google ์—…๋ฐ์ดํŠธ๋ฅผ ์„ธ๋ฐ€ํ•˜๊ฒŒ ๋‹ค๋ฃจ๋Š” ์ตœ์‹  ๋ฌธ์„œ์—์„œ๋Š” ์ƒˆ๋กœ์šด ์ž„๊ณ„๊ฐ’์ด 0.08 ๋ฏธ๋งŒ์œผ๋กœ ํ•˜ํ–ฅ ์กฐ์ •(25% ๋” ์—„๊ฒฉํ•ด์ง)๋˜์—ˆ๋‹ค๊ณ  ๋ช…ํ™•ํžˆ ๊ฐ•์กฐํ•ฉ๋‹ˆ๋‹ค [7, 8]. + +--- +*Last updated: 2026-04-26* \ No newline at end of file diff --git a/00_Raw/Client-Side Rendering (CSR).md b/00_Raw/Client-Side Rendering (CSR).md new file mode 100644 index 00000000..fd0bf1f2 --- /dev/null +++ b/00_Raw/Client-Side Rendering (CSR).md @@ -0,0 +1,20 @@ +# [[Client-Side Rendering (CSR)]] + +## ๐Ÿ“Œ Brief Summary +Client-Side Rendering (CSR)์€ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ์ตœ์†Œํ•œ์˜ ๋นˆ HTML ๊ป๋ฐ๊ธฐ์™€ JavaScript ๋ฒˆ๋“ค์„ ์ „๋‹ฌ๋ฐ›์€ ํ›„, ํด๋ผ์ด์–ธํŠธ ํ™˜๊ฒฝ์—์„œ JavaScript๋ฅผ ์‹คํ–‰ํ•˜์—ฌ ๋™์ ์œผ๋กœ UI์™€ ์ฝ˜ํ…์ธ ๋ฅผ ๋ Œ๋”๋งํ•˜๋Š” ์›น ์•„ํ‚คํ…์ฒ˜ ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค [1]. ์ „์ฒด ํŽ˜์ด์ง€ ์ƒˆ๋กœ๊ณ ์นจ ์—†์ด ๋น ๋ฅด๊ณ  ๋งค๋„๋Ÿฌ์šด ๋‹จ์ผ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜(SPA)์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์–ด ์ƒํ˜ธ์ž‘์šฉ์ด ์žฆ์€ ์„œ๋น„์Šค์— ์ ํ•ฉํ•˜์ง€๋งŒ, ์ดˆ๊ธฐ ๋กœ๋“œ ์†๋„์™€ ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”(SEO) ์ธก๋ฉด์—์„œ๋Š” ์น˜๋ช…์ ์ธ ํ•œ๊ณ„์™€ ์ทจ์•ฝ์ ์„ ๊ฐ€์ง‘๋‹ˆ๋‹ค [2-4]. + +## ๐Ÿ“– Core Content +- **์ž‘๋™ ๋ฉ”์ปค๋‹ˆ์ฆ˜:** ์‚ฌ์šฉ์ž๊ฐ€ ์›นํŽ˜์ด์ง€๋ฅผ ์š”์ฒญํ•˜๋ฉด ์„œ๋ฒ„๋Š” ์ฝ˜ํ…์ธ ๊ฐ€ ๊ฑฐ์˜ ์—†๋Š” ๋นˆ HTML ๋ฌธ์„œ(์˜ˆ: `
`)๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค [5, 6]. ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํ•ด๋‹น HTML์— ํฌํ•จ๋œ JavaScript ํŒŒ์ผ์„ ๋ชจ๋‘ ๋‹ค์šด๋กœ๋“œํ•˜๊ณ  ๊ตฌ๋ฌธ ๋ถ„์„ ๋ฐ ์‹คํ–‰์„ ์™„๋ฃŒํ•œ ํ›„์—์•ผ ๋น„๋กœ์†Œ ์‹ค์ œ UI์™€ ์ฝ˜ํ…์ธ ๊ฐ€ ํ™”๋ฉด์— ๊ทธ๋ ค์ง‘๋‹ˆ๋‹ค [1, 6, 7]. +- **์ฃผ์š” ์žฅ์ :** ์„œ๋ฒ„์˜ ๋ Œ๋”๋ง ์—ฐ์‚ฐ ๋ถ€๋‹ด์„ ๋ธŒ๋ผ์šฐ์ €๋กœ ๋ถ„์‚ฐ์‹œ์ผœ ์„œ๋ฒ„ ๋ถ€ํ•˜๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [3]. ํŽ˜์ด์ง€๋ฅผ ๋„˜๊ธธ ๋•Œ๋งˆ๋‹ค ์ „์ฒด๋ฅผ ์ƒˆ๋กœ๊ณ ์นจํ•  ํ•„์š” ์—†์ด ๊ณ ๋„๋กœ ์ƒํ˜ธ์ž‘์šฉ์ ์ธ ์•ฑ ์œ ์‚ฌ(App-like) ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์ œ๊ณตํ•˜๋ฏ€๋กœ, ๊ฒ€์ƒ‰ ๋…ธ์ถœ์ด ํ•„์š” ์—†๋Š” ์‚ฌ์šฉ์ž ๋Œ€์‹œ๋ณด๋“œ, ๊ด€๋ฆฌ์ž ํŒจ๋„, ๋‚ด๋ถ€ ๋„๊ตฌ ๋“ฑ์˜ ํ™˜๊ฒฝ์— ์ตœ์ ํ™”๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค [1-3]. +- **์„ฑ๋Šฅ ๋ฐ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜(UX) ํ•œ๊ณ„:** JavaScript๊ฐ€ ๋‹ค์šด๋กœ๋“œ ๋ฐ ์‹คํ–‰๋˜๊ธฐ ์ „๊นŒ์ง€ ์‚ฌ์šฉ์ž๋Š” ๋นˆ ํ™”๋ฉด์ด๋‚˜ ๋กœ๋”ฉ ํ™”๋ฉด๋งŒ ๋ณด๊ฒŒ ๋˜๋ฏ€๋กœ ์ดˆ๊ธฐ ๋กœ๋”ฉ ์†๋„๊ฐ€ ๋Š๋ฆฝ๋‹ˆ๋‹ค [3]. ํŠนํžˆ, ๋ฌด๊ฑฐ์šด JavaScript ๋ฒˆ๋“ค์˜ ํฌ๊ธฐ์™€ ํ•˜์ด๋“œ๋ ˆ์ด์…˜(Hydration) ์ง€์—ฐ์€ ๋ชจ๋ฐ”์ผ ํ™˜๊ฒฝ ๋“ฑ์—์„œ Largest Contentful Paint (LCP)์™€ Interaction to Next Paint (INP) ๊ฐ™์€ Core Web Vitals ์ง€ํ‘œ์— ์น˜๋ช…์ ์ธ ์•…์˜ํ–ฅ์„ ๋ฏธ์น  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [8-11]. +- **SEO ๋ฐ ์ธ๋ฑ์‹ฑ(ํฌ๋กค๋ง) ๋ฌธ์ œ:** ์ „ํ†ต์ ์ธ ๊ฒ€์ƒ‰ ์—”์ง„ ํฌ๋กค๋Ÿฌ(์˜ˆ: Googlebot) ๋ฐ AI ์—์ด์ „ํŠธ๋Š” ์ดˆ๊ธฐ์— ๋ฐ˜ํ™˜๋œ ๋นˆ HTML๋งŒ์„ ํ™•์ธํ•˜์—ฌ ์ฝ˜ํ…์ธ ๊ฐ€ ์—†๋‹ค๊ณ  ํŒ๋‹จํ•˜๊ธฐ ์‰ฝ์Šต๋‹ˆ๋‹ค [6, 12]. ํฌ๋กค๋Ÿฌ๊ฐ€ JavaScript๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๋‘ ๋ฒˆ์งธ ์ธ๋ฑ์‹ฑ ๋‹จ๊ณ„(Two-wave indexing)์— ๋“ค์–ด๊ฐ€๋”๋ผ๋„, ๋ Œ๋”๋ง ๋Œ€๊ธฐ์—ด์—์„œ ๋ฉฐ์น  ๋˜๋Š” ๋ช‡ ์ฃผ๊ฐ€ ์ง€์—ฐ๋  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์‹œ๊ฐ„ ์ดˆ๊ณผ ์˜ค๋ฅ˜๋กœ ์ฝ˜ํ…์ธ ๊ฐ€ ์•„์˜ˆ ๋ˆ„๋ฝ๋  ์œ„ํ—˜๋„ ์ปค SEO ๋žญํ‚น ํ•˜๋ฝ๊ณผ ์œ ๊ธฐ์  ํŠธ๋ž˜ํ”ฝ ๊ธ‰๊ฐ์˜ ์ฃผ์›์ธ์ด ๋ฉ๋‹ˆ๋‹ค [4, 7, 13-15]. +- **๋ณด์•ˆ์˜ ๋ณต์žก์„ฑ:** ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋กœ์ง์ด ํด๋ผ์ด์–ธํŠธ๋กœ ์ด๋™ํ•จ์— ๋”ฐ๋ผ, ๋ถ€์ ์ ˆํ•˜๊ฒŒ ์ฒ˜๋ฆฌ๋œ ๋™์  ์ฝ˜ํ…์ธ ๋Š” ํฌ๋กœ์Šค ์‚ฌ์ดํŠธ ์Šคํฌ๋ฆฝํŒ…(XSS) ๊ณต๊ฒฉ์— ๋…ธ์ถœ๋˜๊ธฐ ์‰ฝ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ API ํ†ต์‹ ์— ๋Œ€ํ•œ ์•ˆ์ „ํ•œ ์ธ์ฆ๊ณผ ๊ฐ•๋ ฅํ•œ ์ฝ˜ํ…์ธ  ๋ณด์•ˆ ์ •์ฑ…(CSP) ํ—ค๋” ์ ์šฉ์ด ํ•„์ˆ˜์ ์ž…๋‹ˆ๋‹ค [16, 17]. +- **์ตœ์ ํ™” ๊ถŒ์žฅ ์‚ฌํ•ญ:** CSR์˜ ์„ฑ๋Šฅ ๋ฌธ์ œ๋ฅผ ์ตœ์†Œํ™”ํ•˜๊ธฐ ์œ„ํ•ด ๋™์  ์ž„ํฌํŠธ(Dynamic imports)์™€ ๋ผ์šฐํŠธ ๊ธฐ๋ฐ˜ ์ฝ”๋“œ ์Šคํ”Œ๋ฆฌํŒ…(Route-based code splitting)์„ ์ ์šฉํ•˜์—ฌ ์ดˆ๊ธฐ ๋กœ๋”ฉ์— ํ•„์š”ํ•œ JS ๋ฒˆ๋“ค ํฌ๊ธฐ๋ฅผ ์ค„์—ฌ์•ผ ํ•ฉ๋‹ˆ๋‹ค [18, 19]. ๋˜ํ•œ SEO์™€ ์ดˆ๊ธฐ ์„ฑ๋Šฅ์ด ์ค‘์š”ํ•œ ํผ๋ธ”๋ฆญ ํŽ˜์ด์ง€์˜ ๊ฒฝ์šฐ CSR์„ ๋‹จ๋…์œผ๋กœ ์‚ฌ์šฉํ•˜๊ธฐ๋ณด๋‹ค๋Š” Server-Side Rendering (SSR)์ด๋‚˜ Static Site Generation (SSG) ๋ฐฉ์‹๊ณผ ๊ฒฐํ•ฉํ•˜๋Š” ํ•˜์ด๋ธŒ๋ฆฌ๋“œ ์•„ํ‚คํ…์ฒ˜ ์ฑ„ํƒ์ด ์ ๊ทน ๊ถŒ์žฅ๋ฉ๋‹ˆ๋‹ค [20-22]. + +## ๐Ÿ”— Knowledge Connections +- **Related Topics:** [[Server-Side Rendering (SSR)]], [[Single Page Application (SPA)]], [[Search Engine Optimization (SEO)]], [[Core Web Vitals]] +- **Projects/Contexts:** [[React Router ๊ธฐ๋ฐ˜์˜ ์ค‘์ฒฉ ๋ผ์šฐํŠธ ๋ฐ ์ฝ”๋“œ ์Šคํ”Œ๋ฆฌํŒ… ์ตœ์ ํ™” ์ „๋žต]], [[Next.js ๋˜๋Š” Remix๋ฅผ ํ™œ์šฉํ•œ E-commerce SEO ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ์ ์šฉ ์‚ฌ๋ก€]] +- **Contradictions/Notes:** ์†Œ์Šค ๋‚ด์—์„œ CSR์€ ์„œ๋ฒ„ ์—ฐ์‚ฐ์„ ๊ฑฐ์น˜์ง€ ์•Š์•„ ์ •์  ์ž์‚ฐ ๋กœ๋”ฉ ์‹œ "์—„์ฒญ๋‚˜๊ฒŒ ๋น ๋ฅธ(Lightning-fast) ์ฒซ ์ฝ˜ํ…์ธ  ํŽ˜์ธํŠธ(FCP)์™€ ๋งค๋„๋Ÿฌ์šด TTI"๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์–ธ๊ธ‰๋˜์ง€๋งŒ[23], ์‹ค์ œ ํ”„๋กœ๋•์…˜ ํ™˜๊ฒฝ์˜ ๋ฌด๊ฑฐ์šด JS ๋ฒˆ๋“ค์—์„œ๋Š” ๋ Œ๋”๋ง ๋ธ”๋กœํ‚น ๋ฐ ํ•˜์ด๋“œ๋ ˆ์ด์…˜ ์ง€์—ฐ์œผ๋กœ ์ธํ•ด ์˜คํžˆ๋ ค FCP์™€ LCP ์ง€ํ‘œ๊ฐ€ ์‹ฌ๊ฐํ•˜๊ฒŒ ์ €ํ•˜๋œ๋‹ค๊ณ  ๊ฒฝ๊ณ ํ•˜๋Š” ๋“ฑ ์ตœ์ ํ™” ์ˆ˜์ค€์— ๋”ฐ๋ผ ์„ฑ๋Šฅ ๊ฒฐ๊ณผ๊ฐ€ ์ƒ์ถฉํ•˜๊ฒŒ ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค[11, 24]. + +--- +*Last updated: 2026-04-26* \ No newline at end of file diff --git a/00_Raw/Core Web Vitals.md b/00_Raw/Core Web Vitals.md new file mode 100644 index 00000000..516df515 --- /dev/null +++ b/00_Raw/Core Web Vitals.md @@ -0,0 +1,34 @@ +# [[Core Web Vitals]] + +## ๐Ÿ“Œ Brief Summary +Core Web Vitals๋Š” ์›น์‚ฌ์ดํŠธ์˜ ์‹ค์ œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๊ฐ๊ด€์ ์œผ๋กœ ์ธก์ •ํ•˜๊ธฐ ์œ„ํ•ด Google์ด ์„ค์ •ํ•œ ํ‘œ์ค€ํ™”๋œ ์„ฑ๋Šฅ ์ง€ํ‘œ์ž…๋‹ˆ๋‹ค [1]. 2025๋…„ ๊ธฐ์ค€, ์ด ์ง€ํ‘œ๋Š” ์ฃผ๋กœ ํŽ˜์ด์ง€์˜ ๋กœ๋”ฉ ์„ฑ๋Šฅ์„ ๋‚˜ํƒ€๋‚ด๋Š” LCP, ์ƒํ˜ธ์ž‘์šฉ์˜ ๋ฐ˜์‘์„ฑ์„ ์ธก์ •ํ•˜๋Š” INP, ๊ทธ๋ฆฌ๊ณ  ์‹œ๊ฐ์  ์•ˆ์ •์„ฑ์„ ํ‰๊ฐ€ํ•˜๋Š” CLS๋กœ ๊ตฌ์„ฑ๋ฉ๋‹ˆ๋‹ค [1-3]. ์ด ์ง€ํ‘œ๋“ค์€ Google์˜ SEO(๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”) ์ˆœ์œ„ ์•Œ๊ณ ๋ฆฌ์ฆ˜์— ์ง์ ‘์ ์œผ๋กœ ๋ฐ˜์˜๋˜๋ฉฐ, ์›น์‚ฌ์ดํŠธ์˜ ์ „ํ™˜์œจ๊ณผ ์ดํƒˆ๋ฅ  ๋“ฑ ํ•ต์‹ฌ ๋น„์ฆˆ๋‹ˆ์Šค ์„ฑ๊ณผ์— ๋ง‰๋Œ€ํ•œ ์˜ํ–ฅ์„ ๋ฏธ์นฉ๋‹ˆ๋‹ค [4-7]. + +## ๐Ÿ“– Core Content +* **ํ•ต์‹ฌ ์ง€ํ‘œ ๋ฐ 2025๋…„ ๊ธฐ์ค€ ์ž„๊ณ„๊ฐ’:** + * **LCP (Largest Contentful Paint):** ๋ทฐํฌํŠธ ๋‚ด์—์„œ ๊ฐ€์žฅ ํฐ ์ฝ˜ํ…์ธ  ์š”์†Œ(์ฃผ๋กœ ํžˆ์–ด๋กœ ์ด๋ฏธ์ง€๋‚˜ ํฐ ํ…์ŠคํŠธ ๋ธ”๋ก)๊ฐ€ ํ™”๋ฉด์— ํ‘œ์‹œ๋˜๋Š” ๋ฐ ๊ฑธ๋ฆฌ๋Š” ์‹œ๊ฐ„์„ ์ธก์ •ํ•ฉ๋‹ˆ๋‹ค [3, 8, 9]. ์‚ฌ์šฉ์ž๊ฐ€ ํŽ˜์ด์ง€์˜ ์ฃผ์š” ๋‚ด์šฉ์„ ์ธ์‹ํ•˜๋Š” ์†๋„๋ฅผ ๋œปํ•˜๋ฉฐ, ์ผ๋ฐ˜์ ์œผ๋กœ 2.5์ดˆ ๋ฏธ๋งŒ์ด์–ด์•ผ "์ข‹์Œ(Good)"์œผ๋กœ ํ‰๊ฐ€๋ฉ๋‹ˆ๋‹ค [3, 10, 11]. + * **INP (Interaction to Next Paint):** 2025๋…„์— ๊ธฐ์กด์˜ FID(First Input Delay)๋ฅผ ๊ณต์‹์ ์œผ๋กœ ๋Œ€์ฒดํ•œ ์ง€ํ‘œ๋กœ, ํด๋ฆญ์ด๋‚˜ ํƒญ ๋“ฑ ์‚ฌ์šฉ์ž์˜ ๋ชจ๋“  ์ƒํ˜ธ์ž‘์šฉ๋ถ€ํ„ฐ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์‹œ๊ฐ์  ํ”ผ๋“œ๋ฐฑ(๋‹ค์Œ ํ”„๋ ˆ์ž„)์„ ๋ Œ๋”๋งํ•˜๊ธฐ๊นŒ์ง€์˜ ์ „์ฒด ์ง€์—ฐ ์‹œ๊ฐ„์„ ํฌ๊ด„์ ์œผ๋กœ ์ธก์ •ํ•ฉ๋‹ˆ๋‹ค [2, 12, 13]. ์ผ๋ฐ˜์ ์œผ๋กœ 200ms ๋ฏธ๋งŒ์„ ์œ ์ง€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค [10, 11, 13]. + * **CLS (Cumulative Layout Shift):** ํŽ˜์ด์ง€ ๋กœ๋“œ ์ค‘ ํ…์ŠคํŠธ๋‚˜ ๋ฒ„ํŠผ ๋“ฑ์ด ์˜ˆ๊ธฐ์น˜ ์•Š๊ฒŒ ์ด๋™ํ•˜๋Š” ํ˜„์ƒ์„ ์ธก์ •ํ•˜์—ฌ ์‹œ๊ฐ์  ์•ˆ์ •์„ฑ์„ ํ‰๊ฐ€ํ•ฉ๋‹ˆ๋‹ค [8, 14]. 0.1 ๋ฏธ๋งŒ์˜ ์ ์ˆ˜๋ฅผ ๋ฐ›์•„์•ผ ์‚ฌ์šฉ์ž์—๊ฒŒ ์พŒ์ ํ•œ ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์œผ๋กœ ๊ฐ„์ฃผ๋ฉ๋‹ˆ๋‹ค [11, 14, 15]. + * **FCP (First Contentful Paint):** ์ฒซ ๋ฒˆ์งธ ํ…์ŠคํŠธ๋‚˜ ์ด๋ฏธ์ง€๊ฐ€ ํ™”๋ฉด์— ๊ทธ๋ ค์ง€๋Š” ์‹œ์ ์„ ์ธก์ •ํ•˜์—ฌ ์ดˆ๊ธฐ ๋กœ๋”ฉ ์ฒด๊ฐ ์†๋„๋ฅผ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค [16]. + +* **๋น„์ฆˆ๋‹ˆ์Šค ๋ฐ SEO์— ๋ฏธ์น˜๋Š” ์˜ํ–ฅ:** + * Core Web Vitals๋Š” Google์˜ ํŽ˜์ด์ง€ ๊ฒฝํ—˜(Page Experience) ์•Œ๊ณ ๋ฆฌ์ฆ˜์—์„œ ์•ฝ 25-30%์˜ ์ˆœ์œ„ ๊ฐ€์ค‘์น˜๋ฅผ ๊ฐ€์ง€๋Š” ๊ฐ•๋ ฅํ•œ SEO ๋žญํ‚น ์š”์†Œ์ž…๋‹ˆ๋‹ค [6]. + * ์„ฑ๋Šฅ์ด "๋‚˜์จ"์—์„œ "์ข‹์Œ"์œผ๋กœ ์ „๋ฉด ๊ฐœ์„ ๋  ๊ฒฝ์šฐ, ํ‰๊ท  ์ „ํ™˜์œจ์ด 25% ์ฆ๊ฐ€ํ•˜๊ณ  ์ดํƒˆ๋ฅ ์ด 35% ๊ฐ์†Œํ•˜๋ฉฐ ์‚ฌ์šฉ์ž๋‹น ์ˆ˜์ต์ด 30% ํ–ฅ์ƒ๋˜๋Š” ๋“ฑ ์ฆ‰๊ฐ์ ์ธ ๋น„์ฆˆ๋‹ˆ์Šค ROI๋ฅผ ์ฐฝ์ถœํ•ฉ๋‹ˆ๋‹ค [7, 17]. + * ํŽ˜์ด์ง€ ๋กœ๋“œ๊ฐ€ 1์ดˆ ์ง€์—ฐ๋  ๊ฒฝ์šฐ ์ „ํ™˜์œจ์ด ์ตœ๋Œ€ 7%๊นŒ์ง€ ๊ฐ์†Œํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ๊ฐ•๋ ฅํ•œ ์ตœ์ ํ™”๊ฐ€ ํ•„์ˆ˜์ ์ž…๋‹ˆ๋‹ค [5, 18]. + +* **์„ฑ๋Šฅ ์ตœ์ ํ™” ์ „๋žต (Optimization Strategies):** + * **LCP ์ตœ์ ํ™”:** WebP๋‚˜ AVIF ๊ฐ™์€ ์ฐจ์„ธ๋Œ€ ์ด๋ฏธ์ง€ ํฌ๋งท์„ ์‚ฌ์šฉํ•˜๊ณ , ์ •์  ์ž์‚ฐ์— CDN์„ ํ™œ์šฉํ•˜๋ฉฐ, ์„œ๋ฒ„ ์‘๋‹ต ์‹œ๊ฐ„(TTFB)์„ ๋‹จ์ถ•ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค [8, 14, 19]. React์™€ ๊ฐ™์€ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ SSR(Server-Side Rendering)์„ ๋„์ž…ํ•˜์—ฌ ๋ธŒ๋ผ์šฐ์ €์— ์™„์„ฑ๋œ HTML์„ ๋น ๋ฅด๊ฒŒ ์ „๋‹ฌํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค [20, 21]. + * **INP ์ตœ์ ํ™”:** JavaScript ์‹คํ–‰ ์‹œ๊ฐ„ ์ถ•์†Œ๊ฐ€ ๊ฐ€์žฅ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ๋ฌด๊ฑฐ์šด ์—ฐ์‚ฐ์€ Web Workers๋กœ ์˜คํ”„๋กœ๋“œํ•˜๊ณ , ๋ฉ”์ธ ์Šค๋ ˆ๋“œ๋ฅผ ์ฐจ๋‹จํ•˜๋Š” ๊ธด ์ž‘์—…(Long Tasks)์€ 50ms ์ดํ•˜์˜ ์ž‘์€ ๋‹จ์œ„๋กœ ์ชผ๊ฐœ์•ผ ํ•ฉ๋‹ˆ๋‹ค [12, 13, 22, 23]. ๋˜ํ•œ, ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ์„œ๋“œํŒŒํ‹ฐ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ œ๊ฑฐํ•˜๊ณ  ์ฝ”๋“œ ์Šคํ”Œ๋ฆฌํŒ…(Code Splitting) ๋ฐ ์ง€์—ฐ ๋กœ๋”ฉ(Lazy Loading)์„ ์ ์šฉํ•˜๋Š” ๊ฒƒ์ด ๊ถŒ์žฅ๋ฉ๋‹ˆ๋‹ค [24, 25]. + * **CLS ์ตœ์ ํ™”:** ๋ชจ๋“  ์ด๋ฏธ์ง€์™€ ๋™์˜์ƒ ์š”์†Œ์— ๋ช…์‹œ์ ์ธ ๋„ˆ๋น„ ๋ฐ ๋†’์ด(width/height) ์†์„ฑ์„ ์ง€์ •ํ•˜๊ณ , ๋™์  ๊ด‘๊ณ ๋‚˜ ์ž„๋ฒ ๋“œ ์ฝ˜ํ…์ธ ๊ฐ€ ๋กœ๋“œ๋  ๊ณต๊ฐ„์„ CSS๋กœ ๋ฏธ๋ฆฌ ํ™•๋ณดํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค [14, 16, 26]. ํฐํŠธ ๋กœ๋”ฉ ์‹œ ํ…์ŠคํŠธ ๊นœ๋นก์ž„์ด๋‚˜ ๋ ˆ์ด์•„์›ƒ ์ด๋™์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด `font-display: swap` ๋˜๋Š” `optional`์„ ์‚ฌ์šฉํ•˜๋ฉฐ, ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‹œ์—๋Š” ๋ ˆ์ด์•„์›ƒ ์žฌ๊ณ„์‚ฐ์„ ์œ ๋ฐœํ•˜์ง€ ์•Š๋„๋ก `transform` ์†์„ฑ์„ ํ™œ์šฉํ•ฉ๋‹ˆ๋‹ค [27-29]. + +* **ํ…Œ์ŠคํŠธ ๋ฐ ๋ชจ๋‹ˆํ„ฐ๋ง ๋„๊ตฌ:** + * ๊ฐœ๋ณ„ ํŽ˜์ด์ง€์— ๋Œ€ํ•œ ๋น ๋ฅธ ์‹คํ—˜์‹ค/ํ•„๋“œ ๋ฐ์ดํ„ฐ ํ™•์ธ ๋ฐ ์ตœ์ ํ™” ์ถ”์ฒœ์„ ๋ฐ›๊ธฐ ์œ„ํ•ด Google PageSpeed Insights๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค [30]. + * ๊ฐœ๋ฐœ ๋ฐ ๋””๋ฒ„๊น… ๋ชฉ์ ์œผ๋กœ๋Š” Chrome DevTools์— ๋‚ด์žฅ๋œ Lighthouse ๋„๊ตฌ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๋ณ‘๋ชฉ ํ˜„์ƒ์„ ํŒŒ์•…ํ•ฉ๋‹ˆ๋‹ค [31, 32]. + * ์‹ค์ œ ์‚ฌ์šฉ์ž ๋ชจ๋‹ˆํ„ฐ๋ง(RUM)์„ ์œ„ํ•ด์„œ๋Š” Google Search Console์˜ Core Web Vitals ๋ฆฌํฌํŠธ๋ฅผ ํ†ตํ•ด ์›น์‚ฌ์ดํŠธ ์ „์ฒด์˜ ์„ฑ๋Šฅ์„ ์ง€์†์ ์œผ๋กœ ์ถ”์ ํ•˜๊ณ , GTmetrix๋‚˜ Datadog RUM ๋“ฑ์„ ํ•จ๊ป˜ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [32-34]. + +## ๐Ÿ”— Knowledge Connections +- **Related Topics:** [[LCP (Largest Contentful Paint)]], [[INP (Interaction to Next Paint)]], [[CLS (Cumulative Layout Shift)]], [[SEO]], [[Web Performance Optimization]], [[Server-Side Rendering (SSR)]] +- **Projects/Contexts:** [[Google Page Experience 2025]], [[React SEO Guide]] +- **Contradictions/Notes:** 2025๋…„ ๊ธฐ์ค€ Core Web Vitals์˜ "์ข‹์Œ(Good)" ์ž„๊ณ„๊ฐ’๊ณผ ๊ด€๋ จํ•˜์—ฌ ์†Œ์Šค ๊ฐ„ ์˜๊ฒฌ ์ถฉ๋Œ์ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ๋Œ€๋‹ค์ˆ˜์˜ ์†Œ์Šค๋Š” ๊ธฐ์กด ๊ธฐ์ค€์ธ LCP < 2.5์ดˆ, INP < 200ms, CLS < 0.1์„ ์œ ์ง€ํ•œ๋‹ค๊ณ  ๋ช…์‹œํ•˜์ง€๋งŒ [1, 3, 10, 11, 13], ์ผ๋ถ€ ์†Œ์Šค๋Š” 2025๋…„์— ๊ธฐ์ค€์ด ๋”์šฑ ์—„๊ฒฉํ•ด์ ธ LCP < 2.0์ดˆ, INP < 150ms, CLS < 0.08, FCP < 1.5์ดˆ๋ฅผ ์ถฉ์กฑํ•ด์•ผ ํ•œ๋‹ค๊ณ  ์ฃผ์žฅํ•ฉ๋‹ˆ๋‹ค [35]. + +--- +*Last updated: 2026-04-26* \ No newline at end of file diff --git a/00_Raw/Design-to-Code Workflow.md b/00_Raw/Design-to-Code Workflow.md new file mode 100644 index 00000000..8c79b909 --- /dev/null +++ b/00_Raw/Design-to-Code Workflow.md @@ -0,0 +1,19 @@ +# [[Design-to-Code Workflow]] + +## ๐Ÿ“Œ Brief Summary +Design-to-Code Workflow๋Š” Figma์™€ ๊ฐ™์€ ๋””์ž์ธ ๋„๊ตฌ์—์„œ ์ •์˜๋œ ๋””์ž์ธ ๊ฒฐ์ •(์ƒ‰์ƒ, ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ, ๊ฐ„๊ฒฉ ๋“ฑ)์„ React ๋“ฑ์˜ ํ”„๋ก ํŠธ์—”๋“œ ํ™˜๊ฒฝ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์‹ค์ œ ์ฝ”๋“œ๋กœ ๋งค๋„๋Ÿฝ๊ฒŒ ๋ณ€ํ™˜ํ•˜๊ณ  ๋™๊ธฐํ™”ํ•˜๋Š” ์ž๋™ํ™” ๋ฐ ํ˜‘์—… ํŒŒ์ดํ”„๋ผ์ธ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค [1, 2]. ์ด ์›Œํฌํ”Œ๋กœ์šฐ๋Š” ๋””์ž์ธ ํ† ํฐ(Design Tokens)์„ ๋‹จ์ผ ์ง„์‹ค ๊ณต๊ธ‰์›(Single source of truth)์œผ๋กœ ํ™œ์šฉํ•˜์—ฌ ๋””์ž์ด๋„ˆ์™€ ๊ฐœ๋ฐœ์ž ๊ฐ„์˜ ๊ฐ„๊ทน์„ ์ขํžˆ๊ณ  ์ˆ˜๋™ ์ž‘์—…์œผ๋กœ ์ธํ•œ ์˜ค๋ฅ˜๋ฅผ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค [3, 4]. ์ตœ์‹  ํ”„๋ก ํŠธ์—”๋“œ ์•„ํ‚คํ…์ฒ˜์—์„œ๋Š” ์ฝ”๋“œ ๊ธฐ๋ฐ˜ ์ปดํฌ๋„ŒํŠธ ์—ฐ๋™๊ณผ CI/CD ์ž๋™ํ™” ํˆด์„ ๊ฒฐํ•ฉํ•˜์—ฌ ๋””์ž์ธ์˜ ์ผ๊ด€์„ฑ์„ ๋ณด์žฅํ•˜๊ณ  ํ™•์žฅ์„ฑ์„ ๊ทน๋Œ€ํ™”ํ•ฉ๋‹ˆ๋‹ค [5-7]. + +## ๐Ÿ“– Core Content +* **๋””์ž์ธ ํ† ํฐ(Design Tokens)์˜ ์ถ”์ถœ ๋ฐ ์ค‘์•™ ์ง‘์ค‘ํ™”:** ๋””์ž์ธ ํˆด(์˜ˆ: Figma์˜ Tokens Studio ํ”Œ๋Ÿฌ๊ทธ์ธ ๋“ฑ)์—์„œ ๋‚ด๋ฆฐ ๋””์ž์ธ ๊ฒฐ์ •์€ JSON์ด๋‚˜ YAML ํ˜•ํƒœ์˜ ํ† ํฐ์œผ๋กœ ๊ตฌ์กฐํ™” ๋ฐ ์ถ”์ถœ๋ฉ๋‹ˆ๋‹ค [2]. ์ด๋Š” ํ”Œ๋žซํผ๊ณผ ๋…๋ฆฝ์ ์ธ ๋ฐ์ดํ„ฐ๋กœ, ๋””์ž์ธ ๋„๊ตฌ์™€ ์ฝ”๋“œ๋ฒ ์ด์Šค๊ฐ€ ์†Œํ†ตํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๊ณ„ ๊ฐ€๋…ํ˜• ํฌ๋งท์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค [2, 8]. +* **์Šคํƒ€์ผ ๋ณ€ํ™˜ ๋ฐ ํ…Œ๋งˆ ์ž๋™ํ™” ์—”์ง„:** Style Dictionary์™€ ๊ฐ™์€ ๋„๊ตฌ๋Š” ํ”Œ๋žซํผ์— ๊ตฌ์• ๋ฐ›์ง€ ์•Š๋Š” ํ† ํฐ JSON์„ ์ฝ์–ด๋“ค์—ฌ, React ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์œ„ํ•œ CSS ๋ณ€์ˆ˜(CSS Variables)๋‚˜ JavaScript/TypeScript ํ…Œ๋งˆ ๊ฐ์ฒด(styled-components ๋“ฑ)๋กœ ์ž๋™ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค [9-11]. ์ด๋ฅผ ํ†ตํ•ด ๋ผ์ดํŠธ/๋‹คํฌ ๋ชจ๋“œ์™€ ๊ฐ™์€ ๋™์  ํ…Œ๋งˆ๋ฅผ ์ˆ˜๋™ ์ฝ”๋”ฉ ์—†์ด ์ผ๊ด€๋˜๊ฒŒ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [10, 12]. +* **์ฝ”๋“œ ๊ธฐ๋ฐ˜ ์ปดํฌ๋„ŒํŠธ(Code-Backed Components) ํ™œ์šฉ:** ์ „ํ†ต์ ์ธ ํ•ธ๋“œ์˜คํ”„ ๋ฐฉ์‹์˜ ํ•œ๊ณ„๋ฅผ ๊ทน๋ณตํ•˜๊ธฐ ์œ„ํ•ด, UXPin Merge์™€ ๊ฐ™์€ ๋„๊ตฌ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์‹ค์ œ ์ฝ”๋“œ ๋ ˆํฌ์ง€ํ† ๋ฆฌ(Git)์— ์žˆ๋Š” React ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋””์ž์ธ ํˆด์—์„œ ์ง์ ‘ ๋ถˆ๋Ÿฌ์™€ ํ”„๋กœํ† ํƒ€์ดํ•‘์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค [4, 6]. ๋””์ž์ธ ๋„๊ตฌ ๋‚ด์—์„œ ๊ฐœ๋ฐœ๊ณผ ๋™์ผํ•œ ์ปดํฌ๋„ŒํŠธ์™€ ํ† ํฐ์„ ์‚ฌ์šฉํ•˜๋ฏ€๋กœ 100% ๋™๊ธฐํ™”๊ฐ€ ์œ ์ง€๋ฉ๋‹ˆ๋‹ค [6, 13]. +* **CI/CD๋ฅผ ํ†ตํ•œ ํŒŒ์ดํ”„๋ผ์ธ ์ž๋™ํ™”:** ๋‹จ์ผ ์ง„์‹ค ๊ณต๊ธ‰์›์ธ ํ† ํฐ ์ €์žฅ์†Œ(Version Control)์— ๋ณ€๊ฒฝ ์‚ฌํ•ญ์ด ์ปค๋ฐ‹๋˜๋ฉด, CI/CD ํŒŒ์ดํ”„๋ผ์ธ์ด ์ž๋™์œผ๋กœ ํ”Œ๋žซํผ๋ณ„ ์Šคํƒ€์ผ ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜๊ณ  ํšŒ๊ท€ ํ…Œ์ŠคํŠธ๋ฅผ ๊ฑฐ์ณ ์Šคํ…Œ์ด์ง•/ํ”„๋กœ๋•์…˜ ํ™˜๊ฒฝ์— ๋ฐฐํฌํ•ฉ๋‹ˆ๋‹ค [7, 14]. +* **AI ๋ฐ ์—์ด์ „ํŠธ ๊ธฐ๋ฐ˜ ์ŠคํŽ™ ์ƒ์„ฑ:** Uber์˜ uSpec ์‹œ์Šคํ…œ๊ณผ ๊ฐ™์€ ์‚ฌ๋ก€์—์„œ๋Š” AI ์—์ด์ „ํŠธ์™€ Figma Console MCP๋ฅผ ์—ฐ๋™ํ•˜์—ฌ, ๋””์ž์ธ ํŒŒ์ผ ๋‚ด์˜ ์ปดํฌ๋„ŒํŠธ ๊ณ„์ธต, ํ† ํฐ ๋งคํ•‘, ๋ณ€์ˆ˜ ๋ชจ๋“œ๋ฅผ ๋ถ„์„ํ•ด ๊ฐœ๋ฐœ์šฉ ์ŠคํŽ™ ๋ฌธ์„œ๋ฅผ ๋‹จ ๋ช‡ ๋ถ„ ๋งŒ์— ์ž๋™ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค [15-17]. ์ด๋Š” ๋‹จ์ˆœํ•œ ํ† ํฐ ๋ณ€ํ™˜์„ ๋„˜์–ด ๋””์ž์ธ ์˜๋„๋ฅผ ์—”์ง€๋‹ˆ์–ด๋ง ๊ตฌํ˜„ ์ŠคํŽ™์œผ๋กœ ์ง๊ฒฐ์‹œํ‚ค๋Š” ๊ณ ๋„ํ™”๋œ ์›Œํฌํ”Œ๋กœ์šฐ๋ฅผ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค [18, 19]. + +## ๐Ÿ”— Knowledge Connections +- **Related Topics:** [[Design Tokens]], [[Style Dictionary]], [[Dynamic Theming]], [[Component-Based Design]] +- **Projects/Contexts:** [[React]], [[styled-components]], [[UXPin Merge]], [[Uber's uSpec]] +- **Contradictions/Notes:** ์ „ํ†ต์ ์ธ ๋””์ž์ธ-๊ฐœ๋ฐœ ํ˜‘์—… ๋ฐฉ์‹์—์„œ๋Š” ๋””์ž์ด๋„ˆ๊ฐ€ ๋ชฉ์—…์„ ๋งŒ๋“ค๊ณ  ๊ฐœ๋ฐœ์ž๊ฐ€ ์ˆ˜๋™์œผ๋กœ ๊ฐ’์„ ํ•˜๋“œ์ฝ”๋”ฉํ•˜์—ฌ ์ฝ”๋“œ๋กœ ์˜ฎ๊ฒผ๊ธฐ ๋•Œ๋ฌธ์— ์ง€์†์ ์ธ ๋””์ž์ธ ๋“œ๋ฆฌํ”„ํŠธ(Design Drift)์™€ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์œผ๋‚˜, ์ตœ์‹  Design-to-Code ํŒŒ์ดํ”„๋ผ์ธ์€ ๋””์ž์ธ ํ† ํฐ๊ณผ ์ž๋™ํ™”๋ฅผ ํ†ตํ•ด ์ด๋Ÿฌํ•œ ๊ฒฉ์ฐจ์™€ ๋น„ํšจ์œจ์„ ์›์ฒœ์ ์œผ๋กœ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค [4, 20]. + +--- +*Last updated: 2026-04-26* \ No newline at end of file diff --git a/00_Raw/E-commerce ๋žœ๋”ฉ ํŽ˜์ด์ง€ ์ „ํ™˜์œจ ๊ฐœ์„  ๋ฐ ์ดํƒˆ๋ฅ  ๊ฐ์†Œ(CRO).md b/00_Raw/E-commerce ๋žœ๋”ฉ ํŽ˜์ด์ง€ ์ „ํ™˜์œจ ๊ฐœ์„  ๋ฐ ์ดํƒˆ๋ฅ  ๊ฐ์†Œ(CRO).md new file mode 100644 index 00000000..49c01571 --- /dev/null +++ b/00_Raw/E-commerce ๋žœ๋”ฉ ํŽ˜์ด์ง€ ์ „ํ™˜์œจ ๊ฐœ์„  ๋ฐ ์ดํƒˆ๋ฅ  ๊ฐ์†Œ(CRO).md @@ -0,0 +1,20 @@ +# [[E-commerce ๋žœ๋”ฉ ํŽ˜์ด์ง€ ์ „ํ™˜์œจ ๊ฐœ์„  ๋ฐ ์ดํƒˆ๋ฅ  ๊ฐ์†Œ(CRO)]] + +## ๐Ÿ“Œ Brief Summary +E-commerce ๋žœ๋”ฉ ํŽ˜์ด์ง€์˜ ์ „ํ™˜์œจ ์ตœ์ ํ™”(CRO) ๋ฐ ์ดํƒˆ๋ฅ  ๊ฐ์†Œ๋Š” ๋ช…ํ™•์„ฑ, ์‹ ๋ขฐ์„ฑ, ๊ทธ๋ฆฌ๊ณ  ์ „ํ™˜์— ์ง‘์ค‘๋œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜(UX) ์„ค๊ณ„๋ฅผ ํ†ตํ•ด ์ด๋ฃจ์–ด์ง‘๋‹ˆ๋‹ค. 2025๋…„์˜ ์ตœ์‹  ์›น ๋””์ž์ธ ์ ‘๊ทผ๋ฒ•์€ ์ฃผ์˜๋ฅผ ๋ถ„์‚ฐ์‹œํ‚ค๋Š” ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•˜๊ณ  ๋‹จ์ผ ์ฝœํˆฌ์•ก์…˜(CTA)์— ์ง‘์ค‘ํ•˜๋ฉฐ, ๋กœ๋”ฉ ์†๋„์™€ ๋ชจ๋ฐ”์ผ ํ™˜๊ฒฝ์„ ์ตœ์ ํ™”ํ•˜๋Š” ๋ฐ ์ค‘์ ์„ ๋‘ก๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์— AI ๊ธฐ๋ฐ˜์˜ ๊ฐœ์ธํ™”, ๋งˆ์ดํฌ๋กœ ์ธํ„ฐ๋ž™์…˜, ๊ทธ๋ฆฌ๊ณ  ๊ฐ•๋ ฅํ•œ ์‹ ๋ขฐ ๊ตฌ์ถ• ์š”์†Œ(Trust Signals)๋ฅผ ๊ฒฐํ•ฉํ•˜์—ฌ ์‚ฌ์šฉ์ž์˜ ๊ตฌ๋งค ๋งˆ์ฐฐ์„ ์ค„์ด๊ณ  ๋น„์ฆˆ๋‹ˆ์Šค ์ˆ˜์ต์„ ๊ทน๋Œ€ํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. + +## ๐Ÿ“– Core Content +* **๋‹จ์ผ ๋ชฉํ‘œ์™€ ์ „ํ™˜ ์ค‘์‹ฌ์˜ ๋ฏธ๋‹ˆ๋ฉ€๋ฆฌ์ฆ˜:** ๋žœ๋”ฉ ํŽ˜์ด์ง€๋Š” ์—ฌ๋Ÿฌ ๊ฒฝ์Ÿ์ ์ธ ๋™์ž‘์„ ์œ ๋„ํ•˜๊ธฐ๋ณด๋‹ค ๋‹จ์ผํ•˜๊ณ  ๋ช…ํ™•ํ•œ CTA์— ์ง‘์ค‘ํ•  ๋•Œ ์ „ํ™˜์œจ์ด 22% ๋” ๋†’๊ฒŒ ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค [1]. ํ’๋ถ€ํ•œ ์—ฌ๋ฐฑ(Whitespace)์„ ํ™œ์šฉํ•˜๊ณ  ๋ช…ํ™•ํ•œ ์‹œ๊ฐ์  ๊ณ„์ธต ๊ตฌ์กฐ๋ฅผ ๊ฐ–์ถ˜ ๋ฏธ๋‹ˆ๋ฉ€๋ฆฌ์ŠคํŠธ ๋””์ž์ธ์€ ๋ณต์žกํ•˜๊ณ  ๋ฐ€์ง‘๋œ ๋ ˆ์ด์•„์›ƒ๋ณด๋‹ค ์ „ํ™˜์œจ์—์„œ 19% ๋” ์šฐ์ˆ˜ํ•œ ์„ฑ๊ณผ๋ฅผ ๋ณด์ž…๋‹ˆ๋‹ค [2]. +* **์„ฑ๋Šฅ ์ตœ์ ํ™” ๋ฐ ๋ชจ๋ฐ”์ผ ํผ์ŠคํŠธ ์„ค๊ณ„:** ๋žœ๋”ฉ ํŽ˜์ด์ง€ ๋ฐฉ๋ฌธ์˜ 68% ์ด์ƒ์ด ๋ชจ๋ฐ”์ผ ๊ธฐ๊ธฐ์—์„œ ๋ฐœ์ƒํ•˜๋ฏ€๋กœ ๋ชจ๋ฐ”์ผ์— ์ตœ์ ํ™”๋œ ๋ ˆ์ด์•„์›ƒ์€ ํ•„์ˆ˜์ ์ž…๋‹ˆ๋‹ค [3]. 1์ดˆ์˜ ํŽ˜์ด์ง€ ๋กœ๋”ฉ ์ง€์—ฐ์€ ์ „ํ™˜์œจ์„ 7% ๊ฐ์†Œ์‹œํ‚ฌ ์ˆ˜ ์žˆ์œผ๋ฉฐ [4, 5], 3์ดˆ ์ด์ƒ์˜ ๋กœ๋”ฉ์€ ์ดํƒˆ๋ฅ ์„ 32% ์ฆ๊ฐ€์‹œํ‚ต๋‹ˆ๋‹ค [6]. ํ•œ ๋Ÿญ์…”๋ฆฌ ํŒจ์…˜ ๋ธŒ๋žœ๋“œ(Allbirds)๋Š” ์ ์ง„์  ์›น ์•ฑ(PWA) ๊ธฐ์ˆ ์„ ๋„์ž…ํ•˜์—ฌ ํŽ˜์ด์ง€ ๋กœ๋”ฉ ์†๋„๋ฅผ 89% ๊ฐœ์„ ํ–ˆ์œผ๋ฉฐ, ๊ทธ ๊ฒฐ๊ณผ ์žฅ๋ฐ”๊ตฌ๋‹ˆ ์ดํƒˆ๋ฅ  43% ๊ฐ์†Œ ๋ฐ ๋ชจ๋ฐ”์ผ ์ „ํ™˜์œจ 156% ์ฆ๊ฐ€๋ผ๋Š” ์„ฑ๊ณผ๋ฅผ ๊ฑฐ๋‘์—ˆ์Šต๋‹ˆ๋‹ค [7, 8]. +* **์‚ฌ์šฉ์ž ๋งˆ์ฐฐ ๊ฐ์†Œ์™€ ํผ(Form) ๊ฐ„์†Œํ™”:** ๋‹ค๋‹จ๊ณ„ ๊ฒฐ์ œ ํ๋ฆ„์—์„œ ์ง„ํ–‰ ํ‘œ์‹œ๊ธฐ๋ฅผ ์ œ๊ณตํ•˜๊ณ  ์ธ๋ผ์ธ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ๋ฅผ ํ†ตํ•ด ์˜ค๋ฅ˜๋ฅผ ์ฆ‰์‹œ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋ฉด ์‚ฌ์šฉ์ž์˜ ๋ถˆํ™•์‹ค์„ฑ์„ ์ค„์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [9]. ํŠนํžˆ ์ž…๋ ฅ ํผ์˜ ํ•„๋“œ๋ฅผ ํ•˜๋‚˜ ์ถ”๊ฐ€ํ•  ๋•Œ๋งˆ๋‹ค ์ „ํ™˜์œจ์ด ์•ฝ 11%์”ฉ ๊ฐ์†Œํ•˜๋ฏ€๋กœ, ๋ฐ˜๋“œ์‹œ ํ•„์š”ํ•œ ์ •๋ณด๋งŒ ์š”๊ตฌํ•˜์—ฌ ๋งˆ์ฐฐ์„ ์ตœ์†Œํ™”ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค [10]. +* **AI ๊ธฐ๋ฐ˜ ๊ฐœ์ธํ™”(Personalization):** ์‚ฌ์šฉ์ž์˜ ํ–‰๋™, ์œ„์น˜, ๊ธฐ๊ธฐ ์œ ํ˜• ๋“ฑ์— ๋”ฐ๋ผ ๋™์ ์œผ๋กœ ์ œํ’ˆ ์ถ”์ฒœ, ๊ฐ€๊ฒฉ, ๋„ค๋น„๊ฒŒ์ด์…˜์„ ์กฐ์ •ํ•˜๋Š” ์ ์‘ํ˜• UX(Adaptive UX)๋ฅผ ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [11]. ์˜ˆ์ธก ์„ธ๋ถ„ํ™”(Predictive segmentation)๋ฅผ ํ™œ์šฉํ•œ AI ๊ฐœ์ธํ™” ๋„๊ตฌ๋Š” ์ „ํ™˜์œจ์„ ์ตœ๋Œ€ 50%๊นŒ์ง€ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [12]. +* **์‹ ๋ขฐ ๊ตฌ์ถ• ์š”์†Œ(Trust Signals) ๊ฐ•ํ™”:** ๊ฒฐ์ œ ์‹œ ํˆฌ๋ช…ํ•œ ๊ฐ€๊ฒฉ ์ •์ฑ…(์ˆจ๊ฒจ์ง„ ์ˆ˜์ˆ˜๋ฃŒ ์ œ๊ฑฐ)๊ณผ SSL ์ธ์ฆ์„œ, ๋ณด์•ˆ ๋ฐฐ์ง€ ๋“ฑ์„ ์ œ๊ณตํ•˜์—ฌ ์‚ฌ์šฉ์ž์˜ ์˜์‹ฌ์„ ์ œ๊ฑฐํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค [13]. ์‹ค์ œ ๊ณ ๊ฐ ๋ฆฌ๋ทฐ, ๊ณ ๊ฐ ์ˆ˜, ํŒŒํŠธ๋„ˆ ๋กœ๊ณ  ๋“ฑ์˜ ์‚ฌํšŒ์  ์ฆ๊ฑฐ(Social Proof)๋Š” ์ „ํ™˜์œจ์„ 34% ๋Œ์–ด์˜ฌ๋ฆฌ๊ณ  ์ธ์ง€๋œ ์‹ ๋ขฐ๋„๋ฅผ 42% ์ฆ๊ฐ€์‹œํ‚ต๋‹ˆ๋‹ค [5]. +* **๋ชฐ์ž…ํ˜• ์‹œ๊ฐ ์ž๋ฃŒ์™€ ๋™์˜์ƒ ํ™œ์šฉ:** 360๋„ ์ œํ’ˆ ์‚ฌ์ง„์ด๋‚˜ AR/VR ์š”์†Œ๋ฅผ ๋„์ž…ํ•ด ์ •์ ์ธ ํŽ˜์ด์ง€๋ฅผ ์—ญ๋™์ ์œผ๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [7, 14]. ์งง์€ ๋ชจ์…˜ ๋น„๋””์˜ค๋‚˜ ์• ๋‹ˆ๋ฉ”์ด์…˜ ํžˆ์–ด๋กœ ์„น์…˜์€ ํŽ˜์ด์ง€ ์ฒด๋ฅ˜ ์‹œ๊ฐ„์„ 27% ํ–ฅ์ƒ์‹œํ‚ต๋‹ˆ๋‹ค [2]. ๋˜ํ•œ, ๋ชจ๋ฐ”์ผ ์‚ฌ์šฉ์ž์—๊ฒŒ ์ ํ•ฉํ•œ ํ‹ฑํ†ก(TikTok) ์Šคํƒ€์ผ์˜ ์„ธ๋กœํ˜• ์ˆํผ ๋น„๋””์˜ค๋‚˜ ๋ผ์ด๋ธŒ ๋น„๋””์˜ค๋ฅผ ์ถ”๊ฐ€ํ•˜๋ฉด ๋” ๋†’์€ ์ฐธ์—ฌ๋„๋ฅผ ์œ ๋„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [15, 16]. + +## ๐Ÿ”— Knowledge Connections +- **Related Topics:** [[Core Web Vitals ์ตœ์ ํ™”]], [[๋ชจ๋ฐ”์ผ ํผ์ŠคํŠธ ๋””์ž์ธ(Mobile-First Design)]], [[์‹œ๊ฐ์  ๊ณ„์ธต ๊ตฌ์กฐ(Visual Hierarchy)]], [[AI ๊ฐœ์ธํ™” ๋ฐ ์ ์‘ํ˜• UX]] +- **Projects/Contexts:** [[Allbirds PWA ๊ธฐ๋ฐ˜ E-commerce ์žฌ์„ค๊ณ„ ์‚ฌ๋ก€]], [[๊ตฌ๋… ๋ฐ•์Šค ์„œ๋น„์Šค์˜ ์ดํƒˆ๋ฅ  ๊ฐ์†Œ(Churn Mitigation) ์‚ฌ๋ก€]] +- **Contradictions/Notes:** ๋งŽ์€ ๊ธฐ๋Šฅ๊ณผ ์ฝ˜ํ…์ธ ๋ฅผ ํ•œ ํ™”๋ฉด์— ์šฑ์—ฌ๋„ฃ๋Š” ์ „ํ†ต์ ์ธ '์—ฌํ–‰ ๊ฐ€๋ฐฉ ์ฑ„์šฐ๊ธฐ(stuffing a suitcase)' ๋ฐฉ์‹์€ ์ธ์ง€์  ๋ถ€ํ•˜๋ฅผ ๋†’์—ฌ ์ „ํ™˜์œจ์„ ๋–จ์–ด๋œจ๋ฆฝ๋‹ˆ๋‹ค. ํ˜„๋Œ€ ์›น ์•„ํ‚คํ…์ฒ˜๋Š” ์ด๋ฅผ ์ง€์–‘ํ•˜๊ณ , ์ „๋žต์  ์—ฌ๋ฐฑ๊ณผ ๋ช…ํ™•ํ•œ ํ—ค๋”ฉ์„ ์‚ฌ์šฉํ•˜์—ฌ ์‚ฌ์šฉ์ž๋ฅผ ๋…ผ๋ฆฌ์ ์œผ๋กœ ์•ˆ๋‚ดํ•˜๋Š” '๋นŒ๋ณด๋“œ(billboard)' ๋ชจ๋ธ์„ ํ•„์ˆ˜์ ์œผ๋กœ ์š”๊ตฌํ•ฉ๋‹ˆ๋‹ค [17]. + +--- +*Last updated: 2026-04-26* \ No newline at end of file diff --git a/00_Raw/Explicit Contracts.md b/00_Raw/Explicit Contracts.md new file mode 100644 index 00000000..22d8aa66 --- /dev/null +++ b/00_Raw/Explicit Contracts.md @@ -0,0 +1,22 @@ +# [[Explicit Contracts]] + +## ๐Ÿ“Œ Brief Summary +๋ช…์‹œ์  ๊ณ„์•ฝ(Explicit Contracts)์€ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ React ์ปดํฌ๋„ŒํŠธ๋ฅผ ์„ค๊ณ„ํ•  ๋•Œ ์ง€์ผœ์•ผ ํ•  ์ฃผ์š” ์›์น™ ์ค‘ ํ•˜๋‚˜๋กœ, ์ปดํฌ๋„ŒํŠธ์˜ ๋ช…ํ™•ํ•œ API๋ฅผ ์ •์˜ํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค [1]. ์ด๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ž…๋ ฅ์œผ๋กœ ๋ฐ›๋Š” ๊ฒƒ(props), ๋ฐ˜ํ™˜ํ•˜๋Š” ๊ฒƒ(์ด๋ฒคํŠธ/์ฝœ๋ฐฑ), ๊ทธ๋ฆฌ๊ณ  ์ ˆ๋Œ€ ํ•˜์ง€ ๋ง์•„์•ผ ํ•  ํ–‰๋™(์˜ˆ: ๋ถ€๋ชจ ์ƒํƒœ์˜ ์ง์ ‘ ๋ณ€ํ˜•)์„ ๋ช…์‹œ์ ์œผ๋กœ ๊ทœ์ •ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค [1]. ์ด๋Ÿฌํ•œ ๊ฐ•๋ ฅํ•œ ๊ณ„์•ฝ์€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋‚ด์—์„œ ์˜ˆ๊ธฐ์น˜ ์•Š์€ ๋™์ž‘์„ ๋ฐฉ์ง€ํ•˜๊ณ  ์ปดํฌ๋„ŒํŠธ์˜ ์˜ˆ์ธก ๊ฐ€๋Šฅ์„ฑ๊ณผ ์žฌ์‚ฌ์šฉ์„ฑ์„ ๋†’์ด๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค [1, 2]. + +## ๐Ÿ“– Core Content +- **์ปดํฌ๋„ŒํŠธ ์„ค๊ณ„์˜ ํ•ต์‹ฌ ๊ทœ์น™:** ๋ช…์‹œ์  ๊ณ„์•ฝ์€ ๋‹จ์ผ ์ฑ…์ž„(Single Responsibility), ์ƒ์†๋ณด๋‹ค ํ•ฉ์„ฑ(Composition Over Inheritance), ์ ‘๊ทผ์„ฑ ์šฐ์„ (Accessibility First)๊ณผ ํ•จ๊ป˜ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ React ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ตฌ์ถ•ํ•˜๊ธฐ ์œ„ํ•œ 4๊ฐ€์ง€ ํ™ฉ๊ธˆ ๋ฒ•์น™ ์ค‘ ํ•˜๋‚˜๋กœ ๊ฐ•์กฐ๋ฉ๋‹ˆ๋‹ค [1]. +- **๋ช…ํ™•ํ•œ API ์„ค๊ณ„ (Props & Events):** + - **Props (ํ”„๋กœํผํ‹ฐ):** ์ปดํฌ๋„ŒํŠธ์˜ API๋Š” ์˜ค์šฉํ•˜๊ธฐ ์–ด๋ ต๊ฒŒ ์ง๊ด€์ ์œผ๋กœ ์„ค๊ณ„๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ตฌํ˜„ ๋ฐฉ์‹์ด ์•„๋‹Œ ์˜๋„(intent)๋ฅผ ์„ค๋ช…ํ•˜๋Š” ์šฉ์–ด๋กœ ํ”„๋กœํผํ‹ฐ๋ฅผ ๋ช…๋ช…ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค(์˜ˆ: `showModalNow` ๋Œ€์‹  `isOpen` ์‚ฌ์šฉ). ๋˜ํ•œ, ํ”„๋กœํผํ‹ฐ์˜ ๊ฐœ์ˆ˜๋ฅผ ์ตœ์†Œํ™”ํ•˜๊ณ  ์•ˆ์ „ํ•œ ๊ธฐ๋ณธ๊ฐ’์„ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค [2]. + - **Events (์ด๋ฒคํŠธ):** ์ด๋ฒคํŠธ ์—ญ์‹œ ๊ณ„์•ฝ์˜ ์ผ๋ถ€์ž…๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์™ธ๋ถ€๋กœ ์ƒํƒœ๋ฅผ ์ „๋‹ฌํ•ด์•ผ ํ•  ๋•Œ(์˜ˆ: '์‚ฌ์šฉ์ž๊ฐ€ ํ™•์ธ์„ ํด๋ฆญํ•จ'), ์ž˜ ๋ช…๋ช…๋œ ์ฝœ๋ฐฑ์„ ์‚ฌ์šฉํ•˜๊ณ  ํ•ญ์ƒ ์ผ๊ด€๋˜๊ณ  ์œ ์šฉํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ํŽ˜์ด๋กœ๋“œ๋กœ ์ „๋‹ฌํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค [2]. +- **์ƒํƒœ์˜ ๊ฒฝ๊ณ„์™€ ์„ฑ๋Šฅ:** ๋ช…ํ™•ํ•œ ๊ณ„์•ฝ์€ ์ œ์–ด ์ปดํฌ๋„ŒํŠธ(Controlled)์™€ ๋น„์ œ์–ด ์ปดํฌ๋„ŒํŠธ(Uncontrolled)์˜ ์ƒํƒœ ์†Œ์œ ๊ถŒ(state ownership)์„ ๋ถ„๋ช…ํžˆ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค [2]. ๋ช…ํ™•ํ•˜๊ฒŒ ์ •์˜๋œ ๊ณ„์•ฝ์€ ์šฐ๋ฐœ์ ์ธ ๋ฆฌ๋ Œ๋”๋ง์˜ ์œ„ํ—˜์„ ๋‚ฎ์ถ”๊ธฐ ๋•Œ๋ฌธ์— ์„ฑ๋Šฅ ํ–ฅ์ƒ์˜ ์ถœ๋ฐœ์ ์ด ๋˜๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค [3]. +- **๋Œ€๊ทœ๋ชจ ํ”„๋ก ํŠธ์—”๋“œ ์•„ํ‚คํ…์ฒ˜์—์„œ์˜ ๋ช…์‹œ์  ๊ณ„์•ฝ:** + - ๋ชจ๋…ธ๋ ˆํฌ(Monorepo)์™€ ๊ฐ™์ด ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ์•„ํ‚คํ…์ฒ˜์—์„œ ๋ชจ๋“ˆ ๊ฐ„์˜ ์˜์กด์„ฑ์€ ๋ช…์‹œ์  ๊ณ„์•ฝ์„ ํ†ตํ•ด ํ•œ ๋ฐฉํ–ฅ์œผ๋กœ๋งŒ ํ˜๋Ÿฌ์•ผ ํ•ฉ๋‹ˆ๋‹ค [4]. + - ๊ธฐ๋Šฅ ๋ถ„ํ•  ์„ค๊ณ„(Feature-Sliced Design, FSD)์—์„œ๋„ ์Šฌ๋ผ์ด์Šค ๊ฒฝ๊ณ„๋งˆ๋‹ค ๋ช…์‹œ์ ์ธ ๊ณต๊ฐœ API(Public API)๋ฅผ ๊ฐ•์ œํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ๋‚ด๋ถ€ ํŒŒ์ผ์˜ ๋”ฅ ์ž„ํฌํŠธ(deep import)๋ฅผ ๋ง‰๊ณ  ์šฐ๋ฐœ์ ์ธ ๊ฒฐํ•ฉ(accidental coupling)์„ ํฌ๊ฒŒ ์ค„์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [5, 6]. + +## ๐Ÿ”— Knowledge Connections +- **Related Topics:** [[Reusable UI Components]], [[Component API Design]], [[Feature-Sliced Design]] +- **Projects/Contexts:** [[React Component Architecture]], [[Monorepo Architecture]] +- **Contradictions/Notes:** ์†Œ์Šค์— ๋ช…์‹œ์  ๊ณ„์•ฝ์˜ ๊ฐœ๋…์ด ์ปดํฌ๋„ŒํŠธ ์ˆ˜์ค€์˜ ์„ค๊ณ„ ์›์น™๋ฟ๋งŒ ์•„๋‹ˆ๋ผ, ๋Œ€๊ทœ๋ชจ ๋ชจ๋…ธ๋ ˆํฌ ํ™˜๊ฒฝ์—์„œ์˜ ํŒจํ‚ค์ง€ ๊ฐ„ ์˜์กด์„ฑ์„ ๊ด€๋ฆฌํ•˜๋Š” ์•„ํ‚คํ…์ฒ˜ ์›์น™์œผ๋กœ๋„ ์ผ๊ด€๋˜๊ฒŒ ์ ์šฉ๋จ์„ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค [1, 4]. + +--- +*Last updated: 2026-04-26* \ No newline at end of file diff --git a/00_Raw/Google Page Experience 2025.md b/00_Raw/Google Page Experience 2025.md new file mode 100644 index 00000000..b7233e5a --- /dev/null +++ b/00_Raw/Google Page Experience 2025.md @@ -0,0 +1,22 @@ +# [[Google Page Experience 2025]] + +## ๐Ÿ“Œ Brief Summary +Google Page Experience 2025๋Š” ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ์—์„œ ์›น์‚ฌ์ดํŠธ ์ˆœ์œ„๋ฅผ ๋งค๊ธฐ๋Š” ๋ฐฉ์‹์„ ์žฌํŽธํ•˜๋Š” ๊ตฌ๊ธ€์˜ ํ•ต์‹ฌ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ์—…๋ฐ์ดํŠธ์ž…๋‹ˆ๋‹ค [1]. ์ด ์—…๋ฐ์ดํŠธ์˜ ์ค‘์‹ฌ์—๋Š” ์›น์‚ฌ์ดํŠธ์˜ ๋กœ๋”ฉ ์†๋„, ์‹œ๊ฐ์  ์•ˆ์ •์„ฑ, ์ƒํ˜ธ์ž‘์šฉ์„ฑ์„ ์ธก์ •ํ•˜๋Š” 'Core Web Vitals'๊ฐ€ ์ž๋ฆฌ ์žก๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค [1]. ํŠนํžˆ 2025๋…„ ์—…๋ฐ์ดํŠธ์˜ ๊ฐ€์žฅ ํฐ ๋ณ€ํ™”๋Š” ๊ธฐ์กด์˜ ์ฒซ ์ž…๋ ฅ ์ง€์—ฐ(FID) ์ง€ํ‘œ๋ฅผ ๊ณต์‹์ ์œผ๋กœ ํ์ง€ํ•˜๊ณ , ์ „๋ฐ˜์ ์ธ ์ƒํ˜ธ์ž‘์šฉ์„ฑ์„ ๋ณด๋‹ค ํฌ๊ด„์ ์œผ๋กœ ์ธก์ •ํ•˜๋Š” INP(Interaction to Next Paint)๋ฅผ ๋„์ž…ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค [1, 2]. ๊ตฌ๊ธ€์€ ํŽ˜์ด์ง€ ๊ฒฝํ—˜์ด ์ฃผ์š” ๋žญํ‚น ์š”์†Œ์ž„์„ ๊ฐ•์กฐํ•˜๊ณ  ์žˆ์œผ๋ฉฐ, ์ด๋ฅผ ์ถฉ์กฑํ•˜๋Š” ์‚ฌ์ดํŠธ๋Š” ๊ฒ€์ƒ‰ ๊ฐ€์‹œ์„ฑ ํ–ฅ์ƒ๊ณผ ๋”๋ถˆ์–ด ๋ฐฉ๋ฌธ์ž ์ „ํ™˜์œจ ๋ฐ ๋งŒ์กฑ๋„๋ฅผ ํฌ๊ฒŒ ๋†’์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [3, 4]. + +## ๐Ÿ“– Core Content +* **๊ฒ€์ƒ‰ ๋žญํ‚น ๋ฐ ๋น„์ฆˆ๋‹ˆ์Šค์— ๋ฏธ์น˜๋Š” ์˜ํ–ฅ:** ๊ตฌ๊ธ€์˜ ํŽ˜์ด์ง€ ๊ฒฝํ—˜(Page Experience) ์•Œ๊ณ ๋ฆฌ์ฆ˜์€ ๊ฒฝ์Ÿ์ด ์น˜์—ดํ•œ ๊ฒ€์ƒ‰์–ด์— ๋Œ€ํ•ด Core Web Vitals(CWV)๋ฅผ ๋žญํ‚น ๊ฐ€์ค‘์น˜์˜ 25~30% ์ˆ˜์ค€์œผ๋กœ ํ†ตํ•ฉํ•˜์—ฌ ๋ฐ˜์˜ํ•ฉ๋‹ˆ๋‹ค [5, 6]. ์ด ๊ธฐ์ค€์„ ํ†ต๊ณผํ•˜๋Š” ์›น์‚ฌ์ดํŠธ๋Š” ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ์—์„œ 8~15%์˜ ๊ฐ€์‹œ์„ฑ ํ–ฅ์ƒ์„ ๊ฒฝํ—˜ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ํ–ฅ์ƒ๋œ UX๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ์‚ฌ์šฉ์ž ์ดํƒˆ๋ฅ ์„ ์ค„์ด๊ณ  ์ „ํ™˜์œจ์„ ๋†’์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [4-6]. + +* **2025๋…„ ํ•ต์‹ฌ ์ง€ํ‘œ (Core Web Vitals):** + * **[[INP (Interaction to Next Paint)]]:** 2025๋…„ ์—…๋ฐ์ดํŠธ์˜ ๊ฐ€์žฅ ์ค‘๋Œ€ํ•œ ๋ณ€ํ™”๋กœ, ๊ธฐ์กด์˜ FID(First Input Delay)๋ฅผ ๋Œ€์ฒดํ–ˆ์Šต๋‹ˆ๋‹ค [1, 2]. ์‚ฌ์šฉ์ž๊ฐ€ ์ƒํ˜ธ์ž‘์šฉ(ํด๋ฆญ, ํƒญ, ํ‚ค๋ณด๋“œ ์ž…๋ ฅ ๋“ฑ)์„ ์‹œ๋„ํ•œ ํ›„ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋‹ค์Œ ํ”„๋ ˆ์ž„์„ ํ‘œ์‹œํ•  ๋•Œ๊นŒ์ง€ ๊ฑธ๋ฆฌ๋Š” ์ „์ฒด ์ง€์—ฐ ์‹œ๊ฐ„์„ ์ธก์ •ํ•˜์—ฌ ์›น์‚ฌ์ดํŠธ์˜ ๋ฐ˜์‘์„ฑ์„ ํ‰๊ฐ€ํ•ฉ๋‹ˆ๋‹ค [2]. + * **[[LCP (Largest Contentful Paint)]]:** ํŽ˜์ด์ง€์˜ ๊ธฐ๋ณธ ์ฃผ์š” ์ฝ˜ํ…์ธ ๊ฐ€ ์‚ฌ์šฉ์ž์—๊ฒŒ ์˜จ์ „ํžˆ ํ‘œ์‹œ๋˜๋Š” ๋ฐ ๊ฑธ๋ฆฌ๋Š” ๋กœ๋”ฉ ์„ฑ๋Šฅ์„ ์ธก์ •ํ•ฉ๋‹ˆ๋‹ค [7]. + * **[[CLS (Cumulative Layout Shift)]]:** ํŽ˜์ด์ง€ ๋กœ๋”ฉ ์ค‘ ์ด๋ฏธ์ง€๋‚˜ ํ…์ŠคํŠธ ๋“ฑ ์‹œ๊ฐ์  ์š”์†Œ๊ฐ€ ์˜ˆ๊ธฐ์น˜ ์•Š๊ฒŒ ์ด๋™ํ•˜๋Š” ์ •๋„๋ฅผ ์ธก์ •ํ•˜์—ฌ ๋ ˆ์ด์•„์›ƒ์˜ ์‹œ๊ฐ์  ์•ˆ์ •์„ฑ์„ ํ‰๊ฐ€ํ•ฉ๋‹ˆ๋‹ค [8]. + +* **ํŽ˜์ด์ง€ ๊ฒฝํ—˜ ์ตœ์ ํ™” ์ „๋žต:** ๊ตฌ๊ธ€ ํŽ˜์ด์ง€ ๊ฒฝํ—˜ 2025 ํ‘œ์ค€์— ๋ถ€ํ•ฉํ•˜๊ธฐ ์œ„ํ•ด ๊ธฐ์—…๊ณผ ๊ฐœ๋ฐœ์ž๋Š” ๋‹ค๋ฐฉ๋ฉด์˜ ๊ธฐ์ˆ ์  ์กฐ์น˜๋ฅผ ์ทจํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ฃผ์š” ์ด๋ฏธ์ง€์— ์ฐจ์„ธ๋Œ€ ํฌ๋งท(WebP, AVIF) ์ ์šฉ ๋ฐ ์••์ถ•์„ ์ง„ํ–‰ํ•˜๊ณ , ์„œ๋ฒ„ ์‘๋‹ต ์‹œ๊ฐ„์„ ๊ฐœ์„ ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค [9, 10]. ๋˜ํ•œ INP ์ง€ํ‘œ ๊ฐœ์„ ์„ ์œ„ํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹คํ–‰ ์‹œ๊ฐ„์„ ์ค„์ด๊ฑฐ๋‚˜ ๋น„ํ•ต์‹ฌ ์Šคํฌ๋ฆฝํŠธ ๋กœ๋“œ๋ฅผ ์ง€์—ฐ์‹œํ‚ค๊ณ , CLS ๋ฐฉ์ง€๋ฅผ ์œ„ํ•ด ์ด๋ฏธ์ง€๋‚˜ ๋™์˜์ƒ์— ๊ณ ์ •๋œ ํฌ๊ธฐ(Dimensions)๋ฅผ ํ• ๋‹นํ•˜๋Š” ์กฐ์น˜๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค [11, 12]. + +## ๐Ÿ”— Knowledge Connections +- **Related Topics:** [[Core Web Vitals]], [[INP (Interaction to Next Paint)]], [[LCP (Largest Contentful Paint)]], [[CLS (Cumulative Layout Shift)]], [[Search Engine Optimization (SEO)]] +- **Projects/Contexts:** [[์›น ์„ฑ๋Šฅ ์ตœ์ ํ™” (Web Performance Optimization)]], [[ํ”„๋ก ํŠธ์—”๋“œ ์„ฑ๋Šฅ ์ตœ์ ํ™” (Frontend Performance Optimization)]], [[ํ™ˆํŽ˜์ด์ง€ UX ๊ฐœ์„ ]] +- **Contradictions/Notes:** ์†Œ์Šค ๊ฐ„ 2025๋…„ Core Web Vitals์˜ '์šฐ์ˆ˜(Good)' ์ž„๊ณ„๊ฐ’์— ๋Œ€ํ•œ ์„ธ๋ถ€์ ์ธ ์ˆ˜์น˜ ์ฐจ์ด๊ฐ€ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ์ผ๋ถ€ ์†Œ์Šค๋Š” ๊ธฐ์กด ๊ตฌ๊ธ€ ๊ฐ€์ด๋“œ๋ผ์ธ์„ ์ธ์šฉํ•˜์—ฌ LCP 2.5์ดˆ ์ด๋‚ด, CLS 0.1 ๋ฏธ๋งŒ, INP 200ms ๋ฏธ๋งŒ์„ ์šฐ์ˆ˜ ๊ธฐ์ค€์œผ๋กœ ์ œ์‹œํ•ฉ๋‹ˆ๋‹ค [2, 7, 8]. ๋ฐ˜๋ฉด, ๋‹ค๋ฅธ ์†Œ์Šค๋Š” 2025๋…„์— ์ž„๊ณ„๊ฐ’์ด ๋”์šฑ ์—„๊ฒฉํ•ด์ ธ LCP๋Š” 2.0์ดˆ ๋ฏธ๋งŒ, CLS๋Š” 0.08 ๋ฏธ๋งŒ, INP๋Š” 150ms ๋ฏธ๋งŒ์„ ์ถฉ์กฑํ•ด์•ผ ํ•œ๋‹ค๊ณ  ๋ช…์‹œํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค [13-15]. + +--- +*Last updated: 2026-04-26* \ No newline at end of file diff --git a/00_Raw/Hydration Mismatch.md b/00_Raw/Hydration Mismatch.md new file mode 100644 index 00000000..31c888dc --- /dev/null +++ b/00_Raw/Hydration Mismatch.md @@ -0,0 +1,24 @@ +# [[Hydration Mismatch]] + +## ๐Ÿ“Œ Brief Summary +Hydration Mismatch๋Š” ์„œ๋ฒ„์—์„œ ๋ Œ๋”๋ง๋œ HTML ์ฝ˜ํ…์ธ ์™€ ํด๋ผ์ด์–ธํŠธ ์ธก์—์„œ ๊ธฐ๋Œ€ํ•˜๊ฑฐ๋‚˜ ์ƒ์„ฑํ•˜๋Š” ์ฝ˜ํ…์ธ ๊ฐ€ ์„œ๋กœ ๋‹ค๋ฅผ ๋•Œ ๋ฐœ์ƒํ•˜๋Š” ์˜ค๋ฅ˜ ํ˜„์ƒ์ž…๋‹ˆ๋‹ค [1, 2]. ํŠนํžˆ React ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ(RSC) ํ™˜๊ฒฝ์ด๋‚˜ CSS-in-JS(์˜ˆ: styled-components)๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ, ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ ๊ฐ„์— ๋‹ค๋ฅธ ๋™์  ๋ฐ์ดํ„ฐ๋‚˜ CSS ํด๋ž˜์Šค ์ด๋ฆ„์ด ์ƒ์„ฑ๋  ๊ฒฝ์šฐ ํ”ํ•˜๊ฒŒ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค [2, 3]. ์ด๋ฅผ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ ๊ฒฝ๊ณ„์—์„œ ์ผ๊ด€๋œ ๋ Œ๋”๋ง ๊ฒฐ๊ณผ๋ฌผ๊ณผ ์•ˆ์ •์ ์ธ ํ•ด์‹œ ๊ฐ’์„ ์ƒ์„ฑํ•˜๋„๋ก ๊ตฌ์„ฑํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค [3, 4]. + +## ๐Ÿ“– Core Content +- **Hydration์˜ ์›๋ฆฌ ๋ฐ Mismatch ๋ฐœ์ƒ ์กฐ๊ฑด** + React์—์„œ Hydration์€ ์„œ๋ฒ„์—์„œ ๋ Œ๋”๋ง๋˜์–ด ์ „๋‹ฌ๋œ ์ •์  HTML์— ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ์™€ ์ƒํƒœ(State)๋ฅผ ์—ฐ๊ฒฐํ•˜์—ฌ ์ƒํ˜ธ์ž‘์šฉ ๊ฐ€๋Šฅํ•œ UI๋กœ ๋งŒ๋“œ๋Š” ๊ณผ์ •์ž…๋‹ˆ๋‹ค [1]. Next.js 15์˜ App Router์™€ ๊ฐ™์€ ๊ตฌ์กฐ์—์„œ๋Š” ์ด ๊ณผ์ •์ด ์ฃผ๋กœ ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ(Client Components)์—์„œ๋งŒ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค [1]. Hydration Mismatch๋Š” ์„œ๋ฒ„๊ฐ€ ์ƒ์„ฑํ•œ ์ฝ˜ํ…์ธ ์™€ ํด๋ผ์ด์–ธํŠธ๊ฐ€ ๋ Œ๋”๋ง ์‹œ ๊ธฐ๋Œ€ํ•˜๋Š” ์ฝ˜ํ…์ธ ๊ฐ€ ๋‹ค๋ฅผ ๋•Œ ๋‚˜ํƒ€๋‚˜๋ฉฐ, ํƒ€์ž„์Šคํƒฌํ”„์™€ ๊ฐ™์ด ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ์—์„œ ๊ฐ๊ธฐ ๋‹ค๋ฅด๊ฒŒ ๊ณ„์‚ฐ๋˜๋Š” ๋™์  ๋ฐ์ดํ„ฐ๊ฐ€ ๋Œ€ํ‘œ์ ์ธ ์›์ธ์ž…๋‹ˆ๋‹ค [2]. + +- **CSS-in-JS(Styled Components) ํ™˜๊ฒฝ์—์„œ์˜ ์œ„ํ—˜์„ฑ** + Next.js App Router์—์„œ Styled Components๊ฐ€ ์ž‘๋™ํ•˜๋„๋ก Style Registry ํŒจํ„ด์„ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ, ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์„œ๋กœ ๋‹ค๋ฅธ CSS ํด๋ž˜์Šค ์ด๋ฆ„์„ ์ƒ์„ฑํ•˜๋ฉด Hydration Mismatch๊ฐ€ ๋ฐœ์ƒํ•  ์œ„ํ—˜์ด ์žˆ์Šต๋‹ˆ๋‹ค [3]. ๋˜ํ•œ, ๋‹คํฌ ๋ชจ๋“œ์™€ ๋ผ์ดํŠธ ๋ชจ๋“œ ๊ฐ„์— ํ…Œ๋งˆ๋ฅผ ์ „ํ™˜ํ•  ๋•Œ ์•ˆ์ •์ ์ธ ํด๋ž˜์Šค ์ด๋ฆ„ ํ•ด์‹œ(hash)๊ฐ€ ์œ ์ง€๋˜์ง€ ์•Š์œผ๋ฉด ๋™์ผํ•œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [4]. + +- **ํ•ด๊ฒฐ ๋ฐ ์™„ํ™” ์ „๋žต** + - **๋™์  ๋ฐ์ดํ„ฐ ๋ Œ๋”๋ง ์ฒ˜๋ฆฌ:** ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„์—์„œ ๊ฐ’์ด ๋‹ฌ๋ผ์งˆ ์ˆ˜ ์žˆ๋Š” ๋™์  ์š”์†Œ๋Š”, ํด๋ผ์ด์–ธํŠธ์—์„œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งˆ์šดํŠธ๋œ ์ดํ›„์— ๋ Œ๋”๋ง๋˜๋„๋ก ์ฒ˜๋ฆฌํ•˜์—ฌ ๋ถˆ์ผ์น˜๋ฅผ ํ”ผํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค [2]. + - **์ปดํŒŒ์ผ๋Ÿฌ ์˜ต์…˜ ํ™œ์šฉ:** Styled Components๋ฅผ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ `next.config.js`์—์„œ `styledComponents` ์ปดํŒŒ์ผ๋Ÿฌ ์˜ต์…˜์„ ํ™œ์„ฑํ™”ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ ๊ฒฝ๊ณ„์—์„œ ์ผ๊ด€๋œ CSS ํด๋ž˜์Šค ์ด๋ฆ„ ์ƒ์„ฑ์„ ๋ณด์žฅํ•˜์—ฌ Hydration Mismatch๋ฅผ ์™„ํ™”ํ•ฉ๋‹ˆ๋‹ค [3]. + - **์•ˆ์ •์ ์ธ ํ…Œ๋งˆ ๊ฐ์ฒด ์ „๋‹ฌ:** ํ…Œ๋งˆ ์ „ํ™˜ ์‹œ Hydration Mismatch๋ฅผ ๋ฐฉ์ง€ํ•˜๋ ค๋ฉด, `createTheme` ๋“ฑ์„ ํ™œ์šฉํ•˜์—ฌ ์ƒ์„ฑ๋œ ํ…Œ๋งˆ ๊ฐ์ฒด๋ฅผ `ThemeProvider`์— ์ œ๋Œ€๋กœ ์ „๋‹ฌํ•จ์œผ๋กœ์จ ํ…Œ๋งˆ ๊ฐ„ ์ „ํ™˜์—๋„ ํด๋ž˜์Šค ์ด๋ฆ„ ํ•ด์‹œ๊ฐ€ ์•ˆ์ •์ ์œผ๋กœ ์œ ์ง€๋˜๋„๋ก ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค [4, 5]. + +## ๐Ÿ”— Knowledge Connections +- **Related Topics:** [[React Server Components (RSC)]], [[Styled Components]], [[Next.js App Router]], [[CSS-in-JS]] +- **Projects/Contexts:** [[Next.js 15 ๊ธฐ๋ฐ˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ํด๋ผ์ด์–ธํŠธ ๋ฐ ์„œ๋ฒ„ ๋ Œ๋”๋ง ๊ตฌ์„ฑ]], [[Styled Components์˜ ๊ธ€๋กœ๋ฒŒ ์Šคํƒ€์ผ ๋ฐ ํ…Œ๋งˆ ๊ตฌํ˜„]] +- **Contradictions/Notes:** ์†Œ์Šค ๊ฐ„์˜ ๋ชจ์ˆœ์ ์€ ์—†์œผ๋ฉฐ, ๋™์  ๋ Œ๋”๋ง์ด๋‚˜ ๋Ÿฐํƒ€์ž„ CSS ์ƒ์„ฑ ์‹œ ๋ฐœ์ƒํ•˜๋Š” ์„œ๋ฒ„-ํด๋ผ์ด์–ธํŠธ ๋ถˆ์ผ์น˜๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์ปดํŒŒ์ผ๋Ÿฌ ๋‹จ์˜ ์„ค์ •(์˜ˆ: `styledComponents` ํ™œ์„ฑํ™”)์ด๋‚˜ ์ •์ ์ด๊ณ  ์•ˆ์ •์ ์ธ ํด๋ž˜์Šค ๋„ค์ž„ ์‚ฌ์šฉ์ด ๊ณตํ†ต์ ์ธ ํ•ด๊ฒฐ์ฑ…์œผ๋กœ ์ œ์‹œ๋ฉ๋‹ˆ๋‹ค [2, 3]. + +--- +*Last updated: 2026-04-26* \ No newline at end of file diff --git a/00_Raw/INP (Interaction to Next Paint).md b/00_Raw/INP (Interaction to Next Paint).md new file mode 100644 index 00000000..ce85b7df --- /dev/null +++ b/00_Raw/INP (Interaction to Next Paint).md @@ -0,0 +1,40 @@ +# [[INP (Interaction to Next Paint)]] + +## ๐Ÿ“Œ Brief Summary +INP(Interaction to Next Paint)๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์›นํŽ˜์ด์ง€์™€ ์ฒ˜์Œ ์ƒํ˜ธ์ž‘์šฉ(ํด๋ฆญ, ํƒญ, ํ‚ค๋ณด๋“œ ์ž…๋ ฅ ๋“ฑ)ํ•œ ์‹œ์ ๋ถ€ํ„ฐ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์‹œ๊ฐ์ ์ธ ๋ฐ˜์‘(๋‹ค์Œ ํ”„๋ ˆ์ž„)์„ ํ™”๋ฉด์— ํ‘œ์‹œํ•  ๋•Œ๊นŒ์ง€ ๊ฑธ๋ฆฌ๋Š” ์ „์ฒด ์ƒํ˜ธ์ž‘์šฉ ์ง€์—ฐ ์‹œ๊ฐ„์„ ์ธก์ •ํ•˜๋Š” Core Web Vitals ์ง€ํ‘œ์ž…๋‹ˆ๋‹ค [1, 2]. 2024~2025๋…„์„ ๊ธฐ์ ์œผ๋กœ ๊ธฐ์กด์˜ FID(First Input Delay)๋ฅผ ๊ณต์‹์ ์œผ๋กœ ๋Œ€์ฒดํ•˜์˜€์œผ๋ฉฐ, ์ฒซ ์ž…๋ ฅ ์ง€์—ฐ๋งŒ ์ธก์ •ํ•˜๋˜ FID์™€ ๋‹ฌ๋ฆฌ ์ž…๋ ฅ ์ง€์—ฐ(Input Delay), ์ฒ˜๋ฆฌ ์‹œ๊ฐ„(Processing Time), ํ‘œ์‹œ ์ง€์—ฐ(Presentation Delay)์„ ๋ชจ๋‘ ํฌ๊ด„ํ•˜์—ฌ ์ธก์ •ํ•˜๋ฏ€๋กœ ์‹ค์ œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๋” ์ •ํ™•ํ•˜๊ฒŒ ๋ฐ˜์˜ํ•ฉ๋‹ˆ๋‹ค [3-7]. + +## ๐Ÿ“– Core Content +**INP์˜ ์ค‘์š”์„ฑ ๋ฐ ๋น„์ฆˆ๋‹ˆ์Šค ์˜ํ–ฅ** +INP๋Š” Google์˜ ๊ฒ€์ƒ‰ ์ˆœ์œ„ ์•Œ๊ณ ๋ฆฌ์ฆ˜(Page Experience)์— ์ง์ ‘์ ์ธ ์˜ํ–ฅ์„ ๋ฏธ์น˜๋Š” ํ•ต์‹ฌ ์„ฑ๊ณผ ์ง€ํ‘œ์ž…๋‹ˆ๋‹ค [4, 8, 9]. INP ๊ธฐ์ค€์„ ์ถฉ์กฑํ•˜์ง€ ๋ชปํ•ด ์‚ฌ์ดํŠธ ์ƒํ˜ธ์ž‘์šฉ์ด ์ง€์—ฐ๋  ๊ฒฝ์šฐ ์‚ฌ์šฉ์ž ์ฐธ์—ฌ๋„๊ฐ€ 23% ๊ฐ์†Œํ•˜๋ฉฐ ๊ฒ€์ƒ‰ ํฌ๋กค๋ง ์šฐ์„ ์ˆœ์œ„์™€ ๊ฒ€์ƒ‰ ์ˆœ์œ„๊ฐ€ ํ•˜๋ฝํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค [8, 10]. FID๊ฐ€ INP๋กœ ๊ต์ฒด๋จ์— ๋”ฐ๋ผ, 2025๋…„ ์›น ์„ฑ๋Šฅ ์ตœ์ ํ™”์—์„œ๋Š” ํŽ˜์ด์ง€ ๋‚ด์˜ ๋ชจ๋“  ๋ฒ„ํŠผ, ์Šคํฌ๋กค, ํƒญ ์ƒํ˜ธ์ž‘์šฉ์˜ ์‘๋‹ต์„ฑ์„ ๊ฐœ์„ ํ•˜๋Š” ๊ฒƒ์ด ํ•„์ˆ˜์ ์ด ๋˜์—ˆ์Šต๋‹ˆ๋‹ค [11]. + +**ํ‰๊ฐ€ ๊ธฐ์ค€ (Thresholds)** +Google์€ INP ์„ฑ๋Šฅ์„ ํ‰๊ฐ€ํ•˜๋Š” ๊ตฌ์ฒด์ ์ธ ์ž„๊ณ„๊ฐ’์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. +* **Good (์šฐ์ˆ˜):** 200ms ์ดํ•˜ (์ผ๋ถ€ ๊ธฐ์ค€์—์„œ๋Š” 150ms ๋ฏธ๋งŒ์„ ์š”๊ตฌํ•˜๊ธฐ๋„ ํ•จ) [5, 6, 11, 12]. +* **Needs Improvement (๊ฐœ์„  ํ•„์š”):** 200ms ~ 500ms ์‚ฌ์ด [6, 13]. +* **Poor (๋ถˆ๋Ÿ‰):** 500ms ์ดˆ๊ณผ [5, 6]. + +**INP ์ €ํ•˜์˜ ์ฃผ์š” ์›์ธ** +INP ์ ์ˆ˜๊ฐ€ ๋‚˜๋น ์ง€๋Š” ์ฃผ๋œ ์ด์œ ๋Š” ๋ธŒ๋ผ์šฐ์ €์˜ ๋ฉ”์ธ ์Šค๋ ˆ๋“œ(Main thread)๋ฅผ ์ฐจ๋‹จํ•˜๋Š” ์š”์†Œ๋“ค ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. +* **๊ธด JavaScript ์ž‘์—…:** ๋ฉ”์ธ ์Šค๋ ˆ๋“œ๋ฅผ 50ms ์ด์ƒ ์ฐจ๋‹จํ•˜๋Š” ๋ฌด๊ฑฐ์šด ๋™๊ธฐ์‹ ์ฒ˜๋ฆฌ๋‚˜ ๋ณต์žกํ•œ ๊ณ„์‚ฐ [7, 14]. +* **๊ณผ๋„ํ•œ ์Šคํฌ๋ฆฝํŠธ ์‹คํ–‰:** ์ตœ์ ํ™”๋˜์ง€ ์•Š์€ ํƒ€์‚ฌ(Third-party) ์Šคํฌ๋ฆฝํŠธ ์‹คํ–‰์ด๋‚˜ ๊ฑฐ๋Œ€ํ•œ JavaScript ๋ฒˆ๋“ค, ๋ถ€์กฑํ•œ ์ฝ”๋“œ ๋ถ„ํ• (Code splitting) [7, 14, 15]. +* **๋ฌด๊ฑฐ์šด ์• ๋‹ˆ๋ฉ”์ด์…˜:** ๋ ˆ์ด์•„์›ƒ์ด๋‚˜ ํŽ˜์ธํŠธ๋ฅผ ํŠธ๋ฆฌ๊ฑฐํ•˜๋Š” ๊ณผ๋„ํ•œ CSS ์• ๋‹ˆ๋ฉ”์ด์…˜ ์—ฐ์‚ฐ [7, 14]. + +**INP ์ตœ์ ํ™” ์ „๋žต** +์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ INP๋ฅผ ํ–ฅ์ƒ์‹œํ‚ค๋ ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ธฐ์ˆ ์  ์ตœ์ ํ™”๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. +* **์ž‘์—… ์ฒญํฌ ๋ถ„ํ• :** `setTimeout` ๋“ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ 50ms ๋ฏธ๋งŒ์˜ ์ฒญํฌ๋กœ ๊ธด ์ž‘์—…์„ ์ชผ๊ฐœ์–ด ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋‹ค๋ฅธ ๋ Œ๋”๋ง ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋„๋ก ์ œ์–ด๊ถŒ์„ ์–‘๋ณด(Yield)ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค [1, 5, 16, 17]. +* **Web Workers ๋„์ž…:** ๋ฌด๊ฑฐ์šด CPU ์—ฐ์‚ฐ์„ ๋ฉ”์ธ ์Šค๋ ˆ๋“œ์—์„œ ๋ถ„๋ฆฌํ•˜์—ฌ ๋ฐฑ๊ทธ๋ผ์šด๋“œ(Web Worker)์—์„œ ์ฒ˜๋ฆฌํ•˜๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค [1, 18]. +* **์Šคํฌ๋ฆฝํŠธ ์ง€์—ฐ ๋ฐ ์ตœ์†Œํ™”:** ๋ Œ๋”๋ง์— ํ•„์ˆ˜์ ์ด์ง€ ์•Š์€ ํƒ€์‚ฌ ์Šคํฌ๋ฆฝํŠธ ๋กœ๋”ฉ์„ ์ง€์—ฐ(defer)์‹œํ‚ค๊ณ  ์ฝ”๋“œ ๋ถ„ํ• (Code splitting)๊ณผ ์ง€์—ฐ ๋กœ๋”ฉ(Lazy loading)์„ ์ ์šฉํ•ฉ๋‹ˆ๋‹ค [1, 19, 20]. +* **์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ ์ตœ์ ํ™”:** Debounce ๋ฐ Throttle ๊ธฐ๋ฒ•์„ ์ ์šฉํ•˜์—ฌ ์ด๋ฒคํŠธ ์‹คํ–‰ ๋นˆ๋„๋ฅผ ์ œ์–ดํ•ฉ๋‹ˆ๋‹ค [1, 21]. +* **๋น„ํ•ต์‹ฌ ์ž‘์—… ํ›„์ˆœ์œ„ ์ฒ˜๋ฆฌ:** `requestIdleCallback`์„ ์‚ฌ์šฉํ•˜์—ฌ ์ค‘์š”ํ•˜์ง€ ์•Š์€ ์ž‘์—…์€ ๋ธŒ๋ผ์šฐ์ € ์œ ํœด ์‹œ๊ฐ„์— ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค [22, 23]. +* **์• ๋‹ˆ๋ฉ”์ด์…˜ ์ตœ์ ํ™”:** ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‹คํ–‰ ์‹œ ๋ธŒ๋ผ์šฐ์ € ๋ ˆ์ด์•„์›ƒ์„ ๋‹ค์‹œ ๊ณ„์‚ฐํ•˜์ง€ ์•Š๋„๋ก GPU ๊ฐ€์†์„ ํ™œ์šฉํ•˜๋Š” `transform` ๋ฐ `opacity` ์†์„ฑ๋งŒ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค [24, 25]. + +**์ธก์ • ๋ฐ ๋ชจ๋‹ˆํ„ฐ๋ง ๋„๊ตฌ** +INP๋ฅผ ๋น„๋กฏํ•œ Core Web Vitals๋ฅผ ํ…Œ์ŠคํŠธํ•˜๊ณ  ๋ชจ๋‹ˆํ„ฐ๋งํ•˜๊ธฐ ์œ„ํ•ด Google PageSpeed Insights(๋น ๋ฅธ ์ง„๋‹จ), Lighthouse(๊ธด JS ์ž‘์—… ๋“ฑ ๊ธฐ์ˆ ์  ๋””๋ฒ„๊น…์— ์œ ์šฉ), Google Search Console(์‹ค์ œ ์‚ฌ์šฉ์ž ๋ฐ์ดํ„ฐ ๊ธฐ๋ฐ˜์˜ ์‚ฌ์ดํŠธ ์ „์ฒด ์„ฑ๋Šฅ ํ™•์ธ) ๋“ฑ์˜ ๋„๊ตฌ๊ฐ€ ๊ถŒ์žฅ๋ฉ๋‹ˆ๋‹ค [9, 26-28]. + +## ๐Ÿ”— Knowledge Connections +- **Related Topics:** [[Core Web Vitals]], [[FID (First Input Delay)]], [[LCP (Largest Contentful Paint)]], [[CLS (Cumulative Layout Shift)]], [[JavaScript Optimization]] +- **Projects/Contexts:** [[Google Page Experience 2025 Update]], [[Technical SEO]], [[Web Performance Optimization]] +- **Contradictions/Notes:** 2025๋…„ ๊ธฐ์ค€ '์šฐ์ˆ˜ํ•œ(Good)' INP ์ž„๊ณ„๊ฐ’์— ๋Œ€ํ•˜์—ฌ ์†Œ์Šค ๊ฐ„ ์•ฝ๊ฐ„์˜ ์ˆ˜์น˜ ์ฐจ์ด๊ฐ€ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ์†Œ์Šค [12]๋Š” 150ms ๋ฏธ๋งŒ์„ ์ตœ์  ๊ธฐ์ค€์œผ๋กœ ์ œ์‹œํ•œ ๋ฐ˜๋ฉด, ์†Œ์Šค [11], [5], [6], [29]์—์„œ๋Š” 200ms ์ดํ•˜๋ฅผ ์šฐ์ˆ˜ํ•œ ๊ธฐ์ค€์œผ๋กœ ๋ช…์‹œํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. + +--- +*Last updated: 2026-04-26* \ No newline at end of file diff --git a/00_Raw/Incremental Static Regeneration (ISR).md b/00_Raw/Incremental Static Regeneration (ISR).md new file mode 100644 index 00000000..482754ec --- /dev/null +++ b/00_Raw/Incremental Static Regeneration (ISR).md @@ -0,0 +1,27 @@ +# [[Incremental Static Regeneration (ISR)]] + +## ๐Ÿ“Œ Brief Summary +Incremental Static Regeneration (ISR)์€ ์ •์  ์‚ฌ์ดํŠธ ์ƒ์„ฑ(SSG)์˜ ๋งค์šฐ ๋น ๋ฅธ ์†๋„์™€ ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง(SSR)์˜ ์ตœ์‹ ์„ฑ(freshness)์„ ๊ฒฐํ•ฉํ•œ ํ•˜์ด๋ธŒ๋ฆฌ๋“œ ์›น ๋ Œ๋”๋ง ์ „๋žต์ž…๋‹ˆ๋‹ค [1]. ์ „์ฒด ์‚ฌ์ดํŠธ๋ฅผ ๋‹ค์‹œ ๋นŒ๋“œํ•  ํ•„์š” ์—†์ด ๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ ํŠน์ • ์ •์  ํŽ˜์ด์ง€๋ฅผ ๋Ÿฐํƒ€์ž„์— ์„ ํƒ์ ์œผ๋กœ ์—…๋ฐ์ดํŠธ ๋ฐ ์žฌ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค [2-4]. ์ œํ’ˆ ์นดํƒˆ๋กœ๊ทธ๋‚˜ ๋‰ด์Šค ์‚ฌ์ดํŠธ์ฒ˜๋Ÿผ ์ฃผ๊ธฐ์ ์œผ๋กœ ๋ณ€๊ฒฝ๋˜๋Š” ์ฝ˜ํ…์ธ ๋ฅผ ๋น ๋ฅด๊ฒŒ ์ œ๊ณตํ•˜๋Š” ๋ฐ ์ด์ƒ์ ์ธ ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค [1, 5]. + +## ๐Ÿ“– Core Content +**์ž‘๋™ ํ”„๋กœ์„ธ์Šค** +ISR์€ ์„œ๋ฒ„ ๋ถ€ํ•˜๋ฅผ ์ตœ์†Œํ™”ํ•˜๋ฉด์„œ๋„ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋น ๋ฅธ ํŽ˜์ด์ง€๋ฅผ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•ด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋‹จ๊ณ„๋กœ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค [1]: +* ๋น ๋ฅธ ์ดˆ๊ธฐ ์ œ๊ณต: ์บ์‹œ์—์„œ ์ •์  ํŽ˜์ด์ง€๋ฅผ ์ฆ‰์‹œ ์ œ๊ณตํ•˜์—ฌ ๋กœ๋”ฉ ์†๋„๋ฅผ ๊ทน๋Œ€ํ™”ํ•ฉ๋‹ˆ๋‹ค. +* ์žฌ๊ฒ€์ฆ(Revalidation): ์„ค์ •๋œ ์žฌ๊ฒ€์ฆ ๊ธฐ๊ฐ„(revalidation period)์ด ๋งŒ๋ฃŒ๋˜์—ˆ๋Š”์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค. +* ๋ฐฑ๊ทธ๋ผ์šด๋“œ ์žฌ์ƒ์„ฑ: ์žฌ๊ฒ€์ฆ ๊ธฐ๊ฐ„์ด ์ง€๋‚œ ๊ฒฝ์šฐ, ๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ ํŽ˜์ด์ง€๋ฅผ ์ƒˆ๋กœ ์žฌ์ƒ์„ฑ(Regenerate)ํ•ฉ๋‹ˆ๋‹ค. +* ์—…๋ฐ์ดํŠธ๋œ ํŽ˜์ด์ง€ ์ œ๊ณต: ์žฌ์ƒ์„ฑ์ด ์™„๋ฃŒ๋˜๋ฉด, ์ดํ›„ ๋“ค์–ด์˜ค๋Š” ๋‹ค์Œ ์š”์ฒญ๋ถ€ํ„ฐ๋Š” ์—…๋ฐ์ดํŠธ๋œ ํŽ˜์ด์ง€๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. + +**์„ฑ๋Šฅ ๋ฐ SEO ์ด์ ** +ISR ๋ฐฉ์‹์€ 95-99%์˜ ๋†’์€ ์บ์‹œ ์ ์ค‘๋ฅ (Cache hit rate)์„ ๋ณด์ด๋ฉฐ, ์ฒซ ๋ฐ”์ดํŠธ ๋„๋‹ฌ ์‹œ๊ฐ„(TTFB)์„ 20-50ms ์ˆ˜์ค€์œผ๋กœ ๋‹จ์ถ•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค (์ „ํ†ต์ ์ธ SSR์˜ ๊ฒฝ์šฐ 200-800ms) [1]. ์„œ๋ฒ„ CPU ์‚ฌ์šฉ๋Ÿ‰์€ ๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ๋งŒ ๋ฐœ์ƒํ•˜๋ฏ€๋กœ ๋‚ฎ๊ฒŒ ์œ ์ง€๋ฉ๋‹ˆ๋‹ค [1]. +์ด๋Ÿฌํ•œ ์„ฑ๋Šฅ ํ–ฅ์ƒ์€ ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”(SEO) ๋ฐ ์ฝ”์–ด ์›น ๋ฐ”์ดํƒˆ(Core Web Vitals) ๊ฐœ์„ ์œผ๋กœ ์ง๊ฒฐ๋ฉ๋‹ˆ๋‹ค [1, 6]. ์‹ค์ œ๋กœ 10,000๊ฐœ์˜ ์ œํ’ˆ์„ ๊ฐ€์ง„ ์ „์ž์ƒ๊ฑฐ๋ž˜ ์‚ฌ์ดํŠธ๋ฅผ CSR์—์„œ Next.js ISR๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•œ ์‚ฌ๋ก€์—์„œ๋Š” TTFB๊ฐ€ 50ms๋กœ ๋‹จ์ถ•๋˜๊ณ  LCP๊ฐ€ 'Good(1.8s)' ๋“ฑ๊ธ‰์œผ๋กœ ํ–ฅ์ƒ๋˜์—ˆ์œผ๋ฉฐ, ์˜ค๊ฐ€๋‹‰ ํŠธ๋ž˜ํ”ฝ์ด 70% ์ฆ๊ฐ€ํ•˜๋Š” ๊ฒฐ๊ณผ๋ฅผ ์–ป์—ˆ์Šต๋‹ˆ๋‹ค [7, 8]. + +**์‚ฌ์šฉ ์‚ฌ๋ก€ ๋ฐ ๊ตฌํ˜„** +ISR์€ ๋งค์‹œ๊ฐ„ ๋˜๋Š” ๋งค์ผ ์—…๋ฐ์ดํŠธ๋˜๋Š” ๋ฐ˜์ •์ (semi-static) ์ฝ˜ํ…์ธ (์˜ˆ: ์ œํ’ˆ, ๊ธฐ์‚ฌ)์— ๊ฐ€์žฅ ์ ํ•ฉํ•œ ์ „๋žต์ž…๋‹ˆ๋‹ค [5, 9]. Next.js์™€ ๊ฐ™์€ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ํ†ตํ•ด ์‰ฝ๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์ด ๊ธฐ๋Šฅ์€ ํ•˜์ด๋ธŒ๋ฆฌ๋“œ ๋ Œ๋”๋ง ์•„ํ‚คํ…์ฒ˜์˜ ํ•ต์‹ฌ์„ ์ด๋ฃน๋‹ˆ๋‹ค [2, 8]. ์‹ค์‹œ๊ฐ„ ๋ฐ์ดํ„ฐ๊ฐ€ ํ•„์ˆ˜์ ์ธ ํ™˜๊ฒฝ์ด ์•„๋‹ˆ๋ผ๋ฉด, ์ธํ”„๋ผ ๋น„์šฉ๊ณผ ๋กœ๋”ฉ ์‹œ๊ฐ„์„ ์ ˆ๊ฐํ•  ์ˆ˜ ์žˆ๋Š” ํ›Œ๋ฅญํ•œ ๋Œ€์•ˆ์ž…๋‹ˆ๋‹ค [10]. + +## ๐Ÿ”— Knowledge Connections +- **Related Topics:** [[Static Site Generation (SSG)]], [[Server-Side Rendering (SSR)]], [[Time to First Byte (TTFB)]], [[Core Web Vitals]] +- **Projects/Contexts:** [[Next.js Framework]], [[E-commerce Migration Case Study]] +- **Contradictions/Notes:** ์†Œ์Šค์— ํŠน๋ณ„ํ•œ ๋ชจ์ˆœ์ ์€ ์—†์œผ๋‚˜, ์ฃผ์˜ํ•  ์ ์œผ๋กœ ์ฝ˜ํ…์ธ  ์ตœ์‹ ํ™”๊ฐ€ ์„ค์ •๋œ ์žฌ๊ฒ€์ฆ ์ฃผ๊ธฐ(revalidate period)๋งŒํผ ์ง€์—ฐ๋œ๋‹ค๋Š” ์ ์ด ๋ช…์‹œ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ฃผ์‹ ๊ฐ€๊ฒฉ, ์‹ค์‹œ๊ฐ„ ์ฑ„ํŒ…๊ณผ ๊ฐ™์€ '์™„์ „ํ•œ ์‹ค์‹œ๊ฐ„(Real-time)' ๋ฐ˜์˜์ด ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ์˜ ๊ฒฝ์šฐ์—๋Š” ISR๋ณด๋‹ค [[Server-Side Rendering (SSR)]] ๋ฐฉ์‹์ด ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค [1, 11]. + +--- +*Last updated: 2026-04-26* \ No newline at end of file diff --git a/00_Raw/Kiwi.com Migration.md b/00_Raw/Kiwi.com Migration.md new file mode 100644 index 00000000..4cf3a083 --- /dev/null +++ b/00_Raw/Kiwi.com Migration.md @@ -0,0 +1,24 @@ +# [[Kiwi.com Migration]] + +## ๐Ÿ“Œ Brief Summary +Kiwi.com Migration์€ ์›น์‚ฌ์ดํŠธ์˜ ํ”„๋ก ํŠธ์—”๋“œ ์„ฑ๋Šฅ์„ ์ตœ์ ํ™”ํ•˜๊ธฐ ์œ„ํ•ด ๊ธฐ์กด์˜ `styled-components`์—์„œ `Tailwind CSS`๋กœ ์Šคํƒ€์ผ๋ง ๋ฐฉ์‹์„ ์ „ํ™˜ํ•œ ๋Œ€๊ทœ๋ชจ ๋ฆฌํŒฉํ† ๋ง ํ”„๋กœ์ ํŠธ์ž…๋‹ˆ๋‹ค [1, 2]. ๊ธด ์‹คํ–‰ ์‹œ๊ฐ„(long tasks)์„ ์ตœ์ ํ™”ํ•˜๋Š” ๊ณผ์ •์—์„œ `styled-components`๊ฐ€ ์ฃผ์š” ๋ณ‘๋ชฉ ํ˜„์ƒ์ž„์„ ๋ฐœ๊ฒฌํ•œ ๊ฒƒ์ด ์ „ํ™˜์˜ ํ•ต์‹ฌ ๊ณ„๊ธฐ๊ฐ€ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค [1]. ์ด ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์„ ํ†ตํ•ด ์ฒซ ์ž…๋ ฅ ์ง€์—ฐ(FID) ๋ฐ ์ƒํ˜ธ์ž‘์šฉ ์†๋„(INP)์™€ ๊ฐ™์€ ์ฝ”์–ด ์›น ๋ฐ”์ดํƒˆ(Core Web Vitals) ์ง€ํ‘œ๊ฐ€ ํš๊ธฐ์ ์œผ๋กœ ๊ฐœ์„ ๋˜์—ˆ์œผ๋ฉฐ, ์„œ๋ฒ„์˜ ์ฒ˜๋ฆฌ ์ง€์—ฐ ์‹œ๊ฐ„(Latency)์„ ํฌ๊ฒŒ ๋‹จ์ถ•ํ•˜๋Š” ์„ฑ๊ณผ๋ฅผ ๊ฑฐ๋‘์—ˆ์Šต๋‹ˆ๋‹ค [3-6]. + +## ๐Ÿ“– Core Content +* **๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ๋ฐฐ๊ฒฝ ๋ฐ ๋„๊ตฌ ์„ ์ •:** ์„ฑ๋Šฅ ๋ณ‘๋ชฉ ํ˜„์ƒ์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด Griffel, Linaria ๋“ฑ ์—ฌ๋Ÿฌ ๋Œ€์•ˆ์„ ๊ฒ€ํ† ํ–ˆ์œผ๋ฉฐ, ๋ฌธ์„œ ํ’ˆ์งˆ, ์„ฑ๋Šฅ, ์ปค๋ฎค๋‹ˆํ‹ฐ ํฌ๊ธฐ, SSR ์ง€์› ์—ฌ๋ถ€ ๋“ฑ์„ ์ข…ํ•ฉ์ ์œผ๋กœ ํ‰๊ฐ€ํ•˜์—ฌ ์œ ํ‹ธ๋ฆฌํ‹ฐ ์šฐ์„ (utility-first) ์ ‘๊ทผ ๋ฐฉ์‹์„ ์ œ๊ณตํ•˜๋Š” Tailwind CSS๊ฐ€ ์ตœ์ข… ์„ ์ •๋˜์—ˆ์Šต๋‹ˆ๋‹ค [7, 8]. ๋„์ž… ์ „ ์‹ค์‹œํ•œ Lighthouse ์˜ค๋”ง์—์„œ ํŠน์ • ์ปดํฌ๋„ŒํŠธ์˜ ๋กœ๋“œ ์†๋„๊ฐ€ ์•ฝ 26% ๋นจ๋ผ์ง„๋‹ค๋Š” ๊ฒƒ์„ ํ™•์ธํ–ˆ์Šต๋‹ˆ๋‹ค [9]. +* **์ดˆ๊ธฐ ์„ค์ • ๋ฐ ๋ชจ๋…ธ๋ ˆํฌ(๋‹ค์ค‘ ํŒ€) ๊ณผ์ œ:** Kiwi.com์˜ ๋ฆฌํฌ์ง€ํ† ๋ฆฌ์—๋Š” ๋‘ ๊ฐœ์˜ ๊ฐœ๋ณ„ ํŒ€์ด ๊ฐ๊ฐ ๋‹ค๋ฅธ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๊ณ  ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค [10]. ์„œ๋กœ์˜ CSS ๋ฒˆ๋“ค ํฌ๊ธฐ๋ฅผ ๋ถ€ํ’€๋ฆฌ์ง€ ์•Š๊ธฐ ์œ„ํ•ด PostCSS๋ฅผ ํ™œ์šฉํ•ด ๋‘ ๊ฐœ์˜ ๋ณ„๋„ Tailwind ๊ตฌ์„ฑ์„ ์„ธํŒ…ํ–ˆ์Šต๋‹ˆ๋‹ค [10]. ์ด๋Š” VS Code์˜ Tailwind CSS IntelliSense ๋ฐ Prettier ํ”Œ๋Ÿฌ๊ทธ์ธ ์„ค์ •์— ์–ด๋ ค์›€์„ ์ฃผ์—ˆ์ง€๋งŒ, ์‹คํ—˜์  ๊ธฐ๋Šฅ(`tailwindCSS.experimental.configFile`)์„ ํ†ตํ•ด ํ•ด๊ฒฐํ–ˆ์Šต๋‹ˆ๋‹ค [11, 12]. +* **๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ์‹คํ–‰ ๋ฐ ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ € ํ˜ธํ™˜์„ฑ:** ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ณ€ํ™˜ํ•˜๋Š” ๊ณผ์ •์—์„œ ๋ธŒ๋ผ์šฐ์ € ์บ์‹ฑ์„ ํ™œ์šฉํ•ด ํŽ˜์ด์ง€ ๋กœ๋“œ ์†๋„๋ฅผ ๋†’์ด๊ธฐ ์œ„ํ•ด ๋‚ด๋ถ€(Internal) CSS์—์„œ ์™ธ๋ถ€(External) CSS ๋ฐฉ์‹์œผ๋กœ ๋ณ€๊ฒฝํ–ˆ์Šต๋‹ˆ๋‹ค [13]. ๊ทธ๋Ÿฌ๋‚˜ Safari iOS 14.5 ๋ฏธ๋งŒ ๋ฒ„์ „์—์„œ flexbox์˜ `gap` ์†์„ฑ์ด๋‚˜ `inset` ์†์„ฑ์„ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ํ˜ธํ™˜์„ฑ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค [14]. ์ด๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด Tailwind์˜ `matchUtilities()` ํ—ฌํผ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ `safe-inset`, `safe-space-x`์™€ ๊ฐ™์€ ์ปค์Šคํ…€ ์œ ํ‹ธ๋ฆฌํ‹ฐ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ๊ฐœ๋ฐœํ•ด ์šฐํšŒ ์ ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค [14, 15]. +* **ํ•ต์‹ฌ ์„ฑ๋Šฅ ๊ฐœ์„  ๊ฒฐ๊ณผ:** + * **์ฝ”์–ด ์›น ๋ฐ”์ดํƒˆ (Core Web Vitals):** ๋ชจ๋ฐ”์ผ ํ™ˆํŽ˜์ด์ง€ ๊ธฐ์ค€ ์ฒซ ์ž…๋ ฅ ์ง€์—ฐ(FID)์ด 75.9% ๊ฐ์†Œํ–ˆ๊ณ , ๋‹ค์Œ ํŽ˜์ธํŠธ์— ๋Œ€ํ•œ ์ƒํ˜ธ์ž‘์šฉ(INP)์ด 58.4% ๊ฐ์†Œํ–ˆ์Šต๋‹ˆ๋‹ค [3, 4]. ๋ฐ์Šคํฌํ†ฑ ํ™˜๊ฒฝ์—์„œ๋„ ๊ฐ๊ฐ 37.1%, 49.7%์˜ ๊ฐ์†Œ์œจ์„ ๋ณด์˜€์Šต๋‹ˆ๋‹ค [3, 4]. + * **์„œ๋ฒ„ CPU Wall Time (์ง€์—ฐ ์‹œ๊ฐ„):** Tailwind๋Š” ์Šคํƒ€์ผ๋ง์— JavaScript ์‹คํ–‰์„ ์˜์กดํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ ์„œ๋ฒ„์˜ ์Šคํƒ€์ผ ์—ฐ์‚ฐ์— ๋“œ๋Š” CPU ์ฒ˜๋ฆฌ ์‹œ๊ฐ„์ด 10.19์ดˆ์—์„œ 4.79์ดˆ๋กœ 52.91% ๋Œ€ํญ ๊ฐ์†Œํ–ˆ์Šต๋‹ˆ๋‹ค [5]. +* **๋ฐœ๊ฒฌ๋œ ๋‹จ์  ๋ฐ ํ•œ๊ณ„ (Drawbacks):** + * ๋‘ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ(`styled-components`์™€ `Tailwind`)๊ฐ€ ๋™์‹œ์— ์กด์žฌํ•˜๋Š” ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ๊ณผ๋„๊ธฐ์—๋Š” ์ƒ์„ฑ๋œ CSS ์ฝ”๋“œ์˜ ์ค‘๋ณต์œผ๋กœ ์ธํ•ด ์ดˆ๊ธฐ ๋ฒˆ๋“ค ํฌ๊ธฐ๊ฐ€ ๋ˆˆ์— ๋„๊ฒŒ ์ฆ๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค [16]. + * ์บก์Šํ™”๋œ `styled-components`์™€ ๋‹ฌ๋ฆฌ ์œ ํ‹ธ๋ฆฌํ‹ฐ ํด๋ž˜์Šค๊ฐ€ ์—ฌ๋Ÿฌ ์š”์†Œ์— ๋ถ„์‚ฐ๋˜์–ด ์žˆ์–ด ๋””๋ฒ„๊น…์ด ๋” ๊นŒ๋‹ค๋กœ์›Œ์กŒ์Šต๋‹ˆ๋‹ค [16]. + * Tailwind๋Š” ํด๋ž˜์Šค ์„ ์–ธ ์ˆœ์„œ์— ์˜์กดํ•˜๋ฏ€๋กœ, ๋™์ ์ธ ํด๋ž˜์Šค ๊ตฌ์„ฑ์„ ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด `clsx` ๊ฐ™์€ ๋ถ€๊ฐ€์ ์ธ JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ๋ณต์žก์„ฑ์ด ๋”ํ•ด์กŒ์Šต๋‹ˆ๋‹ค [6]. + +## ๐Ÿ”— Knowledge Connections +- **Related Topics:** [[Tailwind CSS]], [[Styled Components]], [[CSS-in-JS]], [[Core Web Vitals]] +- **Projects/Contexts:** [[Kiwi.com]], [[React Performance Optimization]] +- **Contradictions/Notes:** ์†Œ์Šค์— ๋”ฐ๋ฅด๋ฉด Tailwind CSS ๋„์ž…์€ ์ „๋ฐ˜์ ์ธ ์„ฑ๋Šฅ(Core Web Vitals ๋ฐ ์„œ๋ฒ„ ์ง€์—ฐ ์‹œ๊ฐ„)๊ณผ ๊ฐœ๋ฐœ ์†๋„ ํ–ฅ์ƒ์— ํฌ๊ฒŒ ๊ธฐ์—ฌํ–ˆ์ง€๋งŒ [3-6, 17], ๋™์‹œ์— ๋””๋ฒ„๊น… ๋‚œ์ด๋„๋ฅผ ๋†’์ด๊ณ  ํŠน์ • ํด๋ž˜์Šค ๊ตฌ์„ฑ ๋„๊ตฌ(`clsx`)์— ๋Œ€ํ•œ ์˜์กด๋„๋ฅผ ๋†’์ด๋Š” ํŠธ๋ ˆ์ด๋“œ์˜คํ”„(๋‹จ์ )๋ฅผ ์ˆ˜๋ฐ˜ํ•œ๋‹ค๊ณ  ์ง€์ ํ•ฉ๋‹ˆ๋‹ค [6, 16]. + +--- +*Last updated: 2026-04-26* \ No newline at end of file diff --git a/00_Raw/LCP (Largest Contentful Paint).md b/00_Raw/LCP (Largest Contentful Paint).md new file mode 100644 index 00000000..09a3001f --- /dev/null +++ b/00_Raw/LCP (Largest Contentful Paint).md @@ -0,0 +1,20 @@ +# [[LCP (Largest Contentful Paint)]] + +## ๐Ÿ“Œ Brief Summary +LCP(Largest Contentful Paint)๋Š” ์›นํŽ˜์ด์ง€์—์„œ ํžˆ์–ด๋กœ ์ด๋ฏธ์ง€, ๋น„๋””์˜ค, ํฐ ํ…์ŠคํŠธ ๋ธ”๋ก ๋“ฑ ๊ฐ€์žฅ ํฐ ์ฃผ์š” ์ฝ˜ํ…์ธ  ์š”์†Œ๊ฐ€ ์‚ฌ์šฉ์ž์˜ ํ™”๋ฉด์— ํ‘œ์‹œ๋˜๋Š” ๋ฐ ๊ฑธ๋ฆฌ๋Š” ์‹œ๊ฐ„์„ ์ธก์ •ํ•˜๋Š” ์„ฑ๋Šฅ ์ง€ํ‘œ์ž…๋‹ˆ๋‹ค [1-4]. ์‚ฌ์šฉ์ž๊ฐ€ ํŽ˜์ด์ง€์˜ ๋กœ๋”ฉ ์†๋„๋ฅผ ์ฒด๊ฐํ•˜๋Š” ์ฃผ์š” ์ฒ™๋„์ด๋ฉฐ, ๊ตฌ๊ธ€์˜ ์ฝ”์–ด ์›น ๋ฐ”์ดํƒˆ(Core Web Vitals)์—์„œ ์‹œ๊ฐ์  ๋กœ๋”ฉ ์†๋„์™€ SEO ๊ฒ€์ƒ‰ ์ˆœ์œ„๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ํ•ต์‹ฌ ์š”์†Œ๋กœ ๊ธฐ๋Šฅํ•ฉ๋‹ˆ๋‹ค [4-7]. ์ตœ์ ์˜ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜๊ณผ ์ „ํ™˜์œจ์„ ์œ ์ง€ํ•˜๊ธฐ ์œ„ํ•ด 2025๋…„ ๊ธฐ์ค€ LCP๋Š” 2.0์ดˆ(์ผ๋ถ€ ๊ธฐ์ค€ 2.5์ดˆ) ์ด๋‚ด์— ๋กœ๋“œ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค [1, 2, 8, 9]. + +## ๐Ÿ“– Core Content +- **์„ฑ๋Šฅ ๊ธฐ์ค€ ๋ฐ 2025๋…„ ์—…๋ฐ์ดํŠธ**: 2025๋…„ ์ฝ”์–ด ์›น ๋ฐ”์ดํƒˆ ์—…๋ฐ์ดํŠธ์—์„œ ๊ตฌ๊ธ€์€ LCP์˜ '์šฐ์ˆ˜(Good)' ์ž„๊ณ„๊ฐ’์„ ๊ธฐ์กด 2.5์ดˆ์—์„œ 2.0์ดˆ ๋ฏธ๋งŒ์œผ๋กœ ๋”์šฑ ์—„๊ฒฉํ•˜๊ฒŒ ์กฐ์ •ํ–ˆ์Šต๋‹ˆ๋‹ค [1, 8, 9]. ๋ฐ˜๋ฉด, ์ผ๋ถ€ ์†Œ์Šค์—์„œ๋Š” ์—ฌ์ „ํžˆ 2.5์ดˆ ์ดํ•˜๋ฅผ ์ ์ • ๊ธฐ์ค€์œผ๋กœ ์•ˆ๋‚ดํ•˜๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค [2, 4, 10]. LCP๊ฐ€ 4.0์ดˆ๋ฅผ ์ดˆ๊ณผํ•˜๋ฉด '๋‚˜์จ(Poor)'์œผ๋กœ ๊ฐ„์ฃผ๋˜๋ฉฐ [10], LCP ๋กœ๋”ฉ ์†๋„๊ฐ€ 2.0์ดˆ๋ฅผ ๋„˜์–ด๊ฐ€๋ฉด ์ „ํ™˜์œจ์ด 7% ๊ฐ์†Œํ•˜๊ณ  ๊ฒ€์ƒ‰ ์ˆœ์œ„์— ์•…์˜ํ–ฅ์„ ๋ฏธ์นฉ๋‹ˆ๋‹ค [11]. ๋ฐ˜๋Œ€๋กœ LCP๋ฅผ 1์ดˆ ๋‹จ์ถ•ํ•˜๋ฉด ์ „ํ™˜์œจ์„ 15% ์ƒ์Šน์‹œํ‚ค๊ณ  ์ดํƒˆ๋ฅ ์„ 20% ์ค„์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [12]. +- **์ฃผ์š” ๋ณ‘๋ชฉ ์›์ธ(Bottlenecks)**: LCP๊ฐ€ ์ง€์—ฐ๋˜๋Š” ์ฃผ์š” ์›์ธ์œผ๋กœ๋Š” ๋ Œ๋”๋ง์„ ์ฐจ๋‹จํ•˜๋Š” ๋ฆฌ์†Œ์Šค(๋™๊ธฐ์‹์œผ๋กœ ๋กœ๋“œ๋˜๋Š” CSS ๋ฐ JavaScript), ๋Š๋ฆฐ ์„œ๋ฒ„ ์‘๋‹ต ์‹œ๊ฐ„(TTFB), ์ตœ์ ํ™”๋˜์ง€ ์•Š์€ ๋Œ€์šฉ๋Ÿ‰ ์ด๋ฏธ์ง€ ํฌ๋งท(500KB ์ด์ƒ์˜ PNG/JPEG ๋“ฑ), ๊ทธ๋ฆฌ๊ณ  ํด๋ผ์ด์–ธํŠธ ์ธก ๋ Œ๋”๋ง(CSR) ์•ฑ์—์„œ์˜ ํ•˜์ด๋“œ๋ ˆ์ด์…˜(Hydration) ๋ฐ ๋ฌด๊ฑฐ์šด JavaScript ๋ฒˆ๋“ค ์ฒ˜๋ฆฌ ์ง€์—ฐ ๋“ฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค [13, 14]. +- **LCP ์ตœ์ ํ™” ์ „๋žต**: + - **์ด๋ฏธ์ง€ ๋ฐ ๋ฏธ๋””์–ด ์ตœ์ ํ™”**: WebP๋‚˜ AVIF์™€ ๊ฐ™์€ ์ฐจ์„ธ๋Œ€ ์ด๋ฏธ์ง€ ํฌ๋งท์„ ์‚ฌ์šฉํ•˜์—ฌ ํŒŒ์ผ ํฌ๊ธฐ๋ฅผ ํฌ๊ฒŒ ์ค„์—ฌ์•ผ ํ•ฉ๋‹ˆ๋‹ค [1, 15-17]. ํŠนํžˆ LCP ์ธก์ • ๋Œ€์ƒ์ด ๋˜๋Š” ์ฒซ ํ™”๋ฉด์˜ ํžˆ์–ด๋กœ ์ด๋ฏธ์ง€์—๋Š” ์ง€์—ฐ ๋กœ๋”ฉ(Lazy Loading)์„ ์ ์šฉํ•˜์ง€ ๋ง๊ณ , `loading="eager"` ๋ฐ `fetchpriority="high"` ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ ์šฐ์„ ์ ์œผ๋กœ ๋กœ๋“œ(Preload)ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค [9, 16, 18-21]. + - **์„œ๋ฒ„ ์‘๋‹ต ์†๋„ ๋ฐ ๋ฆฌ์†Œ์Šค ์ „์†ก ํ–ฅ์ƒ**: ๊ธ€๋กœ๋ฒŒ ํŠธ๋ž˜ํ”ฝ ํ™˜๊ฒฝ์—์„œ๋Š” CDN(์ฝ˜ํ…์ธ  ์ „์†ก ๋„คํŠธ์›Œํฌ)์„ ์‚ฌ์šฉํ•˜์—ฌ ์ •์  ์ž์‚ฐ์„ ์ „์†กํ•˜๊ณ , ๋ธŒ๋ผ์šฐ์ € ๋ฐ ์„œ๋ฒ„ ์ˆ˜์ค€์˜ ์บ์‹ฑ์„ ํ™œ์„ฑํ™”ํ•˜์—ฌ ๋กœ๋”ฉ ์‹œ๊ฐ„์„ ๋‹จ์ถ•ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค [1, 16, 22, 23]. + - **์ฝ”๋“œ ๋ฐ ๋ Œ๋”๋ง ์ตœ์ ํ™”**: ๋ Œ๋”๋ง ์ฐจ๋‹จ ์Šคํฌ๋ฆฝํŠธ์™€ ์ค‘์š”ํ•˜์ง€ ์•Š์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์ง€์—ฐ(Defer)์‹œํ‚ค๊ณ  ์ค‘์š”ํ•œ CSS๋Š” ์ธ๋ผ์ธ(Inline)์œผ๋กœ ๋ฐฐ์น˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค [14, 24, 25]. ๋˜ํ•œ, React์™€ ๊ฐ™์€ ํ”„๋ ˆ์ž„์›Œํฌ์—์„œ๋Š” ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง(CSR)์— ๋”ฐ๋ฅธ ์ง€์—ฐ์„ ํ”ผํ•˜๊ธฐ ์œ„ํ•ด ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง(SSR)์ด๋‚˜ ์ •์  ์‚ฌ์ดํŠธ ์ƒ์„ฑ(SSG)์„ ์ ์šฉํ•˜์—ฌ ์™„์„ฑ๋œ HTML์„ ์ฆ‰์‹œ ๋ธŒ๋ผ์šฐ์ €์— ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค [26-28]. + +## ๐Ÿ”— Knowledge Connections +- **Related Topics:** [[Core Web Vitals]], [[Server-Side Rendering (SSR)]], [[Client-Side Rendering (CSR)]], [[INP (Interaction to Next Paint)]], [[SEO (Search Engine Optimization)]] +- **Projects/Contexts:** [[Web Performance Optimization]], [[React SEO Guide]] +- **Contradictions/Notes:** ๊ตฌ๊ธ€์˜ 2025๋…„ ์ฝ”์–ด ์›น ๋ฐ”์ดํƒˆ ์—…๋ฐ์ดํŠธ๋ฅผ ๋‹ค๋ฃฌ ์†Œ์Šค์—์„œ๋Š” LCP์˜ '์šฐ์ˆ˜' ์ž„๊ณ„๊ฐ’์ด 2.5์ดˆ์—์„œ 2.0์ดˆ ๋ฏธ๋งŒ์œผ๋กœ ๊ฐ•ํ™”๋˜์—ˆ๋‹ค๊ณ  ๋ช…์‹œํ•˜๊ณ  ์žˆ์œผ๋‚˜ [1, 8, 9], ์ผ๋ถ€ ๋ถ„์„ ๋ฐ ์ง€์นจ ์†Œ์Šค์—์„œ๋Š” ์—ฌ์ „ํžˆ ๊ธฐ์กด ๊ธฐ์ค€์ธ 2.5์ดˆ๋ฅผ ๋ชฉํ‘œ์น˜๋กœ ์ œ์‹œํ•˜๊ณ  ์žˆ์–ด ๊ธฐ์ค€์— ๋Œ€ํ•œ ํ˜ผ์žฌ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค [2, 7, 29]. ๋˜ํ•œ ๋น„ํŒ์  ์ฝ˜ํ…์ธ  ์ตœ์ ํ™” ๋ฐฉ์‹์— ๋Œ€ํ•ด, ์ง€์—ฐ ๋กœ๋”ฉ(Lazy Loading)์€ ์ „์ฒด ์‚ฌ์ดํŠธ ์†๋„๋ฅผ ๋†’์ด๋Š” ์ข‹์€ ๊ธฐ๋ฒ•์ด์ง€๋งŒ ์ฒซ ํ™”๋ฉด(Above-the-fold)์˜ ๋ฉ”์ธ ์ฝ˜ํ…์ธ ์— ์ ์šฉํ•  ๊ฒฝ์šฐ ์˜คํžˆ๋ ค LCP ์ ์ˆ˜๋ฅผ ์‹ฌ๊ฐํ•˜๊ฒŒ ํ›ผ์†ํ•œ๋‹ค๋Š” ์ฃผ์˜ ์‚ฌํ•ญ์ด ๋ฐ˜๋ณต์ ์œผ๋กœ ๊ฐ•์กฐ๋ฉ๋‹ˆ๋‹ค [18, 19, 21]. + +--- +*Last updated: 2026-04-26* \ No newline at end of file diff --git a/00_Raw/Modern Frontend Engineering Architecture.md b/00_Raw/Modern Frontend Engineering Architecture.md new file mode 100644 index 00000000..d901c157 --- /dev/null +++ b/00_Raw/Modern Frontend Engineering Architecture.md @@ -0,0 +1,33 @@ +# [[Modern Frontend Engineering Architecture]] + +## ๐Ÿ“Œ Brief Summary +ํ˜„๋Œ€์˜ ํ”„๋ก ํŠธ์—”๋“œ ์—”์ง€๋‹ˆ์–ด๋ง ์•„ํ‚คํ…์ฒ˜๋Š” React ํ™˜๊ฒฝ์—์„œ ๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜(DX)๊ณผ ๋ธŒ๋ผ์šฐ์ €์˜ ๋Ÿฐํƒ€์ž„ ์„ฑ๋Šฅ ๊ฐ„์˜ ๊ท ํ˜•์„ ๋งž์ถ”๊ธฐ ์œ„ํ•ด ์ง€์†์ ์œผ๋กœ ์ง„ํ™”ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค [1]. ์ด๋ฅผ ์œ„ํ•ด Tailwind CSS์™€ ๊ฐ™์€ ๋นŒ๋“œ ํƒ€์ž„ ๊ธฐ๋ฐ˜์˜ ์œ ํ‹ธ๋ฆฌํ‹ฐ ํผ์ŠคํŠธ ํ”„๋ ˆ์ž„์›Œํฌ์™€ Styled-components ๊ฐ™์€ ๋Ÿฐํƒ€์ž„ CSS-in-JS ํŒจ๋Ÿฌ๋‹ค์ž„์ด ๊ฐ์ž์˜ ์žฅ๋‹จ์ ์„ ๋ฐ”ํƒ•์œผ๋กœ ๊ฒฝ์Ÿํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค [1, 2]. ๋” ๋‚˜์•„๊ฐ€ ํ™•์žฅ ๊ฐ€๋Šฅํ•˜๊ณ  ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์šฉ์ดํ•œ UI๋ฅผ ๊ตฌ์ถ•ํ•˜๊ธฐ ์œ„ํ•ด ์ฒด๊ณ„ํ™”๋œ ๋””์ž์ธ ํ† ํฐ(Design Tokens) ์‹œ์Šคํ…œ, ์ปดํฌ๋„ŒํŠธ ํ•ฉ์„ฑ(Compound Components) ํŒจํ„ด, ๊ทธ๋ฆฌ๊ณ  ๋ชจ๋…ธ๋ ˆํฌ์™€ ๊ฒฐํ•ฉ๋œ ๊ธฐ๋Šฅ ๋ถ„ํ•  ์„ค๊ณ„(Feature-Sliced Design)๊ฐ€ ํ•ต์‹ฌ์ ์ธ ๊ธฐ๋ฐ˜ ์•„ํ‚คํ…์ฒ˜๋กœ ์ฑ„ํƒ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค [3-6]. + +## ๐Ÿ“– Core Content + +* **์Šคํƒ€์ผ๋ง ํŒจ๋Ÿฌ๋‹ค์ž„: Styled-components vs Tailwind CSS** + * **Styled-components (CSS-in-JS):** ์ปดํฌ๋„ŒํŠธ์™€ ์Šคํƒ€์ผ์„ ํ•จ๊ป˜ ๋ฐฐ์น˜ํ•˜๋Š” ๋ฐฉ์‹(Co-location)์œผ๋กœ ํ›Œ๋ฅญํ•œ ๋ชจ๋“ˆํ™”์™€ ๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค [7-9]. props๋ฅผ ํ†ตํ•ด ๋™์ ์ธ ์Šคํƒ€์ผ๋ง์ด ๋งค์šฐ ์šฉ์ดํ•˜๋‹ค๋Š” ์žฅ์ ์ด ์žˆ์œผ๋‚˜ [10], ๋ธŒ๋ผ์šฐ์ € ๋Ÿฐํƒ€์ž„์— JavaScript๋ฅผ ํ†ตํ•ด CSS๋ฅผ ์ƒ์„ฑ ๋ฐ ์ฃผ์ž…ํ•ด์•ผ ํ•˜๋ฏ€๋กœ ์„ฑ๋Šฅ ์˜ค๋ฒ„ํ—ค๋“œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [7, 11]. ํŠนํžˆ React Server Components(RSC) ๊ธฐ๋ฐ˜์˜ Next.js App Router ํ™˜๊ฒฝ์—์„œ๋Š” Context API๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์–ด ํ˜ธํ™˜์„ฑ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ธธ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์ด๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด Style Registry ํŒจํ„ด์„ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค [12, 13]. + * **Tailwind CSS:** ์œ ํ‹ธ๋ฆฌํ‹ฐ ํผ์ŠคํŠธ(Utility-first) ์ ‘๊ทผ ๋ฐฉ์‹์„ ์ทจํ•˜๋ฉฐ, ๋นŒ๋“œ ํƒ€์ž„์— ์‹ค์ œ๋กœ ์‚ฌ์šฉ๋œ CSS๋งŒ ์ •์ ์œผ๋กœ ์ƒ์„ฑํ•˜์—ฌ ๋Ÿฐํƒ€์ž„ ์˜ค๋ฒ„ํ—ค๋“œ๊ฐ€ ์ „ํ˜€ ์—†๋‹ค๋Š” ๊ฒƒ์ด ๊ฐ€์žฅ ํฐ ๊ฐ•์ ์ž…๋‹ˆ๋‹ค [14-16]. ์‹ค์ œ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ํ…Œ์ŠคํŠธ์— ๋”ฐ๋ฅด๋ฉด Styled-components์—์„œ Tailwind CSS๋กœ ์ „ํ™˜ ์‹œ ๋ชจ๋ฐ”์ผ ํ™˜๊ฒฝ์—์„œ First Input Delay(FID)์™€ Interaction to Next Paint(INP) ์ง€ํ‘œ๊ฐ€ ์ ˆ๋ฐ˜ ์ด์ƒ ๋Œ€ํญ ๊ฐ์†Œํ•˜๋Š” ์„ฑ๋Šฅ ๊ฐœ์„ ์„ ๋ณด์˜€์Šต๋‹ˆ๋‹ค [17-19]. ์ตœ์‹  v4 ๋ฒ„์ „์—์„œ๋Š” JavaScript ๊ธฐ๋ฐ˜ ์„ค์ •์„ ๋ฒ—์–ด๋‚˜ `@theme` ๋””๋ ‰ํ‹ฐ๋ธŒ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” CSS-first ์•„ํ‚คํ…์ฒ˜๋กœ ์ง„ํ™”ํ–ˆ์œผ๋ฉฐ, Rust ๊ธฐ๋ฐ˜ ์—”์ง„์„ ๋„์ž…ํ•ด ๋นŒ๋“œ ์†๋„๊ฐ€ 10๋ฐฐ ์ด์ƒ ํ–ฅ์ƒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค [20-22]. + +* **ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ๋””์ž์ธ ํ† ํฐ(Design Tokens) ํŒŒ์ดํ”„๋ผ์ธ** + * ๋””์ž์ธ ํ† ํฐ์€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ „๋ฐ˜์˜ ์‹œ๊ฐ์  ์†์„ฑ(์ƒ‰์ƒ, ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ, ๊ฐ„๊ฒฉ ๋“ฑ)์„ ํ•˜๋“œ์ฝ”๋”ฉํ•˜์ง€ ์•Š๊ณ  ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๋„๋ก ์ค‘์•™ ์ง‘์ค‘ํ™”ํ•œ ๋ฐ์ดํ„ฐ์ž…๋‹ˆ๋‹ค [23, 24]. + * ์„ฑ๊ณต์ ์ธ ํ† ํฐ ์‹œ์Šคํ…œ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•ด์„œ๋Š” **์„ธ ๊ฐ€์ง€ ๊ณ„์ธต**์œผ๋กœ ๋ถ„๋ฆฌํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ๋ฌธ๋งฅ ์—†์ด ์›์‹œ ๊ฐ’์„ ๊ฐ–๋Š” **๊ธฐ๋ณธ ํ† ํฐ**(Primitive Tokens, ์˜ˆ: `--color-blue-500`), ๋ชฉ์ ๊ณผ ์˜๋„๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” **์‹œ๋งจํ‹ฑ ํ† ํฐ**(Semantic Tokens, ์˜ˆ: `--color-primary`), ํŠน์ • ์ปดํฌ๋„ŒํŠธ์— ํ•œ์ •๋œ **์ปดํฌ๋„ŒํŠธ ํ† ํฐ**์œผ๋กœ ๋‚˜๋ˆ•๋‹ˆ๋‹ค [25-27]. + * ์ด๋Ÿฌํ•œ ํ† ํฐ๋“ค์€ Figma์™€ ๊ฐ™์€ ๋””์ž์ธ ํˆด์—์„œ JSON ํฌ๋งท์œผ๋กœ ์ถ”์ถœ๋˜๋ฉฐ, Style Dictionary ๋“ฑ์˜ ๋„๊ตฌ๋ฅผ ๊ฑฐ์ณ ํ”Œ๋žซํผ์— ๋งž๋Š” CSS ๋ณ€์ˆ˜(Variables) ๋“ฑ์œผ๋กœ ์ž๋™ ๋ณ€ํ™˜๋˜์–ด ์ ์šฉ๋ฉ๋‹ˆ๋‹ค [28-32]. + +* **์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ UI ์ปดํฌ๋„ŒํŠธ ์„ค๊ณ„ ํŒจํ„ด** + * **์•„ํ† ๋ฏน ๋””์ž์ธ(Atomic Design):** UI๋ฅผ ์›์ž(Atoms), ๋ถ„์ž(Molecules), ์œ ๊ธฐ์ฒด(Organisms), ํ…œํ”Œ๋ฆฟ, ํŽ˜์ด์ง€ ๋‹จ์œ„๋กœ ์ถ”์ƒํ™” ๋ฐ ์กฐ๋ฆฝํ•˜์—ฌ ์žฌ์‚ฌ์šฉ์„ฑ์„ ๋†’์ด๋Š” ๊ธฐ์ดˆ์ ์ธ ๋ฉ˜ํƒˆ ๋ชจ๋ธ์ž…๋‹ˆ๋‹ค [33-37]. + * **ํ•ฉ์„ฑ ์ปดํฌ๋„ŒํŠธ(Compound Components):** `Accordion.Item`, `Accordion.Header`์ฒ˜๋Ÿผ ๊ด€๋ จ๋œ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ๋“ค์ด React Context๋ฅผ ํ†ตํ•ด ์•”์‹œ์ ์œผ๋กœ ์ƒํƒœ๋ฅผ ๊ณต์œ ํ•˜๋Š” ํŒจํ„ด์ž…๋‹ˆ๋‹ค [4, 38, 39]. ๋‹จ์ผ ์ปดํฌ๋„ŒํŠธ์— ์ˆ˜์‹ญ ๊ฐœ์˜ prop์ด ์ง‘์ค‘๋˜๋Š” ๋ฌธ์ œ(Prop soup)๋ฅผ ๋ฐฉ์ง€ํ•˜๊ณ  ์‚ฌ์šฉ์ž๊ฐ€ ๋ ˆ์ด์•„์›ƒ ๊ตฌ์กฐ๋ฅผ ์ž์œ ๋กญ๊ฒŒ ๊ตฌ์„ฑํ•˜๋„๋ก ๋•์Šต๋‹ˆ๋‹ค [40-43]. + * **ํ—ค๋“œ๋ฆฌ์Šค ์ปดํฌ๋„ŒํŠธ(Headless Components):** ์ ‘๊ทผ์„ฑ๊ณผ ๋™์ž‘ ๋…ผ๋ฆฌ(์ƒํƒœ ๊ด€๋ฆฌ, ํ‚ค๋ณด๋“œ ๋„ค๋น„๊ฒŒ์ด์…˜ ๋“ฑ)๋งŒ ์ œ๊ณตํ•˜๊ณ  ๋งˆํฌ์—… ๋ฐ ์Šคํƒ€์ผ๋ง์€ ์ „์ ์œผ๋กœ ์†Œ๋น„์ž์—๊ฒŒ ์œ„์ž„ํ•˜๋Š” ํŒจํ„ด์œผ๋กœ, ํ™•์žฅ์„ฑ๊ณผ ์œ ์—ฐ์„ฑ์ด ๋งค์šฐ ๋†’์Šต๋‹ˆ๋‹ค [43-45]. + * **์˜ค๋ฒ„๋ผ์ด๋“œ ํŒจํ„ด(Overrides Pattern):** ๋‹จ์ผ ์š”์†Œ์˜ ๋‚ด๋ถ€ ๊นŠ์€ ๊ตฌ์กฐ๊นŒ์ง€ ์™ธ๋ถ€์— ๊ฐœ๋ฐฉํ•˜์—ฌ, ์‚ฌ์šฉ์ž๊ฐ€ ํŠน์ˆ˜ํ•œ ์ƒํ™ฉ์— ๋งž๊ฒŒ ์Šคํƒ€์ผ์ด๋‚˜ ๋ Œ๋”๋ง ์ปดํฌ๋„ŒํŠธ๋ฅผ ์™„์ „ํžˆ ๋Œ€์ฒด(override)ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ—ˆ์šฉํ•˜๋Š” API ํŒจํ„ด์ž…๋‹ˆ๋‹ค [46-48]. + +* **๋Œ€๊ทœ๋ชจ ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ์œ„ํ•œ ๋ชจ๋…ธ๋ ˆํฌ์™€ ์•„ํ‚คํ…์ฒ˜ (FSD)** + * ์กฐ์ง๊ณผ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์„ฑ์žฅํ•จ์— ๋”ฐ๋ผ ๋‹จ์ผ ๋ ˆํฌ์ง€ํ† ๋ฆฌ ๋‚ด์—์„œ ๋‹ค์ˆ˜์˜ ์•ฑ๊ณผ ๊ณต์œ  ํŒจํ‚ค์ง€ ๊ฐ„์˜ ์˜์กด์„ฑ์„ ๊ด€๋ฆฌํ•˜๋Š” ๋ชจ๋…ธ๋ ˆํฌ(Monorepo) ๊ตฌ์„ฑ์ด ํ•„์ˆ˜์ ์ž…๋‹ˆ๋‹ค. pnpm workspaces, Turborepo, Nx ๋“ฑ์˜ ๋„๊ตฌ๋ฅผ ํ†ตํ•ด ๋นŒ๋“œ ์บ์‹ฑ๊ณผ ํŒŒ์ดํ”„๋ผ์ธ ์ตœ์ ํ™”๋ฅผ ์ด๋ฃฐ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [5, 49-51]. + * ์•„ํ‚คํ…์ฒ˜ ๊ด€์ ์—์„œ๋Š” **๊ธฐ๋Šฅ ๋ถ„ํ•  ์„ค๊ณ„(Feature-Sliced Design, FSD)**๊ฐ€ ๊ฐ๊ด‘๋ฐ›์Šต๋‹ˆ๋‹ค. ์ฝ”๋“œ๋ฒ ์ด์Šค๋ฅผ Shared, Entities, Features, Widgets, Pages, App ๋“ฑ์œผ๋กœ ๋‚˜๋ˆ„๊ณ  ์˜์กด์„ฑ(Dependency)์ด ํ•œ ๋ฐฉํ–ฅ์œผ๋กœ๋งŒ ํ๋ฅด๋„๋ก ์—„๊ฒฉํžˆ ํ†ต์ œํ•˜์—ฌ ๋ณต์žกํ•œ ์‹œ์Šคํ…œ์—์„œ๋„ ๊ฒฐํ•ฉ๋„๋ฅผ ๋‚ฎ์ถ”๊ณ  ๋ชจ๋“ˆ์„ฑ์„ ์œ ์ง€ํ•ฉ๋‹ˆ๋‹ค [6, 52, 53]. + +## ๐Ÿ”— Knowledge Connections +- **Related Topics:** [[Utility-first CSS]], [[React Server Components]], [[Design Tokens]], [[Atomic Design]], [[Compound Components]], [[Feature-Sliced Design]], [[Monorepo]] +- **Projects/Contexts:** [[Uber Base Web]] (๋Œ€๊ทœ๋ชจ ์‚ฌ๋‚ด ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๋“ค์„ ํ†ตํ•ฉํ•˜๊ธฐ ์œ„ํ•ด ์˜ค๋ฒ„๋ผ์ด๋“œ ํŒจํ„ด์„ ๊ด‘๋ฒ”์œ„ํ•˜๊ฒŒ ๋„์ž…ํ•œ ๋””์ž์ธ ์‹œ์Šคํ…œ [46, 48, 54]), [[Shopify Polaris]] (์ƒ๊ฑฐ๋ž˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋†’์€ ์ ‘๊ทผ์„ฑ, ์ผ๊ด€๋œ UI ์ œ๊ณต ๋ฐ ๊ตญ์ œํ™”(i18n) ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•ด ๋„์ž…๋œ ๋””์ž์ธ ์‹œ์Šคํ…œ ๋ฐ ํผ ์ปดํฌ๋„ŒํŠธ ์ƒํƒœ๊ณ„ [55-58]), [[Next.js App Router]] (์ตœ์‹  React ์•„ํ‚คํ…์ฒ˜๋กœ ๋ Œ๋”๋ง ๋ฐฉ์‹์˜ ์ฐจ์ด๋กœ ์ธํ•ด ๋Ÿฐํƒ€์ž„ ์Šคํƒ€์ผ๋ง์˜ ๊ธฐ์ˆ ์  ํ•œ๊ณ„๋ฅผ ๋“œ๋Ÿฌ๋‚ธ ์ปจํ…์ŠคํŠธ [12, 13]). +- **Contradictions/Notes:** Tailwind CSS๋Š” ์••๋„์ ์ธ ์†๋„์™€ ๋ฒˆ๋“ค ํฌ๊ธฐ ์ตœ์†Œํ™”๋ผ๋Š” ํผํฌ๋จผ์Šค์  ์žฅ์ ์„ ๊ฐ€์ง€์ง€๋งŒ, ๋งˆํฌ์—… ๋‚ด๋ถ€์— ๊ธธ๊ณ  ๋ณต์žกํ•œ ํด๋ž˜์Šค ๋ฌธ์ž์—ด(Class soup)์„ ์œ ๋ฐœํ•˜์—ฌ ๊ฐ€๋…์„ฑ์„ ๋–จ์–ด๋œจ๋ฆฐ๋‹ค๋Š” ํ•œ๊ณ„๋ฅผ ์ง€๋‹™๋‹ˆ๋‹ค [59-61]. ๋ฐ˜๋Œ€๋กœ Styled-components๋Š” ๊น”๋”ํ•œ ์ปดํฌ๋„ŒํŠธ ๋ ˆ๋ฒจ ์บก์Šํ™”์™€ ๋›ฐ์–ด๋‚œ ๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜์„ ๋ณด์žฅํ•˜์ง€๋งŒ [9, 10], ๋™์  ์Šคํƒ€์ผ์„ ๋Ÿฐํƒ€์ž„์— ๋ Œ๋”๋งํ•˜๋ฏ€๋กœ ํผํฌ๋จผ์Šค ์˜ค๋ฒ„ํ—ค๋“œ๊ฐ€ ํฌ๊ณ  Server Component ๋ Œ๋”๋ง ๊ตฌ์กฐ์™€ ์ž˜ ๋งž์ง€ ์•Š์•„ ํ”„๋กœ์ ํŠธ ๊ทœ๋ชจ๋‚˜ ์„ฑ๊ฒฉ์— ๋”ฐ๋ผ ๋‘ ๋„๊ตฌ ์‚ฌ์ด์˜ ๋ช…ํ™•ํ•œ ํŠธ๋ ˆ์ด๋“œ์˜คํ”„๊ฐ€ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค [7, 11, 12]. ๋‘ ์ง„์˜์€ ํ˜„์žฌ CSS variables๋ฅผ ์ ๊ทน ์ฐจ์šฉํ•˜๊ฑฐ๋‚˜(Tailwind v4์˜ `@theme`), ์„œ๋ฒ„์‚ฌ์ด๋“œ Style Registry๋ฅผ ๊ตฌ์„ฑ(Styled-components v6)ํ•˜๋Š” ๋ฐฉํ–ฅ์œผ๋กœ ์ตœ์‹  ์ƒํƒœ๊ณ„ ์š”๊ตฌ์— ์ ์‘ ์ค‘์ž…๋‹ˆ๋‹ค [4, 13, 62]. + +--- +*Last updated: 2026-04-26* \ No newline at end of file diff --git a/00_Raw/Modular Monolith.md b/00_Raw/Modular Monolith.md new file mode 100644 index 00000000..b66e626c --- /dev/null +++ b/00_Raw/Modular Monolith.md @@ -0,0 +1,19 @@ +# [[Modular Monolith]] + +## ๐Ÿ“Œ Brief Summary +๋ชจ๋“ˆ๋Ÿฌ ๋ชจ๋†€๋ฆฌ์Šค(Modular Monolith)๋Š” ๋‹จ์ผ ๋ฐฐํฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜(๋ชจ๋†€๋ฆฌ์Šค) ๋‚ด๋ถ€์— ์—„๊ฒฉํ•œ ๊ฒฝ๊ณ„๋ฅผ ๊ฐ€์ง„ ๋ชจ๋“ˆ์„ ๊ฒฐํ•ฉํ•˜๋Š” ํ”„๋ก ํŠธ์—”๋“œ ์•„ํ‚คํ…์ฒ˜ ์ ‘๊ทผ๋ฒ•์ž…๋‹ˆ๋‹ค [1]. ๋งˆ์ดํฌ๋กœ ํ”„๋ก ํŠธ์—”๋“œ์ฒ˜๋Ÿผ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๋…๋ฆฝ๋œ ์•ฑ์„ ์šด์˜ํ•˜๋Š” ๋Œ€์‹ , ํ•˜๋‚˜์˜ React ์…ธ(Shell) ์•ฑ์„ ์œ ์ง€ํ•˜๋ฉด์„œ ์ฃผ๋ฌธ์ด๋‚˜ ๊ฒฐ์ œ ๊ฐ™์€ ๊ธฐ๋Šฅ(Feature)๋ณ„๋กœ ๋ชจ๋“ˆ์„ ๋ถ„๋ฆฌํ•ฉ๋‹ˆ๋‹ค [2]. ๊ฐ ๋ชจ๋“ˆ์€ ๊ณ ์œ ํ•œ UI, ์ƒํƒœ ๊ด€๋ฆฌ, ๋ผ์šฐํŒ… ๋ฐ API ๊ณ„์ธต์„ ๋…๋ฆฝ์ ์œผ๋กœ ์†Œ์œ ํ•˜๋ฏ€๋กœ, ๋Ÿฐํƒ€์ž„ ๋ณต์žก์„ฑ ์—†์ด๋„ ๋ช…ํ™•ํ•œ ๊ด€์‹ฌ์‚ฌ ๋ถ„๋ฆฌ์™€ ๊ธฐ๋Šฅ ์†Œ์œ ๊ถŒ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค [2, 3]. + +## ๐Ÿ“– Core Content +* **๋‹จ์ผ ์…ธ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๊ณผ ํ”Œ๋Ÿฌ๊ทธ์ธ ๊ตฌ์กฐ:** ํ•˜๋‚˜์˜ ์ปจํ…Œ์ด๋„ˆ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์ธ์ฆ, ์ „์—ญ ๋ผ์šฐํŒ…, ๋ ˆ์ด์•„์›ƒ ๋“ฑ ํ•ต์‹ฌ ๊ณตํ†ต ๊ด€์‹ฌ์‚ฌ๋งŒ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค. ๊ฐœ๋ณ„ ๊ธฐ๋Šฅ์€ ์ด ์…ธ ์•ฑ์— ๋“ฑ๋ก๋˜๋Š” ๋ชจ๋“ˆ๋กœ์„œ ์ž‘๋™ํ•˜๋ฉฐ, ๊ฐ ๋ชจ๋“ˆ์€ ์ž์ฒด์ ์ธ ๋‚ด๋ถ€ ๋ผ์šฐํŒ…๊ณผ ๋„๋ฉ”์ธ API ์ƒํ˜ธ์ž‘์šฉ์„ ์™„์ „ํžˆ ์ฑ…์ž„์ง‘๋‹ˆ๋‹ค [3, 4]. +* **์ˆ˜์ง์  ์Šฌ๋ผ์ด์Šค(Vertical Slice) ์•„ํ‚คํ…์ฒ˜ ๊ฒฐํ•ฉ:** ๊ฐ ๋ชจ๋“ˆ์€ UI๋ถ€ํ„ฐ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ๋ฐ API ์—ฐ๊ฒฐ ๊ณ„์ธต๊นŒ์ง€ ์•„์šฐ๋ฅด๋Š” ์ˆ˜์ง์  ์Šฌ๋ผ์ด์Šค ํ˜•ํƒœ๋กœ ๊ตฌ์„ฑ๋ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ๊ฐ ๋„๋ฉ”์ธ ๊ธฐ๋Šฅ ๋‚ด์˜ ์‘์ง‘๋„๋ฅผ ๋†’์ด๊ณ  ๋…๋ฆฝ์ ์ธ ๊ฐœ๋ฐœ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค [1, 5]. +* **์—„๊ฒฉํ•œ ๊ฒฝ๊ณ„ ๋ฐ ์˜์กด์„ฑ ๊ด€๋ฆฌ:** ์„œ๋กœ ๋‹ค๋ฅธ ๊ธฐ๋Šฅ ๋ชจ๋“ˆ ๊ฐ„์˜ ์ง์ ‘์ ์ธ ๊ต์ฐจ ์ž„ํฌํŠธ(Cross-domain import)๋Š” ์—„๊ฒฉํžˆ ๊ธˆ์ง€๋ฉ๋‹ˆ๋‹ค [1, 3]. ์ปดํฌ๋„ŒํŠธ๋‚˜ ๋กœ์ง์„ ๊ณต์œ ํ•ด์•ผ ํ•  ๊ฒฝ์šฐ, ๋ชจ๋“  ๋ชจ๋“ˆ์ด ์†Œ๋น„ํ•  ์ˆ˜ ์žˆ๋Š” ๊ณตํ†ต ํŒจํ‚ค์ง€(์˜ˆ: core ๋˜๋Š” foundations ํด๋”)๋กœ ๋ถ„๋ฆฌํ•˜์—ฌ ๊ด€๋ฆฌํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค [3, 6]. +* **๋„๊ตฌ์™€ ๋ชจ๋…ธ๋ ˆํฌ(Monorepo) ํ™œ์šฉ:** ์ด๋Ÿฌํ•œ ๊นจ๋—ํ•œ ๋ชจ๋“ˆ ๋ถ„๋ฆฌ๋Š” Turborepo, Nx, Vite ๋“ฑ๊ณผ ๊ฐ™์€ ๋ชจ๋…ธ๋ ˆํฌ ๊ตฌ์กฐ ๋ฐ ๋นŒ๋“œ ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌ์กฐ์ ์œผ๋กœ ๊ฐ•์ œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [2]. ํŠนํžˆ Nx ๊ฐ™์€ ๋„๊ตฌ๋ฅผ ํ™œ์šฉํ•˜๋ฉด ๋ชจ๋“ˆ ๊ฒฝ๊ณ„ ๊ทœ์น™์„ ์ ์šฉํ•˜์—ฌ, ์ž˜๋ชป๋œ ๊ต์ฐจ ์ž„ํฌํŠธ ๋ฐœ์ƒ ์‹œ ์ด๋ฅผ ์ฝ”๋“œ ๋ฆฌ๋ทฐ ์ „์— ๋นŒ๋“œ ํƒ€์ž„ ์—๋Ÿฌ๋กœ ์žก์•„๋‚ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [3]. +* **๋งˆ์ดํฌ๋กœ ํ”„๋ก ํŠธ์—”๋“œ(Micro-frontends) ๋Œ€๋น„ ์ด์ :** ๋ชจ๋“ˆ๋Ÿฌ ๋ชจ๋†€๋ฆฌ์Šค๋Š” ๋ชจ๋“ˆ ํŽ˜๋”๋ ˆ์ด์…˜(Module Federation), ์ค‘๋ณต๋œ React ์ธ์Šคํ„ด์Šค ๋กœ๋“œ, ๋ถ„์‚ฐ๋œ E2E ํ…Œ์ŠคํŠธ ๋ฐ ๋ฐฐํฌ ๊ฒฐํ•ฉ ๋“ฑ ๋งˆ์ดํฌ๋กœ ํ”„๋ก ํŠธ์—”๋“œ์˜ ์ „ํ˜•์ ์ธ ์˜ค๋ฒ„ํ—ค๋“œ์™€ ๋Ÿฐํƒ€์ž„ ๋ณต์žก์„ฑ์„ ํ”ผํ•˜๋ฉด์„œ๋„ ๋ช…ํ™•ํ•œ ์†Œ์œ ๊ถŒ ๊ฒฝ๊ณ„๋ฅผ ๋‹ฌ์„ฑํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค [2, 7, 8]. + +## ๐Ÿ”— Knowledge Connections +- **Related Topics:** [[Micro-frontends]], [[Vertical Slice Architecture]], [[Monorepo]], [[Feature-Sliced Design]] +- **Projects/Contexts:** [[Scalable React Architecture]], [[Turborepo/Nx Workspace]] +- **Contradictions/Notes:** ๋งˆ์ดํฌ๋กœ ํ”„๋ก ํŠธ์—”๋“œ ์•„ํ‚คํ…์ฒ˜๋Š” ๊ฐ€์žฅ ๋†’์€ ์ˆ˜์ค€์˜ ๊ฒฐํ•ฉ๋„ ๋ถ„๋ฆฌ(Decoupling)๋ฅผ ์ œ๊ณตํ•˜์ง€๋งŒ ์œ ์ง€๋ณด์ˆ˜์™€ ๋ฐฐํฌ์˜ ์˜ค๋ฒ„ํ—ค๋“œ๊ฐ€ ๋งค์šฐ ํฐ ๋ฐ˜๋ฉด, ๋ชจ๋“ˆ๋Ÿฌ ๋ชจ๋†€๋ฆฌ์Šค๋Š” ์™„์ „ํ•œ ๋…๋ฆฝ์„ฑ์„ ์ผ๋ถ€ ํฌ๊ธฐํ•˜๋Š” ๋Œ€์‹  ๋‹จ์ผ ์•ฑ ํ™˜๊ฒฝ์—์„œ ํ›จ์”ฌ ์ ์€ ๋ณต์žก์„ฑ์œผ๋กœ ์œ ์‚ฌํ•œ ํ™•์žฅ์„ฑ ๋ฐ ๊ฒฉ๋ฆฌ ํšจ๊ณผ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค๋Š” ๋ช…ํ™•ํ•œ ํŠธ๋ ˆ์ด๋“œ์˜คํ”„๊ฐ€ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค [2, 9]. + +--- +*Last updated: 2026-04-26* \ No newline at end of file diff --git a/00_Raw/Monorepo.md b/00_Raw/Monorepo.md new file mode 100644 index 00000000..8f5098b5 --- /dev/null +++ b/00_Raw/Monorepo.md @@ -0,0 +1,22 @@ +# [[Monorepo]] + +## ๐Ÿ“Œ Brief Summary +๋ชจ๋…ธ๋ ˆํฌ(Monorepo)๋Š” ๋‹จ์ผ Git ์ €์žฅ์†Œ ๋‚ด์— ์—ฌ๋Ÿฌ ํ”„๋ก ํŠธ์—”๋“œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜, ๊ณต์œ  UI ์ปดํฌ๋„ŒํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, ๋””์ž์ธ ํ† ํฐ ๋ฐ ๊ณตํ†ต ๋„๊ตฌ๋“ค์„ ํ•จ๊ป˜ ํฌํ•จํ•˜์—ฌ ๊ด€๋ฆฌํ•˜๋Š” ๋ฒ„์ „ ๊ด€๋ฆฌ ์ „๋žต์ž…๋‹ˆ๋‹ค [1, 2]. ์ด๋Š” ๋‹จ์ˆœํžˆ ์ฝ”๋“œ๋ฅผ ํ•œ๊ณณ์— ๋ชจ์•„๋‘” ๋ชจ๋†€๋ฆฌ์‹(Monolith) ๊ตฌ์กฐ๊ฐ€ ์•„๋‹ˆ๋ผ, ๋ช…ํ™•ํ•œ ์˜์กด์„ฑ ๊ทธ๋ž˜ํ”„์™€ ๊ณต๊ฐœ API(Public API)๋ฅผ ํ†ตํ•ด ํŒจํ‚ค์ง€ ๊ฐ„์˜ ๊ฒฐํ•ฉ๋„๋ฅผ ๋‚ฎ์ถ”๊ณ  ์žฌ์‚ฌ์šฉ์„ฑ์„ ๊ทน๋Œ€ํ™”ํ•˜๋Š” ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ํ”„๋ก ํŠธ์—”๋“œ ์•„ํ‚คํ…์ฒ˜์ž…๋‹ˆ๋‹ค [2-4]. + +## ๐Ÿ“– Core Content +- **๊ตฌ์กฐ ๋ฐ ์ฃผ์š” ํŠน์ง•:** ๋ชจ๋…ธ๋ ˆํฌ๋Š” ์—ฌ๋Ÿฌ ์•ฑ(์˜ˆ: ์›น, ๊ด€๋ฆฌ์ž ์•ฑ, ๋ชจ๋ฐ”์ผ ์›น)๊ณผ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ํŒจํ‚ค์ง€(์˜ˆ: UI ํ‚คํŠธ, ๋””์ž์ธ ํ† ํฐ, API ํด๋ผ์ด์–ธํŠธ)๊ฐ€ ํ•˜๋‚˜์˜ ๊ณต์œ ๋œ ํžˆ์Šคํ† ๋ฆฌ์™€ ์ผ๊ด€๋œ ์˜์กด์„ฑ ๊ทธ๋ž˜ํ”„๋ฅผ ๊ฐ–๋Š” ๊ตฌ์กฐ๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค [1, 5]. ์ž˜ ๊ตฌ์„ฑ๋œ ๋ชจ๋…ธ๋ ˆํฌ๋Š” ๋†’์€ ์‘์ง‘๋„(high cohesion)์™€ ๋‚ฎ์€ ๊ฒฐํ•ฉ๋„(low coupling)๋ฅผ ๊ฐ–์ถ˜ ๊ฒฉ๋ฆฌ๋œ ํŒจํ‚ค์ง€ ๋‹จ์œ„๋กœ ์ฝ”๋“œ๋ฅผ ์œ ์ง€ํ•ฉ๋‹ˆ๋‹ค [2, 5]. +- **๋„์ž…์˜ ์žฅ์ :** ๋‹จ์ผ ์ €์žฅ์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด UI ์›์‹œ ์ปดํฌ๋„ŒํŠธ(primitives), ๋””์ž์ธ ํ† ํฐ, ๋ผ์šฐํŒ… ๊ทœ์น™ ๋“ฑ์˜ ์ฝ”๋“œ๋ฅผ ์—ฌ๋Ÿฌ ์•ฑ์—์„œ ์†์‰ฝ๊ฒŒ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [1, 6]. API ๋ณ€๊ฒฝ ์‹œ ํ•ด๋‹น API๋ฅผ ์†Œ๋น„ํ•˜๋Š” ๋ชจ๋“  ์•ฑ์˜ ์—…๋ฐ์ดํŠธ๋ฅผ ํ•œ ๋ฒˆ์˜ ์ปค๋ฐ‹์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๋Š” ์›์ž์  ๋ฆฌํŒฉํ† ๋ง(atomic refactors)์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค [1]. ๊ธฐ์กด์ฒ˜๋Ÿผ ์ฝ”๋“œ๋ฅผ ๊ณต์œ ํ•˜๊ธฐ ์œ„ํ•ด ์—ฌ๋Ÿฌ ์ €์žฅ์†Œ์— ๊ฑธ์ณ ๋‹ค์ˆ˜์˜ ํ’€ ๋ฆฌํ€˜์ŠคํŠธ(PR)๋ฅผ ์ƒ์„ฑํ•ด์•ผ ํ•˜๋Š” ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜์—ฌ ๊ฐœ๋ฐœ ์†๋„๋ฅผ ํฌ๊ฒŒ ํ–ฅ์ƒ์‹œํ‚ต๋‹ˆ๋‹ค [7]. +- **ํ•„์ˆ˜ ๋„๊ตฌ ์ƒํƒœ๊ณ„ (Tooling):** 2025๋…„ ๊ธฐ์ค€ ๋ชจ๋…ธ๋ ˆํฌ ํ™˜๊ฒฝ์„ ์ง€ํƒฑํ•˜๋Š” ์ฃผ์š” ๋„๊ตฌ๋กœ๋Š” `pnpm workspaces`, `Turborepo`, `Nx`, `Lerna` ๋“ฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค [8, 9]. + - `pnpm workspaces`: ๋น ๋ฅด๊ณ  ๊ณต๊ฐ„ ํšจ์œจ์ ์ด๋ฉฐ `workspace:*` ํ”„๋กœํ† ์ฝœ์„ ํ†ตํ•ด ์—„๊ฒฉํ•˜๊ณ  ์˜ฌ๋ฐ”๋ฅธ ๋กœ์ปฌ ์˜์กด์„ฑ ์—ฐ๊ฒฐ์„ ๋ณด์žฅํ•ฉ๋‹ˆ๋‹ค [10]. + - `Turborepo`: ์ฆ๋ถ„ ๋นŒ๋“œ(incremental builds)์™€ ํŒŒ์ดํ”„๋ผ์ธ ๊ด€๋ฆฌ, ์›๊ฒฉ ์บ์‹ฑ ๊ธฐ๋Šฅ์„ ํ†ตํ•ด ๋กœ์ปฌ ๊ฐœ๋ฐœ ๋ฐ CI(์ง€์†์  ํ†ตํ•ฉ) ์†๋„๋ฅผ ๋น„์•ฝ์ ์œผ๋กœ ๋†’์—ฌ์ค๋‹ˆ๋‹ค [11]. + - `Nx`: ๊ฐ•๋ ฅํ•œ ํ”„๋กœ์ ํŠธ ๊ทธ๋ž˜ํ”„๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์ฝ”๋“œ ๋ณ€๊ฒฝ์— '์˜ํ–ฅ์„ ๋ฐ›๋Š”(affected)' ํ”„๋กœ์ ํŠธ๋งŒ ๋นŒ๋“œ ๋ฐ ํ…Œ์ŠคํŠธํ•˜๋„๋ก ์ตœ์ ํ™”ํ•˜๋ฉฐ, ์•„ํ‚คํ…์ฒ˜ ์ •์ฑ… ๊ฐ•์ œ์„ฑ์ด ๋›ฐ์–ด๋‚ฉ๋‹ˆ๋‹ค [12, 13]. +- **ํ™•์žฅ์„ฑ์„ ์œ„ํ•œ ๊ฒฝ๊ณ„(Boundaries) ๊ทœ์น™:** ์„ฑ๊ณต์ ์ธ ๋ชจ๋…ธ๋ ˆํฌ๋Š” ๊ทœ์œจ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ๋‚ด๋ถ€ ํŒŒ์ผ ๊ฒฝ๋กœ๋กœ ์ง์ ‘ ์ ‘๊ทผํ•˜๋Š” '๊นŠ์€ ๊ฒฝ๋กœ ์ž„ํฌํŠธ(deep imports)'๋ฅผ ์—„๊ฒฉํžˆ ๊ธˆ์ง€ํ•˜๊ณ , ๊ฐ ํŒจํ‚ค์ง€๊ฐ€ `src/index.ts`์™€ ๊ฐ™์€ ๋‹จ์ผ ์ง„์ž…์ (Public API)์„ ํ†ตํ•ด์„œ๋งŒ ๋ชจ๋“ˆ์„ ๋…ธ์ถœํ•˜๋„๋ก ๊ตฌ์„ฑํ•˜์—ฌ ํŒŒ์ผ ๊ฐ„์˜ ๊ฒฐํ•ฉ์„ ๋ง‰์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค [4, 14]. +- **์•„ํ‚คํ…์ฒ˜ ๋ฐฉ๋ฒ•๋ก ๊ณผ์˜ ๊ฒฐํ•ฉ:** ๋ชจ๋…ธ๋ ˆํฌ ๋‚ด์˜ ๋‹จ์ผ ๊ณต์œ  ํด๋”(`shared/`)๊ฐ€ ์žก๋™์‚ฌ๋‹ˆ ์ฝ”๋“œ๋กœ ์ฑ„์›Œ์ง€๋Š” ๋ฌธ์ œ๋ฅผ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด Feature-Sliced Design (FSD)์™€ ๊ฐ™์€ ๋ฐฉ๋ฒ•๋ก ์ด ๊ถŒ์žฅ๋ฉ๋‹ˆ๋‹ค [15-17]. FSD์˜ ๊ณ„์ธต ๊ตฌ์กฐ(layers)๋ฅผ ๋ชจ๋…ธ๋ ˆํฌ์˜ ํŒจํ‚ค์ง€์™€ ์•ฑ ๋‚ด๋ถ€์— ์ ์šฉํ•˜์—ฌ, ์–ด๋–ค ๋ชจ๋“ˆ์ด ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ์ง€, ๋„๋ฉ”์ธ ๊ฒฝ๊ณ„๊ฐ€ ์–ด๋””์ธ์ง€ ์˜ˆ์ธกํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค [16-20]. + +## ๐Ÿ”— Knowledge Connections +- **Related Topics:** [[Turborepo]], [[Nx]], [[Feature-Sliced Design (FSD)]], [[Public APIs]] +- **Projects/Contexts:** [[Scalable Frontend Architecture]], [[Component Library Architecture]] +- **Contradictions/Notes:** ๋ชจ๋…ธ๋ ˆํฌ๋Š” ์ฝ”๋“œ ํ†ตํ•ฉ ๋น„์šฉ(integration cost)์„ ์ค„์ด๊ณ  ์›์ž์  ๋ณ€๊ฒฝ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜์ง€๋งŒ, ๊ฒฝ๊ณ„ ๊ทœ์น™ ์„ค์ •์ด๋‚˜ CI ์ „๋žต ๊ฐ™์€ ๋†’์€ ๊ทœ์œจ์ด ์š”๊ตฌ๋ฉ๋‹ˆ๋‹ค. ๋ฐ˜๋ฉด, ์•ฑ๋“ค์ด ์™„์ „ํžˆ ๋…๋ฆฝ์ ์ธ ๋ฆด๋ฆฌ์Šค ์ฃผ๊ธฐ๋ฅผ ๊ฐ€์ง€๊ฑฐ๋‚˜ ์ปดํ”Œ๋ผ์ด์–ธ์Šค์ƒ ์—„๊ฒฉํ•œ ๋ณด์•ˆ ๋ถ„๋ฆฌ๊ฐ€ ํ•„์š”ํ•œ ์กฐ์ง์—์„œ๋Š” ํด๋ฆฌ๋ ˆํฌ(polyrepo) ์ ‘๊ทผ ๋ฐฉ์‹์ด ๋” ์ ํ•ฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [21, 22]. + +--- +*Last updated: 2026-04-26* \ No newline at end of file diff --git a/00_Raw/Next.js App Router ํ™˜๊ฒฝ์—์„œ์˜ ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ํ”„๋ก ํŠธ์—”๋“œ ์Šคํƒ€์ผ๋ง ๋ฐ UI ์ปดํฌ๋„ŒํŠธ ์•„ํ‚คํ…์ฒ˜ ์„ค๊ณ„.md b/00_Raw/Next.js App Router ํ™˜๊ฒฝ์—์„œ์˜ ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ํ”„๋ก ํŠธ์—”๋“œ ์Šคํƒ€์ผ๋ง ๋ฐ UI ์ปดํฌ๋„ŒํŠธ ์•„ํ‚คํ…์ฒ˜ ์„ค๊ณ„.md new file mode 100644 index 00000000..ef1b1af4 --- /dev/null +++ b/00_Raw/Next.js App Router ํ™˜๊ฒฝ์—์„œ์˜ ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ํ”„๋ก ํŠธ์—”๋“œ ์Šคํƒ€์ผ๋ง ๋ฐ UI ์ปดํฌ๋„ŒํŠธ ์•„ํ‚คํ…์ฒ˜ ์„ค๊ณ„.md @@ -0,0 +1,33 @@ +# [[Next.js App Router ํ™˜๊ฒฝ์—์„œ์˜ ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ํ”„๋ก ํŠธ์—”๋“œ ์Šคํƒ€์ผ๋ง ๋ฐ UI ์ปดํฌ๋„ŒํŠธ ์•„ํ‚คํ…์ฒ˜ ์„ค๊ณ„]] + +## ๐Ÿ“Œ Brief Summary +Next.js App Router ํ™˜๊ฒฝ์—์„œ๋Š” React Server Components(RSC)์˜ ๋„์ž…์œผ๋กœ ์ธํ•ด ์ปจํ…์ŠคํŠธ(Context)์— ์˜์กดํ•˜๋Š” ๋Ÿฐํƒ€์ž„ CSS-in-JS ๋ฐฉ์‹๋ณด๋‹ค ๋นŒ๋“œ ํƒ€์ž„์— ์ •์  CSS๋ฅผ ์ƒ์„ฑํ•˜๋Š” Tailwind CSS๋‚˜ CSS Modules, vanilla-extract์˜ ์‚ฌ์šฉ์ด ์„ฑ๋Šฅ ๋ฐ ํ˜ธํ™˜์„ฑ ๋ฉด์—์„œ ์ ๊ทน ๊ถŒ์žฅ๋ฉ๋‹ˆ๋‹ค [1-3]. ํ™•์žฅ ๊ฐ€๋Šฅํ•œ UI๋ฅผ ๊ตฌ์ถ•ํ•˜๋ ค๋ฉด ๋””์ž์ธ ํ† ํฐ(Design Tokens)์„ ํ™œ์šฉํ•ด ์ค‘์•™ ์ง‘์ค‘์‹ ์Šคํƒ€์ผ๋ง์„ ์ ์šฉํ•˜๊ณ , Atomic Design, Compound Components, Headless Components ๋“ฑ์˜ ํŒจํ„ด์„ ์กฐํ•ฉํ•˜์—ฌ ์œ ์ง€๋ณด์ˆ˜์„ฑ๊ณผ ๋ ˆ์ด์•„์›ƒ์˜ ์œ ์—ฐ์„ฑ์„ ๋†’์—ฌ์•ผ ํ•ฉ๋‹ˆ๋‹ค [4-8]. ๋˜ํ•œ, ๋Œ€๊ทœ๋ชจ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” Feature-Sliced Design(FSD)๊ณผ ๊ฐ™์€ ์•„ํ‚คํ…์ฒ˜ ๋ฐฉ๋ฒ•๋ก ์„ ๋ชจ๋…ธ๋ ˆํฌ(Monorepo)์™€ ๊ฒฐํ•ฉํ•˜์—ฌ ๋ชจ๋“ˆ ๊ฐ„์˜ ๊ฒฐํ•ฉ๋„๋ฅผ ๋‚ฎ์ถ”๊ณ  ์˜ˆ์ธก ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ๋ฒ ์ด์Šค ๊ตฌ์กฐ๋ฅผ ์„ค๊ณ„ํ•˜๋Š” ๊ฒƒ์ด ํ•„์ˆ˜์ ์ž…๋‹ˆ๋‹ค [9, 10]. + +## ๐Ÿ“– Core Content + +* **Next.js App Router์™€ ์Šคํƒ€์ผ๋ง ํŒจ๋Ÿฌ๋‹ค์ž„ ๋ณ€ํ™”** + * Next.js 15์˜ App Router๋Š” ๋ธŒ๋ผ์šฐ์ €๋กœ JavaScript๋ฅผ ์ „์†กํ•˜์ง€ ์•Š๊ณ  ์„œ๋ฒ„์—์„œ ๋…์ ์ ์œผ๋กœ ์‹คํ–‰๋˜๋Š” **React Server Components(RSC)๋ฅผ ๊ธฐ๋ณธ์œผ๋กœ ์‚ฌ์šฉ**ํ•ฉ๋‹ˆ๋‹ค [11]. + * ์ด๋กœ ์ธํ•ด ๊ธฐ์กด React Context์— ์˜์กดํ•˜๋˜ ๋Ÿฐํƒ€์ž„ CSS-in-JS(์˜ˆ: Styled Components, Emotion)๋Š” RSC ํ™˜๊ฒฝ์—์„œ ์ž‘๋™ ์ œ์•ฝ๊ณผ ์„œ๋ฒ„ ์ง๋ ฌํ™” ์˜ค๋ฒ„ํ—ค๋“œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [1, 2, 12, 13]. + * ๋”ฐ๋ผ์„œ App Router ํ™˜๊ฒฝ์—์„œ๋Š” ๋Ÿฐํƒ€์ž„ ๋น„์šฉ์ด ์—†๊ณ  ์ •์  CSS๋ฅผ ์ƒ์„ฑํ•˜๋Š” **Tailwind CSS, CSS Modules, ๋˜๋Š” vanilla-extract๊ฐ€ ๊ฐ€์žฅ ์ ํ•ฉํ•œ ๋ฐฉ์‹**์œผ๋กœ ํ‰๊ฐ€๋ฐ›๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค [3, 14, 15]. + * Styled Components v6 ์ด์ƒ์€ RSC๋ฅผ ์ง€์›ํ•˜์—ฌ ๋ณ„๋„์˜ ์ง€์‹œ์–ด ์—†์ด `