๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
โœ๏ธ DevLog/Devcourse

[DevCourse] 1์ฐจ ํŒ€ ํ”„๋กœ์ ํŠธ ํšŒ๊ณ  – ํƒœ๊ทธ ๊ธฐ๋ฐ˜ ์—ฌํ–‰์ง€ ์ถ”์ฒœ ํ”Œ๋žซํผ

by hyebin (Helia) 2025. 5. 20.
๋ฐ˜์‘ํ˜•

๐Ÿ“† ํ”„๋กœ์ ํŠธ ๊ฐœ์š”

  • ์ง„ํ–‰ ๊ธฐ๊ฐ„: 2025๋…„ 4์›” 25์ผ ~ 5์›” 7์ผ
  • ํŒ€ ์ธ์›: ์ด 5๋ช…
  • ์ฃผ์ œ: “์—ฌํ–‰”
  • ๊ฐœ๋ฐœ ๋ฐฉ์‹: Front-End ๊ธฐ์ˆ ๋งŒ ์‚ฌ์šฉ (๋ฐฑ์—”๋“œ ๋ฏธ์‚ฌ์šฉ)
  • ํ˜•์ƒ๊ด€๋ฆฌ: GitHub

์ด๋ฒˆ ํ”„๋กœ์ ํŠธ๋Š” ‘ํƒœ๊ทธ ๊ธฐ๋ฐ˜ ์—ฌํ–‰์ง€ ์ถ”์ฒœ ํ”Œ๋žซํผ’์„ ์ฃผ์ œ๋กœ,

์—ฌํ–‰ ๊ณ„ํš์„ ์‰ฝ๊ฒŒ ์„ธ์šธ ์ˆ˜ ์žˆ๋Š” ์‚ฌ์šฉ์ž ์ค‘์‹ฌ์˜ ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ์„ ๋ชฉํ‘œ๋กœ ์ง„ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค.

 

์—ฌํ–‰์€ ๊ฐ€๊ณ  ์‹ถ์ง€๋งŒ, ๊ณ„ํš์€ ๊ท€์ฐฎ๋‹ค๋Š” ์ธ์‚ฌ์ดํŠธ์—์„œ ์ถœ๋ฐœํ•ด, ๋ˆ„๊ตฌ๋‚˜ ํด๋ฆญ ๋ช‡ ๋ฒˆ์œผ๋กœ ์—ฌํ–‰์ง€๋ฅผ ์ถ”์ฒœ๋ฐ›๊ณ ,

AI๊ฐ€ ์ œ์•ˆํ•˜๋Š” ์ผ์ •์„ ํ†ตํ•ด ๋น ๋ฅด๊ฒŒ ์—ฌํ–‰ ๊ณ„ํš์„ ์™„์„ฑํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ธฐํšํ–ˆ์Šต๋‹ˆ๋‹ค.

 

์‚ฌ์šฉ์ž๋Š” ๊ณ„์ ˆ, ์ง€์—ญ, ํ…Œ๋งˆ, ๋™๋ฐ˜์ž ๋“ฑ ๋‹ค์–‘ํ•œ ์—ฌํ–‰ ํƒœ๊ทธ๋ฅผ ์„ ํƒํ•ด ์ž์‹ ์˜ ์ทจํ–ฅ์— ๋งž๋Š” ์—ฌํ–‰์ง€๋ฅผ ์ถ”์ฒœ๋ฐ›์„ ์ˆ˜ ์žˆ๊ณ ,

์„ ํƒํ•œ ์—ฌํ–‰์ง€์™€ ๊ธฐ๊ฐ„์„ ๊ธฐ๋ฐ˜์œผ๋กœ GPT๊ฐ€ ์ž๋™ ์ƒ์„ฑํ•œ ์ผ์ •์„ ํ™•์ธํ•˜๊ณ  ์ €์žฅํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

