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


work_id: ux-2026-09-20-12 artifact_type: research_observation status: ์ค€๋น„ ์™„๋ฃŒ owner_role: ui-ux-researcher source_request: "Site ์›๋ณธ ์ €์žฅ๊ณผ ์ „๋‹ฌ์šฉ ๋‚ด๋ณด๋‚ด๊ธฐ์˜ ์‹คํ–‰ ์ „ํ›„ ์„ค๋ช… ํ™•์ธ" last_updated: 2026-09-20

UX-12 โ€” Site ์›๋ณธ ํŒŒ์ผ๊ณผ ์ „๋‹ฌ์šฉ ์ถœ๋ ฅ์„ ๊ตฌ๋ถ„ํ•˜๋Š”๊ฐ€

์—ฐ๊ตฌ ๊ธฐ๋ก ์ƒํƒœ: ์ค€๋น„ ์™„๋ฃŒ. UI/UX ์˜์—ญ ์ƒํƒœ: ๋ฏธ์™„๋ฃŒ. ์ด๋ฒˆ ์ƒํƒœ๋Š” ํ•œ์ • ๊ด€์ฐฐ์˜ ๊ธฐ๋ก ์™„๋ฃŒ๋ฅผ ๋œปํ•œ๋‹ค. ์ œํ’ˆ ์ „์ฒด ์ถœ์‹œ ์ค€๋น„๋ฅผ ๋œปํ•˜์ง€ ์•Š๋Š”๋‹ค.

๊ฒฐ๊ณผ: ํŒŒ์ผ ๋ฉ”๋‰ด๋Š” ์ €์žฅยทํŽ˜์ด์ง€ ๋‚ด๋ณด๋‚ด๊ธฐยท์ „์ฒด ๋‚ด๋ณด๋‚ด๊ธฐ๋ฅผ ๊ตฌ๋ถ„ํ•œ๋‹ค. ๊ด€์ฐฐํ•œ ์‹คํ–‰ ์ „ ๋ฉ”๋‰ด์—๋Š” ํŒŒ์ผ ํ˜•์‹์ด๋‚˜ ์žฌํŽธ์ง‘ ๋ชฉ์  ์„ค๋ช…์ด ์—†์—ˆ๋‹ค. ์‹คํ–‰ ํ›„์—๋Š” ์ €์žฅ์—์„œ .site.json ํŒŒ์ผ๋ช…, ํŽ˜์ด์ง€ ๋‚ด๋ณด๋‚ด๊ธฐ์—์„œ 1๊ฐœ HTML ํŒŒ์ผ์„ ํ‘œ์‹œํ–ˆ๋‹ค. ๋‘ ์ƒํƒœ๋Š” ๋‹ค์šด๋กœ๋“œ ์š”์ฒญ๊ณผ ์™„๋ฃŒ๋ฅผ ๊ตฌ๋ถ„ํ–ˆ๋‹ค. ์‚ฌ์šฉ์ž ํ˜ผ๋™์ด๋‚˜ ์ž˜๋ชป๋œ ํŒŒ์ผ ์„ ํƒ์€ ๊ฒ€์ฆํ•˜์ง€ ์•Š์•˜๋‹ค. ์ƒˆ ๊ฒฐํ•จ ์ด์Šˆ๋Š” ๋งŒ๋“ค์ง€ ์•Š๋Š”๋‹ค.

๋ฒ”์œ„์™€ ๋ฒ„์ „

2026-09-20, macOS Codex ๋‚ด์žฅ ๋ธŒ๋ผ์šฐ์ €, Node 22.22.0. ๋ณ„๋„ http://127.0.0.1:5196/์˜ ํ•ฉ์„ฑ ์ž๋ฃŒ UX-06 ์›๋ณธ ยท Site ์‚ฌ๋ณธ์„ ์‚ฌ์šฉํ–ˆ๋‹ค. ๋ณธ๋ฌธ์„ ๋ฐ”๊พธ์ง€ ์•Š๊ณ  ๊ด€๋ฆฌ ํ™”๋ฉด์˜ ํŒŒ์ผ ๋ฉ”๋‰ด์—์„œ ์ €์žฅ๊ณผ ์ด ํŽ˜์ด์ง€ ๋‚ด๋ณด๋‚ด๊ธฐ๋ฅผ ๊ฐ 1ํšŒ ์‹คํ–‰ํ–ˆ๋‹ค. ๋ฐœํ–‰ํ•˜๊ธฐ๋Š” ์‹คํ–‰ํ•˜์ง€ ์•Š์•˜๋‹ค.

