comiCSS #255: Yellow
comiCSS cartoon for August 24, 2026
개요 #
알바로 몬토로(Alvaro Montoro)가 매주 연재하는 comiCSS의 255번째 만화 「Yellow」가 8월 24일 공개됐다. comiCSS는 HTML과 CSS를 소재로 한 만화를, 다름 아닌 HTML과 CSS로 직접 코딩해 그리는 사이드 프로젝트다. 이미지 편집기가 아니라 브라우저가 캔버스인 셈이다.
이번 편은 20년 전 짐 벤튼(Jim Benton)의 카툰에서 출발했다. 작가 본인의 표현으로는 "유치하고 황당하지만 그래도 웃긴" 소재다. CSS 버전으로 옮길 만큼은 웃겼다는 것이 제작 동기였고, 그렇게 두 가지 버전이 나왔다.
두 가지 버전, 서로 다른 색 표현 #
손그림 버전과 카와이 버전 #
먼저 나온 쪽은 손으로 그린 버전이다. 작가는 이쪽이 캐릭터의 개성을 더 잘 살렸다고 평가했다. 동시에 어린아이 그림풍의 카와이 버전에도 애착이 있다고 덧붙였는데, 여기엔 CSS 관점에서 걸리는 지점이 하나 있다.
노란색들이 각 병에 적힌 값 그대로인 건 맞지만, #pee는 실제로 존재하는 색상 값이 아니다. 그렇다고 유효한 값인 #fee로 바꿔버리면 농담 자체가 전달되지 않는다. 말장난을 살리려면 유효한 CSS 문법을 포기해야 하는 셈이다.
Photo by Turgay Koca on Pexels
oklab을 쓴 두 번째 버전 #
작가는 웹사이트에 대체 버전으로 올릴 두 번째 만화를 따로 그렸다. 이쪽이 CSS 색채가 훨씬 짙다.
네 개의 컵이 각자 자기 색상 값을 oklab() 함수로 소개하는 구성이다. 마지막 컵만 표정이 굳어 있는데, "우린 oklab이 아니라 urine lab 아니야?"라는 대사가 펀치라인이다.
작가는 두 번째로 그렸지만 이쪽을 더 마음에 들어 했다. 여전히 화장실 유머이긴 해도 첫 번째 버전보다는 덜 유치하고, 최신 CSS 기능을 더 많이 쓴다는 점이 이유였다.
링크 #
- 퍼머링크: https://comicss.art/comics/255
- 이미지: https://comicss.art/comics/255/yellow.png
- 소스 코드: https://comicss.art/comics/255/yellow.html
만화가 CSS로 그려진 만큼 소스 코드도 공개돼 있다. 어떤 방식으로 도형과 색을 조합해 캐릭터를 만들었는지 궁금하다면 직접 열어보는 편이 빠르다.
이 글은 위 출처를 바탕으로 한국 독자를 위해 재작성한 기사입니다. 원문의 사실과 수치에 근거하며, 별도의 견해를 포함하지 않습니다.