본문으로 건너뛰기
DVERSE/ DESIGN REFERENCE

DVERSE DESIGN REFERENCE · 2026.10.17

Same matter.New form.

디자인 탭의 아홉 원본을 하나의 물질로 만들었습니다.

색, 활자, 시간, 공간, 렌즈, 수렴, 판단, 컷, 관계. 같은 65,536개의 입자가 장마다 형태를 바꿉니다. 대상은 그대로이고, 보는 방식만 달라집니다.

FORM 04 · Space — LOUPE Beyond
SCROLL 01 LIGHT

CHAPTER 01 · REA MOTION LAB

Light

빛은 하나로 들어옵니다.

일곱 단계의 중립색이 읽는 빛을 만들고, 의미를 가진 여섯 색은 그 빛에서 갈라집니다.

01하나로 들어오는 빛

FROM REA Motion Lab MatterField · spectrum

READING LADDER 읽기 사다리

SIGNAL#FF5A2A

  1. 6.75:1 AAVOID #000000
  2. 6.37:1 AACANVAS #0A0A08
  3. 6.08:1 AASURFACE #11110E
  4. 5.65:1 AARAISED #1A1915
  1. 7.73:1 AAAMUTED #AAA18E
  2. 9.04:1 AAASECONDARY #B5AF9C
  3. 16.49:1 AAAINK #EFEADC

CHAPTER 02 · REA · LOUPE

Type

제목과 수치는 모노 800으로.

같은 입자가 세 서체의 글자가 됩니다. 기준선·대문자 높이·시각 중심은 실제 글꼴에서 잰 값이고, 직접 입력한 단어도 같은 입자로 다시 씁니다.

0/10
Face
JetBrains Mono 800
Metrics
6 sizes · 13 → 168px
Size
0px · 5자

FROM LOUPE Deep Dive MatterField · glyphs

JetBrains Mono 800로 “LOUPE”를 표시합니다.

CHAPTER 03 · MOTION SCORE

Time

점이 촘촘하면 느린 순간입니다.

네 곡선을 같은 시간 축에 놓고 60fps 한 프레임마다 점을 찍었습니다. 점 사이가 벌어진 구간이 빠르게 움직이는 구간입니다.

1500ms
travel · 입자 형태 전환의 이동
Curve
travel · cubic-bezier(.65, 0, .35, 1)
Duration
1500ms · 91 frames @60fps
Stagger
glyph 18 · converge 32 · max 320ms

FROM REA Motion Lab MatterField · curves · sceneMotion

CHAPTER 04 · LOUPE BEYOND · SPACE

Space

하나의 대상을 멀리서 봅니다.

대상이 사라졌다가 새로 생기지 않습니다. 같은 9,000개의 입자가 궤도에서 지형으로, 지형에서 나선 구조로 이동합니다. 스크롤하거나 직접 고르세요.

01전체를 바라보기

Form
ORBIT
Travel
1500ms · (.65, 0, .35, 1)
Spin
0.09 rad/s · tilt 0.22

FROM LOUPE Beyond · 피안 MatterField · orbit / terrain / structure

큰 글자는 자기 UTF-8 바이트로 채워져 있습니다. 화살표로 글자를 옮기고 Enter로 고정, Escape로 해제합니다.

CHAPTER 05 · LOUPE DIRECTOR’S CUT · LENS

Lens

바이트로 그린 글자를 렌즈가 읽습니다.

큰 글자는 자기 UTF-8 바이트로 채워져 있습니다 (‘근’ = EA B7 BC). 렌즈를 대면 실제 글자와 기준선, 코드 포인트, 비트가 보입니다. 글자를 누르거나 Enter로 고정하면 06 TRACE가 같은 글자를 비트로 분해합니다.

2/12
Glyph
‘근’ U+ADFC
UTF-8
EA B7 BC · 3B
한글 조합
ㄱ + ㅡ + ㄴ0xAC00 + (0×21 + 18)×28 + 4

FROM LOUPE Director’s Cut HexLens · hexwall

CHAPTER 06 · LOUPE DEEP DIVE · TRACE

Trace

글자는 먼저 비트로 저장됩니다.

‘근’의 UTF-8을 입자가 직접 해독합니다. 1은 빛기둥, 0은 고리, 네모 친 비트는 길이를 알리는 머리입니다. 스크롤하거나 단계를 고르세요.

Bytes
EA B7 BC3바이트
Bits
머리 1110, 값 1010 / 머리 10, 값 110111 / 머리 10, 값 111100
Code point
1010110111111100₂ = U+ADFC
Glyph
‘근’ㄱ + ㅡ + ㄴ

FROM LOUPE Deep Dive trace · LIFT ladder

CHAPTER 07 · ISSUE LINKER

Converge

이슈는 여섯 군데에 흩어져 있습니다.