์‹คํ–‰ SHA๋Š” 42e9a88a6cd8d3ffc002d14cd29ef6905a3769c1, ๊ด€์ฐฐ ๋น„๊ต ๊ธฐ์ค€ main์€ eeb0ab67390b2898e85d8aa1e028ce5b6a993ff2๋‹ค. apps/site/src/app.tsx, menu-model.ts, site-file.ts, ๊ณตํ†ต file-actions.tsx์˜ blob์€ main๊ณผ ๊ฐ™๋‹ค. main ์ „์ฒด ํ†ตํ•ฉ ์‹คํ–‰ ๊ฒฐ๊ณผ๋Š” ์•„๋‹ˆ๋‹ค. ๊ฒŒ์‹œ ์ง์ „ main์€ 0d97e1f00948aafd27bd6bdf4ac2b9a2f9f51e60์œผ๋กœ ๊ฐฑ์‹ ๋๋‹ค. ์ด ์ƒˆ commit์€ ์‹คํ–‰ํ•˜์ง€ ์•Š์•˜๋‹ค. ์บก์ฒ˜๋Š” ๋ธŒ๋ผ์šฐ์ € ํ˜„์žฌ ํฌ๊ธฐ 1280ร—720, 880ร—1132๋‹ค. ํ™”๋ฉด ํฌ๊ธฐ ๋ณ€๊ฒฝ์ด๋‚˜ ๋ชจ๋ฐ”์ผ ๊ฒ€์‚ฌ๋Š” ํ•˜์ง€ ์•Š์•˜๋‹ค.

์ง์ ‘ ๊ด€์ฐฐ๊ณผ ์ฝ”๋“œ ํ™•์ธ

ํ–‰๋™ ์ง์ ‘ ๊ด€์ฐฐ ํ•ด์„์˜ ํ•œ๊ณ„
ํŒŒ์ผ ๋ฉ”๋‰ด ์—ด๊ธฐ ์ €์žฅ, ์ด ํŽ˜์ด์ง€ ๋‚ด๋ณด๋‚ด๊ธฐ, ์‚ฌ์ดํŠธ ์ „์ฒด ๋‚ด๋ณด๋‚ด๊ธฐ, ๋ฐœํ–‰ํ•˜๊ธฐ๊ฐ€ ๋ณ„๋„ ํ•ญ๋ชฉ ๊ด€์ฐฐํ•œ ๋ฉ”๋‰ด์— ํ˜•์‹ยท์žฌํŽธ์ง‘ ๋ชฉ์  ์•ˆ๋‚ด๊ฐ€ ์—†์Œ. ์‚ฌ์šฉ์ž๊ฐ€ ๊ตฌ๋ถ„ํ•˜์ง€ ๋ชปํ•œ๋‹ค๋Š” ์ฆ๊ฑฐ๋Š” ์•„๋‹˜
์ €์žฅ ์‹คํ–‰ ๋‹ค์šด๋กœ๋“œ ์š”์ฒญ๋จ. UX-06 ์›๋ณธ ยท Site ์‚ฌ๋ณธ.site.json ํ‘œ์‹œ. ์™„๋ฃŒ ์—ฌ๋ถ€๋Š” ๋ธŒ๋ผ์šฐ์ € ๋ชฉ๋ก์—์„œ ํ™•์ธํ•˜๋„๋ก ์•ˆ๋‚ด ์‹ค์ œ ํŒŒ์ผ ์žฌ์—ด๊ธฐยท๋‚ด์šฉ ๋ณด์กด์€ ๊ฒ€์‚ฌํ•˜์ง€ ์•Š์Œ
์ด ํŽ˜์ด์ง€ ๋‚ด๋ณด๋‚ด๊ธฐ ์‹คํ–‰ ์‚ฌ์ดํŠธ ๋‹ค์šด๋กœ๋“œ ์š”์ฒญ๋จ. 1๊ฐœ HTML ํŒŒ์ผ ํ‘œ์‹œ. ๋ธŒ๋ผ์šฐ์ € ๋ชฉ๋ก ํ™•์ธ ์•ˆ๋‚ด ์™ธ๋ถ€ ์—ด๊ธฐยท์ „๋‹ฌยท๋ฐฐํฌ ์„ฑ๊ณต์„ ๋œปํ•˜์ง€ ์•Š์Œ

