# [[Styletron|Styletron]] ## ๐Ÿ“Œ Brief Summary Styletron์€ Uber์˜ Base Web ๋””์ž์ธ ์‹œ์Šคํ…œ์—์„œ ํ™œ์šฉ๋˜๋Š” ์Šคํƒ€์ผ๋ง ๋„๊ตฌ๋กœ, ์•„ํ† ๋ฏน ์Šคํƒ€์ผ๋ง(atomic styling)์„ ์ƒ์„ฑํ•˜์—ฌ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ๋‹ค์šด๋กœ๋“œํ•ด์•ผ ํ•˜๋Š” ์ฝ˜ํ…์ธ ์˜ ์–‘์„ ์ตœ์†Œํ™”ํ•˜๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค [1]. ์ด๋ฅผ ํ†ตํ•ด ๋ชจ๋ฐ”์ผ ๊ธฐ๊ธฐ ์‚ฌ์šฉ์ž๋‚˜ ๋„คํŠธ์›Œํฌ ์—ฐ๊ฒฐ์ด ์—ด์•…ํ•œ ํ™˜๊ฒฝ์—์„œ๋„ ์„ฑ๋Šฅ์ด ์ตœ์ ํ™”๋  ์ˆ˜ ์žˆ๋„๋ก ๋•์Šต๋‹ˆ๋‹ค [1]. ๋‹ค๋งŒ, ์ด ์™ธ์˜ ๊ตฌ์ฒด์ ์ธ ์ž‘๋™ ์›๋ฆฌ๋‚˜ ์•„ํ‚คํ…์ฒ˜์— ๋Œ€ํ•œ ์†Œ์Šค์— ๊ด€๋ จ ์ •๋ณด๊ฐ€ ๋ถ€์กฑํ•ฉ๋‹ˆ๋‹ค. ## ๐Ÿ“– Core Content * **์•„ํ† ๋ฏน ์Šคํƒ€์ผ๋ง(Atomic Styling) ์ƒ์„ฑ**: Styletron์€ CSS๋ฅผ ์•„ํ† ๋ฏนํ•œ ๋‹จ์œ„๋กœ ์ƒ์„ฑํ•จ์œผ๋กœ์จ ์Šคํƒ€์ผ ์ฝ”๋“œ๊ฐ€ ์ฐจ์ง€ํ•˜๋Š” ์šฉ๋Ÿ‰์„ ์ค„์ด๊ณ , ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ๋กœ๋“œํ•  ๋•Œ ๋‹ค์šด๋กœ๋“œํ•˜๋Š” ์ฝ˜ํ…์ธ ๋ฅผ ์ตœ์†Œํ™”ํ•ฉ๋‹ˆ๋‹ค [1]. * **์„ฑ๋Šฅ ๋ฐ ํ™˜๊ฒฝ ์ตœ์ ํ™”**: ์ƒ์„ฑ๋œ ์•„ํ† ๋ฏน ์Šคํƒ€์ผ์„ ํ†ตํ•ด ์ปดํ“จํŒ… ํŒŒ์›Œ๊ฐ€ ๋ถ€์กฑํ•œ ๋ชจ๋ฐ”์ผ ๊ธฐ๊ธฐ๋‚˜ ๋„คํŠธ์›Œํฌ ํ™˜๊ฒฝ์ด ์ข‹์ง€ ์•Š์€ ์‚ฌ์šฉ์ž๋“ค์—๊ฒŒ ์ตœ์ ํ™”๋œ UI ์„ฑ๋Šฅ์„ ์ œ๊ณตํ•˜๋Š” ๋ฐ ํ•ต์‹ฌ์ ์ธ ๊ธฐ์—ฌ๋ฅผ ํ•ฉ๋‹ˆ๋‹ค [1]. * **Base Web๊ณผ์˜ ํ†ตํ•ฉ**: ์ ‘๊ทผ์„ฑ๊ณผ ์•ˆ์ •์„ฑ์„ ์ค‘์‹œํ•˜๋Š” Uber์˜ ์˜คํ”ˆ์†Œ์Šค React ์ปดํฌ๋„ŒํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ Base Web์—์„œ ์„ฑ๋Šฅ ์ตœ์ ํ™”๋ฅผ ์œ„ํ•œ ๊ธฐ๋ฐ˜ ๋„๊ตฌ๋กœ ์ฑ„ํƒ๋˜์–ด ํ™œ์šฉ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค [1]. * ์†Œ์Šค์— ๊ด€๋ จ ์ •๋ณด๊ฐ€ ๋ถ€์กฑํ•ฉ๋‹ˆ๋‹ค. (Styletron์˜ ์„ธ๋ถ€์ ์ธ ๋ฌธ๋ฒ•, ๋‚ด๋ถ€ ๋™์ž‘ ์›๋ฆฌ, ๋‹ค๋ฅธ [[CSS-in-JS|CSS-in-JS]] ๋˜๋Š” [[Tailwind CSS|Tailwind CSS]]์™€์˜ ์ง์ ‘์ ์ธ ์„ฑ๋Šฅ ๋น„๊ต ๋“ฑ ๊นŠ์ด ์žˆ๋Š” ๊ธฐ์ˆ ์  ์ •๋ณด๋Š” ์ œ๊ณต๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.) ## ๐Ÿ”— Knowledge Connections - **Related Topics:** Atomic Styling, Base Web, [[Design Systems|DesignSystems]] - **Projects/Contexts:** [[Uber Base Web|Uber Base Web]] React Component Library - **Contradictions/Notes:** ์†Œ์Šค์— ๊ด€๋ จ ์ •๋ณด๊ฐ€ ๋ถ€์กฑํ•ฉ๋‹ˆ๋‹ค. (Styletron๊ณผ ๋‹ค๋ฅธ ์Šคํƒ€์ผ๋ง ์ ‘๊ทผ๋ฒ• ๊ฐ„์˜ ์ƒ์ถฉ๋˜๋Š” ์˜๊ฒฌ์ด๋‚˜ ํ•œ๊ณ„์ ์€ ์†Œ์Šค์— ๋ช…์‹œ๋˜์–ด ์žˆ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.) --- *Last updated: 2026-04-26*