작업 · 프로덕트 디자인

프로덕트 디자인

PD 챌린지와 디자인 시스템 정리입니다. 프로토타입과 토큰을 함께 봅니다.

토스 Product Design — 일정 맞추기

토스 Product Design — 일정 맞추기

6명 회의 일정을 겹쳐 보고 가능한 시간을 찾는 모바일 웹 프로토타입. 문제 정의부터 플로우 설계까지 진행했습니다.

Product DesignFigmaPrototypeMobile
프로토타입 GitHub

프로세스

  1. 1회의 일정 조율 문제를 사용자 시나리오로 정의
  2. 2가능 시간대를 겹쳐 보는 모바일 플로우 설계
  3. 3프로토타입으로 참여자 경험 검증

디자인 시스템 — Color · Font · UI

이 사이트에서 쓰는 컬러 토큰, 타이포, UI 컴포넌트를 정리한 디자인 시스템입니다. 실제 구현과 맞춰 두었습니다.

Design TokensTypographyComponents
가이드 보기

SCSS Foundation Guide

레이어 구조·토큰·mixin·Vue 컴포넌트 사용법을 정리한 SCSS 가이드입니다.

SCSSDesign SystemVue
가이드 보기 GitHub

컬러·폰트·UI 컴포넌트 상세는 디자인 시스템에서 볼 수 있습니다.