이전 게시글 (ChatGPT로 미디어 아트 만들기 1)에 이어서... 조금은 다른 모습으로 하나 더 진행해보았다.

원래는 '디자이너와 개발자를 위한 AI로 인터랙티브 웹 만들기' 스터디에서 OT 내용으로 준비했던 것인데, 아쉽게도 스터디를 개설하지 못한 내용을 블로그로 풀어쓴다.

1. 아이디어 탐색

ChatGPT o1과 함께 아이디어를 탐색해보자.

프롬프트는 딱히 테크니컬하게 들어가지 않는다.
아이디어를 찾는 것은 일단 쉽게, 지금의 생각을 펼쳐놓는 정도로만 진행한다.

새 인터랙티브 웹 페이지를 만드는 과정을 20분동안 시연을 할거야. 대상은 초보자들이라서, 간결하면서도 결과물이 명확하게 우와할 수 있어야 해. 어떤 아이디어들이 있을까? 네가 제안해줘

그러면 우리의 지선생이 몇가지 사례를 제안해준다.

2. 구체화

아이디어에서 영감을 얻은 게 있다면 곧바로 이어서 대화를 나눈다.

비디오 웹캠을 활용하는게 역시 좋겠어. 
이건 내 아이디어야. 웹캠을 켜고 색상에 따라 이모지로 변환해서 보여주는 건 어떨까? 예를 들어 노란색이면 '🙂', 초록색이면 '💚' 이런식으로 색상을 이모지로 변환해서 일종의 아스키 아트를 만드는거지. 그리고 마우스 인터랙션도 추가해서, 마우스 위치에 있으면 그 주변의 이모지 크기가 2배는 커지는거야.

GPT의 답변 중에 여러 키워드들을 보며 얻은, 스파크가 튀는 순간을 포착해서 다시 대화를 나누어 본다.

이 역시 편안하게 진행한다. 어차피 계속해서 이야기를 나누며 좀더 기획을 구체화하면 된다.

3. 코드 실행 (복붙)

GPT가 작성해준 코드를 codesandbox로 가져가서 한번 붙여본다.

사실은 이때, 여러번 수정을 진행했다.

뭔가 잘 안되서, 혹은 무언가 좀더 넣고 싶어서 계속해서 즉문즉답을 진행했다.

이런식으로 계속 수정하면서 결과물을 만들어나간다.

이 과정을 더 쉽게 하려면 Copilot, Cursor, Windsurf 등과 같은 AI IDE를 사용하면 된다. 그러면 수정하는 과정이 더 매끄럽고 편리해서 좋다.

ToyFight 스튜디오는 2015년에 설립된, 영국 맨체스터를 기반으로 둔 디자인 스튜디오이다.

“Creating unmistakably original brands and playful digital experiences.”
스스로를 독창적인 브랜드와 재미있는 디지털 경험을 만드는 곳으로 소개하고 있다.이 스튜디오에서는 1. Strategy, 2. Design, 3. Development, 4. Content를 서비스하고 있다.

미리 스튜디오의 웹사이트를 보면 알다시피, 게임기라는 요소를 적극 활용해서 자신만의 브랜드 아이덴티티를 구축하고 있다.
어떤 유머러스한 점들이 있는지, 어떤 요소들로 웹 구성을 하였는지 한번 알아보자.

0. 테크 스택

React, Next.js로 웹을 구성했고 Styled-components, GSAP, Three.js를 사용했다.

또 여기서는 나오진 않지만, 관리자도구 콘솔창을 확인했을 때 Spline.design (노코드 3D툴)를 사용해서 3D 모델을 임베딩한 것 같다.

이외에도 사용된 기술 스택은 다음과 같다.

• Prismic : 잼스택용 헤드리스 CMS
• Lenis : 여러 기기에서 스크롤 경험을 표준화하기 위한 부드러운 스크롤 라이브러리
• Howler.js : 웹 오디오 API와 HTML5 오디오를 위한 폴백 메커니즘을 지원하는 오디오 라이브러리

