쏘카프레임 구축 배경과 과정

쏘카프레임 구축 배경과 과정 from NAVER Engineering
• 1. SOCAR DESIGN SYSTEM FRAME
• 2. 발표대상 디자인시스템 도입을검토하고있는,구축예정인,구축진행중인 개발자,디자이너 쏘카디자인시스템 | p.2
• 3. 발표대상 디자이너입장에 살짝포커싱 쏘카디자인시스템 | p.3 디자인시스템 도입을검토하고있는,구축예정인,구축진행중인 개발자,디자이너
• 4. 1.쏘카프레임의시작 2.다크모드와컬러시스템 3.개발자와컴포넌트구축하기 4.컴포넌트구축프로세스와우선순위 목차
• 5. 1)구축배경 2)TF운영과개발방식 쏘카프레임의시작1.
• 6. 1.쏘카프레임의시작 1)구축배경 작년5월,앱리뉴얼런칭 2019년봄,앱리뉴얼을런칭했습니다. 쏘카디자인시스템 | p.6
• 7. 앱 리뉴얼을 진행하면서 마련한 디자인 스타일 가이드입니다. 1. 쏘카프레임의 시작 1) 구축 배경
• 8. 스타일가이드와 디자인라이브러리는있지만 개발에반영되지않은상황 1.쏘카프레임의시작 1)구축배경
• 9. 개발인원도계속늘고 앱리뉴얼을이후쏘카의개발상황입니다. 쏘카디자인시스템 | p.9 1.쏘카프레임의시작 1)구축배경
• 10. 유관서비스도계속늘고 페어링 비즈니스 플랜 앱리뉴얼을이후쏘카의개발상황입니다. 쏘카디자인시스템 | p.10 1.쏘카프레임의시작 1)구축배경
• 11. 화면도계속늘고 앱리뉴얼을이후쏘카의개발상황입니다.1.쏘카프레임의시작 1)구축배경
• 12. 개발인원계속늘고 유관서비스도늘고 화면도늘고 앱리뉴얼을이후쏘카의개발상황입니다. 쏘카디자인시스템 | p.12 1.쏘카프레임의시작 1)구축배경
• 13. 개발인원들계속늘고 유관서비스도늘고 화면도늘고 디자인시스템 도입적기!! 쏘카디자인시스템 | p.13 앱리뉴얼을이후쏘카의개발상황입니다.1.쏘카프레임의시작 1)구축배경
• 14. 프로덕트디자인팀 하면좋겠다! 추진해보자! 디자인시스템진행을결심하고선행공부하며설득한과정입니다. 쏘카디자인시스템 | p.14 1.쏘카프레임의시작 1)구축배경
• 15. 프로덕트디자인팀 하면좋겠다! 추진해보자! 선행공부와 밑밥&공감대형성 디자인시스템진행을결심하고선행공부하며설득한과정입니다.1.쏘카프레임의시작 1)구축배경 쏘카디자인시스템 | p.15
• 16. 프로덕트디자인팀 하면좋겠다! 추진해보자! 선행공부와 밑밥&공감대형성 디자인시스템진행을결심하고선행공부하며설득한과정입니다.1.쏘카프레임의시작 1)구축배경 쏘카디자인시스템 | p.16
• 17. 설명회진행 TF결성!! 정기회의시간확보 1.쏘카프레임의시작 1)구축배경 쏘카디자인시스템 | p.17
• 18. 1.쏘카프레임의시작 어떤방식으로TF를운영하며 개발을진행해야할까? 2)TF운영과개발방식 한정된자원에서디자인시스템구축을어떻게진행했는지,그개발방식을설명합니다. 쏘카디자인시스템 | p.18
• 19. 모든개발실무자가이해도를가져야하는프로젝트 TF가디자인시스템을전담할수없는환경 장기적인프로젝트 한정된자원에서디자인시스템구축을어떻게진행했는지,그개발방식을설명합니다. 쏘카디자인시스템 | p.19 1.쏘카프레임의시작 2)TF운영과개발방식
• 20. 모든개발실무자가이해도를가져야하는프로젝트 TF가디자인시스템을전담할수없는환경 장기적인프로젝트 쏘카개발규모에 적합한개발방식을 찾아가는과정 한정된자원에서디자인시스템구축을어떻게진행했는지,그개발방식을설명합니다. 쏘카디자인시스템 | p.20 1.쏘카프레임의시작 2)TF운영과개발방식
• 23. 어밴져스 어벤져스가결성되어,파운데이션을구축하고,최초의1개컴포넌트구축하면서쏘카프레임의토대와 구축프로세스를만들었습니다. 어벤져스 design iOS web design Android 쏘카디자인시스템 | p.23 1.쏘카프레임의시작 2)TF운영과개발방식
• 24. design iOS web design Android 구축한 내용과 개념을 각 담당자가 각각의 팀에 잘 전파하였습니다. 쏘카 디자인 시스템 | p. 24 1. 쏘카프레임의 시작 2) TF운영과 개발 방식
• 25. design 아이콘 구축 iOS webAndroid design Android 태그 구축 iOS web design Android 로딩 구축 iOS web 이후로는 각각의 팀에서 리소스가 있고 컴포넌트에 관심이 있는 다른 개발자가 번갈아 가면서 참여하여, 각각의 컴포넌트에 오너쉽을 가지고 구축하였습니다. 쏘카 디자인 시스템 | p. 25 1. 쏘카프레임의 시작 2) TF운영과 개발 방식
• 26. 이후로는 각각의 팀에서 리소스가 있고 컴포넌트에 관심이 있는 다른 개발자가 번갈아 가면서 참여하여, 각각의 컴포넌트에 오너쉽을 가지고 구축하였습니다. 쏘카 개발 규모에 적합한 개발 방식 ! 쏘카 디자인 시스템 | p. 26 1. 쏘카프레임의 시작 2) TF운영과 개발 방식
• 27. 1.쏘카프레임의시작Check Point! 디자인시스템을도입하기적절한시기라고 판단되면공감대미리미리형성 각회사의상황에맞는TF구성
• 28. 1)다크모드도입의배경 2)컬러시스템의구조부터뒤엎게된과정 3)새로운컬러시스템 4)컬러시스템,어떻게툴에반영했을까? 다크모드와컬러시스템2.
• 29. 다크모드도입배경 2.다크모드와컬러시스템 1)다크모드도입의배경 쏘카디자인시스템 | p.29
• 30. 작년 6월, 애플이 WWDC발표에서 iOS13의 다크 모드에 대해 공식 발표를 하였고 9월에 정식 버전이 런칭되었습니다. 쏘카 디자인 시스템 | p. 30 2. 다크모드와 컬러 시스템 1) 다크모드 도입의 배경
• 31. 저시력자를위한접근성향상 어두운환경에적합(취침전휴대폰탐색등) 취향(Private,Premium감성) 배터리절감(OLED+검정배경일때) 컨텐츠집중(넷플릭스등) 다크모드도입의이유와효용성에는다음과같은것들이있습니다. 쏘카디자인시스템 | p.31 2.다크모드와컬러시스템 1)다크모드도입의배경
• 32. 다크모드시작! 2.다크모드와컬러시스템 1)다크모드도입의배경
• 33. 일! 다크모드 시작! 2. 다크모드와 컬러 시스템 1) 다크모드 도입의 배경
• 34. 일! 이! 다크모드 시작! 2. 다크모드와 컬러 시스템 1) 다크모드 도입의 배경
• 35. 일! 이! 삼! 다크모드 시작! 2. 다크모드와 컬러 시스템 1) 다크모드 도입의 배경
• 36. 일! 이! 삼! 사! 다크모드 시작! 2. 다크모드와 컬러 시스템 1) 다크모드 도입의 배경
• 37. 일! 이! 삼! 사! 오! 다크모드 시작! 2. 다크모드와 컬러 시스템 1) 다크모드 도입의 배경
• 38. 일! 이! 삼! 사! 오! 유...욱흑! 다크모드 시작! 2. 다크모드와 컬러 시스템 1) 다크모드 도입의 배경
• 39. 유...욱흑! 다크모드를 가장 마지막으로 대응하게 되면 해당 앱을 켰을 때 예상되는 사용자 경험입니다.2. 다크모드와 컬러 시스템 1) 다크모드 도입의 배경
• 40. 아..지금부터고민해야겠당^^ 2.다크모드와컬러시스템 1)다크모드도입의배경
• 41. 실제로 iOS13 정식 런칭 이후에 다음과 같은 앱들이 일주일 단위로 다크모드를 런칭하고 있었습니다. 쏘카 디자인 시스템 | p. 41 2. 다크모드와 컬러 시스템 1) 다크모드 도입의 배경
• 42. 그럼다크모드를 어떻게,어디서부터시작해야할까 2.다크모드와컬러시스템 2)컬러시스템구조부터뒤엎게된과정 쏘카디자인시스템 | p.42
• 43. 단순하게 생각하면 그냥 기존를 컬러 반전 하면 안될까? 쏘카 디자인 시스템 | p. 43 2. 다크모드와 컬러 시스템 2) 컬러 시스템 구조부터 뒤엎게 된 과정
• 44. 쏘카 디자인 시스템 | p. 44 2. 다크모드와 컬러 시스템 2) 컬러 시스템 구조부터 뒤엎게 된 과정
• 45. 쏘카 디자인 시스템 | p. 45 2. 다크모드와 컬러 시스템 2) 컬러 시스템 구조부터 뒤엎게 된 과정
• 46. 쏘카 디자인 시스템 | p. 46 2. 다크모드와 컬러 시스템 2) 컬러 시스템 구조부터 뒤엎게 된 과정
• 47. 쏘카 디자인 시스템 | p. 47 2. 다크모드와 컬러 시스템 2) 컬러 시스템 구조부터 뒤엎게 된 과정
• 48. 2.다크모드와컬러시스템 2)컬러시스템구조부터뒤엎게된과정 쏘카디자인시스템 | p.48
• 49. 그럼어떻게해야할까? 쏘카디자인시스템 | p.49 2.다크모드와컬러시스템 2)컬러시스템구조부터뒤엎게된과정
• 50. Google Material 2. 다크모드와 컬러 시스템 2) 컬러 시스템 구조부터 뒤엎게 된 과정
• 51. Google Material 2. 다크모드와 컬러 시스템 2) 컬러 시스템 구조부터 뒤엎게 된 과정
• 52. Google Material 2. 다크모드와 컬러 시스템 2) 컬러 시스템 구조부터 뒤엎게 된 과정
• 53. Apple HIG 2. 다크모드와 컬러 시스템 2) 컬러 시스템 구조부터 뒤엎게 된 과정
• 54. Apple HIG 2. 다크모드와 컬러 시스템 2) 컬러 시스템 구조부터 뒤엎게 된 과정
• 55. grey010 ↔ ️grey010 쏘카 디자인 시스템 | p.55 2. 다크모드와 컬러 시스템 2) 컬러 시스템 구조부터 뒤엎게 된 과정
• 56. grey010 ↔ ️grey010 쏘카 디자인 시스템 | p. 56 2. 다크모드와 컬러 시스템 2) 컬러 시스템 구조부터 뒤엎게 된 과정
• 57. backgroundcolor↔️backgroundcolor 쏘카디자인시스템 | p.57 2.다크모드와컬러시스템 2)컬러시스템구조부터뒤엎게된과정
• 58. backgroundcolor↔️backgroundcolor 쏘카디자인시스템 | p.58 2.다크모드와컬러시스템 2)컬러시스템구조부터뒤엎게된과정
• 59. 명도에따라분류된색상이아닌, 컬러가사용되는목적에따라분류된 새로운컬러시스템이필요 쏘카디자인시스템 | p.59 2.다크모드와컬러시스템 2)컬러시스템구조부터뒤엎게된과정
• 60. 그래서 컬러 시스템 어떻게 구축했다고? 2. 다크모드와 컬러 시스템 3) 새로운 컬러 시스템 쏘카 디자인 시스템 | p. 60
• 61. AS-IS COLOR 2. 다크모드와 컬러 시스템 3) 새로운 컬러 시스템
• 62. AS-IS TO-BE 명도에 따라 분류된 색상이 아닌, 컬러가 사용되는 목적에 따라 분류된 컬러 시스템 2. 다크모드와 컬러 시스템 3) 새로운 컬러 시스템
• 63. 2.다크모드와컬러시스템 3)새로운컬러시스템
• 64. 시멘틱컬러 semantic:의미론의,의미의 앞서설명했던명도에따라분류된색상이아닌컬러가사용되는목적에따라분류된컬러시스템을 시멘틱컬러라고명명하였습니다. 쏘카디자인시스템 | p.64 2.다크모드와컬러시스템 3)새로운컬러시스템
• 65. 2.다크모드와컬러시스템 3)새로운컬러시스템
• 66. 시멘틱컬러작업방식 들여다보기 시멘틱컬러의작업방식을자세히들여다보겠습니다. 쏘카디자인시스템 | p.66 2.다크모드와컬러시스템 3)새로운컬러시스템
• 67. 기본팔레트의기능을하는베이직컬러를매핑해서시멘틱컬러에사용함으로써 grey010이라는베이직컬러의 hex값이변경되면해당컬러가적용된시멘틱컬러도일괄변경될수있도록작업하였습니다. 쏘카디자인시스템 | p.67 2.다크모드와컬러시스템 3)새로운컬러시스템
• 68. 스케치 작업 방식에 적용한 컬러 매핑 방식입니다. 쏘카 디자인 시스템 | p. 68 2. 다크모드와 컬러 시스템 3) 새로운 컬러 시스템
• 69. 코드에서도 시멘틱 컬러에 베이직 컬러가 매핑되어 있는 것을 확인 할 수 있습니다. 쏘카 디자인 시스템 | p. 69 2. 다크모드와 컬러 시스템 3) 새로운 컬러 시스템
• 70. AdobeSpectrum 컬러매핑관련레퍼런스사이트입니다.2.다크모드와컬러시스템 3)새로운컬러시스템
• 71. CarbonDesignSystem 컬러매핑관련레퍼런스사이트입니다.2.다크모드와컬러시스템 3)새로운컬러시스템
• 72. 스케치,제플린작업방식 2.다크모드와컬러시스템 4)컬러시스템,어떻게툴에반영했을까? 이렇게정리된디자인시스템을어떻게툴에반영하였는지알아보겠습니다. 쏘카디자인시스템 | p.72
• 73. 베이직컬러와시멘틱컬러의반영 쏘카디자인시스템 | p.73 2.다크모드와컬러시스템 4)컬러시스템,어떻게툴에반영했을까?
• 74. 베이직 컬러와 시멘틱 컬러의 스케치 작업 방식과 제플린 업로드 방식입니다. 쏘카 디자인 시스템 | p. 74 2. 다크모드와 컬러 시스템 4) 컬러 시스템, 어떻게 툴에 반영했을까?
• 75. 시멘틱컬러를스케치로작업한방식입니다. 쏘카디자인시스템 | p.75 2.다크모드와컬러시스템 4)컬러시스템,어떻게툴에반영했을까?
• 76. 시멘틱컬러를제플린에서확인하는방식입니다. 쏘카디자인시스템 | p.76 2.다크모드와컬러시스템 4)컬러시스템,어떻게툴에반영했을까?
• 77. 라이트,다크모드의관리 쏘카디자인시스템 | p.77 2.다크모드와컬러시스템 4)컬러시스템,어떻게툴에반영했을까?
• 78. 라이트, 다크 모드 두 개의 라이브러리를 하나의 작업파일에 연결하였습니다. 쏘카 디자인 시스템 | p. 78 2. 다크모드와 컬러 시스템 4) 컬러 시스템, 어떻게 툴에 반영했을까?
• 79. 클릭1번이면 라이트&다크모드 전환가능 Camilo플러그인사용 2.다크모드와컬러시스템 4)컬러시스템,어떻게툴에반영했을까? 쏘카디자인시스템 | p.79
• 80. 다크모드화면을항상간편하게같이챙길수있음 쏘카디자인시스템 | p.80 2.다크모드와컬러시스템 4)컬러시스템,어떻게툴에반영했을까?
• 81. 다크모드 라이브러리로전환하여, 디자인시스템연결안된것도 바로식별가능! 쏘카디자인시스템 | p.81 2.다크모드와컬러시스템 4)컬러시스템,어떻게툴에반영했을까?
• 82. 2.다크모드와컬러시스템Check Point! 다크모드대응:언젠가는해야할숙제가아닌가.. 다크모드대응을위해서는의미론적컬러시스템이필요 컬러시스템은툴에어떤방식으로적용할지항상같이검토!
• 83. 그런데 말입니다. 잠깐!!
• 84. 잠깐!!
• 85. 잠깐!!
• 86. 잠깐!!
• 87. 네이버맵다크모드가선행되어야 쏘카앱의다크모드가가능합니다ㅎㅎ 잠깐!!
• 88. 혹시네이버맵개발자, 디자이너분듣고계신다면 잠깐!!
• 89. 잘부탁드립니다. 잠깐!!
• 90. 1)기존작업방식과문제점 2)컴포넌트네이밍룰 3)개발방식(Origin,Option) 4)컴포넌트컬러 개발자와컴포넌트 구축하기 3.
• 91. 3.개발자와컴포넌트구축하기 1)기존작업방식과문제점 똑같은UI리소스어떻게재활용할까? 쏘카디자인시스템 | p.91
• 92. 3.개발자와컴포넌트구축하기 1)기존작업방식과문제점 디자이너들은스케치심볼기능을활용해형태를공유하고UI스타일가이드를활용해 최소한의용법과사용규칙을공유했습니다. 쏘카디자인시스템 | p.92 디자이너는? 스케치심볼기능+UI스타일가이드
• 93. 3.개발자와컴포넌트구축하기 개발자들은기존코드를재활용하거나,새로구축하는방식으로작업했습니다. 쏘카디자인시스템 | p.93 개발자는? 기존코드복붙or새로구축 1)기존작업방식과문제점
• 94. 3.개발자와컴포넌트구축하기 기존의UI리소스작업방식은다양한문제점을야기했습니다. 쏘카디자인시스템 | p.94 문제점1. 형태적,기능적일관성저하 문제점2. 모든화면을찾아일일히수정해야함 문제점3. 화면이많아질수록유지보수비용폭발적으로증가 1)기존작업방식과문제점
• 95. 문제점 1. 형태적, 기능적 일관성 저하 문제점 2. 모든 화면을 찾아 일일히 수정해야 함 문제점 3. 화면이 많아질수록 유지보수 비용 폭발적으로 증가 3. 개발자와 컴포넌트 구축하기 이런 상황이 지속되다보니 자연스럽게, 컴포넌트 구축에 대한 논의가 이어졌습니다. 쏘카 디자인 시스템 | p. 95 타이밍 이즈 나우! 1) 기존 작업 방식과 문제점
• 96. 3.개발자와컴포넌트구축하기 2)컴포넌트네이밍룰 쏘카디자인시스템 | p.96 컴포넌트구축의첫걸음, 네이밍통일하기a.k.a말모이 새롭게컴포넌트를구축하기로한우리는,우선각디자이너와개발자가다르게부르던 네이밍을통일하기로했습니다.
• 97. 영화말모이를보면,전국의말을모아표준어를만드는장면이나오는데요, 저희가처음컴포넌트의이름을통일하는과정도이와크게다르지않았습니다. 쏘카디자인시스템 | p.97 3.개발자와컴포넌트구축하기 2)컴포넌트네이밍룰 ✂ 가위?가새?강우?????
• 98. 기존에는같은버튼을디자이너와각플랫폼의개발자들이서로다른기준으로다르게 부르고있었고,이를통일할필요가있었습니다. 쏘카디자인시스템 | p.98 3.개발자와컴포넌트구축하기 2)컴포넌트네이밍룰
• 99. 각자 사용하는 툴이 다르고, 중요하게 생각하는 기준이 다르니 컴포넌트의 이름이 다른 건 당연한 일이었습니다. 쏘카 디자인 시스템 | p. 99 3. 개발자와 컴포넌트 구축하기 2) 컴포넌트 네이밍 룰 Design iOS Android Web
• 100. 새로운 컴포넌트 네이밍 룰을 정하기에 앞서, 개발자들과 여러차례 논의를 통해 몇가지 좋은 의견을 발견했습니다. 쏘카 디자인 시스템 | p. 100 개발자 1. “ 컴포넌트 명이 가장 뒤에 나오는게 사용할 때 편리해요. [무슨 _무슨_Button] 이렇게요! ” 개발자 2. “ 컴포넌트를 구분할 땐 용도보다 실제 형태(Size, Style 등)를 기준으로 하는게 의미 있어요. ” 3. 개발자와 컴포넌트 구축하기 2) 컴포넌트 네이밍 룰
• 101. 최종적으로정해진컴포넌트네이밍룰입니다.위계에따라컴포넌트특성을열거한다 음,마지막에는컴포넌트명과테마명를기재합니다. 쏘카디자인시스템 | p.101 3.개발자와컴포넌트구축하기 2)컴포넌트네이밍룰 Size 컴포넌트특성 컴포넌트명 테마 _ _Type Button[Theme]
• 102. 실제 쏘카프레임의 버튼 컴포넌트 명을 조합할 수 있는 세부 항목입니다. large fill button blue regular line grey small text coral 쏘카 디자인 시스템 | p. 102 3. 개발자와 컴포넌트 구축하기 2) 컴포넌트 네이밍 룰 Size 컴포넌트 특성 컴포넌트 명 테마 _ _Type Button [Theme]
• 103. 컴포넌트 명 뒤에 오는 테마란, 동일한 컴포넌트지만 다양한 컬러 조합에 따라 달라지는 컴포넌트를 쉽게 정의할 수 있는 개념입니다. 쏘카 디자인 시스템 | p. 103 3. 개발자와 컴포넌트 구축하기 2) 컴포넌트 네이밍 룰 테마 [Theme] large_fill_button large_fill_button large_fill_button [blue] [grey] [coral]
• 104. 쏘카 디자인 시스템 | p. 104 3. 개발자와 컴포넌트 구축하기 2) 컴포넌트 네이밍 룰 컴포넌트 네이밍룰을 사용해 적용한 쏘카프레임의 모든 버튼입니다.
• 105. 실제 실무에서는, 스케치와 제플린을 사용하기 때문에 각 툴을 고려해 개발자와 작은 규 칙을 정해 컴포넌트 명을 확인하고 있습니다. 쏘카 디자인 시스템 | p. 105 3. 개발자와 컴포넌트 구축하기 2) 컴포넌트 네이밍 룰 개발자가 확인하는 영역디자이너만 사용하는 영역 regular_fill_button[grey]103 button/2 regular/1 fill/regular_fill_button[grey]103 button/2 regular/1 fill/
• 106. 쏘카 디자인 시스템 | p. 106 어떻게 해야 사용하기 편하고 유연하게 확장할 수 있을까? 컴포넌트 개발, 3. 개발자와 컴포넌트 구축하기 3) 개발 방식 (Origin, Option)
• 107. 쏘카 디자인 시스템 | p. 107 컴포넌트 개발 방식을 최대한 개발 친화적으로 접근하기 위해 개발자의 목소리에 집중 했습니다. 개발자 “ 각 컴포넌트마다 변하지 않는 고정 속성과 자주 변하는 가변 속성을 구분해서 알려주세요! ” 3. 개발자와 컴포넌트 구축하기 3) 개발 방식 (Origin, Option)
• 108. 컴포넌트 개발에 필요한 Origin(고정 속성)과 Option(가변 속성) 이라는 개념을 만들어 디자이너와 개발자가 원활하게 소통합니다. 쏘카 디자인 시스템 | p. 108 3. 개발자와 컴포넌트 구축하기 3) 개발 방식 (Origin, Option) Origin과 Option 고정 속성 가변 속성
• 109. Origin(고정속성)은,말그대로변하지않는컴포넌트의아이덴티티와고유한속성입니 다.주로크기나텍스트스타일과같은형태가해당됩니다. 쏘카디자인시스템 | p.109 3.개발자와컴포넌트구축하기 3)개발방식(Origin,Option) 1 1 2 2 Origin 고정속성 Size(높이): 64 Textstyle: subtitle2
• 110. Option(가변속성)은변하거나,변할여지가있는속성입니다.주로각Origin의컬러 에해당합니다.이옵션조합에따라테마가결정됩니다. 쏘카디자인시스템 | p.110 3.개발자와컴포넌트구축하기 3)개발방식(Origin,Option) 1 1 2 2 Option 가변속성 Basecolor: blue050 Textcolor: white
• 111. 실무에서,디자이너는스케치Manageoverrides기능을활용해Origin과Option값 을설정합니다. 쏘카디자인시스템 | p.111 3.개발자와컴포넌트구축하기 3)개발방식(Origin,Option)
• 112. 개발자는각개발플랫폼에맞게Option값을손쉽게정의할수있도록셋팅한뒤사용 합니다. 쏘카디자인시스템 | p.112 3.개발자와컴포넌트구축하기 3)개발방식(Origin,Option)
• 113. 쏘카 디자인 시스템 | p. 113 3. 개발자와 컴포넌트 구축하기 4) 컴포넌트 컬러 컴포넌트 컬러
• 114. 쏘카컬러시스템에는베이직컬러와시멘틱컬러가있습니다.컴포넌트컬러는시멘틱 컬러에속하는컴포넌트만을위해정의된컬러셋입니다. 쏘카디자인시스템 | p.114 3.개발자와컴포넌트구축하기 4)컴포넌트컬러 컴포넌트컬러 시멘틱컬러
• 115. 컴포넌트 컬러는 다른 시멘틱 컬러와 마찬가지로, 일부 컴포넌트에서 라이트와 다크모 드일 때 베이직 컬러가 1:1 매칭되지 않는 상황이 발생하면서 생긴 개념입니다. 쏘카 디자인 시스템 | p. 115 3. 개발자와 컴포넌트 구축하기 4) 컴포넌트 컬러
• 116. 쏘카 디자인 시스템 | p. 116 3. 개발자와 컴포넌트 구축하기 4) 컴포넌트 컬러 https://twitter.com/ogu_official_kr https://twitter.com/ogu_official_kr 처음부터 계획한건 아니었습니다. 컴포넌트를 개발하다 보니 예상치 못하게 문제가 발 생했고, 이를 해결하기 위해 컴포넌트 컬러를 도입했습니다.
• 117. 컴포넌트 컬러는 시멘틱 컬러에 속하며, 각 컴포넌트 별로 구분한 뒤 각 컴포넌트에 필요 한 컬러를 라이트와 다크 1벌씩 매치합니다. 쏘카 디자인 시스템 | p. 117 3. 개발자와 컴포넌트 구축하기 4) 컴포넌트 컬러
• 118. 컴포넌트 컬러를 활용하면 라이트 모드와 다크 모드에서 각각 다른 베이직 컬러를 하나 의 이름으로 정의할 수 있습니다. 쏘카 디자인 시스템 | p. 118 3. 개발자와 컴포넌트 구축하기 4) 컴포넌트 컬러
• 119. 쏘카 디자인 시스템 | p. 119 3. 개발자와 컴포넌트 구축하기 4) 컴포넌트 컬러
• 120. 쏘카 디자인 시스템 | p. 120 3. 개발자와 컴포넌트 구축하기 4) 컴포넌트 컬러 현재 컴포넌트 컬러의 한계
• 121. 컴포넌트컬러도비례해서증가컴포넌트종류가늘어날수록, 현재컴포넌트컬러는각컴포넌트마다정의되고있어,컴포넌트의수가많으면많을수 록비효율적이고관리비용이증가하게되는한계를가지고있습니다. 쏘카디자인시스템 | p.121 3.개발자와컴포넌트구축하기 4)컴포넌트컬러
• 122. 컴포넌트컬러체계까지완벽히구성하자 VS 우선개발한뒤점진적으로개선하자 쏘카디자인시스템 | p.122 3.개발자와컴포넌트구축하기 4)컴포넌트컬러
• 123. 컴포넌트컬러체계까지완벽히구성하자 VS 우선개발한뒤점진적으로개선하자 쏘카디자인시스템 | p.123 3.개발자와컴포넌트구축하기 4)컴포넌트컬러
• 124. 일단빨리만들어서 디자인시스템을검증하고, 문제가있으면수정하자! 쏘카디자인시스템 | p.124 3.개발자와컴포넌트구축하기 4)컴포넌트컬러
• 125. 쏘카 디자인 시스템 | p. 125 3. 개발자와 컴포넌트 구축하기 4) 컴포넌트 컬러 우리가 바라는 컴포넌트 컬러의 최종 꼴은 통합 컴포넌트 컬러 체계를 구축해서, 모든 컴 포넌트가 동일한 컬러 조합을 사용하는 것입니다.
• 126. 쏘카 디자인 시스템 | p. 126 3. 개발자와 컴포넌트 구축하기 4) 컴포넌트 컬러 https://twitter.com/ogu_official_kr
• 127. 3.개발자와컴포넌트구축하기Check Point! 시작은네이밍통일부터! 편리함과확장성을고려한개발방식정하기 필요하면컴포넌트컬러따로조합하기
• 128. 1)컴포넌트구축프로세스 2)컴포넌트우선순위워크샵 컴포넌트구축 프로세스와우선순위 4.
• 129. 4.컴포넌트구축프로세스와 우선순위 1)컴포넌트구축프로세스 이미프로덕트규모가어느정도있는상태에서시작하는디자인시스템은, 처음부터새로구축하는것보다어려움이많습니다. 쏘카디자인시스템 | p.129 디자인시스템?필요하죠!But... 중간부터시작하는디자인시스템
• 130. 4.컴포넌트구축프로세스와 우선순위 저희팀도처음디자인시스템을시작할때는열정이가득한만큼한번에 완벽한디자인시스템을구축할기대에부풀어있었습니다. 1)컴포넌트구축프로세스 쏘카디자인시스템 | p.130 한번에멋있게짜잔!완성! 하고싶었지만...
• 131. 4.컴포넌트구축프로세스와 우선순위 기존히스토리파악부터컴포넌트교체까지일감은2배인데,기존업무도무리없이진 행해야하니리소스는 절반혹은그보다없는셈이죠. 1)컴포넌트구축프로세스 쏘카디자인시스템 | p.131 일감은2배 리소스는0.5배
• 132. 4.컴포넌트구축프로세스와 우선순위 하지만울지말고,꾸준히디자인시스템을구축할수있는방법을열심히찾아봅니다. 1)컴포넌트구축프로세스 쏘카디자인시스템 | p.132
• 133. 4.컴포넌트구축프로세스와 우선순위 1)컴포넌트구축프로세스 쏘카디자인시스템 | p.133 느리지만,완성도는높게! 이터레이션안에컴포넌트1개완성를목표로!
• 134. 4.컴포넌트구축프로세스와 우선순위 반복되는컴포넌트구축을원활하게진행하기위해개발이터레이션에맞는컴포넌트 구축프로세스를만들었습니다. 1)컴포넌트구축프로세스 쏘카디자인시스템 | p.134
• 135. 4.컴포넌트구축프로세스와 우선순위 1)컴포넌트구축프로세스 쏘카디자인시스템 | p.135 중요한포인트는,컴포넌트구축도기존프로젝트와최대한비슷하게진행하고관리하 는것입니다.
• 136. 4.컴포넌트구축프로세스와 우선순위 1)컴포넌트구축프로세스 쏘카디자인시스템 | p.136 1.기획+2.킥오프 3.검토 4.제작 기존프로젝트관리툴과순서에따라아래와같이각컴포넌트별로구축프로젝트를 따로운영했습니다.
• 137. 4.컴포넌트구축프로세스와 우선순위 가장중요한과정은바로검토과정입니다.다양한플랫폼의개발자와함께협업해야하 는디자인시스템특성상,개발방식이나프로젝트관리과정에서끊임없이변수가생길 수있기때문에반드시본격적인개발을진행하기전꼼꼼한검토는필수입니다.1)컴포넌트구축프로세스 쏘카디자인시스템 | p.137
• 138. 4.컴포넌트구축프로세스와 우선순위 본격적인개발이시작되면디자이너는개발자에게컴포넌트에대한모든정보가담긴 가이드를전달합니다. 1)컴포넌트구축프로세스 쏘카디자인시스템 | p.138
• 139. 4.컴포넌트구축프로세스와 우선순위 가이드에는Origin과Option그리고각테마와상태값등을포함하며,라이트모드와 다크모드컴포넌트정보가모두담겨있어야합니다. 1)컴포넌트구축프로세스 쏘카디자인시스템 | p.60
• 140. 4.컴포넌트구축프로세스와 우선순위 가이드를전달할땐,컴포넌트의스펙도꼼꼼히정리해서전달합니다. 1)컴포넌트구축프로세스 쏘카디자인시스템 | p.140
• 141. 4.컴포넌트구축프로세스와 우선순위 2)컴포넌트우선순위워크샵 이제모든준비가완료되었습니다!컴포넌트를개발을시작하기만하면됩니다! 근데,뭐부터개발하죠? 쏘카디자인시스템 | p.141 개발합시다!근데,뭐부터? 컴포넌트우선순위워크샵
• 142. 4.컴포넌트구축프로세스와 우선순위 2)컴포넌트우선순위워크샵 쏘카디자인시스템 | p.142 1. 2. 디자이너의생각 버튼개발완료후두번째컴포넌트로,디자이너는비슷한형태와기능을지닌“칩”을 제안했습니다.
• 143. 4.컴포넌트구축프로세스와 우선순위 2)컴포넌트우선순위워크샵 하지만,보기와달리칩은복잡한개발이필요한상황이었고,빠듯한개발기간에맞춰 다시개발이쉬운컴포넌트를찾느라시간을허비했습니다. 쏘카디자인시스템 | p.143 1. 2. 개발자의생각 X
• 144. 4.컴포넌트구축프로세스와 우선순위 2)컴포넌트우선순위워크샵 컴포넌트개발순서도합리적인의사결정을통해효율적으로관리할필요가있다고생 각했습니다. 쏘카디자인시스템 | p.144 https://uxdesign.cc/workshop-how-to-prioritize-your-design-system-components-744aa99f07d7
• 145. 4.컴포넌트구축프로세스와 우선순위 2)컴포넌트우선순위워크샵 다이어그램에개발하고싶은컴포넌트를배치해,효과적인컴포넌트개발우선순위를 정할수있습니다. 쏘카디자인시스템 | p.145 https://uxdesign.cc/workshop-how-to-prioritize-your-design-system-components-744aa99f07d7
• 146. 4.컴포넌트구축프로세스와 우선순위 2)컴포넌트우선순위워크샵 쏘카디자인시스템 | p.146 디자인시스템어벤저스팀을포함한관심있는사람이모두모여워크샵을진행했습니 다.인원이많아,개발자와디자이너그룹으로나누어진행했습니다.
• 147. 4.컴포넌트구축프로세스와 우선순위 2)컴포넌트우선순위워크샵 쏘카디자인시스템 | p.147 각개발자와디자이너가완성한다이어그램입니다. 차이가보이시나요?
• 148. 4.컴포넌트구축프로세스와 우선순위 2)컴포넌트우선순위워크샵 크게보면두다이어그램은이런차이를가지고있습니다. 쏘카디자인시스템 | p.148 개발자: 어려운건일단미래에(?) 디자이너: 빨리완성하고싶다아!!!
• 149. 4.컴포넌트구축프로세스와 우선순위 2)컴포넌트우선순위워크샵 쏘카디자인시스템 | p.149 자세히살펴보면,개발자와디자이너의의견이일치하는부분이보입니다. 이런부분은추가논의필요없이넘어갑니다.
• 150. 4.컴포넌트구축프로세스와 우선순위 개발자와디자이너의생각이크게다른경우도있습니다.이런경우에는서로가왜그렇 게생각했는지이야기를나눕니다. 2)컴포넌트우선순위워크샵 쏘카디자인시스템 | p.150
• 151. 4.컴포넌트구축프로세스와 우선순위 2)컴포넌트우선순위워크샵 그러다보면...어느새극적타협을이룬개발자와디자이너를볼수있습니다. 쏘카디자인시스템 | p.151 (극적타협)
• 152. 4.컴포넌트구축프로세스와 우선순위 2)컴포넌트우선순위워크샵 이렇게완성된최종다이어그램을기반으로컴포넌트구축계획을세웁니다. 쏘카디자인시스템 | p.152
• 153. 4.컴포넌트구축프로세스와우선순위Check Point! 현실적인컴포넌트개발목표세우기! 목표와일하는방식에맞는프로세스구축하기 컴포넌트구축우선순위도개발자와함께정하기
• 154. 쏘카 디자인 시스템 | p. 154 쏘카프레임은 계속 달리는 중! 쏘카프레임의 미래
• 155. 쏘카 디자인 시스템 | p. 155 쏘카프레임의 미래 쏘카 디자인 시스템을 위해 긴 시간을 달려오면서 얻은 가장 소중한 가치는 디자이너와 개발자가 서로를 이해하는 것 자체에 있다고 생각합니다. 디자인 시스템을 지탱하는 힘 = 디자이너와 개발자가 꾸준히 서로를 이해하겠다는 합의!
• 156. 쏘카프레임웹사이트 https://socarframe.socar.kr/
• 157. 쏘카 디자인 시스템 | p. 60 쏘카 테크 블로그 https://tech.socarcorp.kr/