안녕하세요, 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의 그래픽을 기대해주세요!



안녕하세요, Simplicity 4에서 그래픽 디자인을 맡은 Graphic Designer 김경태, 김영하입니다. 
 이번 심플리시티 시즌4의 그래픽 제작을 진행하면서 느낀 고민과 경험들을 제작기를 통해 공유하고자 해요.

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

여러분은 유튜브에서 영상을 볼 때 어떤 기준으로 선택하시나요? 아마 

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

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

안녕하세요, 토스 코어 Teens Growth Silo의 서버 개발자 조민규입니다. 

서비스를 개발하다 보면 클라이언트의 호출에 의한 에러가 발생합니다. 클라이언트는 반환된 에러 메시지를 통해 발생 원인을 파악하고 해결할 수 있어야 하는데, 대부분의 경우 오류 메시지가 불친절하거나 혹은 보안적 이슈로 추상화되어 본질적인

LLM으로 에러 원인 분석과 해결 방안 제시까지 자동화하고, 팀의 생산성을 향상시킨 이야기를 들려드립니다.

Flowise와 LLM을 활용한 에러 분석 자동화


빠르게 쌓이는 PR, 느리게 달리는 리뷰. 결국 남는 건 LGTM(Looks Good To Me)뿐이라면?
이번 모닥불에서는 토스 프론트엔드 챕터가 어떻게 코드 리뷰 문화를 활성화했는지 알려드릴게요.
‘고맥락자 코드 리뷰’ 부터 ‘코드스멜 워킹그룹’, ‘가독성 위원회’ 그리고 ‘코드 리뷰 배틀’ 까지
실전에 적용해 볼 수 있는 다양한 코드 리뷰 꿀팁들, 지금 바로 공개합니다!

타임스탬프
00:00 인트로
01:40 코드 리뷰, 왜 필요한가요?
02:22 저맥락자 vs 고맥락자 리뷰
08:56 코드 스멜 워킹그룹 그리고 가독성 위원회
11:20 좋은 코드의 4가지 기준!
14:29 코드 리뷰 배틀 Ssul

출연진
박서진, 토스 Head of Frontend
진유림, 토스 Frontend Developer
전환오, 토스 Frontend Developer

Frontend Fundamentals
; 변경하기 쉬운 프론트엔드 코드를 위한 지침서
👉바로가기: https://frontend-fundamentals.com

다른 모닥불 회차 보러가기
EP.10 캠프파이어 특집 상편 | 무엇이든 물어보세요 (feat. 프론트엔드 코드, 디렉토리 관리)
EP.10 캠프파이어 특집 하편 | 무엇이든 물어보세요 (feat. 테스트 코드, ESLint Rule)
EP.11 토스의 디자인 편집기 ‘데우스’, 이렇게 만들었어요!




빠르게 쌓이는 PR, 느리게 달리는 리뷰. 결국 남는 건 LGTM(Looks Good To Me)뿐이라면?
이번 모닥불에서는 토스 프론트엔드 챕터가 어떻게 코드 리뷰 문화를 활성화했는지 알려드릴게요.
‘고맥락자 코드 리뷰’ 부터 ‘코드스멜 워킹그룹’, ‘가독성 위원회’ 그리고 ‘코드 리뷰 배틀’ 까지
실전에 적용해 볼 

이번 모닥불에서는 토스 프론트엔드 챕터가 어떻게 코드 리뷰 문화를 활성화했는지 알려드릴게요.

‘고맥락자 코드 리뷰’ 부터 ‘코드스멜 워킹그룹’, ‘가독성 위원회’ 그리고 ‘코드 리뷰 배틀’ 까지실전에 적용해 볼 수 있는 다양한 코드 리뷰 꿀팁들, 지금 바로 공개합니다!

코드 리뷰할 시간이 어딨어요? 모닥불 | EP.12

AI 시대에 디자이너는 어떤 모습일까요?
한번 쯤 이런 생각 해보지 않으셨나요? UI가 더 이상 필요 없어지거나, 로봇이 모든 일을 대신하는 날이 오면, 디자이너는 어떤 역할을 하게 될까?
저도 같은 고민을 하다가 반대로 생각해 보기로 했어요. 언젠가 사라질 운명이라면, 차라리 그 미래를 앞당겨서 직접 경험해보기로요. “미래를 예측하는 가장 좋은 방법은 미래를 만드는 것이다”라는 말도 있잖아요.
그래서 조금 파격적인 목표를 세웠어요. 
바로 ‘디자이너 없애기’
제가 팀에서 빠지더라도 아무 문제 없이 돌아가는 시스템을 만들어보는 실험이었어요.
어떻게 했을까요?


