์ธก์ • ํ•ญ๋ชฉ: Median(์žฌ๋ฐฉ๋ฌธ) ยท JS ๋Ÿฐํƒ€์ž„ ์—๋Ÿฌ(์ž์‚ฌ/์™ธ๋ถ€/๊ณ ์œ ) ยท ๋ Œ๋” ํญ ์ดˆ๊ณผ

๋ชจ๋ฐ”์ผ ์„ฑ๋Šฅ ํ…Œ์ŠคํŠธ๋ž€?

Playwright๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‹ค์ œ ๋ชจ๋ฐ”์ผ ๊ธฐ๊ธฐ ํ™˜๊ฒฝ์„ ์‹œ๋ฎฌ๋ ˆ์ด์…˜ํ•˜๊ณ , ์›น์‚ฌ์ดํŠธ์˜ ๋ชจ๋ฐ”์ผ ์„ฑ๋Šฅ๊ณผ ์•ˆ์ •์„ฑ์„ ์ •๋ฐ€ํ•˜๊ฒŒ ์ธก์ •ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ“Š ์ธก์ • ๊ฐœ์š”

  • ๋„๊ตฌ: Playwright (ํ—ค๋“œ๋ฆฌ์Šค ๋ธŒ๋ผ์šฐ์ €, CPU ์Šค๋กœํ‹€ ร—4 ์ ์šฉ)
  • ์‹คํ–‰: ๊ธฐ๊ธฐ๋ณ„ ์ด 4ํšŒ ์‹คํ–‰ โ†’ 1ํšŒ ์›œ์—… ์ œ์™ธ, ๋‚˜๋จธ์ง€ 3ํšŒ์˜ ์ค‘๊ฐ„๊ฐ’(Median) ์‚ฌ์šฉ
  • ์ฃผ์š” ์ง€ํ‘œ:
    • ์žฌ๋ฐฉ๋ฌธ Median ๋กœ๋“œ ์‹œ๊ฐ„ (ms)
    • Long Tasks ํ•ฉ๊ณ„ - TBT ์œ ์‚ฌ (50ms ์ดˆ๊ณผ ์ž‘์—…์˜ ์ดˆ๊ณผ๋ถ„ ํ•ฉ์‚ฐ)
    • JS ๋Ÿฐํƒ€์ž„ ์—๋Ÿฌ - ์ž์‚ฌ/์™ธ๋ถ€ ๋„๋ฉ”์ธ๋ณ„ ๋ถ„๋ฆฌ ์ง‘๊ณ„
    • ๋ Œ๋” ํญ ์ดˆ๊ณผ - body ์š”์†Œ๊ฐ€ viewport ๋„ˆ๋น„ ์ดˆ๊ณผ ์—ฌ๋ถ€

๐Ÿ“ฑ ๋Œ€ํ‘œ ํ…Œ์ŠคํŠธ ๊ธฐ๊ธฐ (6์ข…)

iOS
  • iPhone SE (๊ตฌํ˜•ยท์†Œํ˜• ๋ทฐํฌํŠธ)
  • iPhone 11 (์ค‘๊ธ‰ยท๋ณดํŽธ ํ•ด์ƒ๋„)
  • iPhone 15 Pro (์ตœ์‹ ยท๊ณ ์„ฑ๋Šฅ)
Android
  • Galaxy S9+ (๊ตฌํ˜•)
  • Galaxy S20 Ultra (๊ณ ํ•ด์ƒ๋„)
  • Pixel 5 (ํ‘œ์ค€ Android ๋ ˆํผ๋Ÿฐ์Šค)
โ€ป Playwright ๋‚ด์žฅ ๋””๋ฐ”์ด์Šค ํ”„๋กœํ•„์„ ์‚ฌ์šฉํ•˜๋ฉฐ, ๋ถ€์žฌ ์‹œ ์ธ์ ‘ ๋ชจ๋ธ๋กœ ์•ˆ์ „ ๋Œ€์ฒดํ•ฉ๋‹ˆ๋‹ค.

