[PBB(2)] ์•ฑ๐Ÿ“ฑ ๋งŒ๋“œ๋Š”๋ฐ ์™œ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ฅผ ๋ฝ‘์„๊นŒ? | Web โžก๏ธ Mobile App ์ „ํ™˜ํ•˜๊ธฐ

Quartz ์ฟผ์ธ ยท2022๋…„ 10์›” 4์ผ
8

Projects | Code what I love

๋ชฉ๋ก ๋ณด๊ธฐ
4/5
post-thumbnail

(1) ์šฐ๋ฆฌ ํ”„๋กœ์ ํŠธ๋ฅผ ์•ฑ์œผ๋กœ ๋ฐ”๊ฟ”์•ผ ํ•  ๊ฒƒ ๊ฐ™์€๋ฐ?

์ฒญ์ฒœ๋ฒฝ๋ ฅโ›ˆ๊ฐ™์€ ํŒ€์›์˜ ๋ง์ด์—ˆ๋‹ค. ์–ด๋Š ์ •๋„ ๋‚˜๋„ ๋ชจ๋ฐ”์ผ ์•ฑ์˜ ํ•„์š”์„ฑ์„ ๋Š๋ผ๊ณ  ์žˆ์—ˆ์ง€๋งŒ ๋” ์ด์ƒ ์›น ํ”„๋กœ์ ํŠธ์˜ ์ง„ํ–‰์ด ์˜๋ฏธ๊ฐ€ ์—†์„ ๊ฒƒ ๊ฐ™๋‹ค๋Š” ๊ฒฐ๋ก ์ด์—ˆ๋‹ค. ์ด ๋ฐฐ๊ฒฝ์—๋Š” ์•„๋ž˜์™€ ๊ฐ™์€ 2 ๊ฐ€์ง€ ์ด์œ ๊ฐ€ ์žˆ์—ˆ๋‹ค.

  1. ๊ธฐ์กด์˜ ์ฃผ์ง“์ˆ˜ ๊ธฐ์ˆ ์„ ๋ถ„๋ฅ˜ํ•˜๋Š” ์„œ๋น„์Šค๋Š” ๊ธฐ์ˆ ๋งˆ๋‹ค ๋งŽ์€ ์ผ๋Ÿฌ์ŠคํŠธ๋ฅผ ํ•„์š”๋กœ ํ•˜๋ฉฐ, ๊ฐ ๊ธฐ์ˆ ์„ ๋‹จ ํ•˜๋‚˜์˜ ์ผ๋Ÿฌ์ŠคํŠธ๋กœ ํ‘œํ˜„ํ•˜๊ธฐ์—๋Š” ๋งŽ์€ ์ฃผ๊ด€์ด ๋“ค์–ด๊ฐ„๋‹ค.
  2. ์ฃผ์ง“์ˆ˜ ์ž…๋ฌธ์ž์ธ ๊ธฐํš์ž๋“ค์ด ์ฃผ์ง“์ˆ˜ ์ดˆ๊ธ‰์ž๋ถ€ํ„ฐ ์ƒ๊ธ‰์ž๊นŒ์ง€ ์•„์šฐ๋ฅด๋Š” ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค๊ธฐ์—๋Š” ํ•œ๊ณ„๊ฐ€ ์žˆ๋‹ค.

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

๋น„๋ก ์ง€๊ธˆ์ด ๋‚ด๊ฐ€ ํ•ด๋ณด๊ณ  ์‹ถ์€ ๊ฒƒ๋“ค์„ ์‹คํ˜„ํ•˜๋Š” ๊ธฐ๊ฐ„์ด๋ผ ํ•˜๋”๋ผ๋„ "ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ์•ฑ์„ ๋งŒ๋“œ๋Š” ๊ฒฝํ—˜์ด ๊ณผ์—ฐ ํ•„์š”ํ•  ๊ฒƒ์ธ๊ฐ€?" ๋ผ๋Š” ์˜๋ฌธ์ ์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์ด ๊ธ€์„ ์ž‘์„ฑํ•˜์˜€๊ณ ,
๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‚˜์˜ ์ฒซ ์•ฑ ๊ฐœ๋ฐœ์„ ํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ•œ ๊ณผ์ •์„ ์•ž์œผ๋กœ ์„ค๋ช…ํ•ด๋ณด๋ ค ํ•œ๋‹ค.

