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
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
700
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
250
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
750
Tuning GraphQL on Rails
pyama86
2
1.2k
外部システム連携先が10を超えるシステムでのアーキテクチャ設計・実装事例
kiwasaki
1
260
カラム追加で増えるActiveRecordのメモリサイズ イメージできますか?
asayamakk
4
1.9k
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
120
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
4
480
CSC509 Lecture 09
javiergs
PRO
0
130
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ~俺のやらかしを越えてゆけ~
techouse
53
33k
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
200
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
430
Featured
See All Featured
What's new in Ruby 2.0
geeforr
343
31k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
For a Future-Friendly Web
brad_frost
175
9.4k
Become a Pro
speakerdeck
PRO
25
5k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Embracing the Ebb and Flow
colly
84
4.5k
Documentation Writing (for coders)
carmenintech
65
4.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
A better future with KSS
kneath
238
17k
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