반복되는 작업을 '규칙'으로 정의하기
저는 제휴를 맺은 회사들과 돈을 주고받는 정산 업무를 맡고 있는 팀에 있었어요. 문제는, 회사마다 수수료 계산 방식이 모두 달라서 매번 비슷한 일을 반복해야 했다는 거예요. 팀 인원이 아무리 많아도 일손이 부족한 구조였어요.
그래서 생각했죠.
"매번 다른 방법으로 하지 말고, 공통된 규칙을 찾아보면 어떨까?"
예를 들어, 어떤 제휴사는 사용자가 토스를 통해 대출을 많이 받으면 더 많은 수수료를 지급하고, 덜 이용하면 적은 수수료를 주는 구조였어요. 이런 유사한 계약들을 묶어 ‘구간별 수수료율’이라는 하나의 규칙으로 정리했더니, 여러 회사의 정산을 모두 같은 방식으로 처리할 수 있게 됐어요.
이런 식으로 복잡한 계약들을 표 하나로 정리하면서, 매번 새로 디자인하지 않아도 되는 구조 가 만들어졌어요. 이 시스템이 없었다면 지금도 저는 비슷한 화면 수백 장을 계속 만들고 있었을지도 몰라요.


규칙을 시스템화 하기
규칙을 만든지 반년쯤 지난 어느 날, 신기한 광경을 목격했어요. 프론트엔드 개발자가 저 없이도 UI를 만들고 있는 거예요. 디자인에 관심이 있는 개발자이기도 했지만, 디자이너 없이 돌아가는 시스템을 만들었다는 작은 성공의 신호였던 것 같아요. 물론 제가 디자인하는 시간도 매우 줄어들었고요. 
제가 생각한 다음 단계는 스펙을 작성하는 것조차 없애는 것이었어요. 보통 디자인하기 전에 제품의 요구조건 문서를 만들잖아요. 이것도 시스템화 할 수 있을 것 같았어요. 정산 서비스를 요청하는 임직원이 몇 가지 설문에만 답하면 그 정보를 토대로 UI가 자동 생성되도록 매핑 시스템을 만들었죠. 완전히 자동화되진 않았지만, 어시스턴트 디자이너 혼자 작업할 수 있을 만큼은 되더라고요.
이쯤 되니 진짜로 ‘디자이너를 없앤다’는 실험이 현실이 되어가고 있다는 느낌이 들었어요.


시스템을 AI 한테 맡기기
누구나 디자인할 수 있는 시스템을 갖추고 나니, ‘이 시스템을 돌리는 주체가 꼭 사람이어야 할까?’ 라는 생각이 들었어요. 지금은 AI가 MCP(Model Context Protocol - AI와 제품이 소통할 수 있는 표준화된 소통 체계)를 통해 디자인 툴을 다루는 시대잖아요. 게다가 토스에서는 직접 디자인툴을 만들어 사용하기 때문에 어떠한 제약도 없이 다양한 시도를 해볼 수 있어요. 
아직은 바로 사용할 만한 수준의 화면을 만들지는 못하지만, 괜찮은 시스템이 정의되어 있다면 AI는 꽤 준수한 결과물을 만들어내더라고요. 그래서 앞으로 사람은 모두 시스템을 만들고, AI가 그 시스템을 활용해 제품을 만들게 되는 날이 올 것이라고 생각했어요.


디자이너, 이제는 시스템을 설계하는 사람
처음엔 내가 필요 없을 정도로 잘 작동하는 시스템을 만든다는 게 두렵기도 했어요. 하지만 역설적으로, 그렇게 해보니까 디자이너가 할 수 있는 더 본질적이고 가치 있는 일들이 보이기 시작했죠.
이제는 누구나 UI를 만들 수 있는 시대예요. 우리가 지금 ‘UX 디자인’이라고 부르는 일도 머지않아 버튼 하나 그리는 것처럼 간단한 작업이 될지도 몰라요. 디자이너가 오랜 시간 고민하던 일들도 더 이상 우리의 고유 영역이 아닐 수 있죠.
그렇기 때문에, 앞으로 디자이너의 역할은 직접 디자인하는 것이 아니라 AI가 나보다 더 뛰어난 결과물을 만들 수 있도록 원칙과 시스템을 설계하는 것이라고 생각해요.
즉, 하나의 일을 잘 해내는 사람보다,누구라도 제품을 만들 수 있게 틀을 만들 수 있게, ‘시스템적 사고’를 갖춘 디자이너가 필요한 시대가 오고 있는 거예요.


