์์ ์ ๋ฆฌํํ๋ ๊ธฐ๋ฅ์ด๊ธด ํ๋ฐ
์ต์ ์ ๋ฐ์ดํธ์ ๋ง๊ฒ ๋ช๊ฐ์ง ์์ ํ๊ณ UI ์ถ๊ฐํ์ฌ ์์ฒญ๋๋ฆผ
ํ ์์ ์์ ๊ฐ์ฅ ํฐ ๋ฌธ์ ๋
1. ์์ ๋ฆฌ์คํธ๋ก ์ธํด ๋ฉ์ธ ๋ชจ๋ธ์ ๋ฆฌ์์ค (ํ ํฐ/์ฑ๋ฅ ๋ฑ) ๋ฅผ ์์ฒญ๋๊ฒ ์ก์๋จน์
์ ์ฒด ์ปจํ ์คํธ ๋ด์์ ํน์ ๋ถ๋ถ์ ๋ฝ์ ๋ถ์์ ์ํค๊ณ ์ง์ ๋ ๋ฆฌ์คํธ ๋ด์์ ์ถ๋ ฅ์ํค๋ ์์ ๋ง์ผ๋ก๋
์ด๋ฏธ ๋ฉ์ธ ํ๋กฌํํธ์ ์ฑ๋ฅ์ ํ๋ฝ์ํฌ ์ ๋๋ก ์๋นํ ๋ถํ๋ฅผ ์ฃผ๊ฒ ๋จ
์์ ๋๋ฌธ์ ๋ฉ์ธ ํ๋กฌํํธ๊ฐ ๋ฐ์ด๋๋ ํ์์ด ์ฌํด๋ ๋๋ฌด ์ฌํจ
2. ๊ฐ์ ์ด๋ฏธ์ง์ ์ธ๊ธฐ๋๊ฐ ๋ฎ์
๋ชจ๋ฐ์ผ, PC ๊ฐ๋ฆฌ์ง ์๊ณ ๋ฐ๋ ค๋๋ ์ฑํ ์ฐฝ UI ๋๋ฌธ์ ์ธ๊ธฐ๊ฐ ์๋๊ฒ ์๋๊ฐ ์ถ์ธก๋จ
์ค๋ฆฌ๋๋ ์ด๋ฏธ์ง๋ฅผ ์ฝ์ ํ๋ ๋ฐฉ์์ด ์ฑํ ์ฐฝ ์ข์ธก์ด๋ ์ฐ์ธก์ ๋ฐ์ด๋ฃ๋ ์์ด๋ผ ์ด์ฉ ์ ์์๋ค์ง๋ง
๋ฆฌ์ค ์ฑํ ์ฐฝ์ ์ด๋ฏธ์ง๋ฅผ ๊ฐ์ ์ฝ์ ํ๋ ๋ฐฉ๋ฒ์ ๊ณต์ ํ๊ณ ๋ ๋ค๋ก (https://arca.live/b/characterai/76624722)
์ ๋ฐ์ดํธ ๋๋ฉด์ ๊ตณ์ด ์ฑํ ์ฐฝ์ ๊ฐ๋ฆฌ๋ ๋ฐฉ์์ ์ฌ์ฉํ ํ์๊ฐ ์์ด์ก์
3. ํ์ฌ ์ธ๋ ์ด ๊ธฐ๋ฅ์ ๋ฑํ ๋ฉ๋ฆฌํธ๊ฐ ์์
2๋ฒ๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก ๋ฐ๋ ค๋ ์ฑํ ์ฐฝ UI ์
์ธ๋ ์ด ์ด๋ฏธ์ง๋ฅผ ๋ ํ๋ฒ ๋ ์ฌ๋ฆฌ๋ ์์ด๋ผ ๋ฑํ ์ธ ์ด์ ๊ฐ ์๋ ๊ธฐ๋ฅ์ด๋ผ ๋ถํ์ํจ
๊ฐ์ ๋ด ์ด๋ฏธ์ง + ์ธ๋ ์ด ์ด๋ฏธ์ง๊ฐ ์ค์ฒฉ๋๋๊น ๋ ํผ๋์ค๋ฌ์
๊ทธ๋์... ์ด๊ฑธ ์ด๋์ ๋ ๋ณด์ํด์
๋ฉ์ธ ๋ชจ๋ธ์ ๋ถ๋ด์ ํ ์ค์ฌ๋ฒ๋ฆฌ๊ณ ๋ณด์กฐ ๋ชจ๋ธ์ ๋ชจ์กฐ๋ฆฌ ๋คํ์์ผ์
์ค์ ์ฑํ ์์ ์ฌ๋ฌ๊ฐ์ง ๋ฐฉ๋ฉด์ผ๋ก ํ์ฉํ ์ ์๋๋ก ํด๋ด
๋ญฃ๋ณด๋ค ํ๋กฌ ๊ฐ๋ฐ์ด๋๋ ํ์์ ์ค์ด๋๊ฒ ์ต์ฐ์ ์ด๊ธฐ๋ ํ์
A. ์บ๋ฆญํฐ ๋์คํ๋ ์ด - ์์ ๊ธฐ๋ฅ ์ถ๊ฐ
ํฐ ๋ณํ๋ ์๊ณ , ๊ธฐ์กด ๊ฐ์ ์ด๋ฏธ์ง๋ฅผ ์์ ์ผ๋ก ํ์ฉํ๊ฒ ๋ง๋๋ ์
๋์ ๊ฐ์ ์ด๋ฏธ์ง ๋๋ฌธ์ ๋ฐ๋ ค๋๋ ๋์คํ๋ ์ด ์์ด
๊ทธ๋ฅ ์ฑํ ์๋ง ์ฝ์ ๋๋ ๋ฐฉ์์ด๋ผ ๋ฑํ ์ค๋ช ํ ํ์๋ ์์ ์ ๋๋ก ๊ฐ๋จํจ
์ถ๊ฐ์ ์ผ๋ก ๋ณด์กฐ ๋ชจ๋ธ์ฉ ์ปค์คํ ํ๋กฌํํธ ์ฝ์ ํ ์ ์๊ฒ
์ฒดํฌ ํ์์ผ๋ก ์ถ๊ฐ๋ง ํด๋๊ธฐ๋ง ํด๋ ๊ด์ฐฎ์ ๊ฒ ๊ฐ์
๋ถํ์ ์ค์ ์ ๊ฑฐ์ ๊ฒฝ์ฐ ์กฐ๊ธ ์ถ๊ฐ ์ค๋ช ์ด ํ์ํ๋ฐ...
1. ์ถ๊ฐ ํ๋กฌ / ์บ๋ฆญํฐ ํ๋ฆฌํฝ์ค๋ ์์ ๋ถํฐ ์๋ํ์ง ์์์
ํ๋ฆฌ์ ์ ๋ฌด / ๊ธฐ๋ฅ ์จ์คํ ์๊ด ์์ด ์์ ์๋ ์ํจ (๊ฝค ์ค๋๋์๋ ๊ฑธ๋ก ๊ธฐ์ตํจ)
์ ์ด์ ์ ์ ์๋ ํ๋ค๊ณ ํด๋ ๋ฑํ ์ธ ํ์๋ ์๋ ๊ตฌ๋ฒ์ ์ ์์ฌ๊ฐ์ ๋๋์ธ๋ฐ
์ ์ ์๋์ ํ๋, ์ํ๋, ์๊ฑด, ๋ชจ๋ฅด๊ฑด ๋ฑํ ์ธ ๊ณณ๋, ์ธ ํ์๋ ์์
์์งํ ๋งํ๋ฉด... ์ด๊ฒ ์ ์์๋ ํ๋๊ฒ ๋ ๋ฌธ์ ์
์ง๊ธ ํ๋กฌ ๊ตฌ์กฐ์์ ๋ ๊ฐํ๋ง ๋๋ ๊ณ๋ฅต๊ฐ์ ์กด์ฌ๋ผ
์ฐจ๋ผ๋ฆฌ ์์ ๋ฒ๋ฆฌ๋๊ฐ, ๋น๊ถ์ฅ ์ค์ ์ผ๋ก ๋๊ฒผ์ผ๋ฉด ์ข๊ฒ ์
2. ๊ฐ์ ํ๋กฌํํธ๋ ๋ง์ฐฌ๊ฐ์ง๋ก ์์ ๊ธฐ๋ฅ์ด ์ถ๊ฐ๋๋ฉด ๋ถํ์ํด์ง
์ธ๋ ์ด์ชฝ์ด ์ ๋ถ ์์ ํญ๋ชฉ์ผ๋ก ๋์ด๊ฐ๋ ๊ตณ์ด ์์ ํ์๋ ์๋๋ฐ
๊ฐ์ ์ด๋ฏธ์ง ํญ๋ชฉ์ ๊ทธ๋๋ก ๋ ๋๋ค๋ฉด ๋ฑํ ๊ฑด๋ค์ง ์์๋ ๋ ๊ฑฐ๊ฐ์
๊ทผ๋ฐ 1๋ฒ์ ์ด๋ป๊ฒ ํด์คฌ์ผ๋ฉด ์ข๊ฒ ์ (๋์ถฉ ๋์น์ฝ)
A. ์์ ๊ธฐ๋ฅ ์ ๋ฆฌ
1. ๊ธฐ์กด ๊ฐ์ ์ด๋ฏธ์ง ๊ธฐ๋ฅ์ ๋ณต๋ถ - ์์ ํด ์์ ์ด๋ฏธ์ง ํญ๋ชฉ์ ์ถ๊ฐํ๋ค.
2. ์ค๊ตฌ๋๋ฐฉํ๋ ์์ ๊ธฐ๋ฅ ํ์ฉ๋ฒ์ด ๋ชจ์กฐ๋ฆฌ ๋ณด์กฐ๋ชจ๋ธ๋ก ์ด์ ๋๋ค.
3. ์ด๋ฏธ์ง ๋ฟ๋ง ์๋๋ผ ์ฌ์ด๋, ๋น๋์ค, ๋ฐฑ๊ทธ๋ผ์ด๋๊น์ง ํ์ฉ ๊ฐ๋ฅํ๊ฒ ๋๋ค.
์ํผ ๊ทธ๋ ๋ค.
B. ๋ฐฑ๊ทธ๋ผ์ด๋ ๊ตฌ๋ฌธ ์ถ๊ฐ
์ด๊ฑด ๋ ์ง ์๋ ์ง ๋ชจ๋ฅด๊ฒ ๋๋ฐ... ์ ๋ง ์์์ผ๋ฉด ํ๋ ๊ธฐ๋ฅ์ด๊ธฐ๋ ํจ
{{img::์ด๋ฏธ์ง ์ด๋ฆ}} ์ฒ๋ผ ๋ฐฑ๊ทธ๋ผ์ด๋๋ {{bg::์ด๋ฏธ์ง ์ด๋ฆ}} ์ผ๋ก ์ฌ์ฉ ๊ฐ๋ฅํ๊ฒ ํ๋ฉด
๋ณด์กฐ ๋ชจ๋ธ - ์์ ๊ธฐ๋ฅ์ผ๋ก ์ฑํ ๋ง๋ค ์ค์๊ฐ์ผ๋ก ๋ฐฐ๊ฒฝ์ด ๋ณํ๊ฒ ๋ง๋ค ์ ์์ํ ๋ฐ
์ด๋ฌ๋ฉด ์์ฒญ๋๊ฒ ๋ง์ ์ฑํ ๋ณ ์ค์๊ฐ ๋ฐฐ๊ฒฝ์ ์ธ ์ ์๊ฒ๋จ
์ง๊ธ ํ๋ฌ๊ทธ์ธ์ด๋ ์บ๋ฆญํฐ JS ๋ก ๊ฐ์ ๋ก ๋ฐ๊พธ๋ ๋ฐฉ๋ฒ๋ ์์ง๋ง
ํ๋ค๊ธฐ๋ ํ๊ณ ๋ฌด์๋ณด๋ค ๋๊ฐ๋ค ๋ค์ด์ค์ง ์๋ ์ด์ ๋ฐฐ๊ฒฝ์ด ์๋ฐ๋์ด์
๋ฐฑ๊ทธ๋ผ์ด๋ ์๋ฒ ๋ฉ์ ์จ๋จน์ ๋ฐฉ๋ฒ์ด ๋๋ค ๊ตฌ๋ฌธ๋ฐ์ ์์
JS ์ ๋ง์ฐฌ๊ฐ์ง๋ก ๋ณด์ ๋ฌธ์ ๊ฐ ์๋๊ฑด์ง ๋ชจ๋ฅด๊ฒ ์ง๋ง
๊ทธ๋๋ ์ฑํ ๋ด ๊ตฌ๋ฌธ์ผ๋ก ๋ฐฐ๊ฒฝ์ด ๋ฐ๋ ์ ๋ง ์๋ค๋ฉด ์ข์ ๊ฒ ๊ฐ์
์ด๊ฑด ๋ฆฌํ๋ฃ์์ง ๊ฑฐ์ 1๋ ์ด ๋ค๋์ด๊ฐ์ ์ ๋ง๋ก ๊ฐ์ ํ ์ํ๋ ๊ธฐ๋ฅ์ด๊ธฐ๋ ํจ...
ํ์ ์ด์๋ก ์ ๋ ์ ๋๋ก ๋ชป์์ ๋์์์ด ๋์ถฉ ์ ์๋๋ฐ
ํน์๋ผ๋ ์ดํด๊ฐ ์๋๊ฑฐ๋ ๊ถ๊ธํ ์ ์๋ค๋ฉด ์ฝ๋งจํธ ๋ฌ์์ฃผ์๋ฉด ๊ฐ์ฌํ๊ฒ ์
'๋ณด์กฐ ๋ชจ๋ธ๋ก ์์ ์ ๋๋ฆด ์ ์๊ฒ ๋ง๋ ๋ค = ๊ทธ๊ฑธ ๊ธฐ์กด ๊ฐ์ ์ด๋ฏธ์ง ํญ๋ชฉ์ ๋ณต๋ถํด์ ๋ง๋ ๋ค'
๋์ถฉ ์ด๋ ๊ฒ ์ ๋ฆฌ ๊ฐ๋ฅํ ๊ฒ ๊ฐ์
์๋ฌดํผ ๊ทธ๋ผ