Airbnb์ Server-Driven UI
Brunch Story
๐ข Server-Driven UI(SDUI)๋ ํ๋ฉด์ ๋ณด์ฌ์ง๋ UI ๋๋๋ง์ ํด๋ผ์ด์ธํธ๊ฐ ์๋ ์๋ฒ ์์ฃผ๋ก ์งํํ๋ ๋ฐฉ์์ด๋ค. ์ฑ ์๋น์ค๋ ๋น ๋ฅด๊ฒ UI๋ฅผ ๋ณ๊ฒฝ์ํค๊ณ ์ถ์ด๋ ๋ฒ์ ์ ๋ฐ์ดํธ ๋ฐ ์ฌ์ฌ ๋ฑ์ผ๋ก ์๊ฐ์ด ๊ฑธ๋ฆฌ๊ธฐ ๋๋ฌธ์ ํนํ ์ด๋ฐ ์๊ตฌ์ฌํญ์ด ๋ง์๋ค. ๐ป ์ด์ Airbnb๋ ์ฑ๊ณผ ์น์์ ๋ชจ๋ UI๊ฐ ํต์ผ๋ Ghost Platform์ ๋ง๋ค์๋ค. Ghost Platform์ ์๋ฒ์ ์๋ต๊ฐ์ ๋ฐ์ Section Component๋ฅผ ๋ง๋ค๊ณ ์ฌ๊ธฐ์ interaction์ ์ถ๊ฐํ ํ, ์ ์ฒด์ ์ธ ๋ ์ด์์์ ์ ์ํ์ฌ ํ๋ฉด์ ๋ ๋๋งํ๋ ๋ฐฉ์์ด๋ค. ๐ SDUI์์๋ ์๋ฒ์์ ๋ฐ์ดํฐ์ UI ๊ฐ์ ํจ๊ป ๋ด๋ ค์ค๋ค. ๋ํ Web/iOS/Android๊ฐ ๋ชจ๋ ๋์ผํ backend response๋ก ์ฒ๋ฆฌํ ๋ฟ๋ง ์๋๋ผ, ๋์ผํ GraphQL Schema๋ฅผ ์ฌ์ฉํ์ฌ ๋ชจ๋ ํ๋ซํผ์ด ๋์ผํ ์๋ต์ ์ด์ฉํ๋ universal schema๋ฅผ ๋ง๋ค์๋ค. โน๏ธ Section์ UI Component๋ฅผ ํํํ๋ ๋ฐ์ดํฐ๋ก, ์ด๋ค ๋ฐ์ดํฐ๋ฅผ ํํํ ์ง์ ๋ํ ์ ๋ณด๋ฅผ ๊ฐ์ง๊ณ ์๋ ๊ตฌ์ฑ ์์์ด๋ค. Seciton Component๋ค์ ๊ฐ ํ๋ซํผ์ Native Language๋ฅผ ํตํด ๊ตฌํ๋์ด ์์ผ๋ฉฐ, Section Component Type์ ๋ฐ๋ผ์ ๋ค๋ฅด๊ฒ ๋ ๋๋ง๋๋ค. ๐ฑ Screen์ ํ๋ฉด, ๋ ์ด์์์ ์ ์ํ๋ฉฐ, sction์ด ์ด๋ป๊ฒ ๋ค์ด๊ฐ ์ง ์ ์ํ๋ ๊ตฌ์ฑ ์์์ด๋ค. ILayout์ ์ํด ๋ ์ด์์์ ๋ฐฐ์น์ ๋ํ ์ผํ ์ ๋ณด๋ฅผ ์ ์ํ๋ฉฐ, modal, popup, popover, full screen ๋ฑ์ ๊ดํ ์ ๋ณด ์ญ์ ํฌํจํ๊ณ ์๋ค. ๐ฑ๏ธ ๋ง์ง๋ง์ผ๋ก IAction์ด๋ผ๋ Schema๋ฅผ ํตํด Event Handling๋ ์ ์ด ๊ฐ๋ฅํ๋ค. ์ฆ, ์ฌ์ฉ์์ ์ธํฐ๋ ์ ํ๋ UI์ Action๊น์ง๋ ์๋ฒ ์๋ต ๊ฐ์ ํตํด dynamicํ๊ฒ ๋ณ๊ฒฝ์ด ๊ฐ๋ฅํ๋ค๋ ๋ป์ด๋ค. ๐ค ๋ค์ํ ์คํ ๋ฐ ํ ์คํธ, ์ ์ ๋ณ ์ต์ ํ, ๋น ๋ฅธ ๊ฐ์ ๋ฑ์ ์ํด SDUI๋ฅผ ๋ถ๋ถ์ ์ผ๋ก ์ฌ์ฉํ๋ ๊ธฐ์ ์ ์์ง๋ง, ์ ์ฒด ๊ตฌ์กฐ๋ฅผ ํ๋ซํผํํ ๊ฒฝ์ฐ๋ ๊ฑฐ์ ์๋ค. ๋ค์ํ ์ปค์คํฐ๋ง์ด์ง ๋์ฆ ๋๋ฌธ์ ํ๋ซํผ ๋ณ๋ก ๋์ผํ๊ฒ UI๋ฅผ ๋ณ๊ฒฝํ๋ ๊ฒ์ ์ด๋ ต๊ธฐ ๋๋ฌธ์ด๋ค. ๋จ์ ๋ ๋ถ๋ช ํ ์กด์ฌํ์ง๋ง, ํต์ผ๋ UI๊ฐ ์ค์ํ๊ฑฐ๋ ์คํ, ๊ฐ์ , ๋ฐฐํฌ ๋ฑ์ด ๋งค์ฐ ๋น ๋ฅธ ์ฃผ๊ธฐ๋ฅผ ๊ฐ๋ ์๋น์ค๋ผ๋ฉด ๊ณ ๋ คํด ๋ณผ ๋งํ๋ค.
2021๋ 11์ 30์ผ ์ค์ 3:40