해파리 랩을 열면 사무실을 헤엄쳐 다니는 우리 마스코트를 만나게 됩니다. 뒤로는 구슬 같은 촉수가 늘어져 있고, 바닥에는 색색의 빛 웅덩이가 비칩니다. 스프라이트처럼 보이지만, 페이지가 실행되는 동안 처음부터 그려집니다.
갓의 형태, 얼굴, 촉수, 픽셀 입자감, 빛남은 모두 작은 매개변수 집합에서 나옵니다. 각각은 슬라이더로 노출되어 있어서, 이 글은 랩에서 직접 만져볼 수 있는 컨트롤을 따라갑니다.
- 갓은 행 단위로 계산됩니다. 다섯 가지 갓 형태는 다섯 가지의 서로 다른 너비 곡선을 사용하고, 얼굴은 눈 하나당 1~3픽셀만 있으면 됩니다.
- 세계는 뷰포트의 4분의 1 크기 캔버스에 렌더링된 뒤, 스무딩 없이 다시 늘려 그려집니다.
- 빛남은 1/16 축척의 라이트 맵에서 나오며, 제곱 감쇠, 단계별 광량, 4×4 디더 행렬을 사용합니다.
여기 있는 모든 그림은 랩에서 찍은 스크린샷입니다. 전부 같은 복숭아색 해파리를 사용했고, 작성자의 손그림 얼굴 프리셋을 적용했습니다. 글을 위해 따로 목업한 것은 없습니다.
1. 캐릭터는 함수다
픽셀 아트 캐릭터는 보통 이미지 편집기에서 시작합니다. 우리 것은 질문 하나에서 시작했습니다. “해파리”를 가장 작게 묘사하면서도, 누군가 자기 해파리를 내 것과 다르게 만들 수 있게 하려면 무엇이 필요한가?
답은 너비 곡선이었습니다. 갓은 위에서 아래로 한 행씩 그려지고, 벨, 돔, 블롭, 랜턴, 드롭릿 사이에서 달라지는 유일한 것은 각 행의 너비를 알려주는 함수입니다. 돔은 부드러운 어깨와 함께 빠르게 벌어지고, 블롭은 가운데가 가장 넓고 양 끝이 오므라들며, 랜턴은 처음 6분의 1에서 벌어지고 마지막 5분의 1에서 오므라듭니다. 드롭릿은 약 4분의 3 지점에서 최대 너비에 도달한 뒤 좁아지고, 평범한 벨은 곧게 퍼집니다.
곡선 아래에는 작은 규칙 두 가지가 있습니다. “둥글기” 슬라이더(1–4)는 왕관이 퍼지는 데 몇 행이 걸리는지 정합니다. 또한 모든 행의 너비는 홀수입니다. 이 중심 열은 들리는 것보다 중요합니다. 눈과 입이 반 픽셀 어긋나지 않고 정확히 가운데에 놓일 수 있기 때문입니다.
여기서부터 나머지 몸통이 따라옵니다. 너비, 상단 너비, 높이, 둥글기, 납작함이 다섯 개의 슬라이더입니다. 형태가 저장되는 대신 계산되기 때문에, 갓은 변형될 수도 있습니다. 끌어당기면 잡은 행이 커서에서 먼 행보다 더 많이 기웁니다. 이 단일 규칙이 딱딱한 카드가 아니라 부드러운 고무처럼 느껴지게 만듭니다.
회전도 같은 방식으로 처리되지만 거꾸로입니다. 픽셀을 앞으로 회전시키면(구멍이 생길 수 있음) 대신, 렌더러는 회전된 경계 상자를 순회하며 각 화면 셀을 갓 공간으로 역매핑하고 “이것이 r행 안에 있는가?”를 묻습니다. 최근접 이웃, 안티앨리어싱 없음이므로 기울어진 해파리도 똑바로 선 해파리만큼 선명하게 유지됩니다.
얼굴
눈은 갓 높이의 54%에 위치하고, 간격은 갓 너비의 18%입니다. 이 두 비율이 전체 레이아웃 시스템입니다. 표정은 그다음 어떤 1~3픽셀이 켜지는지일 뿐입니다. 점, 대시, ^, 또는 점을 한 픽셀 위나 안쪽으로 민 것. 궁금함은 한쪽 눈이 다른 쪽보다 살짝 높은 것입니다. 막힘은 두 눈이 코 쪽으로 밀린 것입니다. 졸림은 두 개의 대시입니다. 어지러움(850ms 안에 세 번의 급격한 회전으로 발동)은 두 개의 넓은 대시와 흔들림입니다.
얼굴을 살리는 것은 픽셀이 아니라 시선이 향하는 곳입니다. 눈은 몸에서 유일하게 자체적인 움직임 규칙을 가진 부분입니다. 갓을 잡아당기는 방향의 반대로 1픽셀 튀고, 키보드로 헤엄칠 때는 몸보다 먼저 회전 방향으로 향합니다. 입은 해파리가 말하거나 감정을 표현할 때만 나타나며, 말하는 동안에는 빠른 사인 곡선으로 열리고 닫힙니다. 이 중 어느 것도 애니메이션 프레임을 그릴 필요가 없었습니다.
촉수
구강 팔도, 촉수 스프라이트도 없습니다. 각 촉수는 Verlet 적분을 사용하는 사각 구슬의 사슬로, 갓의 28% 지점에 고정되며, 구슬을 “간격” 거리에 유지하기 위해 프레임당 세 번의 거리 제약 패스를 거칩니다. 물속처럼 느껴지게 만드는 것은 서로 다른 세 주파수의 사인파 세 개입니다. 느린 표류, 더 빠른 흔들림, 꼬리 쪽에 가중된 말림으로, 뿌리는 차분하게 유지되고 끝은 물결칩니다. 커서를 그 사이로 움직이면 촉수가 갈라지고 소용돌이치며, 멈추면 각자의 속도로 가라앉습니다.
촉수 슬라이더(개수 3–12, 세그먼트 4–18, 중력, 마찰, 장력, 흐름, 말림, 회피)는 직접 노출되어 있고, 네 가지 원클릭 “모션 프리셋”인 정지, 생동, 격렬, 표류은 그 여섯 숫자의 저장된 조합 네 가지에 불과합니다.
색상
기본으로 일곱 가지 삼색 팔레트가 제공됩니다. 갓, 촉수, 눈이며, 각각에 자유로운 색상 선택기도 있습니다:
| 팔레트 | 갓 | 촉수 | 눈 |
|---|---|---|---|
| 오션 | #8ae2ff | #8ae2ff | #303030 |
| 선셋 | #ffb38a | #ff8fc7 | #3a2a2a |
| 라임 | #b6f5a0 | #8ce6c0 | #26331f |
| 그레이프 | #c7a2ff | #a98cff | #2c2640 |
| 로즈 | #ff9ec4 | #ffc0dd | #3a2630 |
| 골드 | #ffe08a | #ffd06a | #3a3320 |
| 모노 | #cfd8e3 | #aab4c2 | #20242b |
종(bell)의 색상은 종의 색을 입히는 것 이상의 일을 합니다. 엔진은 이 색을 페이지의 액센트 변수에(그리고 촉수 색은 보조 액센트에) 기록하기 때문에, 여러분이 만드는 해파리에 맞춰 실험실 UI 전체의 테마가 바뀝니다. 검정, 흰색, 회색, 그리고 의미론적 빨강은 절대 바뀌지 않으며, 나머지 모든 것은 여러분을 따라갑니다. 그리고 3부에서 보게 되겠지만, 이 색은 여러분이 지니고 다니는 빛의 색이 되기도 합니다.
절차적 종으로 충분하지 않다면, 이를 끄고 6×6에서 28×28 그리드 위에 직접 그릴 수 있으며, 그 위에 최대 여덟 개의 커스텀 얼굴을 그릴 수 있습니다. 우리 팀원 중 열세 명이 정확히 그렇게 했고, 그들의 해파리는 이제 각자 고유의 몸체, 촉수 개수, 표정, 대사 대사를 지닌 NPC로 사무실 장면에 살고 있습니다.
2. 픽셀 룩은 해상도다
웹에서 “픽셀 룩”을 얻는 가장 흔한 방법은 전체 해상도로 렌더링한 뒤 후처리하는 것입니다 — 색을 스냅하고, 그리드 오버레이를 추가하고, 어쩌면 블러 처리 후 다시 양자화하기도 하죠. 우리는 정반대로 했습니다: 세계는 실제로 아주 작습니다. 창 크기의 4분의 1 크기인 캔버스에 그려지며 — 기본 배율에서 세계 셀 하나는 화면 픽셀 네 개입니다 — 브라우저에는 스무딩 없이 늘리라고 지시합니다.
엔진의 모든 드로우 콜은 팩된 32비트 색상 값을 그 작은 버퍼에 곧바로 기록합니다 — 종, 촉수 구슬, 지형 타일, 심지어 텍스트까지. 세계 레이어 어디에도 벡터 경로가 없으므로, 실수로 안티앨리어싱될 수 있는 것은 없습니다. 위치는 모든 앵커에서 셀 그리드로 반올림됩니다: 종 상단, 눈 줄, 각 지형 타일, 조명 그리드가 사용하는 카메라 오프셋까지.
이것은 “픽셀 크기” 슬라이더에 좋은 결과를 가져옵니다. 세계 셀 하나가 화면 픽셀 몇 개를 덮는지(4 × 0.7에서 4 × 1.6)를 바꾸기 때문에, 한 번의 동작으로 그림의 입자감과 해파리의 겉보기 크기를 모두 바꿉니다. 별도의 줌은 없습니다.
두 개의 캔버스와 실제 텍스트 한 겹
우리가 특히 애정하는 구조적 결정 하나: 세계는 두 개의 캔버스 사이에 HTML 레이어가 끼워진 형태입니다. 방 바닥과 제목은 아래쪽 캔버스에 그려집니다. 사무실 안에 있는 블로그 스타일의 글은 그 위에 놓인 평범하고, 선택 가능하며, 접근성 있는 HTML입니다. 위쪽 캔버스 — 물결, 아이템, 포털, 해파리 자체 — 는 건드리지 않은 모든 셀을 투명하게 남기므로, 텍스트는 빈 물을 통해 읽히지만 해파리는 그 위를 헤엄칩니다.
그 결과는 장면 위에 붙여넣은 듯한 텍스트가 아니라 장면 속에 가라앉은 듯한 텍스트입니다. 배경 캔버스는 또한 캐시됩니다: 카메라가 한 셀만큼 움직이거나 장면이 바뀔 때만 다시 그려집니다.
그라디언트가 아니라 디더
그림에 그라디언트가 필요한 곳 — 주로 조명에서 — 우리는 부드러운 보간 대신 정렬된 디더링을 사용합니다. 4×4 Bayer 행렬을 세계 좌표로 인덱싱하여 스크롤해도 패턴이 제자리에 있게 하고, 빛을 평평한 띠로 나눈 뒤 이음새를 흩뿌립니다. “빛 단계”는 슬라이더로 노출됩니다(2–8, 기본값 3). 2에서는 바닥이 두 색 목판화처럼 보이고, 8에서는 거의 매끄럽습니다. 3은 여전히 손으로 만든 느낌이 나는 지점입니다.
색 보정 — 전역 색조와 채도 끌어내리기 — 은 32×32×32 조회 테이블을 거치며, 그 부수 효과로 팔레트를 채널당 5비트로 조용히 양자화합니다. UI의 모든 미리보기 캔버스는 스무딩이 꺼져 있으며, 엔진이 CSS 블러를 사용하는 유일한 곳은 UI 전환 효과로, 세계에는 절대 사용하지 않습니다.
3. 발광은 빛의 장이다
빛나지 않는 해파리는 해파리가 아닙니다. 뻔한 구현 — 장면 위에 블렌딩된 부드러운 방사형 후광이나 블러 패스 — 은 첫날부터 배제되었습니다. 그것은 단단한 픽셀 그리드 위에서 잘못 보이는 매끄러운 서브픽셀 그라디언트를 만들어내기 때문입니다. 매끄러운 후광은 세계 위에 떠 있을 뿐, 세계에 속하지 않습니다.
그래서 발광을 그리는 대신, 우리는 방을 비춥니다. 모든 빛 — 해파리, 램프, 빛나는 아이템 — 은 캔버스 해상도의 4분의 1(화면의 16분의 1) 크기인 작은 라이트 맵에 (1 − d/r)² 감쇠로 찍힙니다: 물리적으로 정확하지는 않지만 부드럽고 저렴하며 조정하기 쉽습니다. 그런 다음 바닥과 가구는 얼마나 많은 빛이 닿는지에 따라 밝아지며, 같은 세 개의 평평한 단계와 같은 디더를 사용합니다. 두 개의 맵이 유지됩니다 — 하나는 바닥용, 다른 하나는 1.6배 더 넓은 반경을 가진 오브젝트용으로, 소품이 그 아래 땅보다 약간 더 큰 후광 안에 놓이게 합니다.
셰이딩 패스는 각 픽셀에 주변광과 라이트 필드를 곱하고 상한으로 클램프합니다. 그 상한 — 1.25, 즉 빛이 색을 자기 자신의 125%까지 밀어올릴 수 있고 그 이상은 안 된다는 뜻 — 이 전체 “블룸” 예산입니다. 발광의 약간 과다 노출된 핵이 여기서 나오며, 랜턴과 렌즈 플레어의 차이도 여기서 갈립니다.
놓치기 쉬운 구현 세부 사항 세 가지:
- 종의 색이 곧 빛의 색입니다. 장미색 해파리를 고르면 근처 바닥이 장미색으로 물들고, 같은 헥스 값이 실험실의 액센트 색을 갱신합니다.
- 색은 최대 채널로 정규화되므로, 어두운 남색 종도 방을 겨우 비추는 대신 완전한 강도의 남색 색조를 드리웁니다.
- 깜빡임은 8프레임마다 갱신됩니다. 완벽하게 매끄러운 반짝임보다 약간의 끊김이 이 픽셀 세계에 더 잘 어울립니다.
램프가 잘못 보이지 않게 하는 규칙이 하나 더 있습니다: 빛을 내는 모든 것은 조명을 받는 대상에서 제외됩니다. 빛 성분이 있는 아이템은 발광 마스크로 그려지고, 셰이딩 패스는 그 픽셀들을 그대로 통과시키므로 — 램프는 자기 자신의 주변광에 의해 어두워지지 않습니다.
조절 손잡이들
이 모든 것은 Scene → Light 패널에 노출되어 있습니다. 다음은 우리가 최종적으로 출시한 수치입니다:
| 컨트롤 | 범위 | 기본값 |
|---|---|---|
| 주변광 밝기 | 0.2 – 1 | 0.55 |
| 주변광 색상 | — | #6d8fae |
| 빛 단계 | 2 – 8 | 3 |
| 하이라이트 상한 | 1 – 1.5 | 1.25 |
| 해파리 발광 · 반경 | 8 – 80 | 32 |
| 해파리 발광 · 강도 | 0 – 1.5 | 0.6 |
| 해파리 발광 · 깜빡임 | 0 – 0.6 | 0.05 |
바닥은 레벨, 셰이더 매개변수 또는 빛 위치가 바뀔 때만 다시 셰이딩됩니다; 뷰포트 밖의 빛은 찍히기 전에 컬링됩니다; 그레이딩 테이블은 캐시됩니다. 실제로 세계 전체 — 배경, 물 시뮬레이션, 아이템, 촉수, 조명, 해파리 — 는 노트북에서 단일 애니메이션 프레임 안에 여유롭게 들어가며, 1440px 너비의 창이 가로로 360셀에 불과한 해상도에서 그렇습니다.
4. 움직임에 관한 몇 가지
엄밀히 외형에 관한 것은 아니지만 캐릭터가 어떻게 읽히는지를 형성하므로, 간단히:
- 키보드 추진력은 쌓였다가 감쇠하며, 프레임당 1셀 바로 아래로 제한됩니다. 속도는 종의 변형에도 영향을 주므로, 빠른 수영은 “해류”에 맞서 종을 눈에 띄게 눌러 찌그러뜨립니다.
- 휠 노치 하나는 키보드와 같은 속도에 임펄스를 가하며, 정상 상태 이동 1셀에 해당합니다.
- 카메라는 수영할 때는 느리게, 안정될 때는 더 빠르게, 드래그 후 1.6초 동안은 아주 느리게 따라가서 튕겨 돌아가지 않습니다.
- 수평 속도는 목표 기울기를 설정합니다. 뻣뻣하고 감쇠된 스프링이 이를 따라가며, 멈출 때 종이 살짝 오버슈트하게 합니다.
- 커서는 40px 이내에서 촉수 구슬을 밀어냅니다. 58px 이내에서는 꼬리 쪽에 가중치를 둔 소용돌이와 방사형 펄스도 더합니다.
- 이동하는 셀 두 개마다 2D 파동 시뮬레이션에 부드러운 펄스가 하나씩 더해집니다. 이 파동은 아이템을 발동시킬 수 있고, 아이템은 그 펄스를 다시 전달할 수 있습니다.
5. 캐릭터를 데이터로 만드는 이유
우리는 AI 캐릭터에 관한 이론에서 출발하지 않았습니다. 해파리 에디터에서 시작했고, 그러다 실용적인 이점을 발견했습니다. 캐릭터를 커스터마이즈 가능하게 만드는 바로 그 파라미터들이 캐릭터를 에이전트가 읽을 수 있게도 해준다는 점입니다.
파라미터는 에이전트가 사용하기 더 쉽습니다
스프라이트 시트는 모델에게 불투명합니다. 우리의 해파리는 약 서른 개의 숫자와 몇 개의 열거형으로 이루어져 있어, 프롬프트나 JSON 블롭, 또는 도구 호출에 담을 수 있을 만큼 작습니다.
- 에이전트는 파라미터를 읽고 사용자의 해파리가 어떻게 생겼는지 알 수 있습니다.
- 새로운 이미지를 생성하지 않고도 “나에게 긴 촉수를 가진 졸린 보라색 해파리를 만들어줘”를 프리셋으로 바꿀 수 있습니다. 팀원 각자의 NPC는 아트 에셋이 아니라 데이터 행입니다.
- 표정, 발광, 움직임은 런타임 상태이므로, 마스코트는 에이전트가 작업하는 동안 집중한 표정을 짓거나 혼란스러울 때 어지러운 표정을 지을 수 있습니다.
- 결과물이 여전히 같은 종류의 해파리처럼 보이면서도 파라미터는 폭넓게 달라질 수 있습니다.
이것이 AirJelly에게 유용한 부분입니다. 마스코트의 외형과 행동이 에이전트가 읽고 바꿀 수 있는 데이터이기 때문에, 마스코트는 에이전트의 몸 역할을 할 수 있습니다. 우리는 모델에게 불투명한 이미지를 편집해 달라고 요청할 필요가 전혀 없습니다.
우리가 여전히 픽셀(그리고 ASCII)을 좋아하는 이유
실용적인 이유가 있습니다. 픽셀 스프라이트는 팔레트 인덱스의 작은 격자이고, ASCII 아트는 이미 텍스트입니다. 둘 다 간결하게 묘사할 수 있고 셀 단위로 편집할 수 있습니다. 우리가 필요로 하는 정밀한 변경에는 16×16 스프라이트가 그림보다 모델이 즉흥적으로 바꿀 여지를 단순히 덜 남깁니다.
더 주관적인 이유도 있습니다. 우리는 단단한 격자를 좋아합니다. 격자는 기계가 만들었다는 점에 대해 정직하고, 1픽셀 실수는 종종 기묘하게 보이기보다 매력적으로 보입니다. 그런 톤은 여러분의 컴퓨터에 사는 AI에 관한 제품과 잘 어울립니다. AI 도구에서 터미널이 편안하게 느껴지는 이유이기도 할 것입니다.
그래서 우리가 도달한 지점은 이것입니다. 숫자로 묘사되고 격자 위에 그려지는 캐릭터. 결과적으로 레트로하게 보이지만, 유용한 부분은 사람과 에이전트 모두가 정밀하게 바꾸기 쉽다는 점입니다.
마지막으로 한 가지. 랩에서 마음에 드는 해파리를 조정했다면, 그 파라미터를 내보내 xiaohua@airjelly.ai로 보내주세요 — 사이트에 올리겠습니다. 이미 열세 마리가 사무실에서 살고 있고, 언제나 한 마리 더 들어갈 자리는 있습니다.