(2) ์•ฑ์„ ๋งŒ๋“œ๋Š” ๊ธฐ์—…์—์„œ ์™œ ์›น ๊ฐœ๋ฐœ์ž๋ฅผ ๋ฝ‘๋Š”๊ฑธ๊นŒ?

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

๋ชจ๋ฐ”์ผ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•˜๋Š” ๋ฐฉ๋ฒ•


์•ฑ ๊ฐœ๋ฐœ์€ ํฌ๊ฒŒ 3 ๊ฐ€์ง€๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ์œผ๋ฉฐ ๊ฐ๊ฐ์— ๋Œ€ํ•œ ๊ฐ„๋‹จํ•œ ์„ค๋ช…์€ ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

1. Native App

๊ฐ๊ฐ์˜ ์šด์˜์ฒด์ œ์—์„œ ๊ฐ๊ฐ ๋‹ค๋ฅธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋กœ ๊ฐœ๋ฐœํ•˜์—ฌ ์™ธ์ ์ธ ์ง€์›์—†์ด OS์—์„œ ๊ทธ๋Œ€๋กœ ์‹คํ–‰๋จ

  • ์•ˆ๋“œ๋กœ์ด๋“œ: ์•ˆ๋“œ๋กœ์ด๋“œ ์ŠคํŠœ๋””์˜ค ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ Java, Kotlin ์–ธ์–ด ์‚ฌ์šฉ
  • iOS: MacOS Xcode ๊ฐœ๋ฐœํ™˜๊ฒฝ์—์„œ Object-C, Swift ์–ธ์–ด ์‚ฌ์šฉ

๋ชจ๋ฐ”์ผ ์•ฑ์˜ Look and Feel์„ ์ž˜ ์‚ด๋ฆด ์ˆ˜ ์žˆ์œผ๋‚˜, OS๋ณ„ ์ผ์˜ ์ค‘๋ณต์„ฑ์ด๋ผ๋Š” ๋‹จ์ ์ด ์กด์žฌํ•จ

2. Hybrid App(Web View)

WebView UI component๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์›น ๊ธฐ์ˆ ์„ ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Œ
์—ฌ์ „ํžˆ ๋„ค์ดํ‹ฐ๋ธŒ ์ง€์‹์ด ํ•„์š”ํ•˜๊ณ  ์›น๋ทฐ์—์„œ ๋™์ž‘ํ•˜๋ฏ€๋กœ ์„ฑ๋Šฅ์ด ๋Š๋ฆฌ๊ณ  ๋„ค์ดํ‹ฐ๋ธŒ API๋ฅผ ๋ชจ๋‘ ํ™œ์šฉํ•  ์ˆ˜ ์—†๋‹ค๋Š” ๋‹จ์ ์ด ์žˆ์Œ

3. Cross Platform App

ํ•˜๋‚˜์˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋กœ ๋‘ ์šด์˜์ฒด์ œ์—์„œ ๋™์ž‘ํ•˜๋Š” ์•ฑ์„ ๋นŒ๋“œ
ex) React Native(JS), Flutter(Dart)

  • React Native: React์™€ ๋™์ผํ•˜๊ฒŒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐœ๋ฐœ
    - React in web: Virtual DOM์„ ์ด์šฉํ•˜์—ฌ ๋ธŒ๋ผ์šฐ์ € DOM์„ ์—…๋ฐ์ดํŠธ
    - React Native in mobile: Mobile API๋ฅผ ์ด์šฉํ•ด์„œ ๋ชจ๋ฐ”์ผ UI๋ฅผ ์—…๋ฐ์ดํŠธ

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

๊ตญ๋‚ด ๊ธฐ์—…๋“ค์˜ ๋ชจ๋ฐ”์ผ ์•ฑ ๊ฐœ๋ฐœ

