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.7k
UI 라이브러리 개발기
RIDI
January 11, 2019
Tweet
Share
More Decks by RIDI
See All by RIDI
원격 근무 팀 운영 경험 공유
ridi
0
2.2k
SVG Icon Design Guide
ridi
2
3.8k
빠르게 훑어보는 리디페이 백엔드 개발기
ridi
2
5.1k
Next.js는 정말 zero config였다.
ridi
0
2.1k
3일 걸릴 것 같던 구매목록 다운로드는 왜 3주가 걸렸을까?
ridi
0
450
원격으로 한 달 일해보니
ridi
0
1.5k
리디북스 앱에 S Pen Remote 연동하기
ridi
2
2.7k
테스트 환경 개선하기
ridi
8
3.5k
추천 API 최적화하기
ridi
4
2.1k
Other Decks in Programming
See All in Programming
株式会社 Sun terras カンパニーデック
sunterras
0
260
The Flutter Journey of Building a Live Streaming App — With a Side of Performance Tuning
u503
1
100
止められない医療アプリ、そっと Swift 6 へ
medley
1
140
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.6k
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
2k
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
630
CSC305 Lecture 04
javiergs
PRO
0
260
明日から始めるリファクタリング
ryounasso
0
130
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
200
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
210
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
950
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
24
12k
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1032
460k
Embracing the Ebb and Flow
colly
88
4.8k
Documentation Writing (for coders)
carmenintech
75
5k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Navigating Team Friction
lara
189
15k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
Speed Design
sergeychernyshev
32
1.1k
Done Done
chrislema
185
16k
Agile that works and the tools we love
rasmusluckow
331
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
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