๐Ÿ˜ƒ ์ด์ง ๋„์ „๊ธฐ #1

Ddorongยท2023๋…„ 11์›” 3์ผ
0

์Šคํƒ€ํŠธ์—…

๋ชฉ๋ก ๋ณด๊ธฐ
10/11

์•ˆ๋…•ํ•˜์„ธ์š”.
์ด์ง ์ค€๋น„ ์ค‘์ธ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ๋˜๋กฑ์ž…๋‹ˆ๋‹ค.
10์›” 23์ผ๋ถ€ํ„ฐ 11์›” 02์ผ๊นŒ์ง€ 2์ฃผ ์ •๋„ ์ง„ํ–‰ ๊ณผ์ •๋“ค์„ ๊ณต์œ ํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.

1. ์ด๋ ฅ์„œ๋‚˜ ํฌํŠธํด๋ฆฌ์˜ค ์ •๋ฆฌํ•˜๊ธฐ

'๊ฐ€๋…์„ฑ'๊ณผ '๊ผญ ํ•„์š”ํ•œ ์ •๋ณด'๋งŒ์„ ๋‹ด์ž!

๊ธฐ์กด์— ์‚ฌ์šฉ์ค‘์ด๋˜ ๋…ธ์…˜ ํŽ˜์ด์ง€์—์„œ ํฌํŠธํด๋ฆฌ์˜ค ์—…๋ฐ์ดํŠธ ์ž‘์—…์„ ์ง„ํ–‰ํ–ˆ๋‹ค.
์ถ”๊ฐ€๋กœ ๋งํฌ๋“œ์ธ๋งŒ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์—ˆ๋Š”๋ฐ ์ธํ”„๋Ÿฐ(์ธํ”„๋žฉ)์—์„œ ์ถœ์‹œ๋œ ๋ž ๋ฆฟ ์„œ๋น„์Šค๋ฅผ ์ถ”๊ฐ€๋กœ ์ด์šฉํ–ˆ๋‹ค.

์ด์šฉ ์ค‘์ธ ์„œ๋น„์Šค

๋ž ๋ฆฟ

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

๊ฐœ์ธ์ ์œผ๋กœ ๋ž ๋ฆฟ์„ ์‚ฌ์šฉํ•˜๋ฉด์„œ ๋Š๋‚€ ์ 

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

๋งํฌ๋“œ์ธ

๋งํฌ๋“œ์ธ์€ '์ปค๋ฎค๋‹ˆํ‹ฐ'์™€ '๋„คํŠธ์›Œํ‚น'์— ์žฅ์ ์ด ์žˆ๋‹ค.

๊ฐœ๋ฐœ์ž๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด ์ด์šฉํ•˜๋Š”๊ฑฐ ๊ฐ™๋‹ค.
๋ฉ”์‹œ์ง€๋ฅผ ํ†ตํ•ด ์ œ์•ˆ์„ ๋ฐ›๊ธฐ๋„ ํ–ˆ๋‹ค.

์œ ์ €๋“ค์ด ์˜ฌ๋ฆฌ๋Š” ํ”ผ๋“œ ์ •๋ณด๊ฐ€ ์ •๋ง ๋งŽ์•„์„œ ๋งค์ผ ๋ณด๊ณ  ์žˆ๋‹ค.
๋‹ค์–‘ํ•œ ์‚ฌ๋žŒ๋“ค์ด ํšŒ์‚ฌ์—์„œ ๊ฒช์€ ๊ฒฝํ—˜๋“ค์ด๋‚˜ ๊ธฐ์ˆ ์ ์ธ ์ •๋ณด๋“ค์„ ๊ณต์œ ํ•œ๋‹ค.

2. ํšŒ์‚ฌ ๋ฆฌ์ŠคํŠธ์—… ํ•˜๊ธฐ

๋‚˜๋งŒ์˜ 'ํšŒ์‚ฌ๋ฅผ ์„ ์ •ํ•˜๋Š” ๊ธฐ์ค€'

  • BM์ด ํ™•์‹คํ•˜๊ณ , ๋งค์ถœ ์žˆ๋Š” ํšŒ์‚ฌ
  • ํ”„๋ฆฌ A ~ ์‹œ๋ฆฌ์ฆˆ A ํšŒ์‚ฌ
  • ์„ ํ˜ธํ•˜๋Š” ๋„๋ฉ”์ธ (์ปค๋จธ์Šค, ๊ฒ€์ƒ‰, ์ค‘๊ฐœ ๋“ฑ)

์œ„์˜ 3๊ฐ€์ง€๋ฅผ ์ค‘์š”ํ•˜๊ฒŒ ์ƒ๊ฐํ–ˆ๋‹ค.

ํŒจ์…˜๊ณผ ๊ฒ€์ƒ‰ ๊ด€๋ จ ๋„๋ฉ”์ธ์€ ๊ธฐ์กด์— ๊ด€์‹ฌ์ด ๋งŽ์•˜๋‹ค.
์˜ฌํ•ด ์—ฌํ–‰์„ ๋งŽ์ด ๋‹ค๋‹ˆ๋ฉด์„œ ์—ฌํ–‰ ์นดํ…Œ๊ณ ๋ฆฌ์— ๊ด€์‹ฌ์ด ์ƒ๊ฒผ๊ณ , ํ•ด๋‹น ๋„๋ฉ”์ธ์—์„œ๋„ ์ผํ•ด๋ณด๊ณ  ์‹ถ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.