1. 로딩

메인 화면으로 넘어가기 전 로딩 페이지부터 봐보자. 픽셀 폰트와 타원, 둥근 네모꼴, 그리고 애니메이션에서 특유의 게임기스러운 느낌을 살리고 있다.

2. 히어로

그 이미지는 히어로 섹션에서도 잘 드러나는데, 게임기를 전면에 내세우면서 A, B 버튼을 눌러볼 수 있게 3D를 임베딩해두었다.

• 픽셀 폰트는 컨셉이 확고할 때 쓰면 괜찮다. 지금처럼 레트로한 느낌에, 특히 지금처럼 도트 게임을 표현하고 싶을 때가 가장 전형적이다.
• 국내 폰트로는 갈무리 시리즈, 도스 시리즈가 있다.

헤더에 로고 및 작은 사이즈의 폰트들에도 적용되어 있다.

3. 스크롤

스크롤을 내리면 대표적인, 최신 작업물들과 스튜디오 소개를 하고 있다.

4. 커맨드 터미널

이 스튜디오는 웹사이트에 신기한 장치를 하나 해두었는데, 바로 커맨드터미널을 쓸 수 있다는 것이다.
‘/’ 슬래시를 누르면 우측에서 오프캔버스가 나타나 커맨드를 입력할 수 있다.
이걸로 직접 페이지를 이동할 수도 있고, bw(black & whihte), negative 효과를 주어 웹사이트를 흑백 혹은 반전하여 볼 수도 있다.

이런 재미난 장치를 심어둠으로써 좀더 재미나고 유머러스한 사용자 경험을 전달하고 있다.

5. Services

Services 페이지로 가보면, 어떤 것들을 제공하고 클라이언트로 어떤 회사들이 있었는지 볼 수 있다.

awwwards, FWA등 수상 내역을 캔버스 인터랙션을 통해 보다 효과적으로 전달하고 있다. 양이 어느정도 되다보니 사실 숫자로 적는 것보다도 이러한 식의 전달도 괜찮게 보인다.

6. Work

Work 페이지로 가면 필터와 함께 작업물들을 살펴볼 수 있다.
썸네일에 마우스를 올리면 커서가 해당 작업물의 제목으로 바뀐다.
우측에는 Featured, All, Branding, Marketing, Website, Content, eCommerce로 구분하여 필터링을 할 수 있다.

7. 상세페이지

이 중 GSAP 웹사이트를 만든 작업물 페이지로 가보자.

좌측에는 여러 정보들과 작품 소개가 나타나고 우측에는 여러 이미지들이 배치되어 있는 깔끔한 레이아웃으로 구성돼있다.

8. Connect

Connect 페이지로 가보면 또 재미난 요소를 볼 수 있다.
Contact가 아니라 연결에 초점을 맞춘게 아닌가 하는 생각이 드는데, 녹음기를 통해 여러 사람들의 육성을 들을 수 있기 때문이다.
사용자도 우측에 메세지 남기기 버튼을 통해 녹음을 할 수도 있다.

하단에는 포스트잇같은 형태로 비즈니스 메일 주소와 구인중인 포지션을 알려주고 있다.

9. Store

웬 스토어가 있나 했는데 굉장히 전략적으로 재치가 돋보이는 페이지라고 느꼈다.
상품 목록을 보면 하나같이 정상적인 제품들은 없다.

깨진 아이맥, 안쓴 포토샵 라이센스, 각종 요상한 머그컵과 장난감들.
정상적인 제품을 팔지 않는다는 뻔뻔한 여러 문구들에서 브랜드 아이덴티티를 만들어내고 있다.
심지어 실제 몇 제품은 구매가 가능한 것 같다…

결론

