๊ธฐํš์—…๋ฌด, ํ™”๋ฉด์„ค๊ณ„์„œ ์ฒดํฌ๋ฆฌ์ŠคํŠธ ๋งŒ๋“ค์–ด ๋ณด๊ธฐ
๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๋””์ง€ํ„ธ ๊ฟ€ํŒ

๊ธฐํš์—…๋ฌด, ํ™”๋ฉด์„ค๊ณ„์„œ ์ฒดํฌ๋ฆฌ์ŠคํŠธ ๋งŒ๋“ค์–ด ๋ณด๊ธฐ

by ์ผ์ƒ์„ ๊ณต์œ ํ•จ๋‹ˆ๋‹ค 2022. 5. 5.

์—…๋ฌด์— ์žˆ์–ด ์ต์ˆ™ํ•จ์ด ๊ฐ€์žฅ ํฐ ๋ฆฌ์Šคํฌ์ด์ž ๋ฌธ์ œ๋ผ๊ณ  ์ƒ๊ฐ์„ ํ•œ๋‹ค.
๊ทธ๋ž˜์„œ ๋ณธ์ธ ์ง๋ฌด(์—…๋ฌด)์— ๋Œ€ํ•œ ์ฒดํฌ๋ฆฌ์ŠคํŠธ๋ฅผ ์ž‘์„ฑํ•˜๊ณ  ํ™•์ธํ•˜๋Š” ์Šต๊ด€์ด ์ค‘์š”ํ•˜๋‹ค.

 

 

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"

๊ตฌ๊ธ€ ๊ฐ€์ด๋“œ ์ฐธ์กฐ >

 

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

material.io


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

 

ํšจ๊ณผ์ ์ธ ๋Œ€์‹œ๋ณด๋“œ๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ๊ณ ๋ คํ•ด์•ผ ํ•  6๊ฐ€์ง€

์šฐ๋ฆฌ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๋ชจ๋‹ˆํ„ฐ๋งํ•˜๊ณ  ์ธ์‚ฌ์ดํŠธ๋ฅผ ์–ป๊ธฐ ์œ„ํ•ด ๋Œ€์‹œ๋ณด๋“œ๋ฅผ ์ด์šฉํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๋Ÿฌ ์ •๋ณด๋“ค๋กœ ๊ตฌ์„ฑ๋˜๋Š” ๋Œ€์‹œ๋ณด๋“œ๋Š” ๋•Œ๋•Œ๋กœ ๋ ˆ๊ณ ๋ฅผ ์กฐ๋ฆฝํ•ด ํ•˜๋‚˜์˜ ํŒ์„ ๋งŒ๋“œ๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋Š๊ปด์ง€๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. ๋ ˆ๊ณ 

www.bloter.net

#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

 

 

๋ชจ๋ฐ”์ผ ๋ ˆ์ด์•„์›ƒ์ด๋‚˜ ๋””์ž์ธ์ชฝ์— ๋” ๊ด€์‹ฌ์ด ์žˆ๋‹ค๋ฉด ์•„๋ž˜ ๋งํฌ๋ฅผ ํ™•์ธํ•ด๋ณด๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค.

 

 

 

 

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 ๋ชฉ์—…์— ํฐํŠธ๊นŒ์ง€ ์ •์˜ํ•˜๋Š” ์„ผ์Šค์žˆ๋Š” ๊ธฐํš์ž๋กœ ํƒœ์–ด๋‚˜๊ธธ ๋ฐ”๋ž€๋‹ค.

 

 

 

๊ธฐํš์ž๋„ ๊ฐœ๋ฐœ์„ ์•Œ์•„์•ผ ํ•œ๋‹ค. ๊ธฐํš์ž์˜ ๊ฐœ๋ฐœ ์šฉ์–ด ์•Œ์•„๊ฐ€๊ธฐ

๊ธฐํšํ•˜๋Š”๋ฐ ๊ฐœ๋ฐœ์„ ์™œ ์•Œ์•„์•ผ ํ•˜์ฃ ?? Product Manager ๋Š” ์ œํ’ˆ๋งŒ ์ž˜ ์•Œ๋ฉด ๋ฌธ์ œ์—†๋˜๋ฐ์š”?? Product Owner ๋Š” ๋ฐฉํ–ฅ๋งŒ ์ž˜ ์žก์œผ๋ฉด ์ž˜ ๋˜๋˜๋ฐ์š”?? ๋ผ๊ณ  ์ƒ๊ฐํ•˜๋Š” ์‚ฌ๋žŒ์ด ์•„์ง๋„ ์žˆ๋Š”์ง€ ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ, ํ˜น์‹œ ๋ชจ๋ฅด๋Š”

odaily.tistory.com

 

๋‚˜๋งŒ์˜ ์ˆœ์„œ๋„ ์ž‘์„ฑํ•˜๊ธฐ (feat, ๋ฒ”๋ก€ & SW๊ธฐํš์ž)

์ˆœ์„œ๋„๋Š” ์–ด๋–ค ์—…๋ฌด๋‚˜ ์ผ์„ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ณผ์ •์„ ๊ฐ„๋‹จํ•œ ๊ธฐํ˜ธ์™€ ํ™”์‚ดํ‘œ๋กœ ๋„์‹ํ™”ํ•œ ๊ทธ๋ฆผ์ด๋‹ค. ์˜ค๋ž˜์ „ ์–ด๋ฅด์‹ ๋“ค ๊ตญ๋ฏผํ•™๊ต ์‹œ์ ˆ ์ปดํ“จํ„ฐ ๋„ํ˜•์ž(ๅฐบ)๋ฅผ ํ†ตํ•ด ์ง์ ‘ ๊ทธ๋ฆฌ๊ธฐ๋„ ํ–ˆ์—ˆ๋‹ค๊ณ  ํ•œ๋‹ค. ์ปดํ“จํ„ฐ๋‚˜ ์ „

odaily.tistory.com

 

์„ค๋“๋ ฅ ์žˆ๊ฒŒ ๋งํ•˜๊ธฐ, 6ํ•˜์›์น™๊ณผ Context ๊ทธ๋ฆฌ๊ณ  ์Šต๊ด€

์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์„ ์ž˜ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์ปจํ…์ŠคํŠธ๊ฐ€ ์žˆ๋Š” ๋งํ•˜๊ธฐ๊ฐ€ ์ค‘์š”ํ•˜๋‹ค. ๋. ๋งฅ๋ฝ ์—†์ด ๋๋‚˜๋ฒ„๋ ธ๋‹ค. (๋ญ๋ผ๋Š”๊ฑฐ์•ผ? ๋ผ๊ณ  ์ƒ๊ฐํ•œ ์‚ฌ๋žŒ๋“ค์ด ์žˆ์„ ๊ฒƒ์ด๋‹ค.) ์œ„ ๋ฌธ์žฅ์— ๋Œ€ํ•ด ์ƒ๋Œ€๋ฅผ ์„ค๋“์‹œํ‚ค๊ธฐ ์œ„ํ•ด์„œ

odaily.tistory.com

๋Œ“๊ธ€