프로덕트 디자이너로 고통 받기 다양한 플랫폼에서 시스템 구축하며 고통 받기 디자인 가이드 정리하며 고통 받기 구현으로 고통 주기 한 치 앞도 몰라서 고통 받기

1. 플랫폼 디자이너 없이
디자인 시스템을 구축하는
프로덕트 디자이너의
우당탕탕 고통 연대기
RIDI - 오남경, 마현지

2. RIDI Design System

3. 남경 현지 선하 민효 진영
사진 사진
프로덕트 디자인 길드

4. 남경 현지 선하 민효 진영
프로덕트 디자인 길드의 남경과 현지입니다👋

5. 고통의 시작
디자인 시스템의 서막

6. 우선 디자인 시스템이란,
일관성있는 원칙으로 만든 가이드로
제품을 효율적으로 설계하고
문제 해결에 집중할 수 있는 장치

7. 우선 디자인 시스템이란,
일관성있는 원칙으로 만든 가이드로
제품을 효율적으로 설계하고
문제 해결에 집중할 수 있는 장치
약 3년 전

8. 우선 디자인 시스템이란,
일관성있는 원칙으로 만든 가이드로
제품을 효율적으로 설계하고
문제 해결에 집중할 수 있는 장치
Design System

9. 리디가 시작하게 된 계기, 약 4년전
WEB APP PAPER
Team Team
Designer Designer
Designer

10. WEB APP PAPER
Color Color Color
Component Component Component
Writing Writing Writing
리디가 시작하게 된 계기, 약 4년전

11. 말하자면
Start Goal
혼돈의 카오스

12. 서로 다른
사용성
어떤 혼돈?
복잡한
커뮤니케이션
고립된
디자이너

13. WEB APP PAPER
Color Color Color
Component Component Component
Writing Writing Writing
리디가 시작하게 된 계기, 약 2년전
Design Guild

14. Style Guide

15. Style Guide
만으로는 부족해

16. Style Guide
만으로는 부족해
Style Guide
UX Writing
Design Principle

17. 리디 디자인 시스템, 그리고 지금
RIDI - RIDI Design System
ridi.design

18. 대략의 완성률
UX Code
80% 70% 3%…
Style Guide

19. 말하자면
지금은 여기?
Start Goal

20. Zoom 1200%
T_T

21. 그럼 앞으로의 행보는?
?

22. Design System

23. 세상에는 두 가지 디자인 시스템이 있죠
UX
CodeStyle Guide

24. 세상에는 두 가지 디자인 시스템이 있죠
UX
CodeStyle Guide
UX
CodeStyle Guide

25. 이상적인 디자인 시스템 1
Shopify - Polaris
polaris.shopify.com

27. Polaris가 정의하고 있는 시스템
Shopify experience values
Accessibility
Internationalization
Information architecture
Designing apps for Shopify
Designing onboarding flows
Formatting localized currency
Voice and tone
Grammar and mechanics
Naming
Actionable language
Product content
Merchant-to-customer content
Help documentation
Vocabulary
Alternative text
Colors
Typography
Illustrations
Sounds
Icons
Interaction States
Spacing
Data visualizations
Actions
Structure
Forms
Images and icons
Feedback indicators
Titles and text
Behavior
List and tables
Navigation
Overlays
Admin
Retail Products
Chat bots and messaging -
Platform
Foundation Contents Design Components Experiences

28. 이런 것도 정의하다니! 👀
Foundation Contents Design Components Experiences
Shopify experience values
Accessibility
Internationalization
Information architecture
Designing apps for Shopify
Designing onboarding flows
Formatting localized currency
Voice and tone
Grammar and mechanics
Naming
Actionable language
Product content
Merchant-to-customer content
Help documentation
Vocabulary
Alternative text
Colors
Typography
Illustrations
Sounds
Icons
Interaction States
Spacing
Data visualizations
Actions
Structure
Forms
Images and icons
Feedback indicators
Titles and text
Behavior
List and tables
Navigation
Overlays
Admin
Retail Products
Chat bots and messaging -
Platform