Site ํŒŒ์ผ ๋ฉ”๋‰ด

์›๋ณธ ํŒŒ์ผ๊ณผ HTML์˜ ์‹คํ–‰ ํ›„ ์•ˆ๋‚ด

ํ™”๋ฉด ๊ธฐ๋ก: ํŒŒ์ผ ๋ฉ”๋‰ด, ์›๋ณธ ํŒŒ์ผ ์š”์ฒญ, HTML ์š”์ฒญ.

Site ํŒŒ์ผ ํ˜•์‹์€ .site.json์„ ์“ฐ๊ณ  ํ•ด๋‹น reader๋กœ ์ฝ๋Š”๋‹ค. ํ˜ธ์ŠคํŠธ ์ถœ๋ ฅ์€ ํŽ˜์ด์ง€ HTML๊ณผ ์‚ฌ์ดํŠธ ZIP ์ฒ˜๋ฆฌ๋ฅผ ๋‚˜๋ˆˆ๋‹ค. ์ „์ฒด ZIP์€ ์ด๋ฒˆ์— ์‹คํ–‰ํ•˜์ง€ ์•Š์•˜๋‹ค. ๊ธฐ์กด HTML ์ถœ๋ ฅ ๊ฒ€์‚ฌ๋Š” ์‹คํŒจยท์žฌ์‹œ๋„ยท์ค‘๋ณต ์š”์ฒญ๋„ ๋‹ค๋ฃฌ๋‹ค. ์ •์˜๋งŒ ์ฝ์—ˆ๊ณ  ์ž๋™ ๊ฒ€์‚ฌ๋ฅผ ์žฌ์‹คํ–‰ํ•˜์ง€ ์•Š์•˜๋‹ค.

๊ณตํ†ต UI ๋ฒ”์œ„์™€ ๋‹ค์Œ ํŒ๋‹จ

๊ณตํ†ต์œผ๋กœ ๋งž์ถœ ๊ฒƒ์€ ์›๋ณธ ๋ณด๊ด€, ์ „๋‹ฌ์šฉ ์ถœ๋ ฅ, ์™ธ๋ถ€ ๊ฒŒ์‹œ์˜ ์˜๋ฏธ์™€ ์š”์ฒญยท์™„๋ฃŒ ์ƒํƒœ๋‹ค. ํŒŒ์ผ ํ™•์žฅ์ž์™€ ์„ธ๋ถ€ ๋ณด์กด ํ•œ๊ณ„๋Š” ์ œํ’ˆ๋ณ„๋กœ ์„ค๋ช…ํ•œ๋‹ค. ๊ด€์ฐฐํ•œ ์ƒํƒœ ์•ˆ๋‚ด๋Š” ์š”์ฒญ๊ณผ ์™„๋ฃŒ๋ฅผ ์ด๋ฏธ ๋‚˜๋ˆ„๋ฏ€๋กœ ์™„๋ฃŒ ๋ฌธ๊ตฌ๋ฅผ ๋‹ค์‹œ ๋งŒ๋“œ๋Š” ๊ณผ์ œ๋Š” ์ œ์•ˆํ•˜์ง€ ์•Š๋Š”๋‹ค.