๐ŸŽญ Playwright๋ž€?

  • Microsoft ๊ฐœ๋ฐœ: ํ˜„๋Œ€์ ์ธ ์›น ์ž๋™ํ™” ๋„๊ตฌ๋กœ, ์‹ค์ œ ๋ธŒ๋ผ์šฐ์ € ์—”์ง„์„ ์‚ฌ์šฉํ•˜์—ฌ ์ •ํ™•ํ•œ ์„ฑ๋Šฅ ์ธก์ •์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
  • ํ—ค๋“œ๋ฆฌ์Šค ์‹คํ–‰: UI ์—†์ด ๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ ์‹คํ–‰๋˜์–ด ์„œ๋ฒ„ ํ™˜๊ฒฝ์—์„œ๋„ ์•ˆ์ •์ ์œผ๋กœ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.
  • CPU ์Šค๋กœํ‹€๋ง: CPU ์„ฑ๋Šฅ์„ ์ธ์œ„์ ์œผ๋กœ ์ œํ•œ(ร—4)ํ•˜์—ฌ ์‹ค์ œ ๋ชจ๋ฐ”์ผ ํ™˜๊ฒฝ์˜ ์„ฑ๋Šฅ ์ œ์•ฝ์„ ์‹œ๋ฎฌ๋ ˆ์ด์…˜ํ•ฉ๋‹ˆ๋‹ค.
  • ์ •๋ฐ€ํ•œ ๋ฉ”ํŠธ๋ฆญ ์ˆ˜์ง‘: JavaScript ์‹คํ–‰ ์‹œ๊ฐ„, ์—๋Ÿฌ, ๋ Œ๋”๋ง ์„ฑ๋Šฅ ๋“ฑ์„ ์ •ํ™•ํ•˜๊ฒŒ ์ธก์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

โ“ ์™œ ๊ตฌํ˜• ๊ธฐ๊ธฐ๊ฐ€ ๋” ๋น ๋ฅด๊ฒŒ ๋ณด์ผ ์ˆ˜ ์žˆ๋‚˜์š”?

  • ๊ฐ€๋ฒผ์šด ์ž์‚ฐ ์ œ๊ณต: ์ž‘์€ ๋ทฐํฌํŠธ/ํ•ด์ƒ๋„(User Agent)์— ๋งž์ถฐ ๋” ๋‚ฎ์€ ์šฉ๋Ÿ‰์˜ ์ด๋ฏธ์ง€ยท๋ ˆ์ด์•„์›ƒ์ด ์ œ๊ณต๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๊ท ์ผํ•œ CPU ์Šค๋กœํ‹€: ๋ชจ๋“  ๊ธฐ๊ธฐ์— ๋™์ผํ•œ ร—4 ์Šค๋กœํ‹€์„ ์ ์šฉํ•˜๋ฏ€๋กœ, ์ˆœ์ˆ˜ "๋‹จ๋ง ์„ฑ๋Šฅ ์ฐจ"๋ณด๋‹ค๋Š” ๊ทธ ๊ธฐ๊ธฐ์— ์ œ๊ณต๋œ ๋ฆฌ์†Œ์Šค ๋ฌด๊ฒŒ๊ฐ€ ์†๋„์— ๋” ํฐ ์˜ํ–ฅ์„ ์ค๋‹ˆ๋‹ค.
  • ์กฐ๊ฑด๋ถ€ ๋กœ๋”ฉ ์ฐจ์ด: UA/๋ฏธ๋””์–ด์ฟผ๋ฆฌ/์ž„๊ณ„์น˜ ๋“ฑ์— ๋”ฐ๋ผ ๊ด‘๊ณ ยท์œ„์ ฏยท์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๊ธฐ๊ธฐ๋ณ„๋กœ ๋‹ฌ๋ฆฌ ๋กœ๋“œ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐ŸŽฏ ์ด ํ…Œ์ŠคํŠธ๊ฐ€ ์˜๋ฏธ ์žˆ๋Š” ์ด์œ 

  • ๋ชจ๋ฐ”์ผ ์ฒด๊ฐ ๋ Œ๋”๋ง์„ ์ •์กฐ์ค€: ์บ์‹œ๊ฐ€ ์ฑ„์›Œ์ง„ ์žฌ๋ฐฉ๋ฌธ ์ƒํ™ฉ์—์„œ JS/๋ ˆ์ด์•„์›ƒ ๋ถ€๋‹ด์„ Median๊ณผ Long Tasks๋กœ ํŒŒ์•…
  • ๋Ÿฐํƒ€์ž„ ์•ˆ์ •์„ฑ: JS ์—๋Ÿฌ๋ฅผ ์ž์‚ฌ/์™ธ๋ถ€๋กœ ๊ตฌ๋ถ„ ์ง‘๊ณ„ โ†’ ์‹ค์ œ ํ’ˆ์งˆ ์ด์Šˆ์˜ ์ฑ…์ž„ ์†Œ์žฌ ํŒŒ์•… ์šฉ์ด
  • ๋ฐ˜์‘ํ˜• ์ ํ•ฉ์„ฑ: body๊ฐ€ viewport๋ฅผ ๋„˜๋Š”์ง€ ์ž๋™ ๊ฒ€์ถœ โ†’ ๋ชจ๋ฐ”์ผ ํ™”๋ฉด ๋Œ€์‘ ๋ˆ„๋ฝ์„ ์กฐ๊ธฐ ๋ฐœ๊ฒฌ
  • ์žฌํ˜„ ๊ฐ€๋Šฅ์„ฑ: ๊ธฐ๊ธฐยทํšŸ์ˆ˜ยท์Šค๋กœํ‹€ยท์›จ์ดํŒ… ๊ทœ์น™์„ ๊ณ ์ •ํ•ด ๋ฆด๋ฆฌ์ฆˆ ๊ฐ„ ํšŒ๊ท€ ๋น„๊ต์™€ ๋ชฉํ‘œ ๊ด€๋ฆฌ์— ์ตœ์ 
