토스(Toss)가 선택한 차세대 디자인 워크플로
프레이머(Framer) 사용 후기: “툴 4개를 1개로, 프로토타입은 더 빠르게”
#Framer #토스디자인시스템 #프로토타이핑 #인터랙션디자인 #React #TypeScript #디자인툴 #효율적으로일하는법
오늘 주제는 토스가 도입한 디자인 툴, 프레이머(Framer) 사용후기입니다. 이 툴을 알게 된 계기는 토스 디자이너 강수영 님 인터뷰였고, 단순 디자인을 넘어 효율적으로 일하는 법에 큰 인사이트를 얻었습니다.
프레이머(Framer)란?
“코딩 없이도 드로잉·애니메이션·스크롤·페이징 등 인터랙션 중심 프로토타입을 빠르게 만드는 디자인 툴”
디지털 화면 설계에 필요한 기능을 일괄 제공해, 반복 그리기 대신 상호작용과 흐름에 집중할 수 있습니다.
프레이머의 기술 스택
프레이머는 React · TypeScript · JSX 위에서 동작합니다. 웹 생태계 친화적인 기술 기반이라 개발 협업과 확장이 수월합니다.
토스는 왜 프레이머를 도입했나?
“툴 4개 → 1개”로 줄이며 커뮤니케이션 비용을 크게 절감하고, 디자인·개발 간 핸드오프 병목을 제거.
일반 그래픽 툴은 인터랙션 상태를 매화면 수작업으로 그려야 하고, 개발은 상태·규칙 확인을 위해 디자이너에게 재문의가 잦습니다. 토스는 TDS(토스 디자인 시스템)를 프레이머에 커스터마이징해 아이콘·텍스트 규칙·반복 요소를 체계화했고, 상태 전환이 많은 화면도 신속히 구성할 수 있게 했습니다.
프레이머 × 토스 디자인 시스템 사례
버튼은 상태·피드백이 있는 인터랙티브 요소이고, 스티커는 반응이 없는 정적인 그래픽입니다. 디지털 제품은 전자에 가깝기 때문에, 상태 전이를 빠르게 실험할 수 있는 도구가 업무 효율을 좌우합니다.
프레이머 튜토리얼 체험 요약
1) Screen & Frame
디바이스 화면(Screens)을 추가하고 Frame에서 레이아웃을 구성합니다.
Screen & Frame 구성
2) Insert & Components
Insert 메뉴로 아이콘·UI 컴포넌트를 끌어와 재사용합니다.
Insert ‘Phosphor’ 아이콘 추가
3) Scroll & Page
스크롤 영역을 지정해 콘텐츠 흐름을 검증하고, Page 컴포넌트로 스와이프 페이징을 구현합니다.
스크롤 제스처 프로토타입
4) Interactions & Magic
두 화면을 연결하고 탭/드래그 트리거에 Magic 전환을 적용해 상태 전이를 테스트합니다.
인터랙션 & Magic 전환
핵심 정리
- 툴 단순화: 설계–프로토타입–공유까지 한 툴에서 닫힘.
- 협업 명확성: 상태·전이가 눈에 보여 개발 핸드오프가 매끄러움.
- 재사용성: TDS 컴포넌트화로 화면 추가/변경이 빨라짐.
FAQ
Q. 프레이머는 코딩을 꼭 알아야 하나요?
A. 아니요. 시각 인터페이스로 대부분 구현하며, 필요 시 코드 확장이 가능합니다.
Q. 팀 온보딩 시간은 얼마나 걸렸나요?
A. 공식 튜토리얼과 템플릿으로 초기 가이드 약 1~2일이면 실무 적용을 시작할 수 있습니다.
키워드: 프레이머, Framer, 토스 디자인 시스템, TDS, 프로토타이핑, 인터랙션 디자인, React, TypeScript, 디자인 툴 추천