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: ์์น ์ค๋ช ๊ณผ ๋ฐฑ์ ๊ฒฝ๋ก๊ฐ ์ผ์ชฝ ํจ๋์ ์๋ค.

Slides: ํธ์ง ํ๋ฉด๊ณผ ์ต๊ทผ ์๋ฃ ์ฐฝ์ ๋น๊ตํ๋ค.


Site: ๊ด๋ฆฌ ํ๋ฉด์์๋ ๋ก์ปฌ ์ ์ฅ ์ค๋ช ์ ์ต๊ทผ ์๋ฃ ์ฐฝ ์์ ์๋ค. ๊ด๋ฆฌ ํ๋ฉด์ โ์์ง ๋ฐํํ์ง ์์์ต๋๋คโ๋ ์ ์ฅ ์์น ์ค๋ช ์ด ์๋๋ค.


์ฝ๋๋ก ํ์ธํ ์ํ ์ฐ๊ฒฐ โ ์คํ ๊ฒฐ๊ณผ์ ๊ตฌ๋ถ
| ๊ฒฝ๋ก | ์ฝ๋์ ํ์ยท๋์ | ์ด๋ฒ์ ํ๋ฉด์ผ๋ก ํ์ธํ ๋ฒ์ |
|---|---|---|
| Note Workspace | ๊ณตํต StatusIndicator๋ฅผ ์ง์ ์ฌ์ฉ. ๋ฌธ์ ์ โํ์ธ์ด ํ์ํฉ๋๋คโ, ๋ณ๋ ์๋ด์ โ๋ค์ ์๋โ. ์ถฉ๋์ โ์ถฉ๋ํ ์ด์ ๋ณด๊ด๋จโ | ์ ์ ์ ์ฅ ํ์์ ๋ก์ปฌ ์๋ด๋ง ํ์ธ |
| Word | DocumentSaveStatus์ Word ๋ณด๊ดํจ. ์คํจยท๋ณต์ ์คํจ์ ์ฌ์๋ ๋ถ๊ธฐ | ์ด์ ํ์ฐจ์ ์ ์ ์ ์ฅยท๋ณด๊ดํจ |
| SlidesยทSite | ๊ฐ์ LocalDocumentsโDocumentSaveStatus ์ฌ์ฉ. ์คํจ ์ โ์ ์ฅ ๋ค์ ์๋โ ๋๋ โ๋ณต์ ๋ค์ ์๋โ, ์ถฉ๋ ์ โ๋ณต๊ตฌ ์ด์ ๋ณด๊ธฐโ | ์ ์ ์ ์ฅยท์ต๊ทผ ์๋ฃ ์ค๋ช ๋ง ํ์ธ |
Note๊ฐ ๋ณ๋ ๊ฒฝ๋ก๋ฅผ ์ฌ์ฉํ๋ฏ๋ก DocumentSaveStatus๋ง ๋ฐ๊พธ๋ฉด ๋ค ์ ํ์ด ๋ชจ๋ ๋ฐ๋๋ค๊ณ ๊ฐ์ ํ๋ฉด ์ ๋๋ค. ๋ฐ๋๋ก SlidesยทSite์ ๊ฐ์ UI๋ฅผ ๋ฐ๋ก ๊ตฌํํ ํ์๋ ์๋ค. ์ ์ฅ ์ํ ๋ฌธ์์ด์ ์คํ ๋ถ๊ธฐ์์๋ ๋น๊ตํ๋ฏ๋ก ๋ด๋ถ ์ํ๊ฐ๊ณผ ์ฌ์ฉ์์ฉ ๋ฌธ๊ตฌ๋ฅผ ๊ตฌ๋ถํ๋ ๋ฐฉ์์ผ๋ก ๊ฒํ ํ๋ค. ํํ ๋ณ๊ฒฝ์ด ์ ์ฅ ์คํจยท๋ณต๊ตฌ ์กฐ๊ฑด์ ๋ฐ๊พธ๋ฉด ์ ๋๋ค.
ํ์ธํ ์์ค:
- Note ์ํ์ ์์น ์๋ด.
- LocalDocuments์ ์ํ์ ์ต๊ทผ ์๋ฃ ์ฐฝ.
- Site์ ๊ณตํต ๋ถํ ์ฌ์ฉ.
- Slides์ ๊ณตํต ๋ถํ ์ฌ์ฉ.
์์ ์ธ ํ์ผ์ ๋ก์ปฌ๊ณผ ๊ณ ์ main์ blob ID๊ฐ ๊ฐ๋ค. Slides ํ์ผ์ ๋ค๋ฅด๋ค. diff์์๋ RefObject ํ์ import์ ํจ์ ๋ฐํ ํ์ ๋ช ์๋ง ์ถ๊ฐ๋์๊ณ , ํ์ JSX์ ์คํ ๋ณธ๋ฌธ์ ๊ฐ์๋ค. ์ด ๋น๊ต๋ ์ต์ main ์ ์ฒด์ ๋์ ๊ฒ์ฆ์ ๋์ ํ์ง ์๋๋ค.
์ ์งํ ๊ฒ์ฌ์ ๋ฏธ๊ฒ์ฆ ์กฐ๊ฑด
์๋ ๊ธฐ์กด ๊ฒ์ฌ๋ฅผ ์ฝ์๋ค. ์ด๋ฒ์ ์คํํ์ง ์์๋ค.
- Site ์๋ ์ ์ฅ ๊ฒ์ฌ: ์ ์ฅยท์ฌ์ด๊ธฐ, ์ถฉ๋ ์ฌ๋ณธ, ์คํจ ์ฌ์๋, ์๋ ์๋ฃ.
- Slides ์๋ ์ ์ฅ ๊ฒ์ฌ: ์ ์ฅยท์ฌ์ด๊ธฐ, ์ถฉ๋ยท๋ณต๊ตฌ, ํ ํ๋ฆฟ ๊ต์ฒด ์ฐจ๋จ.
- Note ์ถฉ๋ ๊ฒ์ฌ: ๋ณต๊ตฌ ์ด์ ๋ณด๊ด ์คํจ ์ โํ์ธ์ด ํ์ํฉ๋๋คโ์ ์ฌ์๋.
- ํตํฉ ์ํ ๊ฒ์ฌ: Word ์คํจ ์ฌ์๋์ Slides ์ถฉ๋ ๋ณต๊ตฌ.
ํ์ ๊ตฌํ์์๋ ๊ธฐ์กด ๋ฌธ์ ๋ณด์กดยท์ด๋ ์ฐจ๋จยท๋ณต๊ตฌ ๊ฒ์ฌ๋ฅผ ์ ์งํ๋ค. ๋ฌธ๊ตฌ ๋ณ๊ฒฝ์ ๊ธฐ๋ ๋ฌธ๊ตฌ๋ง ๋ฐ๊พธ๊ณ ๋์ ๊ฒ์ฆ์ ์ค์ด์ง ์๋๋ค. ๋จ์ถํคยทํค๋ณด๋ ํฌ์ปค์คยท์คํฌ๋ฆฐ๋ฆฌ๋ยท์ค์ ์ฌ์ฉ์ ์ดํด๋ ๋ณ๋ ํ์ธ์ด ํ์ํ๋ค.
#306์ ์ฃผ๋ ๊ถ๊ณ
- WordยทSlidesยทSite์ ํธ์ง ํ๋ฉด์์ ๋ก์ปฌ ์ ์ฅ ์์น๋ฅผ ๋ฐ๋ก ์ดํดํ ์ ์๊ฒ ํ๋ค. ๊ธฐ์กด ๋ฐฑ์ ๊ฒฝ๋ก๋ฅผ ์ฌ์ฌ์ฉํ๋ค.
- Note์ ํ์ฌ ์์น ์๋ด์ ๋ฐฑ์ ๊ฒฝ๋ก๋ฅผ ๋ณด์กดํ๋ค. ๋ซํ ํจ๋ ๋ฑ ๋ค๋ฅธ ๋ฐ์คํฌํฑ ์ํ์ ๋ ธ์ถ์ ์์ง ๊ฒ์ฌํ์ง ์์์ผ๋ฏ๋ก ๋ค์ ๊ฒ์ฆ์ ๋จ๊ธด๋ค.
- ์๋ฃยท์ ์ฅ ์คยท์คํจยท์ถฉ๋์ ๊ณตํต ์๋ฏธ๋ฅผ ์ ์ฉํ๋, Note์ ์ผ๋ฐ ๋ฌธ์ ์ํ๋ฅผ ๋ชจ๋ โ์ ์ฅ ์คํจโ๋ก ๋ฐ๊พธ์ง ์๋๋ค.
- ๋ฐฑ์ ์๋ด๋ฅผ ์ดํดํ๋์ง ์ฌ์ฉ์ ๊ด์ฐฐ๋ก ํ์ธํ๋ค. ์ด๋ฒ ์ฐจ์ด๋ง์ผ๋ก ์คํด ๋ฐ์๋ฅ ์ด๋ ๋ณ๊ฒฝ ํจ๊ณผ๋ฅผ ์ฃผ์ฅํ์ง ์๋๋ค.
๋ค์ ์ง๋ฌธ: ํตํฉ โ์๋ฃํจโ, ์ ํ โ์ต๊ทผ ์๋ฃโ, Word โ๋ฌธ์ ๋ณด๊ดํจโ์ด ์ด๋ค ์๋ฃ ๋ฒ์๋ฅผ ๋ณด์ฌ ์ฃผ๋๊ฐ? ์ด๋ฆ๊ณผ ์ค์ ๋ชฉ๋ก์ ๊ด๊ณ๋ฅผ ์กฐ์ฌํ๋ค. ํ์๊ฐ ํ์ธ๋ ๋๋ง ํ์ ์ด์๋ฅผ ๋ง๋ ๋ค.