플랫폼 디자이너 없이 디자인 싵ӊ템을 구축하는 프로덕트 디자이너의 우당탕탕 고통 연대기
•
4 likes•2,147 views
프로덕트 디자이너로 고통 받기 다양한 플랫폼에서 싵ӊ템 구축하며 고통 받기 디자인 가이드 정리하며 고통 받기 구현으로 고통 주기 한 치 앞도 몰라서 고통 받기
플랫폼 디자이너 없이 디자인 싵ӊ템을 구축하는 프로덕트 디자이너의 우당탕탕 고통 연대기
- 1. 플랫폼 디자이너 없이 디자인 싵ӊ템을 구축하는 프로덕트 디자이너의 우당탕탕 고통 연대기 RIDI - 오남경, 마현지
- 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년전
- 13. WEB APP PAPER Color Color Color Component Component Component Writing Writing Writing 리디가 시작하게 된 계기, 약 2년전 Design Guild
- 14. 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
- 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
- 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. 평상 업무도 하면서 디자인 싵ӊ템도 챙기기
- 67. 작업하며 고통 받기 만들면서 마주쳤던 문제들
- 68. 1. 모든 플랫폼에서 같은 디자인을 적용해야 할까?
- 69. 1. 모든 플랫폼에서 같은 디자인을 적용해야 할까? 네니요
- 70. 네 1. 리디만의 북 컴포넌트
- 71. 네 2. 다양하게 확장해야 하는 컴포넌트
- 72. 아니요 1.
- 73. 아니요 2. OS별 기존 사용 패턴이 다를 경우
- 74. 아니요 3. 각 OS의 스타일이 확실한 컴포넌트
- 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. 개발 대기중인 컴포넌트
- 112. 야 너두? 야 나두... 디자인이 힘든만큼 개발도 힘들다
- 113. 작은 것 부터 적용기
- 114. 우선 디자이너들끼리 호흡 맞추기
- 115. 미래에 받을 고통 한 치 앞도 모르는 디자인 싵ӊ템
- 116. 일단, 끝낼 수 있을까?
- 117. 코로나 시대의 디자인 싵ӊ템
- 118. 무시할 수 없는 흐름 디자인 싵ӊ템이 하나의 트렌드로 주목 받고 있지만, 진짜 필요성을 느끼는 시점이 온다
- 120. 무엇이든 물어보세요 Q&A
- 121. RIDI Design System