# AI로 UIUX 웹디자인 하기

- 사용한 AI tools:

    - [ChatGPT](https://chatgpt.com/)

    - [Galileo](https://www.usegalileo.ai/explore)

    - [figma](https://www.figma.com/ko-kr/ai/)

[](https://chatgpt.com/)[](https://www.usegalileo.ai/explore)[](https://chatgpt.com/)[](https://www.usegalileo.ai/explore)

- 가이드

1. **프로젝트의 개요를 ChatGPT에게 설명 후 **`**고객 여정**`**과 웹 디자인을 위한 **`**초안**`**을 만듭니다.**

    1. 사업의 목적과 목표를 설정한 후 설문지를 작성해보고 문제점 보완, 가상 고객의 페르소나를 만들고 고객 여정지도를 제안 받아봅니다. 이제 이 내용을 바탕으로 지피티에게 UIUX 전문가가 되어 달라고 합니다.

![Image](https://upload.cafenono.com/image/slashpagePost/20250504/124512_tzxW1wns3aLN0dx8FD?q=80&s=1280x180&t=outside&f=webp)

b. 가장 먼저 제일 중요한 페르소나를 설정해 달라고 합니다. 프로토 페르소나는 사용자에 대한 연구를 수행할 수 있는 리소스가 없을 때, 검증 없이 가정으로 설정하는 페르소나입니다. 원래 페르소나 사용자 데이터를 기반으로 설정해야 하지만, 지금 여기에 리소스를 투입할 게 아니기 때문에 프로토 페르소나로 설정합니다.

![Image](https://upload.cafenono.com/image/slashpagePost/20250504/124715_3ZRsumxWhzLPIm67l7?q=80&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpagePost/20250504/124727_WuVZ3V0Na5bjKAy2eq?q=80&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpagePost/20250504/124749_W1viwoPbB3764r99Zo?q=80&s=1280x180&t=outside&f=webp)

c. 이러한 방식으로 예시를 받아봅니다. 메인 페이지나 상세 페이지의 내용이 맘에 들지 않으면 다시 제안해봅니다.

![Image](https://upload.cafenono.com/image/slashpagePost/20250504/124929_Doc6l2CC1tKPgEQm9c?q=80&s=1280x180&t=outside&f=webp)

d. 핵심 페이지 3개에 해당하는 UI 생성 프롬프트를 받아 봅니다.

2. **다음은 Galileo.ai로 가서, UI를 생성합니다.
2. **(여러 UI 생성 AI가 있지만 갈릴레오는 간편하고 피그마와 연동할 수 있는 장점이 있습니다)

![Image](https://upload.cafenono.com/image/slashpagePost/20250504/125305_OTFPq26oYNtcxKIQoN?q=80&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpagePost/20250504/125309_rbmfCWuAo9kphcgQWu?q=80&s=1280x180&t=outside&f=webp)

a. 기본 150 토큰을 줍니다. 페이지 하나당 10토큰 정도 소요됩니다.  

![Image](https://upload.cafenono.com/image/slashpagePost/20250504/125545_dBjeD7EzjWfonmH80X?q=80&s=1280x180&t=outside&f=webp)

b. 각 이미지별 에디트 기능을 들어가 수정을 합니다. 한글 프롬프트도 나름 잘 되는 거 같습니다.

![Image](https://upload.cafenono.com/image/slashpagePost/20250504/125608_vrP7SjMT0MfvOqBMak?q=80&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpagePost/20250504/125655_GQyjKUFcl3PsFqncdn?q=80&s=1280x180&t=outside&f=webp)

1. **이제 Figma로 갑니다.**

![Image](https://upload.cafenono.com/image/slashpagePost/20250504/125745_xiLHO80y8KtFz6P7Xx?q=80&s=1280x180&t=outside&f=webp)

a. 피그마에서 사진, 텍스트 등 편집이 가능합니다.

![Image](https://upload.cafenono.com/image/slashpagePost/20250504/125802_LnGkEbyZjSyGhljFIc?q=80&s=1280x180&t=outside&f=webp)

*이 글은 gpters AJ님의 글에서 발췌했습니다.

For the site tree, see the [root Markdown](https://slashpage.com/toolly.md).