๋ณต์žกํ•œ ์ž…๋ ฅ ์—†์ด๋„ ๋‚˜๋งŒ์˜ ์—ฌํ–‰ ์ผ์ •์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์ด ์ด๋ฒˆ ํ”„๋กœ์ ํŠธ์˜ ํ•ต์‹ฌ์ด์—ˆ์Šต๋‹ˆ๋‹ค.


๐Ÿงฉ ์ฃผ์š” ์ง„ํ–‰ ๊ณผ์ •

๐Ÿ”– ์•„์ด๋””์–ด ๋„์ถœ & ๊ธฐํš

์ดˆ๊ธฐ ์•„์ด๋””์–ด ํšŒ์˜์—์„œ “์—ฌํ–‰์€ ๊ฐ€๊ณ  ์‹ถ์ง€๋งŒ, ๊ณ„ํš ์งœ๋Š” ๊ฒŒ ๊ท€์ฐฎ๋‹ค”๋Š” ๊ณตํ†ต๋œ ๋ฌธ์ œ์˜์‹์ด ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

์ด๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ํƒœ๊ทธ ๊ธฐ๋ฐ˜ ์—ฌํ–‰์ง€ ์ถ”์ฒœ + GPT ์ผ์ • ์ถ”์ฒœ์ด๋ผ๋Š” ํ˜•ํƒœ๋กœ ๋ฐฉํ–ฅ์„ ์žก์•˜๊ณ ,

Figma๋ฅผ ํ™œ์šฉํ•ด ์™€์ด์–ดํ”„๋ ˆ์ž„๋„ ํ•จ๊ป˜ ์ œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค.

figma - ๋ ˆํผ๋Ÿฐ์Šค ์กฐ์‚ฌ ๋ฐ ์™€์ด์–ดํ”„๋ ˆ์ž„

 

๐Ÿ› ๏ธ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ๋ฐ ๊ธฐ์ˆ  ์Šคํƒ

๐Ÿ’ป ๋งˆํฌ์—…

HTML, CSS : ๊ธฐ๋ณธ์ ์ธ ํ™”๋ฉด ๊ตฌ์„ฑ ๋ฐ ์Šคํƒ€์ผ๋ง์„ ์œ„ํ•ด ์‚ฌ์šฉ

 

โš›๏ธ ํ”„๋ ˆ์ž„์›Œํฌ

React : ์ตœ๊ทผ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์—์„œ ์ฃผ๋กœ ์‚ฌ์šฉ๋˜๋Š” ๊ธฐ์ˆ ์ด๋ฉฐ, ํŒ€์›๋“ค๊ณผ ํ•จ๊ป˜ ๋„์ „ํ•ด๋ณด๊ณ  ์‹ถ์–ด์„œ ์„ ํƒ

 

๐ŸŒ ํ˜‘์—… ๋ฐ ํ˜•์ƒ๊ด€๋ฆฌ

Git, GitHub : ์ฝ”๋“œ ๋ฒ„์ „ ๊ด€๋ฆฌ ๋ฐ ํŒ€์› ๊ฐ„ ํ˜‘์—…์„ ์œ„ํ•œ ํ•„์ˆ˜ ๋„๊ตฌ๋กœ ํ™œ์šฉ


๐Ÿ™‹‍โ™€๏ธ ๋‚ด๊ฐ€ ๋งก์€ ์—ญํ• 

1๏ธโƒฃ ์ผ์ • ์ถ”์ฒœ ํŽ˜์ด์ง€ ๊ฐœ๋ฐœ

์ผ์ • ์ถ”์ฒœ ํŽ˜์ด์ง€์—์„œ๋Š” GPT๊ฐ€ ์ œ์•ˆํ•œ ์ผ์ •์„ ์‚ฌ์šฉ์ž๊ฐ€ ์„ ํƒํ•œ ๋‚ ์งœ์— ๋งž์ถฐ ๋ณด์—ฌ์ฃผ๋Š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.

React๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ, ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๊ณ ๋ คํ•œ ํ๋ฆ„ ์„ค๊ณ„์™€ ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ์— ์ง‘์ค‘ํ–ˆ์Šต๋‹ˆ๋‹ค.

  • ์—ฌํ–‰ ์ผ์ • ์ž…๋ ฅ
    • react-date-range ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ™œ์šฉํ•ด ์‚ฌ์šฉ์ž๊ฐ€ ์—ฌํ–‰ ์ผ์ •์„ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋Š” UI๋ฅผ ๊ตฌ์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค.
    • ์ผ์ • ์„ ํƒ ์ดํ›„์—๋Š” ์ด๋™ ์ˆ˜๋‹จ์„ ์„ ํƒํ•˜๋Š” ๋‹จ๊ณ„๋กœ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ์ด์–ด์ง€๋„๋ก ํ™”๋ฉด ํ๋ฆ„์„ ์„ค๊ณ„ํ–ˆ์Šต๋‹ˆ๋‹ค.
  • ์—ฌํ–‰ ์ผ์ • ์ถ”์ฒœ
    • ์‚ฌ์šฉ์ž๊ฐ€ ์„ ํƒํ•œ ์—ฌํ–‰์ง€์™€ ์ผ์ • ์ •๋ณด๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ GPT์—๊ฒŒ ์ถ”์ฒœ๋ฐ›์€ ์ผ์ •์„ ํ™”๋ฉด์— ์‹œ๊ฐ์ ์œผ๋กœ ๋ณด์—ฌ์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค.
    • ์ผ์ฐจ๋ณ„๋กœ ๊ตฌ์„ฑ๋œ ์ผ์ • ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๊ธฐ ์‰ฝ๊ฒŒ ๋‚˜์—ดํ•˜๊ณ , ํ•„์š”ํ•œ ์—ฌํ–‰ ์ •๋ณด๊ฐ€ ์ž˜ ๋“œ๋Ÿฌ๋‚˜๋„๋ก ๋””์ž์ธํ–ˆ์Šต๋‹ˆ๋‹ค.
  • ๋‚˜์˜ ์—ฌํ–‰์— ์ €์žฅ ๊ธฐ๋Šฅ
    • ์ถ”์ฒœ๋ฐ›์€ ์ผ์ •์ด ๋งˆ์Œ์— ๋“ค ๊ฒฝ์šฐ, ์ €์žฅ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด ‘๋‚˜์˜ ์—ฌํ–‰’ ํŽ˜์ด์ง€์— ์ผ์ •์ด ์ €์žฅ๋˜๋„๋ก ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.
    • ์ด ๊ณผ์ •์—์„œ ๋ณ„๋„์˜ ๋ฐฑ์—”๋“œ ์—†์ด json-server๋ฅผ ํ™œ์šฉํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ๋กœ์ปฌ์— ์ €์žฅ ๋ฐ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ ๊ธฐ๋Šฅ์„ ๊ตฌ์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค.

์—ฌํ–‰ ์ผ์ • ์ž…๋ ฅ
์ผ์ • ์ถ”์ฒœ ํŽ˜์ด์ง€
์ผ์ • ์ถ”์ฒœ ๋กœ์ง


2๏ธโƒฃ Git ์„ธํŒ… ๋ฐ ๊ด€๋ฆฌ

ํŒ€ ๋‚ด Git์„ ์ฒ˜์Œ ์ ‘ํ•˜๋Š” ๋ถ„๋“ค์ด ๋งŽ์•„ Git ์ดˆ๊ธฐ ์„ธํŒ…๊ณผ ๋ธŒ๋žœ์น˜ ์ „๋žต ์•ˆ๋‚ด, ์ถฉ๋Œ ํ•ด๊ฒฐ ๋“ฑ์„ ๋งก์•„ ์ง„ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค.

์ดํ›„ ํŒ€์›๋“ค์ด ์•ˆ์ •์ ์œผ๋กœ Git์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์ ๊ทน์ ์œผ๋กœ ๋„์™”๊ณ , ํ˜‘์—… ํ๋ฆ„์„ ๋งค๋„๋Ÿฝ๊ฒŒ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

 

3๏ธโƒฃ ๋ฌธ์„œํ™” & ์ผ์ • ๊ด€๋ฆฌ ๋‹ด๋‹น

