Home - FRONTENDBOOTCAMP-14th/Sashimi GitHub Wiki

๐ŸŽฏ Team Project: UI ํŒ€ "์‚ฌ! ์‹œ! ๋ฏธ!"

"์šฐ๋ฆฐ ํ‹ฐ๋น™ UI๋ฅผ ์ •๊ตํ•˜๊ฒŒ '๋œฌ๋‹ค'! ๊ทธ๋ž˜์„œ ์ด๋ฆ„์€... ์‚ฌ! ์‹œ! ๋ฏธ!"


๐Ÿ‘ฅ ํ”„๋กœ์ ํŠธ ๊ตฌ์„ฑ์›

์ด๋ฆ„ ์—ญํ•  GitHub ID ์ฃผ์š” ๋‹ด๋‹น
๋ฐ•๋ฏผ์„ฑ ๐Ÿงญ PM, FE @PMS990126 ์ผ์ • ๊ด€๋ฆฌ, ๋กœ๊ทธ์ธยท๋ชจ๋‹ฌ ์ปดํฌ๋„ŒํŠธ, ๋กœ๊ทธ์ธยท๋น„๋ฐ€๋ฒˆํ˜ธ ์ฐพ๊ธฐยทํšŒ์›๊ฐ€์ž… ํŽ˜์ด์ง€
์กฐ์žฅ์› ๐Ÿ› ๏ธ PL, FE @Jandi95 ์ฝ”๋“œ ๊ตฌ์กฐ, ๋ฉ”์ธยท๊ฒ€์ƒ‰ ์ปดํฌ๋„ŒํŠธ, ๋ฉ”์ธ ํŽ˜์ด์ง€ ๋ฐ ์ด๊ด„
์žฅํšจ์ • ๐ŸŽจ FE @wjjhhj0914 ํ—ค๋”ยทํ‘ธํ„ฐ ์ปดํฌ๋„ŒํŠธ, ๊ฒ€์ƒ‰ยทํ”„๋กœํ•„ ํŽ˜์ด์ง€
์ „์ง€์—ฐ ๐Ÿ’ป FE @jeonjyeon ๋žœ๋”ฉยทํ”„๋กœํ•„ ์ปดํฌ๋„ŒํŠธ, ๋žœ๋”ฉยทํ”„๋กœํ•„ ํŽ˜์ด์ง€

๐Ÿ—‚๏ธ ํ”„๋กœ์ ํŠธ ๊ตฌ์กฐ

๐Ÿ“ฆ project-root
โ”œโ”€โ”€ ๐Ÿ“‚ public
โ”‚   โ”œโ”€โ”€ ๐Ÿ“‚ icon
โ”‚   โ”œโ”€โ”€ ๐Ÿ“‚ images
โ”‚   โ”œโ”€โ”€ ๐Ÿ“‚ js
โ”‚   โ”œโ”€โ”€ โญ favicon.ico
โ”œโ”€โ”€ ๐Ÿ“‚ src
โ”‚   โ”œโ”€โ”€ ๐Ÿ“‚ common      # ๋ฆฌ์…‹, ํ…Œ๋งˆ, ์ ‘๊ทผ์„ฑ ๋“ฑ ํŒŒ์ผ
โ”‚   โ”œโ”€โ”€ ๐Ÿ“‚ components  # ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ UI ์ปดํฌ๋„ŒํŠธ
โ”‚   โ”œโ”€โ”€ ๐Ÿ“‚ page       # ๊ฐ ํŽ˜์ด์ง€๋ณ„ HTML ํŒŒ์ผ
โ”œโ”€โ”€ โ”œโ”€โ”€ ๐Ÿ“œ layout.css
โ”œโ”€โ”€ โ”œโ”€โ”€ ๐Ÿ“œ layout.html
โ”œโ”€โ”€ โ”œโ”€โ”€ ๐Ÿ“œ main.js
โ”œโ”€โ”€ โ”œโ”€โ”€ ๐Ÿ“œ style.css
โ”œโ”€โ”€ ๐Ÿ“œ .gitignore
โ”œโ”€โ”€ ๐Ÿ“œ .prettierrc.cjs
โ”œโ”€โ”€ ๐Ÿ“œ index.html
โ”œโ”€โ”€ ๐Ÿ“œ package-lock.json
โ”œโ”€โ”€ ๐Ÿ“œ package.json
โ”œโ”€โ”€ ๐Ÿ“œ README.md
โ””โ”€โ”€ ๐Ÿ“œ vite.config.js

๐Ÿ• ํƒ€์ž„๋ผ์ธ

๋ฐฑ๋กœ๊ทธ ๋งํฌ : https://github.com/orgs/FRONTENDBOOTCAMP-14th/projects/8


โ˜€๏ธ ๋ฐ์ผ๋ฆฌ ์Šคํฌ๋Ÿผ

๐Ÿ—“๏ธ 2025.05.27 (Day 1) - ํ”„๋กœ์ ํŠธ ์ดˆ๊ธฐ ์„ธํŒ… ๋ฐ ์—ญํ•  ๋ถ„๋ฐฐ

ํ”„๋กœ์ ํŠธ์˜ ๊ธฐ๋ฐ˜์„ ๋‹ค์ง€๊ณ , ๋ณธ๊ฒฉ์ ์ธ ์ž‘์—… ์ „ ๊ตฌ์กฐ์™€ ์šด์˜ ์ฒด๊ณ„๋ฅผ ์ •๋น„ํ•œ ๋‚ 

  • โœ… PR ์ปค๋ฐ‹ ๊ทœ์น™ ์ •์˜ ๋ฐ GitHub ํ˜‘์—… ํ™˜๊ฒฝ ์ •๋ฆฌ
  • โœ… WIKI ํ™ˆ ๊ตฌ์กฐ ์„ค๊ณ„ ๋ฐ ์ž‘์„ฑ ์‹œ์ž‘
  • โœ… ๋ฐฑ๋กœ๊ทธ ํ•ญ๋ชฉ ๊ตฌ์ฒดํ™”, ์ด์Šˆ ํ…œํ”Œ๋ฆฟ ์ž‘์„ฑ ๋ฐ ๋ผ๋ฒจ ๋ถ„๋ฅ˜
  • โœ… ์ž‘์—… ํŒŒํŠธ๋ฅผ ๋ช…ํ™•ํ•˜๊ฒŒ ๋ถ„๋ฐฐํ•˜์—ฌ ๊ฐ์ž ๋งก์„ ํŽ˜์ด์ง€ ์ •์˜
  • โœ… ๋””์Šค์ฝ”๋“œ & ๊นƒํ—ˆ๋ธŒ Webhook ์—ฐ๋™์œผ๋กœ ์‹ค์‹œ๊ฐ„ ํ˜‘์—… ์•Œ๋ฆผ ๊ตฌ์ถ•
  • โœ… ๊ณตํ†ต ํด๋” ๊ตฌ์กฐ ๋ฐ ์ดˆ๊ธฐ ํŒŒ์ผ ์„ธํŒ… ์™„๋ฃŒ