29. 문득 드는 생각
너무 짱인데…?가능…?

30. 문득 드는 생각
음… 다른 걸 알아봅시다
너무 짱인데…?가능…?

31. 우리처럼 만드는 중인 곳은 없을까?
UX
CodeStyle Guide
UX
CodeStyle Guide

32. 만드는 중인 디자인 시스템
Gitlab - Pajamas
design.gitlab.com

34. 이만큼 했어요!

35. 체크하기
단순히 디자인 컴포넌트를
제작하고 공유하는 것이 아닌

36. 체크하기
디자인 시스템을 만들어 나가는
과정을 디자인 하는 것 또한 중요

37. 고통받는 이유
디자인 시스템이 필요한 이유

38. 디자인 시스템을 만드는 이유
미래의 우리를 위해
일을 줄여 나가는 과정

39. 그래서 정말 일이 줄었나요?

40. 그래서 정말 일이 줄었나요?
네니요

41. 네 1.
디자인을 확장하는 과정에서
커뮤니케이션 비용 감소

43. 네 2.
조직 간 합의된,
일관성있는 사용성

44. 사용성은 비슷하니,
디자인 시스템이 적용된
🅰안이 나아보여요!
현지 님, 🅰안이 나을까요
🅱안이 나을까요?

45. 네 3.
문제 본질에 집중

47. h값
사이 간격
w값
아이콘 스타일, 크기
폰트 스타일
유효값에 따른
아이콘 활용
상태에 따른
동작 정의
아이콘
애니메이션

48. h값
사이 간격
w값
아이콘 크기
폰트 스타일
유효값에 따른
아이콘 활용
상태에 따른
동작 정의
아이콘
애니메이션
회원 가입 시 더 좋은 경험이 뭘까?

49. h값
사이 간격
w값
아이콘 크기
폰트 스타일
유효값에 따른
아이콘 활용
상태에 따른
동작 정의
아이콘
애니메이션
ISMS 대응
전체적인 Flow
플랫폼별 회원가입

50. 네 4.
신규 입사한 디자이너도 빠르게
동일한 디자인 언어를 구사

51. 3 Months 18 Months 3 Years

52. 그래서 정말 일이 줄었나요?
네니요

53. 아니요.
80% 70% 3%…
UX CodeStyle Guide

54. 아니요.
UX Code
100%
Style Guide

55. 완성의 고통
왜 이렇게 완성하기 어려운걸까?

56. 플랫폼 디자이너 없이 시스템 만들기
Platform
Designer

57. 플랫폼 디자이너 없이 시스템 만들기
정말로
모시고
싶어요
실패

58. Define Formating Refine
Iteration
Design
플랫폼 디자이너 없이 시스템 만들기

59. 프로덕트 디자이너의 업무
Planing Design Production
Iteration
Analysis

60. 프로덕트 디자이너의 업무에 디자인 시스템을 끼얹어 보자
Planing Production
Product Design Iteration
Analysis Define Formating Refine
Design System Iteration
DesignDesign

61. 자연스럽게 어려워진 디자인 시스템 구축

62. 리디의 여러 제품들
웹 서점, 웹 뷰어
Android, iOS 뷰어
일렉트론 뷰어
웹 내 서재
PAPER

63. 어느 컴포넌트가, 어느 프로덕트에,
어떻게 적용 되어있는걸까?

64. 파악하는데만 오조오억년

65. 평상 업무도 하면서 디자인 시스템도 챙기기

66. 쉽지 않다.
와르르
와르르
우당탕
관심좀…

67. 작업하며 고통 받기
만들면서 마주쳤던 문제들

68. 1. 모든 플랫폼에서 같은 디자인을 적용해야 할까?

69. 1. 모든 플랫폼에서 같은 디자인을 적용해야 할까?
네니요

70. 네 1.
리디만의 북 컴포넌트

