모든 디지털 서비스 메이커의 유일한 병목이 ‘상상력’이 되게 하려 합니다.
토스 디자인플랫폼 팀
2017년 말, 토스는 TDS(Toss Design System)라는 디자인 시스템을 만들었습니다. 토스에서 자주 사용되는 UI 구성 요소(Components)를 재활용 가능하고 조립 가능한 형태로 공통화하여 라이브러리로 만든 것이죠. 토스의 디자이너와 개발자는 동일한 UI 구성 요소를 사용하여 소통했고, 그 결과 토스의 제품 개발 속도는 몇 배로 빨라지게 되었고 일관되고 좋은 경험을 사용자에게 줄 수 있었어요.
토스에는 이런 TDS를 비롯해서, 토스 전체 제품팀이 더 효율적으로 일하고 높은 퀄리티의 제품을 쉽게 만들 수 있는 도구와 워크플로우를 전담하는 팀이 있습니다. 바로 저희, 디자인플랫폼 팀이에요.
2020년 하반기, 디자인플랫폼 팀은 디자인에서 개발로 이어지는 제품 개발과정에서 큰 비효율을 발견하였습니다. 아무리 빠르고 효율적으로 움직이는 조직이라도, UI 디자인과 UI 개발이라는 같은 일을 두 번 하고 있다는 것이죠.
프론트엔드/클라이언트 개발자는 매일 수많은 UI를 개발합니다. TDS는 디자이너와 개발자의 작업 시간을 많이 줄여주었지만, 디자이너가 배치한 TDS를 개발자가 코드로 다시 배치해야하는 일은 여전히 존재합니다. 왜 우리는 같은 일을 두 번 반복하고 있는 걸까요?
이 문제를 해결하기 위해 디자인플랫폼 팀은 제품 개발 과정에서 UI 디자인과 UI 개발이라는 두 단계를 압축시켜 가장 단순한 형태의 제품 개발 워크플로우를 만들었습니다. 바로, 디자인을 하자마자 그 결과물이 바로 사용 가능한 코드로 변경되는 것이죠.
페이지 단위 코드 제너레이터
이 작업의 핵심 변화는, 디자인을 코드 기반으로 바꾼 것입니다. 디자이너가 그리는 화면이 단순히 그래픽이 아니라 실제 코드를 기반으로 하여 작동되는 UI 로 바꾸었죠. 이를 통해 UI 디자인의 결과물은 그 즉시 개발에서 사용할 수 있는 UI 코드가 되었고, 디자인과 개발의 과정은 획기적으로 단축되었습니다.
코드 기반의 디자인 에디터는 코드를 생성하는 것 외에도 여러 가능성을 만들어냈습니다. UX Writing 가이드에 맞춰 제품 문구를 자동으로 검사하고, 토스의 공동 에셋을 디자인 에디터에서 직접 연결하고, 디자이너와 개발자 간의 소통을 위한 번역기를 만들고, 디자인에서 TDS의 적용률을 분석하여 best practice 에 얼마나 일치하게 디자인했는지 실시간으로 알려주었죠. 디자인 결과물이 코드로 이루어졌다는 말은, 코드로 할 수 있는 모든 것을 제품 구현이 되기 전인 디자인 결과물에서도 할 수 있다는 얘기였습니다.
2021년 중순, 디자인플랫폼 팀은 이 코드 기반의 디자인 워크플로우에서 더 큰 가능성을 탐색하기 시작했습니다.
DEUS
221007 토스 사내 발표
디자인플랫폼 팀은 코드 기반의 디자인 워크플로우를 팀에 빠르게 도입하기 위해 프레이머라는 디자인 에디터를 빌려 사용하였습니다. 프레이머에 기능을 제안하기도 하고, 프레이머에서 구현해줄 수 없는 기능은 브라우저 확장프로그램을 이용해 토스팀만을 위한 기능을 프레이머에 추가하기도 했습니다. 하지만 프레이머를 기반으로 한 작업은 프레이머의 구현과 제품 방향성에 종속되어있어 디자인플랫폼 팀이 해결하기를 원하는 근본적인 문제를 제대로 풀지는 못했습니다. 그래서 디자인플랫폼 팀은 근본적인 문제를 풀기 위해 디자인 에디터를 직접 만들기로 결정하였습니다. 그 에디터의 이름이 바로 Deus 입니다.
- “DEUS EX MACHINA; God from the Machine”
‘신의 기계적 출현‘을 의미한다.
이것은 극의 사건 진행 과정에서 도저히 해결될 수 없을 정도로 뒤틀어지고 비꼬인 문제가 파국(catastrophe) 직전 무대의 꼭대기에서 기계 장치를 타고 무대 바닥에 내려온 신의 대명(大命)에 의해 해결되는 기법이다.
디자인플랫폼 팀은 이 문제를 토스 안에서만 해결하려 하지 않습니다. 디지털 서비스를 다루는 모든 팀에서 이 문제를 해결하기를 바라며, Deus 는 토스만을 위해 개발되지 않을 것입니다. 그동안의 오랜 노하우와 기반 개념 검증 과정을 통해, Deus 를 위한 모든 준비는 끝났습니다. 이제 디자인플랫폼팀은 디지털 서비스 디자인의 새로운 패러다임을 불러올 도전적인 프로젝트를 시작하려 합니다.
그리고 이 프로젝트를 구현할 핵심 엔지니어를 찾고 있습니다.
Deus 프로젝트에서 찾고 있는 엔지니어
아래 목록은 Deus 의 구현을 위해 필요한 엔지니어링의 대략적인 항목입니다. 바로 기여할 수 있는 부분이 있다면 좋지만, 그보다 중요하게 생각하는 것은 문제를 스스로 찾고 해결해내는 능력입니다. Deus 는 전에 풀어본 적 없었던 문제를 풀려고 하기 때문에 높은 수준의 자기주도적인 학습 능력과 문제 해결 능력을 필요로 합니다.
목록에 있는 항목 외에도 Deus에 필요하다고 생각되는 것을 제안하고 구현하셔도 좋습니다.
공통
•
design syntax tree 를 표현하는 custom json format 스펙 설계
◦
platform-independent 하고 interoperable한 abstract syntax tree 설계
◦
현대 디지털 서비스를 구현하기 위해 필요한 모든 요소를 선언적 문법 기반의 json format 으로 설계
▪
화면 플로우, 분기, 유저 행동 데이터 수집, 상태 관리, 사용자 정의 컴포넌트 스펙, ...
▪
Rx와 같은 선언적 문법의 데이터 흐름 표현식 설계
◦
디지털 서비스 애플리케이션을 구성하는 원자 단위의 building blocks 설계
◦
DST를 표현하는 JSON의 스키마 문법 설계
Editor Client
•
React를 기반으로 스케치, 피그마, 프레이머와 같은 디자인 에디터의 구현
◦
위지윅 디자인 에디터 기능 구현
◦
디자이너와 개발자의 소통 도구 구현
◦
개발자를 위한 코드 핸드오프 도구 구현
•
DST SDUI 클라이언트 구현
◦
DST SDUI 클라이언트 구현
◦
디자인 시스템 컴포넌트 통합
◦
이벤트, 액션, 상태관리 등의 핵심 앱 기능을 선언적 문법으로 구현
•
사례가 존재하지 않을 수 있는 직관적인 UX 구현
◦
복잡한 개념을 직관적으로 이해할 수 있는 UI 인터랙션 구현
◦
제품팀 내 다양한 직군을 위한 통합 도구 개발
▪
2D/3D 그래픽, UX Writing, 디자인/인터랙션 시스템, 반응형 디자인, 다국어/접근성 지원, A/B 테스트, 사용자 행동 분석 등
Backend
•
실시간 협업을 위한 CRDT 기반 에디터 서버 구현
◦
◦
실시간 데이터 동기화 구현
◦
조직 내 모든 프로젝트를 로딩 없이 이동할 수 있는 오픈월드 서버 구현
•
Server Driven UI를 위한 컴포넌트 관리 및 배포 서버 구현
◦
배포 버전 관리, 크래시 분석, 사용자 분석 서버 구현
◦
서버사이드 DST 렌더러 구현
◦
DST 기반 커스텀 컴포넌트를 지원하는 DB 구조 설계 및 구현
이것을 구현하기 위해 최소한 아래와 같은 지식과 경험, 그리고 태도를 가지고 있기를 기대합니다.
•
자료구조와 알고리즘을 중심으로 Computer Science Fundamental 에 대한 이해와 적절한 응용 능력
•
비즈니스 규모에 맞는 애플리케이션 아키텍처 설계 경험
•
시간복잡도에 대한 이해와 퍼포먼스 프로파일링, 최적화 경험
•
프로덕션 수준의 애플리케이션을 운영한 경험
•
기술적인 완성도와 구현 속도 사이에서 적절한 판단을 한 경험
•
개발의 범위를 넘어 타 직군의 문제도 함께 고민하고 주도적으로 해결한 경험
•
능동적으로 문제를 발견하고 해결하는 태도
•
해결 사례가 없는 문제를 어떻게든 풀어낼 수 있다고 믿고 실행하고 끝내 해결하는 의지와 믿음
모든 항목에 일치하기는 어려울 것입니다. 이 중 일부에 해당하지 않더라도 디자인플랫폼 팀과 함께 하며 맞춰갈 수 있다고 믿는다면, 저희에게 연락해주세요.
Deus의 이야기가 흥미로우신가요?
Deus가 해결하려는 문제에 공감하고 기여할 수 있다고 생각하신다면 저희에게 알려주세요. Deus 프로젝트와 디자인플랫폼 팀, 그리고 당신에 대한 이야기를 하는 자유로운 티타임 시간을 가지는 것도 좋습니다.
토스팀은 언제나 열려있습니다
직접 이야기를 듣고 싶거나 합류하고 싶다면, 아래 방법을 통해 저희에게 연락해주세요. 당장 합류하지 못하는 상황이라도 괜찮습니다. 방법은 어떻게든 찾아낼 수 있을 거예요.
•
davidlee@toss.im 이다윗 (데우스 디자이너)
•
recruit@toss.im 토스 채용팀 (토스 지원 문의)