์‹ค์ œ ๊ธฐ์—…์—์„œ๋Š” 3 ๊ฐ€์ง€ ์ค‘ ํ•˜๋‚˜๋ฅผ ์ฑ„ํƒํ•˜๊ธฐ๋ณด๋‹ค๋Š” ํ˜ผ์šฉํ•˜์—ฌ ์„œ๋น„์Šค๋งˆ๋‹ค ๋” ๋‚˜์€ ๋ฐฉ์‹์œผ๋กœ ๊ตฌํ˜„ํ•˜๊ณ  ์žˆ๋‹ค๊ณ  ํ•œ๋‹ค.

  • ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ + ํ•˜์ด๋ธŒ๋ฆฌ๋“œ ์•ฑ(์›น๋ทฐ): ๋‹น๊ทผ๋งˆ์ผ“, ์šฐ์•„ํ•œ ํ˜•์ œ๋“ค, ์นด์นด์˜คํŽ˜์ด
  • ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ + ํฌ๋กœ์Šค ํ”Œ๋žซํผ: ํ† ์Šค, ์ง๋ฐฉ, ์šฐ์•„ํ•œ ํ˜•์ œ๋“ค

๋‚˜๋Š” ์–ด๋–ค ๋ฐฉ์‹์˜ ์•ฑ ๊ฐœ๋ฐœ์„ ์„ ์ •ํ•ด์•ผ ํ• ๊นŒ?

์œ„์˜ ๋‚ด์šฉ๋“ค์„ ํ™•์ธํ•˜๊ณ  ๋‹ค์‹œ ์ฑ„์šฉ ๊ณต๊ณ ๋“ค์„ ์‚ดํŽด๋ณด๋‹ˆ ์•ฑ ๊ฐœ๋ฐœ๋„ ๋‚˜์˜ ์˜์—ญ์— ๋“ค์–ด์˜ฌ ์ˆ˜ ์žˆ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด ์–ด๋–ค ๋ฐฉ๋ฒ•์ด ์ง€๊ธˆ ๋‚ด๊ฐ€ ๊ณต๋ถ€ํ•˜๊ณ  ์žˆ๋Š” ๋‚ด์šฉ๋“ค์„ ์ตœ๋Œ€ํ•œ ์ˆ˜์šฉํ•  ์ˆ˜ ์žˆ์„๊นŒ? ๋‚˜๋Š” ์•„๋ž˜์™€ ๊ฐ™์€ ์ด์œ ๋กœ Cross Platform App ์ค‘ React Native๋ฅผ ์‚ฌ์šฉํ•œ ์•ฑ ๊ฐœ๋ฐœ์„ ์„ ์ •ํ•˜์˜€๋‹ค.

React Native ์„ ์ • ์ด์œ 
1. Native app์— ๋Œ€ํ•œ ์ง€์‹์ด ์ „๋ฌดํ•จ
2. ํ˜„์žฌ ๊ณต๋ถ€์ค‘์ธ React์˜ ๊ธฐ๋Šฅ(ex. hooks)์„ ๊ทธ๋Œ€๋กœ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Œ
3. Android, iOS ๋ชจ๋‘ ํ•œ ๋ฒˆ์— ๊ฐœ๋ฐœ(+Web)

(3) Web โžก๏ธ Mobile App์œผ๋กœ UI ๋ณ€๊ฒฝํ•˜๊ธฐ

์ด์ œ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์ด ๋ณ€๊ฒฝ๋˜์—ˆ์œผ๋‹ˆ UI๋ฅผ ๋‹ค์‹œ ๋งŒ๋“ค ์‹œ๊ฐ„์ด๋‹ค. ๋ชจ๋ฐ”์ผ UI๋ฅผ ์งœ๋ฉด์„œ ๋Š๋‚€ ์›น๊ณผ ์•ฑ์˜ ๊ฐ€์žฅ ํฐ ์ฐจ์ด์ ์€ 2 ๊ฐ€์ง€๋‹ค.
1. ํ™”๋ฉด์˜ ์ข…ํšก๋น„๊ฐ€ ๋ฐ˜๋Œ€๋‹ค.
2. Interaction์˜ ๊ธฐ์ค€: web์€ click๊ณผ hover, ์•ฑ์€ touch

