ChatGPT의 새로운 이미지 생성기로 UI를 만든 방법 (4o)

 

ChatGPT의 새로운 이미지 생성기로 UI를 만든 방법 (4o)

 

프롬프트, 연습 문제, 그리고 놀라운 점들

 

ChatGPT로 UI를 생성할 수 있을까요?

 

전에도 여러 번 테스트해 봤지만, 결과는 매우 실망스러웠습니다.

 

아래는 두 달 전 뉴스레터에 공유했던 예시입니다.

 

업그레이드 전 ChatGPT에서 생성한 결과입니다.

 

너무 만화 같아서 사용하기가 어려웠습니다.

 

하지만 지난주 OpenAI에서 대규모 업데이트를 출시했기 때문에 다시 시도해 보기로 했습니다.

 

제 프롬프트를 기반으로 훨씬 더 나은 UI 모형을 만들 수 있었습니다. 필요에 따라 다양한 디자인 옵션을 만들 수도 있었습니다.

 

ChatGPT에서 생성한 결과입니다.

 

오늘은 제가 실행한 실험, 사용한 프롬프트, 그리고 그 과정에서 얻은 몇 가지 놀라운 점과 교훈을 보여드리겠습니다.

 

자세히 살펴보겠습니다.

 

맥락

 

OpenAI는 기존 DALL·E 모델 대신 GPT-4o를 사용하여 ChatGPT에서 고품질 이미지를 생성할 수 있다고 발표했습니다.

 

GPT-4o는 지시를 더 잘 따르고 이미지 속 텍스트를 더 잘 렌더링합니다.

 

지난주 많은 사람들이 사진을 AI 아트로 변환하기 위해 GPT-4o를 사용해 보았고, 이것이 지브리 스타일의 아트 트렌드가 입소문을 탄 이유입니다.

 

저도 시도해 보았습니다.

 

ChatGPT를 통해 생성

 

하지만 온라인에서 흥미로운 아트들을 많이 보고 나서 이런 생각이 들었습니다.

 

제품 디자이너에게 실제로 유용한 UI를 생성하는 데 ChatGPT를 사용할 수 있다면 어떨까?

 

이렇게 실험이 시작되었습니다.

 

실험

 

1. 상세한 프롬프트 만들기

 

저는 ChatGPT를 사용하여 원하는 UI에 대한 상세한 프롬프트를 생성했습니다.

 

# Design a clean, modern mobile UI screen (iOS style) for an app titled "SkillVerse – Trending Micro-Courses". The layout should follow the structured sections below.
## 1. Status Bar (Top)
- **Style**: Standard iOS layout (top safe area)
---
## 2. Header Section
- **Centered Logo**: `SkillVerse`  
- **Font**: Medium weight, small size  
- **Color**: Blue text  
---
## 3. Featured Courses Carousel (Horizontally Scrollable)
- **Style**: Swipeable cards with rounded corners and soft shadow  
- **Cards**:  
  - **Card 1**  
    - Title: **Intro to Motion Design**  
    - Subtitle: *Starts Apr 2*  
    - Visual: Animation thumbnail  
  - **Card 2**  
    - Title: **Mastering Excel for Freelancers**  
    - Subtitle: *Starts Mar 31*  
    - Visual: Productivity icon  
---
## 4. Navigation Tabs
- **Tabs**:  
  - **Trending** (Active, **bold label** with **blue underline**)  
  - Recommended  
  - Enrolled  
  - Saved  
---
## 5. Filter Row
- **Filters (Dropdowns)**:  
  - **Past 7 Days** (Time-based)  
  - **All Topics** (Category)  
  - **All Levels** (Difficulty)  
---
## 6. Trending Courses List
- **Layout**: Vertical stack of repeatable course items:
  - **Left**: Rounded thumbnail  
  - **Center**:  
    - Course Title  
    - Level (e.g., Beginner, Intermediate, etc.)  
  - **Right**: Save Icon 
  - **Bottom**: Enrollment count + trend (e.g., 2.4k Enrolled, +12%)   
---
## 7. Bottom Navigation Bar
- **Tabs**:
  - **Home** (Active, highlighted color)  
  - Search  
  - Events  
  - Profile  
- **Style**:  
  - Labels underneath

 

