안녕하세요!
Simplicity 4에서 그래픽 디자인을 맡은 디자이너 김경태, 김영하입니다.
이번 시즌 그래픽 작업을 진행하면서 느낀 고민과 시행착오, 그리고 그 과정 속에서 얻은 인사이트들을 공유해보려 해요.





14개의 세션을 하나의 인상으로

이번 시즌의 Simplicity의 홈페이지의 초안은 14개의 세션 카드로 구성된 레이아웃으로 이루어져 있어요.
각 세션 카드들이 비교적 큰 스케일로 나열되어 있는 형태이기 때문에, 기존처럼 하나의 키비주얼로 전체를 묶는 방식은 적절하지 않다는 생각이 들었어요.


그래서 이번 시즌에서는 14개의 키비주얼이 각각의 세션을 대표하면서, 14개의 그래픽이 모여있는 모습을 통해 컨퍼런스 전체의 인상을 전달하기로 했어요.

먼저 이 많은 세션들을 관통하는 키워드인 ‘Vision-Driven-Design’ 을 드러내기 위해 해당 키워드를 가장 잘 표현할 수 있는 룩앤필(Look & feel)을 찾아야했어요.


룩앤필을 찾아가는 과정에서 너무 많은 시간을 할당하다보면 작업에 매몰되는 경우가 많아요. 그래서 탐색의 단계에서는 짧은 시간 안에 많은 효과적인 시도를 할 수 있도록 AI툴을 활용하기로 했어요.



AI와 함께 협업하기

Step 1. AI로 무드보드 구체화하기

키비주얼의 역할은 사용자가 홈페이지에 진입했을 때 각 세션의 무드와 맥락을 시각적으로 전달하는 것이에요.
또한 세션을 본 이후에도 내용과 이미지가 자연스럽게 결합되어 기억에 남을 수 있어야 한다고 생각했어요. 
그래서 단순한 비주얼 스타일을 넘어서, 맥락을 담을 수 있는 비주얼 메타포을 찾아야 했어요.


먼저 14개의 세션의 내용을 숙지한 뒤, 핵심 키워드를 정리하고 이를 ChatGPT와 공유하면서 주제에 어울리는 시각적 키워드들을 함께 도출했어요.
이렇게 정리된 키워드들과 함께 Midjourney, Runway, ComfyUI 등 다양한 생성형 AI 툴을 활용해 각 세션의 스타일과 분위기를 탐색했고, 이러한 과정을 여러 번 반복하면서 무드보드의 방향성을 구체화해갔어요.



 


Step 2. AI로 도출한 키워드, 비주얼라이즈하기

무드보드를 구체화한 이후에도, 실제 작업 단계에서도 AI와 함께 시각적 메타포를 탐색하고 직관적으로 다듬는 과정은 계속 이루어졌어요.

점심시간을 활용하여 진행되는 사용자 인터뷰를 다룬 세션을 예로 들어볼게요. 처음엔 단순하게 식사를 키워드로 접근해봤어요.


다른 시안은 식사가 아닌 시간이라는 맥락에 집중해서, 실제 캘린더에 인터뷰가 기록되는 모습을 참고해 캘린더 UI를 메타포로 시안을 제작하기도 했어요. 식사에 집중했던 시안보다 주제에 훨씬 더 가까워진 모습이죠.




디자인 조직 안에서 아름다운 경험을 구현하는 인터랙션 개발자의 이야기를 다뤘던 세션 또한 동일한 방식으로 진행했어요.
처음엔 인터랙션을 상징하는 기하학적 형태나, 개발자의 실루엣을 시각메타포로 접근해봤죠.


이후에는 개발자를 더 직관적으로 표현해낼 수 있는 코드 에디터의 구조와 컬러를 메타포로 추가로 도출했죠.
그리고 코드에디터의 형태를 반복되고 분절된 도형 구조로 패턴으로 시각화하는 작업을 진행했어요.


여기에 Slitscan 기법을 더해, 텍스트가 빛으로 만들어진 커텐처럼 쭉- 늘어지는 연출과 “디자인을 언어로 구현하는 개발자의 손길”이라는 메시지를 강화하기 위한 장치로 빛줄기가 개발 코드로 바뀌는 애니메이션을 부여했어요.



