OpenAI 초기 비주얼을 만든 '랜덤 그라디언트' 생성법의 진화

디자인 시스템에서 그라디언트는 오랫동안 배경 장식 정도로 취급돼 왔다. 하지만 프로그래밍으로 매번 다른 그라디언트를 만들어내는 기법은 브랜드 아이덴티티를 살아 있게 만드는 방법이자, 성능과 표현력 사이의 균형을 고민하게 만드는 흥미로운 엔지니어링 문제이기도 하다. 디자이너 저스틴 제이 왕은 자신이 OpenAI에서 일하던 시기를 포함해 수년간 실험해 온 랜덤 그라디언트 생성 기법들을 정리해 공개했다. 이 글은 단순한 회고가 아니라, 이미지 하나를 어떻게 가볍고 다양하게 만들 것인가에 대한 실무적 접근의 변천사에 가깝다.

코너 색상에서 하이트맵까지

시작은 단순했다. OpenAI의 초기 비주얼 아이덴티티는 2017년 벤 배리가 설계했고, 그의 첫 생성기는 네 모서리에 무작위 색을 배치한 뒤 그 사이를 보간하는 방식이었다. 필자는 2018년 합류한 뒤 좀 더 다양한 프로그래밍적 접근을 탐색했는데, 한 엔지니어 친구가 제안한 것이 하이트맵(heightmap)이었다. 하이트맵은 0에서 1 사이의 높이 값을 담은 격자 셀의 집합으로, 지형 데이터를 다룰 때 흔히 쓰이는 자료구조다.

필자는 Processing 환경에서 수정·평활화한 펄린 노이즈(Perlin noise)로 이 높이 값을 채우는 구현을 만들었다. 하이트맵은 보통 낮은 값은 어둡게, 높은 값은 밝게 매핑하는 흑백 이미지로 시각화되지만, 여기에 임의의 컬러 스케일을 입히면 이야기가 달라진다. 색상 정지점(color stop)의 위치, 색조, 채도, 명도를 다양하게 설정하고 그 사이를 부드럽게 보간해 랜덤 컬러 스케일을 만든 뒤, 이를 랜덤 하이트맵에 매핑하자 유기적이고 강렬한 그라디언트가 나왔다. 다만 이 결과물은 OpenAI의 아이덴티티에는 어울리지 않는다고 판단돼 실제 제품에는 쓰이지 않았다.

85바이트 이미지와 SVG의 재발견

실무적으로 가장 인상적인 대목은 성능 이야기다. 2019년 초 OpenAI 홈페이지는 화면을 가득 채운 선명한 그라디언트를 보여줬는데, 그 정체는 여섯 개의 색상 정지점을 담은 2×3 픽셀짜리 초소형 이미지였다. 브라우저가 이 작은 이미지를 확대하면서 자연스러운 그라디언트가 만들어졌고, 파일 크기는 고작 85바이트에 불과해 사실상 즉시 로드됐다. 이는 브라우저의 이미지 스케일링을 역이용한 영리한 방법이지만, 결정적인 한계는 정적이라는 점이었다.

약 1년 뒤 필자는 성능을 유지하면서도 동적으로 무작위화할 수 있는 SVG 기반 구현을 개발했다. SVG에는 색상 정지점을 담는 radialGradient 요소가 기본으로 있는데, 초점(focal point)을 옮기고 스케일·회전·기울이기·이동 같은 변환을 적용하면 다양성을 줄 수 있다. 이렇게 무작위 변환된 방사형 그라디언트를 여러 겹 쌓으면 더 복잡한 합성 그라디언트가 만들어진다. 2020년 초 OpenAI 홈페이지는 네 가지 색상 집합에서 뽑아 겹친 방사형 그라디언트를 사용했고, 페이지가 로드될 때마다 방문자 각자에게 고유한 일회성 그라디언트를 제공했다. 각 SVG는 화질 손실 없이 무한 확대되면서도 약 6KB에 불과했다.

AI 생성 모델이라는 새로운 슬롯머신

마지막 단계는 생성형 AI다. 필자와 배리가 처음 그라디언트를 실험하던 때는 존재하지 않았던 이미지 생성 모델이 이제 완전히 새로운 가능성을 열어준다. 필자는 2022년 4월 공개된 이후 즐겨 쓴다는 DALL·E 2를 이용해 질감이 있는 그라디언트 이미지를 만드는 세 가지 개념 증명을 소개한다. 공기처럼 몽환적인 느낌, 더 대담한 질감의 꽃 방향, 하늘에서 영감을 받은 편안한 방향이 그것이며, 크롭을 제외하면 모두 편집하지 않은 원본 출력이라고 밝혔다.

다만 필자 스스로 이 과정을 '정밀한 과학이라기보다 슬롯머신에 가깝다'고 표현한 점은 실무자가 주목할 지점이다. 결과는 예측 불가능하지만 충분히 반복하면 만족스러운 결과가 나온다는 것인데, 이는 제어 가능성과 재현성이 중요한 프로덕션 환경에서는 명백한 약점이다. 앞서 소개된 SVG 방식이 6KB의 결정론적이고 무한 확장 가능한 벡터 자산이었다면, AI 생성물은 래스터 이미지이자 결과를 통제하기 어렵다는 근본적 차이가 있다.

결국 이 글이 실무자에게 남기는 시사점은 하나의 정답이 아니라 제약과 목적에 맞는 도구 선택이다. 코너 색상 보간, 하이트맵과 노이즈, 픽셀 확대 트릭, 겹쳐 쌓은 SVG 방사형 그라디언트, 그리고 생성형 모델까지 각 기법은 파일 크기, 동적 다양성, 화질, 제어 가능성이라는 축에서 서로 다른 균형점을 가진다. 필자가 '제약이 오히려 창의성을 연다'고 정리한 것처럼, 브랜드 자산을 프로그래밍적으로 생성하려는 팀이라면 먼저 자신이 지켜야 할 제약이 무엇인지부터 규정하는 편이 도구를 고르는 지름길이 될 것이다.