에러는 Sentry에, 업무는 사내 게시판에, 검수는 Jira에. 모으면 같은 이슈가 제 빛을 데리고 한 목록으로 옮겨 갑니다. 출처와 상태는 그대로입니다.

01여섯 서비스, 여섯 화면

Records
12 / 12 · 6 sources
FLIP
800ms · lock · 32ms
Form
CLUSTERS · 궤도 6

FROM Issue Linker Motion Lab ConvergenceFlow · clusters → inbox

  1. 01 · ISSUE이슈 선택6개 서비스 어디서든자동 ✓
  2. 02 · TARGET대상 확인폴더 · 브랜치 · 미커밋자동 ✓
  3. 03 · RUN실행claude -p · CLI와 같은 설정자동 ✓
  4. 04 · COMMIT로컬 커밋diff·메시지 확인 후 버튼● 버튼 대기
  5. 05 · PUSH·MRpush · MR타겟·포함 커밋 확인 후 버튼잠김 · 앞 관문 먼저
HUMAN GATE · 1 / 2 로컬 커밋
HUMAN GATE · 2 / 2 push · MR잠김 · 앞 관문 먼저
06 · MERGE머지사람

앱은 MR을 머지하지 않습니다.

you@issue-linker — 작업 대화SIMULATION · 실제 실행 아님

↑↓ 선택 · Enter 실행 · Esc 닫기

CHAPTER 08 · ISSUE LINKER

Gates

자동 실행 사이, 사람의 선택.

실행까지는 흐르고, 커밋과 push · MR은 사람이 엽니다. 머지는 앱이 하지 않습니다.

사람 관문 0 / 2 열림 · 머지 0

FROM Issue Linker Deep Dive HandoffFlow · CommandDeck · stream

CHAPTER 09 · DIRECTOR’S CUT

Cut

이슈는 여섯 군데에 흩어져 있었다.

Issue Linker의 6주를 네 컷으로 편집했습니다. 컷을 고르면 같은 입자의 필름이 게이트를 지나갑니다.

연출 · 프레임 속 점과 글자는 실제 이슈나 화면이 아닙니다

FROM Issue Linker Director’s Cut SequenceStage · film

DIRECTOR’S CUT · ISSUE LINKER컷 1/4 · 분산

SC 01 / 04TC 2026·09·03

에러·이슈·업무·문서·검수·로그가 여섯 화면에 있었습니다. 화면도 토큰도 필터도 제각각이었습니다.

DIRECTOR’S NOTE정작 고치는 곳은 또 따로인 내 PC의 저장소였다. 9월 3일, 첫 커밋.

CHAPTER 10 · BRAIN · RELATION

Relation

이 시스템이 스스로를 그립니다.

가운데가 시스템, 바깥으로 기반 → 패턴 → 컴포넌트 → 원본. 노드를 고르면 그 사슬만 밝아지고 나머지는 물러납니다.

  • 기반 3
  • 패턴 7
  • 컴포넌트 16
  • 원본 9
  • 구현 관계
  • 출처 관계
목록에서 고르기 35개 노드 · 66개 관계
기반
패턴
컴포넌트
원본

FROM Brain 그래프 갤러리 MatterField · rings

CHAPTER 11 · ORIGINALS · 9

Source

아홉 원본, 세 개의 별자리.

REA · LOUPE 다섯, Issue Linker 셋, Brain 하나. 별의 밝기는 이 시스템이 그 원본에서 가져간 양입니다.

FROM 디자인 탭 · 원본 9개 MatterField · constellation → singularity

별을 고르면 원리 · 추출한 것 · 원본 링크가 열립니다.

REA · LOUPE5

렌즈로 파일을 읽는 개인 프로젝트

Issue Linker3

이슈를 한 화면에 모으는 작업 도구

Brain1

관계를 동심원으로 탐색하는 그래프
이슈 · 프로젝트 · 이력서 설명 — 디자인 시스템 기준

CHAPTER 12 · EXEMPLAR

Explain

이슈와 이력은 동작하는 제품 화면으로 설명합니다.

이슈 · 프로젝트 · 이력서를 설명하는 페이지는 제품으로 보는 이력서(/submit/story)를 바닥으로 삼습니다. 장마다 재구성한 제품 화면이 주인공이고, 데모 커서가 문장이 말하는 일을 직접 하며, 스크롤이 카메라가 됩니다. 새 페이지는 그 위에 자기만의 장면을 더합니다.

대표 예시 열기
주인공
장마다 재구성한 제품 화면 하나
증거
기기 속 밝은 제품 화면 · 데모 커서
근거
단계마다 원문 한 줄
조작
이전 / 지금 규칙 · 직접 실행 · 카드 점프
수치
57줄 = 점 57개 · 측정 전은 비움

FROM 제품으로 보는 이력서 Explain story · 설명형 스크롤