์‹คํ–‰ ์ „ ํ•ญ๋ชฉ์— โ€˜Site ์›๋ณธ ํŒŒ์ผโ€™, โ€˜ํŽ˜์ด์ง€ HTMLโ€™, โ€˜์‚ฌ์ดํŠธ ZIPโ€™ ๊ฐ™์€ ๋ชฉ์ ยทํ˜•์‹ ์„ค๋ช…์„ ๋ถ™์ผ์ง€๋Š” ๊ฒ€์ฆ ์ „ ํ›„๋ณด๋‹ค. ์ƒˆ ๋Œ€ํ™”์ƒ์ž๋ฅผ ์˜๋ฌดํ™”ํ•˜์ง€ ์•Š๋Š”๋‹ค. #289 ๊ณ ๊ฐ ์—ฐ๊ตฌ์—์„œ โ€˜๋‹ค๋ฅธ ํ™˜๊ฒฝ์—์„œ ๋‹ค์‹œ ํŽธ์ง‘ํ•˜๊ธฐโ€™์™€ โ€˜๋ฐฉ๋ฌธ์ž๊ฐ€ ๋ณผ ํŒŒ์ผ ์ „๋‹ฌํ•˜๊ธฐโ€™๋ฅผ ์ฃผ๊ณ  ์ฒซ ์„ ํƒ๊ณผ ์„ค๋ช…์„ ๊ด€์ฐฐํ•  ์ˆ˜ ์žˆ๋‹ค. ํ˜ผ๋™์ด ํ™•์ธ๋˜๋ฉด ํ•ด๋‹น ๋ฌธ๊ตฌ ๋ฒ”์œ„๋งŒ PM์—๊ฒŒ ์ œ์•ˆํ•œ๋‹ค. ์ด๋ฒˆ ํ›„๋ณด๋Š” ์ถœ์‹œ ํ•„์ˆ˜ ์กฐ๊ฑด์ด ์•„๋‹ˆ๋‹ค.

๊ธฐ์กด #327ยทPR #335๋Š” SDK ๋ฌธ์„œ์™€ ์ถœ๋ ฅ ๊ฒฝ๊ณ„๋ฅผ ๋‹ค๋ฃฌ๋‹ค. #337์€ ์ „๋‹ฌ ๊ธฐ๋ก ์ œ์•ˆ์ด๋‹ค. ์ด๋ฒˆ ๊ด€์ฐฐ์€ ๋‘˜์„ ๋‹ค์‹œ ๊ตฌํ˜„ํ•  ๊ทผ๊ฑฐ๊ฐ€ ์•„๋‹ˆ๋‹ค. DOCX ๊ฒ€์ˆ˜ ๊ตํ™˜ ํŒ๋‹จ์˜ ๋ณ„๋„ ๋ณด์กด ๋ฌธ์ œ์™€๋„ ๊ตฌ๋ถ„ํ•œ๋‹ค.

๋‚จ์€ ์œ„ํ—˜์€ ์‹ค์‚ฌ์šฉ์ž์˜ ๋ชฉ์ ยทํ˜•์‹ ์ดํ•ด, ํŒŒ์ผ ์žฌ์—ด๊ธฐ์™€ ์ „์ฒด ๋‚ด์šฉ ๋ณด์กด, ์‹ค์ œ ์™ธ๋ถ€ ๋ฐฐํฌ๋‹ค. ๋ชจ๋‘ ๋ฏธํ™•์ธ์ด๋‹ค. WordยทSlidesยทNote ํ™”๋ฉด, ZIP ์‹คํ–‰, ์‹คํŒจยท์ทจ์†Œยท์Šคํฌ๋ฆฐ๋ฆฌ๋”๋Š” ์ด๋ฒˆ ๋ฒ”์œ„ ๋ฐ–์ด๋‹ค.

๋‹ค์Œ ๋‹ด๋‹น์ž๋Š” UI/UX ์—ฐ๊ตฌ ์—ญํ• (๊ด€์ฐฐ ๊ณผ์ œยท๊ทผ๊ฑฐ ์ •๋ฆฌ), Product Master PM(#289์˜ ๊ณ ๊ฐ ์—ฐ๊ตฌ ์‹คํ–‰ ๋‹ด๋‹น๊ณผ ๋ฒ”์œ„ ํŒ๋‹จ)์ด๋‹ค. ๊ตฌํ˜„ ๋‹ด๋‹น์€ ์ƒˆ๋กœ ์ง€์ •ํ•˜์ง€ ์•Š์•˜๋‹ค. ๊ณ„์•ฝยท๊ฒฐ์ œยท๊ฐœ์ธ์ •๋ณดยท์ง€์›ยท์šด์˜์˜ ๋‹ด๋‹น ๋ฐฐ์ •์€ ์ด๋ฒˆ ์กฐ์‚ฌ์—์„œ ํ™•์ธํ•˜์ง€ ์•Š์•˜๋‹ค. ๊ธฐ์ˆ  ์ถœ์‹œ ์ถ”์ ์€ ๊ธฐ์กด #322๋ฅผ ์œ ์ง€ํ•œ๋‹ค.