ToyFight 스튜디오는 다소 뻔한 웹 구성을 탈피해서 여러 장치와 스토어 페이지를 넣음으로써, 여러가지의 히스토리와 재치를 잔뜩 뻔뻔하게 표현해냈다는 점에서 아주 좋았다.
이전 포스팅했던 에이전시들에 비해 아주 웹사이트가 기술적으로 심도있다고 생각이 되진 않을 수 있다. (각 스튜디오 만들어낸 작업물의 퀄리티를 얘기하는 것이 아니다)

하지만 어떻게 디테일들을 살려서 브랜딩을 녹여내고 사용자 경험을 설계했는지 보면 정말 감탄스럽다.
아주 깔끔한 화면을 구성하면서 특유의 유머코드를 일관되게 가져가고 있다는 점에서 배울 점들이 있다.
나또한 미니멀리스트에 가까운 성향이라, 더욱 더 세심함에 신경쓰며 보게되고 차용하고 싶은 점들이 있었다.

여는글

디자인 분야에서 AI는 어떻게 접목이 되어 어떤 미래가 펼쳐질까요?

이번에 개최된 Figma의 연례 컨퍼런스인 CONFIG에서, 미래의 모습을 잠깐이나마 엿볼 수 있었습니다.

Figma와 (인수한) Diagram이 그려주는 'AI로 디자인 하는 미래'

그중에서 가장 핵심적인 부분만 발췌하여 짧게 보여드리고자 합니다.

핵심 요약

디자인은 문제를 해결하는 것입니다.
그리고, 디자인은 기술과 함께 발전합니다.

이 2가지 가정을 기억하며 AI로 바뀌는 세상을 What we design, How we design, Who we designs 3가지 측면으로 봅시다.

다시 말해 Figma는 Product, Procss, People 3가지 항목으로 AI를 설명합니다.

What we design? (Product)

오늘날에는 앱 기반의, 모놀리식(monolithic) 구조를 가지고 있습니다.

하지만 미래에는 AI를 통해 딱딱한 구조를 벗어나서 Dynamic UI를 구성하고 '유저의 의도와 행동'에 집중할 수 있게 될 것입니다.

그래서 앱 기반이 아닌 Task 기반의 디자인을 할 것입니다.

How we design? (Process)

그럼 어떻게 디자인을 하게 될까요?

기존의 원자(Atomic) 시스템은 아주 작은 요소들을 모두 만들어가며 아주 정교하고 '완벽'한 작업을 위해 애썼습니다. (1px을 맞추기 위한 수많은 피땀눈물...)

이 과정을 AI를 통해 패턴으로 만들어, 유기적으로 구성할 수 있게 됩니다.

최소한의 요소만 만들면, 자동으로 각종 상태(Status)와 변수(Variables)들을 만들면서 디자인 시스템까지 한큐에 적용한다는 것 같습니다.

아주 지루한 작업들은 더이상 할 필요 없이 좀더 문제와 솔루션, 아이디어와 전략에 집중할 수 있게 되는 것이죠.

미친듯한 시간 단축을 이뤄낼 것 같습니다...

Figma에 변수(Variables)에 각종 옵션까지 먹는 것만 해도 얼마나 고마웠는데...
이렇게 된다면... 최고...! 🥳

Who designs? (People)

Figma는 본질적으로 Community-Centered-Company입니다.

AI를 통해 천장을 높여 디자이너는 한계를 벗어나 더 잘할 수 있게,
바닥은 낮추어 다른 직무의 사람들도 디자인에 참여할 수 있게 만들고자 합니다.

그래서 모두가 메이커가 되는 협업 공간이 될 것입니다.

경계를 허물고 협업과 공동의 목표에 집중합니다.
더욱더 활발한 아이디어와 참여를 이끌어내게 될 것입니다.

이렇게 Product, Process, People - 3가지 관점에서 AI를 바라봤습니다.

End-to-End Process

AI는 하나의 제품이 아닙니다. AI는 기술이고 플랫폼입니다.

그래서 AI는 디자인 작업의 모든 과정을 도와줄 수 있습니다.

브레인스토밍, 디자인, 개발까지 모든 과정입니다.

Brainstorm

