์
๋ฌด์ ์์ด ์ต์ํจ์ด ๊ฐ์ฅ ํฐ ๋ฆฌ์คํฌ์ด์ ๋ฌธ์ ๋ผ๊ณ ์๊ฐ์ ํ๋ค.
๊ทธ๋์ ๋ณธ์ธ ์ง๋ฌด(์
๋ฌด)์ ๋ํ ์ฒดํฌ๋ฆฌ์คํธ๋ฅผ ์์ฑํ๊ณ ํ์ธํ๋ ์ต๊ด์ด ์ค์ํ๋ค.
1. ํ ํ์ด์ง(Screen)์์๋ ํ๋์ ๊ธฐ๋ฅ์๋ง ์ถฉ์คํด๋ผ
ํนํ, ๋ชจ๋ฐ์ผ์ ์ค์ฌ ์๋น์ค๊ฐ ์ฆ๊ฐํ๋ ๋งํผ ๋ชจ๋ฐ์ผ์์ ์๋น์ค๋ฅผ ์ด์ฉํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง๋ค.
์์ ํ๋ฉด์์ ์ฌ๋ฌ๊ฐ์ง ๊ธฐ๋ฅ์ ์ํํ๋ฉด,
- ์ฌ์ฉ์๊ฐ ์ฌ์ฉํ๊ธฐ ํ๋ค๋ฟ๋๋ฌ ์ปจํธ๋กค(์ฌ์ฉ)๋ ํ๋ค๊ธฐ ๋ง๋ จ์ด๋ค.
- ์ฝ์นํ ๊ฐ์ด๋๊ฐ ๋ง๊ตฌ๋ง๊ตฌ ์ถ๊ฐ๋์ด ๋ณต์กํ๊ฒ ๋ ์๋ ์๋ค.
- ๋ณตํฉํ UI์ด๋ ๊ธฐ๋ฅ์ ์ฌ์ด๋ ์ค๋ฅ๋ฅผ ์์ฐํ๊ธฐ๋ ํ๋ค.
ํนํ ์ฐ๋ฆฌ๋ ํ์ด๋ ๋ฉ์ธ ํ๋ฉด์์ ์ด๋ฌํ ์ค์๋ฅผ ์์ฃผํ๋ค.
์ด๊ธฐ ๊ธฐํ์ ํ๊ฑฐ๋ ๋ฆฌ๋ด์ผ์ ๊ฒํ ํ๊ณ ์๋ค๋ฉด, ํ ํ๋ฉด์์ ํ๋์ ๋ฉ์ธ ๊ธฐ๋ฅ์ ์ฌ์ฉ์์๊ฒ ์ ๊ณตํ ์ ์๋๋ก ๋ฐฉํฅ์ ์ก๊ธฐ๋ฅผ ๋ฐ๋๋ค.
๋ฌธ์(ํ๋ฉด์ค๊ณ์) ์์ฑ์ ํ๋์ ํ๋ฉด์ ํ๋์ ๊ธฐ๋ฅ์ ๋ช
์ธํ๊ฒ ๋๋ฉด, ๊ธฐ๋ฅ ์ฝ๋ 1๊ฐ๋น 1ํ์ด์ง๋ก ์์ฑ๋ ์ ์๊ณ ๋ชจ๋ํ ์ฌ ์ฌ์ฉ๋ ์ฉ์ดํด์ง๋ค. ๊ธฐํ ์ด๊ธฐ ๋ผ๋ ์ค๊ณ๋ฅผ ์ ํ์ฌ ํ์ด์ง์ ๊ธฐ๋ฅ์ด ๋ง๋๋ผ๋ ํ ํ์ด์ง์์ ํ๋์ ๊ธฐ๋ฅ์ด ๋์ํ ์ ์๋๋ก ๊ธฐํํ๋ ์ต๊ด์ ๊ธฐ๋ฅด๋๋ก ํ๋ค.
Page Depth๋ 3๋จ๊ณ๊ฐ ์ ๋นํ๋ฉฐ ๊ทธ ์ด์ Depth๊ฐ ํ์ํ๋ค๋ฉด ๋ฐ๋์ Navigation ์ ๋์ด์ ํ์ฌ ์์น๋ฅผ ์ฌ์ฉ์์๊ฒ ์ธ์ง์์ผ์ผ ํ๋ค.
2. ๋น(empty) ํ์ด์ง๋ฅผ ๋ ธ์ถํ์ง ๋ง๋ผ.
๋น ํ์ด์ง๋ ์ฌ์ฉ์์๊ฒ ์ค๋ฅ์ธ์ง ์๋๋ฉด ์ฝํ
์ธ ๊ฐ ์๋ ๊ฒ์ธ์ง ๋ก๋ฉ ์ค์ธ์ง ์ ์ ์๊ฒ ๋ง๋ ๋ค.
์๋ ๋ช ๊ฐ์ง ์ผ์ด์ค๋ฅผ ์ ์ํ๋ค.
2-1. ๋น(empty) ํ์ด์ง์์ ๋ช ์ํด๋ผ (Placeholder ์ง์ )
์ ํ์ ์ฌ๋ก๊ฑด์ด๋ ๋ก๊ณ ๋ฅผ ๋น ํ์ด์ง์ ๋ฃ์์ผ๋ก์จ ํ์ด์ง์ ์ปจํ ์ธ ์์ญ์ ํ์ํ๋ค.
- text tagline : ๊ธ์ ์ ์ด๋ฉฐ ๋ธ๋๋์ ์ด๋ฏธ์ง์ ๋ถํฉ ํด์ผ ํจ.
- non-interactive image : ๊ฐ์กฐ๋์ง ์์ ์ค๋ฆฝ์ ์ฑํฅ์ ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉ
2-2. ๋น(empty) ํ์ด์ง๋ฅผ ๋ง๋ค์ง ๋ง๋ผ
๋ฉ๋ด๋ ํ์ด์ง ์ํฉ์ ๋ฐ๋ผ ๋นํ์ด์ง๋ฅผ ๋
ธ์ถํ์ง ์๊ณ ์ฝํ
์ธ ๋ฅผ ์ ๊ณตํ ์ ์๋ค.
์ฝํ
์ธ ๊ฐ ๋ก๋ฉ๋๊ธฐ ์ ์ฌ์ฉ์์๊ฒ ํ์๋์ด ์ฝํ
์ธ ๊ฐ ํ์๋ ๊ฒ์ ๊ธฐ๋์ํฌ ์ ์๋ค. ๋ฌผ๋ก ์ฝํ
์ธ ๋ก๋ฉ(ํ๋ก๊ทธ๋ ์ค)์ ์ผ์ค ์๊ฒ ์์ด์ผ ํ ๊ฒ์ด๋ค.
- Starter content
์ ๊ท ์ฌ์ฉ์๊ฐ ์๋น์ค๋ฅผ ๋ฐฐ์ฐ๊ณ ํฅ๋ฏธ๋ฅผ ๋๋ผ๊ฒ ์ ๋ํ๋ ๋ฐฉ๋ฒ์ผ๋ก ์ฌ์ฉํ๋ค.
์ฌ์ฉ์๊ฐ ์ฑ์ ์ฆ์ ํ์ํ๋ฉฐ ์์ํ ์ ์๋ ์ปจํ
์ธ ๋ฅผ ์ ๊ณตํ๋ค.
- Educational content
ํ
์คํธ๋ ์ด๋ฏธ์ง๋ก ์ฌ์ฉ์๋ฅผ ์ดํด์ํค๊ธฐ ์ด๋ ค์ด ๊ฒฝ์ฐ ์ปจํ
์ธ ๋ก ์์ฑํ์ฌ ๋ณด์ฌ์ค๋ค.
๋จ, ์ต๋ํ ๊ฐ๊ฒฐํ๊ฒ ์์ฑํด์ผํ๋ฉฐ ๋จ๊ณ๋ฅผ Skip ํ ์ ์์ด์ผ ํ๋ค.
- Best match
๊ฒ์ ๊ธฐ๋ฅ์ ๊ฒฝ์ฐ ์กฐํ๋ ๊ฒฐ๊ณผ๊ฐ ์์ ๊ฒฝ์ฐ, No result ์ ํ
์คํธ๋ณด๋ค
์ ์ฌ ๊ฒ์ ๊ฒฐ๊ณผ๋ฅผ ๋
ธ์ถ์์ผ ์ฌ์ฉ์ ์ค์์ ์ํ ๊ฒ์์คํจ๋ฅผ ๋ณด์ ํ ์ ์๋ค.
2-3. ๊ฒ์ ๊ฒฐ๊ณผ ์์์ ๋น ํ์ด์ง๊ฐ ์๋๋ค.
Placeholder ์ ๊ฒ์ ๊ฒฐ๊ณผ/๋ฐ์ดํฐ ์์์ ๋ช ๋ฐฑํ ๋ค๋ฅธ ์์ญ์ด๋ฏ๋ก ๋ณ๋ ํ์ด์ง ๊ธฐํ์ด ํ์ํ๋ค.
- Placeholder : ๊ตฌ๊ธ ์ด๋ฏธ์ง ๊ฒ์ ์, ๋ฐ์ดํฐ ๋ก๋ฉ ์ ์ ๋ ธ์ถ๋๋ ์์ข ์ด ์ด๋ฏธ์ง
- No data / No search data : ๊ฒ์ ๊ฒฐ๊ณผ ์์ต๋๋ค. No search results found ¯\_(ใ)_/¯
2-4. ์ค๋ฅ ํ์ด์ง๋ฅผ ์ง์ ํด๋ผ
์น์ ๊ฒฝ์ฐ ์๋ชป๋ ์ ๊ทผ์ด๋ ์ญ์ ๋ ํ์ด์ง ์ ๊ทผ์ ๋ํด page not found ํ์ด์ง ์ฌ์ฉ์ ๊ถ๊ณ ํ๊ณ ์๋ค.
Http์ ๊ฒฝ์ฐ 4xx์ค๋ฅ๋ ํด๋ผ์ด์ธํธ ์ค๋ฅ, 5xx ์ค๋ฅ๋ ์๋ฒ ์ค๋ฅ๋ก ๋ถ๋ฅ๋๋ค. (2xx ์ฑ๊ณต)
- ์ค๋ฅ ํ์ด์ง๋ ์ค๋ฅ์ ๋ํ ์ค๋ช
๊ณผ ๋ค์ ์ก์
๋ค์ ๋ฃ์ ์ ์๋ค.
=> ์ฃผ์ ํญ๋ชฉ : ์ค๋ฅ ์ฝ๋ + ๋ฉ์์ง, ๋ค๋ก ๊ฐ๊ธฐ, ํ์ผ๋ก ๊ฐ๊ธฐ
ex> 404, page not found
ex> 500, Internal server error, ์๋น์ค ์ ๊ฒ ์ค, ๊ณต์ฌ ์ค
- ์ค๋ฅ ํ์ด์ง๋ ์๋น์ค ์
๋ฐ์ดํธ๋ ์ ๊ฒ์ค๋ ํฌํจํ ์ ์์ด์ผ ํ๋ค.
=> ๊ณต์ฌ์ค ํ์ด์ง, ์๋น์ค ์ ๊ฒ ์ค ํ์ด์ง
3. ๋ํ์ฐฝ์ ๋ด์ฉ๊ณผ ๋ฒํผ์ ๋ช ์์ ์ผ๋ก ์์ฑํด๋ผ
(๊ตฌ๊ธ/์ ํ/MS ๋ฑ ์ฌ๋ฌ ๊ณณ์ ๊ฐ์ด๋ ์ฐธ์กฐ)
- ๋ํ์ฐฝ ์ข ๋ฅ : Dialog, Confirm, Alert
- ๊ตฌ์ฑ : Title, Content, Button
3-1. ๋ํ์ฐฝ์ ๊ตฌ์ฑ์ ์ ๋ชฉ๊ณผ ๋ด์ฉ, ๋ฒํผ์ผ๋ก ๊ตฌ์ฑ๋์ด์ผ ํ๋ฉฐ, ์ ๋ชฉ์ ์๋ตํ ์ ์๋ค.
์ ๋ชฉ์ ๋ฆฌ์คํฌ๊ฐ ๋์ ์ํฉ์ด๋ ์์ค์ ๋ณผ ์ ์๋ ์ํฉ์์ ์ฌ์ฉํ๋ ๊ฒ์ ๊ถ์ฅํ๋ค.
์ ๋ชฉ์ ๋ด์ฉ์ ์ฝ์ง ์์๋ ๋ํ์ฐฝ์ด ์ ๋
ธ์ถ๋์๋์ง๋ฅผ ์ธ์งํ ์ ์๋ ๋ด์ฉ์ผ๋ก ๊ตฌ์ฒด์ ์ด๋ฉฐ ๋ช
ํํ๊ณ ๊ฐ๊ฒฐํ ๋ฌธ์ฅ์ ์ฌ์ฉํด์ผ ํ๋ฉฐ ์ฌ์ฉ์๋ก ํ์ฌ๊ธ ๋ํ์ฐฝ์ ๋ฒํผ์ ์ ํํ ์ ์์ด์ผ ํ๋ค.
ex>
- ์ข์ ์ : "Erase USB storage?"
- ๋์ ์ : "Are you sure?" , “Warning!”
๋ํ์ฐฝ์ ๋ฒํผ์ ๋ฒ์ฉ์ ์ "์", "์๋์ค"๋ฅผ ์ง์ํ๊ณ ๋ด์ฉ์ด๋ ๋ฌผ์์ ๋ง๋ "๋ค, OOO ํ๊ฒ ์ต๋๋ค.", "์ทจ์ํ๊ฒ ์ต๋๋ค." ์ ๊ฐ์ด ๋ช
ํํ ํ๋์ ์ง์นญํ๋ ๊ฒ์ ๊ถ์ฅํ๋ค.
ex> Discard draft?
- ์ข์ ์ : "Cancel", "Discard"
- ๋์ ์ : "YES", "NO"
3-2. ๋ํ์ฐฝ์ ์ก์
๋ฒํผ ์ค ๊ธ์ ์ ์ธ ๋ฒํผ์ ์ฐ์ธก์, ๋ถ์ ์ ์ธ ๋ฒํผ์ ์ผ์ชฝ์ ๋ฐฐ์น๋ฅผ ํ๋ค.
PC์ ๋ชจ๋ฐ์ผ์ ์ ํต์ ์ผ๋ก ๋ฒํผ์ ์์น(์ผ์ชฝ, ์ค๋ฅธ์ชฝ ๋ฐฐ์น)๊ฐ ๋ค๋ฆ์ ์ธ์งํด์ผ ํ๋ค.
์ฌ์ฉ์๋ ํ์ต์ ํตํด ์ฐ์ธก ๋ฒํผ์์ ์ธ์งํ๊ณ ์์ผ๋ฉฐ, ๋ฌด์์์ ์ผ๋ก OK ๋ฒํผ์ผ๋ก ์๊ฐํ๊ณ ๋๋ฅด๊ฒ ๋๋ค. ์ฌ์ฉ์ ํ์์ ์ฐ์์ฑ์ ๋ณด์ฅํ ์ ์์ผ๋ฉฐ, ๋ฆฌ์คํฌ๊ฐ ๋์ ์ํฉ์์๋ ์ฌ์ฉ์์ ์ค์๋ฅผ ๋ง์ ์ ์๋ค.
ex> ์ฌ์ฉ์ ํ์์ ์ฐ์์ฑ ๋ณด์ฅ
"Delete from Libiray?"
- ์ฐ์ธก : "Delete", "์ญ์ ํ๊ธฐ"
- ์ข์ธก : "Cancel", "์ทจ์ํ๊ธฐ"
ex> ์ฌ์ฉ์ ์ค์ ๋ฐฉ์ง ๋ฐ ์๋น์ค ๋ฆฌ์คํฌ ๊ฐ์
"Using a Google's Location service?"
- ์ฐ์ธก : "Agree", "๋์ํจ" / "๋์ํฉ๋๋ค." / "๋์ํ๊ธฐ"
- ์ข์ธก : "Disagree" , "๋์ ์ ํจ" / "๋์ํ์ง ์์ต๋๋ค." / "๋์ ์ํ๊ธฐ"
3-3. ๋ํ์ฐฝ์ ์ก์ ๋ฒํผ์ 2๊ฐ ์ด์ ๋ฐฐ์นํ๋ ๊ฒ์ ์ง์ํ๋ค.
๋ํ์ฐฝ์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ฌ์ฉ์์๊ฒ ์ด๊ฑฐ Yes or No์ ์ ํ์ ์ํ๋ ๊ธฐ๋ฅ์ด๋ค.
๋ํ์ฐฝ์ ๋ด์ฉ์ด ํด๋ฅผ ๋๊ธฐ ์ํด Learn more ์ ๊ฐ์ ๋ฒํผ์ ์ถ๊ฐํ ๊ฒฝ์ฐ, ์ ํ์ ์ด๋ฃจ์ด์ง์ง ์์ ์ฑ ํ๋ฉด ๋ฐ์ผ๋ก ์ด๋ํ ์ ์๋ค.
ํ์ํ ๊ฒฝ์ฐ Content์ Inline ํ์ฅ ๊ธฐ๋ฅ์ ํ์ฉํ์ฌ ๋ํ์ฐฝ ๋ด์์ ํผ์ณ๋ณด๊ธฐ ์์ผ๋ก ์ถ๊ฐํ ์๋ ์๋ค.
๋จ, ๊ถ์ฅํ์ง๋ ์๋๋ค.
ex> ๋ฒํผ 3๊ฐ๋ฅผ ๋ฃ์ ๋์ ์
"Using a Google's Location service?"
- "Learn more"
- "Disagree"
- "Agree"
3-4. Alert ์ ๋ค๋ฅธ ๋ํ์ฐฝ๊ณผ ๊ตฌ๋ถํ์ฌ ์ฌ์ฉํ ์ ์์ด์ผ ํ๋ค.
Alert์ ์์คํ
์์ ํธ์ถํ๋ ๋ํ์ฐฝ์ผ๋ก ๊ฐํ ๊ฒฝ๊ณ ๋ฅผ ์ฌ์ฉ์์๊ฒ ๋
ธ์ถํ ๋ ํ์ํ๋ค.
์น ๋ธ๋ผ์ฐ์ ์์ Alert ์ฐฝ์ด ํธ์ถ๋๋ฉด ๋ฒํผ ์ก์
์ ์ทจํ์ง ์๊ณ ๋ ํ๋ฉด์์ ์ด๋ ํ ์กฐ์๋ ๋ถ๊ฐ๋ฅํ๋ค๋ ๊ฒ์ ๋ช
์ฌํด์ผ ํ๋ค.
=> ๋ค์ ๋๋๋ฆด ์ ์๋ ์ํฉ์ ์ฌ์ฉ์์๊ฒ ์ธ์ง ์์ผ์ฃผ๋ ๊ฒฝ์ฐ ์ ํฉ.
ex> ์น ํ์ด์ง์์ ์
๋ ฅ ํผ ์์ฑ ์ค ์๋ก๊ณ ์นจ์ด๋ ๋ค๋ก ๊ฐ๊ธฐ ๋ฒํผ์ ๋๋ฅผ ๊ฒฝ์ฐ
์ทจ์ ๋ฒํผ์ ์ ์ฉ
์์ ๋ณด๊ธฐ > uxdesign.cc/the-microcopyist-cancellation-confirmation-conflagration-8a6047a4cf9
- Nevermind : ์์ ์ด์ฉ
=> ๋นจ๊ฐ์์ ์ด์ฉํ์ฌ ์ฌ์ฉ์๋ก ํ์ฌ๊ธ ๋ถ์ , ํ๊ดด, ์ทจ์์ ์๋ฏธ๋ฅผ ์ ๋ฌ
- Keep ๊ณผ Cancel ์ด์ฉ
=> ์ทจ์ ์์ฒญ ๋ํ์ฐฝ์์ ์ ์งํ ๊ฒ์ด๋, ์ทจ์ํ ๊ฒ์ด๋ ๋ช ์์ ์ธ ๋ฒํผ์ ์ ๊ณต
4. Backoffice (Admin) ์ฌ์ดํธ ๊ตฌ์ฑ ์, CRUD ๋ฅผ ์ง์ผ๋ผ
Backoffice ์ ๊ฐ์ด ๊ด๋ฆฌ์ ์น ์ฌ์ดํธ๋ ์๋น์ค์ ๊ฒฝ์ฐ Database๋ฅผ ๊ธฐ์ค์ผ๋ก ํ๋ฉด์ ๊ตฌ์ฑํ๊ฒ ๋๋ค.
์ด ๊ฒฝ์ฐ, ๋น์ง๋์ค ๋ก์ง๋ณด๋ค๋ ๋จ์ ์กฐํ, ์์ , ์ญ์ ๊ธฐ๋ฅ์ด ๋ฉ์ธ์ด๋ค.
๊ธฐ๋ณธ ๊ธฐ๋ฅ์ CRUD
- C (create) : ์ ๊ท ์์ฑ (new)
- R (read) : ์กฐํ (search)
- U (update) : ์์ (modify, update)
- D (delete) : ์ญ์
๊ธฐ๋ณธ(์ฌ์ดํธ) ๊ตฌ์กฐ๋
Menu
> Sub Menu
>> List
>>> Detail View
>>>> ADD / Modify / Delete
๋ฉ๋ด์ ์ ๊ทผํ๋ฉด ๋ฐ์ดํฐ ๋ฆฌ์คํธ๊ฐ ๋
ธ์ถ๋๊ณ ,
๋ฆฌ์คํธ๋ฅผ ์ ํํ๋ฉด ์์ธ ๋ด์ฉ์ด ๋
ธ์ถ๋๊ณ ,
๋ฐ์ดํฐ๋ฅผ ์์ ํ๊ฑฐ๋ ์ญ์ ํ ์ ์๋ ์ก์
์ด ์ฃผ์ด์ง.
๋ฐ์ดํฐ ์ถ๊ฐ๋ ๋ฆฌ์คํธ๋ ์์ธ ๋ทฐ์์๋ ๊ฐ๋ฅํ๋ค.
List,
์ฆ ๊ทธ๋ฆฌ๋ or ํ
์ด๋ธ์ ๊ด๋ฆฌ์ ํ์ด์ง UX์ ํต์ฌ์ด๋ค.
์ด๋ค ๋ฐ์ดํฐ๋ฅผ ํ์ํ ๊ฒ์ธ๊ฐ, ์์์ ์ ๋ ฌ, ๊ฒ์ ์กฐ๊ฑด์ ๊ณ ๋ฏผํด์ผ ํ๋ค.
์กฐํ๋ ๋ฐ์ดํฐ๋ ์ฌ์ฉ์์๊ฒ ์ ์ฉํ ์ ๋ณด๋ฅผ ์ฆ๊ฐ์ ์ผ๋ก ์ค ์ ์์ด์ผ ํ๋ค.
์กฐํ๋ ๋ฐ์ดํฐ์์ ๋ค์ ์ก์
์ด ํ์ํ ๊ฒฝ์ฐ UI๋ฅผ ํตํด ๋ช
์ํด์ ๋ค์ ํ๋์ ์ ๋ํ๋ ๊ฒ๋ ์ข๋ค.
๊ฒ์์ฐฝ์ ํต์ผ์ฑ์ ์ ์งํ๋ ๊ฒ์ด ์ข๋ค.
๋งค๋ฒ ๋ฐ๋๋ ๊ฒ์์ฐฝ UI๋ ์ฌ์ฉ์๋ก ํ์ฌ๊ธ ๋ฆฌ์์ค ์๋ชจ๋ฅผ ๋ฐ์์ํค๊ณ ์ค์๋ฅผ ์ผ๊ธฐ์ํฌ ์ ์๋ค.
์ค์ํ๊ณ ์์ฃผ ์ฐ๋ ๊ฒ์ ์กฐ๊ฑด์ Shortcut ๋๋ ๊ฒ์์กฐ๊ฑด ์ ์ฅ์ ํตํด ์์ฐ์ฑ์ ํฅ์ํด๋ผ
5. Backoffice (Admin) ๊ตฌ์ฑ ๊ณ ๋ฏผ.
๊ด๋ฆฌ์ ํ์ด์ง๋ ์ฉ๋์ ๋ฐ๋ผ ์๋น์ค ๋ถ๋ฆฌ๋ ๊ณ ๋ คํด๋ณผ ๋งํ๋ค.
๋ณดํต 3๊ฐ์ ์๋น์ค๋ก ๊ตฌ๋ถ์ด ๋ณดํธ์ ์ด๋ผ ์๊ฐํ๋ค.
(ํ๋์ ์ฌ์ดํธ์์ ๊ถํ ๋ถ๋ฆฌ๋ ์ข์ ๋ฐฉ๋ฒ์ด๊ธฐ๋ ํ๋ ๋ณด์ ์ทจ์ฝ์ ์ด ๋
ธ์ถ๋ ์ ์๊ธฐ์ ๋๋ฉ์ธ ๋ถ๋ฆฌ๊ฐ ์ข๋ค.)
- ์๋น์ค, ์์คํ ์ค์ ์ฌ์ดํธ : ์๋น์ค๋ ์์คํ ๊ด๋ จ๋ ์ค์ ์ ๋ณด๋ฅผ ๋ค๋ฃจ๋ ๋ฏผ๊ฐํ ๋ถ๋ถ ๋ณ๋ ๋๋ฉ์ธ ๋ถ๋ฆฌ, ๊ฐ๋ฐ/์ด์
- ํํธ๋, ์ ์ ๊ด๋ฆฌ : ํ๋งค๋ฅผ ์ํ CRM ์ฌ์ดํธ ๋ถ๋ฆฌ, ์์
- ํต๊ณ, ๋ถ์ : ์ฌ์ฉ ํจํด ๋ถ์ ๋ฐ ๋ฐ์ดํฐ๋ฅผ ํ์ฉํ๋ ์ฌ์ดํธ ๋ถ๋ฆฌ (DB ๋ถ๋ฆฌ๋ฅผ ํตํ ์ค์๋ฒ ์ํฅ ์ฃผ์ง ์๊ธฐ ๋ฑ), ๋ง์ผํฐ
๋์ ๋ณด๋ ๊ตฌ์ฑ
์ด ๋ถ๋ถ์ ์ข์ ๊ธฐ์ฌ๊ฐ ์์ด์ ๊ทธ๋๋ก ์ฎ๊ฒจ ์๋ค.
- ์ ๋ตํ ๋์๋ณด๋(strategic company dashboard)
- ์์ ํ ๋์๋ณด๋(operational dashboard)
- ๋ถ์ํ ๋์๋ณด๋(analytical dashboard)
https://www.bloter.net/archives/311848
#1. ๋์๋ณด๋์ ์ ์ฌ ์ฌ์ฉ์ ์ดํดํ๊ธฐ
#2. ๋์๋ณด๋ ๋ชฉ์ ๊ณผ ํ์ฉ ๋ฐฉ์ ๊ฒฐ์ ํ๊ธฐ
- ์์ ๋ฑ ์กฐ์ง์ ์ฃผ์ ์์ฌ๊ฒฐ์ ์๊ฐ ์ ์ฒด ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ ์ ๋ตํ ๋์๋ณด๋(strategic company dashboard)
- ๋น์์ํฉ์ด๋ ์ด์์น๋ฅผ ๋น ๋ฅด๊ฒ ์ธ์งํ๊ณ ๋ฐ์ํ๋๋ก ํ๋ ์์
ํ ๋์๋ณด๋(operational dashboard)
- ํธ๋ ๋๋ฅผ ์ดํดํ๊ณ ๋ถ์ํ๋ ๋ถ์ํ ๋์๋ณด๋(analytical dashboard)
- ์ค์๊ฐ์ฑ๊ณผ ํ์(Depth)
#3. ์ ๋ณด ์์ญ ๊ตฌ์ฑํ๊ธฐ
#4. ์ ๋ณด ํํ ๋ฐฉ์ ๊ฒฐ์ ํ๊ธฐ
- 1. ์ด ์ ๋ณด ์์ญ์ ์ฐจํธ๋ฅผ ์ฌ์ฉํ ๊ฒ์ธ๊ฐ?
2. ์ฐจํธ๋ฅผ ์ฐ๊ธฐ๋ก ํ๋ค๋ฉด ์ด๋ค ์ฐจํธ๋ฅผ ์ธ ๊ฒ์ธ๊ฐ?
3. ์ฐจํธ ๊ฐ์ ์ด๋์ด ์์ด์ผ ํ๋ค๋ฉด ์ด๋ค ์ธํฐ๋์
์ด ์ ํฉํ ๊น?
#5. ์๊ฐ์ ์ธ ๊ฐ๋
์ฑ·์ดํด๋ ฅ ๋์ด๊ธฐ
#6. ๊ฒฐ๊ตญ ๊ณ์ ๋ง๋ค๊ณ ํ
์คํธํ๊ณ ๊ณ ์น๊ธฐ
6. ํ๋ฉด ์ค๊ณ์ ๊ธฐ์ค ํด์๋๋ฅผ ์ค์ ํด๋ผ.
ํ๋ฉด์ ์ค๊ณํ ๋ ๊ธฐ์ค ํฌ๊ธฐ์ ๋ฐ์ํ์ ๋ํ ๊ณ ๋ฏผ์ ํด์ผํ๋ค.
์ต์ํ Min/Max ์ ํฌ๊ธฐ ๊ธฐ์ค์ผ๋ผ๋ ์ ์ํด์ผ ์ค์ ๊ฐ๋ฐ๋ ์ฐ์ถ๋ฌผ์ด ์ฌ์ฉ์ ํ๊ฒฝ์ ๋ฐ๋ผ ์์น ์๋ ๋ชจ์ต์ผ๋ก ๋ณด์ฌ์ง๋ ๊ฒ์ ํผํ ์ ์๋ค.
- Windows OS๋ ๊ด์ฐฎ์ง๋ง, Mac OS์ ํด์๋๋ ์๊ฒ, ๋ณดํต, ํฌ๊ฒ ๋ฑ..๋ณํ ํด์๋๊ฐ ๋ง์ผ๋ ์ ์ํด์ผ ํ๋ค.
- SPA(Single page application) ํ๋ฉด ๊ตฌ์ฑ์, ์๋(์)์ ๋ค์ ์ปจํ ์ธ ๊ฐ ์๋ค๋ ๊ฒ์ ํ์ฌ ํ๋ฉด์์ ์ ์ ์์ด์ผ ํ๋ค.
- ์ฆ, ํ์ฌ ๋ณด์ฌ์ง๋ ํ๋ฉด์ ๋ค์ ์ปจํ ์ธ ๊ฐ ๊ฑธ์น๋๋ก ๊ตฌ์ฑ(๋์)ํ์ฌ ์ปจํ ์ธ ์๋น๋ฅผ ์ ๋ํด์ผ ํ๋ค.
ex> Apple ์ฌ์ดํธ๋ ํด์๋๋ฅผ ๋ณ๊ฒฝํ๋๋ผ๋ ํ๋จ์ ์ถ๊ฐ ์ปจํ ์ธ ๊ฐ ์๋ค๋ ๊ฒ์ ์ ์ถํ ์ ์๋๋ก UI๋ฅผ ๊ตฌ์ฑํด๋์๋ค.
๋ฉ์ธ ์ปจํ ์ธ ๊ฐ ํ๋ฉด ์ ์ฒด๋ฅผ ์ฐจ์งํ์ง ์๊ณ ๋ค์ ์ปจํ ์ธ ์๊ฒ ์๋ณด๋ฅผ ํ๊ณ ์๋ค.
ํด์๋ ์ค์ ์ ํ๋ซํผ ๊ธฐ๋ฐ์ผ๋ก 3๊ฐ์ง ํ์ ์ ์ ์ํ ์ ์๋ค.
- PC ๊ธฐ๋ฐ : ์๋์ฐ, Mac ๊ณผ ๊ฐ์ ์์ฉ ์ดํ๋ฆฌ์ผ์ด์ ๋๋ ์น ์๋น์ค
- ํ๋ธ๋ฆฟ ๊ธฐ๋ฐ : ๊ฐ๋ก/์ธ๋ก ๋ชจ๋์ ๋ฐ๋ฅธ ๋ ์ด์์ ๋ฐฐ์น
- ๋ชจ๋ฐ์ผ ๊ธฐ๋ฐ : OS ํ๋ซํผ์ ๋ฐ๋ฅธ ๊ธฐ์ค ํด์๋๊ณผ Min ํด์๋์ ๋ ์ด์์ ์ ์ (๊ธฐ์ค ๋ชจ๋ฐ์ผ๊ธฐ๊ธฐ ๋ชจ๋ธ์ ์ค์ ํ๋ ๊ฒ๋ ์ข์)
Material ์ฌ์ดํธ๋ฅผ ์ฐธ๊ณ ํ์ฌ ํ์ฌ ๊ธฐํํ๊ณ ์๋ ์ ํ์ด๋ ์ ํ์ ๋๋ฉ์ธ์ ๋ง๋ ํด์๋๋ฅผ ์ ํํ๋ฉด ์ข์ ๊ฒ์ด๋ค.
์ฐธ๊ณ ์> material.io/resources/resizer/
- Maximum 1600px : ์ต๋ ํด์๋๋ฅผ ๋์ ๊ฒฝ์ฐ Fix, Strech, Re-arrange ๋ฑ ๋ฐฉ๋ฒ์ ์ ์ํด์ผ ํ๋ค.
- Baseline 1200px : ์ฃผ์ ์ปจํ ์ธ ๋ค์ ๊ธฐ๋ณธ ํด์๋์ ๋ชจ๋ ํ์๋์ด์ผ ํ๋ค.
- Minimum 480px : ๋ฐ์ํ์ ๋ํ ์ต์ ์ฌ์ด์ฆ๋ก ๋ชจ๋ฐ์ผ์์๋ ์ปจํ ์ธ ์๋น์ ์ ์ฝ์ด ์์ผ๋ฉด ์๋๋ค.
- Tablet landscape 1024px : ํ๋ธ๋ฆฟ์ ๊ฐ๋ก๋ชจ๋๋ก ์ปจํ ์ธ ๊ฐ ๋ฐฐ์น๋๋ ํด์๋.
- Tablet portrait 720px : ํ๋ธ๋ฆฟ์ ์ธ๋ก๋ชจ๋๋ก ๋ ์ด์์์ด ๋ฐฐ์น๋๋ ํด์๋.
- Mobile landscape 600px
- Mobile portrait 360px
๋ชจ๋ฐ์ผ ๋ ์ด์์์ด๋ ๋์์ธ์ชฝ์ ๋ ๊ด์ฌ์ด ์๋ค๋ฉด ์๋ ๋งํฌ๋ฅผ ํ์ธํด๋ณด๋ฉด ์ข์ ๊ฒ ๊ฐ๋ค.
- ๋ชจ๋ฐ์ผ ๊ธฐ๊ธฐ ํ๋ฉด์ ๋์ํ๋ ๋ฐฉ๋ฒ : material.io/devices
- ํ๋ฉด ํฌ๊ธฐ ๊ณ์ฐ ์ฌ์ดํธ : www.omnicalculator.com/other/pixels-per-inch
- GSMArena ๋ชจ๋ฐ์ผ ๊ธฐ๊ธฐ ์ฐพ๊ธฐ : www.gsmarena.com/search.php3?
- ์๋๋ก์ด๋ ๊ฐ๋ฐ์ ์ฌ์ดํธ - ํ๋ฉด ํฌ๊ธฐ ๋ถ๋ถ : developer.android.com/training/multiscreen/screensizes
- iOS ๊ฐ๋ฐ์ ์ฌ์ดํธ - ํ๋ฉด ํฌ๊ธฐ ๋ถ๋ถ : developer.apple.com/design/human-interface-guidelines
7. ์ฌ์ฉ๋๋ ํฐํธ์ ๊ท๊ฒฉ์ ์ ์ํด๋ผ
ํ๋ฉด ์ค๊ณ ์ UI ๋ชฉ์
ํ ๋ฐ ํฐํธ ๋ชฉ์
ํ๋ฅผ ์งํํ ๊ฒ์ด๋ผ ์๊ฐํ๋ค.
UI ๋ชฉ์
์ ๋ํด์๋ ๋ค๋ค ํ์์ฑ๊ณผ ์์ฐ์ฑ์ ์ธ์ ํ์ฌ ์ ํ๊ณ ์์ง๋ง UI ๋ชฉ์
๋ด๋ถ๋ฅผ ๊ตฌ์ฑํ๋ ํฐํธ๋ ์ ์ฒด ํ์ดํฌ๊ทธ๋ํผ(typography)์ ๋ํด์๋ ์ข ๋๊ฐํ๊ฒ ๊ฐ์ ์ธ๊ธํ๋ค.
์น ์๋ํฐ๋ ์ํค ์์ฑํ ๋ ์ฌ์ฉํ๋ ํ๊ทธ๋ฅผ ์๊ฐํ๋ฉด ์ฝ๊ฒ ์ดํดํ ์ ์์ ๊ฒ์ด๋ค.
Header, Label, Title, Body, Cation, Button ๋ฑ ์๊ฐ๋ณด๋ค ๋ง์ ์์ญ์ ํ
์คํธ์ ๋ํ ์ ์๊ฐ ์ด๋ฃจ์ด์ง๋ค.
๊ฐ ํ๋ซํผ๋ณ๋ก ์ ์๋๋ ๋ช ์นญ์ ์ฐจ์ด๋ ์์ผ๋ ํ๋ก์ ํธ๋ ํ์ฌ ๋ด์์ ํ์ ํญ๋ชฉ๋ง ์ ์ํด์ ์ฌ์ฉํ๋ฉด ์ข ๋ ๊น๋ํ ํ๋ฉด์ค๊ณ๋ฅผ ํ ์ ์์ ๊ฒ์ด๋ผ ์๊ฐํ๋ค.
์๋ ์์๋ก 3๊ฐ ํ๋ซํผ์์ ์ ์ํ๋ ํ์ดํฌ๊ทธ๋ํผ๋ฅผ ๊ณต์ ํ๋ค.
์ข์ธก ๋ถํฐ Google Android, Apple Mac, Microsoft APP
ํ์๋ 10๊ฐ ์ดํ์ ํฐํฌ ๊ท์น์ ๋ง๋ค์ด ์ฌ์ฉํ๋ฉด ์ ๋นํ๋ค๊ณ ์๊ฐํ๋ค.
๋ฌผ๋ก ๋น์ฃผ์ผ์ ๊ฐ์กฐํ๊ธฐ ์ํด ๋์์ด๋๊ฐ ์ธ๋ถํํ์ฌ ๋์ด๋ ์ ์์ง๋ง.. ๊ธฐํ๊ณผ๋ ๋ฌด๊ดํ๋ค.
๋ํ ํด๋น ํ์ดํฌ๊ทธ๋ํ์ ํฐํธ ์ฌ์ด์ฆ๋ ํ๋ซํผ๋ณ๋ก ๋ค๋ฅด๊ฒ ์ ์ฉ๋ ๊ฐ๋ฅ์ฑ์ด ๋๊ธฐ ๋๋ฌธ์ ์ง์ ํ์ง ์๋๋ค.
- Header (Bold) : ๊ฐ์ฅ ํฐ ๊ธ์จ, ๋ก๊ณ ์ ์ฌ์ฉํ๋ค.
- Subheader : ๋ ๋ฒ์งธ ํฐ ๊ธ์จ, ํ๋ฉด์ ๋ํํ๋ฉด ๋ช ์นญ์ ์ฌ์ฉํ๋ค.
- Title (Bold) : ์ปจํ ์ธ ์ ์ ๋ชฉ์ผ๋ก ์ฌ์ฉํ๋ค.
- Subtitle : ์ ๋ชฉ์ ๋ํ ์ค๋ช ์ด๋ ์๋ธ ์นดํ ๊ณ ๋ฆฌ์ ์ฌ์ฉํ๋ค.
- Body 1 : ๋ฉ์ธ ๋ณธ๋ฌธ์ ์ฌ์ฉํ๋ค.
- Body 2 : ์๋ธ ๋ณธ๋ฌธ์ ์ฌ์ฉํ๋ค.
- Caption : ๋ถ์ฐ ์ค๋ช ์ด๋ ํฌํ ๋ฌธ๊ตฌ, ํดํ์ ์ฌ์ฉํ๋ค.
- Button : ๋ชจ๋ ํ ์คํธ ๋ฒํผ์ ์ ์ฉํ๋ค. (๋ฌธ์ฅ ์ฌ์ด์ ํ์ดํผ๋งํฌ๋ Body ๋ก ์ฌ์ฉ)
8. ๋ชจ๋ ธํค์ ์ฌ์ฉํ์
ํ๋ฉด์ค๊ณ์๋ฅผ ์์ฑํ ๋์๋ ์์ด์ดํ๋ ์์ ๋ชจ๋
ธํค์ ์ ์งํ์ฌ ์์ฑ์ ํ๋๋ก ํ๋ค.
ํ๋ฉด์ค๊ณ์๋ ๋์์ด๋์ ๊ฐ๋ฐ์์ ์ํตํ๋ ํ๋กํ ์ฝ ์ญํ ์ ์ํํ๋ค.
๋์์ด๋๋ ์ ํ์ ํน์ฑ์ ๋ฐ๋ผ Identity ๋ถ์ฌํ๊ณ ์ ์ฒด ์์ ๋ฐ ์ปดํฌ๋ํธ ์คํ์ผ์ ์ ์ํ ๊ฒ์ด๋ค.
๋ง์ฝ, ๊ธฐํ์์ ์ฌ๋ฌ ์์ด ๋ค์ด๊ฐ ์๋ค๋ฉด ๋์์ด๋๋ ์ด ์์ ์ฌ์ฉํด ๋ฌ๋ผ๋ ๊ฑด์ง, ์ค์์ฑ์ด ๋๋ค๋ ๊ฒ์ธ์ง ํผ๋์ ๊ฒช๋๋ค.
๊ฐ๋ฐ์๋ ํ๋ฉด์ค๊ณ์์ ๊ตฌ์ฑ๋ UI ์์๋ค๊ณผ Description์ ๋ณด๊ณ ๊ธฐ๋ฅ์ ๋ํ ๊ฐ๋ฐ ํ์คํฌ๋ฅผ ์ ์ํ๊ณ ๊ฐ๋ฐ์ ํ๋ค.
๋ง์ฝ, ํน์ UI๋ ์ค๋ช
๋ฌธ๊ตฌ์ ๊ฐ์กฐ์์ด ๋ค์ด๊ฐ ๊ฒฝ์ฐ ์์ ์ด ์ง์ค๋์ด ์์นซ ํ๋ฉด์ ์ผ๋ถ๋ง ์ธ์งํ๊ฒ๋์ด ๊ธฐ๋ฅ์ ์์ธ ์ํฉ๋ค์ด ๋ฐ์ํ ์ ์๋ค.
ํ๋ฉด์ค๊ณ์์์ ์์์ ์๊ตฌ์ฌํญ ๋ณ๊ฒฝ์ด๋ ๊ธฐ๋ฅ์ ์์ ์ ์ํด ํด๋น ๋ถ๋ถ์ ์๋ ค์ค ๋ ๊ฐ์กฐ์ฉ์ผ๋ก ์ฌ์ฉํ๊ธธ ๊ถ์ฅํ๋ค.
UI ์์์ ์ง์ ์ ์ธ ์์์ ํ์ํ๋ ๋ฐฉ๋ฒ๋ณด๋ค๋ ์์ญ์ ํ์ํ๋ ์ฉ๋๋ก ์ฌ์ฉํด๋ ์ข๋ค.
Material Grey
์ด์ ํ๋ฉด ์ค๊ณ์ ๊ธฐ์ค ํด์๋๋ฅผ ์ค์ ํ๊ณ UI ๋ชฉ์ ์ ํฐํธ๊น์ง ์ ์ํ๋ ์ผ์ค์๋ ๊ธฐํ์๋ก ํ์ด๋๊ธธ ๋ฐ๋๋ค.
๋๊ธ