054. Service Mesh — 서비스 간 통신을 인프라 레이어에서 제어하기

마이크로서비스가 많아지면 서비스 간 통신 관리가 복잡해진다. 재시도, 타임아웃, 서킷 브레이커, mTLS, 분산 추적을 각 서비스 코드에 중복 구현하게 된다. Service Mesh는 이 공통 기능을 sidecar proxy로 분리해 인프라 레이어에서 처리한다. Istio와 Envoy의 구조, 주요 기능, 그리고 오버헤드를 설명한다.

2026년 6월 13일 · 4 분 · 1538 단어 · CharmingGroot

055. eBPF & Cilium — 커널 레벨 네트워킹과 차세대 CNI

eBPF(extended Berkeley Packet Filter)는 리눅스 커널 안에서 사용자 정의 프로그램을 안전하게 실행하는 기술이다. Cilium은 eBPF 기반의 k8s CNI 플러그인으로, iptables를 대체하고 고성능 네트워킹, NetworkPolicy 구현, 서비스 메시 기능, 실시간 관찰 가능성을 커널 레벨에서 제공한다.

2026년 6월 13일 · 3 분 · 1501 단어 · CharmingGroot

056. Design Token — 디자인 결정을 변수로 관리하기

Design Token은 색상, 타이포그래피, 간격, 그림자 같은 디자인 결정을 이름 있는 변수로 추상화한 것이다. 컴포넌트가 직접 헥스코드를 박지 않고 토큰을 참조하면, 브랜드 변경이나 다크모드 구현이 토큰 수정 하나로 전체에 반영된다. 토큰 계층 구조, 실제 구현 방법, 그리고 Design System과의 관계를 설명한다.

2026년 6월 13일 · 3 분 · 1473 단어 · CharmingGroot

057. Design System — 컴포넌트 라이브러리와 원자 디자인

Design System은 토큰, 컴포넌트, 패턴, 가이드라인을 하나의 시스템으로 묶어 제품 전체의 일관성을 유지하는 체계다. 원자 디자인 방법론으로 컴포넌트를 계층화하고, Storybook으로 문서화하는 방법, 그리고 Design System을 도입할 때의 현실적인 트레이드오프를 설명한다.

2026년 6월 13일 · 4 분 · 1811 단어 · CharmingGroot

058. 타이포그래피 스케일 — 폰트 크기 체계와 가독성

타이포그래피는 텍스트가 어떻게 보이는지를 결정한다. 폰트 크기, 행간, 자간, 굵기를 체계 없이 쓰면 화면마다 느낌이 달라지고 위계가 흐려진다. 타이포그래피 스케일로 크기 체계를 정하고, 가독성 좋은 line-height를 설정하고, 웹에서 반응형 타이포그래피를 구현하는 방법을 설명한다.

2026년 6월 13일 · 3 분 · 1456 단어 · CharmingGroot

059. 간격 시스템 — 8pt Grid와 공간으로 위계 만들기

간격이 일관되지 않으면 화면이 어수선해 보인다. 8pt 그리드 시스템은 모든 간격을 8의 배수로 정의해 시각적 일관성을 만든다. 간격이 정보 구조를 표현하는 방식, 컴포넌트 내부와 외부 간격의 차이, 그리고 레이아웃 컴포넌트로 간격을 관리하는 방법을 설명한다.

2026년 6월 13일 · 3 분 · 1426 단어 · CharmingGroot

060. 접근성(a11y) — 색상 대비, 키보드 내비게이션, ARIA

접근성은 장애가 있는 사용자를 위한 것이기도 하지만, 동시에 모든 사용자의 경험을 개선한다. 색상 대비 기준, 키보드만으로 이동 가능한 UI, 스크린 리더를 위한 ARIA 속성, 그리고 실무에서 가장 자주 놓치는 접근성 체크포인트를 설명한다.

2026년 6월 13일 · 4 분 · 1922 단어 · CharmingGroot

061. 마이크로인터랙션 — 피드백, 애니메이션, 트랜지션

마이크로인터랙션은 사용자가 행동을 취했을 때 인터페이스가 반응하는 작은 순간이다. 버튼을 눌렀을 때 눌리는 느낌, 저장이 완료됐을 때 체크마크, 에러가 발생했을 때 흔들림. 이 작은 피드백들이 쌓여 제품의 완성도를 결정한다. 트리거, 규칙, 피드백, 루프 4단계 구조와 실제 구현 방법을 설명한다.

2026년 6월 13일 · 4 분 · 1554 단어 · CharmingGroot

062. 반응형 디자인 — 브레이크포인트, 유동 레이아웃, 모바일 우선

반응형 디자인은 하나의 코드베이스가 모바일부터 데스크탑까지 다양한 화면 크기에서 잘 동작하도록 하는 접근 방식이다. 모바일 우선 설계 원칙, 브레이크포인트 설정 방법, CSS Grid와 Flexbox로 유동적인 레이아웃을 만드는 방법, 그리고 자주 발생하는 문제들을 설명한다.

2026년 6월 13일 · 3 분 · 1502 단어 · CharmingGroot

011. Kubernetes — 클러스터 구조와 선언적 모델

Kubernetes가 무엇인지, 클러스터가 마스터(control plane)와 워커 노드로 어떻게 나뉘는지, 각 컴포넌트가 어떤 역할을 하는지, 그리고 k8s 전체를 관통하는 핵심 개념인 선언적 모델이 무엇인지를 설명한다. 이후 리소스 시리즈의 기반이 되는 글이다.

2026년 6월 12일 · 6 분 · 2523 단어 · CharmingGroot