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


work_id: ux-2026-09-20-02 artifact_type: research_observation status: done owner_role: ui-ux-researcher source_request: "์ง€์† UI/UX ์—ฐ๊ตฌ โ€” ์ œํ’ˆ๋ณ„ ์ €์žฅ ์œ„์น˜์™€ ๊ณตํ†ต UI ๋ฒ”์œ„ ํ™•์ธ" last_updated: 2026-09-20

UX-02 โ€” NoteยทSlidesยทSite์˜ ์ €์žฅ ์œ„์น˜ ์•ˆ๋‚ด ๋น„๊ต

๊ฒฐ๋ก : Note์—๋Š” ํŽธ์ง‘ ์ค‘ ๋ณด์ด๋Š” ๋กœ์ปฌ ์ €์žฅ ์•ˆ๋‚ด๊ฐ€ ์ด๋ฏธ ์žˆ๋‹ค. Slides์™€ Site๋Š” โ€œ์ตœ๊ทผ ์ž๋ฃŒโ€ ์ฐฝ์„ ์—ด์–ด์•ผ ๊ฐ™์€ ์ •๋ณด๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค. #306์˜ ๊ทผ๊ฑฐ๋ฅผ ๋ณด์™„ํ•œ๋‹ค. ๋ณ„๋„ ์ด์Šˆ๋Š” ๋งŒ๋“ค์ง€ ์•Š๋Š”๋‹ค.

์ƒํƒœ: ์—ฐ๊ตฌ์ž์˜ ์ •์ƒ ๊ฒฝ๋กœ ๊ด€์ฐฐ ์™„๋ฃŒ. ๊ตฌํ˜„ยท์žฅ์•  ์žฌํ˜„ยท์‚ฌ์šฉ์ž ์ดํ•ด ๊ฒ€์ฆ์€ ๋ฏธ์™„๋ฃŒ๋‹ค.

๋ฒ”์œ„์™€ ๋ฐฉ๋ฒ•

  • 2026-09-20, macOS Codex ๋‚ด์žฅ ๋ธŒ๋ผ์šฐ์ €. ํ†ตํ•ฉ ํ˜ธ์ŠคํŠธ์˜ ๋ณ„๋„ ์ฃผ์†Œ http://127.0.0.1:5196/๋ฅผ ์‚ฌ์šฉํ–ˆ๋‹ค.
  • ์‹คํ–‰ commit: 42e9a88a6cd8d3ffc002d14cd29ef6905a3769c1. ์›๊ฒฉ main: 558714a818ae8f0dcffc8436d8e7e30a66c93442. ๋‘ commit์„ ํ˜ผ๋™ํ•˜์ง€ ์•Š๋Š”๋‹ค.
  • ์ž๋ฃŒํ•จ์—์„œ ํ•ฉ์„ฑ ์ž๋ฃŒ UX-02 ์—ฐ๊ตฌ์šฉ Note, UX-02 ์—ฐ๊ตฌ์šฉ Slides, UX-02 ์—ฐ๊ตฌ์šฉ Site๋ฅผ ๊ฐ๊ฐ ์ƒ์„ฑํ–ˆ๋‹ค. ํ™”๋ฉด ์ด๋™๊ณผ ๋ณด๊ด€ํ•จ ์„ค๋ช…์„ ํ™•์ธํ–ˆ๋‹ค. ๋ณธ๋ฌธ ํŽธ์ง‘ยท์žฌ์—ด๊ธฐยท๋ฐฑ์—… ํŒŒ์ผ ๋‹ค์šด๋กœ๋“œ๋Š” ์ˆ˜ํ–‰ํ•˜์ง€ ์•Š์•˜๋‹ค.
  • Note ์Šค๋ƒ…์ƒท์€ 1280ร—720, SlidesยทSite๋Š” 899ร—1132๋‹ค. ์•ฑ์˜ ์ผ๋ฐ˜ ์ฐฝ ํฌ๊ธฐ๊ฐ€ ๊ด€์ฐฐ ์ค‘ ๋ฐ”๋€Œ์—ˆ๋‹ค. ํฌ๊ธฐ๋ฅผ ๊ฐ•์ œ๋กœ ์กฐ์ •ํ•˜์ง€ ์•Š์•˜๋‹ค. ๊ฐ„๊ฒฉยท๋ฐฐ์น˜์˜ ๊ฐ™์€ ํฌ๊ธฐ ๋น„๊ต๋‚˜ ๋ชจ๋ฐ”์ผ ๊ฒ€์‚ฌ๋Š” ์•„๋‹ˆ๋‹ค. Site์˜ ๊ธฐ๋ณธ ํŽธ์ง‘ ์บ”๋ฒ„์Šค์— ๊ธฐ๊ธฐ๋ณ„ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๊ฐ€ ์žˆ์–ด๋„ ์ด๋ฒˆ ํŒ์ •์€ ๋ฐ์Šคํฌํ†ฑ ํ˜ธ์ŠคํŠธ์˜ ์ €์žฅ ์•ˆ๋‚ด์—๋งŒ ํ•œ์ •ํ•œ๋‹ค.
  • UX-01์˜ Word ๊ด€์ฐฐ์„ ํ•จ๊ป˜ ๋น„๊ตํ•œ๋‹ค. ์ด๋ฒˆ ํšŒ์ฐจ์—์„œ Word๋ฅผ ๋‹ค์‹œ ์‹คํ–‰ํ•˜์ง€ ์•Š์•˜๋‹ค.

