튜토리얼
Step-by-step tutorials applying color science concepts to real-world design and development tasks.
Next.js 및 Satori를 사용하여 다채로운 OG 이미지 생성
Next.js 및 Satori를 사용하여 동적 오픈 그래프 이미지를 생성하세요. 그라디언트, 브랜드 색상, 반응형 디자인을 사용하여 색상 인식 OG 템플릿을 만듭니다.
업데이트됨 2월 24, 2026
동적 색상 시스템을 위한 CSS 사용자 정의 속성
CSS 사용자 정의 속성을 사용하여 유지 관리 및 테마 지정이 가능한 색상 시스템을 구축하는 방법을 알아보세요. 변수, 밝음/어두움 모드, 런타임 JS 색상 변경을 다룹니다.
업데이트됨 2월 18, 2026
Tailwind CSS 색상: 완전한 쉐이드 시스템 가이드
Tailwind CSS의 색상 시스템을 마스터하세요: 기본 팔레트, 50-950 쉐이드 규칙, 커스텀 색상 설정, 그리고 Tailwind v4의 새로운 CSS 변수 방식까지.
업데이트됨 2월 11, 2026
다크 모드 구현: 전체 개발자 가이드
CSS 사용자 정의 속성, 선호 색상 구성표, JavaScript 토글 및 모든 웹 프로젝트에 대한 적절한 색상 적응 전략을 사용하여 다크 모드를 구현하는 방법을 알아보세요.
업데이트됨 2월 04, 2026
처음부터 색상 선택기 웹 구성 요소 구축
웹 구성 요소로 액세스 가능한 색상 선택기를 구축합니다. Shadow DOM을 사용하여 캔버스 렌더링, 색조 슬라이더, 알파 채널 및 사용자 정의 이벤트를 구현합니다.
업데이트됨 2월 02, 2026
CSS color-mix(): 브라우저에서 기본적으로 색상 혼합
브라우저에서 기본적으로 색상을 혼합하는 CSS color-mix()를 알아보세요. 구문, 색상 공간, 실제 사용 사례를 마스터하고 JavaScript 없이 동적 팔레트를 만드세요.
업데이트됨 1월 31, 2026
색역 설명: sRGB, P3 및 Rec. 2020
색 영역 이해(sRGB, 디스플레이 P3 및 Rec.) 2020—그리고 최신 디스플레이에 @media(color-gamut)와 함께 CSS 광역 색상을 사용하는 방법을 알아보세요. 실제 사례가 포함되어 있습니다.
업데이트됨 1월 28, 2026
CSS 색상 함수: rgb(), hsl(), oklch() 비교
모든 CSS 색상 함수(rgb(), rgba(), hsl(), hsla(), lab(), lch(), oklch() 및 color-mix))))를 비교하십시오. 어떤 브라우저를 언제, 어떤 브라우저 지원을 사용해야 하는지 알아보세요.
업데이트됨 1월 22, 2026
지각 색상 공간: Lab, LCH, Oklab, OKLCH
CIE Lab, LCH, Oklab, OKLCH 등 지각적으로 균일한 색상 공간을 탐색해 보세요. 각 디자인이 어떻게 설계되었는지, 어디에 뛰어난지, CSS 및 디자인 작업에 어떤 것이 사용되는지 알아보세요.
업데이트됨 1월 22, 2026
색상 토큰이 포함된 Figma 자동 레이아웃 구성 요소
컬러 토큰 아키텍처를 사용하여 Figma 자동 레이아웃 구성요소를 구축하세요. 변수 바인딩, 반응형 토큰, 테마 변형 및 개발자 핸드오프에 대해 알아보세요.
업데이트됨 1월 15, 2026
색상 교정(Color Proofing): 정확한 인쇄 색상 보장
소프트 교정, 하드 교정, 인쇄기 교정 기법을 배워 화면에서 최종 출력까지 정확한 인쇄 색상 재현을 보장하세요.
업데이트됨 1월 13, 2026
웹 디자이너를 위한 CMYK: 인쇄가 화면을 만날 때
인쇄 프로젝트를 진행하는 웹 디자이너는 CMYK를 이해해야 합니다. 색역 차이, 안전한 RGB-CMYK 변환 전략, 인쇄 교정 작업 흐름 및 일반적인 함정에 대해 알아보세요.
업데이트됨 1월 12, 2026
종이가 색상에 미치는 영향: 인쇄물 및 인쇄 품질
용지 종류, 코팅 및 무게가 인쇄 색상에 어떤 영향을 미치는지 이해합니다. 색상 정확도에 대한 코팅지, 비코팅지, 특수 용지의 차이점을 알아보세요.
업데이트됨 1월 09, 2026
인쇄 디자인의 포일 스탬핑 및 금속 색상
포일 스탬핑 기술, 금속 잉크 옵션, 금박 및 은박 선택, 고급 인쇄 재료에 대한 디자인 고려 사항에 대해 알아보세요.
업데이트됨 1월 08, 2026
다중 브랜드 색상 아키텍처: 하나의 코드베이스, 다양한 테마
CSS 사용자 정의 속성과 디자인 토큰을 사용하여 멀티 브랜드 색상 아키텍처를 구축하세요. Tailwind 통합을 통해 단일 코드베이스에서 화이트 라벨 테마를 지원합니다.
업데이트됨 1월 06, 2026
3D 및 WebGL의 색상: 선형 색상 공간 및 PBR
3D 렌더링의 색상 이해 - sRGB와 선형 RGB 비교, 감마 보정, 물리적 기반 렌더링 색상, Three.js 색상 관리, 웹 3D의 HDR.
업데이트됨 1월 02, 2026
데이터 스토리텔링을 위한 색상: 기본 차트 색상을 넘어서
데이터 스토리텔링을 위해 기본 차트 색상을 뛰어넘으세요. 순차, 발산 및 범주형 팔레트, 데이터 시각화의 접근성 및 D3/Chart.js 색상 스케일을 알아보세요.
업데이트됨 12월 29, 2025
CSS의 색상 애니메이션: 전환 및 키프레임
전환, 키프레임 애니메이션, HSL 색조 회전, 인지적 부드러움을 위한 OKLCH 보간 및 성능 모범 사례를 갖춘 마스터 CSS 색상 애니메이션입니다.
업데이트됨 12월 26, 2025
CSS light-dark() 기능: 기본 테마 전환
기본 테마 전환에는 CSS light-dark()를 사용하세요. 밝은 모드와 어두운 모드 색상을 위해 JavaScript 토글과 미디어 쿼리를 단일 CSS 함수로 대체합니다.
업데이트됨 12월 24, 2025
RGB 색상 모델: 화면에 색상이 표시되는 방식
RGB 색상 모델이 작동하는 방식(빨간색, 녹색 및 파란색 빛 혼합, 0~255 범위, CSS rgb() 기능, 화면이 1,670만 색상을 표시할 수 있는 이유)을 이해합니다.
업데이트됨 12월 20, 2025
색상 관리 작업 흐름: 화면에서 인쇄까지
모니터 보정부터 인쇄 교정까지 색상 관리를 마스터하세요. ICC 프로필, 화면 교정 및 일관된 작업 흐름을 통해 화면에서 인쇄까지 색상을 정확하게 유지하는 방법을 알아보세요.
업데이트됨 12월 14, 2025
디자인 시스템을 위한 색상 시스템 구축
명명 규칙, 쉐이드 생성, 시맨틱 토큰, 구현 패턴을 사용하여 디자인 시스템을 위한 체계적인 색상 아키텍처를 구축하세요.
업데이트됨 12월 09, 2025
색상 API 설계: 색상 데이터용 REST 끝점
색상 변환, 검색, 대비 확인 및 팔레트 생성을 위한 엔드포인트를 사용하여 RESTful 색상 API를 설계합니다. 스키마 설계 및 모범 사례를 알아보세요.
업데이트됨 12월 06, 2025
SVG 색상 기법: Fill, Stroke, 그라디언트
SVG 색상 기법을 마스터하세요: fill과 stroke 속성, 선형 및 방사형 그라디언트, currentColor 키워드, 그리고 현대 웹 개발을 위한 CSS 기반 SVG 스타일링.
업데이트됨 11월 29, 2025
60-30-10 법칙: 디자인에서의 색상 비율
디자인을 위한 60-30-10 색상 법칙을 마스터하세요. 지배적, 보조적, 악센트 색상이 함께 작동하는 방식을 실제 예시, 헥스 코드, 법칙을 효과적으로 깨는 팁과 함께 알아보세요.
업데이트됨 11월 24, 2025
색상 분리(Color Separation) 설명: 인쇄용 파일 준비하기
CMYK 색상 분리, 별색 플레이트, 트래핑, 레지스트레이션 마크를 이해하세요. 올바른 색상 분리로 인쇄 준비 파일을 준비하세요.
업데이트됨 11월 21, 2025
HSL과 HSV: 어떤 색상 모델을 사용해야 합니까?
HSL과 HSV 색상 모델의 차이점, 각각이 웹 개발이나 색상 선택기에 적합한 경우, 그리고 둘 다 CSS 색상 기능과 어떻게 비교되는지 이해합니다.
업데이트됨 11월 19, 2025
시맨틱 색상 시스템: 색상이 아닌 목적에 따라 색상 이름 지정
색상 대신 목적(성공, 경고, 오류)별로 색상 이름을 지정하는 의미론적 색상 시스템을 구축하세요. CSS 및 Tailwind에서 토큰 아키텍처 및 구현을 알아보세요.
업데이트됨 11월 14, 2025
CSS 상대 색상 구문: 모든 색상을 동적으로 변환
색상을 동적으로 변환하려면 CSS 상대 색상 구문을 마스터하세요. 스타일시트에서 색조, 채도, 밝기 및 알파 채널을 직접 조정하세요.
업데이트됨 11월 10, 2025
고대비 모드를 위한 설계: Windows, macOS 및 웹
Windows, macOS 및 웹 전반에 걸친 고대비 모드를 위한 디자인. 강제 색상 CSS, 시스템 색상 키워드, 테스트 전략 및 피해야 할 일반적인 함정에 대해 알아보세요.
업데이트됨 11월 06, 2025
16진수 색상 코드 이해: 전체 가이드
16진수 색상 코드를 처음부터 끝까지 마스터하세요. #RRGGBB의 의미, 16진수 값 읽는 방법, 단축 표기법, 알파 투명도 및 형식 간 변환 방법을 알아보세요.
업데이트됨 10월 29, 2025
생성 예술의 색상: 아름다운 팔레트를 위한 알고리즘
HSL 나선형, 노이즈 기반 팔레트, 황금 비율 샘플링, 절차적 미학을 위한 p5.js 색상 알고리즘을 사용하여 생성 예술에서 아름다운 색상을 만들어 보세요.
업데이트됨 10월 26, 2025
React의 동적 색상 테마 지정: CSS 변수 너머
CSS 변수, 컨텍스트 제공자 및 Tailwind CSS를 사용하여 React에서 동적 색상 테마를 구현합니다. 런타임 색상 생성을 통해 사용자 정의 가능한 테마를 구축하세요.
업데이트됨 10월 23, 2025
Pantone 매칭 시스템 설명: 디자이너 가이드
Pantone 매칭 시스템의 작동 방식, 코팅된 책과 코팅되지 않은 책의 차이점, 별색과 프로세스 색상, Pantone-hex 변환의 한계에 대해 알아보세요.
업데이트됨 10월 19, 2025
대비를 넘어선 접근성: 포용적 디자인에서의 색상
색상 접근성은 대비 비율 그 이상입니다. WCAG의 '색상만으로 전달하지 않기' 원칙, 포커스 표시자, 오류 상태, 색각이상 친화적 패턴을 알아보세요.
업데이트됨 10월 17, 2025
스크린 인쇄 색상: 디자이너를 위한 가이드
색상 분리, 하프톤 스크린, 별색 잉크 및 스크린 인쇄 재료의 디자인 준비를 포함한 마스터 스크린 인쇄 색상 기술.
업데이트됨 10월 14, 2025
CSS의 색상 보간: OKLCH가 승리하는 이유
CSS 색상 보간은 그래디언트와 color-mix()가 색상을 혼합하는 방법을 결정합니다. RGB와 HSL이 실패하는 동안 OKLCH가 생생하고 지각적으로 균일한 결과를 생성하는 이유를 알아보세요.
업데이트됨 10월 12, 2025
웹 개발자를 위한 색상 접근성 체크리스트
WCAG 명암비, 색상 의존성, 초점 표시기, 테스트 도구 및 자동 검사를 다루는 웹 개발자를 위한 완전한 색상 접근성 체크리스트입니다.
업데이트됨 10월 07, 2025
JavaScript 색상 조작: 라이브러리와 기법
chroma.js, culori, tinycolor2로 JavaScript 색상 조작을 마스터하세요. 웹 애플리케이션을 위한 색상 파싱, 변환, 생성을 프로그래매틱하게 처리하는 방법을 배웁니다.
업데이트됨 10월 02, 2025
웹 애니메이션의 색상: GSAP, Framer Motion 및 CSS
CSS 전환, GSAP 및 Framer Motion의 마스터 컬러 애니메이션입니다. OKLCH 보간, 키프레임 기술 및 성능 최적화에 대해 알아보세요.
업데이트됨 9월 29, 2025
스팟 컬러 대 프로세스 컬러: 인쇄 색상 완벽 가이드
스팟 컬러와 CMYK 프로세스 컬러의 차이점, 각각의 사용 시기, 인쇄 비용에 미치는 영향, 각 방식에 맞는 파일 준비 방법을 이해하세요.
업데이트됨 9월 27, 2025
색상 대비 알고리즘: WCAG 2 대 APCA
WCAG 2 상대 휘도 및 APCA(Advanced Perceptual Contrast Algorithm)가 대비를 계산하는 방법을 이해합니다. 결과를 비교하고 접근성 높은 디자인에 어떤 것을 사용해야 하는지 알아보세요.
업데이트됨 9월 25, 2025
SwiftUI 색상 시스템: 적응형 컬러 팔레트 구축
SwiftUI에서 적응형 컬러 팔레트를 구축하세요. Color와 UIColor의 차이, 에셋 카탈로그 색상, 동적 다크 모드 색상, 접근성 색상 패턴을 배워보세요.
업데이트됨 9월 19, 2025
색상을 위한 디자인 토큰: Figma에서 코드까지
스타일 사전을 사용하여 Figma에서 프로덕션 코드까지 색상 디자인 토큰을 구현합니다. 토큰 이름 지정, 변환 및 다중 플랫폼 출력에 대해 알아보세요.
업데이트됨 9월 12, 2025
CSS와 디자인 시스템의 색상 명명 규칙
CSS 이름 색상, 커스텀 속성을 활용한 시맨틱 명명, Tailwind 스타일 스케일 명명, 팀 디자인 시스템에서 색상 이름을 관리하는 모범 사례를 알아보세요.
업데이트됨 9월 06, 2025
이메일 디자인의 색상: 클라이언트 전반에 걸쳐 작동하는 것
Outlook, Gmail, Apple Mail 전반의 이메일 색상 디자인을 마스터하세요. 일관된 결과를 위한 안전 전략, 다크 모드 수정, 인라인 스타일 요구 사항에 대해 알아보세요.
업데이트됨 9월 05, 2025
React에서의 색상 테마: CSS 변수와 Context
CSS 커스텀 속성과 Context API를 사용하여 React에서 확장 가능한 색상 테마를 구축하세요. 테마 아키텍처, Tailwind CSS 테마, 멀티 브랜드 전략을 다룹니다.
업데이트됨 9월 03, 2025
웹 색상 성능: 그라데이션, 그림자 및 필터
웹 색상 성능을 최적화합니다. 그라디언트, 상자 그림자, CSS 필터 및 배경 필터가 렌더링 성능에 미치는 영향과 GPU 가속 방법을 알아보세요.
업데이트됨 9월 01, 2025
반응형 색상: 다양한 화면에 맞게 색상 적용
디스플레이, 색 영역, 다크 모드에 따라 색상이 어떻게 변하는지 알아보세요. CSS 미디어 쿼리와 사용자 정의 속성을 사용하여 모든 화면에 반응하는 색상 시스템을 구축하세요.
업데이트됨 8월 31, 2025
가시성을 극대화하는 간판 색상 조합
가장 눈에 띄는 간판 색상 조합, 거리 가독성 연구, ADA 간판 요구 사항, LED 고려 사항, 재료 및 조명이 간판 색상 인식에 미치는 영향에 대해 알아보세요.
업데이트됨 8월 30, 2025
브랜드 색상 선택 방법: 단계별 가이드
청중의 공감을 불러일으키는 브랜드 색상을 선택하기 위한 단계별 가이드입니다. 연구, 산업 분석, 색상 심리학, 조합 테스트 및 브랜드 지침 문서를 다룹니다.
업데이트됨 8월 29, 2025