[AI] AI로 완성한 HJDP 웹사이트의 새얼굴
AI를 활용한 웹사이트 키비주얼 이미지 작업 과정
이번 프로젝트는 HJDP 건축사무소 웹사이트의 키비주얼 이미지를 AI로 제작한 실제 제작 과정입니다. AI 툴을 활용한 레고 블럭 느낌의 디자인 시안부터 추가 요청된 노을 배경까지, 제작 과정을 단계별로 소개합니다.
이번 프로젝트는 HJDP 건축사무소의 웹사이트를 새로 개편하는 과정에서, 웹사이트의 핵심인 키비주얼 이미지를 제작하는 일이었습니다. 의뢰를 맡게 된 이유는 제가 이전에 제작했던 스포츠 광고 그래픽을 보신 후 비슷한 스타일을 요청하셨기 때문입니다.
스포츠 광고 그래픽췤~!
첫 번째로 검토한 것은 레고 블록 형태의 상업적 사용이 가능 여부였습니다. 다행히 ‘레고’라는 단어나
로고만 사용하지 않으면 저작권 문제가 없다는 점을 확인했습니다..(다행히도..)
출처 : ChatGpt, www.a-ha.io초기 시안 제안
클라이언트와 협의 후, 세 가지 콘셉트의 시안을 준비했습니다.
1. 레고 블록 재질을 활용해 건물 형태와 로고를 결합한 디자인
2. 로고를 다양한 재질로 표현한 형태의 디자인
3. 손그림 스케치를 배경으로 입체감 있는 로고를 강조한 디자인
이처럼 세 가지 방향성을 가지고 시안을 제안하게 되었습니다.
시안 제작을 위해서 AI 툴을 적극적으로 활용하였는데 레고 브릭 재질로 건축사무소의 건물 디자인이나 로고 형태를 유지하는 데에 조금 제약이 있었습니다. 예를 들어, Firefly는 ‘레고’라는 키워드를 포함한 프롬프트를 거부했기 때문에 원하는 재질의 이미지가 바로 생성되지는 않았습니다. 작은 컬러 브릭 같은 키워드를 넣어보기도 했지만, 유사한 블록 형태는 만들어지지만 원하는 디자인과는 결과가 달랐습니다.
반면, Midjourney와 FluxAI(FreepikAI)는 레고 재질의 그래픽을 훌륭하게 만들어주었지만, 로고의 명확한 형태를 그대로 유지하는 데는 어려움이 있었습니다.
(이 부분은 제 기술적인 부족일 수도 있지만요!)
작업 과정
이런 한계를 해결하기 위해 혼합 방식을 사용했습니다. 먼저 Firefly에서 레고 블록 재질의 형태를 대략적으로 생성한 후, FluxAI(FreepikAI)에서는 레고 재질을 적용한 건물이나 알파벳을 생성했습니다. 이렇게 생성된 두 가지 요소를 포토샵에서 간단히 합성하여 필요한 이미지로 완성했습니다. 마지막으로 FreepikAI의 스케일업 기능을 사용하여 디테일을 보정했는데, 이 기능이 이미지를 자동으로 매끄럽게 다듬어 주는 점이 특히 유용했습니다.
작업 흐름을 요약하면 다음과 같습니다:
이렇게 여러 AI 툴의 장점을 조합하여 원하는 디자인을 구현할 수 있었고
대부분 이 과정을 거쳐 시안을 도출했으며, 다양한 테스트 결과 괜찮은 퀄리티로 완성된 이미지들을 클라이언트에게 전달할 수 있었습니다.
로고를 강조
처음 시안을 전달한 후, 클라이언트의 요청에 따라 조금 더 로고를 강조하는 방향으로 발전시키기로 하였습니다. (정성 들여 만든 레고 건물이 사라지게 되어 개인적으로 아쉽기도 했습니다...ㅎ) 이때 시도한 방향은 크게 두 가지로, 하나는 원형 판에 로고가 새겨진 모양이고, 다른 하나는 여러 각도에서 로고를 다양한 시점으로 보여주는 모양이었습니다.
이 두 가지 이미지 스타일을 생성하기 위해서 원형 판에 로고를 새겨 넣고, 소실점이 적용된 다양한 각도의 로고 형태가 필요했습니다. 처음에는 여러 가지 프롬프트를 입력해 보았으나 정확한 형태가 잘 나오지 않았고, 원하는 결과물도 얻기 어려웠습니다. 그래서 일러스트레이터의 3D 기능을 활용해 원하는 각도의 로고 틀을 먼저 제작했습니다. 이 이미지는 블록 재질을 입히기 위한 뼈대 같은 역할로 사용할 수 있었습니다.
FluxAi(freepik), Midjourney텍스쳐 유지 및 모양 구현
워크플로우에 따라 모양을 유지하면서 텍스쳐를 입히는 작업을 Firefly로 진행하다가, 최근 업데이트된 Midjourney의 EDIT ReTexture 기능을 활용하여 두 가지 툴에서 테스트를 해 보았습니다.
각 툴의 테스트 결과는 다음과 같습니다:
Firefly 형태 표현은 우수하나 레고 재질 표현이 미흡
Midjourney 레고 재질 표현은 뛰어나지만 조각을 작은 디테일로 표현하기에는 한계가 있었습니다
그래도 Midjourney는 여전히 비주얼 퀄리티 면에서 인상적이라 느껴지기도 했습니다.ㅎ
방법과 결과를 완전히 결정하기기보다는, 생성된 시안들을 정리하여 다양한 디자인 방향을 클라이언트에게 보여드렸습니다.
로고를 강조한 시안완성!
블록재질로 건축물 느낌을 가진 로고로 결정되어 최종 수정과 함께 스케일업을 통해 이미지를 고해상도로 보정한 후, 포토샵에서 세부적인 마무리 작업을 거쳐 드디어 완성된 디자인이 탄생했습니다! 또한, 웹사이트의 다이내믹한 요소를 위해 간단한 영상도 필요하여 GNE-3을 활용해 "두둥실" 떠오르는 느낌의 이미지를 쉽게 제작할 수 있었습니다.
(완성된 디자인이 프로젝트에 잘 녹아들어 만족스러운 결과를 낼 수 있어 기쁘게 생각합니다. �)
최종 디자인 시안
PC 디자인
Mobile 디자인
추가!
추가 작업: 노을 배경 테스트
초기 시안에서는 블랙과 화이트의 심플한 배경을 사용해 왔는데, 디자인이 완성된 후 클라이언트로부터 노을 진 배경을 추가해 달라는 요청을 받았습니다. 이에 따라 새로운 시도를 하게 되었습니다.
작업 방식
이 방식으로 기존 디자인에 더 따뜻하고 감성적인 분위기를 더할 수 있었고, 클라이언트의 요청에도 부응할 수 있었습니다.
좌 : 베이스 이미지, 우 : 생성 이미지아쉬운 점
이번 프로젝트에서 디자인 방향이 최종적으로 원하는 방향과 조금 달라 아쉬운 부분이 있었습니다. 하지만 HJDP 측의 시각이 이 브랜드에 더 잘 맞는다는 생각이 들었고, 그들의 선택이 옳다고 믿습니다. 저에게는 익숙하지 않은 브랜드였기에, 이들이 가진 브랜드에 대한 애정과 인사이트가 더 깊을 테니까요.
또한, AI 도구를 사용하면서 느낀 아쉬움도 있었습니다. 예를 들어, 블록을 제거하거나 각도를 변경해 달라는 수정 요청에는 AI가 다소 취약하다는 점이 느껴졌습니다.
(혹시 이 부분을 보완할 방법을 알고 계신다면 공유 부탁드립니다!)
후기
AI가 많은 것을 도와주지만 이 모든 과정이 그냥 한 번에 땅땅 되는 것은 아니었고요, 원하는 컬러 조합과 블록의 각도, 이미지의 디테일을 위해 여러 번 시도해야 했습니다. 이미지가 랜덤 하게 생성되기 때문에, 마치 사진 촬영에서 수백 장의 사진을 찍고 A컷을 찾는 과정과 비슷하다고 느꼈습니다.ㅎ
생성된 이미지 중 일부를 모아 놓은 샘플들입니다.
생성했던 이미지
그래도 AI 작업물을 보고 연락을 주셔서 기쁜 마음으로 작업에 임할 수 있었습니다.
의견을 분명히 전하는 저의 작업 스타일이 다소 부담스러우셨을 수도 있지만, 이 과정을 이해해 주신 담당자분께 감사드리며, 이런 기회를 주신 HJDP 건축사무소에도 진심으로 감사합니다.
#midjourney #chatgpt #stablediffusion #comfyui #aiart #dalle #dalleart #prompt #AI #웹디자인 #webdesign #ai그림 #ai웹디자인 #웹그래픽 #그래픽리소스 #AI디자인 #인공지능 #그래픽디자인 #디지털아트 #디자인트렌드 #AI아트 #건축 #레고 #디자인팁 #3D #3DGraphic #designerkang
INSTAGRAM@DESIGNERKANG_AI