실험실 레퍼런스 확장과 조합 시뮬레이터

배경

모션 레퍼런스는 이름을 몰라 요청하기 어려운 움직임을 데모로 보여 주고, 그 이름이 포함된 요청 문장을 복사하게 하는 화면이다. 「부드럽게 나타나게」보다 「스태거」라는 한 단어가 AI 에게 더 정확하게 전달된다는 점에서 출발하였다.

같은 문제는 움직임 밖에도 있다. 「카드를 보기 좋게 늘어놓아 줘」보다 「벤토 그리드」가, 「요즘 느낌으로 세련되게」보다 「글래스모피즘」이, 「감성적인 일러스트로」보다 「리소그래프」가 의도를 더 좁게 지정한다. 화면 배치, 시각 스타일, 그림체, 글꼴에도 각각 이름이 있다.

그래서 실험실에 레퍼런스 네 개와 조합 시뮬레이터 하나를 추가하였다.

레퍼런스 구성

레퍼런스	항목	데모	요청 문장의 대상
레이아웃	31	회색조 와이어프레임	코딩 AI
UI 스타일	38	같은 화면 하나에 스타일만 적용	코딩 AI · 디자인 생성 AI
화풍	18	같은 SVG 장면 하나에 화풍만 적용	이미지 생성 AI
타이포그래피	24	같은 견본에 글꼴만 적용	코딩 AI · 디자인 생성 AI

사용 방법은 모션 레퍼런스와 같다. 카드에서 데모를 보고 이름을 확인한 뒤 프롬프트 복사를 누르면, 영문 이름 · 한국어 이름 · 요청 문장이 한 줄로 복사된다. 카드 그림을 누르면 상세 화면이 열리고, 조건을 덧붙이는 수식어 칩을 고를 수 있다.

레이아웃 레퍼런스

홀리 그레일, 벤토 그리드, 마소너리, F 패턴처럼 화면 배치의 이름을 모았다. 페이지 골격 · 첫 화면 · 콘텐츠 배열 · 시선과 구성 · 업무 화면으로 분류하였다.

데모는 회색조 와이어프레임이고, 이름이 가리키는 영역에만 색을 칠한다. 사이드바 레이아웃이면 사이드바에만, 풀블리드이면 화면 끝까지 닿는 이미지 띠에만 색이 있다.

업무 화면 7종(고정 열 표, 조회 조건과 결과 그리드, 하단 고정 작업 바 등)만 움직인다. 「틀은 고정되고 안쪽만 스크롤된다」는 성질은 정지 그림으로 전달되지 않기 때문이다.

[Bento grid layout · 벤토 그리드] 크기가 서로 다른 칸들을 격자 위에 도시락처럼 빈틈없이 맞물리게 배치하고, 가장 중요한 내용을 가장 큰 칸에 넣어 줘.

UI 스타일 레퍼런스

플랫, 뉴모피즘, 글래스모피즘, 네오 브루탈리즘, Y2K, 프루티거 에어로처럼 화면의 시각 스타일을 모았다.

모든 데모는 같은 화면 하나(머리줄 · 제목 · 입력란 · 버튼 · 카드)에 스타일만 적용한 것이다. 뼈대가 같아야 스타일끼리 무엇이 다른지가 드러난다. 수식어 칩으로는 밝은 배경과 어두운 배경, 은은한 적용과 과감한 적용, 화면 전체와 버튼 · 카드 같은 부품 한정을 고를 수 있다.

특정 회사 제품 이름이 붙은 스타일은 일반명으로 기재하였다.

화풍 레퍼런스

라인 아트, 로우폴리, 아이소메트릭, 하프톤, 리소그래프, 목판화처럼 그림체의 이름을 모았다. 도형 · 선, 인쇄 · 판화, 디지털 · 장식으로 분류하였다.

데모는 블로그 이름에 맞춰 복숭아 · 컵 · 창문이 있는 탁자 장면 하나를 SVG 로 직접 그리고, 화풍마다 도형 · 선 · 패턴 · 필터만 변경하였다. 하프톤은 망점 패턴, 듀오톤과 픽셀 아트는 SVG 필터, 리소그래프는 어긋나게 겹친 두 잉크 층으로 표현한다.