์ •์ƒ ์ƒํƒœ์˜ ์‹ค์ œ ํ™”๋ฉด

์ œํ’ˆ ํŽธ์ง‘ ์ค‘ ํ‘œ์‹œ ๋กœ์ปฌ ์œ„์น˜ ์„ค๋ช… ๋ฐฑ์—… ์ง„์ž… ํ•ด์„
Note ์ƒ๋‹จ โ€œ์ €์žฅ๋จโ€ ์—ด๋ฆฐ ์™ผ์ชฝ ํŒจ๋„ ํ•˜๋‹จ์— ์ž๋™ ์ €์žฅยท๋‹ค๋ฅธ ๊ธฐ๊ธฐ ์ด์ „ ์•ˆ๋‚ด ๊ฐ™์€ ํŒจ๋„์˜ โ€œ๋ฐฑ์—… ๋ฐ ๋ณต์›โ€ ์•ˆ๋‚ด๊ฐ€ ์ด๋ฏธ ๋ณด์ธ๋‹ค. ์ƒˆ ์•ˆ๋‚ด๊ฐ€ ์ „ํ˜€ ์—†๋‹ค๊ณ  ๋ณด๊ณ ํ•˜๋ฉด ์•ˆ ๋จ
Word โ€” UX-01 ์ƒ๋‹จ โ€œ์ €์žฅ๋จโ€ โ€œ๋ฌธ์„œ ๋ณด๊ด€ํ•จโ€ ๋Œ€ํ™”์ƒ์ž ๋ฌธ์„œ ๋ณด๊ด€ํ•จโ†’๋ณด๊ด€ํ•จ ์ „์ฒด ๋ฐฑ์—… ์œ„์น˜ ์„ค๋ช…์€ ๋ณ„๋„ ๋™์ž‘ ๋’ค ํ™•์ธ
Slides ์ƒ๋‹จ โ€œ์ €์žฅ๋จโ€ โ€œ์ตœ๊ทผ ์ž๋ฃŒโ€โ†’โ€œ์ตœ๊ทผ ๋ฐœํ‘œ ์ž๋ฃŒโ€ ๋Œ€ํ™”์ƒ์ž ๋Œ€ํ™”์ƒ์ž์˜ โ€œ๋ณด๊ด€ํ•จ ์ „์ฒด ๋ฐฑ์—…โ€ Word์™€ ๊ฐ™์€ ์ •๋ณด ๊ณต๋ฐฑ ํ›„๋ณด
Site ๊ด€๋ฆฌยทํŽ˜์ด์ง€ ํŽธ์ง‘ ๋ชจ๋‘ ์ƒ๋‹จ โ€œ์ €์žฅ๋จโ€ โ€œ์ตœ๊ทผ ์ž๋ฃŒโ€โ†’โ€œ์ตœ๊ทผ ์‚ฌ์ดํŠธโ€ ๋Œ€ํ™”์ƒ์ž ๋Œ€ํ™”์ƒ์ž์˜ โ€œ๋ณด๊ด€ํ•จ ์ „์ฒด ๋ฐฑ์—…โ€ ์ €์žฅ ์ƒํƒœ์™€ ์‚ฌ์ดํŠธ ๋ฐœํ–‰ ์ƒํƒœ๋Š” ๋ณ„๋„ ์˜๋ฏธ