๐Ÿ—“๏ธ 2025.05.28 (Day 2) - ๊ฐœ๋ณ„ ์ปดํฌ๋„ŒํŠธ ๋งˆํฌ์—… & ์Šคํƒ€์ผ๋ง ์‹œ์ž‘
  • ๐Ÿ‘จโ€๐Ÿ’ป ๋ฐ•๋ฏผ์„ฑ

    • ๋กœ๊ทธ์ธ ํผ UI ์š”์†Œ ๋งˆํฌ์—… ๋ฐ ์Šคํƒ€์ผ๋ง
    • ๋ฐ˜์‘ํ˜• ๊ณ ๋ คํ•œ ๊ตฌ์กฐ ์„ค๊ณ„
  • ๐Ÿ‘จโ€๐ŸŽจ ์กฐ์žฅ์›

    • ๋ฉ”์ธ ํŽ˜์ด์ง€ ๋ ˆ์ด์•„์›ƒ ์„ค๊ณ„
    • ๋งˆํฌ์—… ๋ฐ ์Šคํƒ€์ผ๋ง ์ง„ํ–‰
  • ๐Ÿ‘ฉโ€๐Ÿ’ป ์ „์ง€์—ฐ

    • ๋žœ๋”ฉ ํŽ˜์ด์ง€ ์•„์ด์ฝ˜ ๋ฐ ์ด๋ฏธ์ง€ ์ถ”๊ฐ€
    • ์ „์ฒด ๋งˆํฌ์—…๊ณผ ์Šคํƒ€์ผ๋ง ๊ตฌ์„ฑ
  • ๐Ÿ‘ฉโ€๐Ÿ”ง ์žฅํšจ์ •

    • ํ—ค๋” ์ปดํฌ๋„ŒํŠธ ์‹œ๋งจํ‹ฑ ๋งˆํฌ์—… ๋ฐ ์Šคํƒ€์ผ๋ง
    • ๋ฐ˜์‘ํ˜• ์ ์šฉ ์™„๋ฃŒ
๐Ÿ—“๏ธ 2025.05.29 (Day 3) - ๋ฆฌํŒฉํ† ๋ง & ํŽ˜์ด์ง€ ๊ตฌ์กฐ ์‹ฌํ™” ์ž‘์—…
  • ๐Ÿ‘จโ€๐Ÿ’ป ๋ฐ•๋ฏผ์„ฑ

    • ๋กœ๊ทธ์ธ ์ปดํฌ๋„ŒํŠธ ๋ฆฌํŒฉํ† ๋ง ๋ฐ ์ ‘๊ทผ์„ฑ ๊ฐœ์„ 
    • ๋ชจ๋‹ฌ ์ปดํฌ๋„ŒํŠธ ๋งˆํฌ์—… ๋ฐ ์Šคํƒ€์ผ๋ง
  • ๐Ÿ‘จโ€๐ŸŽจ ์กฐ์žฅ์›

    • ๋ฉ”์ธ ํŽ˜์ด์ง€ ๊ตฌ์กฐ ๋ฐ ์Šคํƒ€์ผ ์ˆ˜์ •
    • Search ์ปดํฌ๋„ŒํŠธ ์ถ”๊ฐ€ ๋ฐ ๊ตฌ์„ฑ
  • ๐Ÿ‘ฉโ€๐Ÿ’ป ์ „์ง€์—ฐ

    • ๋žœ๋”ฉ ํŽ˜์ด์ง€ ๋งˆ๋ฌด๋ฆฌ ์Šคํƒ€์ผ๋ง
    • ํ”„๋กœํ•„ ์ปดํฌ๋„ŒํŠธ ๋งˆํฌ์—… ๋ฐ ํŽธ์ง‘ ๊ธฐ๋Šฅ UI ๊ตฌ์„ฑ
  • ๐Ÿ‘ฉโ€๐Ÿ”ง ์žฅํšจ์ •

    • ํ—ค๋” ์Šคํƒ€์ผ ๊ฐœ์„ 
    • ํ‘ธํ„ฐ ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ณธ ๊ตฌ์กฐ ๋ฐ ์Šคํƒ€์ผ๋ง
๐Ÿ—“๏ธ 2025.05.30 (Day 4) - ์ „์ฒด ๊ตฌ์กฐ ์ •๋ฆฌ ๋ฐ ๋ณธ๊ฒฉ ํŽ˜์ด์ง€ ์ œ์ž‘ ๋Œ์ž…
  • ๐Ÿค ๊ณตํ†ต ์ž‘์—…

    • ์ „์ฒด ์ฝ”๋“œ PR ๋ฐ ๋ณ‘ํ•ฉ (develop โ†’ main)
    • ์ „์ฒด ๋ ˆ์ด์•„์›ƒ ๊ตฌ์กฐ ์„ค๊ณ„ ํšŒ์˜
    • ์ปดํฌ๋„ŒํŠธ ํ†ต์ผ ๋ฐ ๋ฆฌํŒฉํ† ๋ง
  • ๐Ÿ‘จโ€๐Ÿ’ป ๋ฐ•๋ฏผ์„ฑ

    • ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€ ๋ณธ๊ฒฉ ์ œ์ž‘ ์‹œ์ž‘
  • ๐Ÿ‘จโ€๐ŸŽจ ์กฐ์žฅ์›

    • ๋ฉ”์ธ ํŽ˜์ด์ง€ ์ฝ˜ํ…์ธ  ๊ตฌ์„ฑ ๋ฐ ์ œ์ž‘ ์‹œ์ž‘
  • ๐Ÿ‘ฉโ€๐Ÿ’ป ์ „์ง€์—ฐ

    • ๋žœ๋”ฉ ํŽ˜์ด์ง€ ๊ตฌ์กฐ ๊ฐœ์„  ๋ฐ ์ œ์ž‘ ์‹œ์ž‘
  • ๐Ÿ‘ฉโ€๐Ÿ”ง ์žฅํšจ์ •

    • ํ”„๋กœํ•„ ํŽ˜์ด์ง€ ๋ ˆ์ด์•„์›ƒ ์„ค๊ณ„ ๋ฐ ๋งˆํฌ์—… ์‹œ์ž‘
๐Ÿ—“๏ธ 2025.06.02 (Day 5) โ€“ ์ธ๋ฑ์Šค ๋ ˆ์ด์•„์›ƒ ๊ตฌ์„ฑ ๋ฐ ์ „์ฒด ์ฝ”๋“œ ๋ฆฌํŒฉํ† ๋ง

์ค‘๊ฐ„ ์ ๊ฒ€ ํ”ผ๋“œ๋ฐฑ์„ ๋ฐ˜์˜ํ•˜์—ฌ ์ „์ฒด ๊ตฌ์กฐ๋ฅผ ๋ฆฌํŒฉํ† ๋งํ•˜๊ณ 
ํŽ˜์ด์ง€๋ณ„ ๊ตฌ์กฐ ๋ฐ ์ปดํฌ๋„ŒํŠธ ์™„์„ฑ๋„๋ฅผ ๋†’์ด๋Š” ๋ฐ ์ง‘์ค‘ํ•œ ๋‚ 

  • ๐Ÿค ๊ณตํ†ต ์ž‘์—…

    • ์ธ๋ฑ์Šค ํŽ˜์ด์ง€ ๋ ˆ์ด์•„์›ƒ ์‹œ๊ฐ์  ํ†ต์ผ
    • ์ฝ”๋“œ develop ๋ธŒ๋žœ์น˜ ๋ณ‘ํ•ฉ
    • WIKI ๋ฌธ์„œ ์ •๋ฆฌ ๋ฐ ์ˆ˜์ •
    • ํŽ˜์ด์ง€๋ณ„ ์ฝ”๋“œ ๋ฆฌ๋ทฐ ๋ฐ ํ”ผ๋“œ๋ฐฑ ๋ฐ˜์˜
    • ์ „์ฒด ๋ ˆ์ด์•„์›ƒ/์ปดํฌ๋„ŒํŠธ ๊ตฌ์กฐ ๋ฆฌํŒฉํ† ๋ง
  • ๐Ÿ‘จโ€๐Ÿ’ป ๋ฐ•๋ฏผ์„ฑ

    • ๋กœ๊ทธ์ธ & ๋ชจ๋‹ฌ ์ปดํฌ๋„ŒํŠธ ๋ฆฌํŒฉํ† ๋ง
  • ๐Ÿ‘จโ€๐ŸŽจ ์กฐ์žฅ์›

    • ๋ฉ”์ธ & ๊ฒ€์ƒ‰ ํŽ˜์ด์ง€ ์ •๋ฆฌ ๋ฐ UI ๊ฐœ์„ 
  • ๐Ÿ‘ฉโ€๐Ÿ’ป ์ „์ง€์—ฐ

    • ํ”„๋กœํ•„/๋žœ๋”ฉ ํŽ˜์ด์ง€ ๊ตฌ์กฐ ์ •๋ฆฌ ๋ฐ ์Šคํƒ€์ผ๋ง
  • ๐Ÿ‘ฉโ€๐Ÿ”ง ์žฅํšจ์ •

    • ํ—ค๋”/ํ‘ธํ„ฐ ์‹œ๋งจํ‹ฑ ๋งˆํฌ์—… ์ •๋น„ ๋ฐ ๋ฐ˜์‘ํ˜• ๋Œ€์‘
