알짜게시판

Y2K 감성의 UI를 만들려고 이미지 생성 AI를 여러 가지 써 보면서 가장 먼저 느낀 점이 하나 있다. 같은 내용을 입력해도 프롬프트를 어떻게 구성하느냐에 따라 결과가 꽤 달라진다는 점이다.

특히 모바일 UI, 웹 인터페이스, 픽셀 그래픽, 장식용 오브젝트처럼 목적이 다른 작업은 하나의 프롬프트로 해결하기 어렵다. 그래서 작업 목적에 맞는 템플릿을 따로 만들어 두면 결과를 반복해서 사용할 때 편했다.

모바일 앱 UI는 화면 구성 요소를 함께 설명해야 결과가 안정적이다

모바일 UI를 생성할 때는 색감만 설명하면 원하는 화면이 나오지 않는 경우가 많았다.

버튼, 아이콘, 카드, 위젯처럼 실제 인터페이스를 구성하는 요소를 함께 적어야 AI가 레이아웃까지 이해하는 모습을 볼 수 있었다.

사용한 프롬프트는 아래와 같다.

UI UX design of a mobile app, Y2K aesthetic, bubblegum pastel color palette, soft pink, baby blue, mint green, lavender, translucent glassmorphism containers, chunky 3D glossy buttons, pixelated icons, rounded sans-serif typography, early 2000s tech nostalgia style, clean layout, high resolution, soft editorial lighting, UI/UX concept --ar 9:16 --v 6.0

여기서 자주 사용하는 표현이 translucent glassmorphism containers다. 반투명한 유리 느낌의 패널을 만들 때 도움이 된다.

또 하나는 chunky 3D glossy buttons다. 초기 스마트폰이나 MP3 플레이어에서 보던 입체 버튼 느낌을 표현하기 좋다.

레트로 데스크톱 UI는 윈도우 구조를 먼저 만들어 준다

웹 화면을 만들 때는 모바일 UI와 접근 방식이 조금 달랐다.

Windows 98이나 Windows 2000처럼 여러 개의 창이 겹쳐 있는 화면을 먼저 만들고, 그 위에 Y2K 스타일을 입히는 방식이 결과가 자연스러웠다.

사용한 프롬프트는 다음과 같다.

Website user interface design, retro Y2K desktop style, chunky computer windows with thick beveled frames, soft pastel background gradient, vaporwave elements, floating 3D music widget, cute pixel stickers, stars and hearts motifs, pearly textures, high contrast, clean negative space, 2000s naive futurism --ar 16:9 --stylize 250

thick beveled frames는 예전 운영체제 특유의 두꺼운 입체 테두리를 표현하는 키워드다.

naive futurism은 당시 디자인에서 자주 보이던 낙관적인 미래 이미지를 만드는 데 도움이 된다.

다마고치 스타일은 LCD 질감을 함께 지정하는 편이 좋다

픽셀 그래픽을 만든다고 해서 단순히 pixel art만 넣으면 원하는 분위기가 나오지 않을 때가 있다.

Y2K 장난감 특유의 감성을 원한다면 LCD 화면 자체를 함께 설명하는 편이 결과가 안정적이었다.

사용한 프롬프트는 아래와 같다.

90s Y2K Tamagotchi LCD screen style interface, cute 8-bit pixel art character and icons, lovely pastel LCD color palette of cream pink, mint, and lavender, dot matrix texture, flat screen expression, status bars, battery indicator, pixel text layout, nostalgic early internet game UI --ar 1:1

dot matrix texture는 액정 특유의 도트 질감을 표현할 때 사용한다.

status bars, battery indicator처럼 실제 게임기의 UI 요소를 함께 넣으면 화면 구성이 조금 더 자연스럽게 만들어지는 경우가 많았다.

UI 장식용 그래픽은 배경보다 오브젝트 자체를 설명한다

버튼 주변에 넣을 하트나 별, 크롬 장식처럼 UI 에셋을 만들 때는 화면 전체를 설명할 필요가 없다.

필요한 오브젝트만 나열하는 편이 활용하기 쉬운 결과를 얻을 수 있었다.

사용한 프롬프트는 다음과 같다.

A set of Y2K aesthetic 3D graphic elements for UI design, isolated on a clean seamless soft pink backdrop, liquid metallic chrome material, glossy iridescent finish, butterfly clips, glossy hearts, stars, tribal shapes, 2000s pop star energy, high detail, clay render style --ar 16:9

liquid metallic chrome은 액체처럼 반사되는 크롬 재질을 표현한다.

glossy iridescent finish는 오로라처럼 여러 색이 비치는 표면을 만드는 데 자주 사용하는 표현이다.

원하는 색감이 나오지 않을 때는 키워드 위치도 영향을 준다

파스텔 계열이라고 해도 원하는 색이 항상 먼저 반영되는 것은 아니었다.

조금 더 진한 핑크를 원한다면 프롬프트 앞부분에 neon bubblegum pink를 추가하는 방식이 도움이 됐다.

색상 키워드는 뒤보다 앞에 배치할 때 우선순위가 높게 반영되는 경우가 있었다.

같은 프롬프트라도 색상 표현 하나만 바꿔도 전체 분위기가 달라지는 모습을 자주 볼 수 있었다.

Midjourney에서는 스타일 파라미터도 함께 조절해 본다

Midjourney를 사용할 때는 프롬프트 내용뿐 아니라 파라미터도 결과에 영향을 준다.

그래픽 디자인처럼 깔끔한 결과를 원할 때는 아래 옵션을 함께 사용하는 경우가 많았다.

--style raw

이 옵션을 추가하면 AI 특유의 과장된 회화 스타일이 줄어드는 편이다.

UI 디자인이나 그래픽 소스를 만들 때는 조금 더 정돈된 형태로 생성되는 경우가 많았다.

작업 목적에 맞는 프롬프트를 나눠 두면 반복 작업이 편해진다

Y2K 스타일이라고 해도 모바일 앱, 데스크톱 UI, 픽셀 인터페이스, 장식용 그래픽은 필요한 키워드가 서로 다르다.

처음부터 하나의 긴 프롬프트로 해결하기보다 작업 목적에 따라 템플릿을 따로 만들어 두는 편이 반복 작업에서 훨씬 편했다.

필요한 키워드만 조금씩 바꾸면 비슷한 분위기를 유지하면서도 새로운 UI와 그래픽 소스를 계속 만들어 낼 수 있었다.