tag · 9 posts

#design-system

부록: 조직 경계와 콘웨이의 법칙 - 디자인 패턴, 시스템 수준 편 ep.14
  • series
  • develop
  • design
  • architecture
  • system-design
  • organization
  • conway-law
  • design-system
  • governance

부록: 조직 경계와 콘웨이의 법칙 - 디자인 패턴, 시스템 수준 편 ep.14

콘웨이의 법칙과 역콘웨이 기동, 팀 토폴로지의 네 유형을 정리하고 디자인 시스템 거버넌스 세 모델을 비교합니다. 기술 부채의 소유권, 문서가 코드가 되는 지점, 그리고 제품 경계와 시스템 경계가 어긋날 때 벌어지는 일을 함께 봅니다.

read →
변경 경계와 Strangler Fig - 디자인 패턴, 시스템 수준 편 ep.12
  • series
  • develop
  • backend
  • frontend
  • architecture
  • system-design
  • typescript
  • migration
  • versioning
  • design-system

변경 경계와 Strangler Fig - 디자인 패턴, 시스템 수준 편 ep.12

Strangler Fig로 오래된 시스템을 점진적으로 교체하는 방법과 Expand-Contract로 스키마를 무중단 변경하는 순서를 정리합니다. API 버저닝의 비용과 디자인 시스템 v1에서 v2로 넘어가는 deprecation 정책, 릴리스 노트가 곧 계약서인 이유를 함께 봅니다.

read →
모듈 경계와 폴더 구조 전략 - 디자인 패턴, 시스템 수준 편 ep.01
  • series
  • develop
  • frontend
  • backend
  • architecture
  • system-design
  • typescript
  • modularity
  • design-system

모듈 경계와 폴더 구조 전략 - 디자인 패턴, 시스템 수준 편 ep.01

응집도와 결합도를 기준으로 Package by Layer와 Package by Feature를 비교하고, 배럴 파일과 순환 참조, 모듈 경계와 번들 청크 경계의 불일치를 짚습니다. 같은 결정이 디자인 시스템과 프로덕트 사이의 선을 긋는 일에서 어떻게 다시 나타나는지를 함께 봅니다.

read →
계약 경계와 런타임 타입 검증 - 디자인 패턴, 시스템 수준 편 ep.03
  • series
  • develop
  • frontend
  • backend
  • architecture
  • system-design
  • typescript
  • zod
  • schema
  • design-system

계약 경계와 런타임 타입 검증 - 디자인 패턴, 시스템 수준 편 ep.03

타입 소거와 as 단언의 위험을 짚고, Parse don't validate 원칙과 zod 기반 파싱을 TypeScript로 정리합니다. 스키마 우선과 코드 우선, codegen과 tRPC가 실제로 보장하는 것을 구분하고, 컴포넌트 계약과 headless·slot 확장점 설계, 디자인 토큰 계약까지 함께 봅니다.

read →
Factory와 디자인 시스템의 컴포넌트 팩토리 - 디자인 패턴, 객체 수준 편 ep.01
  • series
  • develop
  • frontend
  • backend
  • design-patterns
  • gof
  • typescript
  • object-oriented
  • factory
  • creational
  • design-system

Factory와 디자인 시스템의 컴포넌트 팩토리 - 디자인 패턴, 객체 수준 편 ep.01

Simple Factory, Factory Method, Abstract Factory를 TypeScript 코드로 비교합니다. 각 형태가 무엇을 분리하려는 결정인지를 짚고, shadcn/ui 같은 디자인 시스템 라이브러리가 Abstract Factory의 모양을 그대로 따른다는 점을 함께 봅니다.

read →
Singleton과 전역 상태·테마 컨텍스트 - 디자인 패턴, 객체 수준 편 ep.03
  • series
  • develop
  • frontend
  • backend
  • design-patterns
  • gof
  • typescript
  • object-oriented
  • singleton
  • creational
  • design-system

Singleton과 전역 상태·테마 컨텍스트 - 디자인 패턴, 객체 수준 편 ep.03

Singleton의 TypeScript 구현과 Eager·Lazy 초기화를 정리합니다. 숨겨진 의존성, 테스트 어려움 같은 안티패턴 논점을 짚고, 디자인 시스템의 ThemeProvider와 React Context가 정말 Singleton인지, 그 결정이 한 개여야만 하는지를 함께 살펴봅니다.

read →
Facade와 디자인 시스템 라이브러리 API - 디자인 패턴, 객체 수준 편 ep.06
  • series
  • develop
  • frontend
  • backend
  • design-patterns
  • gof
  • typescript
  • object-oriented
  • facade
  • structural
  • design-system

Facade와 디자인 시스템 라이브러리 API - 디자인 패턴, 객체 수준 편 ep.06

결제 시스템을 단일 PaymentFacade로 정리하는 TypeScript 예제를 통해 Facade의 구조를 살펴보고, Adapter와의 차이를 명확히 합니다. 같은 결정 구조가 디자인 시스템 컴포넌트 라이브러리의 API 표면(무엇을 노출하고 무엇을 가릴 것인가)에서 어떻게 다시 나타나는지를 함께 봅니다.

read →
Strategy와 다크모드 스위칭 - 디자인 패턴, 객체 수준 편 ep.08
  • series
  • develop
  • frontend
  • backend
  • design-patterns
  • gof
  • typescript
  • object-oriented
  • strategy
  • behavioral
  • design-system

Strategy와 다크모드 스위칭 - 디자인 패턴, 객체 수준 편 ep.08

switch문 안티패턴을 Strategy로 정리하는 TypeScript 예제와 정렬·결제 알고리즘 교체를 살펴봅니다. 같은 결정 구조가 다크모드, 다국어, 플랫폼별 분기에서 어떻게 다시 나타나는지를 함께 살펴봅니다. Strategy와 State의 경계도 짚습니다.

read →
디자인 단계: 색·타이포·모션·시스템 - 앱·웹 접근성 실무 가이드 ep.03
  • series
  • design
  • ux
  • a11y
  • wcag
  • contrast
  • dark-mode
  • design-system

디자인 단계: 색·타이포·모션·시스템 - 앱·웹 접근성 실무 가이드 ep.03

WCAG 명도 대비 기준의 실전 적용, 색상에만 의존하지 않는 정보 전달, 다크·고대비 모드 동시 대응 전략, 포커스 인디케이터와 터치 타겟 디자인, 그리고 디자인 시스템 컴포넌트에 접근성 명세를 끼워 넣는 패턴을 정리합니다.

read →