UX Research 2026 09 20 11 - barocss/barocss-editor GitHub Wiki


work_id: ux-2026-09-20-11 artifact_type: research_observation status: done owner_role: ui-ux-researcher source_request: "๋ฐฑ์—…ยท๊ฐ€์ ธ์˜ค๊ธฐ ์‹คํ–‰ ์ „ ์„ค๋ช…๊ณผ ์ž˜๋ชป๋œ ํŒŒ์ผ์˜ ๋ณต๊ตฌ ๊ฒฝ๋กœ ํ™•์ธ" last_updated: 2026-09-20

UX-11 โ€” ๋ฐฑ์—… ๋ณต์› ๊ฒฐ๊ณผ์™€ ํŒŒ์ผ ์˜ค๋ฅ˜๋ฅผ ์„ค๋ช…ํ•˜๋Š”๊ฐ€

๊ฒฐ๊ณผ: ์‹คํ–‰ ์ „ ์•ˆ๋‚ด์— ํœด์ง€ํ†ต ํฌํ•จ, ์ƒˆ ์‚ฌ๋ณธ ์ƒ์„ฑ, ๊ธฐ์กด ์ž๋ฃŒ ์œ ์ง€๊ฐ€ ํ‘œ์‹œ๋๋‹ค. ์ž˜๋ชป๋œ JSON ํŒŒ์ผ์€ ์ฝ๊ธฐ ์˜ค๋ฅ˜์™€ ์˜ฌ๋ฐ”๋ฅธ ํŒŒ์ผ ์„ ํƒ ์•ˆ๋‚ด๋ฅผ ํ‘œ์‹œํ–ˆ๋‹ค. ํŒŒ์ผ ์„ ํƒ์„ ํ•ด์ œํ•˜๋ฉด ์˜ค๋ฅ˜๊ฐ€ ์‚ฌ๋ผ์ง€๊ณ  ๋ณต์› ๋ฒ„ํŠผ์ด ๋น„ํ™œ์„ฑํ™”๋๋‹ค. ์ด๋ฒˆ ๋ฒ”์œ„์—์„œ ์ƒˆ ๊ฒฐํ•จ์€ ํ™•์ธํ•˜์ง€ ์•Š์•˜๋‹ค. ์ƒˆ ์ด์Šˆ๋‚˜ ๋ฐ˜๋ณต ๋Œ“๊ธ€์€ ๋งŒ๋“ค์ง€ ์•Š๋Š”๋‹ค.

์ง์ ‘ ๊ด€์ฐฐ

2026-09-20, macOS Codex ๋‚ด์žฅ ๋ธŒ๋ผ์šฐ์ €, Node 22.22.0. ๋ณ„๋„ http://127.0.0.1:5196/์— ํ•ฉ์„ฑ ์ž๋ฃŒ 9๊ฐœ๊ฐ€ ์žˆ๋Š” ์ƒํƒœ์—์„œ ์‹คํ–‰ํ–ˆ๋‹ค. ๊ฐ€์ ธ์˜ค๊ธฐ์šฉ ํ•ฉ์„ฑ ํŒŒ์ผ์€ ux11-invalid.json, ๋‚ด์šฉ์€ {bad, ํฌ๊ธฐ๋Š” 4 B๋‹ค. ์‚ฌ์šฉ์ž ํŒŒ์ผ์€ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•˜๋‹ค.

์‹คํ–‰ SHA: 42e9a88a6cd8d3ffc002d14cd29ef6905a3769c1. ์กฐํšŒ main: eeb0ab67390b2898e85d8aa1e028ce5b6a993ff2. workspace์˜ ui.tsx์™€ workspace.ts ํŒŒ์ผ blob์€ main๊ณผ ๊ฐ™์•˜๋‹ค. ์ตœ์‹  main ์ „์ฒด ์‹คํ–‰ ๊ฒฐ๊ณผ๋Š” ์•„๋‹ˆ๋‹ค. ์บก์ฒ˜ ํฌ๊ธฐ๋Š” ์ฒซ ํ™”๋ฉด 1280ร—720, ์˜ค๋ฅ˜ ํ™”๋ฉด 880ร—1132๋‹ค. ๋ธŒ๋ผ์šฐ์ €์˜ ํ˜„์žฌ ํฌ๊ธฐ๋ฅผ ์‚ฌ์šฉํ–ˆ์œผ๋ฉฐ ํฌ๊ธฐ ๋ณ€๊ฒฝ ๊ฒ€์‚ฌ๋‚˜ ๋ชจ๋ฐ”์ผ ๊ฒ€์‚ฌ๋Š” ํ•˜์ง€ ์•Š์•˜๋‹ค.

