๋ชจ๋ฌ vs ํ์
๐ท๏ธ Vivian's curating ๊ธฐํ์์ ์ํตํ๋ค๋ณด๋ ๋ชจ๋ฌ๊ณผ ํ์ ์ ๋ชจ๋ ํผ์ฉํด์ ์ฌ์ฉํ๊ณ ์๋ ๊ฒ์ ์๊ฒ ๋์ด ํ ๋ฒ ํ์คํ ์ ๋ฆฌํ๊ณ ๋์ด๊ฐ ํ์๊ฐ ์๋ค๊ณ ์๊ฐํ๋ค. ๊ทธ๋ฐ๋ฐ ๋์กฐ์ฐจ๋ ๋ชจ๋ฌ๊ณผ ํ์ ์ ์ฐจ์ด๋ฅผ ์ ๋๋ก ์ค๋ช ํ๊ธฐ๊ฐ ์ด๋ ค์ ๋ค. ์ ์ ๋ ๋ด์ฉ ์ ๋ฆฌ๋ฅผ ํ์๋๋ฐ ์๊ฐ์ด ์ง๋๋ ๊ธฐ์ต์ด ํฌ๋ฏธํด์ง ๊ฒ์ด๋ค..๐ฅฒ ์คํ๋ ค ์๋๋ค, ์ด๋ฒ์ ๋ค์ ์ ๋๋ก ์ ๋ฆฌํด์ ์๋ฒฝํ๊ฒ ์ต๋ํด์ผ๊ฒ ๋ค ์๊ฐํ๊ณ ๊ด๋ จ๋ ์ํฐํด์ ์ฌ๋ฌ๊ฐ ์ฐพ์์ ์ฝ์ด๋ณด๋ฉฐ ์ ๋ฆฌํ์๋ค. ๋ชจ๋ฐ์ผ์ ์น ๋ธ๋ผ์ฐ์ ๋งํผ ์ฉ๋์ ์ฐจ์ด๊ฐ ํ์ฐํ์ง ์์ ๊ฒ ๊ฐ์ง๋ง ํ์ ๊ณผ ๋ฐํ ์ํธ(๋ชจ๋ฌ)๋ก ์ ๋ฆฌํ์ฌ ์ฝ์ด๋ณด๋ ์กฐ๊ธ์ ๊ฐ์ด ์กํ๋ค. ๋ํ ์ค๋ต๋ฐ์ ํ ์คํธ๋ฉ์์ง์ ๋ํ ์ฐจ์ด๋ ์ด๋ฒ์ ํ์คํ ์์๋ค. ๊ธฐ์ ๋ง๋ค ์ฉ์ด๊ฐ ๋ฌ๋ผ์ ๋ ํท๊ฐ๋ฆฌ๋ ๋ถ๋ถ์ด ์์ด ์ฉ์ด๊ฐ ํต์ผ๋๋ฉด ์ฐธ ์ข๊ฒ ๋ค๊ณ ์๊ฐํ์ง๋ง ๊ทธ๋ฐ ์ผ์ ์ผ์ด๋์ง ์๊ฒ ์ง...(ใ ใ ใ ) ์๋ง๋ ๋์ฒ๋ผ ์์ง๋ ๋ชจ๋ฌ๊ณผ ํ์ ์ด ํท๊ฐ๋ฆฌ๋ ๋์์ด๋๊ฐ ์๋ค๋ฉด ์ด ๊ธ์ด ๋ง์ด ๋์์ด ๋ ๊ฒ์ด๋ผ ์๊ฐํ๋ค ๐ + ํน์ ์ด๋ณด๋ค ๋ ์ ํํ๊ฒ ์ ๋ฆฌ๋ ๋ด์ฉ์ด ์๋ค๋ฉด ๊ณต์ ํด ์ฃผ์๊ณ , ๋ค๋ฅธ ์๊ฒฌ์ด ์๋ค๋ฉด ๋๊ธ์ ๋จ๊ฒจ์ฃผ์ธ์ :) โ๏ธ ์์ฝ ๋ชจ๋ฌ UI์ ์๋ฏธ์ ์ ํ ๋ฐฉ๋ฒ 1. ์ฌ์ฉ์์ ์ก์ ์ด ํ์ํ๊ฐ? N โ ์ค๋ต๋ฐ (ํ ์คํธ๋ฉ์์ง) Y โ 2. ๋งค์ฐ ์ค์ํ ์ ๋ณด์ธ๊ฐ? N โ ๋ชจ๋ฌ (๋ฐํ ์ํธ) Y โ ํ์ ์๋ฏธ ์ ์ * ํ์ (Popup) ๊ธฐ์กด์ ์ด๋ ค ์๋ ๋ธ๋ผ์ฐ์ ํ์ด์ง ์์ ๋ ๋ค๋ฅธ ๋ธ๋ผ์ฐ์ ํ์ด์ง๋ฅผ ๋์ฐ๋ ๋ฐฉ์. ์๋ ๋ธ๋ผ์ฐ์ ์ ๋ ๋ฆฝ์ ์ธ ๊ด๊ณ๋ก ๋ธ๋ผ์ฐ์ ์ ์ต์ ์ ํตํด ์ด๋ฆฌ์ง ์๋๋ก ๊ฐ์ ํ ์ ์์. ์ฃผ๋ก 2๊ฐ์ง ์ํฉ์์ ์ฌ์ฉ. 1) ์ฑ ๋๋ ๊ธฐ๊ธฐ ์ํ์ ๊ด๋ จ๋ ์ค์ํ ์ ๋ณด๋ฅผ ์ ๋ฌํ ๋ ex) ์ด์ฉ์์๊ฒ ์์ ์ ๋ํ ๋ด์ฉ์ ํ์ธ์ํฌ ๋, ์๋ฌ๊ฐ ๋ฐ์ํด ์์ ์ ์ํํ์ง ์๊ณ ์๋ ๋จ๊ณ๋ก ๋์๊ฐ๋ค๋ ๊ฒ์ ์๋ฆด ๋ 2) ์ด์ฉ์์ ๊ฒฐ์ ์ด ํ์ํ ๋ ex) ์ด์ฉ์๊ฐ ์ ๋ณด๋ฅผ ์ ๋ ฅ ๋๋ ์ ํํด์ผ ํ๊ฑฐ๋ ์น์ธ์ ํด์ผํ ๋ ํ์ ์ ๊ตฌ์ฑ ์์๋ Scrim(Dimmed), Contents, Button. ์ฌ์ฉ ์ ์ฃผ์ ์ฌํญ์ผ๋ก๋ 1) ์ฌ์ฉ ์ต์ํ - ์๋์ ์ผ๋ก ์ด์ฉ์๋ฅผ ๋ฐฉํดํ์ฌ ํผ๋ก๊ฐ์ ์ค ์ ์์ 2) ๊ฐ๋จํ ํ์คํฌ ์ ๊ณต - ํ์ฌ ํ๋ฉด์ ๋ฒ์ด๋์ง ์๊ณ ์ก์ ์ ์ทจํด์ผํ๋ฏ๋ก ๋๋๋ก ๊ฐ๋จํ ์์ 3) ํ์ดํ์ ์ํฉ์ ๊ฐ๊ฒฐํ๊ฒ ์ค๋ช - ์๋ธ ๋ฌธ๊ตฌ์ ๋ด์ฉ์ด ๊ฒน์น๋ฉด ํ์ดํ ์ญ์ ๊ฐ๋ฅ 4) ๋ฒํผ ๋ฌธ๊ตฌ ๋ช ํํ๊ฒ ์์ฑ - ์ด๋ค ์ก์ ์ธ์ง ๋ฐ๋ก ์ธ์งํ ์ ์์ด์ผ ํจ * ๋ชจ๋ฌ (Modal) ๊ธฐ์กด์ ์ด๋ ค ์๋ ๋ธ๋ผ์ฐ์ ์์ ์๋ก์ด ์ฐฝ์ด ์๋ ๋ ์ด์ด๋ฅผ ๊น๋ ๋ฐฉ์. ์๋ ๋ธ๋ผ์ฐ์ ์ ์ข ์์ ์ธ ๊ด๊ณ, ๋ถ๋ชจ - ์์์ ํํ๋ฅผ ๊ฐ์ง๊ณ ์์ผ๋ฉฐ ๋ธ๋ผ์ฐ์ ์ต์ ๊ณผ ๊ด๊ณ์์ด ๋์ธ ์ ์์. ๋ชจ๋ฌ(๋ฐํ ์ํธ)๋ ํฌ๊ฒ 2๊ฐ์ง ์ํฉ์์ ์ฌ์ฉ. 1) ๊ธฐ์กด ํ๋ฉด๊ณผ ๊ด๋ จ ์๋ ์ฝํ ์ธ ๋ฅผ ์ ๊ณตํ ๋ - ๊ธฐ์กด ์ปจํ ์คํธ์์ ๋ฒ์ด๋์ง ์๊ณ ๊ด๋ จ๋ ์์ ์ ํ ์ ์์ด ๋ ๋น ๋ฅด๊ฒ ํ๋ก์ธ์ค๊ฐ ์งํ๋๋ ๋๋ ์ ๋ฌ ๊ฐ๋ฅ 2) ๋ค์ํ ๋ฉ๋ด๋ฅผ ์ ๊ณตํ ๋ - ํ๋ฉด ์ด๋์ด ๋ฐ์ํ์ง ์์ ์ ์ํ๊ณ ๊ฐํธํ ๋๋ ๋ฐ์ ์ ์์ ๊ตฌ์ฑ ์์๋ Scrim(Dimmed), Handerbar(Indicator), Header, Contents, Button. Scrim ์ฌ๋ถ์ ๋ฐ๋ผ Modal๊ณผ Non-Modal๋ก ๊ตฌ๋ถ. Scrim ์๋ ๊ฒฝ์ฐ - Modal ํ์ : ๋ฐํ ์ํธ์ ํ์คํฌ๋ฅผ ์๋ฃํ๊ฑฐ๋ ์ทจ์ํ๊ธฐ ์ ๊น์ง ๊ธฐ์กด ํ๋ฉด์ ํ์ธํ๊ฑฐ๋ ๋ค๋ฅธ ์ก์ ์ ํ ์ ์์ Scrim ์๋ ๊ฒฝ์ฐ - Non-Modal ํ์ : ๊ธฐ์กด ํ๋ฉด๊ณผ ์ํธ์์ฉ ๊ฐ๋ฅ. ํ์คํฌ ์๋ฃ๋์ง ์์๋ ๊ธฐ์กด ํ๋ฉด ํ์ธ ๊ฐ๋ฅ Handlerbar๋ ๋ฐํ ์ํธ๋ฅผ ํ์ฅํ ์ ์์์ ์๋ ค์ค. Handlerbar๊ฐ ์๋ ๊ฒฝ์ฐ์๋ ์ ์ค์ฒ๋ก ํ์ฅ๊ณผ Pull-to-dismiss(๋น๊ฒจ์ ๋ซ๊ธฐ) ํ์์ . ์๋ ๊ฒฝ์ฐ์๋ ์ ์ค์ฒ๋ก ํ์ฅ์ด ๋ถ๊ฐ๋ฅํ๋ฉฐ Pull-to-dismiss๋ ์ํฉ์ ๋ฐ๋ผ ์ทจ์ฌ์ ํ ๊ฐ๋ฅ. Header๋ ๋ค๋น๊ฒ์ด์ ๋ฐ์ ์ญํ ์ ํ๋ฉฐ, ์ํฉ์ ๋ฐ๋ผ Search bar๋ Tabs์ ๊ฐ์ ์ปดํฌ๋ํธ ํฌํจ ๊ฐ๋ฅ. ์ฃผ์ ์ฌํญ์ ์ด์ฉ์๊ฐ ๊ธฐ์กด ํ๋ฉด์ ํจ๊ป ์ฌ์ฉํ ๋๋ Non-Modal ํ์ ์ ์ ํํด์ผ ํ๋ค๋ ๊ฒ. * ์ค๋ต๋ฐ (Snackbar) ์ค๋ต๋ฐ๋ ์ฌ์ฉ์๊ฐ ์ํํ ์ก์ ์ ๋ํ ํผ๋๋ฐฑ์ ์ค ๋ ์ฌ์ฉ. ์ด ๋ ๋ณ๋์ ์ก์ ์ ๊ณต ๊ฐ๋ฅ. ํ ์คํธ๋ฉ์์ง์ ๋น์ทํ ํํ์ด์ง๋ง ํ ์คํธ๋ ๋จ์ ํผ๋๋ฐฑ ์ธ์ ์ก์ ์ ๊ณต์ด ๋ถ๊ฐ๋ฅํ๋ค๋ ์ฐจ์ด์ ์ด ์์. ๊ตฌ์ฑ ์์๋ Text, Action Button, Image, Icon. ์ด๋ฏธ์ง ์์น์๋ ์์ด์ฝ, ํ๋กํ, ์ด๋ฏธ์ง ๋ฑ์ ๋ฃ์ ์ ์์. ์์ด์ฝ์ ๊ฒฝ์ฐ ์ค๋ต๋ฐ์ ์ ์์ญ์ด ๋งํฌ๋ผ๋ ๊ฒ์ ์ด์ฉ์์๊ฒ ์ฐํ์ ์ผ๋ก ์๋ ค์ฃผ๋ ์ญํ ์ ํจ. ์ฌ์ฉ ์ ์ฃผ์ ์ฌํญ 1) ์ค๋ต๋ฐ์ ์์น๋ฅผ ๊ณ ๋ คํด์ผ ํจ. ์ค์๋๊ฐ ๋์ ๋ฐํ ๋ค๋น๊ฒ์ด์ , ํ๋กํ ๋ฒํผ๊ณผ ๊ฒน์ณ์ง์ง ์๋๋ก ๋ฐฐ์น. 2) ๊ฐ๊ฒฐํ๊ฒ ์์ฑ. ์ ํ๋ ์๊ฐ ์์ ๋น ๋ฅด๊ฒ ์ฝ์ ์ ์๋๋ก ์ต๋ํ ์งง์ ๋ฉ์์ง๋ก ๊ตฌ์ฑ. **์ ๋ฌํ๋ ค๋ ์ฝํ ์ธ ๊ฐ ์ค์ํ ๋ด์ฉ์ด๋ผ๋ฉด ์ค๋ต๋ฐ ๋ณด๋ค๋ ํ์ ์ผ๋ก ์๋ด #UX๋์์ธ #UI๋์์ธ #ํ์ #๋ชจ๋ฌ #๋ ผ๋ชจ๋ฌ #๋ฐํ ์ํธ #ํ ์คํธ๋ฉ์์ง #์ค๋ต๋ฐ #์ฉ์ด