Playwright ๊ธฐ๋ฐ˜ ๋ฐ˜์‘ํ˜• UI ์ ํ•ฉ์„ฑ ๊ฒ€์‚ฌ

์ธก์ • ๋„๊ตฌ: Playwright (Chromium ์—”์ง„)
ํ…Œ์ŠคํŠธ ๋ชฉ์ : ๋‹ค์–‘ํ•œ ๋””๋ฐ”์ด์Šค ํ™˜๊ฒฝ์—์„œ ์›นํŽ˜์ด์ง€๊ฐ€ viewport ๊ฒฝ๊ณ„๋ฅผ ๋ฒ—์–ด๋‚˜์ง€ ์•Š๊ณ  ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ๋ Œ๋”๋ง๋˜๋Š”์ง€ ๊ฒ€์ฆ
๊ฒ€์‚ฌ ๋Œ€์ƒ: 9๊ฐœ ์ฃผ์š” ๋ทฐํฌํŠธ (๋ชจ๋ฐ”์ผ 3๊ฐœ, ํด๋”๋ธ” 1๊ฐœ, ํƒœ๋ธ”๋ฆฟ 3๊ฐœ, ๋ฐ์Šคํฌํ†ฑ 2๊ฐœ)

์ธก์ • ํ•ญ๋ชฉ:
โ€ข body ์š”์†Œ์˜ ์‹ค์ œ ๋ Œ๋”๋ง ํญ
โ€ข viewport ํญ ๋Œ€๋น„ ์ดˆ๊ณผ ํ”ฝ์…€ ์ˆ˜
โ€ข ๊ฐ ๋ทฐํฌํŠธ๋ณ„ ์ดˆ๊ณผ ๋ฐœ์ƒ ์—ฌ๋ถ€

ํ…Œ์ŠคํŠธ ๋ฐฉ์‹:
1. ๊ฐ ๋ทฐํฌํŠธ ํฌ๊ธฐ๋กœ ๋ธŒ๋ผ์šฐ์ € ์„ค์ •
2. ํŽ˜์ด์ง€ ๋กœ๋“œ ํ›„ ๋„คํŠธ์›Œํฌ ์•ˆ์ •ํ™” ๋Œ€๊ธฐ (6์ดˆ)
3. document.body.getBoundingClientRect() ์ธก์ •
4. viewport ํญ๊ณผ ๋น„๊ตํ•˜์—ฌ ์ดˆ๊ณผ ํ”ฝ์…€ ๊ณ„์‚ฐ

๊ฒ€์‚ฌ ๋ทฐํฌํŠธ ๋ชฉ๋ก:
โ€ข ๋ชจ๋ฐ”์ผ: 360ร—800, 390ร—844, 414ร—896
โ€ข ํด๋”๋ธ”: 672ร—960
โ€ข ํƒœ๋ธ”๋ฆฟ: 768ร—1024, 834ร—1112, 1024ร—1366
โ€ข ๋ฐ์Šคํฌํ†ฑ: 1280ร—800, 1440ร—900

์ด ํ…Œ์ŠคํŠธ๋Š” ์•ฝ 30์ดˆ~1๋ถ„ ์ •๋„ ์†Œ์š”๋˜๋ฉฐ, ์ˆ˜ํ‰ ์Šคํฌ๋กค๋ฐ” ๋ฐœ์ƒ ๊ฐ€๋Šฅ์„ฑ์„ ์‚ฌ์ „์— ๋ฐœ๊ฒฌํ•˜์—ฌ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๊ฐœ์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๋“ฑ๊ธ‰ ์ ์ˆ˜ ๊ธฐ์ค€
A+ 100 ์ „ ๋ทฐํฌํŠธ ์ดˆ๊ณผ 0๊ฑด
body ๋ Œ๋” ํญ์ด ํ•ญ์ƒ viewport ์ด๋‚ด
A 90~95 ์ดˆ๊ณผ โ‰ค1๊ฑด์ด๋ฉฐ โ‰ค8px
๋ชจ๋ฐ”์ผ ํ˜‘ํญ(โ‰ค390px) ๊ตฌ๊ฐ„์—์„œ๋Š” ์ดˆ๊ณผ 0๊ฑด
B 80~89 ์ดˆ๊ณผ โ‰ค2๊ฑด์ด๊ณ  ๊ฐ โ‰ค16px
๋˜๋Š” ๋ชจ๋ฐ”์ผ ํ˜‘ํญ์—์„œ โ‰ค8px 1๊ฑด
C 70~79 ์ดˆ๊ณผ โ‰ค4๊ฑด ๋˜๋Š” ๋‹จ์ผ ์ดˆ๊ณผ๊ฐ€ 17~32px
D 50~69 ์ดˆ๊ณผ >4๊ฑด ๋˜๋Š” ๋‹จ์ผ ์ดˆ๊ณผ๊ฐ€ 33~64px
F 0~49 ์ธก์ • ์‹คํŒจ ๋˜๋Š” โ‰ฅ65px ์ดˆ๊ณผ ๋ฐœ์ƒ
์•„์ง ๊ฒฐ๊ณผ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค

ํ…Œ์ŠคํŠธ๋ฅผ ์‹คํ–‰ํ•˜๋ฉด ๋ทฐํฌํŠธ๋ณ„ ๋ฐ˜์‘ํ˜• UI ์ ํ•ฉ์„ฑ ๊ฒฐ๊ณผ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์•„์ง ๊ฒฐ๊ณผ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค

ํ…Œ์ŠคํŠธ๋ฅผ ์‹คํ–‰ํ•˜๋ฉด Raw JSON ๋ฐ์ดํ„ฐ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฒ€์‚ฌ ๋‚ด์—ญ์„ ๋ณด๋ ค๋ฉด ๋กœ๊ทธ์ธ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

๋„๋ฉ”์ธ ๊ด€๋ฆฌ๋Š” ๋กœ๊ทธ์ธ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.