26. 이후로는 각각의 팀에서 리소스가 있고 컴포넌트에 관심이 있는 다른 개발자가 번갈아 가면서 참여하여,
각각의 컴포넌트에 오너쉽을 가지고 구축하였습니다.
쏘카 개발 규모에
적합한 개발 방식 !
쏘카 디자인 시스템 | p. 26
1. 쏘카프레임의 시작
2) TF운영과 개발 방식
95. 문제점 1. 형태적, 기능적 일관성 저하
문제점 2. 모든 화면을 찾아 일일히 수정해야 함
문제점 3. 화면이 많아질수록 유지보수 비용 폭발적으로 증가
3. 개발자와 컴포넌트 구축하기 이런 상황이 지속되다보니 자연스럽게, 컴포넌트 구축에 대한 논의가 이어졌습니다.
쏘카 디자인 시스템 | p. 95
타이밍 이즈 나우!
1) 기존 작업 방식과 문제점
99. 각자 사용하는 툴이 다르고, 중요하게 생각하는 기준이 다르니 컴포넌트의 이름이 다른
건 당연한 일이었습니다.
쏘카 디자인 시스템 | p. 99
3. 개발자와 컴포넌트 구축하기
2) 컴포넌트 네이밍 룰
Design
iOS Android
Web
100. 새로운 컴포넌트 네이밍 룰을 정하기에 앞서, 개발자들과 여러차례 논의를 통해 몇가지
좋은 의견을 발견했습니다.
쏘카 디자인 시스템 | p. 100
개발자 1.
“ 컴포넌트 명이 가장 뒤에 나오는게 사용할 때 편리해요. [무슨 _무슨_Button] 이렇게요! ”
개발자 2.
“ 컴포넌트를 구분할 땐 용도보다 실제 형태(Size, Style 등)를 기준으로 하는게 의미 있어요. ”
3. 개발자와 컴포넌트 구축하기
2) 컴포넌트 네이밍 룰
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
고정 속성 가변 속성
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) 컴포넌트 컬러
현재 컴포넌트 컬러의 한계
154. 쏘카 디자인 시스템 | p. 154
쏘카프레임은 계속 달리는 중!
쏘카프레임의 미래
155. 쏘카 디자인 시스템 | p. 155
쏘카프레임의 미래 쏘카 디자인 시스템을 위해 긴 시간을 달려오면서 얻은 가장 소중한 가치는 디자이너와
개발자가 서로를 이해하는 것 자체에 있다고 생각합니다.
디자인 시스템을 지탱하는 힘 =
디자이너와 개발자가 꾸준히 서로를 이해하겠다는 합의!