UI 라이브러리 개발기

Transcript

1. UI 라이브러리 개발기
   퍼포먼스팀 백진욱
   

   View Slide

2. 2
   UI 라이브러리
   자주 쓰이는 UI 컴포넌트를 한 데 모아 놓은 것
   

   View Slide

3. 2018. 8.
   “UI 라이브러리를 만드려는데
   진욱님이 진행을 좀 맡아주시겠어요?”
   

   View Slide

4. 상황 파악하기
   “아무 것도 모르겠어요ㅠ”
   

   View Slide

5. 상황 1. 이번이 처음이 아니다
   이전에 만들어진 것들:
   RUI, RSG 1.0, RSG 1.5, RSG 2.0...

   

   View Slide

6. 상황 2. 미완성 상태
   산재된 코드 (저장소에 코드가 없다!)

   컴포넌트 간 일관성의 부족
   

   View Slide

7. 기존 라이브러리 완성하기
   코드를 한 데 모으자!
   ஹನք౟ ױਤ۽ ೞաঀ ৮ࢿदఃӝ!
   

   View Slide

8. 잠깐!
   옮기는 작업과 개선 작업이 동시에 진행
   리뷰 과정에서 합의에 이르기 까지 오래걸림
   각 컴포넌트에 국한된 개선
   라이브러리 전체 일관성 우려
   어차피 다시 고치게될 것
   8
   

   View Slide

9. 옮기기만 하자
   일단 산재된 코드를 모으는 것이 시급
   동작만 되는 수준으로 작업
   고민 X 속도 O
   전체적인 그림이 보이기 시작
   9
   

   View Slide

10. 모아놓고 보니.. 그 때 그 때 요구사항에 따라 구현된 것이 많음
    미처 라이브러리에 흡수되지 못하거나
    요구사항 변경 → 돌연변이들이 나타나기 시작
    10
    

    View Slide

11. 걱정
    또 만들어 놓고 또 안쓰게 되면 어떡하지?
    11
    

    View Slide

12. 잘 쓰이려면
    쓰는 사람 → 사용자
    사용자 → 사용성
    쓰기 편해야한다!
    인터페이스
    인터페이스를 다듬자!
    12
    

    View Slide

13. 인터페이스

    다듬기
    인터페이스만 다듬기
    구현 X
    동작 코드 X
    문서로만 작성
    마크다운 코드블럭 이용
    구현 고민 없이 인터페이스에 집중
    13
    

    View Slide

14. 인터페이스

    다듬기
    인터페이스만 다듬기
    컴포넌트의 사용 예시 작성
    인터페이스 정의 X
    컴포넌트 사용 예 O
    컴포넌트를 어떤 식으로 사용하는 것이 편한가
    여러 시안을 한 문서에서 비교
    빠르게 여러 컴포넌트를 비교
    14
    

    View Slide

15. 구현하기 각 컴포넌트 별 인터페이스 문서 존재
    구현에도 부담이 적음
    인터페이스 고민 X
    15
    

    View Slide

16. View Slide

17. 17
    아직 구현중입니다..
    조금만 기다려주세요^^;
    https://ridi.github.io/design-system/packages
    

    View Slide

18. 어려웠던 점
    18
    

    View Slide

19. 결정장애
    19
    결정해야할 것이 너무 많음
    인터페이스 패턴 선택
    셋팅 (Webpack, Rollup, CSSinJS...)
    제공형식 (React, Non-React...)
    답 없는 문제, 답이 너무 많은 문제
    혼자 인고의 세월을...
    

    View Slide

20. 커뮤니케이션
    20
    제3자적 입장
    (ѐߊ੗X, ٣੗੉ցX, ࢎਊ੗X)
    중간에 껴들어 와서 의견을 강하게 어필하기 힘든 점
    모든 것을 질문하게되는 상황이 됨
    확신이 서지 않는 결정을 하면,
    나중에 같은 논의가 반복
    

    View Slide

21. 돌이켜보니..
    결국 최종 결정의 몫은 나
    최선을 선택하더라도 바뀔 여지가 많음 (그때는 맞고
    지금은 틀리다)
    해보고 별로면 다시 바꾸면 된다

    (는 자신감으로)
    백지장도 맞들면 낫다
    (회의, 리뷰를 진작에 할걸 ㅠ)
    21
    

    View Slide

22. 깨달은 점 협업에는 의사 결정자 필요
    의사 결정자는 유연하지만 주관이 강해야한다
    22
    

    View Slide

23. 디자인시스템
    23
    https://ridi.github.io/design-system
    

    View Slide

24. 디자인시스템 디자인시스템 ⊃ UI 라이브러리
    이상적 순서: 디자인시스템 → 구현
    안타깝게도 현실은 ㅠ
    24
    

    View Slide

25. 25
    UI 라이브러리 → 테마 → ← 스타일가이드 ← 디자인시스템
    

    View Slide

26. 마치며
    “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
    

    View Slide

27. 감사합니다
    27
    

    View Slide