← Back to Main

System Art: Module - Layout and Layers

4/15/2025, 5:53:35 AM | Jeanyoon Choi

Original Notes (Pre-LLM)

When thinking about system art - multiple modules composed together, I easily associate the image of grid-based composition, Multiple modules positioned in a grid layout, with each grid square block being a module.

However, grid is not the only layout that can be used to compose system art. Speculating further layouts is crucial to expand the boundaries of system art. For this essay, let's assume the situation where the system is composed of a combination of multiple modules - Can be agents, profiles, components, etc. - and when we need to display this composition in the form of a layout.

Grid: Most simple. Most intuitive and modular, easy to compose. But grids are not all the same grids. The most simplistic grid has all the same size. Some variations might be: Part of the module gets larger irregularly. Grid size changes dynamically, zoom in and out (Case of ≠)

Grid - Displayed in different levels: Reference to Lee Ufan (From Points)

Tab (Bit Chaotic)-Like Aesthetic: Different tabs (Internet tabs/sometimes explicitly) opened in a single screen - Each portraying a sub-system?/agent.

Circular Layout: Remember Lee Ufan also talked about circular layout

Map Layout: Can be about explicitly having map, but also implicitly metaphoring -- the map-like interaction, the map-like layout. Spatially distributed? Maybe rhizomatic map?

Collage - Not smth i tried yet, but can be Basquiat-like - In this case, different unit is not positioned within the same layer, but rather, different layer/composition/location/size/appearance. And from this chaos, there emerges a pattern - A collage pattern. Overlaying one with another? How to design a chaotic-yet-orderly collage?

It can be also expanded to 3D:

Cube Layout: Grid in 3D.

Cylindrical Layout

Sphere/Semi-Sphere Layout

Panopticon Layout: Related to social & system (dystopia system)

Other shapes: Spiral Layout

Destructured/Post-structural/Hyperbolic Layout:

Hyperbolic Layout: Chronology

Post-structural/Destructured: Omega

In my prev works I already considered how to position each module within a single screen - to create a visually comprehensive layout as well as a visually stunning layout, and deliver the feeling I want audiences to deliver

Cases:

Chronology: Hyperbolic layout, bell curve/other different functions/indicators, 12 different layouts. 12 clocks → My assumption: Doesn't only have to be 12 layouts. Can be even more! Hypothetically even more! Also what makes it interesting: morphing between different layouts.

Nonequality: Representation of grid layout: Expanding grid layout. Initially just a line, but increases in a grid manner. What grid & units can make? What is the value of expandability? Also quotation on state-based approach: Each grid unit had separate states (Text, Image), as well as one global state (Global Nonequality) → Even with this minor use of states, you can create some system, some ecosystem, some system dynamics to be visible.

Omega: 3D Layout. First starting cylindrical. Then destructing based on user interaction 'shaking the phone'. I think it was the first good approach to deconstructivist 3d layout, inspired. Also note it had two layers-based positioning: One 'Row' of lines (circular composition of elements), and different rows aggregated with each other. What was the limitation though? I guess there are many unexplored deconstructivist territories - How to generate a good deconstructed layout via algorithm? How to make this process of deconstruction interactive? Can a deconstructed shape consist of a couple of parameters -- just as system -- all adjustable, and interactive from the user side?

Also in the context of Multi-Device Web Artwork, it is not only about the matter of layout within a single screen - It can be a matter of layers.

Multiple modules -- organised in some manner - form a layer.

Multiple layers -- again organised in another manner - form another layer.

Multiple layers --- again organised in another manner - form another layer.

Module - Layer A - Layer B - Layer C - ... And further layers proceedingly

Or more interestingly: Module - Layer A - Layer B - Layer C - ... - Layer Z - Module (Conceptually connection is circulatory -- not sure if this will be 100% possible though)

Practical example: Omega. Two-layer composition system.

Conceptual: Let's imagine a grid. Multi-device setting. Each device: Layer 1, Within each device is divided by four units: Each unit: Layer 2. (50vw 50vh) Within each layer: again divided by four: Layer 3 (25vw 25vh) ... So on and so forth. What will this system consist of? What is the inter-layer differences & within-layer similarities? How to design this precisely?

Junk Site -- Should be Symphony of Civilisation + Rapid Changes -- Symphony of Civilisation Movement 3, but website version. What will this composition consist of? How to display junk sites?

