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.4k
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.4k
빠르게 훑어보는 리디페이 백엔드 개발기
ridi
2
4.9k
Next.js는 정말 zero config였다.
ridi
0
2k
3일 걸릴 것 같던 구매목록 다운로드는 왜 3주가 걸렸을까?
ridi
0
380
원격으로 한 달 일해보니
ridi
0
1.4k
리디북스 앱에 S Pen Remote 연동하기
ridi
2
2.6k
테스트 환경 개선하기
ridi
8
3.3k
추천 API 최적화하기
ridi
4
1.9k
Other Decks in Programming
See All in Programming
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
1.2k
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
110
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
610
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
120
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
130
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
110
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
120
初めてDefinitelyTypedにPRを出した話
syumai
0
420
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
Featured
See All Featured
A designer walks into a library…
pauljervisheath
204
24k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
Teambox: Starting and Learning
jrom
133
8.8k
Typedesign – Prime Four
hannesfritz
40
2.4k
Code Reviewing Like a Champion
maltzj
520
39k
Embracing the Ebb and Flow
colly
84
4.5k
Speed Design
sergeychernyshev
25
620
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
430
Building Flexible Design Systems
yeseniaperezcruz
327
38k
For a Future-Friendly Web
brad_frost
175
9.4k
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