INTERACTIVE DEMO

분철 플랫폼 UI 개선
토큰에서 화면까지

기능은 유지하면서 참여자와 개최자가 같은 기준으로 읽는 UI 개선 흐름을 직접 확인합니다.

문제 상황 · 화면마다 다른 기준
참여자 화면

간격과 상태 색상이 화면마다 다름

개최자 화면

간격과 상태 색상이 화면마다 다름

우리 방식 · 토큰과 컴포넌트 적용
Figma Variables

Primary Violet · Space 8 · Type 16/20

Auto Layout

버튼·카드·배지를 2단계 이내로 구성

결과 · 참여와 운영이 같은 언어로
참여자

모집 7/10 · 입금 3/4 확인

개최자

모집 7/10 · 입금 3/4 확인

차별점 · 중단 없이 순차 적용
STEP 01
기준 정의

순차 적용

STEP 02
공통 컴포넌트

순차 적용

STEP 03
핵심 화면

순차 적용

STEP 04
전체 확장

순차 적용