하루만에 랜딩페이지 교체

Background

무려! 65불이나 주고 만들었던 영상을 활용한 랜딩페이지를 하루만에 교체했다.
좀 슬프지만, 어쩔 수 없는 결정이었다.

막상 영상을 활용해서 사이트에 게시해보니,

매우 마음에 들지 않았다. 이유는 몇 가지가 있었는데,

1. 일단 영상의 퀄리티가 떨어졌다. 이건 앞서 영상을 제작할 떄도 이야기 했지만, 이미지간 이어지는 영상을 만드는 것도 매우 어렵고, 모델링의 수준이 떨어지면 그 수준에 맞춰서 영상이 생성 되기에 퀄리티를 높게 제작하는건 매우 어렵웠다.
2. 또 영상이 너무 길었다. 이건 내가 디자이너로서의 경험이 부족했기에 발생한 사단인데, 랜딩 페이지는 말 그대로 "랜딩"하는 페이지로, 그 페이지 자체가 너무 많은 정보를 주거나 하면 안된다. 이 너무나 당연한 사실을 간과하고 15~30초 가량의 영상이 재생되니, 문제가 있는 페이지였다.
3. 마지막으로 톤앤매너가 맞지 않았다. 이건 컨셉에 집중하다보니 나온 문제이긴 한데, 연이어지는 섹션은 맥북과 아이폰을 활용함 매우 테크 친화적인 페이지를 구성해 놓고, Main 랜딩 페이지는 씨앗과 나무 그리고 시냅스라는 조금 아날로그 적인 감성을 구현해 놓다보니, 연속성이 없는 디자인이 나왔다.

이에, 다시 연속성이 보장 되며, 퀄리티 높고, 단순하게 랜딩페이지로서 기능하는 걸 고안해보고자 했다.

Initiate

처음은 이와 같은 랜딩 페이지 개선을 위한 논의를 Fable과 진행 했다.
다음과 같은 프롬프트로 진행을 해보았는데,

1. 지금 다시보니 랜딩 페이지가 너무 헤비한 것 같은 느낌이 있음. 특히 영상을 단순한 인터렉티브 디자인으로 바꾸고자함.
2. 포토리얼을 시도했는데, 생각보다 리얼하게 뽑기가 어렵고, 영상으로 구현하는게 어렵다고 판단 됨. (3D 랜더한 것을 영상으로 바꿀때 퀄리티가 매우 떨어진다는 사실을 깨달았음)
3. 이에 영상이 아닌 이미지를 활용한 연출 또는 아예 영상을 쓰더라도 픽셀화 된 영상이나 기하학적 영상을 쓰는게 훨씬 더 의미가 있지 않을 까 싶음.
4. 그전에 콘셉트 부터 확실히 하고 가야할 듯. 아래의 내용을 좀 정리해서 어떤 식으로 콘셉트를 잡고 연출하면 좋을지 논해보자.
   1. 나의 닉네임은 가지두부로서, "가지가지"하다 의 가지와, 두부상으로서의 두부가 결합된 말임.
   2. 가지라는 건 Branch라는 뜻도 있고 Eggplant도 되며 중의적임.
   3. 난 Branch라는 의미와 "가지가지"하다의 의미의 집중하여, 내가 실제로도 다양한 많은 활동을 하는 걸 보여주는 PR 페이지로서 d-log를 개설함. 그래서 게임, 앱, 서평(독후감), 생각, 스터디, 취미생활 등을 업로드함.
      1. 그래서 생각한게 자라나는 나뭇가지와 그것이 Neural Network (뇌/생각/AI), 그리고 Galaxy Filament (세계/공간 등)을 상징하는 여러 소재로 연계되는 걸 연출적으로 생각함.
      2. 그러다 보니 연출이 복잡해지고, 결국 좀 너부 헤비해진 느낌임.
   4. 내가 원하는 바는 결국 세련되고 은유적인 느낌을 주면서, 한편으로듣 직관적으로 무슨 의미를 말하는지 알 수 있는 그런 느낌을 원함.
5. 먼저 레퍼런스 조사를 하면서 배경지식을 쌓고, 콘셉트를 데벨롭해봐도 좋을 듯.

결론은 별로 의미있는 결과를 얻지 못했다.

AI를 쓰면서 느낀 거지만, 창의력이 아예 없는 건 아니지만, 내가 방향성을 지정해주고, 콘셉트를 잡으면 그 안에서 벗어나지 못하는 느낌이 매우 강하게 들었다.

Ideation

