UI / UX ๋์์ธ
๋ช ์ฌ ยท ์ธํฐํ์ด์ค ๋์์ธ
UX(User Experience โ ์ฌ์ฉ์ ์กฐ์ฌ, ์ ๋ณด ์ํคํ ์ฒ, ์ฌ์ )์ UI(User Interface โ ๋น์ฃผ์ผ ๋์์ธ, ์ปดํฌ๋ํธ, ์ธํฐ๋์ )๋ฅผ ๊ฒฐํฉํ์ฌ ์ง๊ด์ ์ด๋ฉด์ ์ฌ๋ฏธ์ ์ธ ๋์งํธ ์ ํ์ ๋ง๋๋ ์ด์ค ๋ถ์ผ์ ๋๋ค.
์ฌ์ฉ์์ ๋์ฆ, ํ๋ ๋ฐ ๋ถ๋ง ์ฌํญ์ ์ดํดํ๋ ๊ฒ์์ ์์ํ์ฌ(UX), ์ด๋ฌํ ์ธ์ฌ์ดํธ๋ฅผ ์ ๊ทผ ๊ฐ๋ฅํ๊ณ ์ผ๊ด์ฑ ์์ผ๋ฉฐ ๋งค๋ ฅ์ ์ธ ๋น์ฃผ์ผ ์ธํฐํ์ด์ค๋ก ๋ณํํ๋(UI) ์ฌ์ฉ์ ์ค์ฌ ์ ๊ทผ ๋ฐฉ์์ ๋๋ค.
์จ๋ผ์ธ ์ ํ๊ณผ ์ถฉ์ฑ๋์ ๊ฒฐ์ ์ ์ธ ์์ โ ์๊ฒฉํ UX/UI ๋์์ธ์ ์ดํ๋ฅ ์ ์ค์ด๊ณ , ์ฌ์ดํธ ์ฒด๋ฅ ์๊ฐ์ ๋๋ฆฌ๋ฉฐ, ์ ์ฐํ ์ฌ์ ๊ณผ ์๋ฒฝํ ์ฌ์ฉ์ฑ์ผ๋ก ๋ฐฉ๋ฌธ์๋ฅผ ๊ณ ๊ฐ์ผ๋ก ์ ํํฉ๋๋ค.
UX(User Experience)๋ ๋์งํธ ์ ํ์ ๋ํ ์ฌ์ฉ์์ ์ ์ฒด์ ์ธ ๊ฒฝํ์ ๊ด๋ จ๋ฉ๋๋ค: ์ฌ์ฉ ์ฉ์ด์ฑ, ๋ ผ๋ฆฌ์ ์ธ ์ฌ์ , ๋ง์กฑ๋. UI(User Interface)๋ ์ธํฐํ์ด์ค์ ์๊ฐ์ ์ธก๋ฉด์ ์ค์ ์ ๋ก๋๋ค: ์์, ํ์ดํฌ๊ทธ๋ํผ, ๋ฒํผ, ์ ๋๋ฉ์ด์ . UX์ UI๋ ํจ๊ป ๊ณ ์ฑ๋ฅ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค๊ธฐ ์ํด ํ์์ ์ธ ์ํธ ๋ณด์์ ๋ถ์ผ๋ฅผ ํ์ฑํฉ๋๋ค. Async Code์์๋ ์ฐธ์ฌ์ ์ ํ์ ๊ทน๋ํํ๊ธฐ ์ํด ์ค๊ณ ๋จ๊ณ๋ถํฐ ์ด ๋ ์ ๊ทผ ๋ฐฉ์์ ํตํฉํฉ๋๋ค.
UI(User Interface)๋ ์ฌ์ฉ์๊ฐ ์ํธ์์ฉํ๋ ์ธํฐํ์ด์ค์ ๋น์ฃผ์ผ ๋์์ธ์ ์๋ฏธํฉ๋๋ค: ๋ ์ด์์, ์์ ํ๋ ํธ, ํ์ดํฌ๊ทธ๋ํผ, ์์ด์ฝ, ๋ฒํผ ๋ฐ ๋ง์ดํฌ๋ก ์ ๋๋ฉ์ด์ . ๋์งํธ ์ ํ์ ๋งค๋ ฅ์ ์ด๊ณ ์ ๋ฌธ์ ์ผ๋ก ๋ง๋๋ ์ฌ๋ฏธ์ ๋ ์ด์ด์ ๋๋ค. Async Code์์ ์ ํฌ UI ๋์์ด๋๋ ๋ธ๋๋ ์์ด๋ดํฐํฐ์ ์ผ๊ด๋ ์ฐ์ํ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋ค๋ฉฐ, ์ฌ์ดํธ์ ๋ชจ๋ ํ์ด์ง์์ ๊ท ์ผ์ฑ์ ๋ณด์ฅํ๋ ๋์์ธ ์์คํ ์ ์ฌ์ฉํฉ๋๋ค.
UX์ ๋ชฉํ๋ ๋์งํธ ์ ํ์ ์ ์ฉํ๊ณ , ์ฌ์ฉ ๊ฐ๋ฅํ๋ฉฐ, ๋งค๋ ฅ์ ์ผ๋ก ๋ง๋๋ ๊ฒ์ ๋๋ค. ๊ตฌ์ฒด์ ์ผ๋ก ์ด๋ ์ฌ์ฉ์ ์ฌ์ ์ ๋จ์ํํ๊ณ , ๋ง์ฐฐ ํฌ์ธํธ๋ฅผ ์ ๊ฑฐํ๋ฉฐ, ์ ๊ทผ์ฑ์ ๊ฐ์ ํ๊ณ , ์ ๋ฐ์ ์ธ ๋ง์กฑ๋๋ฅผ ๋์ด๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค. ์ข์ UX๋ ์ดํ๋ฅ ๊ฐ์, ์ฌ์ดํธ ์ฒด๋ฅ ์๊ฐ ์ฆ๊ฐ, ์ ํ์จ ํฅ์์ผ๋ก ์ธก์ ๋ฉ๋๋ค. ์ ํฌ ์์ด์ ์ Async Code๋ ์ธก์ ๊ฐ๋ฅํ ๊ฒฐ๊ณผ๋ฅผ ๋ณด์ฅํ๊ธฐ ์ํด ๋ชจ๋ ํ๋ก์ ํธ์ ๊ธฐ๋ฐ์ UX ์กฐ์ฌ๋ฅผ ๋๊ณ ์์ต๋๋ค.
UX ๋์์ธ์ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ตฌ์กฐ, ๋ก์ง ๋ฐ ๋๋์ ์ง์คํ๊ณ (์กฐ์ฌ, ์์ด์ดํ๋ ์, ์ฌ์ฉ์ ํ ์คํธ), UI ๋์์ธ์ ์ต์ข ์๊ฐ์ ์ธ๊ด์ ๋ด๋นํฉ๋๋ค(์์, ํ์ดํฌ๊ทธ๋ํผ, ๊ทธ๋ํฝ ์ปดํฌ๋ํธ). UX๋ '์ด๋ป๊ฒ ์๋ํ๋๊ฐ'๋ฅผ ์ ์ํ๊ณ , UI๋ '์ด๋ป๊ฒ ๋ณด์ด๋๊ฐ'๋ฅผ ์ ์ํฉ๋๋ค. Async Code์์ ์ ํฌ ๋์์ด๋๋ ์ฌ์ฉํ๊ธฐ ์ง๊ด์ ์ด๋ฉด์ ์๊ฐ์ ์ผ๋ก ๋ฐ์ด๋ ์ธํฐํ์ด์ค๋ฅผ ์ ๊ณตํ๊ธฐ ์ํด ์ด ๋ ๋ถ์ผ๋ฅผ ๋ชจ๋ ๋ง์คํฐํฉ๋๋ค.
UX/UI์ ํฌ์ํ๋ ๊ฒ์ ํ์์ ์ ๋๋ค. ์ฌ์ฉ์์ 88%๊ฐ ๋์ ๊ฒฝํ ํ์ ์ฌ์ดํธ๋ฅผ ์ฌ๋ฐฉ๋ฌธํ์ง ์๊ธฐ ๋๋ฌธ์ ๋๋ค. ์ ๋ฌธ์ ์ธ UX/UI ๋์์ธ์ ์ ํ์ ๋์ด๊ณ , ์ง์ ๋น์ฉ์ ์ค์ด๋ฉฐ, ๋ธ๋๋์ ์ ๋ขฐ๋๋ฅผ ๊ฐํํฉ๋๋ค. Google ๋ํ Core Web Vitals๋ฅผ ํตํด ์ฌ์ฉ์ ๊ฒฝํ์ SEO ์์ ๊ธฐ์ค์ ํตํฉํ๊ณ ์์ต๋๋ค. Async Code์์๋ ์๊ฒฉํ ์ฌ์ฉ์ ์กฐ์ฌ์ ๊ณ ํ์ง ๋น์ฃผ์ผ ๋์์ธ์ ๊ฒฐํฉํ์ฌ ์ ํํ๋ ์ธํฐํ์ด์ค๋ฅผ ์ค๊ณํฉ๋๋ค.
UI(User Interface)๋ ๋น์ฃผ์ผ ์ธํฐํ์ด์ค ๋์์ธ์ ๋๋ค: ๋ฒํผ, ๋ฉ๋ด, ์์, ํ์ดํฌ๊ทธ๋ํผ. UX(User Experience)๋ ์ ์ฒด์ ์ธ ๊ฒฝํ ์ค๊ณ์ ๋๋ค: ์ฌ์ฉ์ ์ฌ์ , ๋ด๋น๊ฒ์ด์ ์ฉ์ด์ฑ, ๋ง์กฑ๋. UI๋ ๋ณด์ด๋ ๊ฒ์ด๊ณ , UX๋ ๋๋ผ๋ ๊ฒ์ ๋๋ค. ์ด ๋ ๋ถ์ผ๋ ๊ณ ์ฑ๋ฅ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค๊ธฐ ์ํด ์ํธ ๋ณด์์ ์ด๋ฉฐ ๋ถ๋ฆฌํ ์ ์์ต๋๋ค. ์ ํฌ ์์ด์ ์ Async Code๋ ์๋ฆ๋ต๊ณ ํจ๊ณผ์ ์ธ ๋์งํธ ์ ํ์ ์ ๊ณตํ๊ธฐ ์ํด ์ฒด๊ณ์ ์ผ๋ก ์ด๋ฅผ ํตํฉํฉ๋๋ค.
UX์ UI๋ ๋์ ์ ์๋ฉด์ ๋๋ค: UX๋ ๊ธฐ๋ฅ์ ํ ๋(์ ๋ณด ์ํคํ ์ฒ, ์ฌ์ , ์์ด์ดํ๋ ์)๋ฅผ ์ธ์ฐ๊ณ , UI๋ ์ด ํ ๋๋ฅผ ์ผ๊ด๋๊ณ ๋งค๋ ฅ์ ์ธ ๋น์ฃผ์ผ ์์ด๋ดํฐํฐ๋ก ์ ํ๋๋ค. ์ข์ UX ์๋ ํ๋ฅญํ UI๋ ์๋ฆ๋ต์ง๋ง ์ฌ์ฉํ๊ธฐ ๋ต๋ตํ ์ฌ์ดํธ๋ฅผ ๋ง๋ญ๋๋ค. ๋ฐ๋๋ก ์ข์ UX์ ํํธ์๋ UI๋ ๋งค๋ ฅ์ด ๋ถ์กฑํฉ๋๋ค. Async Code์์๋ ์์ ํ๊ณ ๊ณ ์ฑ๋ฅ์ ๋์งํธ ๊ฒฝํ์ ๋ง๋ค๊ธฐ ์ํด ์ด ๋ ๋ถ์ผ๋ฅผ ์กฐํ์ํต๋๋ค.
UI(User Interface)๋ ๋์งํธ ์ ํ์ ์ํธ์์ฉ ์์์ ๋น์ฃผ์ผ ๋์์ธ์ ์ ๋ ํ๋ ๋์์ธ ๋ถ์ผ์ ๋๋ค. ๋์์ธ ์์คํ ์์ฑ, ์์ ํ๋ ํธ ์ ํ, ํ์ดํฌ๊ทธ๋ํผ ๊ณ์ธต ๊ตฌ์กฐ, ์ธํฐ๋ํฐ๋ธ ์ปดํฌ๋ํธ ์ค๊ณ๋ฅผ ํฌ๊ดํฉ๋๋ค. Async Code์์ ์ ํฌ UI ์ ๋ฌธ๊ฐ๋ RGAA ๋ฐ WCAG ์ ๊ทผ์ฑ ํ์ค์ ์ค์ํ๋ฉด์ ๋ธ๋๋ ์์ด๋ดํฐํฐ๋ฅผ ๋ฐ์ํ๋ ํฝ์ ํผํํธ ์ธํฐํ์ด์ค๋ก UX ์์ด์ดํ๋ ์์ ๋ณํํฉ๋๋ค.
UX(User Experience)๋ ์ฌ์ฉ์๊ฐ ๋์งํธ ์ ํ๊ณผ ์ํธ์์ฉํ๋ ๋์ ๊ฒฝํํ๋ ์ ์ฒด ๊ฒฝํ์ ์ต์ ํํ๋ ๋ถ์ผ์ ๋๋ค. ์ฌ์ฉ์ ์กฐ์ฌ, ํ๋ฅด์๋ ์ ์, ์ฌ์ ์์ฑ, ํ๋กํ ํ์ดํ ๋ฐ ์ฌ์ฉ์ฑ ํ ์คํธ๋ฅผ ํฌํจํฉ๋๋ค. ๋ชฉํ๋ ์ฌ์ฉ์์ ๋์ฆ์ ์ ํํ๊ฒ ๋ถ์ํ๋ ์ง๊ด์ ์ธ ์ธํฐํ์ด์ค๋ฅผ ์ค๊ณํ๋ ๊ฒ์ ๋๋ค. Async Code์์๋ ๋ง์กฑ๋์ ์ ํ์ ๊ทน๋ํํ๊ธฐ ์ํด ๋ชจ๋ ๋์์ธ ๊ฒฐ์ ์ ๊ตฌ์ฒด์ ์ธ UX ๋ฐ์ดํฐ์ ๊ธฐ๋ฐํฉ๋๋ค.
UI Design(User Interface Design)์ ๋์งํธ ์ธํฐํ์ด์ค์ ์๊ฐ์ ์ด๊ณ ์ธํฐ๋ํฐ๋ธํ ์ธก๋ฉด์ ์ค๊ณํ๋ ์ค๋ฌด์ ๋๋ค. ๋ ์ด์์, ์์ ํ๋ ํธ, ํ์ดํฌ๊ทธ๋ํผ, ์์ด์ฝ, ๋ฒํผ, ์ ๋๋ฉ์ด์ ๋ฐ ์ ํ์ ํฌํจํฉ๋๋ค. UI ๋์์ธ์ ์ฌ๋ฏธ์ฑ์ ๋์ด์: ํต์ฌ ์ก์ ์ผ๋ก ์ฌ์ฉ์์ ์ฃผ์๋ฅผ ์๋ดํ๊ธฐ ์ํด ์๊ฐ์ ๊ณ์ธต ๊ตฌ์กฐ๋ฅผ ๊ตฌ์กฐํํฉ๋๋ค. ์ ํฌ ์์ด์ ์ Async Code๋ ๋ชจ๋ ๊ธฐ๊ธฐ์์ ์ ํ์ ์ต์ ํ๋ ํ๋์ ์ด๊ณ ์ ๊ทผ ๊ฐ๋ฅํ UI ๋์์ธ์ ๋ง๋ญ๋๋ค.