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.6k
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
5k
Next.js는 정말 zero config였다.
ridi
0
2.1k
3일 걸릴 것 같던 구매목록 다운로드는 왜 3주가 걸렸을까?
ridi
0
450
원격으로 한 달 일해보니
ridi
0
1.4k
리디북스 앱에 S Pen Remote 연동하기
ridi
2
2.7k
테스트 환경 개선하기
ridi
8
3.5k
추천 API 최적화하기
ridi
4
2.1k
Other Decks in Programming
See All in Programming
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
170
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
150
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
240
20250708_JAWS_opscdk
takuyay0ne
2
150
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.1k
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
250
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
1
220
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
260
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)
risatube
PRO
5
850
NEWT Backend Evolution
xpromx
1
150
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
680
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
190
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
KATA
mclloyd
30
14k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Balancing Empowerment & Direction
lara
1
500
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Raft: Consensus for Rubyists
vanstee
140
7k
Designing for Performance
lara
610
69k
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