안녕하세요, Simplicity 4 프로젝트에서 프론트엔드 개발을 맡은 Frontend UX Engineer 박은식, 이예서입니다. 이번 프로젝트를 진행할 때 기술적으로 고민했던 내용들을 공유하고자 해요.

재사용 가능한 컨퍼런스 만들기
이번 Simplicity 프로젝트는 다음 시즌에도 재사용 가능하도록 구조화하는데 초점을 맞췄어요. 
그로 인해 세션 화면을 컴포넌트 단위로 템플릿화하고, 세션 정보를 시트에 입력받아 누구나 쉽게 세션 내용을 수정할 수 있도록 만들어야 하는 요구사항이 있었죠.
그 중에서도 각 세션 화면이 인터렉션을 통해 자연스럽게 연결되게 하는 것이 무척 어려웠는데요. 화면 템플릿마다, 또 플랫폼마다 인터렉션 스펙이 전부 달랐기에 고민해야 할 지점이 많았어요. 그래서 저희는 세션 템플릿의 구성 요소를 4분할하고, 공통된 인터렉션 흐름을 정의했어요.


위 사진과 같이 Simplicity 세션은 총 12개 템플릿의 조합으로 진행돼요. 모바일과 데스크탑까지 고려해야하는 만큼 중복을 줄이고 패턴화시켜 구현해야할 필요가 있었어요. 저희는 템플릿들의 각 요소들을 분리해서 크게 네 가지로 분류했는데요.


연사자의 대본이 위치하는 Script
Script의 상단에 위치하는 Top
Script 외의 영역을 차지하는 Canvas
스크립트 뒤에 깔려 화면 전체를 차지하는 Background
12개의 템플릿의 구성요소들을 위 네 가지로 분류한 후 분류된 것 내에서 애니메이션으로 전환하도록 구현하였어요. 특히 Script의 경우 계속해서 하단과 중단을 왔다갔다 해야했고, 화면마다 라인수가 달라져 정확하게 위치를 잡는것이 까다로웠는데요. 어떤 템플릿을 사용하고 있는지, 기기의 높이는 얼마나 되는지에 따라 휴리스틱하게 위치를 잡도록 구현하였어요. 이러한 방식을 통해 템플릿의 모든 요소를 자신의 위치에 정확하게 렌더링시키는 것 뿐만 아니라 추후 유지보수도 효율적으로 할 수 있었어요.



다양한 브라우저 대응하기
모바일에서도 시청 가능해야 하는 만큼, 삼성, Safari 등 각각 다른 브라우저에서의 대응 작업도 필요했어요. 개발로 해소할 수 있는 문제는 대부분 해결했지만, 브라우저 정책 상 해결이 불가능한 문제들은 스펙 변경을 설득해야 했어요.
대표적으로 모바일 Safari 브라우저에는 비디오가 포함된 화면에서 유저 인터렉션이 발생해야 비디오를 재생할 수 있는 스펙이 있었고, 이 문제를 해결하기 위해 Audio로 우회하는 등 여러 시도를 해보았지만 잘 동작하지 않았어요. 결국 해당 브라우저에서는 버튼을 터치해야 세션이 재생될 수 있게 하는 동작을 추가했어요.
아래 영상과 같이 Blur를 사용할 경우 Safari에서는 눈에 띄게 성능이 저하되는 경우도 있었는데요. 가장 뒤에 깔리는 BackgroundImage를 Safari에서는 좀 더 낮은 opacity를 주어 비슷한 느낌을 구현하기도 했어요.


