์ฒญ์ฒ๋ฒฝ๋ ฅโ๊ฐ์ ํ์์ ๋ง์ด์๋ค. ์ด๋ ์ ๋ ๋๋ ๋ชจ๋ฐ์ผ ์ฑ์ ํ์์ฑ์ ๋๋ผ๊ณ ์์์ง๋ง ๋ ์ด์ ์น ํ๋ก์ ํธ์ ์งํ์ด ์๋ฏธ๊ฐ ์์ ๊ฒ ๊ฐ๋ค๋ ๊ฒฐ๋ก ์ด์๋ค. ์ด ๋ฐฐ๊ฒฝ์๋ ์๋์ ๊ฐ์ 2 ๊ฐ์ง ์ด์ ๊ฐ ์์๋ค.
- ๊ธฐ์กด์ ์ฃผ์ง์ ๊ธฐ์ ์ ๋ถ๋ฅํ๋ ์๋น์ค๋ ๊ธฐ์ ๋ง๋ค ๋ง์ ์ผ๋ฌ์คํธ๋ฅผ ํ์๋ก ํ๋ฉฐ, ๊ฐ ๊ธฐ์ ์ ๋จ ํ๋์ ์ผ๋ฌ์คํธ๋ก ํํํ๊ธฐ์๋ ๋ง์ ์ฃผ๊ด์ด ๋ค์ด๊ฐ๋ค.
- ์ฃผ์ง์ ์ ๋ฌธ์์ธ ๊ธฐํ์๋ค์ด ์ฃผ์ง์ ์ด๊ธ์๋ถํฐ ์๊ธ์๊น์ง ์์ฐ๋ฅด๋ ์๋น์ค๋ฅผ ๋ง๋ค๊ธฐ์๋ ํ๊ณ๊ฐ ์๋ค.
๋ฐ๋ผ์ ์ฐ๋ฆฌ๋ ์ฃผ์ง์ ์ ๋ฌธ์๋ค์ ์ํ ์ผ๊ธฐ๋ฅผ ์ฃผ์ ๋ก Post Black Belt ํ๋ก์ ํธ๋ฅผ ๋ณ๊ฒฝํ์๊ณ ์ฌ์ฉ ๋น๋์ ํธ์ฌ ์๋ฆผ ๋ฑ์ ๊ณ ๋ คํ์ฌ ๋ชจ๋ฐ์ผ ์ฑ ๊ฐ๋ฐ์ ๊ฒฐ์ ํ๊ฒ ๋์๋ค. ๋์๊ฒ๋ ์ฑ ๊ฐ๋ฐ์ ๊ณผ์ ์กฐ์ฐจ๋ ์ต์ํ์ง ์์๋๋ฐ ๋ฐฑ์๋ ์๋ฒ๋ ๋์ผํ๊ณ ํด๋ผ์ด์ธํธ๊ฐ ์น ๋ธ๋ผ์ฐ์ ์์ ์ฑ์ผ๋ก ๋ณ๊ฒฝ๋๋ค๋ ๊ฒ์ด ๊ฐ์ฅ ํฐ ์ฐจ์ด์ ์ด๋ผ๊ณ ํ๋ค.
๋น๋ก ์ง๊ธ์ด ๋ด๊ฐ ํด๋ณด๊ณ ์ถ์ ๊ฒ๋ค์ ์คํํ๋ ๊ธฐ๊ฐ์ด๋ผ ํ๋๋ผ๋ "ํ๋ก ํธ์๋ ๊ฐ๋ฐ์์๊ฒ ์ฑ์ ๋ง๋๋ ๊ฒฝํ์ด ๊ณผ์ฐ ํ์ํ ๊ฒ์ธ๊ฐ?" ๋ผ๋ ์๋ฌธ์ ์ ํด๊ฒฐํ๊ธฐ ์ํด ์ด ๊ธ์ ์์ฑํ์๊ณ ,
๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ฅผ ์ฌ์ฉํ์ฌ ๋์ ์ฒซ ์ฑ ๊ฐ๋ฐ์ ํ๊ธฐ๋ก ๊ฒฐ์ ํ ๊ณผ์ ์ ์์ผ๋ก ์ค๋ช
ํด๋ณด๋ ค ํ๋ค.
์ฐ๋ฆฌ๊ฐ ์๊ฐํ๋ ๊ตด์ง์ IT ๊ธฐ์ ๋ค ์ค ์ฐ์ํ ํ์ ๋ค, ๋น๊ทผ ๋ง์ผ, ์นด์นด์ค ํ์ด, ํ ์ค ๋ฑ์ ์ค ์ฌ์ฉ์๋ค์ด ๋๋ถ๋ถ ๋ชจ๋ฐ์ผ ์ฑ์ ๋ถํฌ๋์ด์๋ค. ๋ฉด๋ฐํ ์ดํด๋ณด๋ฉด ๊ทธ๋ค์ด ๊ฐ์ง ์น ํ์ด์ง๋ ํ์ฌ ์๊ฐ๋ ์ฑ์ฉ ๊ณต๊ณ ์ ๊ฐ์ด ์ค์ ์๋น์ค์๋ ๋๋จ์ด์ ธ ์๋ ๊ฒฝ์ฐ๊ฐ ๋ง์๋ฐ ์ ์ด๋ฐ ๊ธฐ์ ๋ค์ ์ฑ ๊ฐ๋ฐ์ ๋ฟ๋ง์ด ์๋๋ผ ์น ๊ฐ๋ฐ์๋ค๋ ์ฑ์ฉํ๋ ๊ฒ์ผ๊น?
์ฑ ๊ฐ๋ฐ์ ํฌ๊ฒ 3 ๊ฐ์ง๋ก ๋๋ ์ ์์ผ๋ฉฐ ๊ฐ๊ฐ์ ๋ํ ๊ฐ๋จํ ์ค๋ช
์ ์๋์ ๊ฐ๋ค.
๊ฐ๊ฐ์ ์ด์์ฒด์ ์์ ๊ฐ๊ฐ ๋ค๋ฅธ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ก ๊ฐ๋ฐํ์ฌ ์ธ์ ์ธ ์ง์์์ด OS์์ ๊ทธ๋๋ก ์คํ๋จ
๋ชจ๋ฐ์ผ ์ฑ์ Look and Feel์ ์ ์ด๋ฆด ์ ์์ผ๋, OS๋ณ ์ผ์ ์ค๋ณต์ฑ์ด๋ผ๋ ๋จ์ ์ด ์กด์ฌํจ
WebView UI component๋ฅผ ์ฌ์ฉํ์ฌ ์น ๊ธฐ์ ์ ๊ทธ๋๋ก ์ฌ์ฉํ ์ ์์
์ฌ์ ํ ๋ค์ดํฐ๋ธ ์ง์์ด ํ์ํ๊ณ ์น๋ทฐ์์ ๋์ํ๋ฏ๋ก ์ฑ๋ฅ์ด ๋๋ฆฌ๊ณ ๋ค์ดํฐ๋ธ API๋ฅผ ๋ชจ๋ ํ์ฉํ ์ ์๋ค๋ ๋จ์ ์ด ์์
ํ๋์ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ก ๋ ์ด์์ฒด์ ์์ ๋์ํ๋ ์ฑ์ ๋น๋
ex) React Native(JS), Flutter(Dart)
ํ๋์ ์ธ์ด๋ก ์ฌ๋ฌ ํ๋ซํผ์์ ๋์ํ๋ ์ฑ์ ๊ฐ๋ฐํ ์ ์๋ค๋ ์ฅ์ ์ด ์์ผ๋, ํ์ด๋ธ๋ฆฌ๋ ์ฑ๊ณผ ๋์ผํ๊ฒ ๋ค์ดํฐ๋ธ ์ฑ์ ์ฑ๋ฅ์ ๋ชจ๋ ์ด๋ฆด ์ ์์ผ๋ฉฐ ์ง๋์น๊ฒ ํฌ๋ก์ค ํ๋ซํผ์ ์์กดํด์ผ ํ์ฌ ๋๋ฒ๊น ์ด ๊น๋ค๋ก์์ง ์ ์๋ค. ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ฅผ ๊ฐ๋ฐํ ํ์ด์ค๋ถ์์๋ ์์ ๊ฐ์ ์ด์ ๋ก ์ค์ ์ฌ์ฉ๋์ ์ค์ด๊ณ ์๋ ์ถ์ธ๋ผ๊ณ ํ๋ค.
์ค์ ๊ธฐ์ ์์๋ 3 ๊ฐ์ง ์ค ํ๋๋ฅผ ์ฑํํ๊ธฐ๋ณด๋ค๋ ํผ์ฉํ์ฌ ์๋น์ค๋ง๋ค ๋ ๋์ ๋ฐฉ์์ผ๋ก ๊ตฌํํ๊ณ ์๋ค๊ณ ํ๋ค.
์์ ๋ด์ฉ๋ค์ ํ์ธํ๊ณ ๋ค์ ์ฑ์ฉ ๊ณต๊ณ ๋ค์ ์ดํด๋ณด๋ ์ฑ ๊ฐ๋ฐ๋ ๋์ ์์ญ์ ๋ค์ด์ฌ ์ ์๋ค๋ ์๊ฐ์ด ๋ค์๋ค. ๊ทธ๋ ๋ค๋ฉด ์ด๋ค ๋ฐฉ๋ฒ์ด ์ง๊ธ ๋ด๊ฐ ๊ณต๋ถํ๊ณ ์๋ ๋ด์ฉ๋ค์ ์ต๋ํ ์์ฉํ ์ ์์๊น? ๋๋ ์๋์ ๊ฐ์ ์ด์ ๋ก Cross Platform App ์ค React Native๋ฅผ ์ฌ์ฉํ ์ฑ ๊ฐ๋ฐ์ ์ ์ ํ์๋ค.
React Native ์ ์ ์ด์
1. Native app์ ๋ํ ์ง์์ด ์ ๋ฌดํจ
2. ํ์ฌ ๊ณต๋ถ์ค์ธ React์ ๊ธฐ๋ฅ(ex. hooks)์ ๊ทธ๋๋ก ํ์ฉํ ์ ์์
3. Android, iOS ๋ชจ๋ ํ ๋ฒ์ ๊ฐ๋ฐ(+Web)
์ด์ ๊ฐ๋ฐ ํ๊ฒฝ์ด ๋ณ๊ฒฝ๋์์ผ๋ UI๋ฅผ ๋ค์ ๋ง๋ค ์๊ฐ์ด๋ค. ๋ชจ๋ฐ์ผ UI๋ฅผ ์ง๋ฉด์ ๋๋ ์น๊ณผ ์ฑ์ ๊ฐ์ฅ ํฐ ์ฐจ์ด์ ์ 2 ๊ฐ์ง๋ค.
1. ํ๋ฉด์ ์ข
ํก๋น๊ฐ ๋ฐ๋๋ค.
2. Interaction์ ๊ธฐ์ค: web์ click๊ณผ hover, ์ฑ์ touch
์๋๋ ํ ํฌ ํธ๋ฆฌ ํ๋ฉด๊ณผ ํ ํฌ ์์ธ ํ๋ฉด์ ์น vs ๋ชจ๋ฐ์ผ UI๋ฅผ ๋น๊ตํ ์์์ด๋ค.
Figure 1.์ ํ
ํฌ ํธ๋ฆฌ ํ์ด์ง๋ ๋จ์ํ ํ๋ฉด์ ๋น์จ๋ง์ ๋ณ๊ฒฝํ์ฌ ์ฝ๊ฒ UI ๋ณ๊ฒฝ์ด ์ด๋ฃจ์ด์ก๋ค.
Figure.2์ ๊ฒฝ์ฐ ๋์ผํ๊ฒ ์์ธ ๊ธฐ์ ์ ์ ํํ ๋ ๋์ผํ๊ฒ toggle์ ์ฌ์ฉํ์ฌ ๊ธฐ์ ์์ดํ
๋ค์ด ํ์ฅ๋๊ฒ ํ ์ ์์์ผ๋, ์ ๋ณด๊ฐ ๋น๊ต์ ์ ๊ฒ ๋ด๊ธฐ๋ ๋ชจ๋ฐ์ผ ํน์ฑ์ ๋ง์ ์คํฌ๋กค๋ง์ ์ผ๊ธฐํด ์ ํฉํ์ง ์๋ค๊ณ ์๊ฐํ์๋ค. ๋ฐ๋ผ์ ์ฐ์ธก๊ณผ ๊ฐ์ด ์๊ฐ๋ฝ์ ์ข์ฐ ์คํฌ๋กค๋ง์ ์ฌ์ฉํ์ฌ ๊ธฐ์ ์์ดํ
๋ค์ด ํ์ฅ๋๋๋ก ๋ณ๊ฒฝํ์๋ค.
UI๋ฅผ ๋ณ๊ฒฝํ๋ฉด์ ๊ฐ์ฅ ์์ฌ์ ๋ ์ ์ ๋ด๊ฐ ์น ๊ธฐํ์ ๊ฐ์ฅ ๊ณต์ ๋ค์๋ ์ปค์ ์ ๋๋ฉ์ด์
์ด์๋ค. ๋์ ์ ๋๋ฉ์ด์
+ ์ํ ๊ด๋ฆฌ(Redux) ๊ธฐ์ ์ ์ฌ์ฉ์ ๊ณต๋ถํ๊ธฐ ์ํด ๋์
ํ์๋ UI ์ปดํฌ๋ํธ์๋๋ฐ, ๋ชจ๋ฐ์ผ์ ์ฌ์ฉ์์ ์๊ฐ๋ฝ ์์ง์์ ๋ฐ๋ผ๊ฐ์ง ์์ผ๋ฏ๋ก ์ฌํ์ฉํ ์ ์๋ ๋ฐฉ๋ฒ์ด ๊ฑฐ์ ์์๋ค. ์ด ๊ธฐ์ ์ ์์ฝ์ง๋ง ์ถํ ๋ค๋ฅธ ํ๋ก์ ํธ์ ๋ ๋ฐ์ ์์ผ์ ํ์ฉํ๋ ๊ฒ์ ๊ธฐ์ฝํ์๋ค.
์์ ์ธ๊ธํ ์น๊ณผ์ 2 ๊ฐ์ง ์ฐจ์ด์ ์ธ์๋ ๋ชจ๋ฐ์ผ UI ๊ฐ๋ฐ ์ ์๋ง์ ๋ถ๋ถ๋ค์ ๊ณ ๋ คํด์ผ ํ๋ค. ๊ทธ ์ค ์ง์ ๊ธฐ๊ธฐ์ ์ฑ์ ์์๋ก ์ฌ๋ ค๋ณด๊ณ ์ฐพ์ ์์ ์ฌํญ์ ํ๋ ์๊ฐํ๋ค.
๋ชจ๋ฐ์ผ์ ๊ธ์ ์์ฑํ ๋ ๋ฌผ๋ฆฌ์ ์ธ ํค๋ณด๋๊ฐ ์์ผ๋ฏ๋ก ํ๋ฉด ํ๋จ์์ ํค๋ณด๋๊ฐ ํ๋กํ
๋๋ค. ๋ฐ๋ผ์ Figure 3.์ ์ข์ธก๊ณผ ๊ฐ์ด ๋ฒํผ์ ๋ฐฐ์นํ๋ฉด ํ๋ฉด์ด ๊ฐ๋ ค์ง๊ฑฐ๋ ์์ฑํ๋ ๋ฐ์ค๊ฐ ์์ผ์์ ์ฌ๋ผ์ ธ๋ฒ๋ฆฌ๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ค. ์ด ๊ฒฝ์ฐ ์ฐ์ธก๊ณผ ๊ฐ์ด ๋ฒํผ์ ์๋จ์ ๋ฐฐ์นํ๋ ๊ฒ์ด ๋ "๋ชจ๋ฐ์ผ์ค๋ฌ์ด UI"๋ผ๊ณ ํ๋ค.
์ด ์ ๋ค์ ๋ฐํ์ผ๋ก Figma๋ฅผ ์ฌ์ฉํ์ฌ ๋๋ถ๋ถ์ UI ์ฌ๊ตฌ์ฑ์ด ์๋ฃ๋์์ผ๋ฉฐ ๋ณธ๊ฒฉ์ ์ผ๋ก React Native๋ฅผ ํ์ฉํ ๊ฐ๋ฐ์ ์์ํด๋ณด๋ ค ํ๋ค.
๋ชจ๋ฐ์ผ ์ฑ ๊ฐ๋ฐ์ ํ์ฌ์ ๋ฏธ๋ (๋ค์ดํฐ๋ธ, ํ์ด๋ธ๋ฆฌ๋, ํฌ๋ก์ค ํ๋ซํผ ์ฑ ์ฅ๋จ์ ๊ณผ ์ ๋ง)
๋น๊ทผ๋ง์ผ์ ์น ํ๋ก์ ํธ ๋ฐฐํฌํ๊ธฐ #1 โ ํ์ผ ๊ธฐ๋ฐ ์น๋ทฐ
ํ ์คใ
ฃSLASH 22 - ๋ฏธ์น ์์ฐ์ฑ์ ์ํ React Native
์๋น์ค์ ์ฒซ ์ธ์์ ๋ง๋๋ FE ๊ฐ๋ฐ ๋ฌธํ์ ์ผํ๋ ๋ฐฉ์
์ข์ ๊ธ์ด๋ค์. ์์ฝ๊ณ ๊ฐ๋๋ค~!