๐ค UXUI/UI ๋ฐฉ๋ฒ๋ก (6)
-
User Flow #2 : ๋๋ง์ ์ ์ ํ๋ก์ฐ ๋ง๋ค๊ธฐ
์ค๋์ ๋๋ง์ ์ ์ ํ๋ก์ฐ๋ฅผ ๋ง๋ค์ด ๋ณด๋ ค๊ณ ํ๋ค! ๐โ๏ธ User Flow์ ์ธ ๊ฐ์ง ๋ฒ์น 1. Purpose : ๋์ ์ ์ ํ๋ก์ฐ์ ๋ชฉ์ ์? ์ ๋ฒ ํฌ์คํ ์์ ๋ค๋ฃจ๊ธด ํ์ง๋ง, ๊ฐ์ฅ ์ฒ์์ผ๋ก ํด์ผํ ๊ฒ์ ์ฌ์ฉ์์ ๋ชฉํ, ๋ชฉ์ ์ ์ ํ๋ ๊ฒ์ด๋ค. ์ ์ ์ ์ฑ์ทจ/๋ฌ์ฑ ์ฆ, ๋จ๊ณ์ ์ต์ข ๋ชฉ์ ์ง๋ฅผ ์จ์ผ ํ๋ค. ๊ทธ ๋ชฉ์ ์ ๋ฌ์ฑํ๊ธฐ ์ํด ์ฌ์ฉ์๊ฐ ์ด๋ป๊ฒ ์ด๋ํ๋ ์ง ๊ฒฝ๋ก๋ฅผ ๊ทธ๋ ค๋๊ฐ๋ ๊ฒ์ด๋ค. 2. Go in One Direction : ๋๋ฌด ๋ง์ ๋ณ์๋ฅผ ์๊ฐํ์ง ๋ง ๊ฒ ์ ์ ํ๋ก์ฐ๋ฅผ ๊ทธ๋ฆฌ๋ค๋ณด๋ฉด, ์ฌ์ฉ์์ ๋ค์ํ ํ๋ฆ์ ์์ํ๊ฒ ๋๋ค. '์ด๋ ๊ฒ ๊ฐ๋ฉด ์ด๋กํ์ง?'๋ผ๋ ์๊ฐ์ด ๋ค ์๋ฐ์ ์๋ค. ํ์ง๋ง ์ ์ ํ๋ก์ฐ๋ ๋ด๊ฐ ์ ํ ๋ชฉ์ ์ ๋ง๊ฒ ์ฌ์ฉ์๊ฐ ์์ง์ด๋ ๊ฐ์ฅ ์ด์์ ์ธ ๊ฒฝ๋ก๋ฅผ ๊ทธ๋ฆฌ๋ ๊ฒ์ด๋ค. ๋ง์ฝ ์ด๋ค ํ๋ฆ์์ ์ดํ์ด ์์ ..
2022.03.13 -
User Flow #1 : ์ ์ ํ๋ก์ฐ๋?
์ผ๋ง ์ ๋์์ธ์์คํ ์๋ฆฌ์ฆ๋ฅผ ๋ค ๋ง์น๊ณ ๋์ ๋์์จ ์๋ก์ด UIUX ๋ฐฉ๋ฒ๋ก ์๋ฆฌ์ฆ! ์ด๋ฒ ์๋ฆฌ์ฆ์์๋ User Flow์ ๋ํด ์์๋ณด๋ ค ํ๋ค. User Flow๋ ์ด๋ ค์ด ๊ฐ๋ ์ด ์๋ ๊ฒ๋ ์๋๊ณ ์์ํ๊ธฐ ์ด๋ ต์ง๋ ์์์ ๋น๊ต์ ํ ๋งํ๋ค. ๊ทธ๋๋ ์ ๋ง ๋ง์ ์นผ๋ผ์ ๋ค์ ธ๋ณด๋ฉฐ ํผ์ ์ ๋ฆฌํด๋ณธ ๋ด์ฉ๋ค์ ๊ฐ๊ณตํด ์ฌ๋ ค๋ณด๋ ค๊ณ ํ๋ค. ๐ฌ User Flow๋ ์ธ์ ์์ํ๋ฉด ๋ ๊น? ๋ด๊ฐ ์ฒ์์ User Flow๋ผ๋ ๊ฐ๋ ์ ์ ํ๊ณ ๋ ๋ค, ๋ ์ค๋ฅธ ์๊ฐ์ด์๋ค. User Flow๋ ์ธ์ ์์ํ๋ ๊ฒ์ด ์ข์๊น? ๋ง์ฝ ๋ด๊ฐ ์์ด๋์ด ๊ธฐํ๋ถํฐ ๋์์ธ ์์ฑ๊น์ง ์ฃผ๋ํ๋ ๊ฐ์ธ ํ๋ก์ ํธ๋ผ๋ฉด, ์๋น์ค์ ๊ดํ ๋ด์ฉ๋ค์ ๋ชจ๋ ์ ํ ํ ๋๋ต์ ์ธ ๋ฉ์ธ ํ๋ฉด ๊ตฌ์ฑ๊ณผ ํจ๊ป ์์ํ๋ ๊ฒ์ด ์ข๋ค. ์ ์ ํ๋ก์ฐ๋ ๊ธฐ์ด OF ๊ธฐ์ด์ด๊ธฐ ๋๋ฌธ์ ์ด๊ธฐ ๋จ๊ณ์ ..
2022.03.12 -
Design System #4 - UI ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ง๋ค๊ธฐ
๋ฒ์จ ๋ง์ง๋ง ํฌ์คํ ์ด๋ผ๋! ์ ๋๋ค(?) ์ค๋์ UI Library๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ์ ๋ํด ์์๋ณด๊ณ ๋์์ธ์์คํ ์ ๋ง๋ฌด๋ฆฌํด๋ณด๋ ค๊ณ ํ๋ค. โ Creating a user interface library ๊ทธ๋ฐ๋ฐ UI Library๋ ๋ญ๊น? ์ ๋ฒ ํฌ์คํ ์์๋ Visual Language๋ฅผ ๊ตฌ์ถํ๋ ๋ฒ์ ๋ํด ๋ฐฐ์ ๋ค. ๊ทธ๊ฒ์๋ ์ปฌ๋ฌ, ๊ฐ๊ฒฉ, ๋ง์ง ๋ฑ์ ์์์์์ ๊ธฐ์ด์ ์ธ ์์๊ฐ ํฌํจ๋๋ค. ํ์ง๋ง UI Library์๋ ์นด๋, ๋ฒํผ, ๋ฆฌ์คํธ ๋ฑ์ ํ ๋ฌถ์์ ๋ค๋ฃฌ๋ค. Visual Language์ ๋ค์ ๋จ๊ณ๋ผ๊ณ ๋ณผ ์ ์๋ค. ๊ทธ๋ฐ๋ฐ UI Library์๋ ๋จ๊ณ๊ฐ ์๋ค. ๐ Atomic Design ์ํฐ ๋์์ธ์ ๋์์ธ์์คํ ์ ๋ง๋ค ๋ ๊ฐ์ฅ ๋ณดํธ์ ์ผ๋ก ์ฌ์ฉํ๋ ๋ชจ๋ธ์ด๋ผ๊ณ ์๊ฐํ๋ฉด ๋๋ค. ์์์์๋ถํฐ ์ธํฌ, ์กฐ์ง์ ๊ณผํ์ ..
2022.03.08 -
Design System #3 - ๋น์ฃผ์ผ๋ญ๊ท์ง ๊ตฌ์ถํ๊ธฐ
์ค๋์ Visual Language๋ฅผ ์ด๋ ํ ๊ธฐ์ค์ผ๋ก ๋ถ๋ฅํ์ฌ ๋ง๋ค์ด์ผํ๋์ง ์์๋ณผ ๊ฒ์ด๋ค. ๋ณธ ํฌ์คํ ์ InVision์์ ๋ฌด๋ฃ๋ก ์ ๊ณตํ๋ ํธ๋๋ถ์ ๋ฒ์ญํ์ฌ, ๋ด๊ฐ ์ดํดํ๋๋ก ๋์์ธ์์คํ ์ ์ค์ ํฌ์ธํธ์ ํต์ฌ๋ง์ ๋ด์๋ค. ๐ค Creating A Visual Design Language ์ด์ ๋ณธ๊ฒฉ์ ์ผ๋ก Visual Attributes์ ํด๋นํ๋ Visual Design Language๋ฅผ ์ ์ํด๋ณผ ๊ฒ์ด๋ค. ๊ธฐ๋ณธ์ ์ผ๋ก๋ ๋ค์๊ณผ ๊ฐ์ ์์๊ฐ ํฌํจ๋๋ค. 1. Color 2. typography (size, leading, typeface, ...) 3. Spacing (margins, paddings, positioning coordinates, border spacing, ...) 4. Images (icon..
2022.03.06 -
๋์์ธ์์คํ (Design System) ์ค๊ณํ๋ ๋ฐฉ๋ฒ
์ค๋์ ์ ๋ฒ ํฌ์คํ ์ ์ด์ด ๋์์ธ์์คํ ์ ํ๊ณ์ฒ๋ผ ๋๊ปด์ง๋ ๊ฒ์ด ๋ฌด์์ธ์ง, ๋์ ๋์์ธ์์คํ ์ ๊ตฌ์ถํ ๋ ๋ฌด์๋ถํฐ ์์ํด์ผ ํ ์ง ์์๋ณด๋ ค๊ณ ํ๋ค. ๋ณธ ํฌ์คํ ์ InVision์์ ๋ฌด๋ฃ๋ก ์ ๊ณตํ๋ ํธ๋๋ถ์ ๋ฒ์ญํ์ฌ, ๋ด๊ฐ ์ดํดํ๋๋ก ๋์์ธ์์คํ ์ ์ค์ ํฌ์ธํธ์ ํต์ฌ๋ง์ ๋ด์๋ค. ๐ผ ๋์์ธ์์คํ ์ ๊ดํ ๊ฑฑ์ ๋์์ธ์์คํ ์ ๋ง๋ค๊ธฐ๋ก ์์ ํ๋ค๋ฉด ์ ์ผ ๋จผ์ ์ด๋ฐ ๊ฑฑ์ ์ด ๋ค ๊ฒ์ด๋ค. 'ํน์ ํ ๊ตฌ์ญ์ ํด๋น ์ปดํฌ๋ํธ๊ฐ ์ ๋ค์ด๋ง์ง ์๋๋ค๋ฉด? ๋๋ ๊ทธ ๊ตฌ์ญ์ ์ ์ผ ์ ํฉํ ๋์์ธ์ ํฌ๊ธฐํ๊ณ ์๋ ์๋ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํด์ ๋์์ธ ์ฑ๋ฌด(Design Debt)๋ฅผ ์ค์ฌ์ผ ํ๋?' ๋ฐ๋ก Too Limiting์ ๊ดํ ๊ฑฑ์ ์ธ ๊ฒ์ด๋ค. ํ์ง๋ง ์ด ์ฑ ์์๋ ์ด๋ ๊ฒ ์ค๋ช ํ๋ค. ๋๋ถ๋ถ์ ๋์์ด๋๋ค์ ์ด๋ ํ ๋ฌธ์ ๊ฐ ์๊ฒผ์ ๋ ์๋ก์ด ๋์์ธ์..
2022.03.04 -
๋์์ธ์์คํ (Design System)์ด๋?
UIUX ๊ณต๋ถ๋ฅผ ์์ํ๋ฉด์ ํ๋ฒ์ฏค์ ์ ํ๊ฒ ๋ ๋์์ธ์์คํ ! ์ฒ์์ ๊ทธ๋ฐ๊ฐ๋ณด๋ค ํ๊ณ ๋๊ฒผ์ง๋ง, ์ ํ๋ฉด ์ ํ ์๋ก ๋์์ธ์์คํ ์ ์ค์ํ ๊ฐ๋ ์ธ ๊ฒ ๊ฐ์ ์๋ฆฌ์ฆ๋ก ํฌ์คํ ์ ์ ์ํ๊ธฐ๋ก ํ๋ค. ์ด ํฌ์คํ ์ ์ธ๊ตญ ๋์์ธํ์ฌ InVision์์ ์ ์ํ ํธ๋๋ถ์ ๋ฐํ์ผ๋ก ์์ฝ ๋ฐ ์ ๋ฆฌํด ๋ณธ ์๋ฃ๋ค. ์ฐธ๊ณ ๋ก ์ ํธ๋๋ถ์ ๋ชจ์กฐ๋ฆฌ ์์ด๋ค.. ๋ด๊ฐ ์์ด๋ฅผ ์ ํ๋ ๊ฒ์ ์๋์ง๋ง ๊ทธ๋๋ ์ด์ฌํ ํผ์ ์ฝ์ผ๋ฉฐ ์ ๋ฆฌํ๋ค ใ ๐ผ ๋์์ธ์์คํ ์ ์ ์กด์ฌํ ๊น? ๋์์ธ์์คํ ์ Reusability(์ฌ์ฌ์ฉ์ฑ) ๋จ ํ๋๋ฅผ ์ํด ์กด์ฌํ๋ค๊ณ ํด๋ ๊ณผ์ธ์ด ์๋๋ค. ํฐ ํ์ฌ์ ๊ฒฝ์ฐ์๋ ๋ง์ ๋์์ด๋๊ฐ ๊ฐ์ ๋์์ธ ํํ๋ฅผ ๋ง๋ค์ด๋ด์ผ ํ๊ธฐ ๋๋ฌธ์, ๊ธฐ์กด์ ์ผ๋ ๋์์ธ ์์๋ฅผ ๋ฐ๋ณตํด์ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ ๊ฒ์ด๋ค. ๊ทธ๋ฐ๋ฐ ๋์์ธ์์คํ ์ด ์กด์ฌํ์ง ์๋๋ค๋ฉด,..
2022.03.03