[AI]와 함께 웹사이트에 생명 넣기
이번에는 AI와 함께 웹사이트의 ‘입구’를 만들어 보았습니다.
AI코딩에 대해서 여러 디자이너&강연자 분들이 이런저런 글을 남기기도 해서
저도 만들어 보고 싶은 마음도 있었고,
그래서간단한 생각을 AI로 직접 시험해 보기로 했습니다.
머릿속에 떠오른 건 제 홈페이지의 첫 화면, 즉 방문자가 처음 마주하는 입구였습니다. 그래서 떠오른 단어는 두 개 ‘DesignerKang’ ‘Portfolio’입니다.
제 이니셜이자 브랜드명인 DesignerKang이 임팩트 있게 등장하면 좋겠다는 생각이 먼저 들었고,
이 텍스트를 어떻게 보여주면 재미있을까 고민하다가 슬롯머신처럼 알파벳이 돌아가다 하나의 단어로 맞춰지는 방식이 떠올랐습니다.
알파벳들이 도르르 돌아가다가 멈추며 DesignerKang이 완성된다면, 시각적으로도 재미있고
‘수많은 조합 중 하나가 맞춰진다’는 의미도 괜찮겠다는 생각이 들었습니다.
(여담이지만, ‘슬롯’이라는 단어가 바로 떠오르지 않아서 “777 맞추는 게임이 뭐지?”라고 물어본 끝에 슬롯머신이라는 단어를 다시 배웠습니다.)
아이디어가 대략 머릿속에서 정리되자 바로 Gemini에게 프롬프트를 입력했습니다.
검은색 배경, 화면을 가득 채운 DesignerKang, 알파벳 텍스트가 슬롯머신처럼 회전, 점점 속도가 느려지며 DesignerKang 완성
(이미 작업을 마친 뒤 글을 쓰다 보니, 프롬프트는 정확히 이렇진 않습니다.)
여기에 이어서 텍스트에 호버 하면 Portfolio로 바뀌면 좋겠다는 생각이었습니다.
그래서 마우스가 호버 하면 컬러가 반전되고 텍스트가 파티클처럼 흩어졌다가 1초간 우주 공간에 떠 있는 느낌으로 있다가 다시 모이며 Portfolio가 완성되는 효과를 요청했습니다.
의미를 부여하자면... ‘이 사이트에는 여러 작업과 이야기가 응축돼 있다’는 인상을 주고 싶었기 때문입니다.
처음 결과물을 봤을 때는 솔직히 “오…”라는 말이 나왔습니다.
하지만 역시 사람 마음이 그렇듯, 보다 보니 수정하고 싶은 부분들이 하나둘 생기기 시작합니다.
슬롯이 도는 속도와 방향 조정
화면 속 빨간 점을 임팩트 있는 포인트로 활용
마우스 포인터와 특정 영역에서 반응하는 인터랙션 추가
머릿속으로는 ‘이게 될까?’ 싶었는데, 생각보다 AI가 꽤 잘 이해하고 구현해 줬습니다.
물론 프롬프트를 몇 번은 고쳐야 했지만요.ㅎㅎㅎ
기본 구조를 완성한 뒤에는 사이트에 필요한 추가 정보나 텍스트 장식들을 하나씩 붙여 나갔습니다.
빨간 점 근처로 마우스가 다가가면 포인터가 변하면 좋겠고
첫 화면에서 Kang 텍스트가 여러 폰트로 롤링되면 재미있을 것 같고
이건 또 가능할까? 저건 어떨까?
빠르게 테스트해볼 수 있으니 끝이 없이 하는 것 같습니다 ㅎ
그래도 이 과정 자체가 꽤 재미있었습니다.
재미있었던 점은,
같은 요청을 Gemini 2.5 Flash와 ChatGPT에 각각 시켜봤을 때, ChatGPT 쪽이 제가 쓴 프롬프트를 더 잘 이해해 주는 느낌이 들었다는 점입니다. 그래서 마무리 작업은 ChatGPT 위주로 진행하게 되었습니다.
(제가 쓰는 말투가 더 잘 맞는 것인지... 이유는 잘 모르겠습니다.ㅎ)
Homepage
Homepage
Homepage
Homepage샘플 보러 가기
(PC에서 의도한 게 더 잘 보이네요. Mobile은 조금 만지다가 적당히 마무리하였어요)
#midjourney #chatgpt #freepick #Gemini #GeminiFlash #Gemini3.0 #Gemini2.5 #dalle #dalleart #prompt #AI #ai그림 #ai웹디자인 #코딩 #스크린세이버 #AI디자인 #인공지능 #그래픽디자인 #디지털아트 #디자인트렌드 #AI아트 #Homepage #portfolio #디자인팁 #designerkang
@designer_kanghttps://www.instagram.com/designer_kang/
