feat: massive wikification of styling systems and SaaS architecture

Processed 100+ files including Design Systems, CSS Architectures, and Enterprise Frontend strategies.
2026-04-26 12:08:51 +09:00
parent 7dc7e0436c
commit cfafbdbc36
193 changed files with 5296 additions and 87 deletions
@@ -0,0 +1,26 @@
+# [[Mobile-First Approach]]
+
+## 📌 Brief Summary
+모바일 퍼스트(Mobile-First Approach)는 웹사이트를 계획, 구조화, 디자인할 때 가장 작은 모바일 화면 크기를 우선적인 기준으로 삼는 콘텐츠 및 디자인 전략입니다 [1-3]. 데스크톱 화면을 먼저 디자인한 뒤 축소하는 방식과 달리, 모바일 환경에서 가장 핵심적인 콘텐츠와 기능을 먼저 배치한 후 화면이 커짐에 따라 CSS 미디어 쿼리 등을 사용해 점진적으로 레이아웃과 기능을 확장해 나가는 특징을 가집니다 [3-5]. 이는 우선순위를 명확히 하고 깔끔하며 빠른 웹사이트를 구축하는 데 도움을 줍니다 [4, 6].
+
+## 📖 Core Content
+* **개념적 특징과 반응형 디자인과의 차이점:**
+  조직에서 웹사이트를 개편할 때 모바일 퍼스트와 반응형 디자인(Responsive Design)을 혼용하기 쉽지만, 둘은 서로 다른 문제를 해결합니다. 모바일 퍼스트 디자인은 제한된 공간에서 '무엇이 가장 필수적인가'를 결정하고 콘텐츠의 우선순위를 정하는 **디자인 및 콘텐츠 전략**입니다 [1, 2]. 반면, 반응형 디자인은 유동적 그리드(Fluid grids)나 컨테이너 쿼리(Container queries) 등의 CSS 기술을 사용해 디자인이 다양한 화면에 맞게 조정되도록 하는 **시스템**으로, 이 두 가지는 함께 협력하여 작동합니다 [1, 2].
+
+* **모바일 퍼스트 접근법의 주요 이점:**
+  * **모바일 우선 색인(Mobile-First Indexing):** 구글(Google)은 웹사이트의 순위를 매길 때 모바일 버전을 기본으로 색인화합니다. 따라서 모바일 레이아웃이 깨지거나 최적화되지 않으면 자연 검색 엔진 성능(SEO)에 직접적인 악영향을 미칩니다 [6-8].
+  * **성능 및 사용자 경험 향상:** 가장 작은 화면을 위해 디자인하면 필수적이지 않은 요소들을 덜어내도록 강제되므로, 뷰포트 크기가 작을 때 시각적 노이즈가 줄어들고 코드(가벼운 에셋, 적은 스크립트 등)가 가벼워져 페이지 렌더링 성능이 자연스럽게 향상됩니다 [4, 6].
+
+* **실무 구현 방법 (CSS 및 UI 설계):**
+  * **스타일 구조화:** CSS 작성 시 모바일 뷰포트에 대한 스타일을 기본(Base)으로 작성하고, 화면이 커짐에 따라 복잡한 레이아웃을 추가할 때 `min-width` 미디어 쿼리를 사용합니다 [5, 9, 10]. 
+  * **해상도 기준 설정:** 말레이시아 및 전 세계적으로 가장 일반적인 모바일 화면 크기인 320px 또는 375px 너비에서 와이어프레임을 시작하는 것이 권장됩니다 [10].
+  * **UI/UX 최적화:** 주요 액션(네비게이션, CTA 버튼 등)을 추가적인 스크롤 없이도 볼 수 있게 배치해야 하며, 터치하기 쉽도록 충분히 큰 탭 영역을 확보하고 모바일에서의 폼과 메뉴를 단순화해야 합니다 [10].
+  * 모바일 퍼스트를 잘 구현한 실제 사례로는, 기사의 중요도에 따라 모바일에서 단일 스택으로 깔끔하게 조정되도록 설계한 출판 매체 가디언(The Guardian) 지가 있습니다 [11].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Responsive Web Design]], [[Media Queries]], [[Core Web Vitals]]
+- **Projects/Contexts:** [[The Guardian]], [[CSS Architecture]]
+- **Contradictions/Notes:** 자료에서는 모바일 퍼스트 디자인과 반응형 웹 디자인을 분명하게 구분하고 있습니다. 모바일 퍼스트는 사용자 여정과 우선순위를 다루는 '전략'이며, 반응형 디자인은 이를 유연하게 조정하는 '기술적 구현'입니다 [1, 2]. 
+
+---
+*Last updated: 2026-04-26*
@@ -0,0 +1,26 @@
+# [[Mobile-First Design]]
+
+## 📌 Brief Summary
+모바일 퍼스트 디자인(Mobile-First Design)은 가장 작은 뷰포트인 모바일 화면을 기준으로 디자인과 코드를 먼저 작성한 후, 화면 크기가 커짐에 따라 점진적으로 레이아웃을 확장해 나가는 웹 디자인 방식입니다 [1, 2]. 이 접근법은 필수 콘텐츠의 우선순위를 정하도록 강제하여 더 깔끔하고 빠른 기본 스타일을 생성하게 하며, 최신 검색 엔진의 모바일 우선 인덱싱(Mobile-First Indexing) 기준을 충족시켜 SEO(검색 엔진 최적화)에도 중요한 영향을 미칩니다 [2-4].
+
+## 📖 Core Content
+* **구현 방식 및 원리**
+  모바일 퍼스트 디자인은 가장 좁은 화면(일반적으로 320px 또는 375px 너비)을 기준으로 기본 스타일과 와이어프레임을 먼저 구축합니다 [5]. 그 후 CSS에서 `min-width` 미디어 쿼리(Media Queries)를 사용하여 뷰포트가 커질 때만 더 복잡한 레이아웃과 스타일이 적용되도록 코드를 작성합니다 [2, 5, 6]. 이는 데스크톱 레이아웃을 강제로 축소할 때 흔히 발생하는 텍스트 압축이나 요소 겹침 등의 문제를 방지합니다 [1, 7].
+
+* **주요 장점**
+  * **콘텐츠 우선순위화:** 화면 공간이 제한되어 있으므로 가장 핵심적인 기능과 콘텐츠만 배치하게 되어 사용자 경험을 단순하고 명확하게 만듭니다 [1, 4].
+  * **성능 최적화:** 가벼운 에셋, 더 적은 스크립트, 단순화된 시각적 요소로 시작하기 때문에 웹페이지의 성능과 로드 속도가 자연스럽게 향상됩니다 [4].
+  * **검색 엔진 최적화(SEO):** 구글(Google)은 웹사이트를 평가하고 순위를 매길 때 모바일 버전을 주로 평가하는 '모바일 우선 인덱싱(Mobile-First Indexing)'을 기본으로 사용합니다 [3, 4]. 따라서 잘 설계된 모바일 페이지는 검색 노출 및 유기적 트래픽 확보에 필수적입니다.
+
+* **실무 구현 지침 (Best Practices)**
+  * 모바일 환경에서는 폼(forms)과 메뉴를 단순하게 유지하고, 화면이 커짐에 따라 레이아웃 요소를 추가해야 합니다 [5].
+  * 사용자가 모바일에서 엄지손가락으로 쉽게 탭할 수 있도록 주요 액션(내비게이션, CTA 버튼 등)을 눈에 잘 띄는 곳에 배치하고 넉넉한 터치 영역(예: 최소 44x44px 이상)을 확보해야 합니다 [5, 8, 9].
+  * 우수한 모범 사례인 '가디언(The Guardian)' 웹사이트의 경우, 작은 폰 화면에서는 단일 에디토리얼 스택으로 표시되다가 데스크톱에서는 4~5개 열로 부드럽게 확장되는 완벽한 모바일 퍼스트 레이아웃을 보여줍니다 [10, 11].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Responsive Web Design]], [[Media Queries]], [[Core Web Vitals]]
+- **Projects/Contexts:** [[CSS 실전 설계]], [[반응형 디자인]], [[The Guardian Website]]
+- **Contradictions/Notes:** 소스에서는 데스크톱 레이아웃을 먼저 만들고 이를 모바일 크기로 줄이는 방식(Graceful Degradation)은 코드가 복잡해지고 요소가 비좁아져 유지보수가 어렵기 때문에, 모바일 버전을 시작점으로 삼아 큰 화면으로 확장하는 방식(Progressive Enhancement)을 취하는 것이 올바른 CSS 설계 구조라고 강조합니다 [5, 7].
+
+---
+*Last updated: 2026-04-26*
@@ -0,0 +1,20 @@
+# [[Web Content Accessibility Guidelines (WCAG)]]
+
+## 📌 Brief Summary
+웹 콘텐츠 접근성 지침(WCAG)은 모든 사용자가 디지털 콘텐츠와 인터페이스에 장벽 없이 접근할 수 있도록 보장하는 포괄적인 접근성 표준입니다 [1, 2]. 실무 CSS 및 UI/UX 설계에서 WCAG는 애니메이션의 움직임 제한, 텍스트 크기 확대의 보장, 색상 대비 준수 등을 규정하여 포용적이고 안전한 사용자 경험(UX)을 구축하는 핵심 기준이 됩니다 [2-4].
+
+## 📖 Core Content
+- **모션 및 애니메이션 제어 (WCAG 2.2)**
+  과도한 애니메이션과 모션은 전정기관 장애(vestibular disorders)를 가진 사용자에게 불편함이나 발작을 유발할 수 있습니다 [4, 5]. 따라서 WCAG 2.2 지침은 모션을 미묘(subtle)하게 유지하고, 사용자가 애니메이션을 비활성화할 수 있는 설정(예: prefers-reduced-motion)을 제공할 것을 권장하며 이를 통해 포용적인 애니메이션 전략을 세울 수 있습니다 [1, 4, 5].
+- **반응형 유체 타이포그래피 (WCAG 1.4.4)**
+  WCAG 1.4.4 항목은 사용자가 보조 기술 없이도 텍스트를 최대 200%까지 확대할 수 있어야 한다고 규정합니다 [2]. 단순히 뷰포트 단위(vw 등)만 사용하여 폰트 크기를 제어하면 사용자의 브라우저 확대/축소 기능이 무력화되어 접근성 지침을 위반하게 됩니다 [2]. 이를 준수하기 위한 업계 모범 사례로 `clamp()` 함수 등을 활용해 최대 폰트 크기가 최소 폰트 크기의 2.5배를 초과하지 않도록 설정하는 "2.5배 규칙(2.5x Rule)"이 사용됩니다 [6, 7]. 
+- **디자인 토큰과 색상 대비**
+  디자인 시스템을 구축하고 디자인 토큰을 테스트할 때, 특히 색상 토큰(Color Tokens)은 명도 대비 비율(contrast ratio)이 WCAG 규정을 준수하는지 반드시 검증(Accessibility testing)을 거쳐야 합니다 [3, 8].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[반응형 디자인]], [[애니메이션 (transition / keyframes)]], [[유체 타이포그래피 (Fluid Typography)]], [[디자인 시스템 개념]]
+- **Projects/Contexts:** [[디자인 토큰(Design Tokens) 구축 및 테스트]], [[프론트엔드 실무 접근성 최적화]]
+- **Contradictions/Notes:** 소스 내에서 상충되는 정보는 없습니다. 다만, 반응형 유체 타이포그래피를 구현할 때 단순히 뷰포트 크기에만 의존하면 텍스트 확대 기능이 작동하지 않아 WCAG 1.4.4 지침을 위반하는 위험성이 발생하므로 설계 시 각별한 주의가 필요하다는 점이 강조됩니다 [2, 9].
+
+---
+*Last updated: 2026-04-26*
@@ -0,0 +1,22 @@
+# [[모바일 우선 설계(Mobile-First Design)]]
+
+## 📌 Brief Summary
+모바일 우선 설계(Mobile-First Design)는 가장 작은 화면 크기인 모바일 기기를 기준으로 웹사이트를 먼저 기획하고 구조화하며 디자인하는 접근 방식이다 [1]. 데스크톱 레이아웃을 단순히 축소하는 대신 모바일에서 완벽하게 작동하는 간결한 버전을 시작점으로 삼고, 화면이 커짐에 따라 기능과 디자인을 점진적으로 확장해 나간다 [2, 3]. 이 전략은 핵심 콘텐츠의 우선순위를 정하고 성능을 향상시키며, 반응형 디자인과 결합하여 모든 환경에서 일관된 사용자 경험을 제공하는 데 필수적인 역할을 한다 [1, 4, 5].
+
+## 📖 Core Content
+* **개념 및 우선순위화 전략**
+  모바일 우선 설계는 320px 또는 375px 너비 등 가장 작은 화면을 위한 디자인에서 출발하는 방식이다 [1, 6]. 데스크톱의 방대한 레이아웃을 모바일로 억지로 축소할 경우 텍스트가 작아지거나 요소가 비좁아지는 문제가 발생하기 때문에, 처음부터 제한된 공간에 맞춰 가장 필수적인 콘텐츠가 무엇인지 결정하는 '우선순위화' 전략을 취한다 [1, 3]. 이를 통해 불필요한 요소를 제거하고 핵심 액션(CTA)을 스크롤 없이도 볼 수 있도록 배치하여 쾌적하고 직관적인 사용자 여정을 구축한다 [1, 6].
+
+* **CSS 구현 방식 (점진적 향상)**
+  실무의 CSS 구조 설계 측면에서 모바일 우선 설계는 점진적 향상(Progressive Enhancement) 기법을 사용한다 [7]. 기본(Base) 스타일 코드를 모바일에 맞춰 가장 먼저 작성하고, 이후 화면이 커지는 분기점마다 `min-width` 미디어 쿼리를 사용하여 레이아웃의 복잡성을 추가해 나간다 [6-8]. 이 방식은 CSS 코드를 논리적이고 깔끔하게 유지시켜 주어 장기적인 유지보수성을 크게 높여준다 [6].
+
+* **성능(Performance) 및 SEO 최적화**
+  모바일 우선 접근법은 작은 화면에 맞춰 설계하기 때문에 자연스럽게 가벼운 에셋, 적은 스크립트, 단순화된 시각 요소를 사용하게 되어 웹사이트의 초기 로딩 성능이 향상된다 [4, 7]. 또한 구글(Google)은 기본적으로 모바일 버전을 기준으로 웹사이트를 평가하는 모바일 우선 인덱싱(Mobile-First Indexing) 정책을 사용하므로, 모바일 우선 설계는 검색 가시성과 SEO 순위를 보호하고 높이는 데 직접적인 영향을 미친다 [4, 9, 10].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[반응형 웹 디자인(Responsive Web Design)]], [[미디어 쿼리(Media Queries)]], [[Core Web Vitals]]
+- **Projects/Contexts:** [[실무에서 CSS 관리하는 방법]], [[반응형 디자인]]
+- **Contradictions/Notes:** 모바일 우선 설계와 반응형 웹 디자인은 함께 작동하지만 해결하는 문제는 서로 다르다. 모바일 우선 설계가 '무엇이 가장 중요한가'를 결정하는 디자인 및 콘텐츠 전략이라면, 반응형 디자인은 인터페이스가 모든 기기에 유연하게 적응하도록 만드는 시스템적 기술(CSS 구현 등)이라는 점에서 구별된다 [1, 5, 11].
+
+---
+*Last updated: 2026-04-26*
@@ -0,0 +1,25 @@
+# [[모바일 우선주의 (Mobile-First) 디자인]]
+
+## 📌 Brief Summary
+모바일 우선주의(Mobile-First) 디자인은 가장 작은 화면 크기(뷰포트)를 기준으로 먼저 디자인과 코드를 작성한 뒤, 점진적으로 더 큰 화면을 위해 확장(progressive enhancement)해 나가는 접근 방식입니다 [1, 2]. 이 방식은 한정된 공간으로 인해 콘텐츠의 우선순위를 엄격하게 정하도록 강제하며, 결과적으로 더 깔끔하고 빠른 웹사이트의 기본 스타일을 만들어냅니다 [1, 3, 4]. CSS 기술적 측면에서는 모바일을 타겟으로 기본 스타일을 먼저 정의하고, 화면이 커짐에 따라 `min-width` 미디어 쿼리(media queries)를 사용하여 레이아웃의 복잡성을 더해가는 것을 의미합니다 [1, 5, 6].
+
+## 📖 Core Content
+* **핵심 개념 및 도입 배경**
+  * **콘텐츠 우선순위와 간결함:** 기존 데스크톱 레이아웃을 단순히 축소하는 방식은 요소가 비좁아지거나 텍스트가 작아지는 문제를 낳습니다. 모바일 우선주의는 모바일에서 완벽하게 작동하는 단순화된 버전에서 시작하여 필수적인 요소만 먼저 고려하게 만듭니다 [2, 4].
+  * **검색 엔진 최적화(SEO) 및 성능:** 구글(Google)은 모바일 버전을 사이트 평가의 주 기준으로 삼는 모바일 우선 색인(Mobile-First Indexing)을 적용하고 있습니다. 즉, 빠르고 유용한 모바일 레이아웃은 트래픽과 검색 노출 가시성에 직접적인 영향을 줍니다 [4, 7, 8]. 또한 이 방식은 무거운 에셋과 불필요한 스크립트를 줄여 자연스럽게 로딩 성능을 향상시킵니다 [4].
+
+* **실무 구현 방식 (Best Practices)**
+  * **CSS `min-width` 미디어 쿼리 활용:** 모든 뷰포트에 적용될 모바일용 코드를 CSS 기본 스타일로 작성한 후, 태블릿이나 데스크톱처럼 더 큰 화면에 대한 스타일만 `min-width` 미디어 쿼리 내부에 추가합니다 [1, 5, 6]. 이 구조는 CSS를 훨씬 논리적으로 만들고 유지보수를 용이하게 합니다 [6].
+  * **와이어프레임 설계:** 디자인 초기 단계의 와이어프레임은 모바일의 가장 보편적인 너비인 320px 또는 375px 크기에서 시작해야 합니다 [6].
+  * **터치 대상(Touch Target)과 UI 단순화:** 주요 액션 버튼, 연락처, CTA는 추가 스크롤 없이 눈에 띄게 배치되어야 합니다 [6]. 모바일에서의 탭 대상 크기는 충분히 크게 설계해야 하며(Apple은 최소 44x44px, Google은 최소 48x48px 권장), 메뉴나 폼(form) 역시 가장 단순한 형태에서 시작하여 화면이 커질 때 확장되게 구성해야 합니다 [6, 9].
+
+* **실제 적용 사례**
+  * 영국의 언론사 The Guardian은 모바일 우선 디자인을 가장 잘 구현한 사례 중 하나로 꼽힙니다 [10]. 복잡한 기사와 광고, 멀티미디어 속에서도 작은 스마트폰 화면부터 큰 데스크톱 화면까지 헤드라인과 이미지가 자연스럽게 크기를 조정하고 콘텐츠가 구조화된 형태를 유지합니다 [10].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[반응형 웹 디자인 (Responsive Web Design)]], [[미디어 쿼리 (Media Queries)]], [[모바일 우선 색인 (Mobile-First Indexing)]]
+- **Projects/Contexts:** [[반응형 디자인]], [[실무에서 CSS 관리하는 방법]]
+- **Contradictions/Notes:** 소스 전반에 걸쳐 내용 충돌은 없으며, 반응형 디자인을 효과적으로 구현하기 위해서는 모바일 환경을 '사후 대책'이 아닌 디자인과 개발의 '기반(Foundation)'으로 삼아야 한다는 점이 일관되게 강조되고 있습니다 [6].
+
+---
+*Last updated: 2026-04-26*
@@ -0,0 +1,18 @@
+# [[모바일 퍼스트 인덱싱(Mobile-First Indexing)]]
+
+## 📌 Brief Summary
+모바일 퍼스트 인덱싱(Mobile-First Indexing)은 구글과 같은 검색 엔진이 웹사이트를 평가하고 검색 순위를 매길 때 데스크톱 버전이 아닌 모바일 버전의 사이트를 우선적인 기준으로 삼는 정책입니다 [1, 2]. 이는 모바일 화면에서 레이아웃이 깨지거나 로딩 속도가 느릴 경우 사용자 경험뿐만 아니라 유기적 검색 성능(SEO)에 직접적인 악영향을 미친다는 것을 의미합니다 [1, 2]. 따라서 현대 반응형 웹 개발에서는 가장 작은 화면을 기준으로 먼저 설계하는 모바일 퍼스트(Mobile-First) 디자인 접근이 필수적으로 요구됩니다 [3].
+
+## 📖 Core Content
+* **검색 엔진 평가 기준의 변화:** 구글은 웹사이트의 순위를 매기고 평가하기 위해 모바일 버전을 기본적으로 우선 인덱싱합니다 [1, 4]. 과거와 달리 모바일 환경에서의 레이아웃, 로딩 속도, 사용성이 검색 결과 노출을 결정하는 핵심 지표가 되었습니다 [2].
+* **SEO와 트래픽에 미치는 영향:** 웹사이트가 느리게 로드되거나, 텍스트가 너무 작거나, 사용자가 강제로 화면을 확대해야 하는 등 모바일 최적화가 부족할 경우, 구글은 이를 불량한 모바일 경험으로 간주하여 검색 순위를 낮춥니다 [2]. 반대로, 모바일 화면에 깔끔하게 적응하는 반응형 사이트는 검색 가시성을 보호하고 트래픽을 유지하는 데 필수적입니다 [2, 5].
+* **모바일 퍼스트 디자인(Mobile-First Design) 접근법의 적용:** 모바일 퍼스트 인덱싱에 효과적으로 대응하기 위해서는 가장 작은 화면 크기(예: 320px 또는 375px 폭)를 기준으로 베이스 스타일을 먼저 설계하고, 화면이 커짐에 따라 점진적으로 레이아웃을 확장(`min-width` 미디어 쿼리 사용)하는 방식이 권장됩니다 [3, 6, 7]. 
+* **설계 성능 및 구조적 이점:** 모바일 우선으로 설계하면 제한된 공간으로 인해 불필요한 요소를 최소화하고 가장 중요한 콘텐츠의 우선순위를 정하게 됩니다 [5, 6]. 이는 더 가벼운 에셋, 적은 스크립트 사용을 유도하여 성능을 자연스럽게 향상시키며, 구조적으로도 관리하기 쉬운 깔끔한 CSS 작성을 돕습니다 [5, 7]. 또한 코어 웹 바이탈(Core Web Vitals)과 같은 구글의 주요 성능 지표 개선과도 직접적으로 연결됩니다 [4, 5].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[반응형 웹 디자인(Responsive Web Design)]], [[모바일 퍼스트 디자인(Mobile-First Design)]], [[코어 웹 바이탈(Core Web Vitals)]], [[미디어 쿼리(Media Queries)]]
+- **Projects/Contexts:** [[검색 엔진 최적화(SEO)]], [[프론트엔드 반응형 레이아웃 설계]]
+- **Contradictions/Notes:** 제공된 소스들은 모두 구글의 모바일 퍼스트 인덱싱 정책으로 인해 모바일 반응형 설계가 프론트엔드 개발에서 선택이 아닌 필수임을 일관되게 강조하고 있으며, 상충되는 내용은 없습니다.
+
+---
+*Last updated: 2026-04-26*
@@ -0,0 +1,18 @@
+# [[모바일 퍼스트(Mobile-First)]]
+
+## 📌 Brief Summary
+모바일 퍼스트(Mobile-First)는 웹사이트를 기획, 구조화, 설계할 때 가장 작은 화면 크기(모바일)를 기준으로 시작하여, 점진적으로 더 큰 기기에 맞춰 확장해 나가는 디자인 및 콘텐츠 전략입니다 [1, 2]. 이 접근법은 제한된 공간 안에서 필수적인 콘텐츠와 기능을 최우선으로 배치하여 간결하고 빠른 레이아웃을 생성하는 데 목적이 있습니다 [2, 3]. 기술적으로 CSS를 작성할 때는 모바일용 기본 스타일을 먼저 정의한 후, `min-width` 미디어 쿼리를 사용하여 뷰포트가 커질 때 점진적으로 복잡성을 더해가는 방식으로 구현됩니다 [1, 4, 5].
+
+## 📖 Core Content
+* **개념 및 반응형 디자인과의 역할 구분:** 모바일 퍼스트는 단순히 화면을 줄이는 것이 아니라, 공간이 제한되었을 때 무엇이 필수적이고 먼저 와야 하는지 우선순위를 정하는 '콘텐츠 및 디자인 전략'입니다 [2]. 반면, 반응형 디자인(Responsive Design)은 인터페이스가 여러 화면 크기에 유동적으로 적응하게 만드는 '시스템'으로, 이 둘은 서로 다른 문제를 해결하며 함께 작동합니다 [2, 6, 7]. 데스크톱 레이아웃을 모바일로 억지로 축소하는 방식은 요소가 비좁아지고 가독성이 떨어질 수 있으므로, 모바일에서 완벽하게 작동하는 깔끔한 버전을 먼저 시작하는 것이 핵심입니다 [8].
+* **구조적이고 유지보수 가능한 CSS 구현:** 320px 또는 375px과 같은 일반적인 모바일 너비에서 디자인을 시작합니다 [5]. CSS를 작성할 때는 모바일 디바이스에 적용되는 핵심 레이아웃 스타일을 먼저 구축한 뒤, `min-width` 미디어 쿼리를 사용하여 데스크톱 등 더 큰 화면을 위한 디자인을 덧붙이는 점진적 향상(Progressive Enhancement) 방식을 따릅니다 [1, 5]. 이는 코드를 논리적으로 유지하고 향후 관리를 쉽게 만들며, 훨씬 가볍고 빠른 기본 스타일을 생성합니다 [1, 5].
+* **SEO 및 성능 최적화:** 현재 구글(Google)은 기본적으로 웹사이트의 모바일 버전을 기준으로 평가하고 순위를 매기는 '모바일 퍼스트 인덱싱(Mobile-first indexing)'을 적용하고 있습니다 [9-12]. 모바일 퍼스트로 디자인하면 초기 로딩에 필요한 가벼운 에셋, 더 적은 스크립트, 단순한 시각적 요소의 사용을 장려하게 되므로 성능이 자연스럽게 향상되고 결과적으로 검색 랭킹(SEO)에도 긍정적인 영향을 미칩니다 [11, 12].
+* **사용자 경험(UX) 및 우선순위 설정:** 가장 작은 화면을 위한 설계는 불필요한 요소를 제거하고 가장 중요한 것에만 집중하도록 강제합니다 [3, 12]. 이를 통해 사용자의 인지 부하를 줄일 수 있으며, 내비게이션이나 주요 행동(CTA) 버튼은 추가적인 스크롤 없이도 찾기 쉽고 조작할 수 있는 크기로 배치되어 원활한 사용자 여정을 돕습니다 [2, 5].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[반응형 디자인(Responsive Design)]], [[미디어 쿼리(Media Queries)]], [[모바일 퍼스트 인덱싱(Mobile-first indexing)]]
+- **Projects/Contexts:** [[CSS 구조 설계 방식]], [[검색 엔진 최적화(SEO) 및 Core Web Vitals 성과 관리]]
+- **Contradictions/Notes:** 실무에서는 모바일 퍼스트 디자인과 반응형 디자인이 종종 같은 의미로 혼용되지만, 소스에서는 모바일 퍼스트가 '우선순위를 결정하는 전략'인 반면 반응형 디자인은 '유동적으로 반응하게 하는 기술적 시스템'이라는 점을 들어 이 둘을 명확하게 구분하고 있습니다 [2, 7].
+
+---
+*Last updated: 2026-04-26*
@@ -0,0 +1,22 @@
+# [[웹 접근성(Web Accessibility)]]
+
+## 📌 Brief 시 Summary
+웹 접근성은 장애나 연령에 상관없이 모든 사용자가 다양한 입력 방식과 기기 환경에서 웹사이트의 정보를 장벽 없이 이용할 수 있도록 설계하는 것을 의미합니다 [1-4]. 반응형 웹 디자인의 필수 요소이며, WCAG(웹 콘텐츠 접근성 지침)와 같은 표준을 준수하여 텍스트 크기 조정, 키보드 탐색, 안전한 애니메이션 제공 등 포용적인 디지털 경험을 구축하는 것이 핵심입니다 [1, 3, 5, 6].
+
+## 📖 Core Content
+* **반응형 디자인과 접근성의 통합:** 반응형 설계는 단순히 화면 크기에 맞추는 것 이상을 의미합니다. 터치, 키보드, 보조 기술(스크린 리더 등)과 같은 다양한 입력 방식과 다크 모드, 모션 축소 등 사용자의 개별 설정에 적응하여 시각, 이동, 인지 장애가 있는 사용자가 장벽 없이 콘텐츠에 접근할 수 있게 합니다 [3, 4].
+* **UI 요소 및 HTML 구조의 접근성 준수 사항:** 
+  * 시각 장애인을 위해 의미 있는(semantic) HTML 요소를 사용하고, 모든 중요 이미지에 대체 텍스트(alt text)를 제공해야 합니다 [2].
+  * 야외 환경이나 저시력 사용자를 위해 텍스트와 배경 간의 명확한 색상 대비를 유지하고, 정보 전달을 색상에만 의존해서는 안 됩니다 [2].
+  * 버튼, 링크, 폼(form) 요소는 키보드로 탐색 가능(keyboard-navigable)해야 하며 명확한 포커스(focus) 상태를 제공해야 합니다 [2]. 또한 모바일 터치 타겟은 최소 44x44px 또는 48x48px 이상이어야 오작동을 줄일 수 있습니다 [7, 8].
+* **타이포그래피 접근성 (WCAG 1.4.4):** 법적으로도 종종 요구되는 WCAG 1.4.4 섹션에 따라, 텍스트는 보조 기술 없이도 최대 200%까지 크기 조절이 가능해야 합니다 [6, 9]. 이를 위해 유동적 타이포그래피(Fluid Typography)를 사용할 때 `clamp()` 함수를 활용하여 최대 폰트 크기가 최소 크기의 2.5배를 초과하지 않도록 제한하는 '2.5배 규칙(2.5x Rule)'이 권장됩니다 [10]. 뷰포트 단위(예: `vw`)에만 전적으로 의존해 폰트 크기를 설정하면 사용자의 화면 확대/축소 기능이 무력화되어 접근성을 훼손할 수 있습니다 [6, 11].
+* **애니메이션과 모션 제어:** 애니메이션은 시스템 상태를 이해하는 데 도움을 주지만, 과도한 움직임은 전정 신경계 장애(vestibular disorders)가 있는 사용자에게 어지럼증을 유발할 수 있습니다 [5, 12]. 따라서 모션을 미묘하게 유지하고, CSS의 `prefers-reduced-motion` 미디어 쿼리를 사용하여 필수적이지 않은 애니메이션을 비활성화하거나 줄이는 옵션을 제공해야 합니다 [5, 13, 14].
+* **디자인 시스템에서의 접근성 관리:** 디자인 시스템의 컬러 토큰을 설정할 때 WCAG 명암비(Contrast Ratio) 준수 여부를 반드시 테스트해야 하며, 접근성 고려를 잊는 것은 토큰 설계의 주요 함정 중 하나입니다 [15-17].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[반응형 웹 디자인(Responsive Web Design)]], [[유동적 타이포그래피(Fluid Typography)]], [[애니메이션 성능 최적화 및 모션 제어]], [[디자인 시스템(Design Systems)]]
+- **Projects/Contexts:** [[WCAG 1.4.4 텍스트 200% 확대 대응]], [[prefers-reduced-motion 미디어 쿼리 구현]], [[키보드 탐색 및 포커스 상태 설계]]
+- **Contradictions/Notes:** 화면 크기에만 반응하게 만들기 위해 뷰포트 단위(`vw`, `vh`)를 단독으로 폰트 크기에 적용하면, 브라우저가 창 크기에 따라 글씨를 조정할 수는 있어도 사용자가 브라우저 자체의 "확대(Zoom)" 기능을 사용할 때는 글씨 크기가 변하지 않아 오히려 접근성을 심각하게 해치는 결과를 초래합니다 [6, 11]. 따라서 `calc()`나 `clamp()`를 통해 기본 픽셀 혹은 `em/rem` 값과 혼합하여 줌(zoom) 기능에 반응하도록 설계해야 합니다 [18, 19].
+
+---
+*Last updated: 2026-04-26*