ํ”„๋กœ์ ํŠธ์˜ ๊ธฐํš๋ถ€ํ„ฐ ์ง„ํ–‰๊นŒ์ง€ ํ๋ฆ„์„ ๊ธฐ๋กํ•˜๊ณ  ์ •๋ฆฌํ•˜๋Š” ์—ญํ• ์„ ๋งก์•˜์Šต๋‹ˆ๋‹ค.

ํšŒ์˜ ๋‚ด์šฉ์„ ๋ฐ”ํƒ•์œผ๋กœ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฌธ์„œ ์ž‘์—…์„ ์ฃผ๋„์ ์œผ๋กœ ์ˆ˜ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค.

  • ์š”๊ตฌ ๋ช…์„ธ์„œ & ๊ธฐ์ˆ  ๋ช…์„ธ์„œ ์ž‘์„ฑ
    • ์ „์ฒด ์„œ๋น„์Šค ํ๋ฆ„๊ณผ ๊ธฐ๋Šฅ ์ •์˜๋ฅผ ์ฒด๊ณ„์ ์œผ๋กœ ์ •๋ฆฌํ•˜์—ฌ ํŒ€์›๋“ค๊ณผ์˜ ์ดํ•ด๋ฅผ ๋งž์ท„์Šต๋‹ˆ๋‹ค.
  • WBS ๊ธฐ๋ฐ˜ ์ผ์ • ๊ด€๋ฆฌ
    • ์ž‘์—… ๋‹จ์œ„๋ฅผ ์„ธ๋ถ„ํ™”ํ•ด WBS(Work Breakdown Structure) ํ˜•์‹์œผ๋กœ ์ผ์ •์„ ์„ค๊ณ„ํ•˜๊ณ , ์ „์ฒด ๊ฐœ๋ฐœ ๊ธฐ๊ฐ„ ๋™์•ˆ ํŒ€์›๋“ค์ด ์ฐธ๊ณ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ด€๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค.
  • ํšŒ์˜๋ก ๋ฐ ๋ฉ˜ํ† ๋ง ๊ธฐ๋ก ์ •๋ฆฌ
    • ๋งค ํšŒ์˜ ๋ฐ ๋ฉ˜ํ† ๋ง ์ดํ›„ ํ•ต์‹ฌ ๋…ผ์˜ ๋‚ด์šฉ์„ ๋น ์ง์—†์ด ๊ธฐ๋กํ•˜์—ฌ, ํ”„๋กœ์ ํŠธ ํ๋ฆ„์„ ๋†“์น˜์ง€ ์•Š๋„๋ก ํ–ˆ์Šต๋‹ˆ๋‹ค.

wbs
์š”๊ตฌ์‚ฌํ•ญ ๋ช…์„ธ์„œ, ๊ธฐ์ˆ  ๋ช…์„ธ์„œ


๐Ÿง  ํšŒ๊ณ  ๋ฐ ๋А๋‚€ ์ 

๐Ÿ™Œ ํ”„๋กœ์ ํŠธ ๋ฆฌ๋”ฉ ๊ฒฝํ—˜

๊ทธ๋™์•ˆ ์—ฌ๋Ÿฌ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ฒฝํ—˜ํ–ˆ๋˜ ๋•๋ถ„์—, ํŒ€์›๋“ค์„ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ๋ฆฌ๋“œํ•˜๋ฉฐ ํ”„๋กœ์ ํŠธ๋ฅผ ๋Œ์–ด๊ฐˆ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

Git ์‚ฌ์šฉ๋ฒ•์ด๋‚˜ ์ผ์ • ๊ด€๋ฆฌ ๋“ฑ์—์„œ ํŒ€์›๋“ค์ด ์˜์ง€ํ•ด์ฃผ์—ˆ๊ณ , ๊ทธ๋งŒํผ ์ฑ…์ž„๊ฐ์„ ๊ฐ–๊ณ  ์ด๋Œ ์ˆ˜ ์žˆ์—ˆ๋˜ ๊ฒฝํ—˜์ด์—ˆ์Šต๋‹ˆ๋‹ค.

 

