[Project] Team Project 4์ผ์ฐจ

์šฐ๊ธฐยท2023๋…„ 5์›” 12์ผ
0
post-thumbnail

๐Ÿ“’ ์˜ค๋Š˜์˜ TIL

*๏ธโƒฃ 1์ฐจ ์œ„๊ธฐ

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

*๏ธโƒฃ ํ•ด๊ฒฐ๋ฐฉ์•ˆ

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

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

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

1๏ธโƒฃ ํ™”๋ฉด ์ •์˜์„œ

  • ์–ด๋–ป๊ฒŒ ์ž‘์„ฑํ•ด์•ผ ํ• ์ง€ ๋ชจ๋ฅด๊ฒ ์–ด์„œ, ์š”๊ตฌ์‚ฌํ•ญ ์ •์˜์„œ๋ฅผ ๋ณด๋ฉฐ ํ•„์š”ํ•œ ๊ธฐ๋Šฅ๋“ค์„ ํ•˜๋‚˜์”ฉ ์ ์–ด๋ณด์•˜๋‹ค. ์•„๋งˆ ๋ฐฑ์—”๋“œ์—์„œ ์ž‘์„ฑ ์ค‘์ธ API ๋ช…์„ธ์„œ๋ฅผ ๋ฐ›์œผ๋ฉด ๋‹ค์‹œ ์ •๋ฆฌํ•ด์•ผ ํ•  ๊ฒƒ ๊ฐ™๋‹ค.

2๏ธโƒฃ User Flow

  • User Flow๋ฅผ ์ž‘์„ฑํ•˜์—ฌ ์‚ฌ์šฉ์ž๊ฐ€ ๊ฒฝํ—˜ํ•˜๋Š” ๋ชจ๋“  ๋‹จ๊ณ„์™€ ๊ฒฝ๋กœ๋ฅผ ํ‘œ์‹œํ•˜๊ณ , ์ˆœ์„œ๋Œ€๋กœ ๋”ฐ๋ผ๊ฐ€๋ณด์•˜๋”๋‹ˆ ๊ธฐ์กด์— ๋ฐœ๊ฒฌํ•˜์ง€ ๋ชปํ–ˆ๋˜ ๋ฌธ์ œ์ ๋“ค๊ณผ ์‚ฌ์šฉ์ž ์นœํ™”์ ์ด์ง€ ์•Š์€ ๋ถ€๋ถ„๋“ค์„ ๋ฐœ๊ฒฌํ•˜์—ฌ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.

3๏ธโƒฃ Figma

  • ํ”„๋ก ํŠธ์—”๋“œ ํŒ€์›๋“ค๊ณผ ์—…๋ฌด๋ฅผ ๋ถ„๋ฐฐํ•˜๊ณ , ์ œ๊ฐ€ ๋งก์€ ์—…๋ฌด๋Š” PC์™€ ๋ชจ๋ฐ”์ผ ๋ทฐ ํ”ฝ์Šค๋งˆ๋‹ค ๋”ฐ๋กœ ์ž‘์—…ํ–ˆ๋‹ค.

๐Ÿง‘โ€๐Ÿ’ป ๊ถ๊ธˆํ•œ ์ 

๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ

  • ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ์— ๋Œ€ํ•œ ๊ฐ„๋žตํ•œ ์„ค๋ช… :

๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ(React Native)๋Š” ํŽ˜์ด์Šค๋ถ์—์„œ ๊ฐœ๋ฐœํ•œ ์˜คํ”ˆ์†Œ์Šค ๋ชจ๋ฐ”์ผ ์•ฑ ํ”„๋ ˆ์ž„์›Œํฌ๋‹ค. ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ iOS์™€ ์•ˆ๋“œ๋กœ์ด๋“œ ํ”Œ๋žซํผ ๋ชจ๋‘์—์„œ ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ์„ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ค€๋‹ค.

๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ๋Š” ๋ฆฌ์•กํŠธ(React)๋ผ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜๊ณ  ์žˆ๋‹ค. ๋ฆฌ์•กํŠธ๋Š” ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜์˜ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์„ ์œ„ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ์„œ ์ธ๊ธฐ๋ฅผ ๋Œ๊ณ  ์žˆ๋‹ค. ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ๋Š” ๋ฆฌ์•กํŠธ์˜ ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜ ์•„ํ‚คํ…์ฒ˜๋ฅผ ๋ชจ๋ฐ”์ผ ์•ฑ ๊ฐœ๋ฐœ์— ์ ์šฉํ•˜์—ฌ, ๊ฐœ๋ฐœ์ž๋“ค์ด ๋น ๋ฅด๊ฒŒ ๋ชจ๋ฐ”์ผ ์•ฑ์„ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค€๋‹ค.

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

  • ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ๋ฅผ ์‚ฌ์šฉํ•œ ๋ชจ๋ฐ”์ผ ๋ฐฐํฌ ๊ณผ์ • :

๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ์—์„œ ์•ฑ์„ ๋ฐฐํฌํ•˜๋Š” ๊ณผ์ •์€ ํฌ๊ฒŒ ๋‘ ๋‹จ๊ณ„๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ๋‹ค.
์ฒซ ๋ฒˆ์งธ ๋‹จ๊ณ„๋Š” Expo๋ฅผ ํ†ตํ•ด iOS์™€ Android ๋ชจ๋‘์— ๋Œ€ํ•œ ์•ฑ ํŒจํ‚ค์ง€๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๊ฒƒ์ด๋ฉฐ,
๋‘ ๋ฒˆ์งธ ๋‹จ๊ณ„๋Š” ์ƒ์„ฑ๋œ ์•ฑ ํŒจํ‚ค์ง€๋ฅผ ๊ฐ๊ฐ์˜ ์•ฑ ์Šคํ† ์–ด์— ๋“ฑ๋กํ•˜์—ฌ ๋ฐฐํฌํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

Expo๋Š” ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ์—์„œ ์•ฑ์„ ๊ฐœ๋ฐœํ•˜๊ณ  ๋ฐฐํฌํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋˜๋Š” ํˆด์ด๋‹ค. Expo CLI๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์•ฑ์„ ๋นŒ๋“œํ•˜๊ณ , Expo ์„œ๋น„์Šค๋ฅผ ํ†ตํ•ด ๊ฐ„ํŽธํ•˜๊ฒŒ iOS์™€ Android ์•ฑ ํŒจํ‚ค์ง€๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.

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

โœ ์•Œ๊ฒŒ๋œ ์ 

  • ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ
  • User Flow

๐Ÿ’ซ ๋Š๋‚€์ 

  • ์œ„๊ธฐ๋Š” ๊ธฐํšŒ๋‹ค..
profile
๊ฐœ๋ฐœ ๋ธ”๋กœ๊ทธ

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