ChatGPT와 함께하는 크리에이티브 코딩 도전기
작년, 대화형 인공지능 챗봇인 ChatGPT가 출시되면서 해외뿐만 아니라 국내에서도 엄청난 화제가 되었죠.
ChatGPT가 정확히 모르시는 분들에게 간략하게 소개드리자면, ChatGPT는 OpenAI가 개발한 프로토타입 대화형 인공지능 챗봇으로, 학습된 대형 언어모델로 다양한 지식 분야에서 상세한 응답과 정교한 답변을 줄 수 있는 툴입니다.
비록 현재 무료로 서비스되고 있는 GPT 3.5 모델에서는 21년도 9월까지의 지식밖에 학습되지 않아 최신 정보나 실시간 정보에 대한 접근이 어렵고, 사실 기반의 정보는 신뢰성이 굉장히 떨어진다는 단점이 있으나 현재 저는 아래와 같은 분야에서 실무에 적용하고 있습니다.
1. 텍스트 작성
많은 시간을 투자할 수는 없지만 전문성 있게 보여야 하는 이메일 작성부터, 다양한 아이디어들이 빠르게 많이 검토해야 하는 브랜드 슬로건이나, 캐치 프레이즈 같은 문구 작성에도 굉장히 효율적입니다. 아래와 같은 예를 들 수 있겠습니다.
MZ 세대의 소비문화를 타겟팅하는 신용카드를 위한 슬로건을 제작하려고 해. 서로 다른 아이디어 20개를 제시해 줘.
일반적인 사람이라면 최소 반나절이 걸릴 일을 ChatGPT는 몇 초만에 작성해 주고 이미 작성한 문구들을 이해하고 수정시킬 수 있습니다.
2. 리서치
ChatGPT를 활용한 리서치는 사실 증명이 어렵기 때문에 조금은 위험한 방법이기는 합니다만, 사실 체크가 어렵지 않은 단순 리서치에는 빛을 발할 수 있습니다. 예를 들면 아래와 같습니다.
탑 자동차 브랜드 10개와 각 브랜드에서 가장 잘 나가는 SUV 모델을 리스트업 해줘.
물론 이런 정보는 상시 변동될 수 있고, 정확하지 않기 때문에 다시 실제 리서치를 통해 재검점을 하는 과정이 반드시 필요합니다.
3. 번역
저는 개인적으로 ChatGPT를 가장 많이 활용하는 순간이 번역을 할 때입니다. Google Translate나 Papago 같은 번역 서비스의 경우, 문법에 맞춰 번역은 잘해주지만 사용된 단어에 동음이의어가 있거나, 전문분야에서 사용되는 용어일 경우 번역 오류가 빈번하게 발생합니다. 하지만 ChatGPT는 이런 오류를 바로잡아주기만 하면, 이전 대화의 맥락을 이해하여 다음 번역에서는 전문 번역가에 가까운 수준으로 번역을 하는 모습을 보여줍니다. 번역에 필요한 비용과 시간도 줄이고, 원문의 의도로 더 정확하게 할 수 있는 것이죠.
4. 새로운 지식 영역 탐구
서론이 길었지만, 사실 이번 글에서 보여드리고자 하는 내용이 바로 이 네 번째 항목에 해당하는데요, ChatGPT의 최대 강점은 새로운 무엇인가를 배우기 위해 필요한 노력과 시간을 획기적으로 단축시켜 준다는 것입니다.
저의 경우 그런 예시가 바로 코딩이었는데요. 국내외적으로 코딩과 디자인을 접목하는 시도가 아직 시작 단계이기 때문에, 리소스가 제한되어 있고, 어떠한 결과물을 도출하기 위해 필요한 학습의 양과 시간의 효율이 굉장히 떨어졌습니다. 그래서 ChatGPT가 출시된 이후 몇 달간 이 분야에 대한 다양한 시도를 해보았고, 이번 글에서는 그런 시도로 얻은 결과물들과 일부 노하우들을 공유드리고자 합니다.
크리에이티브 코딩이 뭔데?
크리에이티브 코딩(Creative Coding)은 예술적 표현을 위해 컴퓨터 프로그래밍을 활용하는 방법입니다. 이 방법에서는 목표가 미리 정의되어 있지 않으며, 과정은 주로 예상치 못한 결과물을 발견하고 변형하며 탐구하는 기반 위에 있습니다.
이제까지의 크리에이티브 코딩은, 예상치 못한 결과물을 생성해 내는 것 자체에 큰 의미가 있었다면, 최근에는 이런 코드를 활용한 다양한 시도들이 고도화됨에 따라 브랜딩 프로젝트와 철저하게 통제된 시스템이 필요한 영역에도 점차 적용되어나가고 있는 추세입니다. 이미 Pentagram, Collins와 같이 해외 탑 디자인 에이전시들은 기존의 정적이고, 보여주기만을 위한 디자인을 넘어서, 코딩을 통하여 브랜드를 보다 입체적으로 표현하는 시도들이 이루어지고 있습니다.
사례 1
Collins의 SF Symphony 아이덴티티
음악에 따라 글자의 높이와 기울기가 다양하게 변화하는 SF Symphony는 아이덴티티는 로고뿐만 아니라 인쇄물, 디지털 매체들에 활용되며 브랜드 아이덴티티를 더욱 입체감 있게 표현합니다.
사례 2
Dia의 Squarespace 아이덴티티
Dia는 코드를 활용한 시각적 효과와 아이덴티티의 가능성을 업계에 처음으로 보여준 스튜디오입니다. 웹빌더 플랫폼, Squarespace를 위한 아이덴티티는 2018년도 당시에도 많은 디자이너들에게 큰 충격을 주었습니다.
어떻게 시작해야 할까?
ChatGPT와 크리에이티브 코딩을 활용 예시를 살펴보았으니, 이제 어떻게 만들어야 할지 봐야겠죠?
저는 P5js와 Processing이라는 두 가지 툴을 주로 사용하는데, 최근에는 웹에서 접근성이 좋은 P5js를 좀 더 활용하고 있습니다.
아래는 제가 지난 두 달, P5js를 활용해 만들어본 예제들입니다.
이렇게 코드를 활용하면 마우스의 커서 위치나, 마이크를 활용한 외부 사운드와 같이 다양한 인풋을 통해 사용자가 직접 시각적 결과물에 영향을 끼칠 수 있습니다. 하나의 완성된 영상으로 끝나는 기존의 모션그래픽과 달리 사용자에게 입체적인 경험을 줄 수 있죠.
직접 만들어봐요!
간단한 예제로 스위스 연방철도의 시계 디자인을 디지털로 구현해보려고 합니다.
우선 ChatGPT를 켜서 무엇을 어디에서 만들고자 할 것인지 알려줍니다.
P5js 웹 에디터 초기 화면ChatGPT가 작성해 준 코드를 우측 상단의 Copy code 버튼을 눌러 복사해 준 후,
p5js 웹 에디터를 열어서 코드를 복사해 줍니다.
짜잔! 전혀 엉뚱한 형태의 시계가 탄생했습니다. ChatGPT가 스위스 철도연방의 간결하고 명확한 디자인으로 유명하다고 한 것을 보니, 실제 시계 디자인이 아닌 간결한 형태의 추상적인 시계를 임의로 만든 것 같습니다.
다시 코드 작성을 요청해 보겠습니다.
이번엔 꽤나 정상적인 시계의 모습으로 나왔습니다. 하지만 우리가 원하는 시계의 형태와는 거리가 아직 멀어 보입니다. 아쉽게도 ChatGPT 3.5 버전에서는 이미지를 통한 학습이 불가능하기 때문에, 이런 경우에는 디테일한 디렉션을 ChatGPT에게 직접 전달해줘야 합니다.
다행히도 우리가 생각했던 디자인과 굉장히 유사해지고 있습니다. 이제 몇 가지 디테일들만 추가해 보면 좋을 것 같습니다.
초에 해당하는 눈금은 추가되었는데, 초침의 끝에 달아둔 추가 사라지고 요청했던 획의 라운딩 처리 삭제도 잘 이루어지지 않았습니다. 이런 경우 새로운 프롬프트를 새롭게 작성해도 되지만, ChatGPT가 우리가 요청하지 않은 또 다른 실수를 할지 모르기 때문에 이전으로 돌아가 디렉션을 좀 더 디테일하게 수정해 보겠습니다.
프롬프트를 입력한 곳의 우측을 보면 수정버튼이 있습니다.
버튼을 누르면 새로운 프롬프트를 작성할 필요 없이 기존 프롬프트를 수정할 수 있습니다.
초 눈금과 시 눈금이 동일한 기준선에서 시작하도록 요청했는데, 디렉션이 어려웠는지 정확히 이해 못 한 모양입니다.
거의 다 온 것 같습니다! 이제 시 눈금의 두께가 일정하지 않은 것만 수정해 보겠습니다.
짜잔! 획의 두께나 길이는 조정해야겠지만 별도의 코드 작성 없이 우리가 원했던 스위스 연방철도 시계의 디자인과 굉장히 유사하게 제작이 되었습니다. 추가적인 디테일들 또한 ChatGPT를 통해 수정할 수 있으나, 여기서부터는 또 다른 변수가 생기는 것을 방지하고, 시간 단축을 위해서 직접 코드를 수정하는 것이 편리합니다.
ChatGPT는 위의 이미지처럼 기본적으로 주요 코드마다 주석을 달아주지만, 코드에 대한 기본 지식이 없는 경우, 이해에 어려움이 있을 것입니다. 이를 위해 추가적인 주석을 요청해 보겠습니다.
이제 코드의 모든 줄마다 주석이 달렸습니다. 저희는 이제 수치만 조정하면 됩니다.
https://editor.p5js.org/jmlee9762/full/1wMJ2Blug
짜잔! 어떠신가요? 코드에 대한 지식이 전혀 없어도 저희가 원했던 레퍼런스가 굉장히 흡사한 디지털시계를 디자인했습니다. 물론 추가적인 디테일들이나 더하거나 응용을 하기 위해서는 별도의 코드 공부가 필요하지만, ChatGPT의 도움이 없었더라면 이 결과물을 내는데도 상당한 시간이 필요했을 것입니다.
함께보면 좋을 자료
OpenProcessing
OpenProcessing은 Processing을 활용한 다양한 예제들을 전세계에서 공유하는 플랫폼입니다. 새로운 아이디어가 고갈되었을때 참조하기 좋은 사이트에요.
Inscript Collective
Type Directors Club을 비롯한 여러 타이포그래피 단체에서 매년 운영하는 컨퍼런스로, 타이포그래피와 코딩을 결합한 작업물들로 업계를 선두하는 디자이너들의 작업 과정과 비하인드 스토리를 볼 수 있습니다.
https://www.instagram.com/inscript.tf/
마치며
최근 다양한 인공지능(ai) 기반의 툴들이 나오기 시작하면서, 일자리를 잃는 것에 대한 공포감이 확대되고 있는 것 같습니다. 하지만, 오늘날 우리의 이런 모습은 카메라의 탄생을 두려워했던 화가들의 모습 하고도 닮았다는 생각이 드는데요. 도구는 도구일 뿐, 명확한 규제와 이를 잘 활용할 수 있는 시야만 갖출 수 있다면 우리가 이전까지 보지 못한 새로운 미래를 그릴 수 있지 않을까 싶습니다.
이번 글이 구독자분들에게 작게나마 새로운 시야를 보여주었길 기대하며, 글을 마칩니다 :)
