oklab() 컬러? 아니, 이 노란색은 좀... 😅 (CSS 만화: comiCSS #255)

HTML과 CSS로 만화를 그린다? 언뜻 들으면 고개를 갸웃할 법한 이야기죠. 하지만 제가 꽤 오랫동안 즐겨온 사이드 프로젝트, 바로 'comiCSS'가 그렇습니다. 말 그대로 HTML과 CSS 코드만으로 웹 기술에 대한 유머러스한 만화를 만들고 있죠. 매주 새로운 작품을 선보이려 애쓰고 있어요.

이번 주 작품은 무려 20년 전, 짐 벤튼(Jim Benton)의 기발한 만화에서 영감을 받아 시작됐습니다. 사실 내용을 처음 접했을 땐 '음... 좀 황당한데?' 싶었죠. 하지만 그 어이없음 속에서 묘한 유머 코드를 발견했어요. 제가 실무에서 복잡한 UI 버그를 해결하다가 엉뚱한 CSS 속성 하나로 문제가 풀리는 순간을 마주할 때 느끼는 '이게 되네?' 하는 종류의 황당한 유머와 비슷하달까요? 결국 저만의 CSS 테마 버전으로 만들어봐야겠다고 결심했고, 심지어 두 가지 버전을 완성했습니다!

원본 만화는 손으로 그린 특유의 개성이 살아있지만, 제가 만든 어린아이 같은 귀여운 버전도 꽤 마음에 듭니다. 비록 CSS 관점에서는 완벽하게 들어맞진 않지만요. 병에 적힌 '노란색' 값들이 실제 컬러를 나타내는데, #pee 같은 건 당연히 CSS 컬러 코드가 아니니까요. 이걸 또 #fee로 바꾸면 농담의 의미가 퇴색될까 봐 그대로 두었습니다.

그래서 웹사이트에는 대안으로 두 번째 버전도 함께 올려두었습니다. 이 버전은 좀 더 'CSS스러운' 접근 방식을 택했죠.

노란색 액체가 담긴 컵 네 개가 있습니다. 모두 매우 행복해 보이지만, 마지막 컵만 충격받고 걱정스러운 표정입니다. 첫 번째 컵에는 '나는 oklab(93.4% -11.75% 46.5%)이야'라고 쓰여 있고, 두 번째 컵에는 '나는 oklab(96.8% -17.75% 49.75%)이야'라고 쓰여 있으며, 세 번째 컵에는 '나는 oklab(95.6% -21.5% 46.5%)이야'라고 쓰여 있습니다. 그리고 마지막 컵에는 '얘들아... 우리는 oklab이 아니라 urine lab인 것 같아!'라고 쓰여 있습니다.

이 두 번째 버전이 나중에 나왔지만, 저는 첫 번째 버전보다 이쪽이 더 마음에 듭니다. 여전히 좀 황당하고 유치한 농담이긴 해도, 첫 번째처럼 아예 어린아이 같지는 않거든요. 무엇보다 요즘 CSS 트렌드에 맞춰 oklab() 같은 더 현대적인 CSS 기능을 활용했다는 점도 마음에 드는 부분이고요.

여러분은 두 버전 중 어떤 만화가 더 마음에 드시나요?

oklab() 컬러? 아니, 이 노란색은 좀... 😅 (CSS 만화: comiCSS #255)

oklab() 컬러? 아니, 이 노란색은 좀... 😅 (CSS 만화: comiCSS #255)

관련 링크