몰입의 시작, 썸네일 그래픽 | Simplicity 4 제작기 #4

안녕하세요, Simplicity 4에서 그래픽 디자인을 맡은 Graphic Designer 김경태, 김영하입니다.

이번 심플리시티 시즌4의 그래픽 제작을 진행하면서 느낀 고민과 경험들을 제작기를 통해 공유하고자 해요.

그래픽은 '몰입'의 시작점

여러분은 유튜브에서 영상을 볼 때 어떤 기준으로 선택하시나요? 아마 많은 분들이 썸네일을 보고 ‘볼지 말지’를 결정하실 거예요.

Simplicity도 마찬가지였어요. 영상으로 진행되는 온라인 컨퍼런스인 만큼, 그래픽 썸네일은 세션의 첫인상이자 몰입의 출발점이라고 생각했어요.

영상이 시작되기 전 가장 먼저 마주하게 되는 썸네일에서부터 몰입이 시작되는거죠. 그래서 그래픽 썸네일은 세션 내용만큼이나 중요한 요소였어요.

하나의 키비주얼이 아닌, 14개의 메타포

이번 시즌에는 ‘세션마다 전혀 다른 느낌의 썸네일을 만들자’는 방향으로 접근했어요. 기존 시즌에는 하나의 키비주얼을 바리에이션 했는데요. 통일성 있는 그래픽이라는 장점은 있었지만, 반대로 "모든 세션이 비슷해 구분하기 어렵다"는 피드백도 있었거든요.

그래서 이번에는 각 세션마다 완전히 다른 시각 언어와 메타포를 사용했어요. 이때 두 가지를 특히 신경썼어요.

단순히 아름다운 그래픽을 넘어서, 세션의 핵심 메시지를 시각적으로 풀어내고, 시청자가 다시 기억해낼 때도 내용과 함께 이미지가 함께 떠오를 수 있기를 바랐어요. 사람들은 텍스트보다 시각 정보를 더 빠르게 인지하고, 이미지와 언어가 함께 주어질 때 이해도도 높아지는 경향이 있거든요. 그래서 이번 시즌에는 세션 하나하나에 기억될 수 있는 대표 이미지를 만들어주고 싶었죠.

너무 직설적이지는 않되, 주제와 자연스럽게 연결될 수 있는 시각 언어를 찾는 게 중요했어요. 그리고 그 메타포를 어떤 질감, 구조, 방식으로 표현할지까지 함께 고민하면서 내용과 분위기를 함께 담아낼 수 있을지 고민했어요.

그 중 특히 기억에 남는 두 가지 사례를 소개할게요.

[모두가 유저를 만나는 순간까지]

이 세션은 점심시간을 활용해 사용자와 인터뷰할 수 있는 무물런치 프로그램(무엇이든 물어보세요) 제작기를 다루고 있어요. 그래서 '점심 식사'를 메타포로 접근해보았는데요.

친근하고 여유로운 심상을 담기위해 손그림 스타일로 시도해보기도 하고

보다 밀도감있는 일러스트 스타일로 시도해보았지만, ‘식사’나 ‘음식’이라는 메타포는 세션의 핵심을 충분히 전달하지 못했어요.

음식과 식사가 아닌 ‘점심 시간’을 활용한 사용자 인터뷰라는 본질에 더 주목해보고 싶었죠. 그래서 ‘무물런치’ 일정이 실제 캘린더 상에 표기된 모습을 메타포로 설정하고 캘린더 ui를 활용해 시안을 제작했어요. 캘린더의 구조를 포크나 햄버거같은 모양으로 만들어보면서 점심 ‘식사’의 심상을 더해보기도 하면서 시안을 발전시켜 나갔어요.

최종적으로 캘린더와 포크를 형상화한 시안으로 결정했고, 하나의 메타포 안에서 ‘식사’와 ‘대화'의 개념을 동시에 표현해낼 수 있었어요.

[디자인 조직의 개발자들]

이 세션은 디자인 조직 안에서 아름다운 경험을 구현하는 데 집중하는 인터랙션 개발자의 이야기를 다루고 있어요. 처음엔 인터랙션을 상징할 수 있는 기하학적인 형태나, 사람의 실루엣, 조직의 모습 등 은유적으로 접근해봤어요. 그런데 ‘개발자’라는 직군을 시각적으로 담아내기엔 아쉬움이 있더라고요.

그래서 조금 다른 방향으로 접근하기로 했어요. 코드 에디터의 구조와 컬러를 시각적으로 풀어보기로 했죠. 개발자들이 다루는 코드의 컬러와 패턴을 닮아 보이도록 반복되고 분절되는 도형 구조로 만들어봤어요.

