저는 어렸을 때 만화에 관한 팬진을 발행했습니다. 이것은 제가 컴퓨터를 사용하기 오래 전이었습니다. 타자기와 종이, 가위를 사용하여 만들어졌습니다!

팬진은 처음에 흑백으로 만들어졌고 학교에서 복사되었습니다. 시간이 지나면서 더 큰 성공을 거두면서 컬러 표지로 오프셋 인쇄를 할 여유가 생겼습니다!

그러나 이러한 색상을 관리하는 것은 상당히 어려웠습니다. 각 표지는 청록, 마젠타, 노랑, 키(검정)(약어로 CMYK) 등 각 색상에 대해 한 번씩, 총 4번 인쇄되어야 했습니다.

이는 각각 검정색 잉크로 인쇄되었지만 특정 색상에 해당하는 4개의 별도 시트를 제공해야 함을 의미합니다.

내가 게시한 이슈 중 하나는 다음과 같습니다.

위 이미지에 보이는 노란색은 모두 "노란색" 시트에 검정 잉크를 사용하여 제가 손으로 그린 ​​것입니다. 피부톤에는 "래스터 도트"라는 것을 사용했습니다. 이것은 다양한 밀도의 검은 점들로 구입할 수 있는 시트였습니다. 점을 잘라서 적용합니다. 이 경우에는 "빨간색" 시트에 적용합니다.

저는 조명이 내장된 유리 상판의 드로잉 테이블인 라이트 테이블에서 작업했습니다. 이를 통해 다양한 시트를 꿰뚫어 보면서 올바르게 정렬할 수 있었습니다.

매우 시간이 많이 걸렸지만 색상 이해에 대한 평생의 관심을 불러일으켰고 인쇄 색상과 화면 색상 간의 엄청난 차이를 불러일으켰습니다!

CMYK는 4가지 색상으로 제한되어 있지만 여전히 상대적으로 이해하기 쉽습니다. 우리는 모두 종이에 색연필을 사용해 보았고 색이 어떻게 혼합되는지 직관적으로 알고 있습니다. CMYK는 감산 색상 모델입니다. 흰색 종이로 시작하고 잉크를 더 추가하면 실제로 빛이 줄어듭니다. 모든 색상을 결합하면 검정색으로 이동합니다. 잉크를 전혀 바르지 않으면 종이는 빛을 모두 반사하기 때문에 흰색으로 유지됩니다.

처음 컴퓨터를 구입했을 때 CMYK와 매우 다른 RGB를 이해해야 했습니다. RGB는 디지털 화면에 사용되는 추가 색상 모델입니다. 여기서는 빛 자체를 혼합하고 있습니다. 더 많은 빛을 추가하면 색상이 더 밝아지고 흰색으로 이동하게 됩니다. RGB 조명을 모두 끄면(R=0, G=0, B=0) 빛이 나오지 않아 화면이 검게 변합니다.

당시 그래픽 디자이너로서 화면에서 본 색상과 인쇄물에서 본 색상이 종종 매우 다르기 때문에 화면을 보정해야 했습니다!

RGB 시각화

RGB는 빨간색, 녹색, 파란색의 세 가지 광원을 나타냅니다. 조명이 꺼짐이면 그 값은 0입니다. 완전히 켜졌을 때 값은 255입니다. 이 조명이 겹쳐지면 서로 다른 색상이 생성됩니다.

RGB 작동 방식을 더 잘 이해하기 위해 작은 도구를 만들어 보겠습니다.

HTML

스타일

먼저 9x8 그리드를 만들어 보겠습니다.

.rgb {
  all: unset;
  aspect-ratio: 9 / 8;
  container-type: inline-size;
  display: grid;
  font-size: 1.75cqi;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
}

특이한 크기이지만 이는 R, G, B 원이 5x5이고 겹치기 때문입니다:

.r, .g, .b {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  font-size: 5cqi;
  mix-blend-mode: difference;
}

.r, .g 및 .b에 대한 CSS는 다음과 같습니다.

.r {
  background-color: rgb(var(--r), 0, 0);
  grid-area: 1 / 3 / 6 / 8;
}

.g {
  background-color: rgb(0, var(--g), 0);
  grid-area: 4 / 1 / 9 / 6;
}

.b {
  background-color: rgb(0, 0, var(--b));
  grid-area: 4 / 5 / 9 / 10;
}

최근에는 그리드 영역을 많이 사용했습니다. 매우 특정한 위치에 그리드 항목을 배치할 수 있습니다:

행 시작 / 열 시작 / 행 끝 / 열 끝

개발 도구의 그리드 시각화 도구:

세 ​​가지 CSS 사용자 정의 속성인 --r, --g 및 --b를 보셨나요? 우리는 이것을 작은 JS 조각으로 업데이트할 것입니다:

const rgb = document.querySelector('.rgb');
rgb.addEventListener('input', e => {
  const N = e.target;
  document.body.style.setProperty(`--${N.name}`, N.value);
})

기본적으로 그게 전부입니다. 몇 가지

요소를 추가하고 사소한 조정을 했습니다. 하지만 시각화 도우미가 작동하도록 하기 위해 가장 중요한 한 줄을 언급하는 것을 거의 잊었습니다:

믹스-블렌드 모드: 차이

여기서 읽어보세요. 모든 모드를 반복해서 살펴보는 것은 정말 재미있습니다.

데모

여기 Codepen이 있습니다. R, G, B 아래의 숫자를 클릭하고 편집하면 페이지 배경과 세 원의 겹치는 부분이 어떻게 변하는 지 확인할 수 있습니다.