The key about layer/layout: Each module is operating/built upon a specific 'system', 'mechanism', 'algorithm' -- and different modules might be independent... But when looking at them thoroughly, in a multiplied/multi-device manner - different aesthetics/overviews emerge... The whole is never the sum of the parts! (Paul Eisenmann) → That's why layout/layers/distribution/composition/collage is important.

So traditionally: Grid-based layout + multiple modules integrated on top of the grid

But speculatively: Can this be a collage-layout/experimental layout? Like collaged, disordered composition - but actually, the part of these collages/the unit is all system-based generation. 3D Collage, 2D Collage, random-yet-ordered composition, ordered-yet-random composition.

한남대교를 지나가는 무수히 많은 차들과도 유사 → 각각의 차들은 일종의 합목적성을 가지고 다리를 건너지만, 그 다리를 위에서 바라본다면 완전히 다른 장관, 하나의 흐름, 하나의 자본주의적 흐름, 하나의 살아숨쉬는 생명체, 도시라는 유기체가 인식됨

English Version (LLM-Generated)

This essay explores the various layout strategies available for system art—a form of art that is composed of multiple interrelated modules such as agents, profiles, or components. The conventional image that often comes to mind is that of a grid—an intuitive, modular arrangement where each element occupies a uniform square. However, the grid is only one of many possible organizational structures. To expand the boundaries of system art, it is essential to consider alternative layouts that can introduce new forms of spatial and aesthetic expression.

A grid layout is perhaps the simplest and most straightforward option. Its clarity and modularity render it a natural starting point for many compositions. Even within grid-based systems, there is room for variation. For example, one might alter the baseline uniformity of grid squares by allowing certain modules to assume larger, irregular shapes or by enabling dynamic resizing such as zooming in and out. Additionally, grids can be layered or arranged in multiple levels, as referenced in Lee Ufan’s "From Points," which demonstrates that even simple grid systems can yield sophisticated visual hierarchies.

Beyond the traditional grid, other layouts offer unique visual narratives. A “tab” aesthetic, with multiple fragments or “tabs” occupying a single screen, suggests a bit of chaos while still portraying distinct subsystems. Circular layouts, another concept discussed by Lee Ufan, invite viewers to consider repetition, symmetry, and continuity in their composition. Moreover, layouts inspired by maps—whether literal or metaphorical—offer spatially distributed, rhizomatic structures that can evoke the feel of an ever-evolving ecosystem. The collage method is another promising avenue. In a collage layout, separate layers, compositions, or locations interact dynamically, creating emergent patterns from apparent chaos. The overlay of various elements can produce a visual narrative that is both seemingly random and intricately ordered.

The potential of these layouts extends beyond two dimensions. Three-dimensional compositions offer additional depth and complexity. A cube layout can be seen as a 3D extension of the grid, while cylindrical and spherical arrangements introduce curvature and escape from linear constraints. Concepts such as the panopticon layout embed social and systemic dimensions into spatial design, reflecting ideas of observation and control. Other three-dimensional structures—spiral, hyperbolic, post-structural, and even deconstructivist forms—promise further exploration and experimentation. Notably, a hyperbolic layout could embody a chronology through non-linear indicators, while a post-structural or deconstructed layout might suggest an “omega” state that continually evolves with user interaction.

In my previous works, I experimented with positioning modules on a single screen to achieve visually comprehensive and engaging layouts. For instance, a chronology-based hyperbolic layout might utilize bell curves or other mathematical functions to arrange elements in a sequence, morphing continuously between different configurations. Similarly, an “Expanding Grid” layout begins with a simple line that grows into a full grid, each unit possessing individual states (such as text or image) alongside a global state that influences the overall system dynamics. Another example, known as “Omega,” began with a cylindrical 3D layout that later deconstructed based on user interaction—such as the shaking of a phone—demonstrating how two layers of composition (a circular row of elements combined with aggregated rows) can be utilized to create interactive and dynamically evolving layouts.

The discussion extends naturally into the realm of multi-device web artwork, where layout challenges encompass not only a single screen but layers upon layers. In these contexts, multiple modules form Layer A, which is then organized into additional layers (Layers B, C, etc.). In some speculative frameworks, the composition might even become circular, where the final layer connects conceptually back to the first module, forming an interconnected ecosystem.

A practical example of this multi-layered approach can be drawn from a conceptual grid used in a multi-device setting. Imagine each device representing a primary layer, within which is a subdivision—each quadrant representing a secondary layer. This pattern could continue indefinitely, raising questions about the inherent differences and similarities between layers and how precisely to design such inter-layer systems.

