DOM Manipulation ๊ธฐ๋ฐ Bookmarklet์ ํตํ UX ์ ์ฝ ์ฆ์ ํด๊ฒฐ
๐บ๏ธ Fixing Ola Webโs Cramped Map โ and Why Small UX Gaps Ship to Production
AI ์์ฝ
Context
Ola ์น ์ฑ ๋ด Map UI๊ฐ ํน์ ์์ญ์ ๊ณ ์ ๋์ด ํ๋ฉด ํ์ฅ ๋ฐ ๋ฆฌ์ฌ์ด์ง์ด ๋ถ๊ฐ๋ฅํ ๊ตฌ์กฐ์ ์ ์ฝ ๋ฐ์. ๊ธฐ๋ฅ์ ๊ฒฐํจ์ ์๋๋ ์ฌ์ฉ์ฑ ์ ํ๋ฅผ ์ ๋ฐํ๋ UX Gap์ด ํ๋ก๋์ ํ๊ฒฝ์ ๋ฐฉ์น๋ ์ฌ๋ก ๋ถ์.
Technical Solution
- Browser ํ๊ฒฝ ๋ด ์ต์ ๋ง์ฐฐ ๋น์ฉ์ ์์ ์ ์ํด Bookmarklet ๋ฐฉ์ ์ฑํ
- JavaScript๋ฅผ ํ์ฉํ ์ค์๊ฐ DOM Manipulation์ผ๋ก ๋งต ์ปจํ ์ด๋์ CSS ์คํ์ผ ๋ฐ ๋ ์ด์์ ๊ฐ์ ๋ณ๊ฒฝ
- ์ฌ์ฉ์ ์ธํฐํ์ด์ค ๋ด ํ์ฅ ๋ฒํผ์ ๋์ ์ผ๋ก Inject ํ์ฌ ๋งต ํฌ๊ธฐ ์กฐ์ ๊ธฐ๋ฅ์ ํ ๊ธ ํํ๋ก ๊ตฌํ
- ๋ณ๋์ Extension ์ค์น๋ ๊ถํ ์์ฒญ ์์ด ๋ธ๋ผ์ฐ์ ๋ฐํ์์์ ์ฆ์ ์คํ๋๋ User-side Patch ์ค๊ณ
- ๋์์ธ ๊ฐ์ด๋์ ์ค์ ๋ ๋๋ง ๊ฒฐ๊ณผ๋ฌผ ๊ฐ์ ๊ดด๋ฆฌ๋ฅผ ํด๊ฒฐํ๋ ๊ฐ๋ฒผ์ด ํ๋กํ ํ์ดํ ์ ๊ทผ๋ฒ ์ ์ฉ
์ค์ฒ ํฌ์ธํธ
1. ์ ๋์ ์งํ์ ์กํ์ง ์๋ UX Friction์ ์๋ณํ๊ธฐ ์ํ Real User Session ๋ชจ๋ํฐ๋ง ๊ฐํ
2. QA ๋จ๊ณ์์ ๋จ์ ๊ธฐ๋ฅ ์๋ ์ฌ๋ถ๋ฅผ ๋์ด ์ค์ ์ฌ์ฉ ํธ์์ฑ์ ๊ฒ์ฆํ๋ UX Sanity Check ๋์
3. ๋์์ธ Mockup๊ณผ ์ค์ ๋๋ฐ์ด์ค/๋ธ๋ผ์ฐ์ ํ๊ฒฝ ๊ฐ์ Layout Nesting ์ฐจ์ด ์ ๊ธฐ์ ๊ฒํ
4. ๋ง์ด๋ํ ๊ฐ์ ์ฌํญ์ ์ถ์ ํ๊ณ ๊ด๋ฆฌํ ์ ์๋ ์ ์ฉ ํด๋ฆฌ์ฑ ๋ฐฑ๋ก๊ทธ ์ด์