ํšŒ์‚ฌ ๋ฆฌ์ŠคํŠธ์—…์€ ๊ฐœ์ธ ๋…ธ์…˜์— ์ •๋ฆฌํ–ˆ๋‹ค.

  • 1์ˆœ์œ„ : ํ”„๋ฆฌA ~ ์‹œ๋ฆฌ์ฆˆA ์ธ ํšŒ์‚ฌ
    ๊ทœ๋ชจ๊ฐ€ ์‹œ๋ฆฌ์ฆˆ A ์ดํ•˜์ธ ์Šคํƒ€ํŠธ์—…์„ ๋Œ€๋ถ€๋ถ„ ๋ฆฌ์ŠคํŠธ์—…ํ–ˆ๋‹ค.
    ์•„์ง๊นŒ์ง„ ์ดˆ๊ธฐ ์Šคํƒ€ํŠธ์—…์—์„œ ๋™๋ฃŒ๋“ค๊ณผ ํ•จ๊ป˜ ํˆฌ์ž ์œ ์น˜๋ฅผ ํ•ด๋ณด๊ณ  ์‹ถ๋‹ค.
    (+ ์ถ”๊ฐ€๋กœ ๊ทœ๋ชจ์™€ ์ƒ๊ด€์—†์ด ๊ผญ ๊ฐ€๊ณ  ์‹ถ์€ ํšŒ์‚ฌ๋“ค์„ 1-2๊ณณ ์ถ”๊ฐ€ํ–ˆ๋‹ค.)
  • 2์ˆœ์œ„ : ์‹œ๋ฆฌ์ฆˆ B ์ด์ƒ
  • 3์ˆœ์œ„ : ๊ด€์‹ฌ์žˆ๋Š” ํšŒ์‚ฌ
    ํšŒ์‚ฌ์˜ ๋ฌธํ™”๋‚˜ ์ •๋ณด๋“ค์„ ์ ‘ํ•˜๋ฉด์„œ ๊ด€์‹ฌ๊ฐ€์ง„ ํšŒ์‚ฌ

3. ์ฃผ 1~2ํšŒ ํšŒ์‚ฌ ์ง€์›ํ•˜๊ธฐ

์ฑ„์šฉ ๊ณต๊ณ ๋Š” ์›ํ‹ฐ๋“œ, ๋ž ๋ฆฟ, ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค, ๋กœ์ผ“ํŽ€์น˜, ์ ํ• ๋“ฑ์„ ์ด์šฉํ–ˆ๋‹ค.

  • ์›ํ‹ฐ๋“œ Best!
  • ๋ž ๋ฆฟ, ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค Good!

2์ฃผ ๋™์•ˆ ์ด 4๊ณณ์— ์ง€์›ํ–ˆ๋‹ค.

  • ์„œ๋ฅ˜ ์ „ํ˜• : 2 (ํƒˆ๋ฝ 1, ์ง„ํ–‰์ค‘ 1)
  • ๊ณผ์ œ ์ „ํ˜• : 1 (ํฌ๊ธฐ - ์ œ์•ˆ ๋ฐ›์€ ํšŒ์‚ฌ)
  • ์ฝ”๋”ฉ ํ…Œ์ŠคํŠธ : 1 (์ง„ํ–‰ ์ค‘)

์„œ๋ฅ˜ ์ „ํ˜•์— ๋Œ€ํ•ด ๊ณต์œ ํ•˜์ž๋ฉด,

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

๊ณผ์ œ ์ „ํ˜•์— ๋Œ€ํ•ด ๊ณต์œ ํ•˜์ž๋ฉด,

  • React + Typescript ๊ธฐ๋ฐ˜์˜ ๊ธฐ๋Šฅ ๊ตฌํ˜„ (+ Jest)
  • ๊ณผ์ œ ์ „ํ˜•์€ ๋Œ€๋ถ€๋ถ„ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ ์ž‘์„ฑ์„ ๊ถŒ์žฅํ•œ๋‹ค.
  • ๊ถŒ์žฅ ์‚ฌํ•ญ๋“ค์€ ๊ณ ๋ คํ•ด์„œ ๋‹ค ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•œ๋‹ค.

์ œ์•ˆ๋ฐ›์€ ํšŒ์‚ฌ์—์„œ ๊ณผ์ œ ์ „ํ˜•์„ ์ง„ํ–‰ํ–ˆ์—ˆ๋Š”๋ฐ ๊ฐ‘์ž‘์Šค๋Ÿฝ๊ฒŒ ์ƒ๊ธด ์ด์‚ฌ ๋ฌธ์ œ์™€ ํƒ€ ํšŒ์‚ฌ ์ „ํ˜•๊ณผ ๊ฒน์ณ ์ œ๋Œ€๋กœ ์ง„ํ–‰ํ•˜์ง€ ๋ชปํ•ด ํฌ๊ธฐํ–ˆ๋‹ค.

๋์œผ๋กœ,

2์ฃผ ๋™์•ˆ ํฌํŠธํด๋ฆฌ์˜ค๋‚˜ ์ด๋ ฅ์„œ๋ฅผ ๋ณด์™„ํ•˜๋Š”๋ฐ ํฌ์ปค์Šค๋ฅผ ๋’€๋‹ค.
๋ณด์™„ํ•˜๋ฉด์„œ ๋งˆ๊ฐ์ผ์— ๊ฐ€๊นŒ์šด ํšŒ์‚ฌ๋“ค์„ ์šฐ์„  ์ง€์›ํ–ˆ๋‹ค.

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

profile
Frontend Engineer

0๊ฐœ์˜ ๋Œ“๊ธ€