In essence, the goal is to view each module as operating under a specific system, mechanism, or algorithm. Although these modules might be independent, their arrangement in a multi-device, layered environment often gives rise to new aesthetics and interpretations. As Paul Eisenmann famously said, “The whole is never the sum of its parts.” This insight is particularly relevant when considering collage-like or experimental compositions, where ordered randomness and system-based generation interact to form complex visual experiences.

In summary, while grid-based layouts remain a widely used and respected method for organizing system art, numerous alternative configurations—ranging from circular, map, and tab layouts to complex three-dimensional and deconstructivist forms—offer promising grounds for experimental and dynamic compositions. The interplay of layers, modules, and algorithms underscores the potential for creating engaging, interactive systems where aesthetic beauty emerges from the organized chaos of underlying structures.

Korean Version (LLM-Generated)

시스템 아트에 대해 고찰할 때, 여러 모듈이 결합되어 구성된 작품을 연상하게 된다. 흔히 그리드(grid) 기반의 구성이 떠오르는데, 이는 개별 모듈들이 격자 형태로 배치되어 각 격자 칸이 하나의 모듈을 담당하는 형태이다.

하지만 시스템 아트를 구성하는 데 있어 그리드는 유일한 배치 방식이 아니다. 다양한 레이아웃 방식을 모색하는 것은 시스템 아트의 경계를 확장하는 데 중요하다. 본 에세이에서는 에이전트, 프로필, 컴포넌트 등 여러 모듈의 조합으로 구성된 시스템을 하나의 레이아웃 형태로 전달하는 상황을 가정해보고자 한다.

1. 그리드(Grid)

가장 단순하고 직관적이며 모듈화하기 쉬운 방식이다. 전형적인 그리드는 모든 모듈이 동일한 크기로 배치되지만, 실제로는 다음과 같은 변형들이 가능하다.

- 일부 모듈이 불규칙적으로 확대되어 배치되는 경우

- 그리드의 크기가 동적으로 변경되거나, 확대/축소되는 경우(예: 비동일 그리드)

- 여러 레벨로 구성된 그리드: 예를 들어, 이우환의 그림 "From Points"에 영감을 받은 다층적 참조

2. 기타 배치 방식

- 탭(Tab) 기반의 미묘하게 혼돈스러운 미학: 하나의 화면에 여러 개의 탭(인터넷 브라우저의 탭과 유사 혹은 명시적으로)을 열어 각 탭이 하위 시스템이나 에이전트를 표현하는 방식

- 원형 배치: 이우환이 언급한 원형 레이아웃을 응용한 구성

- 지도(Map) 레이아웃: 명시적인 지도 형태뿐 아니라, 은유적으로 '지도와 같은 상호작용'이나 '공간적으로 분포된, 리조마적 지도'의 형태로 구성하는 방안

- 콜라주(Collage): 다층적이며, 각 단위가 동일한 레이어에 배치되는 것이 아니라 서로 다른 레이어, 구성, 위치, 크기, 외관을 가지며 혼돈 속에서 패턴을 도출해내는 방식. 예컨대, 서로 겹치면서도 질서 있는 콜라주를 디자인하는 방법에 대한 탐구

3. 3차원(3D) 확장

공간적인 확장을 고려하면, 3D의 다양한 형태로 레이아웃을 구성할 수 있다. 예를 들어,

- 큐브(Cube) 레이아웃: 3D 그리드

- 원통(Cylindrical) 레이아웃

- 구(Sphere) 또는 반구(Semi-Sphere) 레이아웃

- 파놉티콘(Panopticon) 레이아웃: 사회 시스템 혹은 디스토피아적 체제를 연상시키는 구성

- 나선형(Spiral) 레이아웃, 해체주의(Destructured), 탈구조주의(Post-structural) 또는 쌍곡선(Hyperbolic) 형태 등, 시간의 흐름이나 기타 다양한 함수, 지표 등을 반영한 레이아웃

내 이전 작업에서는 단일 화면 내에서 각 모듈을 어떻게 위치시켜 시각적으로 포괄적이고 매혹적인 레이아웃을 구현할 것인가에 대해 고민해왔다. 몇 가지 사례를 살펴보면 다음과 같다.

사례 1. Chronology

쌍곡선(Hyperbolic) 레이아웃, 벨 커브 또는 기타 함수들을 적용해 12개의 서로 다른 레이아웃 혹은 12개의 시계를 구현한 사례이다. 이 가정은 반드시 12개에 국한되지 않으며, 형태 간의 변형(morphing)을 통해 다층적인 배치가 가능하다는 점에서 흥미로움을 제공한다.