๋“ฑ๊ธ‰ ์ ์ˆ˜ ์„ฑ๋Šฅ ๊ธฐ์ค€
A+ 90~100 Median ์‘๋‹ต์‹œ๊ฐ„: โ‰ค 800ms
JS ๋Ÿฐํƒ€์ž„ ์—๋Ÿฌ: 0
๋ Œ๋” ํญ ์ดˆ๊ณผ: ์—†์Œ
A 80~89 Median ์‘๋‹ต์‹œ๊ฐ„: โ‰ค 1200ms
JS ๋Ÿฐํƒ€์ž„ ์—๋Ÿฌ: โ‰ค 1
๋ Œ๋” ํญ ์ดˆ๊ณผ: ์—†์Œ
B 70~79 Median ์‘๋‹ต์‹œ๊ฐ„: โ‰ค 2000ms
JS ๋Ÿฐํƒ€์ž„ ์—๋Ÿฌ: โ‰ค 2
๋ Œ๋” ํญ ์ดˆ๊ณผ: ํ—ˆ์šฉ
C 60~69 Median ์‘๋‹ต์‹œ๊ฐ„: โ‰ค 3000ms
JS ๋Ÿฐํƒ€์ž„ ์—๋Ÿฌ: โ‰ค 3
๋ Œ๋” ํญ ์ดˆ๊ณผ: ๋นˆ๋ฒˆ
D 50~59 Median ์‘๋‹ต์‹œ๊ฐ„: โ‰ค 4000ms
JS ๋Ÿฐํƒ€์ž„ ์—๋Ÿฌ: โ‰ค 5
๋ Œ๋” ํญ ์ดˆ๊ณผ: ์‹ฌ๊ฐ
F 0~49 ์œ„ ๊ธฐ์ค€์— ๋ฏธ๋‹ฌ
์š”์•ฝ โ€” ๊ธฐ๊ธฐ 6์ข… ยท ๊ฐ 4ํšŒ(1 ์›œ์—… ์ œ์™ธ) ยท CPU ร—4 ยท ์ง€ํ‘œ: Median / Long Tasks / JS ์—๋Ÿฌ(์ž์‚ฌยท์™ธ๋ถ€) / ๋ Œ๋” ํญ ์ดˆ๊ณผ
๊ตฌํ˜•์ด ๋” ๋น ๋ฅด๊ฒŒ ์ธก์ •๋˜์–ด๋„ ์ •์ƒ์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ๊ฐ€๋ฒผ์šด ์ž์‚ฐ ์ œ๊ณต + ๊ท ์ผ ์Šค๋กœํ‹€์˜ ๊ฒฐ๊ณผ์ด๋ฉฐ, ๋ณธ ํ…Œ์ŠคํŠธ๋Š” ์‹ค์ œ ์‚ฌ์šฉ์ž ํ™˜๊ฒฝ์—์„œ์˜ ๋ชจ๋ฐ”์ผ ๋ Œ๋”๋ง ๋น„์šฉ๊ณผ ์•ˆ์ •์„ฑ์„ ์ง€์†์ ์œผ๋กœ ์ถ”์ ํ•˜๋Š” ๋ฐ ๋ชฉ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.
์•„์ง ๊ฒฐ๊ณผ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค

ํ…Œ์ŠคํŠธ๋ฅผ ์‹คํ–‰ํ•˜๋ฉด ๋ชจ๋ฐ”์ผ ์„ฑ๋Šฅ ๊ฒฐ๊ณผ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

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

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

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