어떤것이 Impressive하고 나를 표현 할 수 있을가에 대해서, 내가 스스로 좀 고민을 해보았다.

그래서 Branch, Synapse, Light, Connect 등 몇가지 키워드를 생각해 보았고, 연이어지는 Tech-friendely 한 이미지를 살릴 수 있는 아이디어로 떠올린 게, 전구였다.

전구...? 라니...? 싶지만,
전구가 가진 "아이디어"를 상징함이 좋았고, 그것이 연결(Connect) 되었을 때 빛을 바라며 Synapse에 다양한 Brach로 뻗어나간다. 이런 콘셉트가 되었다.

그렇게 그린게 바로 위 아이디어 스캐치다.

요즘 디자인을 전달할 때, 전에 없이 아이패드를 잘 활용하고 있는데, 이와 같은 아이디어 스캐치를 그릴때 너무 유용하다. AI에게 나의 의도를 전달하는 방식이 여러가지가 있을 텐데. 크게는 2가지라고 생각하는데,

1. 텍스트 (보이스)
2. 레퍼런스

텍스트 보다는 레퍼런스가 의도를 전달하기에 훨씬 더 효과적이긴 하다. 이유는 간단한데, 텍스트의 경우, 코딩을 해보신 분이라면 너무 잘 알겠지만, 사람은 생각보다 너무 당연한 부분을 지시하지 않고 생략한다. 그러기 때문에, 지시에 부족한 점이 늘 많을 수 밖에 없고, 그 부분을 AI는 임의로 채우기 때문에 의도와 결과가 어긋나게 된다.

하지만 레퍼런스를 줄 경우, 이러한 부족한 부분들도 같이 담겨서 의도와 방향성이 명확히 지시가 되기에 훨씬 편한 점이 있다.

그래서 다시 돌아와서, 해당 이미지와 함께, 작성을 다시 GPT와 진행...

레퍼런스 이미지와 함께 인터넷에서 무료로 구한 3D Blender 모델을 기반으로 다음 프롬프트로 제작을 진행했다.

1. 랜딩 이미지를 다시 만들 것임. Gazitofu.dev의 첫 랜딩페이지가 뒤에 따라오는 Games, Apps 와 톤앤매너가 맞지않아 다시 설계 중.
2. 톤앤매너를 맞춰서 모던하고 심플하고 Tech-full 하게 맞출 것임.
3. 연출은 단순함. 첨부한 landing page new를 참고할 것.
   1. 먼저 어두운 화면 정 중앙에 전구가 하나 있음. 전구의 플러그는 연결되어 있지 않음.
   2. 사용자는 콘센트 또는 플러그를 클릭하여 드래그앤무브로 이동시킬 수 있으며, 콘센트와 플러그를 가까이 가져가 구멍을 어느정도 맞추면 결합 할 수 있음.
   3. 결합이 되면 전구에 불이 번쩍 번쩍 몇번 하고 불이 들어옴. 백열등이기에 따뜻한 색깔로 들어옴.
   4. 전구에 불이 들어오고 나면 천천히 노드들이 전구를 중심으로 하나씩 신호선이 나오며 뻗어나오기 시작하는데, 아주 랜덤하고 무작위적으로 사방으로 빛의 신호가 나가며 끝에 별빛과 같은 노드를 형성함. 해당 노드들은 구름/뇌와 같은 모양을 띄며 생성되는데, (신호가 나가는 속도는 천천히 시작하여 >> 매우 빠르게 나가며 7초가 되면 구름/뇌를 채울 정도로 신호가 퍼져서 별빛들이 전구를 감쌈.)
   5. 최종적으로 모든 노드가 생기고 별빛과 같은 노드들은 서로 이어지며 네트와그를 형성함.
   6. 그리고는 간헐적으로 가운데 전구에서 신호가 나감
4. 위 애니메이션은 스크롤과 상관없이 콘센트를 연결하면 진행되고, 콘센트를 연결하지 않은 상태나 연결하고 스크롤을 내리면 스크롤은 그대로 내려가며 다음 섹션인 Game으로 넘어감.
5. 전구, 콘센트/플러그, 네트워크 모드 3D Blender를 제공하니 이를 기반으로 만들수 있도록 할것.
6. 전구의 바디와 콘센트/플러그의 색은 매우 짙은 회색으로 하자. 전구의 소켓은 금속재질이 나게끔 하고.

End

그리고 그 뒤로는 계속 된 세부 조정들을 진행하는 작업이었다.

각각의 노드로 시그널이 뻗어나가는 방법 및 속도, 빛의 밝기, 어떤 식으로 인터렉션이 되는지 등.