๋‹จ๊ณ„ ๊ด€์ฐฐํ•œ ๊ฒฐ๊ณผ
์ž๋ฃŒํ•จ โ†’ ๋ฐฑ์—… ๋ฐ ๊ฐ€์ ธ์˜ค๊ธฐ ํœด์ง€ํ†ต ์ž๋ฃŒ ํฌํ•จ, ์ƒˆ ์‚ฌ๋ณธ ์ƒ์„ฑ, ๊ธฐ์กด ์ž๋ฃŒ ์œ ์ง€ ์„ค๋ช…. ์™ธ๋ถ€ ์ด๋ฏธ์ง€ URL์˜ ๋ฐฑ์—… ํ•œ๊ณ„ ์„ค๋ช…
ํŒŒ์ผ ์„ ํƒ ์ „ ์ƒˆ ์‚ฌ๋ณธ์œผ๋กœ ๋ณต์› ๋น„ํ™œ์„ฑ
์ž˜๋ชป๋œ JSON ์„ ํƒ ํŒŒ์ผ๋ช…๊ณผ ํฌ๊ธฐ ํ‘œ์‹œ. ํŒŒ์ผ ๋ฐ”๊พธ๊ธฐยท์ œ๊ฑฐยท๋ณต์› ํ™œ์„ฑ
์ƒˆ ์‚ฌ๋ณธ์œผ๋กœ ๋ณต์› JSON ์ฝ๊ธฐ ์˜ค๋ฅ˜์™€ ์˜ฌ๋ฐ”๋ฅธ ๋ฐฑ์—… ํŒŒ์ผ ์„ ํƒ ์•ˆ๋‚ด. ํŒŒ์ผ๋ช… ์œ ์ง€. ๋ณต์› ๋ฒ„ํŠผ ๋‹ค์‹œ ํ™œ์„ฑ
์„ ํƒํ•œ ํŒŒ์ผ ์ œ๊ฑฐ ํŒŒ์ผ๋ช…๊ณผ ์˜ค๋ฅ˜ ์ œ๊ฑฐ. ๋ณต์› ๋ฒ„ํŠผ ๋น„ํ™œ์„ฑ
๋‹ซ๊ธฐ โ†’ ์ž๋ฃŒํ•จ ํ‘œ์‹œ ์ž๋ฃŒ ์ˆ˜ 9๊ฐœ ์œ ์ง€

์ž๋ฃŒ ์ˆ˜ ํ‘œ์‹œ๋Š” ์ „์ฒด ๋ฐ์ดํ„ฐ์˜ ๋ฌด๊ฒฐ์„ฑ ๊ฒ€์‚ฌ๊ฐ€ ์•„๋‹ˆ๋‹ค. ์ •์ƒ ๋ฐฑ์—…์˜ ์‹ค์ œ ๋ณต์›, ํŒŒ์ผ ๊ต์ฒด ํ›„ ์„ฑ๊ณต, ๋ฐ˜๋ณต ๋ณต์›, ์ผ๋ถ€ ์ €์žฅ ์‹คํŒจ๋Š” ์ด๋ฒˆ์— ์‹คํ–‰ํ•˜์ง€ ์•Š์•˜๋‹ค.

๋ณต์› ์ „ ์•ˆ๋‚ด

์ž˜๋ชป๋œ JSON ํŒŒ์ผ ์•ˆ๋‚ด

ํ™”๋ฉด ์ƒํƒœ ๊ธฐ๋ก: ์„ ํƒ ์ „, ์˜ค๋ฅ˜, ์„ ํƒ ํ•ด์ œ.

๊ณตํ†ต UI ํŒ๋‹จ