아이디어를 쉽게 생성하고 비슷한 것끼리 묶어내고(클러스터링) 그리고 요약까지 AI를 통한 브레인스토밍이 가능해질 것 입니다.

데모 영상을 보시면 Figjam에서 AI를 사용하는 모습이 나옵니다.

프롬프트를 입력하자, 여러 아이디어 포스트잇이 생성되고, 이것들을 여러 기준으로 쉽게 모아볼 수가 있네요.

그리고 한번에 요약까지 해주는 장면이 나옵니다.

Design

디자인 실무에서는 어떻게 AI가 도와줄까요?

아이디어를 기반으로 초안을 만들고, 여러 배리에이션을 만들어주면서, 유저 플로우를 완성할 수 있습니다.

정말... 좋네요...

Build

디자이너가 개발자에게 디자인을 전달하는 과정이 상당히 쉬워질 것 같습니다.

이미 개발자 모드가 나와서 VS Code에서 Figma 파일들을 접근할 수가 있는데요.

이를 통해 코드를 자동 생성하고 수정하여 디자인과 코드를 일치시킬 수가 있습니다.

디자인이 결과물에 제대로 반영하기 위한 많은 과정들이 훨씬 수월해지겠네요.

이걸 보고, 역으로 코드를 수정해서 디자인에 반영할 수 없나 라는 생각이 드네요.

양방향이 되면 엄청날 것 같은데...

Collaborate

이 과정에서 Figma는 협업을 중요하게 여깁니다.

조직 내 수십 가지의 파일과 수백 명의 '메이커' 혹은 디자인 파트너들과의 소통

조직 내에서의 코멘트나 여러 활동에 대해 요약해주고 관리해주는 기능들도 AI를 통해 쉽게 가능할 것입니다.

Diagram

이 다음은 Figma가 인수한 Diagram에서 세션을 진행합니다.

Diagram은 Figma에서 사용할 수 있는 각종 AI 플러그인을 개발해온 회사입니다.

Diagram은 (1)Plugin API, (2)Design Systems, (3)LLM 3가지로 AI툴을 만들 수 있게 되었습니다.

Diagram Plugins

Diagram의 제품에는 자동화(Automation)와 Intelligence 툴로 나누어 볼 수 있습니다.

지금도 사용가능한 툴들이라 한번 둘러보시면 좋을 것 같네요.

그중 Magician은 레이어 이름을 알아서 만들어주고, 만들고 싶은 아이콘을 프롬프트 입력하면 생성해주거나 하는 플러그인입니다.

제가 조사한 바에 의하면 이런 GPT 기반 AI플러그인 중에서는 가장 최고인 것 같더군요.

실사용을 해본 것은 아니지만, 나머지 플러그인들이 너무 조잡합니다...

Genius chat

그리고 가장 기대하게 만드는 Genius Chat입니다.

대화형 인터페이스에서 원하는 디자인을 말하면 자동으로 생성해주는 것 같습니다.

이번 세션에서는 현재 어느정도 수준인지만 보여주고 있습니다.

적어도 기존에 만들어둔 디자인을 기반으로 수정한다는 점만으로도 고무적입니다.

지금까지는 Gen-AI를 활용한 디자인은 편집이 불가능하게 만들어주거나 (jpg...) 전혀 관련이 없는 디자인 요소만 뽑을 수 있어 아무짝에 쓸모가 없었기 때문입니다.

그래서 이제 막 시작하는 Diagram과 Figma의 관계가 기대가 되네요.

마지막은 세션 내내 관통하고 있는 문구, "Still, We design"으로 막을 내립니다.

(아마도 AI가 디자이너를 대체하는 것 아니냐 식의 생각들을 의식한 것 같아요.)

닫는글

이렇게 Figma와 Diagram을 통해 디자인의 미래를 잠시나마 엿볼 수 있었습니다.

저도 디자이너로써 정말 기대가 되는 점들이 많네요.

읽어주셔서 감사합니다!