๐Ÿ—“๏ธ 2025.06.03 (Day 6) โ€“ ์ธ๋ฑ์Šค workflow ์˜์—ญ ์ œ์ž‘
  • ๐Ÿค ๊ณตํ†ต ์ž‘์—…

    • ์ธ๋ฑ์Šค workflow ๊ตฌ์„ฑ ํšŒ์˜
  • ๐Ÿ‘จโ€๐Ÿ’ป ๋ฐ•๋ฏผ์„ฑ

    • workflow - convention ์˜์—ญ ์ œ์ž‘
  • ๐Ÿ‘จโ€๐ŸŽจ ์กฐ์žฅ์›

    • workflow - ๋ ˆ์ด์•„์›ƒ ์„ธํŒ…
  • ๐Ÿ‘ฉโ€๐Ÿ’ป ์ „์ง€์—ฐ

    • workflow - scrum ์˜์—ญ ์ œ์ž‘
  • ๐Ÿ‘ฉโ€๐Ÿ”ง ์žฅํšจ์ •

    • workflow - timeline ์˜์—ญ ์ œ์ž‘
๐Ÿ—“๏ธ 2025.06.04 (Day 7) โ€“ ํ”„๋กœ์ ํŠธ ์ตœ์ข… ์™„์„ฑ ๋ฐ ๋งˆ๋ฌด๋ฆฌ
  • ๐Ÿค ๊ณตํ†ต ์ž‘์—…

    • ๊ฐ ํŽ˜์ด์ง€์— ๋“ค์–ด๊ฐˆ ์‹œํ–‰์ฐฉ์˜ค ๋‚ด์šฉ ์ด ์ •๋ฆฌ
    • ๋ฐœํ‘œ ๋‚ด์šฉ ๊ฒ€์ˆ˜ ๋ฐ ์ˆ˜์ • ์ž‘์—…
    • ์ „์ฒด ํŽ˜์ด์ง€ ํฌ๋กœ์Šค๋ธŒ๋ผ์šฐ์ง• ์ฒดํฌ
  • ๐Ÿ‘จโ€๐Ÿ’ป ๋ฐ•๋ฏผ์„ฑ

    • ์ด๋ฏธ์ง€ ํŒŒ์ผ ์ตœ์ ํ™”๋ฅผ ์œ„ํ•ด npm์„ ํ™œ์šฉํ•œ ๋ณ€ํ™˜ ์ž‘์—…
  • ๐Ÿ‘จโ€๐ŸŽจ ์กฐ์žฅ์›

    • ์ธ๋ฑ์Šค ๋ฐ˜์‘ํ˜• ์ฒ˜๋ฆฌ ๋ฐ ํ‘ธํ„ฐ ์ถ”๊ฐ€
  • ๐Ÿ‘ฉโ€๐Ÿ’ป ์ „์ง€์—ฐ

    • ๋žœ๋”ฉ์— ๋น„์ƒ์—…์ ์ž„ ๋ช…์‹œํ•˜๋Š” ๋ชจ๋‹ฌ ์ถ”๊ฐ€
  • ๐Ÿ‘ฉโ€๐Ÿ”ง ์žฅํšจ์ •

    • ๊ฐ ํŽ˜์ด์ง€ ํ”„๋กœํ† ํƒ€์ž… ์ฒ˜๋ฆฌ

๐Ÿ“‹ 2025.06.02 ์ค‘๊ฐ„ ์ ๊ฒ€ ํ”ผ๋“œ๋ฐฑ ์ •๋ฆฌ

๐Ÿ‘ค Profiles ์ปดํฌ๋„ŒํŠธ

  • โŒ ์ด๋ฏธ์ง€ alt์— ๋ถˆํ•„์š”ํ•œ ์ •๋ณด ํฌํ•จ (์˜ˆ: ์•„์ด์ฝ˜) โ†’ ์ œ๊ฑฐ ํ•„์š”
  • โ— ๋ฒ„ํŠผ์˜ type ์†์„ฑ ํ™•์ธ (type="button" ๋ฏธ์ง€์ • ์ฃผ์˜)
  • โŒ ์•„์ด์ฝ˜์„ <img>๋กœ ๋งˆํฌ์—… ํ›„ ์žฌ์‚ฌ์šฉ ์—†์ด ๋ฐ˜๋ณต ์‚ฌ์šฉ โ†’ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋‚˜ ์ปดํฌ๋„ŒํŠธํ™” ๊ถŒ์žฅ

๐Ÿงฉ Main ์ปดํฌ๋„ŒํŠธ

๐Ÿ” Login ์ปดํฌ๋„ŒํŠธ

  • โŒ label ์š”์†Œ ๋ˆ„๋ฝ โ†’ placeholder๋Š” label ๋Œ€์ฒด ๋ถˆ๊ฐ€
  • โŒ ๋น„๋ฐ€๋ฒˆํ˜ธ ๋ณด๊ธฐ ํ† ๊ธ€์€ button ์š”์†Œ ์‚ฌ์šฉ ํ•„์ˆ˜

๐Ÿงญ Header ์ปดํฌ๋„ŒํŠธ

  • ๐Ÿงญ alt="๋กœ๊ณ " โ†’ "๋กœ๊ณ " ๋ฌธ๊ตฌ ์‚ญ์ œ ๊ถŒ์žฅ
  • ๐Ÿ”ก <a> ๋‚ด๋ถ€ <p>๋ณด๋‹ค <span> ์‚ฌ์šฉ ์ถ”์ฒœ
  • ๐Ÿง ๋ชจ๋ฐ”์ผ/๋ฐ์Šคํฌํƒ‘ ์ด๋ฏธ์ง€ ๋ถ„๋ฆฌ ์ด์œ  ๊ฒ€ํ†  ํ•„์š”

๐Ÿงท Footer ์ปดํฌ๋„ŒํŠธ

  • ๐Ÿ–ผ๏ธ SNS ์•„์ด์ฝ˜ โ†’ aria-label ๋Œ€์‹  <img alt=""> ์‚ฌ์šฉ ๊ถŒ์žฅ
  • ยฉ๏ธ ํŠน์ˆ˜๋ฌธ์ž ์ง์ ‘ ์ž…๋ ฅ ๋Œ€์‹  &copy; ์‚ฌ์šฉ