๋ฐฑ์—…ยท๊ฐ€์ ธ์˜ค๊ธฐ์—์„œ ๋งž์ถœ ๊ณตํ†ต ๊ณ„์•ฝ์€ ์‹คํ–‰ ์ „ ์˜ํ–ฅ ์„ค๋ช…, ์„ ํƒํ•œ ํŒŒ์ผ ์‹๋ณ„, ์‹คํ–‰ ๊ฐ€๋Šฅ ์ƒํƒœ, ์‹คํŒจ ์›์ธ๊ณผ ๋‹ค์Œ ํ–‰๋™, ์„ ํƒ ํ•ด์ œ ํ›„ ์ƒํƒœ ์ดˆ๊ธฐํ™”๋‹ค. ์ด๋ฒˆ ํ™”๋ฉด์€ ๊ด€์ฐฐํ•œ ๋ฒ”์œ„์—์„œ ์ด ๊ณ„์•ฝ์„ ์ œ๊ณตํ–ˆ๋‹ค. ์ œํ’ˆ๋ณ„ ํŒŒ์ผ ํ˜•์‹๊ณผ ์‹ค์ œ ๋ณต์› ๋ฐฉ์‹์€ ํ•ด๋‹น ์ œํ’ˆ ์ฒ˜๋ฆฌ์— ๋‚จ๊ธด๋‹ค. ์ƒˆ ๊ณตํ†ต ๋Œ€ํ™”์ƒ์ž๋ฅผ ์ถ”๊ฐ€ํ•  ๊ทผ๊ฑฐ๋Š” ํ™•์ธํ•˜์ง€ ๋ชปํ–ˆ๋‹ค.

ํ™”๋ฉด ์ฝ”๋“œ๋Š” ๊ณตํ†ต FilePickยทFileItem๊ณผ ์ƒํƒœ ์•ˆ๋‚ด๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. ๊ธฐ์กด ๊ฒ€์‚ฌ ์ •์˜์—๋Š” ์‹คํŒจ ํŒŒ์ผ ์œ ์ง€, ์„ ํƒ ํ•ด์ œ, ๊ฐ™์€ ์ด๋ฆ„ ์žฌ์„ ํƒ, ๋ณต์› ์„ฑ๊ณต ํ›„ ์ดˆ๊ธฐํ™”๊ฐ€ ์žˆ๋‹ค. ์ด๋ฒˆ์—๋Š” ์ •์˜๋ฅผ ์ฝ์—ˆ์œผ๋ฉฐ ์ž๋™ ๊ฒ€์‚ฌ๋ฅผ ์žฌ์‹คํ–‰ํ•˜์ง€ ์•Š์•˜๋‹ค.

๋‚จ์€ ์‚ฌ์šฉ์ž ์งˆ๋ฌธ์€ โ€˜์ƒˆ ์‚ฌ๋ณธโ€™์ด ๊ธฐ์กด ์ž๋ฃŒ์™€ ์–ด๋–ค ๊ด€๊ณ„์ธ์ง€ ์„ค๋ช…ํ•  ์ˆ˜ ์žˆ๋Š”๊ฐ€, ์‹ค์ œ ์ด์ „ ์ž‘์—…์—์„œ ์™ธ๋ถ€ ์ž์‚ฐ์˜ ํ•œ๊ณ„๋ฅผ ์ดํ•ดํ•˜๋Š”๊ฐ€๋‹ค. ์„ค๋ช…์˜ ์กด์žฌ๋ฅผ ์‚ฌ์šฉ์ž ์ดํ•ด์˜ ์ฆ๊ฑฐ๋กœ ๊ฐ„์ฃผํ•˜์ง€ ์•Š๋Š”๋‹ค. #289 ๊ณ ๊ฐ ์—ฐ๊ตฌ์˜ ์ด์ „ยท์žฌ์—ด๊ธฐ ๊ณผ์ œ์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค. #306 ์ €์žฅ ์œ„์น˜ ์•ˆ๋‚ด์˜ ํŽธ์ง‘ ํ™”๋ฉด ์—ฐ๊ฒฐ ์ œ์•ˆ์€ ๊ทธ๋Œ€๋กœ ์œ ์ง€ํ•œ๋‹ค.

์‹ค์‚ฌ์šฉ์ž, ์Šคํฌ๋ฆฐ๋ฆฌ๋”, ๋ชจ๋ฐ”์ผ, ๋‹ค๋ฅธ ๋ธŒ๋ผ์šฐ์ €, ์ œํ’ˆ๋ณ„ ๋…๋ฆฝ ๋ฐฑ์—… ํ™”๋ฉด์€ ๊ฒ€์‚ฌํ•˜์ง€ ์•Š์•˜๋‹ค. ์ œํ’ˆ ์ฝ”๋“œ๋Š” ๋ณ€๊ฒฝํ•˜์ง€ ์•Š์•˜๋‹ค.