์•„๋ž˜๋Š” ํ…Œํฌ ํŠธ๋ฆฌ ํ™”๋ฉด๊ณผ ํ…Œํฌ ์ƒ์„ธ ํ™”๋ฉด์˜ ์›น vs ๋ชจ๋ฐ”์ผ UI๋ฅผ ๋น„๊ตํ•œ ์˜ˆ์‹œ์ด๋‹ค.


Figure 1.์˜ ํ…Œํฌ ํŠธ๋ฆฌ ํŽ˜์ด์ง€๋Š” ๋‹จ์ˆœํžˆ ํ™”๋ฉด์˜ ๋น„์œจ๋งŒ์„ ๋ณ€๊ฒฝํ•˜์—ฌ ์‰ฝ๊ฒŒ UI ๋ณ€๊ฒฝ์ด ์ด๋ฃจ์–ด์กŒ๋‹ค.

Figure.2์— ๊ฒฝ์šฐ ๋™์ผํ•˜๊ฒŒ ์ƒ์„ธ ๊ธฐ์ˆ ์„ ์„ ํƒํ•  ๋•Œ ๋™์ผํ•˜๊ฒŒ toggle์„ ์‚ฌ์šฉํ•˜์—ฌ ๊ธฐ์ˆ  ์•„์ดํ…œ๋“ค์ด ํ™•์žฅ๋˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ์—ˆ์œผ๋‚˜, ์ •๋ณด๊ฐ€ ๋น„๊ต์  ์ ๊ฒŒ ๋‹ด๊ธฐ๋Š” ๋ชจ๋ฐ”์ผ ํŠน์„ฑ์ƒ ๋งŽ์€ ์Šคํฌ๋กค๋ง์„ ์•ผ๊ธฐํ•ด ์ ํ•ฉํ•˜์ง€ ์•Š๋‹ค๊ณ  ์ƒ๊ฐํ•˜์˜€๋‹ค. ๋”ฐ๋ผ์„œ ์šฐ์ธก๊ณผ ๊ฐ™์ด ์†๊ฐ€๋ฝ์˜ ์ขŒ์šฐ ์Šคํฌ๋กค๋ง์„ ์‚ฌ์šฉํ•˜์—ฌ ๊ธฐ์ˆ  ์•„์ดํ…œ๋“ค์ด ํ™•์žฅ๋˜๋„๋ก ๋ณ€๊ฒฝํ•˜์˜€๋‹ค.

๊ฐ€์žฅ ์•„์‰ฌ์› ๋˜ ์ : ์ปค์„œ ์• ๋‹ˆ๋ฉ”์ด์…˜์˜ ๋ฌด๋คํ–‰....


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

(4) ๋ชจ๋ฐ”์ผ์Šค๋Ÿฌ์šด UI๋กœ ์ˆ˜์ •ํ•˜๊ธฐ

์•ž์„œ ์–ธ๊ธ‰ํ•œ ์›น๊ณผ์˜ 2 ๊ฐ€์ง€ ์ฐจ์ด์  ์™ธ์—๋„ ๋ชจ๋ฐ”์ผ UI ๊ฐœ๋ฐœ ์‹œ ์ˆ˜๋งŽ์€ ๋ถ€๋ถ„๋“ค์„ ๊ณ ๋ คํ•ด์•ผ ํ•œ๋‹ค. ๊ทธ ์ค‘ ์ง์ ‘ ๊ธฐ๊ธฐ์— ์•ฑ์„ ์ž„์‹œ๋กœ ์˜ฌ๋ ค๋ณด๊ณ  ์ฐพ์€ ์ˆ˜์ •์‚ฌํ•ญ์„ ํ•˜๋‚˜ ์†Œ๊ฐœํ•œ๋‹ค.

