나란히, 느티나무

40년 전, 수많은 손이 모여 한 그루 느티나무를 이뤘다. 그 표지를 처음 본 순간, 이것을 움직이게 만들고 싶었다.

"그늘을 크게 드리우는 큰 느티나무 한 그루를 이루기 위해 많은 사람들의 맑은 마음이 모였었다." 표지 뒷면에 적힌 이 한 문장이 오래 머물렀다. 느티나무는 우리 조상들이 향교나 사당 옆에 심었던 나무다. 학문을 논하는 자리, 그 곁에 항상 있었던 그늘.

나는 이 이미지를 들고 AI에게 물었다. 지금 시점에서, 이걸 코드로 비유하면 어떨까?

그런데 개발자의 언어로만 풀면 안 될 것 같았다. 이건 디자이너들의 잡지니까.

느티나무의 진짜 목적은 나무 자체가 아니라 그늘이었다. 웹사이트도, 코드도, 디자인도 마찬가지다. 만드는 것 자체가 목적이 아니라, 그것을 통해 누군가가 편안하게 머물고 무언가를 얻어가는 경험이 본질이다.

40년의 거리, 같은 그늘

1986년, 이 잡지를 만들려면 편집자, 일러스트레이터, 인쇄소 — 모든 손이 같은 장소, 같은 시간에 모여야 했다. 2026년, 나는 AI와 대화하며 이 표지를 움직이는 코드로 바꾸고 있다. 손이 모이는 방식은 완전히 달라졌지만, "맑은 마음이 모여 큰 그늘을 만든다"는 본질은 그대로다.

그래서 이것을 모션으로 만들기로 했다. 정지된 표지가 아니라, 실제로 자라나는 나무로.

뿌리 하나에서 시작해, 가지가 뻗고, 곁가지가 나오고, 그 끝에 작은 빛들이 맺힌다. 핑크에서 오렌지로 흐르는 배경 그라데이션은 원작 표지의 색감을 그대로 가져왔다. 나무 곁을 도는 작은 위성 원들은 이 프로젝트에 함께한 동료들이다. 물고기 파티클은 가지 사이를 유영하며, 나무에 숨결을 불어넣는다.

매 순간 조금씩 다른 형태로 자라나기 때문에, 같은 나무는 두 번 다시 태어나지 않는다. 40년 전 표지가 인쇄된 순간 영원히 고정된 것과 달리, 이 나무는 열 때마다 새로 태어난다.

어쩌면 이것이 원작이 말하고 싶었던 것일지도 모른다. 그늘은 고정된 것이 아니라 계속 넓어지는 것. 40년이 지나도 누군가 다시 손을 얹을 수 있다는 것.

마우스를 올려보면 또 다른 이야기가 시작된다. 커서가 지나간 자리에 D·E·S·I·G·N 글리프 블록이 남는다. 원작 표지에서 손마다 쥐고 있던 알파벳 블록이, 이번에는 당신의 손끝에서 흩뿌려진다. 나무는 스스로 자라지만, 그 위에 글자를 남기는 건 보는 사람의 몫이다.

위로 스크롤하면, 그 나무가 자라고 있다.

그런데 이 프로젝트, 디자인 도구를 하나도 안 켰다. 일러스트레이터도, 피그마도, 포토샵도. 디자이너가 표지를 만든다고 하면 보통 일러스트레이터부터 여는 게 순서인데, 이번에는 텍스트 에디터랑 브라우저, 그리고 AI랑 대화하는 것만으로 모션이랑 에세이, 인쇄용 표지까지 다 만들었다.

아마 이런 식으로 만들어진 표지를 받아본 사람은 없을 거다. 열면 움직이고, 스크롤하면 글이 나오고, QR 찍으면 나무가 자란다. 디자인 도구 없이 만든 디자인이라니, 좀 재밌지 않나?

class Branch {
  constructor(x, y, angle, length, depth = 0) {
    this.points = [{ x, y }];   // 시작점 하나
    this.growing = true;
    this.depth = depth;
    this.growthSpeed = 0.735 + Math.random() * 0.245;
  }
}

// 성장 중이면 새 포인트 추가
const newX = last.x + Math.cos(this.angle) * this.growthSpeed;
const newY = last.y + Math.sin(this.angle) * this.growthSpeed;
this.points.push({ x: newX, y: newY });

// 30% 확률로 새 가지 생성
if (this.depth < 2 && Math.random() < 0.3) {
  branches.push(
    new Branch(end.x, end.y, childAngle, childLength, this.depth + 1)
  );
}

const bgAngle = time * 0.002;  // 느리게 회전
bgGrad.addColorStop(0, '#E84B8A');
bgGrad.addColorStop(1, '#F06040');