브라우저에서 진짜 수채화가 번져요 — Inkwash로 보는 수채화 시뮬레이션의 원리

코드로 물감을 번지게 한다고요?

Inkwash는 웹에서 돌아가는 수채화 스케치 앱이에요. 그냥 붓 효과를 흉내 낸 그림판이 아니라, 진짜 종이 위에 물감이 번지고, 물이 마르면서 가장자리에 색이 진하게 고이고, 두 색이 만나면 자연스럽게 섞이는 그 미묘한 느낌까지 코드로 재현했다는 게 핵심이에요. 만든 분이 "어떻게 만들었는지" 원리까지 친절하게 풀어놨는데, 이게 그래픽 시뮬레이션에 관심 있는 개발자에겐 정말 좋은 교재예요.

디지털로 수채화를 흉내 내는 건 생각보다 어려워요. 왜냐면 수채화의 매력은 '통제할 수 없는 물의 움직임'에서 나오거든요. 물이 종이 위를 어디로 흐를지, 물감 알갱이가 어디에 가라앉을지가 매번 달라지는데, 이 우연성을 프로그램으로 만들어내야 하니까요.

물과 물감을 따로 시뮬레이션해요

핵심 아이디어는 화면을 격자(grid) 형태의 작은 칸들로 나누고, 각 칸마다 두 가지 정보를 따로 추적하는 거예요. 하나는 물의 양, 다른 하나는 물감(안료)의 양이에요. 그리고 이 둘이 시간에 따라 어떻게 변하는지를 매 프레임 계산해요.

물은 물리 법칙에 따라 흘러요. 물이 많은 칸에서 적은 칸으로 퍼져나가는 거죠. 이걸 단순화한 유체 시뮬레이션으로 표현하는데, 종이의 미세한 울퉁불퉁함이나 물의 양에 따라 흐르는 방향이 달라지게 만들면 자연스러운 번짐이 생겨요. 물감은 이 물의 흐름을 타고 같이 이동하는데, 물보다 무거워서 천천히 움직이고 일부는 종이에 '가라앉아' 고정돼요. 그래서 물이 마르고 나면 물감만 남는 거죠.

수채화 특유의 디테일도 이 모델에서 자연스럽게 나와요. 예를 들어 가장자리 진해짐(edge darkening) 현상이 있어요. 물웅덩이가 마를 때 가장자리부터 마르는데, 안쪽의 물감이 가장자리로 끌려가면서 테두리에 색이 진하게 고이는 거예요. 실제 수채화 그려보신 분은 "아, 그거!" 하실 텐데, 이게 물의 증발과 흐름을 시뮬레이션하면 저절로 재현돼요. 또 알갱이 효과(granulation)처럼 물감이 종이 결에 따라 거칠게 가라앉는 느낌도 표현할 수 있고요.

색이 섞이는 방식도 달라요

재미있는 건 색을 섞는 방식이에요. 우리가 화면에서 쓰는 RGB 색은 빛을 더하는 방식(가산 혼합)이라, 다 더하면 흰색이 돼요. 그런데 실제 물감은 빛을 흡수하는 방식(감산 혼합)이라 섞을수록 어두워지죠. 그래서 수채화를 제대로 흉내 내려면 단순히 RGB 값을 평균 내면 안 되고, 물감이 빛을 어떻게 흡수하고 반사하는지를 모델링해야 해요. 이런 안료 혼합을 다룰 때 쿠벨카-문크(Kubelka-Munk) 모델 같은 이론을 참고하는데, 노랑과 파랑을 섞으면 (화면처럼 회색이 아니라) 진짜 물감처럼 초록이 나오게 만들 수 있어요.

이 모든 계산을 매 순간 수많은 격자 칸에 대해 해야 하니 연산량이 많아요. 그래서 보통 GPU의 셰이더(화면 그리기를 병렬로 처리하는 작은 프로그램)나 캔버스 가속을 활용해서 실시간으로 부드럽게 돌아가게 만들어요.

업계 맥락에서 보면

사실 수채화 시뮬레이션은 1997년 'Computer-Generated Watercolor'라는 유명한 연구 논문에서 체계가 잡혔어요. 그 뒤로 Procreate, Adobe Fresco 같은 상용 앱들이 이런 자연 매체 시뮬레이션을 발전시켜 왔죠. Inkwash가 특별한 건, 이걸 무거운 네이티브 앱이 아니라 웹 브라우저에서, 그것도 원리를 공개하며 구현했다는 점이에요. 누구나 들어가서 만져보고 코드 발상을 배울 수 있으니까요.

한국 개발자에게는요

프론트엔드나 그래픽에 관심 있다면 이건 정말 좋은 학습 소재예요. 격자 기반 시뮬레이션, 유체의 확산, GPU 셰이더 활용 같은 개념은 게임의 물/불 효과, 데이터 시각화, 인터랙티브 아트 등 응용 분야가 넓거든요. 거창한 라이브러리 없이도 '상태를 격자에 담고 매 프레임 갱신한다'는 패턴 하나만 익혀두면, 다양한 자연 현상 시뮬레이션에 두루 써먹을 수 있어요. 사이드 프로젝트로 작게 따라 만들어보기에도 딱 좋고요.