๋ชจ๋ฐ”์ผ์€ ๊ธ€์„ ์ž‘์„ฑํ•  ๋•Œ ๋ฌผ๋ฆฌ์ ์ธ ํ‚ค๋ณด๋“œ๊ฐ€ ์—†์œผ๋ฏ€๋กœ ํ™”๋ฉด ํ•˜๋‹จ์—์„œ ํ‚ค๋ณด๋“œ๊ฐ€ ํ”Œ๋กœํŒ…๋œ๋‹ค. ๋”ฐ๋ผ์„œ Figure 3.์˜ ์ขŒ์ธก๊ณผ ๊ฐ™์ด ๋ฒ„ํŠผ์„ ๋ฐฐ์น˜ํ•˜๋ฉด ํ™”๋ฉด์ด ๊ฐ€๋ ค์ง€๊ฑฐ๋‚˜ ์ž‘์„ฑํ•˜๋Š” ๋ฐ•์Šค๊ฐ€ ์‹œ์•ผ์—์„œ ์‚ฌ๋ผ์ ธ๋ฒ„๋ฆฌ๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค. ์ด ๊ฒฝ์šฐ ์šฐ์ธก๊ณผ ๊ฐ™์ด ๋ฒ„ํŠผ์„ ์ƒ๋‹จ์— ๋ฐฐ์น˜ํ•˜๋Š” ๊ฒƒ์ด ๋” "๋ชจ๋ฐ”์ผ์Šค๋Ÿฌ์šด UI"๋ผ๊ณ  ํ•œ๋‹ค.


์ด ์ ๋“ค์„ ๋ฐ”ํƒ•์œผ๋กœ Figma๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋Œ€๋ถ€๋ถ„์˜ UI ์žฌ๊ตฌ์„ฑ์ด ์™„๋ฃŒ๋˜์—ˆ์œผ๋ฉฐ ๋ณธ๊ฒฉ์ ์œผ๋กœ React Native๋ฅผ ํ™œ์šฉํ•œ ๊ฐœ๋ฐœ์„ ์‹œ์ž‘ํ•ด๋ณด๋ ค ํ•œ๋‹ค.

์ฐธ๊ณ ์ž๋ฃŒ

๋ชจ๋ฐ”์ผ ์•ฑ ๊ฐœ๋ฐœ์˜ ํ˜„์žฌ์™€ ๋ฏธ๋ž˜ (๋„ค์ดํ‹ฐ๋ธŒ, ํ•˜์ด๋ธŒ๋ฆฌ๋“œ, ํฌ๋กœ์Šค ํ”Œ๋žซํผ ์•ฑ ์žฅ๋‹จ์ ๊ณผ ์ „๋ง)
๋‹น๊ทผ๋งˆ์ผ“์— ์›น ํ”„๋กœ์ ํŠธ ๋ฐฐํฌํ•˜๊ธฐ #1 โ€” ํŒŒ์ผ ๊ธฐ๋ฐ˜ ์›น๋ทฐ
ํ† ์Šคใ…ฃSLASH 22 - ๋ฏธ์นœ ์ƒ์‚ฐ์„ฑ์„ ์œ„ํ•œ React Native
์„œ๋น„์Šค์˜ ์ฒซ ์ธ์ƒ์„ ๋งŒ๋“œ๋Š” FE ๊ฐœ๋ฐœ ๋ฌธํ™”์™€ ์ผํ•˜๋Š” ๋ฐฉ์‹

profile
Code what we love. ์ข‹์•„ํ•˜๋Š” ๊ฒƒ๋“ค์„ ๊ตฌํ˜„ํ•˜๊ณ  ์žˆ๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž๋„ ํ•จ๊ป˜ ๋งŒ์กฑํ•˜๋Š” ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

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

comment-user-thumbnail
2023๋…„ 2์›” 22์ผ

์ข‹์€ ๊ธ€์ด๋„ค์š”. ์ž˜์ฝ๊ณ  ๊ฐ‘๋‹ˆ๋‹ค~!

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