사례 2. Nonequality

그리드 레이아웃의 확장 가능성을 표현하는 사례로, 처음에는 단순한 선에서 시작하여 점차 그리드 형태로 확장되는 형태를 보여준다. 각 그리드 단위는 텍스트, 이미지 등 별개의 상태(state)를 가지며, 동시에 "글로벌 Nonequality"라는 하나의 전역 상태를 공유한다. 이를 통해 단순한 상태 변화만으로도 하나의 시스템 혹은 생태계, 다이나믹한 상호작용을 시각화할 수 있다.

사례 3. Omega

기본적으로 3D 레이아웃으로, 처음에는 원통형(cylindrical) 구성에서 시작하여 사용자의 상호작용(예: 휴대폰 흔들기)에 의해 구조가 해체되는 과정을 보여준다. 이 작업은 해체주의적 3D 레이아웃을 구현하기 위한 최초의 성공적 시도 중 하나로 평가된다. 또한, 한 층은 원형으로 배열된 요소들의 행(Row)을 구성하고, 서로 다른 행들이 집합적으로 상호 연결되는 두 층의 배치 방식을 포함한다. 그러나, 알고리즘을 통해 어떻게 효과적으로 해체주의 레이아웃을 생성할 것인지, 그리고 이 해체 과정을 사용자와의 상호작용에 의해 어떻게 조정할 것인지에 대한 미탐구 영역이 존재한다.

또한, 멀티 디바이스 웹 아트워크의 맥락에서는 단일 화면 내 레이아웃 문제를 넘어, 레이어(layer)의 문제도 고려할 필요가 있다.

- 복수의 모듈이 특정 방식으로 조직되어 하나의 레이어를 형성하고,

- 여러 레이어가 다시 특정 방식으로 구성되어 상호 연관성을 띠며,

- 이와 같이 지속적으로 레이어가 중첩될 수도 있다.

예를 들어, Module → Layer A → Layer B → Layer C → ... 순으로 구성되며, 심지어 Module과 최종 레이어가 순환적으로 연결되는 개념적 접근도 가능하다(100% 실현 가능할지는 미지수이나).

실제 사례로 Omega 프로젝트에서는 두 개의 레이어로 구성된 시스템을 적용하였다. 개념적으로는, 다수의 디바이스가 각각 Layer 1을 구성하며, 개별 디바이스 내부는 4개의 단위(각각 Layer 2, 예를 들어 50vw×50vh)로 나뉘고, 그 내부는 다시 4개의 단위(Layer 3, 예를 들어 25vw×25vh)로 세분화되는 구조로 확장된다. 이때, 시스템이 무엇으로 구성되는지, 레이어 간 차이와 내부 유사성이 무엇인지를 정밀하게 설계하는 것이 관건이다.

마지막으로, Junk Site와 같은 예는 문명 교향곡(Symphony of Civilisation) 및 Rapid Changes—특히 Symphony of Civilisation Movement 3의 웹 버전—으로 본질을 다양하게 확장할 수 있는 사례로 볼 수 있다. 각각의 모듈은 특정 시스템, 메커니즘, 알고리즘을 기반으로 작동하며, 개별적으로 독립적일 수 있으나, 다중 디바이스 혹은 다중 레이어로 구성될 때에는 전혀 새로운 미학과 전체적 조망이 탄생된다. 즉, 전체는 단순히 부분들의 합산이 아니라, 상호작용을 통해 새롭게 재구성된 하나의 생명체와도 같다(존 폴 아이젠만의 견해 참조).

전통적으로는 그리드 기반의 레이아웃 위에 모듈들을 통합하는 방식을 사용했으나, 향후에는 콜라주나 실험적 레이아웃—즉, 겉보기에 무질서하거나, 규칙성을 띄면서도 무작위성을 포함한 구성—을 통해 시스템 기반 생성의 새로운 가능성을 모색할 필요가 있다.

비유하자면, 한남대교를 건너는 수많은 차량들이 각각의 목적성을 가지고 다리를 건너지만, 다리 위에서 이들을 조망하면 하나의 흐름, 자본주의적 역동성, 그리고 살아 숨 쉬는 도시라는 유기체의 형태가 드러나는 것과 같은 원리로, 시스템 아트 역시 개별 모듈들이 모여 하나의 전체를 창조하는 과정을 보여준다.