๐Ÿ“… ์—ฐํœด ๊ธฐ๊ฐ„์˜ ์–ด๋ ค์›€

์ค‘๊ฐ„์— ์—ฐํœด๊ฐ€ ๊ปด ์žˆ์—ˆ๋˜ ํƒ“์— ์ผ์ • ์กฐ์œจ์ด ์‰ฝ์ง€ ์•Š์•˜์ง€๋งŒ, ๋””์Šค์ฝ”๋“œ๋ฅผ ์ ๊ทน ํ™œ์šฉํ•ด ์›ํ™œํ•œ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์„ ์ด์–ด๊ฐˆ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

 

๐Ÿงฉ ์•„์‰ฌ์šด ์  – ๋ฐฑ์—”๋“œ ๋ฏธ์‚ฌ์šฉ

๋ฐฑ์—”๋“œ ์—†์ด ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐ์ˆ ๋งŒ์œผ๋กœ ๊ตฌํ˜„ํ•˜๋‹ค ๋ณด๋‹ˆ, ์‹ค์ œ ์‚ฌ์šฉ์ž ๋ฐ์ดํ„ฐ ์ €์žฅ/๊ด€๋ฆฌ์—๋Š” ํ•œ๊ณ„๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

ํ–ฅํ›„์—” ๋ฐฑ์—”๋“œ๊นŒ์ง€ ์—ฐ๋™ํ•œ ์‹ค์ œ ๋™์ž‘ํ•˜๋Š” ์—ฌํ–‰ ์ถ”์ฒœ ์„œ๋น„์Šค๋กœ ํ™•์žฅํ•ด๋ณด๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

 

๐Ÿ˜Š ์ข‹์€ ๋งˆ๋ฌด๋ฆฌ

๊ธฐ๋Šฅ์„ ์™„์„ฑ๋„ ์žˆ๊ฒŒ ๊ตฌํ˜„ํ–ˆ๊ณ , ํŒ€์›๋“ค ๊ฐ„์˜ ์†Œํ†ต๋„ ์›ํ™œํ•˜๊ฒŒ ์ง„ํ–‰๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๋งˆ์ง€๋ง‰ ํšŒ๊ณ ์—์„œ ํŒ€์›๋“ค๋กœ๋ถ€ํ„ฐ “์˜์ง€๊ฐ€ ๋˜๋Š” ํŒ€์›์ด์—ˆ๋‹ค”๋Š” ํ‰๊ฐ€๋ฅผ ๋ฐ›์„ ์ˆ˜ ์žˆ์–ด ์ •๋ง ๋ฟŒ๋“ฏํ–ˆ์Šต๋‹ˆ๋‹ค.

 

ํ”„๋กœ์ ํŠธ ํ”ผ์–ด๋ฆฌ๋ทฐ


๐Ÿ”š ๋งˆ๋ฌด๋ฆฌ ํ•œ๋งˆ๋””

์ด๋ฒˆ ํ”„๋กœ์ ํŠธ๋Š” ๊ธฐ์ˆ ์ ์ธ ์„ฑ์žฅ๋ฟ ์•„๋‹ˆ๋ผ, ๋ฆฌ๋”์‹ญ๊ณผ ํ˜‘์—…, ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ ์—ญ๋Ÿ‰๊นŒ์ง€ ๋Œ์•„๋ณผ ์ˆ˜ ์žˆ์—ˆ๋˜ ๊ฐ’์ง„ ๊ฒฝํ—˜์ด์—ˆ์Šต๋‹ˆ๋‹ค.

๋‹ค์Œ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” ๋” ๊นŠ์ด ์žˆ๋Š” ์‚ฌ์šฉ์ž ๊ฒฝํ—˜ ์„ค๊ณ„์™€ ๋ฐฑ์—”๋“œ ์—ฐ๋™๊นŒ์ง€ ์‹œ๋„ํ•ด๋ณด๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

๋ฐ˜์‘ํ˜•