[Risograph print · 리소그래프] 형광 분홍과 파랑 두 가지 잉크만 쓰고, 잉크가 겹치는 곳은 섞이며 판이 살짝 어긋난 거친 리소그래프 인쇄물로 그려 줘.

타이포그래피 레퍼런스

지오메트릭 산세리프, 네오 그로테스크, 디도네 세리프, 고정폭, 손글씨, 한글 명조와 고딕, 그리고 조판 방식과 글꼴 짝짓기를 모았다.

데모는 같은 견본(큰 글자 · 제목 · 본문)을 글꼴만 변경하여 그린다. 글꼴 계열의 차이는 운영체제에 설치된 글꼴로는 기기마다 다르게 보이므로, 오픈 라이선스 글꼴 17종을 사이트에서 직접 제공한다. 이 글꼴은 타이포그래피 화면에서만 불러오고, 블로그의 다른 페이지에는 포함하지 않는다.

계열 이름만으로는 AI 가 고르는 글꼴의 폭이 넓다. 그래서 요청 문장에는 대표 글꼴 이름을 함께 명시하였다. 화면에 실제로 쓴 글꼴을 앞에, 널리 알려진 글꼴을 뒤에 기재한다.

[Neo-grotesque sans-serif · 네오 그로테스크] Inter 나 Helvetica 같은 네오 그로테스크 산세리프로, 획 굵기가 고르고 개성을 드러내지 않는 중립적인 글자를 써 줘.

조합 시뮬레이터

실제로 화면을 요청할 때는 배치와 스타일을 함께 지정하는 경우가 많다. 조합 시뮬레이터는 레이아웃 하나에 UI 스타일 하나를 적용한 결과를 한 장으로 보여 준다.

위쪽 두 선택 상자에서 레이아웃과 UI 스타일을 고르고, 아무거나를 누르면 무작위 조합이 표시된다. 아래 수식어 칩은 UI 스타일 레퍼런스의 것과 같다. 복사되는 요청 문장은 배치와 스타일을 줄 단위로 구분한다. 결과물에서 한쪽만 수정을 요청하기 쉽게 하기 위함이다.

아래 레이아웃으로 화면을 배치하고, 아래 시각 스타일을 입혀 줘.
- 레이아웃: [Dashboard app shell · 대시보드 셸] 왼쪽에 아이콘 내비게이션, 위에 검색과 계정 메뉴가 있는 상단 바를 고정하고, 남은 영역에 지표 카드와 표를 배치해 줘.
- 스타일: [Neo-brutalism · 네오 브루탈리즘] 노랑 · 분홍 · 연두 같은 원색 면에 두꺼운 검정 테두리와 흐림 없이 어긋난 검정 그림자를 붙인 네오 브루탈리즘으로 만들어 줘.

고른 조합은 주소에 기록된다(/lab/compose?layout=…&style=…). 그 주소를 공유하면 같은 조합이 그대로 열린다.

설계 판단

데모는 모두 직접 작성

외부 이미지나 스크린숏은 쓰지 않았다. 모든 데모는 CSS 와 SVG 로 직접 작성하였다. 저작권 문제를 피하는 목적도 있지만, 그보다 같은 뼈대 위에서 한 가지 요소만 변경해야 비교가 성립하기 때문이다. 서로 다른 사이트의 캡처를 나란히 놓으면 스타일의 차이와 콘텐츠의 차이가 구분되지 않는다.

레퍼런스 엔진의 공통화

모션 레퍼런스의 화면 구조(분류 탭 · 검색 · 상세 화면 · 프롬프트 조립 · 분류별 주소)를 레퍼런스마다 복사하면 같은 코드가 다섯 벌이 된다. 그래서 먼저 이 구조를 공통 엔진으로 분리하고, 각 레퍼런스는 항목 데이터와 데모만 가지도록 하였다.

그 결과 레퍼런스마다 다른 점만 설정으로 남았다. 상위 영역 탭의 유무, 움직이는 데모와 정지 데모의 구분, 수식어 칩의 종류가 그것이다. 정지 데모에는 재생 · 멈춤 버튼이 표시되지 않는다.

---

바로 가기: 실험실