이처럼 실제 작업단계에서도 하나의 키워드만 깊게 파기보단, AI를 활용해 여러 키워드를 비주얼라이즈하면서 
각각의 키워드가 주제와 얼마나 직관적으로 연결되는지를 비교해가며 시안을 다듬어나갔어요.



UI와 결합된 인트로 애니메이션 만들기

이번 시즌의 심플리시티는 14개의 세션이 모여 1개의 키비주얼로 이루어지는 구조로 구성되어있기 때문에
인트로 애니메이션은 특정 그래픽 스타일을 드러내지 않으면서도, 세션카드가 나열된 홈페이지로 자연스럽게 이어지는 구조로 설계되어야 한다고 생각했어요.


그래서 비주얼을 강조하기보다, 연결 지점으로서의 역할에 집중하기로 했어요.
먼저 14개 세션에 스며드는 듯한 심상을 전달하기 위해 Mission-Driven-Design의 타이틀이 합쳐지면서 확장되는 애니메이션을 설계했죠.


추가로, 별개의 영상에서 끝나는 것이 아닌 홈 화면의 카드 UI 구조와 연결된 흐름으로 이어지도록 설계했어요.
타이포 애니메이션과 함께 일어나는 파동
리퀴드하고 블러한 이펙트가 화면에 번지면서
엣지라이트로 세션 카드들의 형태가 드러나고
엣지라이트의 opacity값이 낮아짐과 동시에 줌아웃되며 홈페이지로 돌아옴


타이틀 → 파동 → 카드 형태로 확장 → 홈 UI 연결

비주얼적 임팩트는 물론, 그래픽에서 UI로 자연스럽게 이어지는 구조를 더하면서 진입하는 순간부터 하나의 경험으로 느껴지는 형태로 제작할 수 있었어요.





마무리하며
Simplicity는 매 시즌 새로운 세션과 그래픽을 만들어야 하는 구조다보니, 모든 걸 매번 손으로 처음부터 만드는 방식만으로는 오래가기 어렵다는 걸 점점 더 실감하게 됐어요.
이번 시즌에는 그런 한계를 조금이라도 줄여보고자, 머신러닝 팀 동료와 함께 ComfyUI를 커스텀 모델을 만들어서 실험해보기도 하고, 토스 그래픽 ai인 토스트뿐만 아니라 여러 생성형 ai를 활용해보는 등 다양한 AI 도구들을 활용하며 진행했어요.
덕분에 초반 탐색에서 시행착오를 줄일 수 있었고, 전체 스타일 방향도 훨씬 빠르게 정리할 수 있었는데요. 퀄리티는 유지하면서도, 지속 가능한 제작 방식으로 나아가는 출발점이 되었던 시즌이 되었던 것 같아요.
다음 시즌엔 또 다른 방식으로, 지금보다 조금 더 새로운 방향으로 접근해보고 싶어요. 앞으로도 Simplicity의 멋진 그래픽 비주얼을 기대해주세요!






안녕하세요!
Simplicity 4에서 그래픽 디자인을 맡은 디자이너 김경태, 김영하입니다.
이번 시즌 그래픽 작업을 진행하면서 느낀 고민과 시행착오, 그리고 그 과정 속에서 얻은 인사이트들을 공유해보려 해요.





14개의 세션을 하나의 인상으로

이번 시즌의 Simplicity의 홈페이지의 초안은 14개의 세션 카

Simplicity4의 그래픽, 어떤 고민을 하며 만들었을까요? 14개의 세션을 하나로 잇기 위한 시각 메타포, 그리고 그 제작 방식을 공유할게요.

세션을 대표하는 키비주얼 그래픽 | Simplicity 4 제작기 #4

토스페이먼츠 레거시 개편 이야기

멈춰있던 PG 시스템의 시간을 다시 흐르게 한 스토리

SLASH 24

언더커버 사일로

토스의 서바이벌 예능 <언더커버 사일로>의 비하인드 스토리

Simplicity 4

토스 디자인 컨퍼런스 Simplicity 4의 비하인드 스토리

접근성 업무일지

토스의 접근성 이야기기를 들려드려요.

토스 피플

토스증권 Realtime Data

하루 수 조원의 금융거래를 실시간으로 정확하게 처리하는 기술과 경험을 소개합니다.

아티클 시리즈