๐ŸŽฌ Landing ์ปดํฌ๋„ŒํŠธ

  • โ“ "์ƒˆ๋กœ์›Œ์ง„ ํ‹ฐ๋น™์„ ๋งŒ๋‚˜๋ณด์„ธ์š”" โ†’ ๊ธฐ์กด ์ปดํฌ๋„ŒํŠธ ์žฌํ™œ์šฉ ๊ฐ€๋Šฅ ์—ฌ๋ถ€ ๊ฒ€ํ† 
  • โ“ ๋ฐฐ๊ฒฝ ์˜์—ญ๊นŒ์ง€ ์ปดํฌ๋„ŒํŠธํ™” ํ•„์š”์„ฑ ์žฌ๊ฒ€ํ† 

๐Ÿ” Search ์ปดํฌ๋„ŒํŠธ

  • โš ๏ธ <img aria-hidden="true"> ๋ถˆํ•„์š”
  • โ“ "์ตœ๊ทผ ๊ฒ€์ƒ‰์–ด ๋ชจ๋‘ ์ง€์šฐ๋Š”" โ†’ ๋Œ€์ฒด ํ…์ŠคํŠธ๋กœ ์ ์ ˆํ•œ์ง€ ๊ฒ€ํ† 
  • โŒ <label>์— ์˜๋ฏธ ์ „๋‹ฌ์ด ๋ถ€์กฑํ•œ ํ…์ŠคํŠธ ์‚ฌ์šฉ ์ค‘ โ†’ ์—ญํ•  ๋ถ„๋ฆฌ ํ•„์š”

๐Ÿ’ฌ Modal ์ปดํฌ๋„ŒํŠธ


๐Ÿงฉ ์‹œํ–‰์ฐฉ์˜ค ์ •๋ฆฌ (UI ํ”„๋กœ์ ํŠธ)

๐Ÿ“Œ ํ˜‘์—… ์ค‘ ์ƒ๊ธด ๊ณตํ†ต ์ด์Šˆ

๐Ÿ” PR ์ปค๋ฐ‹ ๋ฐ˜์˜ ๋ฐฉ์‹

โœ… ๊ธฐ์กด PR์— ์ปค๋ฐ‹์„ ์ถ”๊ฐ€ํ•ด์•ผ ํ•  ๋•Œ, PR์„ ๋‹ซ๊ณ  ์ƒˆ๋กœ ๋งŒ๋“ค์–ด์•ผ ํ•˜๋Š” ์ค„ ์•Œ์•˜์Œ
๐Ÿ”ง ํ•˜์ง€๋งŒ git add . โ†’ git push ๋งŒ์œผ๋กœ ๊ธฐ์กด PR์— ์ปค๋ฐ‹์ด ๋ฐ˜์˜๋จ
โœ๏ธ ์ปค๋ฐ‹ ์ˆ˜์ •์€ git commit --amend -m "message"๋กœ ๊ฐ€๋Šฅํ•˜์ง€๋งŒ, ๊ธฐ๋ก์ด ๋ฎ์ด๋‹ˆ ์‹ ์ค‘ํžˆ

๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป ๋ฐ•๋ฏผ์„ฑ

โ™ฟ ์ ‘๊ทผ์„ฑ aria ์†์„ฑ ๋‚จ๋ฐœ

โœ… ๋ชจ๋“  ์š”์†Œ์— aria ์†์„ฑ์„ ๊ณผ๋„ํ•˜๊ฒŒ ์‚ฌ์šฉ
๐Ÿ”ง alt๋กœ ์ถฉ๋ถ„ํ•œ ๊ฒฝ์šฐ aria-label ์ƒ๋žต, ํ•„์š”ํ•œ ๊ฒฝ์šฐ๋งŒ ๋ช…ํ™•ํ•˜๊ฒŒ ์‚ฌ์šฉ
โœ๏ธ ์ ‘๊ทผ์„ฑ์€ '์ ์ ˆํ•˜๊ฒŒ', ๊ณผ์œ ๋ถˆ๊ธ‰!

๐Ÿท๏ธ ๋ ˆ์ด๋ธ” ์—†๋Š” input ์ฒ˜๋ฆฌ

โœ… ์‹œ์•ˆ์— ๋ ˆ์ด๋ธ” ์—†๋‹ค๊ณ  <div>๋กœ ์ฒ˜๋ฆฌ
๐Ÿ”ง <label class="sr-only">๋กœ ๋ณด์ด์ง€ ์•Š๊ฒŒ ๋„ฃ์Œ
โœ๏ธ ๋ณด์กฐ๊ธฐ๊ธฐ ์‚ฌ์šฉ์ž๋„ ๊ณ ๋ คํ•œ ์‹œ๋งจํ‹ฑ ๋งˆํฌ์—… ์ค‘์š”

๐Ÿ‘๏ธ ๋น„๋ฐ€๋ฒˆํ˜ธ ํ† ๊ธ€ ๋ฒ„ํŠผ ์ ‘๊ทผ์„ฑ

โœ… <img> ํƒœ๊ทธ๋กœ๋งŒ ๊ตฌ์„ฑํ•ด ์Šคํฌ๋ฆฐ๋ฆฌ๋” ๋Œ€์‘ ์•ˆ๋จ
๐Ÿ”ง <button> ๊ฐ์‹ธ๊ณ  aria-label ์ถ”๊ฐ€
โœ๏ธ ๊ธฐ๋Šฅ์€ ์‹œ๋ฉ˜ํ‹ฑํ•˜๊ฒŒ ํ‘œํ˜„๋ผ์•ผ ํ•จ!

๐ŸชŸ Modal์„ div๋กœ ๋งˆํฌ์—…

โœ… ๋‹จ์ˆœ <div>๋กœ ๊ตฌํ˜„
๐Ÿ”ง <dialog> ํƒœ๊ทธ๋กœ ๋ณ€๊ฒฝ
โœ๏ธ ๋ชจ๋‹ฌ๋„ ์‹œ๋ฉ˜ํ‹ฑํ•˜๊ฒŒ!

๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ผ ์กฐ์žฅ์›

๐Ÿ”˜ ์Šฌ๋ผ์ด๋“œ ๋„ํŠธ ํ™œ์„ฑ ์ƒํƒœ ์‹๋ณ„ ๋ถˆ๊ฐ€

โœ… aria-label๋งŒ ์žˆ๊ณ  ํ˜„์žฌ ์œ„์น˜ ํ‘œ์‹œ๋Š” ์—†์Œ
๐Ÿ”ง aria-current="true" ์ถ”๊ฐ€
โœ๏ธ ์ ‘๊ทผ์„ฑ์€ 'ํ˜„์žฌ ์ƒํƒœ'๊นŒ์ง€ ๊ณ ๋ คํ•ด์•ผ ์ง„์งœ!

๐Ÿ”ด ํƒ€์ดํ‹€ ์˜† ํฌ์ธํŠธ ์œ„์น˜ ์–ด๊ธ‹๋‚จ

โœ… ํ…์ŠคํŠธ๊ฐ€ ๊ธธ์–ด์ง€๋ฉด ํฌ์ธํŠธ ์ ์ด ๊ฐ€๋ ค์ง
๐Ÿ”ง padding๊ณผ width ์กฐ์ •์œผ๋กœ ์œ ์—ฐํ•˜๊ฒŒ ํ•ด๊ฒฐ
โœ๏ธ ๋ฐ˜์‘ํ˜•์€ ๊ณต๊ฐ„ ์„ค๊ณ„๊ฐ€ ํ•ต์‹ฌ!

๐Ÿ˜ต ::backdrop์ด ์•ˆ ์ƒ๊น€

