brunch

You can make anything
by writing

C.S.Lewis

by DesignerKang Sep 18. 2024

[AI] AI로 웹사이트 그래픽을 완성하다!

그래픽 리소스가 필요할때, AI가 답이다!



이번 프로젝트에서는 생성형 AI를 활용해 웹사이트 그래픽을 디자인한 실제 사례를 공유합니다. 
빠르고 효율적으로 멋진 결과물을 완성한 과정, 지금 확인해보세요!




웹페이지에 그래픽이 필요할 때가 많습니다. 기존 작업방식이라면 내가 직접 그리거나, 이미지 사이트를 뒤적여 합성하는 작업이 필요했겠죠. 그러나 AI, 특히 DALL-E를 활용하면, 자연어로 필요한 이미지를 훨씬 쉽게 생성할 수 있었습니다.

이 프로젝트는 애초에 그래픽을 AI로 제작하겠다는 목표로 시작했습니다. 연초에 AI에 대한 관심이 높았던 덕분에, 자연스럽게 제안한 방식이었죠.



히어로 이미지.


먼저, 히어로 영역의 기업을 대표하고 서비스 내용을 잘 표현할 수 있는 그래픽이 필요했습니다. 디자인 방향은 두 가지로 진행되었습니다.

첫번째는 스토리 브랜딩에 중점을 둔 웹사이트로, 내용이 넓고 시원하게 배치되도록 구성하였습니다. 그래픽 스타일 또한 깔끔하고 잘 다듬어진 형태를 목표로 했습니다. 서비스의 이름에 맞춰 식자재로 이루어진 우주 형태의 비주얼을 만들고자 했습니다. 이를 위해 "원형 빵, 커피와 빵 재료들, 3D 그래픽 스타일, 깔끔한 하얀 배경" 같은 프롬프트를 입력하여 원하는 이미지를 생성했습니다.

Dall-E 생성이미지


이 결과로, 빵 모양을 중심으로 식자재가 펼쳐지는 그래픽을 완성할 수 있었습니다. 

물론, 한 번의 프롬프트로 완벽한 결과가 나오진 않아서 부분적으로 다른 프롬프트를 조합하고 합성하여 임팩트 있는 이미지를 완성했습니다.

첫번째 컨셉이미지


두번째 컨셉은 보다 진지하고 안정적인 기업 페이지를 위해 사진 스타일의 이미지를 사용하고자 했습니다.
식자재가 테이블에 놓인 모습과 같은 이미지를 생성하기 위해 '현대적인 감성, 커피, 빵, 시럽, 종이봉투, 테이블, 사진스타일, 16:9 등의 프롬프트' 등을 입력하였습니다. 그리고 전체 컨셉에서 그린 컬러를 키 색상으로 설정했기 때문에, 프롬프트에 그린 컬러를 꼭 추가했습니다

Dall-E 생성이미지


약간의 랜덤성이 있었지만, 큰 보정 없이도 빠르게 이미지를 생성할 수 있었습니다.
프롬프트에서 오브젝트 갯수나 뷰 각도등을 조정하면서 아래 이미지 스타일을 빠르게 생성할 수 있었습니다.

두번째 컨셉이미지



제품 소개 페이지.


제품을 소개하는 페이지에도 그래픽이 필요했습니다. 
특정 브랜드나 로고가 노출되면 안 되었기 때문에, 텍스트와 잘 어우러지는 깔끔한 이미지를 생성하는 것이 중요했습니다. 
3D 스타일, 심플한 녹색 배경 등의 프롬프트로 원하는 카테고리 이미지를 생성하고, 시드 번호를 유지하여 다른 카테고리의 이미지를 생성하는 방식으로 일관된 스타일을 유지했습니다.

Dall-E 제품 생성이미지

이 점에서 AI의 장점이 크게 발휘되었습니다. 이미지 사이트에서 일관된 스타일을 찾기는 쉽지 않지만, AI는 스타일을 유지하면서도 원하는 이미지를 빠르게 만들어줍니다. 아래는 그렇게 생성된 그래픽들입니다. 참 깔끔하게 잘 나왔죠!

3D 그래픽 스타일 이미지



웹사이트 최종 적용.


생성된 이미지는 최종적으로 아래처럼 웹 디자인에 활용되었습니다.

웹디자인

 


후기

AI로 만든 디자인 작업을 보면 대개 사람 중심의 사례가 많습니다. 하지만 이처럼 오브젝트 에셋 작업에도 충분히 활용될 수 있습니다. 이 프로젝트는 연초에 작업되었기 때문에, 지금은 AI가 더 발전했겠죠. 최근 기사들에 따르면 3D AI도 빠르게 발전하고 있다고 하니, 기대가 큽니다.(아직 공부는 못해 봤습니다 ㅍ_ㅍ)

AI는 훌륭한 디자인 도구입니다. 떠오르는 생각을 빠르게 이미지로 만들어주는 도료와도 같죠. 덕분에 이번 작업에서 전체 웹사이트 그래픽을 일관성 있게 생성할 수 있었고, 특히 작업 속도가 압도적으로 빨랐습니다.




#midjourney #chatgpt #stablediffusion #comfyui #aiart #dalle #dalleart #prompt #AI #웹디자인 #webdesign #ai그림 #ai웹디자인 #웹그래픽 #그래픽리소스 #AI디자인 #인공지능 #그래픽디자인 #디지털아트 #디자인트렌드 #AI아트 #디자인팁 #3D #3DGraphic #designerkang



INSTAGRAM@DESIGNERKANG_AI


https://www.instagram.com/designerkang_ai/

이전 12화 [AI] 공연 포스터도 AI로? 그 결과는?
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari