#design-system
노트 13개
Frontend › Accessibility
디자인 단계의 접근성접근성 문제는 상당수가 디자인 단계에서 막힌다. 포용적 디자인 일곱 원칙, 장애를 담은 페르소나와 시뮬레이터의 한계, 접근성 휴리스틱 리뷰, 핸드오프 전 접근성 주석, 그리고 컴포넌트·패턴·디자인 시스템을 고르는 기준을 정리한다.
Frontend › Architecture
Atomic Design과 컴포넌트 폴더 구조Brad Frost의 Atomic Design(원자 → 분자 → 유기체 → 템플릿 → 페이지)은 디자인 시스템을 이해하기 위한 멘탈 모델이지 폴더 구조 규칙이 아니다. 그대로 폴더로 쓰면 분자·유기체 경계가 흐려지고 계층 하나로는 분류가 안 된다. 기획·디자인이 부르는 이름으로 먼저 나누고, 이름이 더 없는 곳부터 계층 구조를 쓰는 절충안을 정리한다.
Frontend › CSS
유틸리티 우선 CSS속성 하나짜리 클래스를 조합해 화면을 만들고, 반복이 보일 때만 컴포넌트로 뽑는 CSS 작성 방식. '관심사의 분리'를 의존 방향의 선택으로 다시 보는 관점, 시맨틱 클래스에서 유틸리티까지 넘어가는 단계, 정해진 값만 고르게 해 생기는 일관성, 인라인 스타일과의 차이, 장단점과 Tailwind CSS v4 기준의 현재 사용법을 정리한다.
Frontend › CSS
CSS 커스텀 속성으로 색상 체계 짜기색상 변수를 팔레트·기능 색상·컴포넌트 색상의 세 단계로 나누고 CSS 커스텀 속성으로 연결하면 테마, 다크 모드, 화이트 라벨, 대비 조정이 변수 몇 개만 바꾸는 일이 된다. 전처리기 변수와의 차이, 모든 변수를 :root에 두면 안 되는 이유까지.
Frontend › Testing
Storybook: 컴포넌트를 상태별로 떼어 보는 도구컴포넌트를 앱에서 떼어 내 상태별 '스토리'로 등록하고 보고·조작·테스트하는 UI 작업장. CSF3 스토리 객체와 args·argTypes, meta·스토리·전역 3단계 설정, decorators, 사이드바 계층, Storybook 9부터 코어에 들어간 Controls·Actions·Viewport 같은 도구, TypeScript의 Meta·StoryObj와 satisfies, 스토리를 그대로 테스트로 쓰는 흐름까지 정리한다.
Frontend
UI Design디자인 시스템과 핸드오프, 레이아웃, 전자상거래·제스처 UI 패턴, UX 라이팅까지 화면의 생김새와 쓰임새를 다루는 노트 모음.
Frontend › UI Design
디자인 도구와 개발자 핸드오프디자인 핸드오프는 이미지와 문서를 메일로 넘기던 방식에서 브라우저 기반 공유 파일(Figma)로 옮겨 왔다. 개발자는 스타일·변수 확인, 치수 측정, 애셋 추출, 프로토타입 흐름 읽기, 댓글로 협업한다. Inspect 코드는 그대로 쓰지 않고, absolute 좌표는 흐름으로, Auto Layout은 Flexbox로 옮긴다. 디자인은 실제 데이터와 여러 화면 크기로 검증하고, 도구 이전은 비용을 계산해 한 번에 끝낸다.
Frontend › UI Design
디자인 시스템: 구성, 도입, 구축과 배포디자인 시스템은 팀이 같은 UI를 같은 규칙으로 만들게 하는 원칙·스타일·컴포넌트·문서의 묶음이다. 무엇으로 이루어지는지, 작은 팀도 필요한 이유와 도입 시점, 감사→기준 합의→파운데이션·컴포넌트 정리→개발 합의→QA로 이어지는 구축 절차, 토큰과 컴포넌트를 중앙 모노레포에서 패키지로 배포하는 구조까지 정리했다. 감사는 인터페이스 인벤토리로, 시각 방향은 스타일 타일·요소 콜라주로 가볍게 합의한다.
Frontend › UI Design
레이아웃 그리드와 간격 체계: 12단 그리드, 8pt 그리드, 수직 리듬화면에 질서를 주는 세 가지 수치 체계. 단위·거터·칼럼·필드로 이뤄진 칼럼 그리드와 3·4·6단으로 나뉘는 12단 그리드, 모든 크기·간격을 8의 배수로 맞추는 8pt 그리드(하드·소프트 방식, 4pt 기준선), 본문 줄 높이를 기준으로 세로 간격을 맞추는 수직 리듬과 모듈러 스케일을 정리하고, CSS Grid·rlh·text-box-trim·디자인 토큰으로 구현하는 법을 붙였다.
Frontend › UI Design
제품 언어로서의 디자인 시스템: 토큰, 기능과 형태, 컴포넌트 API디자인 시스템을 범용 UI 라이브러리가 아니라 회사의 디자인 결정을 관리하는 제품 언어로 보는 관점을 정리한다. 결정을 값·의도·맥락으로 인코딩하는 디자인 토큰과 섣부른 시맨틱 토큰의 함정, 아토믹 단위가 하나로 정해지지 않는 이유와 컴포넌트를 기능(구조·상태·상호작용·맥락)과 형태(구조·시각 옵션·상태 옵션·디자인 결정)로 해부하기, 상태 압축, 공통 인터페이스로 디자인-개발의 순환 참조 끊기, 사전 조합 컴포넌트와 조합 가능한 패키지를 나눠 일관성과 유연성을 함께 주는 API를 다룬다.
Frontend › UI Design
UX 라이팅: 원칙, 가이드라인, 체크리스트제품 화면의 문구를 사용자의 목표에 맞춰 쓰는 UX 라이팅. 원칙 → 가이드라인 → 체크리스트로 이어지는 문서 구조와, 문구를 검토하는 8가지 기준(목표 적합성, 모바일, 훑어보기, 이유 먼저, 전문 용어, 다크 패턴, 일관성, 보이스 톤)을 정리했다.
AI & Data
디자인 시스템을 아는 화면 생성 에이전트 설계하기프롬프트→코드 한 번의 점프 대신 구체화·기억·참고·생성·검증·축적 루프를 하네스로 묶고, 중간 표현(스펙)·온디맨드 스킬·자동 채점기·세션 간 메모리로 결과를 일관되게 만드는 에이전틱 코딩 기법.
AI & Data
AI 네이티브 프론트엔드 개발코드를 AI만으로 쓰는 팀에서 프론트엔드가 일하는 방식. 금지 규칙 대신 대화로 뽑은 스킬, 구조를 직접 바꾸며 이해하기, 의도 정렬 순서, 이슈·PR로 맥락 관리, 병렬 작업과 이탈 감지, 디자인 픽셀 비교와 상태 재현 환경, BE·디자인을 정본으로 삼아 FE를 얇게 만들기, AI에게 관측 통로 달아 주기, 통합과 완성도로 옮겨 가는 역할을 정리한다.