โœ… <dialog open>๋งŒ ์‚ฌ์šฉ โ†’ .showModal() ์•ˆ ์”€
๐Ÿ”ง .showModal()๋กœ ์—ด์–ด์•ผ ::backdrop ํ™œ์„ฑํ™”๋จ
โœ๏ธ HTML ์š”์†Œ์™€ JS์˜ ์—ฐ๊ฒฐ ์›๋ฆฌ๋ฅผ ์ดํ•ดํ•ด์•ผ ํ•จ

๐Ÿงฝ ๋ฒ„ํŠผ์— aria-label ์ค‘๋ณต ์‚ฌ์šฉ

โœ… ํ…์ŠคํŠธ๋„ ์žˆ๋Š”๋ฐ aria-label๊นŒ์ง€ ์žˆ์Œ
๐Ÿ”ง aria-label ์ œ๊ฑฐ
โœ๏ธ ์ ‘๊ทผ์„ฑ ์†์„ฑ์€ '๋Œ€์ฒด ์ˆ˜๋‹จ', ์ค‘๋ณตํ•˜๋ฉด ์•ˆ๋จ

๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป ์ „์ง€์—ฐ

๐Ÿ”„ submit ๋ฒ„ํŠผ์œผ๋กœ ํŽ˜์ด์ง€ ์ด๋™?

โœ… <button type="submit"> ์‚ฌ์šฉํ–ˆ์œผ๋‚˜ ๋‹จ์ˆœ ์ด๋™๋งŒ ํ•„์š”
๐Ÿ”ง type="button"์œผ๋กœ ๋ณ€๊ฒฝํ•˜๊ณ  JS ์ฒ˜๋ฆฌ
โœ๏ธ ์‹œ๋งจํ‹ฑ์„ฑ๊ณผ ์žฌ์‚ฌ์šฉ์„ฑ์˜ ๊ท ํ˜• ์ค‘์š”

๐Ÿงฑ ์žฌ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” ์ปดํฌ๋„ŒํŠธ

โœ… ์•„์ด์ฝ˜, ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€ ๋ถ„๋ฆฌํ–ˆ์ง€๋งŒ ์žฌ์‚ฌ์šฉ ์•ˆ ๋จ
๐Ÿ”ง background-image๋กœ ํ†ต์ผ, ๋ถˆํ•„์š” ์ปดํฌ๋„ŒํŠธ ์ œ๊ฑฐ
โœ๏ธ ์ปดํฌ๋„ŒํŠธ๋Š” ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅ์„ฑ์ด ํ•ต์‹ฌ!

๐ŸŽฏ ์ค‘์•™ ์ •๋ ฌ ๊นจ์ง

โœ… margin/padding์œผ๋กœ๋Š” ๋ฐ˜์‘ํ˜•์—์„œ ํ‹€์–ด์ง
๐Ÿ”ง ๊ฐ€์ƒ ์š”์†Œ๋กœ ๋ฐ€์–ด๋‚ด๊ธฐ ๋ฐฉ์‹ ์ฑ„ํƒ
โœ๏ธ ์ค‘์•™ ์ •๋ ฌ์—” ๊ณ„์‚ฐ๋œ ๊ณต๊ฐ„ ๋ฐฐ๋ถ„์ด ํ•„์š”

๐Ÿ‘ฉ๐Ÿป ์žฅํšจ์ •

๐Ÿ”ƒ ํ˜‘์—… ์‹ค์ˆ˜ ๋ชจ์Œ

โœ… ์ปค๋ฐ‹ ์ปจ๋ฒค์…˜ ๋ฏธ์ค€์ˆ˜, ๋ธŒ๋žœ์น˜ ์‹ค์ˆ˜, CSS ๊ตฌ์กฐ ์ดํ•ด ๋ถ€์กฑ ๋“ฑ
๐Ÿ”ง git reset ๋ฐฐ์šฐ๊ณ , var ๋ณ€์ˆ˜/์Šคํƒ€์ผ ๊ตฌ์กฐ ํ•™์Šต
โœ๏ธ ํ˜‘์—…์€ ํƒœ๋„์™€ ์•ฝ์†์˜ ์ดํ•ฉ์ด๋ผ๋Š” ๊ฑธ ๋А๋‚Œ

๐Ÿงญ Header ๋ธŒ๋ผ์šฐ์ € ๋ฌธ์ œ

โœ… Edge์—์„œ ๊ฐ€๋กœ ์Šคํฌ๋กค ๋ฐœ์ƒ
๐Ÿ”ง wrap ์ฒ˜๋ฆฌ, gap ์กฐ์ •
โœ๏ธ ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์€ ๋””ํ…Œ์ผ ์‹ธ์›€

๐Ÿ“Ž Footer ์ง๋Œ€๊ธฐ ํฌ๊ธฐ ๋ฌธ์ œ

โœ… | ๋ฌธ์ž๊ฐ€ ์‹œ์•ˆ๋ณด๋‹ค ์ปค๋ณด์ž„
๐Ÿ”ง ::after ๊ฐ€์ƒ ์š”์†Œ๋กœ ๋Œ€์ฒด
โœ๏ธ ๋””์ž์ธ์€ "๋А๋‚Œ๊นŒ์ง€" ๊ณ ๋ คํ•ด์•ผ ํ•จ

๐Ÿ” Search ๋ ˆ์ด์•„์›ƒ ๊นจ์ง

โœ… width๋งŒ ์„ค์ •ํ•ด์„œ ๊ฐ„๊ฒฉ ์—†์Œ
๐Ÿ”ง padding ์ถ”๊ฐ€ โ†’ ํŒ€์› ์ œ์•ˆ์œผ๋กœ wrapper ์žฌ๊ตฌ์„ฑ
โœ๏ธ ๊ฐ€๋…์„ฑ ์žˆ๋Š” ์ฝ”๋“œ์™€ ๊ตฌ์กฐํ™”๋œ ๋งˆํฌ์—…์ด ์ค‘์š”ํ•จ์„ ๋А๋‚Œ

ํšŒ๊ณ ๋ก(์†Œ๊ฐ)

๋ฐ•๋ฏผ์„ฑ
๊ธธ์—ˆ๋‹ค๋ฉด ๊ธธ์—ˆ๊ณ  ์งง๋‹ค๋ฉด ์ƒ๊ฐ๋ณด๋‹ค ํ›จ์”ฌ ์งง์•˜์—ˆ๋˜ ์ฒซ UIํ”„๋กœ์ ํŠธ..
์ตœ์ข… ํ•œ์ค„ํ‰์„ ๋จผ์ € ๋งํ•ด๋ณด์ž๋ฉด "์ƒ๊ฐ๋ณด๋‹จ ์Šค๋ฌด์Šค?ํ–ˆ๋˜ ํ”„๋กœ์ ํŠธ" ๋ผ๊ณ  ์ •๋ฆฌํ•  ์ˆ˜ ์žˆ์„๊ฒƒ ๊ฐ™๋‹ค.

๋ฉ‹์‚ฌ ๋ถ€ํŠธ์บ ํ”„๋ฅผ ํ•˜๋ฉฐ ์ฒ˜์Œ์œผ๋กœ ํ•˜๋Š” ํŒ€ํ”„๋กœ์ ํŠธ์˜€๋˜ ๋งŒํผ ํšŒ๊ณ ์กฐ๊ฐ€ ์•„๋‹Œ ๋˜ ์ƒˆ๋กœ์šด ์‚ฌ๋žŒ๋“ค๊ณผ ํŒ€์„ ๋งบ์–ด ํ˜‘์—…์„ ํ•  ์ƒ๊ฐ์— ์‚ด์ง ์„ค๋ ˆ๋ฉด์„œ๋„ ๋จธ๋ฆฌ๊ฐ€ ์ง€๋ˆ์ง€๋ˆ ๊ฑฐ๋ฆฌ๋Š” ๋ชจ์ˆœ?์ ์ธ ๊ธฐ๋ถ„์ด ๋“ค์—ˆ๋‹ค!

