ํ”ผ๋“œ๋กœ ๋Œ์•„๊ฐ€๊ธฐ
๐Ÿš€ I built a Chrome Extension to manage AI prompts properly (Prompt Vault)
Dev.toDev.to
Frontend

๊ฐœ๋ฐœ์ž๊ฐ€ ํด๋ฆฝ๋ณด๋“œ ๋ณต์‚ฌ ์‹คํŒจ ๋Œ€๋น„ 3๋‹จ๊ณ„ ํด๋ฐฑ๊ณผ ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€๋งŒ์œผ๋กœ ๋™์ž‘ํ•˜๋Š” AI ํ”„๋กฌํ”„ํŠธ ๊ด€๋ฆฌ Chrome Extension์„ ๊ตฌ์ถ•ํ–ˆ๋‹ค

๐Ÿš€ I built a Chrome Extension to manage AI prompts properly (Prompt Vault)

southy4042026๋…„ 3์›” 30์ผ2๋ถ„beginner

Context

AI ๋„๊ตฌ๋ฅผ ์ผ์ƒ์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ์šฉ์ž๋“ค์€ ํ”„๋กฌํ”„ํŠธ๋ฅผ ๋…ธํŠธ, ๋ฌธ์„œ, ์ฑ„ํŒ… ๋“ฑ ์—ฌ๋Ÿฌ ๊ณณ์— ๋ถ„์‚ฐ ์ €์žฅํ•˜์—ฌ ํ•„์š”ํ•  ๋•Œ ์ฐพ์ง€ ๋ชปํ•˜๋Š” ๋ฌธ์ œ์— ์ง๋ฉดํ•œ๋‹ค. ๊ธฐ์กด ์†”๋ฃจ์…˜์€ ๋ณต์žกํ•œ ์„ค์ •, ๋А๋ฆฐ ์†๋„, ๊ณ„์ •์ด๋‚˜ ํด๋ผ์šฐ๋“œ ๋™๊ธฐํ™”๋ฅผ ์š”๊ตฌํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์•˜๋‹ค.

Technical Solution

  • Chrome Extension โ†’ ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€์— ํ”„๋กฌํ”„ํŠธ ์ €์žฅํ•˜์—ฌ ์™ธ๋ถ€ ์„œ๋ฒ„ ์˜์กด์„ฑ ์ œ๊ฑฐ
  • 3๋‹จ๊ณ„ ํด๋ฐฑ ๋ณต์‚ฌ ๋ฉ”์ปค๋‹ˆ์ฆ˜ โ†’ ํด๋ฆฝ๋ณด๋“œ ๋ณต์‚ฌ ์‹คํŒจ ์‹œ ์ž๋™ ์ „ํ™˜์œผ๋กœ ์•ˆ์ •์„ฑ ํ™•๋ณด
  • ์‹ค์‹œ๊ฐ„ ๊ฒ€์ƒ‰ + ํ•˜์ด๋ผ์ดํŠธ โ†’ ๊ฒฐ๊ณผ๊ฐ’ ๋™์  ์—…๋ฐ์ดํŠธ๋กœ ์ฆ‰๊ฐ์  ํƒ์ƒ‰ ๊ฐ€๋Šฅ
  • ํƒœ๊ทธ ๊ธฐ๋ฐ˜ ๋ถ„๋ฅ˜ + ์ •๋ ฌ ํ•„ํ„ฐ โ†’ ์ƒ์„ฑ์ผ, ์•ŒํŒŒ๋ฒณ์ˆœ, ์‚ฌ์šฉ๋นˆ๋„, ํƒœ๊ทธ๋ณ„ ๋ถ„๋ฅ˜ ์ง€์›
  • JSON Import/Export โ†’ ๋ฐ์ดํ„ฐ ์ด๊ด€ ๋ฐ ๋ฐฑ์—… ๊ธฐ๋Šฅ ์ œ๊ณต

Impact

์‚ฌ์šฉ๋Ÿ‰ ์ถ”์  ๊ธฐ๋Šฅ์œผ๋กœ ์‹ค์ œ ์‚ฌ์šฉ ํŒจํ„ด ๊ธฐ๋ฐ˜ ์›Œํฌํ”Œ๋กœ์šฐ ์ตœ์ ํ™” ๊ฐ€๋Šฅ

Key Takeaway

ํ”„๋ผ์ด๋ฒ„์‹œ ์šฐ์„  ์„ค๊ณ„ ์‹œ ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€๋งŒ์œผ๋กœ ์ถฉ๋ถ„ํ•œ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๋ฉด์„œ๋„ ์™ธ๋ถ€ ์˜์กด์„ฑ ์—†์ด ์‹ ๋ขฐ์„ฑ ์žˆ๋Š” UX๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค


AI ํ”„๋กฌํ”„ํŠธ ๊ด€๋ฆฌ ํ™˜๊ฒฝ์—์„œ ํด๋ฐฑ ๋ฉ”์ปค๋‹ˆ์ฆ˜์„ ํด๋ฆฝ๋ณด๋“œ ๋ณต์‚ฌ ๊ธฐ๋Šฅ์— ์ ์šฉํ•˜๋ฉด ์‚ฌ์šฉ์ž๊ฐ€ ๋ณต์‚ฌ๋ฅผ ์‹คํŒจ๋กœ ์ธ์‹ํ•˜๋Š” ์ƒํ™ฉ์„ ๊ทผ๋ณธ์ ์œผ๋กœ ๋ฐฉ์ง€ํ•  ์ˆ˜ ์žˆ๋‹ค

์›๋ฌธ ์ฝ๊ธฐ