Note์™€ Slides์—์„œ ์ œํ’ˆ ๋ฉ”๋‰ดโ†’์ž๋ฃŒํ•จ ๋ณต๊ท€๋„ ์‹คํ–‰ํ–ˆ๋‹ค. ๊ฒฝ๋กœ๊ฐ€ ์ž‘๋™ํ•œ ์‚ฌ์‹ค๊ณผ ์ดˆ๋ณด์ž๊ฐ€ ์‰ฝ๊ฒŒ ๋ฐœ๊ฒฌํ•˜๋Š”์ง€๋Š” ๋‹ค๋ฅด๋‹ค. ํ˜„์žฌ ๊ธฐ๋ก์€ ๋ฐœ๊ฒฌ์„ฑ ์‹œํ—˜์ด ์•„๋‹ˆ๋‹ค.

ํ™”๋ฉด ๊ทผ๊ฑฐ

Note: ์œ„์น˜ ์„ค๋ช…๊ณผ ๋ฐฑ์—… ๊ฒฝ๋กœ๊ฐ€ ์™ผ์ชฝ ํŒจ๋„์— ์žˆ๋‹ค.

Note ์ €์žฅ ์•ˆ๋‚ด

Slides: ํŽธ์ง‘ ํ™”๋ฉด๊ณผ ์ตœ๊ทผ ์ž๋ฃŒ ์ฐฝ์„ ๋น„๊ตํ•œ๋‹ค.

Slides ํŽธ์ง‘ ํ™”๋ฉด

Slides ์ตœ๊ทผ ๋ฐœํ‘œ ์ž๋ฃŒ

Site: ๊ด€๋ฆฌ ํ™”๋ฉด์—์„œ๋„ ๋กœ์ปฌ ์ €์žฅ ์„ค๋ช…์€ ์ตœ๊ทผ ์ž๋ฃŒ ์ฐฝ ์•ˆ์— ์žˆ๋‹ค. ๊ด€๋ฆฌ ํ™”๋ฉด์˜ โ€œ์•„์ง ๋ฐœํ–‰ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹คโ€๋Š” ์ €์žฅ ์œ„์น˜ ์„ค๋ช…์ด ์•„๋‹ˆ๋‹ค.

Site ๊ด€๋ฆฌ ํ™”๋ฉด

Site ์ตœ๊ทผ ์‚ฌ์ดํŠธ

์ฝ”๋“œ๋กœ ํ™•์ธํ•œ ์ƒํƒœ ์—ฐ๊ฒฐ โ€” ์‹คํ–‰ ๊ฒฐ๊ณผ์™€ ๊ตฌ๋ถ„

๊ฒฝ๋กœ ์ฝ”๋“œ์ƒ ํ‘œ์‹œยท๋™์ž‘ ์ด๋ฒˆ์— ํ™”๋ฉด์œผ๋กœ ํ™•์ธํ•œ ๋ฒ”์œ„
Note Workspace ๊ณตํ†ต StatusIndicator๋ฅผ ์ง์ ‘ ์‚ฌ์šฉ. ๋ฌธ์ œ ์‹œ โ€œํ™•์ธ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹คโ€, ๋ณ„๋„ ์•ˆ๋‚ด์˜ โ€œ๋‹ค์‹œ ์‹œ๋„โ€. ์ถฉ๋Œ์€ โ€œ์ถฉ๋Œํ•œ ์ดˆ์•ˆ ๋ณด๊ด€๋จโ€ ์ •์ƒ ์ €์žฅ ํ‘œ์‹œ์™€ ๋กœ์ปฌ ์•ˆ๋‚ด๋งŒ ํ™•์ธ
Word DocumentSaveStatus์™€ Word ๋ณด๊ด€ํ•จ. ์‹คํŒจยท๋ณต์› ์‹คํŒจ์˜ ์žฌ์‹œ๋„ ๋ถ„๊ธฐ ์ด์ „ ํšŒ์ฐจ์˜ ์ •์ƒ ์ €์žฅยท๋ณด๊ด€ํ•จ
SlidesยทSite ๊ฐ™์€ LocalDocumentsโ†’DocumentSaveStatus ์‚ฌ์šฉ. ์‹คํŒจ ์‹œ โ€œ์ €์žฅ ๋‹ค์‹œ ์‹œ๋„โ€ ๋˜๋Š” โ€œ๋ณต์› ๋‹ค์‹œ ์‹œ๋„โ€, ์ถฉ๋Œ ์‹œ โ€œ๋ณต๊ตฌ ์ดˆ์•ˆ ๋ณด๊ธฐโ€ ์ •์ƒ ์ €์žฅยท์ตœ๊ทผ ์ž๋ฃŒ ์„ค๋ช…๋งŒ ํ™•์ธ