์‚ฌ์‹ค ๋‚œ ์ „๊ณต์ž์ถœ์‹ ์—๋‹ค ํ˜‘์—…๊ฒฝํ—˜์ด ์žˆ์Œ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  html,css ๊ธฐ์ดˆ๊ฐ€ ์•ฝํ•ด์„œ js๋‚˜ ๋‹ค๋ฅธ ํ”„๋ ˆ์ž„์›Œํฌ ์—†์ด ์ˆœ์ˆ˜ html, css ๋กœ๋งŒ ๊ตฌํ˜„ํ•ด์•ผํ•˜๋Š” UIํ”„๋กœ์ ํŠธ์—์„œ ํŒ€์›๋“ค์—๊ฒŒ ๋ฏผํ๋ฅผ ๋ผ์น˜์ง€ ์•Š์„๊นŒ ๊ฑฑ์ •์ด ์ œ๋ฒ• ๋˜์—ˆ์—ˆ๋‹ค.

ํ•˜์ง€๋งŒ ์ •๋ง ๋‹คํ–‰ํžˆ ์šด์ด์ข‹๊ฒŒ๋„ ๊ธฐ์ดˆ๊ฐ€ ํŠผํŠผํ•˜๊ณ  ํ™”๋ คํ•œ ์ŠคํŽ™์˜ ํŒ€์žฅ๋‹˜๊ณผ ํŒ€์›๋ถ„๋“ค์„ ๋งŒ๋‚œ๋•์— ์„œ๋กœ๊ฐ€ ์„œ๋กœ์—๊ฒŒ ๋ถ€์กฑํ•œ ๋ถ€๋ถ„์„ ์ฑ„์›Œ์ฃผ๋ฉฐ ์ด๋Œ์–ด ๋‚˜๊ฐˆ ์ˆ˜ ์žˆ์–ด์„œ ์ด ๋ถ€๋ถ„์ด ์ •๋ง ์ข‹์•˜์—ˆ๋‹ค.

์ผ์ฃผ์ผ์ด ์‚ด์ง ๋„˜๋Š” ์‹œ๊ฐ„๋™์•ˆ 4๋ช…์ด์„œ ํ•จ๊ป˜ ํ˜‘์—…ํ•˜์—ฌ UIํ”„๋กœ์ ํŠธ๋ฅผ ์™„์„ฑํ•˜๋Š” ๊ทธ ์ผ๋ จ์˜ ๋ชจ๋“  ์‹œ๊ฐ„๊ณผ ๊ณผ์ •์†์—์„œ ๋งค์šฐ ๋งŽ์€ ์‹œํ–‰์ฐฉ์˜ค์™€ ์˜๊ฒฌ์ถฉ๋Œ ๋“ฑ์ด ์žˆ์—ˆ์ง€๋งŒ Ai๋‚˜ ๊ตฌ๊ธ€๋ง์˜ ๋„์›€๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์ž์‹ ์˜ ๊ฒฝํ—˜์„ ํ† ๋Œ€๋กœ ์„œ๋กœ๊ฐ€ ์„œ๋กœ๋ฅผ ๋ณด์™„ํ•˜๋ฉฐ ์ด๋Œ์–ด ๋‚˜์•„๊ฐ”๊ธฐ์— ์ƒ๊ฐ๋ณด๋‹ค ํ”„๋กœ์ ํŠธ ์ผ์ •์ด ๋นก๋นกํ•˜์ง€๋„ ์•Š์•˜๊ณ  ์Šค๋ฌด์Šคํ•˜๊ฒŒ ์™„์„ฑ๊นŒ์ง€ ๋‚˜์•„๊ฐˆ ์ˆ˜ ์žˆ์—ˆ๋‹ค๊ณ  ์ƒ๊ฐ์ด ๋“ ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ๋‚˜ ๋˜ํ•œ ์ด๋ฒˆ UIํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๋ฉฐ ์ •๋ง ๋А๋‚€๊ฒƒ์ด ๋งŽ์•˜๋Š”๋ฐ react๋‚˜ next๊ฐ™์€ ํ”„๋ ˆ์ž„์›Œํฌ์— ๋„ˆ๋ฌด ์ต์ˆ™ํ•ด์ง„ ๋‚˜๋จธ์ง€ html๊ณผ css ๋“ฑ ํ”„๋ก ํŠธ์—”๋“œ์˜ ๊ธฐ์ดˆ๋ผ ํ•  ์ˆ˜ ์žˆ๋Š” ๋ถ€๋ถ„์„ ๊ฒŒ์„๋ฆฌํ•˜์—ฌ ๋ถ€์กฑํ–ˆ๋˜ ๋‚˜์˜ ๊ธฐ์ดˆ๊ฐ€ ๋„ˆ๋ฌด ์ฒด๊ฐ์ด ํ™• ๋˜์—ˆ์—ˆ๋‹ค...

ํ•˜์ง€๋งŒ ์ด๋ฒˆ ํ”„๋กœ์ ํŠธ๋ฅผํ•˜๋ฉฐ ๋ถ€์กฑํ•œ ๋ถ€๋ถ„์—์„  ๊ฐ•์‚ฌ๋‹˜๊ณผ ํŒ€์›๋ถ„๋“ค์—๊ฒŒ ํ”ผ๋“œ๋ฐฑ๋„ ๋ฐ›์œผ๋ฉด์„œ ์ •๋ง๋กœ ๊ฐ„๋งŒ์— ์ดˆ์‹ฌ์œผ๋กœ ๋Œ์•„๊ฐ€ ๋‹ค์‹œํ•œ๋ฒˆ html์˜ ๋งˆํฌ์—… ๋‹จ๊ณ„๋ถ€ํ„ฐ ์‹œ๋ฉ˜ํ‹ฑํ•œ ๊ตฌ์กฐ๋‚˜ ์ ‘๊ทผ์„ฑ ๊ด€๋ จ ๋ถ€๋ถ„๋ถ€ํ„ฐ ์•„์ฃผ์•„์ฃผ ๊ณ ๋ฏผํ•˜๋ฉด์„œ ๋˜ ๋‹ค์‹œ ์ƒ๊ฐํ•ด๋ณด๊ณ  ๊ตฌํ˜„ํ•ด๋ณด๋Š” ์‹œ๊ฐ„์ด ๋˜์–ด์„œ ์ •๋ง ์ข‹์•˜๋‹ค!

๋‚ด์ผ ์žˆ์„ ์ตœ์ข…๋ฐœํ‘œ๋„ ์ž˜ ๋งˆ๋ฌด๋ฆฌ ๋˜์—ˆ์œผ๋ฉด ์ข‹๊ฒ ๊ณ  ์งง์ง€๋งŒ์„œ๋„ ์ผ์ฃผ์ผ๊ฐ„ ํ•จ๊ป˜ ์ขŒ์ถฉ์šฐ๋Œ? ํ–ˆ์—ˆ๋˜ ํŒ€์›๋ถ„๋“ค๊ณผ ํ—ค์–ด์ง„๋‹ค๋Š” ์ ์€ ์ข€ ์•„์‰ฝ์ง€๋งŒ ๊ทธ๋ž˜๋„ ํ”„๋กœ์ ํŠธ๋ฅผ ๊น”๋”ํ•˜๊ฒŒ ์™„์„ฑํ•˜์˜€๊ธฐ์— ํ•ด์‚ฐํ•˜๋Š” ๊ฒƒ์ด๋‹ˆ๊นŒ.. ์•„๋ฌดํŠผ ๋‹ค์‹œํ•œ๋ฒˆ ํ•จ๊ป˜ํ•ด์ค€ ๋ชจ๋“  ํŒ€์›๋ถ„๋“ค๊ป˜ ๋„ˆ๋ฌด ๊ณ ๋งˆ์šด๊ฒƒ ๊ฐ™๋‹ค.