로드 최적화하기
이번 Simplicity는 처음으로 모바일 공식 지원을 하게 되어서, 로드 최적화가 그 어느 때보다 중요했어요.
개발된 화면을 모바일 기기에서 테스트 해보니, 개발 환경에서와 다르게 애셋이 느리게 뜨거나 연사자 음성이 느리게 재생되는 등의 로드 이슈가 발생했어요. 인스타그램 스토리처럼 자연스럽게 넘어가야 하는데, 로드 시간 때문에 버그처럼 느껴졌죠.
하나씩 로드를 느려지게 한 범인을 색출해 나갔어요. 용량이 큰 에셋들이 대부분 gif인 것을 발견하고, 비교적 용량 문제로부터 자유로운 webp로 교체했고, 세션 진입 시점에 필요한 에셋들을 순차적으로 미리 로드해 세션 재생 도중에 에셋이 비어있는 상황을 대폭 개선했습니다. 연사자 영상의 경우엔 하나의 video element를 필요한 위치에 텔레포트시켜 중복 로드를 막기도 했어요.
애셋 문제 뿐만 아니라 디바이스 판별 후 라우팅하는 로직의 성능 문제 등 코드적인 성능 문제도 발견하고 해소하는 과정을 거쳤어요.
프로파일러를 며칠 내내 돌려보며 외로운 싸움을 한 결과 모바일 기기에서도 문제 없이 시청 가능하게끔 만들 수 있었어요.


렌더링 최적화하기
특히 홈의 경우 데스크탑에서는 모바일보다 복잡한 인터랙션과 좀 더 많은 요소들을 필요로 했는데요. React의 Memoization 함수들을 사용하여 카드들의 필요한 부분만 렌더링되도록 하였고, 위치나 투명도 등 스타일 변경이 필요하다면 상태를 변경하기보다 element의 스타일을 직접 변경하는 방식을 사용했어요. 크롬 개발자도구에서 CPU 감속을 걸며 렌더링을 깎은 결과, 처음에 비해 상당한 성능 개선을 이뤄낼 수 있었어요.









함께 만든 개발자들의 후기
예서
입사 전에 Simplicity 컨퍼런스 페이지를 보면서 “이걸 꼭 내 손으로 만들어보고 싶다”고 느꼈고, 그 마음이 토스에 오게 된 계기 중 하나였어요. 그래서 이 프로젝트에 참여하게 된 건 제게는 꿈을 이룬 일이기도 했어요.
은식
저는 Simplicity23의 랜딩페이지를 구현했었는데요. 당시에 예서님과 비슷하게 “언젠가 한 번은 Simplicity같은 프로젝트를 만들고 싶다”라고 생각했었는데, 많은 분들의 도움으로 해낼 수 있었던 것 같아 뿌듯해요.

때로는 스펙을 포기하고 싶었지만, 포기하지 않은 덕분에 특별하고 새로운 형태의 컨퍼런스를 만들 수 있었어요. 동료 개발자들이 “오늘도 개발자가 안 된다고 말했다”는 농담을 “오늘도 개발자가 된다고 말했다”로 바꿔 유쾌하게 인정해줬을 때는 정말 뿌듯했어요. 힘든 과정을 버텨낸 저희 스스로에게도 작은 박수를 쳐주고 싶습니다.




안녕하세요, Simplicity 4 프로젝트에서 프론트엔드 개발을 맡은 Frontend UX Engineer 박은식, 이예서입니다. 이번 프로젝트를 진행할 때 기술적으로 고민했던 내용들을 공유하고자 해요.

재사용 가능한 컨퍼런스 만들기
이번 Simplicity 프로젝트는 다음 시즌에도 재사용 가능하도록 구조화하는데 초점

토스 디자인 컨퍼런스 Simplicity 사이트를 개발하며 고민한 내용을 공유합니다.

뒤에 개발자 있어요 | Simplicity 4 제작기 #2

안녕하세요, 토스 코어 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가 더 이상 필요 없어지거나, 로봇이 모든 일을 대신하는 날이 오면, 디자이너는 어떤 역할을 하게 될까?
저도 같은 고민을 하다가 반대로 생각해 보기로 했어요. 언젠가 사라질 운명이라면, 차라리 그 미래를 앞당겨서 직접 경험해보기로요. “

아티클 시리즈