<div id="readability-page-1" class="page"><div><h3 id="20ea360d-33e3-8040-ae58-fb7a93fa2d54">Simplicity 4 세션, 잘 즐기셨나요?</h3>이번 글에서는 Simplicity 4 세션 속 시각 자료 제작기를 이야기해보려 해요. 처음에는 단순히 관련 화면을 캡처하거나 녹화해 보여주면 충분할 거라고 생각했어요. 하지만 막상 작업에 들어가 보니, 시청 흐름과 정보 전달까지 고려해야 할 게 정말 많더라고요.Simplicity 4는 짧고 몰입도 높은 숏폼 형식의 세션으로 구성되었어요. 길이가 짧은 만큼, 짧은 문장에 많은 정보를 담아야 했고, 연사의 말만으로는 충분히 설명되지 않는 경우도 많았죠. 그래서 세션 자료는 단순히 재미나, 심미성을 위한 장치가 아니라, 텍스트에 담기지 않은 맥락까지 설명해주는 ‘시각적 해설자’ 역할을 해야 했어요. 단순히 텍스트를 보조하는 것이 아니라, 동등한 수준으로 메시지를 전하는 시각적 콘텐츠가 필요했던 거죠.<figure id="20ea360d-33e3-80e4-a0dd-e299212c6027"><img src="https://static.toss.im/ipd-tcs/toss_core/live/65de0c6c-7a6e-441d-a8e3-33ef2ccc6d23/1.png" alt=""></figure><h2 id="20ea360d-33e3-800f-ac8c-fa996a595552">좋은 세션 자료의 두 가지 조건</h2><h3 id="20ea360d-33e3-8014-b1bf-cf34ba7cd71d">1. 숏폼 콘텐츠에 어울리는 시각적 흐름 만들기</h3>우리가 숏폼 콘텐츠를 볼 때 자막보다 이미지나 시각적 흐름에 먼저 반응하잖아요. 음성만 듣고 자막은 스킵하는 경우도 많고요. Simplicity 4의 세션 자료도 마찬가지였어요.자료는 텍스트보다 먼저 사용자의 시선을 사로잡고, 어떤 요소가 중요하고 어디에 먼저 주목해야 하는지 자연스럽게 안내해야 했죠. 여러 요소가 한 화면에 평면적으로 나열되면, 정보의 우선순위가 모호해져 시선이 흩어지고 텍스트와 이미지가 따로 노는 것처럼 느껴지기 쉽거든요.그래서 강조하고 싶은 부분엔 살짝 기울인 원근감을 주고, 덜 중요한 정보는 흐림(blur) 효과를 적용해 시선을 정리했어요. 이렇게 시각적 위계를 설계하면, 사용자는 자료를 따로 해석하지 않아도 중요한 정보를 자연스럽게 먼저 받아들이고, 빠르게 이해할 수 있는 구조를 경험할 수 있어요. 단순한 시각 효과지만, 집중도와 몰입도를 높이는 데 꽤 효과적이었답니다.<figure id="20ea360d-33e3-804a-b559-f2f6564b0806"><img src="https://static.toss.im/ipd-tcs/toss_core/live/d7bc269e-5632-4015-978d-17734e954932/2.png" alt=""></figure><h3 id="20ea360d-33e3-80dd-8808-de88c2243f64">2. 어떤 기기에서도 자연스럽게 읽히도록</h3>이번에는 PC와 모바일 환경 모두에서 콘텐츠를 편하게 볼 수 있도록 최적화 하는 게 중요했어요. 하나의 자료를 두 환경에서 최대한 공통으로 활용하는 방식으로 접근했는데, PC와 모바일은 화면 비율이 많이 달라서 고민이 많았죠. 그래서 하나의 자료가 양쪽 환경에서 모두 읽히도록 최적화하는 작업이 필요했어요.PC 화면은 넓고 모바일은 작다 보니, 동일한 세션 자료를 보여줄 때 특히 모바일에서는 많은 부분이 잘리더라고요. 상단에는 제목이나 공유 버튼 같은 요소들이 있어 그 아래에 위치한 중요한 정보가 가려질 수 있었죠. 그래서 어떤 기기에서 보더라도 핵심 정보가 화면 중앙에 잘 보이도록 모아서 배치했어요. PC 화면을 그대로 보여주는 방식은 작은 모바일 화면에선 가독성이 떨어질 수 있기 때문에, 작은 모바일 화면에서도 잘 보이도록 웹사이트 창처럼 보이게 디자인하기도 했어요. <figure id="20ea360d-33e3-80f5-b7e0-f4aea1feb33b"><img src="https://static.toss.im/ipd-tcs/toss_core/live/031435a9-21c5-485b-a9f8-5cee1eb3d4c0/3.png" alt=""></figure><h2 id="20ea360d-33e3-8023-bc76-d5a4886d08dc">누구나 제작할 수 있는 환경 만들기</h2>Simplicity는 한 번 하고 끝나는 이벤트가 아니라 시즌마다 반복되는 컨퍼런스예요. 그만큼 제작 효율성과 지속가능성을 함께 고려해야 했어요.이번 시즌부터는 새 사이트를 만드는 대신, 하나의 플랫폼에 콘텐츠를 업데이트하는 방식으로 구조를 전환했고, 이에 따라 자료도 재사용 할 수 있도록 템플릿을 만드는 게 필요했죠.토스에서 그래픽이나 브랜딩을 섬세하게 다루는 직군이 아니라면 포토샵이나 일러스트레이터 같은 툴은 잘 사용하지 않는데요. 정적인 이미지는 포토샵 없이도 쉽게 제작할 수 있어야 한다고 생각했어요. 비디자인 직군도 자주 사용하는 툴인 ‘피그마’를 활용해보기로 했죠. 피그마의 다양한 플러그인을 활용하면, 디자인 경험이 많지 않더라도 누구나 제작할 수 있는 환경이 만들어지더라고요. 그리고 이 제작법을 가이드로 정리해 내부에서 누구나 참고할 수 있도록 했어요. 지속 가능한 Simplicity 제작을 위한 기반을 마련한 셈이죠. 실제로 이번 Simplicity에서는 정적인 세션 자료를 모두 피그마로 제작했어요.<figure id="20ea360d-33e3-80fb-aeae-f344044bfe76"><img src="https://static.toss.im/ipd-tcs/toss_core/live/d8c7e12b-a299-4032-be91-df03955bf91c/4.png" alt=""></figure><h2 id="20ea360d-33e3-8056-a590-e23dad14cdff">앞으로의 세션 자료</h2>Simplicity 같은 온라인 컨퍼런스에서 세션 자료는 단순한 보조물이 아니라 콘텐츠의 일부예요. 세션을 자연스럽게 이해하도록 도와주는 역할을 하죠. 좋은 세션 자료는 사용자가 ‘자료를 보고 있다’는 인식 없이도 내용을 자연스럽게 받아들이게 만들어준다고 생각해요. 그런 자료를 만들기 위해서는 치열한 고민이 필요하고, 그만큼 디자인의 역할도 중요해요. 이런 고민들이 앞으로의 Simplicity나 다른 온라인 컨퍼런스에서도 잘 이어져서, 정보를 쉽게 전달하는 아름다운 자료들이 계속 만들어지기를 바라요.</div></div>

