Design & Devlopment
— 인터랙티브 웹을 좋아하는 Zalgritte의 블로그입니다.
Lorem ultrices malesuada sapien amet pulvinar quis. Feugiat etiam ullamcorper pharetra vitae nibh enim vel.
Subscribe— 인터랙티브 웹을 좋아하는 Zalgritte의 블로그입니다.
이전 게시글 (ChatGPT로 미디어 아트 만들기 1)에 이어서... 조금은 다른 모습으로 하나 더 진행해보았다.
원래는 '디자이너와 개발자를 위한 AI로 인터랙티브 웹 만들기' 스터디에서 OT 내용으로 준비했던 것인데, 아쉽게도 스터디를 개설하지 못한 내용을 블로그로 풀어쓴다.
ChatGPT o1과 함께 아이디어를 탐색해보자.
프롬프트는 딱히 테크니컬하게 들어가지 않는다.
아이디어를 찾는 것은 일단 쉽게, 지금의 생각을 펼쳐놓는 정도로만 진행한다.
새 인터랙티브 웹 페이지를 만드는 과정을 20분동안 시연을 할거야. 대상은 초보자들이라서, 간결하면서도 결과물이 명확하게 우와할 수 있어야 해. 어떤 아이디어들이 있을까? 네가 제안해줘
작성한 프롬프트
그러면 우리의 지선생이 몇가지 사례를 제안해준다.
아이디어에서 영감을 얻은 게 있다면 곧바로 이어서 대화를 나눈다.
비디오 웹캠을 활용하는게 역시 좋겠어.
이건 내 아이디어야. 웹캠을 켜고 색상에 따라 이모지로 변환해서 보여주는 건 어떨까? 예를 들어 노란색이면 '🙂', 초록색이면 '💚' 이런식으로 색상을 이모지로 변환해서 일종의 아스키 아트를 만드는거지. 그리고 마우스 인터랙션도 추가해서, 마우스 위치에 있으면 그 주변의 이모지 크기가 2배는 커지는거야.
GPT의 답변을 보고 영감을 받아 다시 대화를 나눈 프롬프트
GPT의 답변 중에 여러 키워드들을 보며 얻은, 스파크가 튀는 순간을 포착해서 다시 대화를 나누어 본다.
이 역시 편안하게 진행한다. 어차피 계속해서 이야기를 나누며 좀더 기획을 구체화하면 된다.
GPT가 작성해준 코드를 codesandbox로 가져가서 한번 붙여본다.
사실은 이때, 여러번 수정을 진행했다.
뭔가 잘 안되서, 혹은 무언가 좀더 넣고 싶어서 계속해서 즉문즉답을 진행했다.
이런식으로 계속 수정하면서 결과물을 만들어나간다.
이 과정을 더 쉽게 하려면 Copilot, Cursor, Windsurf 등과 같은 AI IDE를 사용하면 된다. 그러면 수정하는 과정이 더 매끄럽고 편리해서 좋다.
Project SOK의 5번째 작품은 〈Dream-Reality〉이다.
꿈과 현실을 넘나드는 모습을 주제로 AI 영상을 활용하여 만들었다.
이번 포스팅에서는 이 작품을 만드는 과정을 간략하게 소개하면서 어떤 점들을 느꼈는지도 짤막하게 남기고자 한다.
제일 먼저, 다른 멤버(@Wonthekey)에게 받은 레터링 파일을 포토샵으로 옮겨와 리터칭을 해주었다.
블러, 리퀴파이, 그라디언트 맵을 혼합하면 아래와 같이 녹아서 흘러내리는 효과가 나타난다.
이미지를 만드는 방법은 유튜브에 Melting liquid effect를 검색하면 자세한 튜토리얼이 나온다.
이런 식으로 이미지를 여러 장을 준비한다.
루핑 애니메이션을 만들기 위해서는 2장이 아닌 4장이 필요하다.
Dream → Reality → Dream으로 돌아와야 하기 때문이다.
원하는 느낌을 어느정도 만들어주고 파일을 내보냈다.
Kling.ai에서는 아주 특별한 기능을 제공하고 있는데, 바로 시작 프레임과 끝 프레임을 이미지로 지정하면 그 사이를 연결해주는 기능이다. 이를 사용하여, 포토샵에서 내보낸 이미지 파일을 가져오고 간단하게 프롬프트를 입력해준다.
크레딧의 제한도 있고 무엇보다 영상을 생성하는 시간이 5초 기준으로 20-30분은 걸려서 많이 테스트를 해보진 못했다. 하지만 아주 정교한 실사 영상을 만드는 것은 아니기 때문에, 적당하게 괜찮은 영상이 나오면 만족하며 멈추었다.
이런 CG, VFX같은 영상을 ‘생성’하는 것은 Gen AI 모델들의 성능과는 조금 다른 영역인 것 같다. Sora를 비롯한 다른 서비스들이 각자 강점들이 다른데다가 실사 영상을 기준으로 잡는 경향이 있는 것 같다.
그래서 아무래도 나와 같은 레터링이나 포토샵 효과를 구현하는 것은 클링이 잘 어울렸던 것 같다. 다만 아쉬운 것은 화질이다. 불이 나는 효과같은 것은 잘 학습되서 퀄리티가 좋은데, 프레임 사이를 연결함에 있어서는 다소 아쉬운 퀄리티이긴 했다.
다음으로는 Cursor를 활용해서 웹 개발을 해준다.
Cursor는 vs code와 같은 IDE지만 LLM을 좀더 잘 활용할 수 있도록 결합된 프로그램이다. 그동안은 Claude 3.5 sonnet을 자주 써왔다. GPT-4o보다 성능이 훨씬 뛰어났기 때문이었다.
하지만 o1모델이 출시하고 어느정도 안정화가 된 다음부터는 (지금부터는) o1을 자주 사용하고 있다. 어느정도 결과를 기다려야한다는 점은 있지만, 체감 성능이 더 뛰어났기 때문이다.
물론 API의 비용이 있어서 모든 질문을 o1으로 하고있진 않다. 하지만 Cursor의 장점은 컨텍스트는 유지한 채로 모델을 돌려가며 사용할 수 있다는 점이다. 이를 적극 활용해서 적재적소에 LLM을 사용하면서 웹 개발을 아주 수월하게 이어나갈 수 있다.
이번 작품 〈Dream-Reality〉는 Adobe 일러스트레이터에 레터링을 시작으로, 포토샵과 Kling, Cursor를 거쳐 인터랙티브 웹을 구현한 프로젝트이다.
디자인 워크프로세스가 더 자유롭게 변화할 수 있으며 좀더 실험적이고 기술의 통합과 한계를 넘어서는 다채로운 작업물을 만들 수 있다는 것을 보여주는 사례가 아닐까 한다.
테라파워는 마이크로소프트 창업자 빌 게이츠가 2008년에 설립한 원자력 발전 회사이다. 탄소가 없는 안전하고 풍부한 에너지를 제공한다는 목표로 설립되었으며, 미국에서 최초로 소형원자로를 건설하고 있다.
오늘은 이 테라파워의 회사 웹사이트를 보며 리뷰해볼 것이다.
관전 포인트는 3가지인데, 첫째는 화면 가득 채우는 동영상의 적재적소 배치와 미친듯한 깔끔함, 그리고 활용성이다.
둘째는 디자인에 있어서 브랜드 컬러를 얼마나 세심하게 ‘자제’하면서 쓰는 모습이다.
셋째는 구이 이펙트(Gooey effect)로 인터랙션 요소를 넣어, 디자인 컨셉을 완성시키는 부분이다.
기업의 랜딩페이지란 이래야 한다는 어떤 이상적이고 모범상이 아닐까 싶다.
먼저 이 테라파워 웹사이트가 어떻게 만들어졌는지 살펴보자.
Vue.js 생태계를 이용하여 웹을 구성했다. Nuxt.js 프레임워크로 웹을 만들었다.
Three.js로 마우스 커서, 구이 이펙트 등의 인터랙션을 주었다.
기본적으로 영상이 화면을 꽉채우도록 세팅이 돼있다.
스크롤에 따라 프레임이 재생되어 쭉쭉 내리면 자연스럽게 영상을 시청하게 만들어두었다.
테라파워의 메인 컬러는 보라색인데, 이걸 아주 은은하게 구석구석 잘 녹여두었다.
영상을 잘 보면 쉐도우를 보라색으로 맞춰두어 전체적으로 통일된 느낌을 준다.
이런 디테일이 계속 보여질 것이다.
모던한 디자인은 바로 이 상단 네비게이션 바에서부터 뿜어져 나온다.
아주 감탄한 부분은 바로 정렬이다. 나같은 사람이면 세로 축에서 중앙정렬로 맞췄을텐데, 아주 기가막히게 아래 정렬로 세련된 느낌을 살렸다.
자칫하면 촌스럽거나 어긋난 느낌을 만들 수 있다. 하지만 화살표나 적절한 타입의 크기, 굵기 등의 밸런스가 딱 맞아 떨어진다.
메뉴를 눌러 들어가면 레이아웃도 아주 세련되게 구성한 것을 볼 수 있다.
페이지마다의 위계를 주면서 흔하지 않게 아주 잘 풀어냈다.
마우스를 올리면 메인 컬러인 보라색으로 바뀐다.
이런 절제미가 기업의 가치를 시각적으로 전달하고 있다.
더불어 이 메뉴는 이후 푸터에도 유사하게 쓰여 효율성을 챙기고 있다.
발전소가 위치한 와이오밍을 뷰포트에 꽉차는 동영상으로 보여준다.
다음 섹션의 소개가 스크린샷에 보이는데, 그레이컬러를 잘 쓰고 있다는 인상을 받았다.
섹션 넘버는 작게 표시하면서 핵심이 되는 키워드만 강조하고, 설명글은 회색으로 처리했다.
딱딱 떨어지는 깔끔함이 보인다.
핵시설과 비핵시설을 분리하여 운영한다는 메세지를 전달하기 위해 3D 영상을 사용했다. Learn more 과 Dot 아이콘은 보라색으로 두어 더 알아볼 수 있도록 링크를 걸어두었다.
이 부분도 굉장히 효과적으로 전달하고 있는데, 보라색을 키 컬러로 사용하면서 화면분할로 시작한 클립이 이어져 메세지를 완성하고 있다.
좌우 분할이었던 영상이 모바일에서는 90도를 돌려, 상하 분리된 모습으로 보여진다. 아주 효율적으로 반응형에 대응하고 있어서 이것도 좋았다.
액체 금속을 사용한다는 것을 보여주기 위한 영상이다. 이 역시 그림자 영역에 보라색을 사용하여 통일성을 가져가고 있다.
재생 에너지와 에너지 저장 방식을 소개하는 페이지이다.
2단 분할, 텍스트 박스의 배치를 통해 밋밋하지 않게 계속해서 디자인적 변화를 주고 있다.
이 다음 지구 영상으로 전환되는 과정이 정말 멋있다.
원 형태를 정확하게 맞추어 전환하기 위해서 노력을 많이 했을 것 같다…
테라파워가 제공하는 나트륨 원자로의 효과에 대해 수치를 제공하는 섹션이다.
카드 형식의 박스들과 아이콘, 타입 체계를 보면 MUJI라던가 일본의 디자인 느낌마저 난다.
이 섹션은 배경에 3D스타일 핵 원자로 영상을 깔아두고 마무리짓는 영역이다.
우측에 아무 텍스트 없이 위치한 빈 박스가 있다. 끝까지 컨셉을 유지하려는 노력으로 읽힌다.
테라파워의 웹사이트는 기업의 정체성과 기술적 우수성을 시각적으로 완벽하게 표현한 사례로 볼 수 있다.
테라파워의 웹사이트는 기술, 비전, 디자인 의 삼박자가 어떻게 완벽한 조화를 이룰 수 있는지를 보여주는 모범적인 예시라 본다. 단순히 잘 만든 기업 랜딩 페이지를 넘어, 디자인과 기술의 궁극적 목표를 보여주는 하나의 작품이라고 할 수 있지 않을까.
Gus는 뉴욕에 이스트사이드에 위치한 크리에이티브 전략 회사이다. 2020년에 설립된 광고 에이전시로, Spotify, Harry's Inc., Blackstone, Sproos!, Patina, Judy와 같은 회사들의 브랜드 및 크리에이티브 전략을 개발했다.
어느 날 워드프레스로 개발한 웹사이트를 살펴보던 중, 정말 결을 달리하는 웹사이트가 눈에 띄었다. 비주얼 임팩트도 있는 웹사이트가 살펴보니 더 이상한, 괴짜같다는 느낌을 받게 한다. 한번 그 웹사이트를 같이 훑어보면서 간략하게 리뷰를 해보려 한다.
먼저 사용한 기술을 보면, 워드프레스와 플러그인들로 웹을 구축하였다. 여러 시각적 효과는 Three.js로 만들었다.
히어로 섹션의 애니메이션을 보면, 정말 다양하고 재미난 요소들을 넣어둔 것이 인상적이다.
중간에 갑자기 게임이 나오기도 하고 어떤 영상들이 문을 열고 나오기도 하고 😄
그리드를 정말 잘 활용해서 Playful 느낌을 준 것 같다.
그런데 이것을 어떻게 만들었을까?
그리드를 만들때 단순히 배치한 것이 아니라 모든 요소들이 그리드를 바탕으로 정렬이 되어야 한다.
이 작업이 쉽진 않았을 것 같다.
---gridCellSize
, ---x
, —--y
값 등을 사용해서 요소들을 CSS 상에서 딱 맞게 배치하려고 한 것 같다.
반응형을 고려하면 까다로운 작업이 아닐까 싶다.
모바일로 봐도 아주 잘 작동한다.
About 페이지로 가보자. 트랜지션 효과도 신경써서 만든 티가 난다.
회사 소개와 함께 아코디언에서 다양한 정보를 주고 있다.
‘흠 그렇구나’ 하고 지나치려는 찰나, FAQ를 잘 보면 뭔가 이상한 질문들이 있다.
‘거스의 화장실 분위기는 어떤가요?’ 라는 질문에 자신들의 스포티파이 플레이리스트를 링크해주었다… 나중에 한번 들어보자…
이외에도 유머가 넘치는 질문과 답변들이 있으니 한번 읽어봐도 괜찮을 것 같다.
데스크탑에서 페이지들의 그리드가 깨지는 이슈가 있긴 한데, 모바일로 보면 괜찮다.
Work 페이지를 가보면 여러 작업물을 볼 수 있는데 역시 그리드를 충분히 활용하는 모습이다.
마우스를 올리면 간략한 설명이 오버되며 나타난다.
Contact 페이지에선 그들의 사무실을 소개하고 있다.
사무실이자 갤러리이자 매장이라고 한다.
(내가 지향하는 사무실이기도 하다)
규모가 크지 않은 에이전시라는 것을 알 수 있다.
푸터에도 문구 하나하나 신경을 쓴 것 같지 않은가? 최대한 임팩트를 주려고 한 것 같다. 그리고 먹힌다.
아쉽게도 푸터가 데스크탑 버전에선 아쉽게도 깨져 보인다.
Gus 에이전시는 크리에이티브
를 어떻게든 보여주고 자신들이 잘한다는 것을 어필하려 한 느낌이 역력하다. 특히 쉬운 길은 아닌, 그리드 컨셉을 디자인 컨셉으로 가져가며 여러 플레이를 보여준 것이 인상적이었다.
이상한 사람들이 잔뜩 있을 것 같은 크리에이티브 전략 회사 Gus.biz 웹사이트를 둘러보았다. 참고로 링크드인 소개도 평범하진 않았다. 전문 분야에 색소폰
이 껴있는 등.. 구석구석 자꾸만 살펴보게끔 만든다…