서론

현대의 웹 개발은 본질적으로 ‘제약’의 연속입니다. HTML 태그, CSS 박스 모델, 그리고 브라우저의 렌더링 엔진이라는 정해진 틀 안에서 디자인을 구현해야 하며, 사용자 인터랙션 역시 버튼 클릭이나 스크롤과 같이 미리 정의된 이벤트 핸들러에 의존할 수밖에 없습니다. 최근 대규모 언어 모델(LLM)이 코드를 생성하여 UI를 만들어주는 도구들이 등장했지만, 이 역시 결국 텍스트 기반의 코드를 작성하고 브라우저가 이를 해석하는 전통적인 파이프라인을 벗어나지 못했습니다. 즉, 모델의 창의성은 복잡한 DOM(Document Object Model) 구조와 CSS 문법이라는 ‘중간 번역 과정’에서 손실되거나 왜곡될 수밖에 없습니다.

만약 브라우저가 코드를 해석할 필요 없이, 모델이 생각한 이미지를 그대로 화면에 픽셀 단위로 그려낸다면 어떨까요? 텍스트 필드도, 버튼도 없는 오직 시각적 정보만으로 구성된 화면에서, 사용자가 관심 있는 대상을 클릭하면 그 의도를 실시간으로 파악하여 다음 장면을 생성해주는 인터페이스입니다. 이것이 바로 ‘Generative Interface(생성형 인터페이스)‘가 추구하는 핵심 비전입니다. 이는 단순한 웹사이트 제작 방식의 변화가 아니라, 컴퓨터와 상호작용하는 근본적인 패러다임을 ‘코드 중심(Code-centric)‘에서 ‘픽셀 중심(Pixel-centric)‘으로 전환하는 시도입니다. 본고에서는 이 혁신적인 개념의 기술적 배경, 작동 메커니즘, 그리고 실제 구현 가능성에 대해 심도 있게 분석하고자 합니다.

본론

픽셀 중심 인터페이스: 기술적 원리와 메커니즘

Generative Interface의 핵심은 HTML/CSS와 같은 선언적 언어를 거치지 않고, 모델이 직접 레스터(Raster) 이미지를 생성하여 디스플레이에 스트리밍한다는 점입니다. 이를 위해 주로 사용되는 기술은 최신 Latent Diffusion Models (LDM) 및 Video Diffusion Models의 변형입니다. 기존의 텍스트-이미지 생성 모델인 Stable Diffusion이나 DALL-E는 텍스트 프롬프트에 의존하지만, Generative Interface에서는 사용자의 클릭 좌표(Point Coordinate)와 현재 프레임(Current Frame)이 중요한 컨텍스트(Context)로 작용합니다.

이 시스템은 크게 ‘인코더(Encoder)’, ‘생성 모델(Generative Model)’, ‘디코더(Decoder)‘의 세 단계로 구성됩니다. 사용자가 화면의 특정 영역을 클릭하면, 시스템은 해당 좌표 $(x, y)$와 현재 이미지 잠재 벡터(Latent Vector)를 결합하여 “이 위치를 중심으로 확대하거나, 이 물체의 뒷면을 보여줘"라는 의도를 모델에 전달합니다. 이는 마치 촬영 감독이 카메라 워킹을 지시하는 것과 유사하며, 모델은 이를 바탕으로 다음 순간의 픽셀을 예측하여 생성합니다.

아래는 이러한 Generative Interface의 데이터 흐름을 간단화한 다이어그램입니다.

1
2
3
4
5
6
7
8
9

graph LR
    A[User Click Action] --> B[Coordinate Encoder]
    B --> C[Conditioning Vector]
    D[Current Frame Latent] --> C
    C --> E[Diffusion Model U-Net]
    E --> F[Next Frame Latent]
    F --> G[VAE Decoder]
    G --> H[Pixel Stream Display]
    H --> D

이 과정은 단순한 이미지 생성이 아닌 **On-demand Generation(온디맨드 생성)**이라는 특징을 가집니다. 사용자가 요청하지 않은 페이지의 픽셀은 존재하지 않으며, 클릭이 발생하는 순간에만 GPU 연산을 통해 해당 뷰가 렌더링됩니다. 이는 웹 서비스의 ‘무한 스크롤’ 개념을 이미지 생성 영역으로 확장한 것으로 볼 수 있습니다.

기존 웹 개발 방식과의 비교 분석