토스테크

Simplicity 4 세션, 잘 즐기셨나요?
이번 글에서는 Simplicity 4 세션 속 시각 자료 제작기를 이야기해보려 해요. 처음에는 단순히 관련 화면을 캡처하거나 녹화해 보여주면 충분할 거라고 생각했어요. 하지만 막상 작업에 들어가 보니, 시청 흐름과 정보 전달까지 고려해야 할 게 정말 많더라고요.
Simplicity 4는 짧고 몰입도 높은 숏폼 형식의 세션으로 구성되었어요. 길이가 짧은 만큼, 짧은 문장에 많은 정보를 담아야 했고, 연사의 말만으로는 충분히 설명되지 않는 경우도 많았죠. 그래서 세션 자료는 단순히 재미나, 심미성을 위한 장치가 아니라, 텍스트에 담기지 않은 맥락까지 설명해주는 ‘시각적 해설자’ 역할을 해야 했어요. 단순히 텍스트를 보조하는 것이 아니라, 동등한 수준으로 메시지를 전하는 시각적 콘텐츠가 필요했던 거죠.
좋은 세션 자료의 두 가지 조건
1. 숏폼 콘텐츠에 어울리는 시각적 흐름 만들기
우리가 숏폼 콘텐츠를 볼 때 자막보다 이미지나 시각적 흐름에 먼저 반응하잖아요. 음성만 듣고 자막은 스킵하는 경우도 많고요. Simplicity 4의 세션 자료도 마찬가지였어요.
자료는 텍스트보다 먼저 사용자의 시선을 사로잡고, 어떤 요소가 중요하고 어디에 먼저 주목해야 하는지 자연스럽게 안내해야 했죠. 여러 요소가 한 화면에 평면적으로 나열되면, 정보의 우선순위가 모호해져 시선이 흩어지고 텍스트와 이미지가 따로 노는 것처럼 느껴지기 쉽거든요.
그래서 강조하고 싶은 부분엔 살짝 기울인 원근감을 주고, 덜 중요한 정보는 흐림(blur) 효과를 적용해 시선을 정리했어요. 이렇게 시각적 위계를 설계하면, 사용자는 자료를 따로 해석하지 않아도 중요한 정보를 자연스럽게 먼저 받아들이고, 빠르게 이해할 수 있는 구조를 경험할 수 있어요. 단순한 시각 효과지만, 집중도와 몰입도를 높이는 데 꽤 효과적이었답니다.
2. 어떤 기기에서도 자연스럽게 읽히도록
이번에는 PC와 모바일 환경 모두에서 콘텐츠를 편하게 볼 수 있도록 최적화 하는 게 중요했어요. 하나의 자료를 두 환경에서 최대한 공통으로 활용하는 방식으로 접근했는데, PC와 모바일은 화면 비율이 많이 달라서 고민이 많았죠. 그래서 하나의 자료가 양쪽 환경에서 모두 읽히도록 최적화하는 작업이 필요했어요.
PC 화면은 넓고 모바일은 작다 보니, 동일한 세션 자료를 보여줄 때 특히 모바일에서는 많은 부분이 잘리더라고요. 상단에는 제목이나 공유 버튼 같은 요소들이 있어 그 아래에 위치한 중요한 정보가 가려질 수 있었죠. 
그래서 어떤 기기에서 보더라도 핵심 정보가 화면 중앙에 잘 보이도록 모아서 배치했어요. PC 화면을 그대로 보여주는 방식은 작은 모바일 화면에선 가독성이 떨어질 수 있기 때문에, 작은 모바일 화면에서도 잘 보이도록 웹사이트 창처럼 보이게 디자인하기도 했어요. 
누구나 제작할 수 있는 환경 만들기
Simplicity는 한 번 하고 끝나는 이벤트가 아니라 시즌마다 반복되는 컨퍼런스예요. 그만큼 제작 효율성과 지속가능성을 함께 고려해야 했어요.이번 시즌부터는 새 사이트를 만드는 대신, 하나의 플랫폼에 콘텐츠를 업데이트하는 방식으로 구조를 전환했고, 이에 따라 자료도 재사용 할 수 있도록 템플릿을 만드는 게 필요했죠.
토스에서 그래픽이나 브랜딩을 섬세하게 다루는 직군이 아니라면 포토샵이나 일러스트레이터 같은 툴은 잘 사용하지 않는데요. 정적인 이미지는 포토샵 없이도 쉽게 제작할 수 있어야 한다고 생각했어요. 비디자인 직군도 자주 사용하는 툴인 ‘피그마’를 활용해보기로 했죠. 피그마의 다양한 플러그인을 활용하면, 디자인 경험이 많지 않더라도 누구나 제작할 수 있는 환경이 만들어지더라고요. 
원근감을 줄 수 있는 플러그인
특정 부분을 흐리게 해주는 블러 플러그인
그림자를 넣어주는 플러그인
그리고 이 제작법을 가이드로 정리해 내부에서 누구나 참고할 수 있도록 했어요. 지속 가능한 Simplicity 제작을 위한 기반을 마련한 셈이죠. 실제로 이번 Simplicity에서는 정적인 세션 자료를 모두 피그마로 제작했어요.
앞으로의 세션 자료
Simplicity 같은 온라인 컨퍼런스에서 세션 자료는 단순한 보조물이 아니라 콘텐츠의 일부예요. 세션을 자연스럽게 이해하도록 도와주는 역할을 하죠. 좋은 세션 자료는 사용자가 ‘자료를 보고 있다’는 인식 없이도 내용을 자연스럽게 받아들이게 만들어준다고 생각해요. 
그런 자료를 만들기 위해서는 치열한 고민이 필요하고, 그만큼 디자인의 역할도 중요해요. 이런 고민들이 앞으로의 Simplicity나 다른 온라인 컨퍼런스에서도 잘 이어져서, 정보를 쉽게 전달하는 아름다운 자료들이 계속 만들어지기를 바라요.

아름답고 이해하기 쉬운 세션 자료 만들기 | Simplicity 4 제작기 #5

댓글