์กฐ์žฅ์› - ์ด๋ฒˆ ํ”„๋กœ์ ํŠธ์—์„œ ๋ฆฌ๋” ์—ญํ• ์„ ๋งก๊ฒŒ ๋œ ๊ฒƒ์€, ํ‰์†Œ ์•ž์žฅ์„œ์„œ ๋ฌด์–ธ๊ฐ€๋ฅผ ์ฑ…์ž„์ง€๋Š” ๋ฐ์— ์ต์ˆ™ํ•˜์ง€ ์•Š์•˜๋˜ ์ €์—๊ฒŒ ํฐ ๋ถ€๋‹ด์œผ๋กœ ๋‹ค๊ฐ€์™”์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์–ธ์  ๊ฐ€๋Š” ๊ผญ ๋งก๊ฒŒ ๋  ์—ญํ• ์ด๋ผ๊ณ  ์ƒ๊ฐํ–ˆ๊ณ , ์ด์™• ํ•˜๊ฒŒ ๋œ ์ด์ƒ ์ œ๋Œ€๋กœ ํ•ด๋ณด์ž๋Š” ๋งˆ์Œ๊ฐ€์ง์œผ๋กœ ํ”„๋กœ์ ํŠธ๊ฐ€ ์›ํ™œํžˆ ์ง„ํ–‰๋  ์ˆ˜ ์žˆ๋„๋ก ๋งŽ์€ ๋ถ€๋ถ„์— ์‹ ๊ฒฝ ์“ฐ๋ฉฐ ์ž„ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ฌด์—‡๋ณด๋‹ค๋„ ์ €์˜ ๋ถ€์กฑํ•œ ์ ์„ ์ดํ•ดํ•ด์ฃผ๊ณ  ์ ๊ทน์ ์œผ๋กœ ๋„์™€์ค€ ํ›Œ๋ฅญํ•œ ํŒ€์›๋“ค ๋•๋ถ„์— ํ”„๋กœ์ ํŠธ๋ฅผ ๋งค๋„๋Ÿฝ๊ฒŒ ๋งˆ๋ฌด๋ฆฌํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

์ด๋ฒˆ ํ”„๋กœ์ ํŠธ ๊ฒฝํ—˜์„ ํ†ตํ•ด Git๊ณผ GitHub๋ฅผ ํ™œ์šฉํ•œ ํ˜‘์—… ๋ฐฉ์‹์— ๋Œ€ํ•ด ์ตํž ์ˆ˜ ์žˆ์—ˆ๋˜ ๊ฒƒ๋„ ํฐ ์ˆ˜ํ™•์ด์—ˆ์ง€๋งŒ, ๊ทธ๋ณด๋‹ค ๋” ํฌ๊ฒŒ ๋А๊ปด์กŒ๋˜ ์ ์€ โ€˜์™„๋ฒฝํ•œ ํŒ€โ€™์„ ๋งŒ๋“œ๋Š” ๋ฐ ์žˆ์–ด ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๊ฒƒ์€ ๊ฐ์ž ๋งก์€ ์—ญํ• ์— ์ตœ์„ ์„ ๋‹คํ•˜๋Š” ๊ฒƒ์ด๋ผ๋Š” ์‚ฌ์‹ค์ด์—ˆ์Šต๋‹ˆ๋‹ค.

๋ถ€์กฑํ•œ ๋ฆฌ๋”๋ฅผ ๋ฏฟ๊ณ  ์ž˜ ๋”ฐ๋ผ์™€ ์ค€ ํŒ€์›๋“ค์—๊ฒŒ ๋‹ค์‹œ ํ•œ ๋ฒˆ ์ง„์‹ฌ์œผ๋กœ ๊ฐ์‚ฌ์˜ ๋ง์”€์„ ์ „ํ•ฉ๋‹ˆ๋‹ค.

์žฅํšจ์ • - HTML๊ณผ CSS๋ฅผ ์ฒ˜์Œ ๋ฐฐ์šด ๊ฒŒ ์—Š๊ทธ์ œ ๊ฐ™์€๋ฐ, ๋ฒŒ์จ UI ํ”„๋กœ์ ํŠธ์˜ ๋งˆ์ง€๋ง‰์„ ์ค€๋น„ํ•˜๊ณ  ์žˆ๋‹ค๋Š” ๊ฒŒ ๋ฏฟ๊ธฐ์ง€ ์•Š์„ ๋งŒํผ ์‹œ๊ฐ„์€ ๋น ๋ฅด๊ฒŒ ์ง€๋‚˜๊ฐ”์Šต๋‹ˆ๋‹ค.

์ˆ˜์—… ์‹œ๊ฐ„ ์‹ค์Šต๋„ ๊ฒจ์šฐ ๋”ฐ๋ผ๊ฐ€๋˜ ์ €์—๊ฒŒ ์ด๋ฒˆ ํ”„๋กœ์ ํŠธ๋Š” ์‚ฌ์‹ค ๋ถ€๋‹ด์œผ๋กœ ๋‹ค๊ฐ€์™”์Šต๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ ์ข‹์€ ํŒ€์›๋“ค์„ ๋งŒ๋‚˜, ๊ธฐ๋Šฅ์„ ํ•˜๋‚˜ํ•˜๋‚˜ ๊ตฌํ˜„ํ•ด๊ฐ€๋ฉฐ ์ฐจ๊ทผ์ฐจ๊ทผ ๋‹จ๊ณ„๋ฅผ ๋ฐŸ๋‹ค ๋ณด๋‹ˆ

์–ด๋А์ƒˆ ํŒ€์˜ ์ผ์›์œผ๋กœ์„œ ๋งก์€ ๋ฐ”๋ฅผ ๋‹คํ•˜๊ณ , ๋ฐœํ‘œ๊นŒ์ง€ ์ฑ…์ž„์ง€๋Š” ์ œ ๋ชจ์Šต์„ ๋ฐœ๊ฒฌํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

์‚ฌ์‹ค ์ €๋Š” ๋ฐœํ‘œ๋ผ๋Š” ๊ฑธ ์„ธ์ƒ์—์„œ ์ œ์ผ ์–ด๋ ค์›Œํ•˜๋Š” ์‚ฌ๋žŒ์ด์—ˆ๊ณ ,

ํŠนํžˆ ์ž˜ ์•Œ์ง€ ๋ชปํ•˜๋Š” ๋ถ„์•ผ๋ฅผ ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค ์•ž์—์„œ ์„ค๋ช…ํ•ด์•ผ ํ•œ๋‹ค๋Š” ๊ฑด ํฐ ๋„์ „์ด์—ˆ์Šต๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ ์–ธ์  ๊ฐ€๋Š” ๊ผญ ๋„˜์–ด์•ผ ํ•  ์‚ฐ์ด๋ผ๊ณ  ์ƒ๊ฐํ–ˆ๊ณ ,