# "SkillVerse – Trending Micro-Courses"라는 앱의 깔끔하고 현대적인 모바일 UI 화면(iOS 스타일)을 디자인하세요. 레이아웃은 아래 구조화된 섹션을 따라야 합니다.

 

## 1. 상태 표시줄(상단)

 

- **스타일**: 표준 iOS 레이아웃(상단 안전 영역)

 

---

 

## 2. 헤더 섹션

 

- **중앙 로고**: `SkillVerse`

 

- **글꼴**: 중간 두께, 작은 크기

 

- **색상**: 파란색 텍스트

 

---

 

## 3. 추천 코스 회전식 메뉴(수평 스크롤 가능)

 

- **스타일**: 모서리가 둥글고 그림자가 부드러운 스와이프 카드

 

- **카드**:

 

- **카드 1**

 

- 제목: **모션 디자인 소개**

 

- 부제: *4월 2일 시작*

 

- 비주얼: 애니메이션 썸네일

 

- **카드 2**

 

- 제목: **프리랜서를 위한 Excel 마스터링**

 

- 부제: *3월 31일 시작*

 

- 비주얼: 생산성 아이콘

 

---

 

## 4. 탐색 탭

 

- **탭**:

 

- **트렌딩** (활성, **굵은 레이블**, **파란색 밑줄**)

 

- 추천

 

- 등록

 

- 저장

 

---

 

## 5. 필터 행

 

- **필터(드롭다운)**:

 

- **지난 7일** (시간 기반)

 

- **모든 주제** (카테고리)

 

- **모든 수준** (난이도)

 

---

 

## 6. 트렌드 과정 목록

 

- **레이아웃**: 반복 가능한 과정 항목의 수직 스택:

 

- **왼쪽**: 둥근 썸네일

 

- **가운데**:

 

- 과정 제목

 

- 수준(예: 초급, 중급 등)

 

- **오른쪽**: 저장 아이콘

 

- **하단**: 등록 수 + 추세(예: 2.4k 등록, +12%)

 

---

 

## 7. 하단 탐색 모음

 

- **탭**:

 

- **홈** (활성, 강조된 색상)

 

- 검색

 

- 이벤트

 

- 프로필

 

- **스타일**:

 

- 아래 레이블

 

그런 다음 ChatGPT의 새 채팅 창에 붙여넣고 "생성" 아이콘을 클릭했습니다.

 

2. 코드 기반 UI 생성

 

놀랍게도 ChatGPT가 오른쪽에 추가 패널을 열어 Canvas 기능을 활성화했습니다. 그런 다음 코드 생성을 시작했습니다.

 

이 모습을 보니 Claude의 Artifact 기능이 떠올랐습니다.

 

ChatGPT 스크린샷

 

그런 다음 오른쪽 상단 모서리에 있는 "미리보기" 버튼을 클릭했습니다.

 

반응형 코드 기반 UI가 생성되었습니다.

 

ChatGPT 스크린샷

 

보기에는 좋았지만 Claude보다 덜 정확하고 세련되어 보였습니다.

 

3. 시각적 모형을 요청하세요

 

코드 기반 UI가 아닌 이미지(시각적 모형)를 제작하려고 했기 때문에 수정을 요청하는 후속 질문을 받았습니다.

 

Create a visual mockup instead.

 

시각적 모형을 만들어 주세요.

 

결과는 다음과 같습니다.

 

ChatGPT를 통해 생성

 

놀랍도록 훌륭했습니다. 특히 ChatGPT(DALL·E)가 이전에 생성했던 것과 비교하면 더욱 그렇습니다. 엄청난 업그레이드였습니다.

 

퀴즈: 위의 AI 생성 UI에서 오타를 몇 개나 찾을 수 있나요? :)

 

4. UI 축소 요청

 

UI는 보기 좋았지만 이미지가 잘려서 조금 불편했습니다. 그래서 다음과 같이 질문했습니다.

 

The top and bottom seem a bit cut off. Could you scale down the UI by about 20% to make it smaller overall?

 

상단과 하단이 약간 잘린 것 같습니다. UI 크기를 약 20% 정도 줄여서 전체적으로 더 작게 만들어 주시겠어요?

 

결과는 다음과 같습니다.

 

ChatGPT를 통해 생성

 

좋아 보이네요!

 

5. 디자인 옵션 생성 요청하기

 