이 새로운 접근 방식이 기존의 DOM 기반 웹 기술과 어떻게 다른지 명확히 이해하기 위해, 두 방식을 주요 특징별로 비교해 보았습니다.

| 비교 항목 | 기존 DOM 기반 (HTML/CSS/JS) | Generative Interface (Pixel-based) | | :— | :— | :— | | 데이터 표현 | 구조적 마크업 (텍스트 및 벡터) | 래스터 픽셀 데이터 (Tensor) | | 렌더링 주체 | 브라우저 렌더링 엔진 (Blink, WebKit) | 딥러닝 모델 (Diffusion Transformer 등) | | 인터랙션 방식 | 미리 정의된 이벤트 리스너 (onClick, onChange) | 좌표 기반 시맨틱 예측 (Click-to-Generate) | | 유연성 및 창의성 | CSS 문법 및 브라우저 호환성에 제약됨 | 모델의 상상력에 따른 무제한적 표현 가능 | | 접근성 (Accessibility) | 스크린 리더기 등 구조적 접근 용이 | 텍스트가 픽셀화되어 있어 별도의 OCR/캡션 필요 | | 주요 과제 | 복잡한 반응형 디자인 및 크로스 브라우징 이슈 | 실시간 생성에 따른 지연(Latency) 및 비용 문제 |

구현 가이드: PyTorch를 활용한 인터랙티브 뷰 생성 시뮬레이션

Generative Interface의 개념을 실제로 구현하기 위해서는 실시간 추론(Inference) 속도가 중요합니다. 이를 위해 diffusers 라이브러리와 PyTorch를 활용하여, 사용자의 클릭(좌표)에 따라 이미지의 일부를 수정(인페인팅)하거나 확대하는 간단한 프로토타입 코드를 작성해 보겠습니다. 실제 제품에서는 Video Diffusion 모델을 사용하지만, 여기서는 개념 이해를 위해 Stable Diffusion의 Inpainting 기능을 응용한 예시를 보여드립니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

import torch
from diffusers import StableDiffusionInpaintPipeline
from PIL import Image
import numpy as np

# 1. 모델 로드 (GPU 가속 활성화)
device = "cuda" if torch.cuda.is_available() else "cpu"
pipe = StableDiffusionInpaintPipeline.from_pretrained(
    "stabilityai/stable-diffusion-2-inpainting",
    torch_dtype=torch.float16
).to(device)

def generate_next_view(current_image_pil, click_coord, prompt="detailed view, high resolution"):
    """
    현재 이미지와 클릭 좌표를 받아 다음 뷰를 생성하는 함수.
    실제 Generative Interface에서는 'Inpainting' 대신 'Video Prediction' 로직이 사용됩니다.
    """
    width, height = current_image_pil.size
    x, y = click_coord
    
    # 2. 클릭 영역을 중심으로 마스크 생성 (관심 영역 정의)
    mask_image = Image.new("RGB", (width, height), "black")
    mask_size = 128  # 관심 영역의 크기
    # 간단한 사각형 마스크 생성 (실제로는 더 부드러운 형태 가능)
    numpy_mask = np.array(mask_image)
    numpy_mask[y:y+mask_size, x:x+mask_size] = 255 
    mask_image = Image.fromarray(numpy_mask).convert("L")

    # 3. 모델 추론
    # 클릭한 영역을 프롬프트에 맞게 새로운 픽셀로 채움
    with torch.autocast("cuda"):
        result = pipe(
            prompt=prompt,
            image=current_image_pil,
            mask_image=mask_image,
            guidance_scale=7.5,
            num_inference_steps=20
        )
    
    return result.images[0]

# 사용 예시 (시뮬레이션)
# current_view = Image.open("current_screen.png")
# next_view = generate_next_view(current_view, click_coord=(100, 100))
# next_view.save("generated_screen.png")

이 코드는 Generative Interface의 핵심인 **“Context-aware Generation(맥락 인식 생성)”**을 보여줍니다. 사용자가 클릭한 좌표를 마스크로 변환하여 모델에 전달함으로써, 모델이 전체 이미지의 맥락을 유지하면서도 해당 영역을 사용자의 의도(상세 보기)에 맞게 변경하도록 유도합니다. 실제 서비스에서는 이 프레임들이 초당 24~60장으로 연결되어 부드러운 영상처

출처: https://news.hada.io/topic?id=28820