테스트 시안들을 통해 개발코드를 그래픽 요소로 충분히 활용할 수 있겠다는 생각이 들었어요. 그래서 아예 실제 코드 화면을 그래픽 재료로 활용하기로 했어요. 여기에 Slitscan 기법으로, 코드를 반복시켜서 마치 빛으로 이루어진 커텐처럼 쭉 - 늘어난 형태를 만들었죠.

세션의 내용처럼 아름다운 경험의 뒤에는 디자인을 언어로 구현하는 개발자들의 섬세한 손길이 있다라는 메세지를 전달하고자 했어요. 그래서 빛줄기가 개발코드로 바뀌어보이는 애니메이션을 연출로 의도를 강화하기도 했죠. 기술과 미감을 상징하는 포인트들이 동시에 드러나길 바랐던 작업이었고, 그 균형이 잘 표현된 것 같아 만족스러운 결과물 중 하나예요.

이렇게 만들었어요: AI와 수작업의 협업

각 세션의 주제를 해석하고, 어떤 메타포로 표현할지를 탐색하는 과정에서 AI 도구를 적극적으로 활용했어요. GPT로는 각 세션 주제에 맞는 시각적 메타포를 브레인스토밍하거나, 어떤 은유적 소재들이 적절할지를 빠르게 아이디어로 정리하기도 하고 Midjourney나 Runway로는 스타일 테스트와 이미지/모션 시안을 폭넓게 실험했죠.

같은 콘셉트를 10가지 스타일로 바로 돌려보며 그래픽 스타일을 비교해보기도 했어요. Runway에서는 이미지 기반의 짧은 루프 애니메이션도 테스트 해보고요. 덕분에 “이런 질감이 실제 인터랙션 안에서 어떻게 느껴질까?”를 짧은 시간 안에 감각적으로 검증할 수 있었던 것 같아요.

하나의 경험으로 설계하기

이번 시즌에서 중요한 점 중 하나는, 전체 세션이 하나의 톤앤무드와 흐름으로 이어지는 경험을 만드는 것이었어요. 개별 그래픽의 퀄리티도 물론 중요했지만, 전체적인 조화도 신경써야 했죠. 그래서 ‘가장 멋진 시안’을 고르기보다는, 모든 세션이 함께 놓였을 때 자연스럽게 녹아드는 시안을 고르는 걸 더 우선으로 뒀어요.

단독으로는 인상적인 시안도 다른 것들과 함께 놓였을 땐 톤이 너무 튀거나, 흐름을 끊는 느낌을 줄 때가 많았거든요. 그래서 14개의 키비주얼을 한 시트에 정리하고 메타포 표현 방식, 그리고 레이아웃, 색감 등을 비교해가며 시안을 수정하고 재조합하는 과정을 반복했어요.

또한 홈페이지 진입 시 등장하는 인트로 애니메이션 역시 전체 흐름 속에서 UI 구조를 어떻게 자연스럽게 이어줄 수 있을지를 가장 우선에 두고 작업했어요. Simplicity의 홈은 시원하게 펼쳐진 카드 UI가 특징인데요. 인트로에서도 이 구조를 더 직접적으로 느낄 수 있도록 카드를 중심으로 전체 화면이 자연스럽게 확장되는 흐름을 최우선의 목표로 두고 테스트했어요.

인트로 애니메이션의 최종안은 페이지 진입 시에 타이틀 모션과 함께 잔잔한 파동과 함께, 블러하면서 리퀴드한 질감으로 이어지도록 연출했어요. 이펙트의 형태가 사각형을 이루면서 카드의 엣지와 형태로 완성되며 UI 로의 자연스러운 흐름을 이어가고자 했어요.

그리고 줌아웃되면서 카드를 매개로 시선이 자연스럽게 이어지고, 홈 화면으로 자연스럽게 확장하는 전개로 구성하는 방식으로 제작했어요.

마무리하며

Simplicity는 매 시즌 새로운 세션과 그래픽을 만들어야 하는 구조다보니, 모든 걸 매번 손으로 처음부터 만드는 방식만으로는 오래가기 어렵다는 걸 점점 더 실감하게 됐어요.

이번 시즌에는 그런 한계를 조금이라도 줄여보고자, 머신러닝 팀 동료와 함께 ComfyUI를 커스텀해서 참고 이미지만으로 빠르게 스타일 테스트가 가능한 모델을 만들어서 실험해보기도 하고, 그 외에도 다양한 AI 도구들의 도움을 받았어요.

덕분에 초반 탐색에서 시행착오를 줄일 수 있었고, 전체 스타일 방향도 훨씬 빠르게 정리할 수 있었는데요. 퀄리티는 유지하면서도,조금 더 지속 가능한 제작 방식으로 나아가는 출발점이 되었던 시즌이 되었던 것 같아요.

다음 시즌엔 또 다른 방식으로, 지금보다 조금 더 새로운 방향으로 접근해보고 싶어요. 앞으로도 Simplicity의 그래픽을 기대해주세요!