그러다 보니 더욱 창의적인 아이디어가 떠오르기 시작했습니다. 여러 가지 디자인 옵션을 생성해 달라고 요청하면 어떨까 하는 생각이 들었습니다. 훨씬 더 도움이 될 것 같았거든요!

 

그래서 이렇게 글을 썼습니다.

 

Create three design options.
Use the same core content but vary the layout, UI elements, and visual emphasis according to the following descriptions:
Option 1. Bold & Engaging
- Prioritize visual impact and brand expression
Option 2. Functional & Fast
- Prioritize speed, clarity, and productivity
- Compact UI with smaller cards and dense information hierarchy
Option 3. Personalized & Warm
- Prioritize connection, trust, and personalization
- “For You” carousel with AI-curated course suggestions
- Social proof (avatars, badges, friend activity)
- Add a “Community” tab for peer-shared content

 

세 가지 디자인 옵션을 만드세요.

동일한 핵심 콘텐츠를 사용하되 다음 설명에 따라 레이아웃, UI 요소 및 시각적 강조점을 다르게 적용하세요.

옵션 1. 대담하고 매력적인 디자인

- 시각적 효과와 브랜드 표현 우선

옵션 2. 기능적이고 빠른 디자인

- 속도, 명확성, 생산성 우선

- 더 작은 카드와 조밀한 정보 계층 구조를 갖춘 컴팩트한 UI

옵션 3. 개인화되고 따뜻한 디자인

- 연결, 신뢰, 개인화를 우선시

- AI가 큐레이팅한 코스 추천을 제공하는 "For You" 캐러셀

- 소셜 증명(아바타, 배지, 친구 활동)

- 동료 공유 콘텐츠를 위한 "커뮤니티" 탭 추가

 

결과는 다음과 같습니다.

 

ChatGPT를 통해 생성

 

GPT-4o의 이미지 생성 개선에 다시 한번 놀랐습니다.

 

세 가지 옵션이 여전히 상당히 유사해 보이지만, 자세히 살펴보면 "검색" 아이콘, 소셜 증명, 카피와 같은 작은 디테일들이 각 버전을 서로 차별화하는 역할을 합니다.

 

하지만 결과는 분명 개선의 여지가 있었습니다. 예를 들어, 하나의 이미지에 많은 정보가 담겨 있기 때문에 ChatGPT는 정밀도 면에서 어려움을 겪기 시작했습니다. 일부 텍스트가 인식되지 않거나 왜곡되는 것을 볼 수 있습니다.

 

6. 디자인을 Figma 파일로 변환

 

다음으로, 재미있는 테스트로 Codia AI의 플러그인을 사용하여 ChatGPT에서 생성된 시각적 목업을 기반으로 Figma 디자인을 생성했습니다.

 

Figma 스크린샷

 

텍스트를 포함한 모든 구성 요소는 Figma에서 편집 가능했습니다.

 

그리고 사용된 글꼴 패밀리는 Intel이었습니다.

 

정말 훌륭합니다.

 

이제 필요에 따라 UI 목업을 사용자 지정할 수 있습니다.

 

마무리

 

ChatGPT의 UI 시각적 목업 생성 기능은 엄청난 업그레이드입니다. 이전보다 훨씬 더 정밀하고 프롬프트를 잘 준수합니다.

 

하지만 속도가 다소 느리고 정확도는 여전히 개선의 여지가 있습니다. 이미지가 중간에 생성되지 않거나, 결과가 무작위로 나타나거나 지침을 제대로 따르지 않는 경우도 있습니다.

 

ChatGPT에 디자인 옵션을 기반으로 3D 모형을 만들어 달라고 요청했을 때, 화면이 약간 왜곡되고 이상해졌지만, 그렇게 나쁘지는 않았습니다.

 

ChatGPT를 통해 생성됨

 

어쨌든, 이미 훌륭한 업그레이드입니다. 이전에는 할 수 없었던 것들을 이제 만들 수 있게 되었네요.

 

게다가 이 모든 것이 ChatGPT 채팅 창에서 바로 진행됩니다. 얼마나 편리할까요?

 

앞으로 더 나은 업그레이드가 있기를 기대하고 있습니다.

 

읽어주셔서 감사합니다!

 

다음 주에 뵙겠습니다.

 

Xinran

 

포스팅 원문 글은 다음 링크를 참고하세요.