[진짜 챗GPT 활용법] 챗GPT와 AI 웹 디자인

May 26. 2025

≪진짜 챗GPT 활용법≫ 8장, ChatGPT와 AI Art로 시작하는 웹 디자인에서 다루는 도구는 플레이그라운드 AI(Playground AI)였다. 최근 플레이그라운드 AI의 서비스가 전면 개정되면서 기존 책의 내용대로는 실습을 따라할 수 없게 되어 유사한 도구인 레오나르도 AI(Leonardo AI)의 사용법을 추가로 안내하려고 한다.

레오나르도 AI 소개

이번 실습에서는 인공지능을 통해 그림을 생성하는 AI인 레오나르도 AI(Leonardo AI)를 사용합니다. 구글 검색 창에 ‘레오나르도 AI’라고 입력하거나 아래 주소를 통해 접속할 수 있습니다.

■ 레오나르도 AI: https://leonardo.ai/

레오나르도 AI를 사용하려면 구글 계정이 필요합니다. 구글 계정이 없는 사람은 우선 회원 가입을 진행한 후에 해당 사이트에 접속합니다. 다음 그림은 레오나르도 AI 웹 사이트의 첫 화면입니다. 첫 화면에서 [Get Started]를 클릭해 시작할 수 있습니다.

그림 8.1 플레이그라운드 AI

다음과 같은 로그인 화면이 나오면 [Google]을 클릭하고 구글 계정을 선택해 로그인합니다.

%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2025-02-10_%EC%98%A4%ED%9B%84_4.38.56.png?type=w966

그림 8.2 구글 계정으로 로그인

로그인 후에는 다음과 같이 홈 화면으로 이동합니다. 로그인 후에 접속되는 이 화면의 주소는 다음과 같습니다.

■ 레오나르도 AI의 홈 화면: https://app.leonardo.ai/

%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2025-02-10_%EC%98%A4%ED%9B%84_4.40.15.png?type=w966

그림 8.3 레오나르도 AI의 갤러리

레오나르도 AI의 홈 화면에서는 각 그림을 클릭하여 해당 그림을 만들 때 사용한 프롬프트를 확인할 수 있습니다. 앞으로 만들고자 하는 그림이 있을 때 다른 사용자가 사용했던 프롬프트를 참고할 수 있 는 곳입니다. 예를 들어 강아지 이미지를 생성하고 싶다고 가정해 보겠습니다. 다음 그림과 같이 상단의 여러 카테고리 중에서 동물 이미지가 모여있는 [Animals] 버튼을 클릭하고, 다양한 동물 그림 중 가장 마음에 드는 강아지 이미지를 선택해 보겠습니다.

%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2025-02-10_%EC%98%A4%ED%9B%84_4.43.49.png?type=w966

그림 8.4 Animals 카테고리에서 강아지 이미지 선택

마음에 드는 이미지를 클릭하면 다음과 같이 해당 이미지를 생성할 때 활 용한 프롬프트(Prompt)를 확인할 수 있습니다. 이 프롬프트를 복사하여 활용하고 싶다면 상단의 [Copy prompt to clipboard] 아이콘을 클릭하면 프롬프트가 복사되고, 추후 그림을 그리는 화면에서 복사한 프롬프트를 활용하여 이미지를 생성할 수 있습니다.

%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2025-02-10_%EC%98%A4%ED%9B%84_4.46.05.png?type=w966

그림 8.5 강아지 이미지의 프롬프트

이미지를 생성하기 위해 강아지 이미지 팝업창을 닫고 다시 레오나르도 AI의 갤러리 화면으로 돌아가 보겠습니다. 레오나르도 AI의 왼쪽 메뉴에 있는 [Image Creation] 버튼을 클릭합니다.

그림 8.7 레오나르도 AI 홈 화면에서 [Image Creation] 버튼 클릭

버튼을 클릭하면 이미지를 생성할 수 있는 위한 화면이 나옵니다. 여러 옵션이 있지만 가장 기본적인 사용법은 간단합니다. 상단의 Type a prompt부분에 원하는 프롬프트를 영어로 작성하고, [Generate] 버튼을 클릭하면 프롬프트를 반영하여 이미지가 생성됩니다.

그림 8.8 레오나르도 AI의 이미지 생성 화면

레오나르도 AI로 이미지 생성하기

이제 레오나르도 AI에서 이미지를 생성해 보겠습니다. 레오나르도 AI는 기본적으로 영어 프롬프트로만 동작합니다. 따라서 한글 프롬프트를 입력하면 제대로 동작하지 않습니다. 여기서는 한글 프롬프트를 먼저 작성하 고 번역기를 활용하여 영어 프롬프트를 작성하는 방식으로 이미지를 생성하 겠습니다. 저자의 경우 귀여운 인공지능 로봇 이미지를 생성해 보겠습니다.

한글 프롬프트

귀여운 인공지능 로봇, 하얀색 몸체, 캡 모자를 쓰고 있음, 눈은 웃고 있음. 현실적임.

위와 같이 프롬프트를 한글로 작성한 후 구글 번역기를 통해 영어 프롬프트로 변환했습니다.

영어 프롬프트

A cute artificial intelligence robot, white body, wearing a cap hat, smiling eyes. Realistic.

다음 그림은 해당 프롬프트를 작성하고 [Generate] 버튼을 클릭하여 얻은 최종 결과 이미지입니다. 생성한 그림을 보면 프롬프트를 반영하여 하얀색의 귀여운 로봇 이미지를 만들어냈습니다.

%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2025-02-10_%EC%98%A4%ED%9B%84_5.06.12.png?type=w966

그림 8.9 레오나르도 AI의 이미지 생성 결과

웹 사이트 디자인하기

레오나르도 AI를 활용하면 게임 삽화, 로고, 책 표지, 상품의 디자인 등 거의 모든 제품의 디자인을 생성할 수 있습니다. 비록 몇 가지 수정 사항이 필요하기는 하지만, 디자인 초안을 빠르게 볼 수 있다는 점에서 강력한 이점을 가지고 있습니다. 여기서는 ChatGPT의 작문 능력과 레오나르도 AI 를 활용하여 초보자도 가능한 웹 사이트 디자인에 입문해 보겠습니다. 웹 디자인에서 ‘히어로 이미지(Hero Image)’란 웹 페이지 상단에 위치한 큰 배너 이미지로, 시각적으로 매우 두드러지고 방문자의 이목을 끄는 이미지 를 말합니다. 여기서는 레오나르도 AI를 통해 웹 사이트를 대표할 수 있는 이미지를 만들어볼 것입니다. 첫 번째 실습으로 도넛과 관련된 웹 사이트 를 만든다고 가정하고, 웹 사이트를 디자인해 보겠습니다. 우선, 원하는 웹 사 이트에 대한 설명을 간단히 한글로 적어봅시다.