Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UI 라이브러리 개발기
Search
RIDI
January 11, 2019
Programming
1
2.5k
UI 라이브러리 개발기
RIDI
January 11, 2019
Tweet
Share
More Decks by RIDI
See All by RIDI
원격 근무 팀 운영 경험 공유
ridi
0
2.1k
SVG Icon Design Guide
ridi
2
3.6k
빠르게 훑어보는 리디페이 백엔드 개발기
ridi
2
5k
Next.js는 정말 zero config였다.
ridi
0
2k
3일 걸릴 것 같던 구매목록 다운로드는 왜 3주가 걸렸을까?
ridi
0
400
원격으로 한 달 일해보니
ridi
0
1.4k
리디북스 앱에 S Pen Remote 연동하기
ridi
2
2.6k
테스트 환경 개선하기
ridi
8
3.4k
추천 API 최적화하기
ridi
4
2k
Other Decks in Programming
See All in Programming
Ruby on cygwin 2025-02
fd0
0
140
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
Grafana Cloudとソラカメ
devoc
0
140
テストをしないQAエンジニアは何をしているか?
nealle
0
130
Domain-Driven Transformation
hschwentner
2
1.9k
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
CI改善もDatadogとともに
taumu
0
110
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
Spring gRPC について / About Spring gRPC
mackey0225
0
220
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
Featured
See All Featured
Become a Pro
speakerdeck
PRO
26
5.1k
How GitHub (no longer) Works
holman
313
140k
RailsConf 2023
tenderlove
29
1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
The Language of Interfaces
destraynor
156
24k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Fireside Chat
paigeccino
34
3.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Building Adaptive Systems
keathley
40
2.4k
Optimizing for Happiness
mojombo
376
70k
Transcript
UI 라이브러리 개발기 퍼포먼스팀 백진욱
2 UI 라이브러리 자주 쓰이는 UI 컴포넌트를 한 데 모아
놓은 것
2018. 8. “UI 라이브러리를 만드려는데 진욱님이 진행을 좀 맡아주시겠어요?”
상황 파악하기 “아무 것도 모르겠어요ㅠ”
상황 1. 이번이 처음이 아니다 이전에 만들어진 것들: RUI, RSG
1.0, RSG 1.5, RSG 2.0...
상황 2. 미완성 상태 산재된 코드 (저장소에 코드가 없다!) 컴포넌트
간 일관성의 부족
기존 라이브러리 완성하기 코드를 한 데 모으자! ஹನք ױਤ۽ ೞաঀ
৮ࢿदఃӝ!
잠깐! 옮기는 작업과 개선 작업이 동시에 진행 리뷰 과정에서 합의에
이르기 까지 오래걸림 각 컴포넌트에 국한된 개선 라이브러리 전체 일관성 우려 어차피 다시 고치게될 것 8
옮기기만 하자 일단 산재된 코드를 모으는 것이 시급 동작만 되는
수준으로 작업 고민 X 속도 O 전체적인 그림이 보이기 시작 9
모아놓고 보니.. 그 때 그 때 요구사항에 따라 구현된 것이
많음 미처 라이브러리에 흡수되지 못하거나 요구사항 변경 → 돌연변이들이 나타나기 시작 10
걱정 또 만들어 놓고 또 안쓰게 되면 어떡하지? 11
잘 쓰이려면 쓰는 사람 → 사용자 사용자 → 사용성 쓰기
편해야한다! 인터페이스 인터페이스를 다듬자! 12
인터페이스 다듬기 인터페이스만 다듬기 구현 X 동작 코드 X 문서로만
작성 마크다운 코드블럭 이용 구현 고민 없이 인터페이스에 집중 13
인터페이스 다듬기 인터페이스만 다듬기 컴포넌트의 사용 예시 작성 인터페이스 정의
X 컴포넌트 사용 예 O 컴포넌트를 어떤 식으로 사용하는 것이 편한가 여러 시안을 한 문서에서 비교 빠르게 여러 컴포넌트를 비교 14
구현하기 각 컴포넌트 별 인터페이스 문서 존재 구현에도 부담이 적음
인터페이스 고민 X 15
16
17 아직 구현중입니다.. 조금만 기다려주세요^^; https://ridi.github.io/design-system/packages
어려웠던 점 18
결정장애 19 결정해야할 것이 너무 많음 인터페이스 패턴 선택 셋팅
(Webpack, Rollup, CSSinJS...) 제공형식 (React, Non-React...) 답 없는 문제, 답이 너무 많은 문제 혼자 인고의 세월을...
커뮤니케이션 20 제3자적 입장 (ѐߊX, ٣ցX, ࢎਊX) 중간에 껴들어 와서
의견을 강하게 어필하기 힘든 점 모든 것을 질문하게되는 상황이 됨 확신이 서지 않는 결정을 하면, 나중에 같은 논의가 반복
돌이켜보니.. 결국 최종 결정의 몫은 나 최선을 선택하더라도 바뀔 여지가
많음 (그때는 맞고 지금은 틀리다) 해보고 별로면 다시 바꾸면 된다 (는 자신감으로) 백지장도 맞들면 낫다 (회의, 리뷰를 진작에 할걸 ㅠ) 21
깨달은 점 협업에는 의사 결정자 필요 의사 결정자는 유연하지만 주관이
강해야한다 22
디자인시스템 23 https://ridi.github.io/design-system
디자인시스템 디자인시스템 ⊃ UI 라이브러리 이상적 순서: 디자인시스템 → 구현
안타깝게도 현실은 ㅠ 24
25 UI 라이브러리 → 테마 → ← 스타일가이드 ← 디자인시스템
마치며 “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
감사합니다 27