Slide 1
Slide 1 text
UI 라이브러리 개발기
퍼포먼스팀 백진욱
Slide 2
Slide 2 text
2
UI 라이브러리
자주 쓰이는 UI 컴포넌트를 한 데 모아 놓은 것
Slide 3
Slide 3 text
2018. 8.
“UI 라이브러리를 만드려는데
진욱님이 진행을 좀 맡아주시겠어요?”
Slide 4
Slide 4 text
상황 파악하기
“아무 것도 모르겠어요ㅠ”
Slide 5
Slide 5 text
상황 1. 이번이 처음이 아니다
이전에 만들어진 것들:
RUI, RSG 1.0, RSG 1.5, RSG 2.0...
Slide 6
Slide 6 text
상황 2. 미완성 상태
산재된 코드 (저장소에 코드가 없다!)
컴포넌트 간 일관성의 부족
Slide 7
Slide 7 text
기존 라이브러리 완성하기
코드를 한 데 모으자!
ஹನք ױਤ۽ ೞաঀ ৮ࢿदఃӝ!
Slide 8
Slide 8 text
잠깐!
옮기는 작업과 개선 작업이 동시에 진행
리뷰 과정에서 합의에 이르기 까지 오래걸림
각 컴포넌트에 국한된 개선
라이브러리 전체 일관성 우려
어차피 다시 고치게될 것
8
Slide 9
Slide 9 text
옮기기만 하자
일단 산재된 코드를 모으는 것이 시급
동작만 되는 수준으로 작업
고민 X 속도 O
전체적인 그림이 보이기 시작
9
Slide 10
Slide 10 text
모아놓고 보니.. 그 때 그 때 요구사항에 따라 구현된 것이 많음
미처 라이브러리에 흡수되지 못하거나
요구사항 변경 → 돌연변이들이 나타나기 시작
10
Slide 11
Slide 11 text
걱정
또 만들어 놓고 또 안쓰게 되면 어떡하지?
11
Slide 12
Slide 12 text
잘 쓰이려면
쓰는 사람 → 사용자
사용자 → 사용성
쓰기 편해야한다!
인터페이스
인터페이스를 다듬자!
12
Slide 13
Slide 13 text
인터페이스
다듬기
인터페이스만 다듬기
구현 X
동작 코드 X
문서로만 작성
마크다운 코드블럭 이용
구현 고민 없이 인터페이스에 집중
13
Slide 14
Slide 14 text
인터페이스
다듬기
인터페이스만 다듬기
컴포넌트의 사용 예시 작성
인터페이스 정의 X
컴포넌트 사용 예 O
컴포넌트를 어떤 식으로 사용하는 것이 편한가
여러 시안을 한 문서에서 비교
빠르게 여러 컴포넌트를 비교
14
Slide 15
Slide 15 text
구현하기 각 컴포넌트 별 인터페이스 문서 존재
구현에도 부담이 적음
인터페이스 고민 X
15
Slide 16
Slide 16 text
16
Slide 17
Slide 17 text
17
아직 구현중입니다..
조금만 기다려주세요^^;
https://ridi.github.io/design-system/packages
Slide 18
Slide 18 text
어려웠던 점
18
Slide 19
Slide 19 text
결정장애
19
결정해야할 것이 너무 많음
인터페이스 패턴 선택
셋팅 (Webpack, Rollup, CSSinJS...)
제공형식 (React, Non-React...)
답 없는 문제, 답이 너무 많은 문제
혼자 인고의 세월을...
Slide 20
Slide 20 text
커뮤니케이션
20
제3자적 입장
(ѐߊX, ٣ցX, ࢎਊX)
중간에 껴들어 와서 의견을 강하게 어필하기 힘든 점
모든 것을 질문하게되는 상황이 됨
확신이 서지 않는 결정을 하면,
나중에 같은 논의가 반복
Slide 21
Slide 21 text
돌이켜보니..
결국 최종 결정의 몫은 나
최선을 선택하더라도 바뀔 여지가 많음 (그때는 맞고
지금은 틀리다)
해보고 별로면 다시 바꾸면 된다
(는 자신감으로)
백지장도 맞들면 낫다
(회의, 리뷰를 진작에 할걸 ㅠ)
21
Slide 22
Slide 22 text
깨달은 점 협업에는 의사 결정자 필요
의사 결정자는 유연하지만 주관이 강해야한다
22
Slide 23
Slide 23 text
디자인시스템
23
https://ridi.github.io/design-system
Slide 24
Slide 24 text
디자인시스템 디자인시스템 ⊃ UI 라이브러리
이상적 순서: 디자인시스템 → 구현
안타깝게도 현실은 ㅠ
24
Slide 25
Slide 25 text
25
UI 라이브러리 → 테마 → ← 스타일가이드 ← 디자인시스템
Slide 26
Slide 26 text
마치며
“They dedicate just as much, if not more,
effort to what I call the ‘second order’ API
design: how code using this API would
evolve over time.”
- Optimized for Change, Dan Abramov
26
Slide 27
Slide 27 text
감사합니다
27