๋ฌด์—‡๋ณด๋‹ค ํŒ€์›๋“ค์˜ ์‘์›๊ณผ ๋ฏฟ์Œ์ด ์žˆ์—ˆ๊ธฐ์— ์ด ๊ณผ์ •์„ ๋ฌด์‚ฌํžˆ ํ—ค์ณ์˜ฌ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๋ฌผ๋ก  ์•„์ง ๋งŽ์ด ๋ถ€์กฑํ•˜์ง€๋งŒ, ์ด๋ฒˆ ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด ํ˜‘์—…์˜ ๊ณผ์ •์„ ์ง์ ‘ ๊ฒฝํ—˜ํ•˜๊ณ  ์ž‘์€ ์‹œํ–‰์ฐฉ์˜ค ์†์—์„œ ์„ฑ์žฅํ•˜๋Š” ์ฆ๊ฑฐ์›€์„ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์—ˆ๋˜ ์†Œ์ค‘ํ•œ ์‹œ๊ฐ„์ด์—ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

์•ž์œผ๋กœ๋„ ์ด๋Ÿฐ ๊ฒฝํ—˜๋“ค์„ ๋ฐœํŒ ์‚ผ์•„, ํŒ€๊ณผ ํ•จ๊ป˜ ์„ฑ์žฅํ•  ์ˆ˜ ์žˆ๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ ๋‚˜์•„๊ฐ€๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

์ „์ง€์—ฐ - ๋‚˜๋Š” ๋žœ๋”ฉ ์ปดํฌ๋„ŒํŠธ, ํ”„๋กœํ•„ ์ปดํฌ๋„ŒํŠธ, ๋žœ๋”ฉ ํŽ˜์ด์ง€๋ฅผ ๋งก์•˜๋Š”๋ฐ, ์ด๋ฒˆ ํ”„๋กœ์ ํŠธ๋Š” ์ธ์ƒ ์ฒซ ์›น ํ”„๋กœ์ ํŠธ์˜€๋‹ค. (๋ฐฐํฌ๋„ ์™„์ „ ์ฒ˜์Œ..!) ๊ทธ๋ž˜์„œ 1์ธ๋ถ„๋„ ๋ชป ํ•ด๋‚ด๊ณ  ๋ฏผํ๋ฅผ ๋ผ์น ๊นŒ ๋ด ๋„ˆ๋ฌด ๊ฑฑ์ •๋๋‹ค. ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋‹ค ๋ณด๋‹ˆ ์ƒ๊ธด ๋ฌธ์ œ๋ฅผ ์–ด๋–ป๊ฒŒ ํ•ด๊ฒฐํ•ด์•ผ ํ•˜๋Š”์ง€ ๋ฐฉ๋ฒ•์„ ์ฐพ์•„๋ดค์„ ๋•Œ, ๋ฐฐ์šด ๋‚ด์šฉ๋“ค์ด ๋Œ€๋ถ€๋ถ„์ด์—ˆ๊ณ , ๊ทธ๊ฒƒ๋“ค์„ ๋‚ด๊ฐ€ ๋‹ค ์ฒด๋“ํ•˜์ง€ ๋ชปํ–ˆ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๊ณ„์† ๋ถ€๋”ชํ˜€๋ณด๋ฉด์„œ ์™œ ์ด๋Ÿฐ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ธฐ๋Š”์ง€ ์ด๋Ÿด ๋• ์–ด๋–ป๊ฒŒ ์ ์šฉํ•˜๋Š” ๊ฒŒ ์ข‹์€์ง€๋ฅผ ๋‹ค์‹œ ๋จธ๋ฆฟ์†์— ํ•˜๋‚˜์”ฉ ์ •๋ฆฌํ•ด ๋‚˜๊ฐ€๋ฉฐ ๊ณ„์† ๋ถ€๋”ชํ˜€๋ณด๋ฉด์„œ ๋ฌธ์ œ ํ•ด๊ฒฐ ๋Šฅ๋ ฅ์„ ํ‚ค์šธ ์ˆ˜ ์žˆ์—ˆ๋‹ค. - ๊ทธ๋ฆฌ๊ณ  PR ์ƒ์„ฑ๋ถ€ํ„ฐ ์ฝ”๋“œ ๋ฆฌ๋ทฐ, ์ˆ˜์ •, approve, ๋จธ์ง€๊นŒ์ง€ ์ผ๋ จ์˜ ๊ณผ์ •์„ ๊ฑฐ์น˜๋ฉด์„œ, ๋‚ด ์ฝ”๋“œ์— ๋Œ€ํ•œ ์ฃผ์„๊ณผ ์„ค๋ช…์ด ์–ผ๋งˆ๋‚˜ ์ค‘์š”ํ•œ์ง€ ์•Œ๊ฒŒ ๋๋‹ค. ํŒ€์›๋“ค์ด ๋‚ด ์ฝ”๋“œ๋ฅผ ์ดํ•ดํ•˜๊ณ , ๋ฌธ์ œ์ ์„ ํŒŒ์•…ํ•˜๊ณ , ๊ฐœ์„  ๋ฐฉํ–ฅ์„ ์ œ์‹œํ•˜๋ ค๋ฉด ์ƒ์„ธํ•œ ์„ค๋ช…์ด ํ•„์ˆ˜๋ผ๋Š” ๊ฑธ ๋А๋ผ๊ฒŒ ๋˜์—ˆ๊ณ , ์•ž์œผ๋กœ๋Š” ์ฝ”๋“œ ์ž‘์„ฑ ์‹œ ์ฃผ์„์„ ๊ผผ๊ผผํ•˜๊ฒŒ ๋‹ฌ๊ณ , ํŒ€์›๋“ค์ด ์‰ฝ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก ์„ค๋ช…ํ•˜๋Š” ์Šต๊ด€์„ ๋“ค์—ฌ์•ผ๊ฒ ๋‹ค๊ณ  ๋‹ค์งํ–ˆ๋‹ค. - ๊ทธ๋ฆฌ๊ณ  ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ ๊ณ ๋ คํ•ด์•ผ ํ•  ์‚ฌํ•ญ์ด ๋„ˆ๋ฌด ๋งŽ์•„์„œ ํ—ท๊ฐˆ๋ฆฌ๋Š” ์ผ๋„ ๋งŽ์•˜์ง€๋งŒ, ํŒ€์›๋“ค๊ณผ ๋Š์ž„์—†์ด ์†Œํ†ตํ•˜๋ฉด์„œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ณ  ์กฐ์œจํ•ด ๋‚˜๊ฐ€๋‹ˆ ์ ์  ๋” ๋‚˜์•„์ง€๋Š” ๊ฑธ ๋А๊ผˆ๋‹ค. (๋„ˆ๋ฌด ์ข‹์€ ํŒ€์›๋“ค๊ณผ ํ•จ๊ป˜์˜€๊ธฐ์— ์˜์ฐจ์˜์ฐจํ•ด์„œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•ด ๋‚˜๊ฐ€๋ฉฐ ํ•œ์ธต ๋” ์„ฑ์žฅํ•œ ๊ฒƒ ๊ฐ™๋‹ค!) - ์ด๋ฒˆ ๊ฒฝํ—˜์„ ํ†ตํ•ด ํ˜‘์—…์˜ ์ค‘์š”์„ฑ๊ณผ ๋ฌธ์ œ ํ•ด๊ฒฐ ๋Šฅ๋ ฅ์„ ํ‚ค์šธ ์ˆ˜ ์žˆ์—ˆ๊ณ , ์•ž์œผ๋กœ ๋” ์„ฑ์žฅํ•˜๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ธฐ ์œ„ํ•ด ๊ณ„์†ํ•ด์„œ ๊พธ์ค€ํžˆ ๋…ธ๋ ฅํ•ด์•ผ๊ฒ ๋‹ค!!!!
โš ๏ธ **GitHub.com Fallback** โš ๏ธ