Note๊ฐ€ ๋ณ„๋„ ๊ฒฝ๋กœ๋ฅผ ์‚ฌ์šฉํ•˜๋ฏ€๋กœ DocumentSaveStatus๋งŒ ๋ฐ”๊พธ๋ฉด ๋„ค ์ œํ’ˆ์ด ๋ชจ๋‘ ๋ฐ”๋€๋‹ค๊ณ  ๊ฐ€์ •ํ•˜๋ฉด ์•ˆ ๋œ๋‹ค. ๋ฐ˜๋Œ€๋กœ SlidesยทSite์— ๊ฐ™์€ UI๋ฅผ ๋”ฐ๋กœ ๊ตฌํ˜„ํ•  ํ•„์š”๋„ ์—†๋‹ค. ์ €์žฅ ์ƒํƒœ ๋ฌธ์ž์—ด์€ ์‹คํ–‰ ๋ถ„๊ธฐ์—์„œ๋„ ๋น„๊ตํ•˜๋ฏ€๋กœ ๋‚ด๋ถ€ ์ƒํƒœ๊ฐ’๊ณผ ์‚ฌ์šฉ์ž์šฉ ๋ฌธ๊ตฌ๋ฅผ ๊ตฌ๋ถ„ํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ๊ฒ€ํ† ํ•œ๋‹ค. ํ‘œํ˜„ ๋ณ€๊ฒฝ์ด ์ €์žฅ ์‹คํŒจยท๋ณต๊ตฌ ์กฐ๊ฑด์„ ๋ฐ”๊พธ๋ฉด ์•ˆ ๋œ๋‹ค.

ํ™•์ธํ•œ ์†Œ์Šค:

์•ž์˜ ์„ธ ํŒŒ์ผ์€ ๋กœ์ปฌ๊ณผ ๊ณ ์ • main์˜ blob ID๊ฐ€ ๊ฐ™๋‹ค. Slides ํŒŒ์ผ์€ ๋‹ค๋ฅด๋‹ค. diff์—์„œ๋Š” RefObject ํƒ€์ž… import์™€ ํ•จ์ˆ˜ ๋ฐ˜ํ™˜ ํƒ€์ž… ๋ช…์‹œ๋งŒ ์ถ”๊ฐ€๋˜์—ˆ๊ณ , ํ‘œ์‹œ JSX์™€ ์‹คํ–‰ ๋ณธ๋ฌธ์€ ๊ฐ™์•˜๋‹ค. ์ด ๋น„๊ต๋Š” ์ตœ์‹  main ์ „์ฒด์˜ ๋™์ž‘ ๊ฒ€์ฆ์„ ๋Œ€์‹ ํ•˜์ง€ ์•Š๋Š”๋‹ค.

์œ ์ง€ํ•  ๊ฒ€์‚ฌ์™€ ๋ฏธ๊ฒ€์ฆ ์กฐ๊ฑด

์•„๋ž˜ ๊ธฐ์กด ๊ฒ€์‚ฌ๋ฅผ ์ฝ์—ˆ๋‹ค. ์ด๋ฒˆ์— ์‹คํ–‰ํ•˜์ง€ ์•Š์•˜๋‹ค.