71. 네 2.
다양하게 확장해야 하는 컴포넌트

72. 아니요 1.

73. 아니요 2. OS별 기존 사용 패턴이 다를 경우

74. 아니요 3.
각 OS의 스타일이 확실한 컴포넌트

75. 하지만 먼 미래엔…
iOS
Android
WEB
서점
PAPER
WEB
셀렉트
Style Guide

76. 2. 시스템은 어떤 기준으로 구분할까?

77. 2개 이상은 시스템이지 않을까?
Instance System

78. 어디에나 예외는 있다: 예외 1
이 컴포넌트는 두 곳 이상 사용되지는 않지만
확장 가능성이 큰 것 같아요.

79. 어디에나 예외는 있다: Chip

80. 어디에나 예외는 있다: 예외 2
이 컴포넌트는 이곳 저곳에서 사용되지만
앞으로 활용하긴 힘들 것 같아요.

81. 어디에나 예외는 있다: Table

82. 3. 디자인을 글로 설명하기
아, RGRG~~~~
현지 님, RGRG?

83. 모야 누구세요ㅠ
RGRG?
다른 직군도 이해할 수 있게

84. 디자인 중심적으로 쓰지 않기
사용자 입장을 생각하며,
간결하고 쉽게,
일관성 있게,
신뢰성 있게 쓰기

85. 글 작성 템플릿도 만들자!
개요
구성
종류
상태

86. 글 작성 템플릿도 만들자!
개요
구성
종류
상태
타이틀
소개 문장
대표 이미지
요소 이미지
각 요소에 대한 설명
형태에 따른 종류
기능에 따른 종류
구성에 따른 종류
컴포넌트 별 정의가
필요한 다양한 상태

87. 관리하며 고통 받기
디자인은 일부일 뿐

88. 1. 1 디자이너, 1 컴포넌트
남경 현지 선하 민효 진영
사진 사진

89. 모두가 오너십을 가질 수 있게
다이얼로그
위원장
사진 사진
스낵바
위원장
셀렉션 컨트롤
위원장
제로하이트
위원장
이미지 리스트
위원장

90. 2. 관리할 툴 지정하기
로컬 기반의 Sketch

91. 삐빅, 환승입니다
클라우드 기반의 Figma

92. 함께 작업하고 관리하기
클라우드 기반의 Figma

93. 3. 문서 관리하기

94. 스텝별로 정리하기

95. 상세하게 기록하기

96. 사진 사진
서로 리뷰하기
Reviewer System

97. 서로 리뷰하기

98. 이사하며 고통 받기
진짜 우리 집을 찾아서…

99. 지킬로 만든 디자인 시스템 사이트

101. 지킬의 문제점
간단한 글

102. 지킬의 문제점
간단한 글 복잡한 기능

103. 그 때 만난 제로하이트
zeroheight.com

105. 디자인 시스템 최적화된 플랫폼
Write Design Sync Snippet
UX CodeStyle Guide

106. 삐빅, 환승입니다 2

108. 개발로 고통 주기
우리만 고통 받을 순 없다

109. Pajamas의 Status처럼,

110. 개발 대기중인 컴포넌트

111. 마음 같아선...
ONE
CODE
iOS
Android
WEB
서점
PAPER
WEB
셀렉트

112. 야 너두? 야 나두...
디자인이 힘든만큼
개발도 힘들다

113. 작은 것 부터 적용하기

114. 우선 디자이너들끼리 호흡 맞추기

115. 미래에 받을 고통
한 치 앞도 모르는 디자인 시스템

116. 일단, 끝낼 수 있을까?

117. 코로나 시대의 디자인 시스템

118. 무시할 수 없는 흐름
디자인 시스템이
하나의 트렌드로 주목 받고 있지만,
진짜 필요성을 느끼는 시점이 온다

119. 고통은 나누는 것
디자인
시스템
만들어야지

120. 무엇이든 물어보세요
Q&A

121. RIDI Design System