웹디자인 컬러 사용법 | UI 컬러 시스템과 디자인 토큰 이해하기 - 웹디자인 강좌 2-4
지금 보고 있는 영상
웹디자인 컬러 사용법 | UI 컬러 시스템과 디자인 토큰 이해하기 - 웹디자인 강좌 2-4
조회수 2,914
영상 설명 · 눌러서 펼치기
웹디자인에서 컬러를 어떻게 구분하고 일관되게 사용해야 하는지 UI 컬러 시스템의 핵심 기준을 알아봅니다.
브랜드·액션·중립·시맨틱 컬러의 역할부터 컬러 팔레트와 명도 대비, Primitive·Alias Token, 다크 모드까지 실무에서 필요한 컬러 설계 방법을 살펴봅니다.
🕐 타임스탬프
00:00 웹디자인에서 컬러가 중요한 이유
00:35 UI 컬러의 역할과 기준
01:14 브랜드 컬러와 액션 컬러
02:11 중립 컬러와 단계별 팔레트
03:24 Semantic Color와 강조 컬러
04:46 컬러 대비와 웹 접근성
05:09 컬러 팔레트와 UI 상태
05:34 Primitive와 Alias Token
06:14 다크 모드 컬러 시스템
06:33 실무에서 자주 하는 컬러 실수
07:20 핵심 내용 정리
🔥 디자인베이스 웹사이트 : https://designbase.co.kr/
🔥 인스타그램 : https://www.instagram.com/designbasekorea/
🔥 이메일 문의 : [[email protected]](mailto:[email protected])
🔥 카카오 오픈채팅방 : https://open.kakao.com/o/gmwngljb (참여코드 : dgoing12)
#웹디자인 #컬러시스템 #UI디자인
브랜드·액션·중립·시맨틱 컬러의 역할부터 컬러 팔레트와 명도 대비, Primitive·Alias Token, 다크 모드까지 실무에서 필요한 컬러 설계 방법을 살펴봅니다.
🕐 타임스탬프
00:00 웹디자인에서 컬러가 중요한 이유
00:35 UI 컬러의 역할과 기준
01:14 브랜드 컬러와 액션 컬러
02:11 중립 컬러와 단계별 팔레트
03:24 Semantic Color와 강조 컬러
04:46 컬러 대비와 웹 접근성
05:09 컬러 팔레트와 UI 상태
05:34 Primitive와 Alias Token
06:14 다크 모드 컬러 시스템
06:33 실무에서 자주 하는 컬러 실수
07:20 핵심 내용 정리
🔥 디자인베이스 웹사이트 : https://designbase.co.kr/
🔥 인스타그램 : https://www.instagram.com/designbasekorea/
🔥 이메일 문의 : [[email protected]](mailto:[email protected])
🔥 카카오 오픈채팅방 : https://open.kakao.com/o/gmwngljb (참여코드 : dgoing12)
#웹디자인 #컬러시스템 #UI디자인
디자인베이스 다른 영상
Astra로 3D 모델링부터 Three.js 웹사이트까지 만들어봤습니다 - GPT-6 Astra
조회수 12,708
Claude Design 디자인 시스템 만들고 앱·슬라이드에 같은 스타일 재사용하기 - 클로드 디자인 강좌 03
조회수 2,575
Claude Design 퀄리티 높이는 법 | 디자인 브리프와 레퍼런스 활용하기 - 클로드 디자인 강좌 02
조회수 2,861
상품 상세 UI 개선하기 | UX/UI 디자인 문제를 하나씩 고쳐봅니다 - UXUI 디자인 강좌 05-18
조회수 5,045
Claude Design 사용법 | 프롬프트로 UI 만들고 수정·반응형까지 - 클로드 디자인 강좌 01
조회수 6,818
웹사이트를 Figma로 그대로 가져오기 | Figma Chrome Extension 사용법 - 피그마 강좌 1-9
조회수 4,031
Figma Buzz 사용법 | 콘텐츠 디자인을 템플릿으로 자동화하기 - 피그마 강좌 1-8
조회수 2,569
Figma Sites 사용법 | 피그마에서 반응형 웹사이트 만들고 배포하기 - 피그마 강좌 1-7
조회수 4,515