ํ›„์† ๊ตฌํ˜„์—์„œ๋Š” ๊ธฐ์กด ๋ฌธ์„œ ๋ณด์กดยท์ด๋™ ์ฐจ๋‹จยท๋ณต๊ตฌ ๊ฒ€์‚ฌ๋ฅผ ์œ ์ง€ํ•œ๋‹ค. ๋ฌธ๊ตฌ ๋ณ€๊ฒฝ์€ ๊ธฐ๋Œ€ ๋ฌธ๊ตฌ๋งŒ ๋ฐ”๊พธ๊ณ  ๋™์ž‘ ๊ฒ€์ฆ์„ ์ค„์ด์ง€ ์•Š๋Š”๋‹ค. ๋‹จ์ถ•ํ‚คยทํ‚ค๋ณด๋“œ ํฌ์ปค์Šคยท์Šคํฌ๋ฆฐ๋ฆฌ๋”ยท์‹ค์ œ ์‚ฌ์šฉ์ž ์ดํ•ด๋Š” ๋ณ„๋„ ํ™•์ธ์ด ํ•„์š”ํ•˜๋‹ค.

#306์— ์ฃผ๋Š” ๊ถŒ๊ณ 

  1. WordยทSlidesยทSite์˜ ํŽธ์ง‘ ํ™”๋ฉด์—์„œ ๋กœ์ปฌ ์ €์žฅ ์œ„์น˜๋ฅผ ๋ฐ”๋กœ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•œ๋‹ค. ๊ธฐ์กด ๋ฐฑ์—… ๊ฒฝ๋กœ๋ฅผ ์žฌ์‚ฌ์šฉํ•œ๋‹ค.
  2. Note์˜ ํ˜„์žฌ ์œ„์น˜ ์•ˆ๋‚ด์™€ ๋ฐฑ์—… ๊ฒฝ๋กœ๋ฅผ ๋ณด์กดํ•œ๋‹ค. ๋‹ซํžŒ ํŒจ๋„ ๋“ฑ ๋‹ค๋ฅธ ๋ฐ์Šคํฌํ†ฑ ์ƒํƒœ์˜ ๋…ธ์ถœ์€ ์•„์ง ๊ฒ€์‚ฌํ•˜์ง€ ์•Š์•˜์œผ๋ฏ€๋กœ ๋‹ค์Œ ๊ฒ€์ฆ์— ๋‚จ๊ธด๋‹ค.
  3. ์™„๋ฃŒยท์ €์žฅ ์ค‘ยท์‹คํŒจยท์ถฉ๋Œ์— ๊ณตํ†ต ์˜๋ฏธ๋ฅผ ์ ์šฉํ•˜๋˜, Note์˜ ์ผ๋ฐ˜ ๋ฌธ์ œ ์ƒํƒœ๋ฅผ ๋ชจ๋‘ โ€œ์ €์žฅ ์‹คํŒจโ€๋กœ ๋ฐ”๊พธ์ง€ ์•Š๋Š”๋‹ค.
  4. ๋ฐฑ์—… ์•ˆ๋‚ด๋ฅผ ์ดํ•ดํ•˜๋Š”์ง€ ์‚ฌ์šฉ์ž ๊ด€์ฐฐ๋กœ ํ™•์ธํ•œ๋‹ค. ์ด๋ฒˆ ์ฐจ์ด๋งŒ์œผ๋กœ ์˜คํ•ด ๋ฐœ์ƒ๋ฅ ์ด๋‚˜ ๋ณ€๊ฒฝ ํšจ๊ณผ๋ฅผ ์ฃผ์žฅํ•˜์ง€ ์•Š๋Š”๋‹ค.

๋‹ค์Œ ์งˆ๋ฌธ: ํ†ตํ•ฉ โ€œ์ž๋ฃŒํ•จโ€, ์ œํ’ˆ โ€œ์ตœ๊ทผ ์ž๋ฃŒโ€, Word โ€œ๋ฌธ์„œ ๋ณด๊ด€ํ•จโ€์ด ์–ด๋–ค ์ž๋ฃŒ ๋ฒ”์œ„๋ฅผ ๋ณด์—ฌ ์ฃผ๋Š”๊ฐ€? ์ด๋ฆ„๊ณผ ์‹ค์ œ ๋ชฉ๋ก์˜ ๊ด€๊ณ„๋ฅผ ์กฐ์‚ฌํ•œ๋‹ค. ํ•„์š”๊ฐ€ ํ™•์ธ๋  ๋•Œ๋งŒ ํ›„์† ์ด์Šˆ๋ฅผ ๋งŒ๋“ ๋‹ค.