김수영은 지역과 커뮤니티, 디지털 환경을 오가며 연구와 창작을 동시에 실천한다. AI와 알고리즘을 도구로 삼되 그 완벽한 출력에 의도적인 제약을 걸며, 픽셀과 격자라는 원시 단위 위에서 과정과 흔적이 쌓이는 방식을 탐구한다.
Soo young Kim moves between regional community practice and digital environments, pursuing research and creative work simultaneously. Taking AI and algorithms as tools, she imposes deliberate constraints on their outputs—exploring how process and trace accumulate on the primitive units of pixels and grids.
작업의 기본 개념과 출발점 아야코 록카쿠의 핑거 페인팅을 픽셀 격자 위에서 다시 그리는 작업이다. 손끝으로 물감을 문지르는 행위를, 화면을 구성하는 가장 작은 단위인 사각 픽셀의 언어로 번역한다.
록카쿠는 붓을 버리고 손끝으로 돌아갔다. 도구를 제거함으로써 신체와 물감 사이의 거리를 없앴다. 이 작업은 그 방향을 참조하되 디지털 환경 안에서 같은 질문을 던진다. 픽셀은 디지털 이미지의 가장 원시적인 단위다. 매체는 다르지만 같은 태도를 취해보고자 했다.
출발점은 록카쿠 작업에서 ‘구도’나 ‘구성’이 아닌 몰입의 리듬에 주목한 데 있다. 중심점 없이 캔버스 어디서든 터치가 놓이고, 물감이 겹치고, 규칙 없이 색이 쌓이는 그 과정 자체를 따르고자 했다. 골판지 위에서는 물감의 점성과 종이의 흡수력이 터치의 형태를 결정하듯, 픽셀 격자 위에서는 이산적구조가 그 역할을 대신한다.
해커톤 데이터와의 연결 방식 록카쿠의 작품에서 추출한 8가지 형광색 팔레트 ‘핫핑크, 시안, 옐로우, 오렌지, 퍼플, 그린, 딥핑크, 차트루즈 ‘ 를 작업의 유일한 색채 데이터로 사용한다. 각 색은 주색(primary), 보조색(secondary), 발광값(glow)의 세 채널로 구성된 객체로 관리되며, 작가의 색 감각이 코드의 데이터 구조로 번역된 형태로 작동한다.
주목한 요소 록카쿠의 작업에서 가장 눈여겨본 것은 도구를 제거하는 선택이었다. 붓이라는 매개를 걷어냄으로써 그녀의 작업은 신체와 재료 사이의 직접성을 확보한다. 이 작업이 주목한 것은 그 직접성의 태도다. 결과물의 미감이 아니라, 원시 단위로 돌아가는 방식에 주목했다.
디지털 환경에서 그에 상응하는 원시 단위는 픽셀이다. 그리고 픽셀 단위의 드로잉은 동시에 격자(grid)라는 구조적 질서를 드러낸다. 손끝의 흔적이 격자 위에 쌓이면서 아날로그적 자유로움과 디지털적 구조 사이의 긴장을 화면에 남긴다.
전시를 해석하고 번역한 방식 해커톤의 출발 컨셉은 “신경망의 개화”였다. 처음에는 그 컨셉을 직역해 중심에서 가지가 방사하는 구조를 구현했다. 그러나 그것은 록카쿠 작업의 핵심인 ‘중심 없는 자유로움’과 정반대였다. 자유로운 손끝을 중심점에 가두는 구조였기 때문이다.
그래서 신경망이 먼저 있고 그 위에 페인팅이 채워지는 것이 아니라, 자유로운 터치가 먼저 캔버스 전체를 돌아다니도록 방향을 바꿨다. 컨셉이 시각을 주도하는 것이 아니라, 행위가 먼저 일어나고 그 결과가 화면에 쌓이는 방식으로 전환하고자 하였다.
최종 제출은 영상이었다. 그 과정에서 비트레이트를 의도적으로 낮게 설정했다. AI 기반 알고리즘이 만들어내는 출력은 기본적으로 완벽하다. 노이즈가 없고,손실이 없다. 그 완벽함에 제약을 걸고 싶었다. 낮은 비트레이트로 인한 정보 손실은 디더링과 유사한 방식으로 작동한다. 완전하지 않은 데이터가 오히려 화면에 물질적인 질감을 부여한다. 손실 자체가 표현의 일부가 되기를 바랐다.
해당 형식을 선택한 이유 픽셀 그리드, 그리고 의도적 열화. 이 두 선택은 같은 방향을 가리킨다. 디지털 환경에서 매체를 다루는 태도의 관점에서 보았을때 ‘완성도’를 낮추는 방향으로 가는 것, 그것이 이 작업이 아야코 록카쿠의 방식과 겹치는 지점으로 보고 이런 형식을 선택했다.
처음 구현한 버전은 중앙에서 신경망처럼 가지가 뻗어나가는 형태였다. 컨셉에 충실했으나 록카쿠 작업의 본질 ‘중심 없이 캔버스 전체를 자유롭게 돌아다니는 손끝’을 오히려 가두는 구조라는 것을 인식하고 전면 재설계했다.
재설계의 핵심은 생성 순서의 역전이다. 구조가 먼저 있고 그 위에 터치가 채워지는 것이 아니라, 터치가 먼저 자유롭게 흩뿌려지고 그 결과가 화면에 누적되도록 했다. 여러 종류의 시각 요소(흐름, 잉크 방울, 터치 자국, 질감)가 캔버스 전체에 동시에 생성되며, 시간이 지나면서 자연스럽게 밀도가 높아진다.
Finger Touch 요소는 픽셀 위의 손끝 자국이라는 물성을 구현하기 위해 세 파트로 설계했다.
- 불규칙한 가장자리를 가진 눌림 영역
- 드래그 방향으로 번지는 꼬리
- 손가락 결의 흔적을 암시하는 능선
단순한 원형으로는 손끝 자국의 비정형성이 사라지기 때문이다.
영상 출력 과정에서 비트레이트를 18로 설정했다. 알고리즘이 만들어내는 완벽한 픽셀 출력에 의도적인 정보 손실을 더한 것이다. 결과적으로 영상에는 압축 아티팩트가 발생하고, 이것이 픽셀 격자의 질감 위에 또 하나의 열화 레이어로 쌓인다.
사용 툴 및 환경 Claude를 사용하여 React (JSX), HTML5 Canvas API, JavaScript (ES6+). 별도의 AI 이미지 생성 모델이나 외부 라이브러리 없이 순수 알고리즘으로 구동된다. 최종 출력은 브라우저에서 실시간 렌더링되는 단일 JSX 파일을 영상으로 캡처한 형태다.
이미지/영상 생성 방식 두 개의 Canvas 레이어를 사용한다. 오프스크린 캔버스는 화면 해상도의 1/6(PIXEL_SCALE=6)로 설정해 모든 드로잉 연산을 수행하고, imageSmoothingEnabled = false 상태로 실제 화면에 6×6 픽셀 블록으로 확대 렌더링한다. CSS에도 image-rendering: pixelated를 적용해 픽셀 격자 질감을 일관되게 유지한다.
작품을 구성하는 시각 요소는 총 6종이다.
- Flow Particles: 캔버스 전체를 자유롭게 돌아다니는 색의 흐름. 사인파 기반 벡터 필드로 움직이며 물감이 번지는 흔적을 만든다.
- Ink Drops: 특정 위치에 잉크 방울이 서서히 번지며 쌓이는 요소. 불규칙한 가장자리와 박동하는 형태로 물감의 점성을 픽셀로 표현한다.
- Finger Touches: 손끝 자국을 재현하는 핵심 요소. 불규칙 가장자리를 가진 눌림 영역(edge noise), 드래그 방향의 꼬리(tail), 손가락 능선(ridge) 3파트로 구성된다. 각 터치는 이전 터치 위치를 참조해 방향을 이어받으며 손이 실제로 이동하는 흔적을 남긴다.
- Texture Layers: Ink Drop과 함께 생성되는 질감 레이어. secondary 색상만 사용해 물감 표면의 미묘한 색 변화를 표현한다.
- Shimmer: 인접한 두 Ink Drop 사이 거리가 일정 이하일 때 조건부로 발생하는 연결선. glow 색상 채널을 사용한다.
- Glint: Shimmer 발생 시 연결 중간 지점에 생성되는 반짝임 점.
색채는 록카쿠 작품에서 추출한 8가지 형광 팔레트로 고정된다. 각 색은 primary / secondary / glow 세 채널로 구성된 객체로 관리되며, 요소별로 다른 채널이 배분된다. Flow와 Touch는 primary·secondary를, Texture는 secondary만을, Shimmer와 Glint는 glow만을 사용한다. 이 채널 배분이 같은 색이 요소마다 다른 밀도와 발광감으로 나타나는 레이어감을 만든다.
편집 및 후반 작업 오브젝트 풀링(Pool class)을 도입해 파티클 생성과 소멸 과정의 메모리 할당을 최소화했다. 풀 규모는 flow 200개, ink 35개, touch 60개, tex 40개, shimmer 30개, glint 40개로 구성된다.
페이즈별 배경 fade rate를 달리 설정해 하드 리셋 없이 캔버스가 원점으로 돌아오는 순환을 구현했다(생성 0.004 → 성장·개화 0.002 → 순환 최대 0.24까지 단계적 증가). 순환 페이즈에서는 각 요소의 수명과 투명도에 decay multiplier를 추가 적용해 모든 요소가 페이드 속도에 맞춰 자연스럽게 소멸한다.
최종 영상은 브라우저 실행 화면을 스크린 레코딩으로 캡처한 뒤 편집 툴로 후처리했다. 인코딩 단계에서 vllo를 사용해 비트레이트를 18로 설정했다. 이는 기술적 한계가 아닌 의도적 선택이다. 낮은 비트레이트로 인한 압축 아티팩트가 픽셀 격자의 이산적 질감 위에 추가적인 열화 레이어로 작용하며, 알고리즘이 만들어내는 완벽한 디지털 출력에 물질적 불완전함을 부여한다. 정보 손실이 표현의 일부가 된다.
Concept and Point of Departure
This work reinterprets Ayako Rokkaku’s finger painting on a pixel grid. The act of smearing paint with fingertips is translated into the language of square pixels, the smallest unit of a digital screen.
Rokkaku abandoned the brush and returned to the fingertip, eliminating the distance between body and material. This work follows that direction while posing the same question within a digital environment. The pixel is the most primitive unit of a digital image. Although the medium differs, the work attempts to adopt the same attitude.
The starting point lies in focusing not on composition but on the rhythm of immersion in Rokkaku’s work. Touches are placed anywhere on the canvas without a center, layers accumulate, and colors stack without fixed rules. Just as viscosity and absorption shape marks on cardboard, the discrete structure of the pixel grid takes on that role here.
Connection to Hackathon Data
An eight-color fluorescent palette extracted from Rokkaku’s work—hot pink, cyan, yellow, orange, purple, green, deep pink, and chartreuse—is used as the sole chromatic dataset. Each color is structured as an object with three channels: primary, secondary, and glow, translating the artist’s color sensibility into a coded data structure.
Key Focus
The central focus is Rokkaku’s decision to eliminate tools. By removing the brush, she achieves directness between body and material. This work emphasizes that attitude of directness—not the visual result, but the method of returning to a primitive unit.
In the digital environment, the corresponding primitive unit is the pixel. Pixel-based drawing simultaneously reveals the structural order of the grid. As traces accumulate on the grid, a tension emerges between analog freedom and digital structure.
Interpretation and Translation of the Exhibition
The initial concept of the hackathon was “the blooming of a neural network,” first implemented as a radial structure from a center. However, this contradicted the essence of Rokkaku’s work—its centerless freedom.
The structure was therefore reversed. Instead of a predefined framework filled with painting, free touches move across the canvas first, and their accumulation forms the image. The concept no longer dictates the visual; instead, action precedes and results follow.
The final output is a video, with an intentionally low bitrate. AI-generated outputs are inherently perfect—lossless and noise-free. This work imposes constraints on that perfection. The resulting compression artifacts function similarly to dithering, introducing material texture. Loss itself becomes part of the expression.
Reason for Choosing This Format
The pixel grid and intentional degradation point in the same direction: lowering “perfection” as a stance toward digital media. This aligns with Rokkaku’s approach.
The initial version, structured like a neural network radiating from a center, was discarded for restricting free movement. The redesign reverses the generative order: touches scatter freely first, then accumulate. Multiple visual elements—flow, ink drops, touch marks, textures—are generated simultaneously across the canvas, gradually increasing density over time.
Finger Touch elements are constructed in three parts to simulate materiality:
- Pressed regions with irregular edges
- Tails extending along drag direction
- Ridge-like traces suggesting fingerprint texture
Technical Implementation
The work is built using Claude with React (JSX), HTML5 Canvas API, and JavaScript (ES6+), without external libraries or generative AI models. The final output is a screen-captured video of real-time browser rendering.
Image/Video Generation Method
Two canvas layers are used. An offscreen canvas at 1/6 resolution (PIXEL_SCALE=6) performs all drawing operations, then scales up into 6×6 pixel blocks with image smoothing disabled. CSS image-rendering: pixelated ensures consistent pixel texture.
Six visual elements structure the work:
- Flow Particles: Sine-wave vector field motion creating fluid color traces
- Ink Drops: Pulsating, irregular spreading marks
- Finger Touches: Core element with edge noise, directional tails, and ridge textures
- Texture Layers: Subtle surface variations using secondary color channels
- Shimmer: Conditional connections between nearby ink drops using glow
- Glint: Spark points at shimmer midpoints
Each color is divided into primary/secondary/glow channels and distributed across elements, creating layered density and luminosity.
Post-Production and Editing
Object pooling minimizes memory allocation (flow 200, ink 35, touch 60, texture 40, shimmer 30, glint 40).
Phase-based fade rates create cyclical reset without hard cuts (generation 0.004 → growth 0.002 → circulation up to 0.24). During the circulation phase, decay multipliers ensure all elements dissolve naturally.
The final video is screen-recorded and processed with VLLO, with bitrate intentionally set to 18. Compression artifacts act as an additional degradation layer over the pixel grid, introducing material imperfection into an otherwise perfect digital output.