조직의 러닝이 순환되는 구조 만들기
이건 저의 사례일 뿐이고, 토스엔 이런 경험을 하고 있는 동료들이 많아요. 이런 노하우를 서로 빠르게 공유하고, 챕터 차원에서 러닝이 축적되는 조직을 만들고 싶었어요.
예전에 저는 ‘그룹 권한’ 기능 없이 제품을 설계했다가, 나중에 꼭 필요한 상황이 생기면서 서버 구조까지 갈아엎는 큰 비용을 치른 적이 있어요. 당시엔 초기 제품이라 단순하게 시작하고 싶었고, 필요 없을 거라 판단했었거든요. 돌아보면, 제가 토스 안의 더 고도화된 계정 체계를 알고만 있었더라도 ‘그룹 권한’은 반드시 필요해질 기능이라는 걸 미리 예측할 수 있었을 거예요.
그래서 다른 사람들은 비슷한 실수를 반복하지 않고, 이런 노하우를 더 빠르게 습득할 수 있으면 좋겠다는 생각이 들었어요. 사실 계정 권한 같은 구조를 직접 설계해본 디자이너는 많지 않잖아요. 디자이너는 예상보다 자주, 처음 해보는 구조나 흐름을 직접 정의해야 하는 상황을 마주하게 돼요. 데이터 CRUD(Create, Read, Update, Delete)는 어떤 방식으로 구현하는 게 최선일지, 앱 미리보기는 어디에, 어떻게 노출하는 게 좋을지 등도 그렇죠. 그래서 저는 이런 러닝들이 잘 축적되고 공유되는 조직을 만들고 싶었어요.
이제는 작은 단위의 디자인 시스템을 넘어, 챕터 전체가 중요한 의사결정이나 노하우를 공유할 수 있는 'UX 시스템'이 필요하다고 생각했어요. 이를 통해 우리 각자의 러닝이 단순히 공유되는 것을 넘어서, 계속 누적되어 성장하는 사이클을 만드는 것이 올해의 목표예요.


토스가 툴을 직접 만드는 이유
이런 시스템을 잘 구축하려면, 비슷한 고민과 목표를 가진 사람들이 모여 다양한 제품을 함께 만들어갈 수 있는 환경이 꼭 필요해요. 토스는 구성원 모두가 최고의 효율을 낼 수 있도록, 우리가 일하는 방식에 딱 맞는 각종 툴을 직접 만들고 있어요. 어떤 툴을 쓰느냐는 곧 우리의 일하는 방식과 생산성을 좌우하니까요. 게다가 토스는 금융 기업이라 고객 데이터를 외부에 맡길 수 없는 환경적인 제약도 있어요. 이런 이유들로 자연스럽게 내부에서 필요한 툴을 직접 개발하는 문화가 자리 잡았고, 이 툴들은 전담 역할인 Product Designer (Tools)가 만들고 있어요.
만드는 툴의 범위도 정말 상상 이상인데요. 데이터 분석 툴, 디자인 툴 리스크 모니터링 툴, 검토 프로세스 툴, 상담 관리 툴, 광고 관리 툴, 쇼핑 상품 관리 툴, 정산 툴, 컴플라이언스 툴, 업무 자동화 툴, 리서치 자동화 툴 등 생산성 툴만 수십가지가 있으며 계속 늘어나고 있어요. 
가끔은 솔직히 ‘다른 회사처럼 SaaS 툴 사서 쓰면 편할텐데’라는 생각도 들어요. 그 많은 기능을 새로 다 만드는 게 엄청 챌린징하거든요. 근데 이런 환경 덕분에 우리가 일하는 방식에 맞게 최적화할 수 있고, 필요한 기능은 빠르게 구현할 수도 있어요. 덕분에 디자이너들은 더 생산성이 높아져 이전엔 한 명이 하지 못했을 더 큰 시스템을 만들어가고 있어요.


마치며
이미 토스에서는 AI가 디자인한 화면이 실제 제품에 쓰이기 시작했어요. 아직은 디자이너의 손길이 필요하지만, 조만간 디자이너 없이도 충분히 좋은 결과물이 나오는 날이 오겠죠.
그렇게 되면 우리의 역할은 분명 달라질 거예요. 디자인을 만드는 사람이 아니라, AI가 더 뛰어난 디자인을 만들도록 원칙과 시스템을 만드는 사람이 되는 거죠.

여러분은 ‘디자이너가 디자인을 하지 않는 시대'에 어떻게 가치를 만들 수 있을 것 같나요?
AI가 모두 대신할 때, 디자이너로서 당신은 무엇을 하고 있을까요?








AI 시대에 디자이너는 어떤 모습일까요?
한번 쯤 이런 생각 해보지 않으셨나요? UI가 더 이상 필요 없어지거나, 로봇이 모든 일을 대신하는 날이 오면, 디자이너는 어떤 역할을 하게 될까?
저도 같은 고민을 하다가 반대로 생각해 보기로 했어요. 언젠가 사라질 운명이라면, 차라리 그 미래를 앞당겨서 직접 경험해보기로요. “

아티클 시리즈