๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿงก UIUX/์‚ฌ์ด๋“œํ”„๋กœ์ ํŠธ-๊ณต๊ตฌ๋งˆ์ผ“

๊ณต๊ตฌ๋งˆ์ผ“ - ๋ฐ˜์‘ํ˜• ๋””์ž์ธ ์ˆ˜์ • (01.17 - 01.21)

by widely design 2022. 1. 25.

2022. 01. 17 (์›”) - ํšŒ์˜

 

๋””์ž์ธ์€ ๋๋‚ธ ์ƒํƒœ๋ผ์„œ ๊ฑฐ์˜ ๊ฐœ๋ฐœ์ž๋‹˜๋“ค์˜ ํšŒ์˜์˜€๋‹ค.
ํšŒ์›๊ฐ€์ž… ๊ฐœ๋ฐœ ์‹œ์ž‘!
๊ฐœ๋ฐœ ์ชฝ๋„ ๊ด€์‹ฌ ์žˆ์–ด์„œ
์ดํ•ดํ•˜๊ณ  ์‹ถ์€๋ฐ ์•„์ง ๋งŽ์ด ์–ด๋ ต๋‹ค.
ํšŒ์˜ํ•˜๋Š” ๊ฐœ๋ฐœ์ž๋ถ„๋“ค์ด ๋Œ€ํ™”ํ•˜๋Š” ๋‚ด์šฉ์„ ๋“ฃ๊ณ  ๊ฒ€์ƒ‰ํ•˜๋ฉฐ ์—ด์‹ฌํžˆ ์ตํžˆ๋ ค๊ณ  ๋…ธ๋ ฅ ์ค‘์ด๋‹ค!


์ธ์ฆ - ํšŒ์›๊ฐ€์ž…, ๊ถŒํ•œ์ž, ๋ฆฌ๋ฉค๋ฒ„ ๋ฏธ, ๊ฒฝ๋กœ ๋ง‰๊ธฐ
์ธ๊ฐ€ - ๋กœ๊ทธ์•„์›ƒ, ๋กœ๊ทธ์ธ , ํ•„ํ„ฐ
์ธ๊ฐ€ ๋ถ€๋ถ„์—์„œ ๋กœ๊ทธ์•„์›ƒ, ๋กœ๊ทธ์ธ thymelef ๋งŒ ๋‹ฌ๋ฉด ๋จ
๋ฆฌ๋ฉค๋ฒ„ ๋ฏธ, ๊ฒฝ๋กœ ๋ง‰๊ธฐ ์ถ”ํ›„ ๋…ผ์˜ ์‚ฌํ•ญ ์ž…๋‹ˆ๋‹น
๊ฐœ๋ฐœ ์™„๋ฃŒ : ๊ธˆ์š”์ผ
QA : ํ† ์š”์ผ


 

์ธ์ฆ
: ์œ ์ €๊ฐ€ ๋ˆ„๊ตฌ์ธ์ง€ ํ™•์ธํ•˜๋Š” ์ ˆ์ฐจ, ํšŒ์›๊ฐ€์ž…ํ•˜๊ณ  ๋กœ๊ทธ์ธํ•˜๋Š” ๊ฒƒ
์ธ๊ฐ€
: ์œ ์ €์— ๋Œ€ํ•œ ๊ถŒํ•œ์„ ํ—ˆ๋ฝํ•˜๋Š” ๊ฒƒ
- ๋ˆ„๊ฐ€ ์–ธ์ œ ์–ด๋–ป๊ฒŒ ์“ฐ๊ณ  ์žˆ๋Š”๊ฐ€๋ฅผ ํŒŒ์•…ํ•˜๊ธฐ ์œ„ํ•ด ์–ด๋–ค ์‚ฌ์ดํŠธ์—์„œ๋“  ์ธ์ฆ, ์ธ๊ฐ€๊ฐ€ ์žˆ์Œ
- ์ธ์ฆ๊ณผ ์ธ๊ฐ€๋Š” api์—์„œ ๊ฐ€์žฅ ์ž์ฃผ ๊ตฌํ˜„๋˜๋Š” ๊ธฐ๋Šฅ
- privateํ•œ api๋Š” ๋ฌผ๋ก ์ด๊ณ  publicํ•œ api๋„ ๊ธฐ๋ณธ์ ์ธ ์ธ์ฆ๊ณผ ์ธ๊ฐ€๋ฅผ ์š”๊ตฌ
thymelef(ํƒ€์ž„๋ฆฌํ”„) - View Template Engine
html ํƒœ๊ทธ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœํ•˜์—ฌ th:์†์„ฑ์„ ์ด์šฉํ•˜์—ฌ ๋™์ ์ธ View๋ฅผ ์ œ๊ณตํ•จ
์ปจํŠธ๋กค๋Ÿฌ์—์„œ ์ „๋‹ฌ๋ฐ›์€ ๋ฐ์ดํ„ฐ๋ฅผ ์ด์šฉํ•ด ๋™์ ์ธ ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Œ
ํƒœ๊ทธ์˜ ์†์„ฑ์œผ๋กœ thymeleaf ๋ช…๋ น์–ด๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ณ  html ํŒŒ์ผ ๋‚ด์—์„œ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•จ
remember me(๋ฆฌ๋ฉค๋ฒ„๋ฏธ)
: ์„ธ์…˜์ด ๋งŒ๋ฃŒ๋˜๊ณ  ์›น ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ข…๋ฃŒ๋œ ์ดํ›„์—๋„ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์‚ฌ์šฉ์ž๋ฅผ ๊ธฐ์–ตํ•˜๋Š” ๊ธฐ๋Šฅ
BCryptPasswordEncoder
: Spring Seurity(์Šคํ”„๋ง ์‹œํ๋ฆฌํ‹ฐ) ํ”„๋ ˆ์ž„์›Œํฌ์—์„œ ์ œ๊ณตํ•˜๋Š” ํด๋ž˜์Šค ์ค‘ ํ•˜๋‚˜๋กœ ๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ์•”ํ˜ธํ™”ํ•  ๋•Œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ฉ”์„œ๋“œ๋ฅผ ๊ฐ€์ง„ ํด๋ž˜์Šค
์Šคํ”„๋ง ์‹œํ๋ฆฌํ‹ฐ(Spring Security)
: ์ž๋ฐ” ์„œ๋ฒ„๊ฐœ๋ฐœ์„ ์œ„ํ•ด ํ•„์š”๋กœ ํ•œ ์ธ์ฆ, ๊ถŒํ•œ๋ถ€์—ฌ ๋ฐ ๊ธฐํƒ€ ๋ณด์•ˆ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๋Š” ํ”„๋ ˆ์ž„์›Œํฌ(ํด๋ž˜์Šค์™€ ์ธํ„ฐํŽ˜์ด์Šค ๋ชจ์ž„)

 

1์ฐจ๋กœ๊ณ 
๊ธฐ์กด์— ์žˆ๋˜ ์„œ์ฒด ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉํ•œ ๋กœ๊ณ ๋ผ์„œ ์ถ”ํ›„ ๋‹ค์‹œ ์ œ์ž‘ํ•ด๋ณผ ์˜ˆ์ •์ด๋‹ค!


2022. 01. 20 (๋ชฉ) ~ 2022. 01. 21 (ํ† ) - ๊ฐœ๋ฐœ์ž๋‹˜๊ณผ ํšŒ์˜, ๋””์ž์ธ ์ˆ˜์ •

 

๊ฐœ๋ฐœ์ž๋‹˜๊ป˜์„œ slack์—์„œ ์งˆ๋ฌธํ•˜์‹  ๋‚ด์šฉ


  1. ์ถ”์ฒœ ๋‹‰๋„ค์ž„์€ ์ €ํฌ ๋ฉ”์ธ ๊ธฐ๋Šฅ์ธ๊ฐ€์š”? ์ถ”์ฒœ ๋‹‰๋„ค์ž„์˜ ์ˆ˜๊ฐ€ ๋Š˜์–ด๊ฐ€๋ฉด ์–ด๋–ป๊ฒŒ ๋˜๋‚˜์š”?
  2. ์ง€์—ญ์˜ ๊ฒฝ์šฐ, ์ž์‹ ์˜ ์ง€์—ญ์„ ์ž…๋ ฅํ•˜๊ฒŒ ํ•ด์ฃผ๋ฉด ๊ฑฐ์ง“์œผ๋กœ ์ž…๋ ฅํ•  ์ˆ˜ ์žˆ์ง€ ์•Š์„๊นŒ์š”?๋งŒ์•ฝ ์ž…๋ ฅํ•œ๋‹ค๊ณ  ํ•œ๋‹ค๋ฉด, ๊ฐ ์ง€์—ญ์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ๊ฐ€์ง€๊ณ  ์™€์„œ ui๋กœ ๊ทธ๋ ค์ฃผ์–ด์•ผ ํ•˜๋‚˜์š”?
  3. ์ง€์—ญ์„ ๊ฒ€์ƒ‰ํ•˜๋Š” ui์—์„œ ์–ด๋–ป๊ฒŒ ํ•˜๋ฉด error message๊ฐ€ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ ธ์•ผ ํ•˜๋‚˜์š”?
  4. ์—ฌ๊ธฐ padding ๊ฐ’์€ ์–ผ๋งˆ ์ผ๊นŒ์š”?
  5. ๋ฒ„ํŠผ๊ณผ input element์˜ width๊ฐ€ ๋™์ผํ•œ ๋ ˆ์ด์•„์›ƒ์ธ๊ฒƒ ๊ฐ™์€๋ฐ 1px์ด ์ฐจ์ด๋‚˜๋Š” ๋””์ž์ธ ์ ์ธ ์ด์œ ๊ฐ€ ์žˆ์„ ๊นŒ์š”?
  6. ๋””์ž์ธ ํ”„๋ ˆ์ž„์ด ์™€์ด๋“œ ์Šคํฌ๋ฆฐ 1920px๋กœ ํ•œ ์ด์œ ๊ฐ€ ์žˆ์„๊นŒ์š”? ์ž‘์€ ํ•ด์ƒ๋„๋ฅผ ๊ฐ€์ง„ ๋ชจ๋‹ˆํ„ฐ์˜ ๊ฒฝ์šฐ ๊ฐ ์—˜๋ฆฌ๋จผํŠธ์˜ ํฌ๊ธฐ๊ฐ€ ๋งŽ์ด ์ปค์งˆ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

 

๋””์ž์ธ...์–ด๋ ค์šด ๊ฑฐ์•ผ......................

๋„ˆ๋ฌด ๋งŒ๋งŒํ•˜๊ฒŒ ๋ดค๋‹ค..(๋ฐ˜์„ฑ)

์ฃ„์†กํ•ฉ๋‹ˆ๋Œœ ๊ฐœ๋ฐœ์ž๋‹˜..


< ๋‚ด๊ฐ€ ๋ณด๋‚ธ ๋‹ต๋ณ€ >

  1. ์ถ”์ฒœ ๋‹‰๋„ค์ž„์€ ํ•œ ๊ฐœ ๋œจ๋Š” ๊ฑธ๋กœ ๊ธฐํšํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ฉ”์ธ๊ธฐ๋Šฅ์ธ์ง€๋Š”.. ๊ธฐํš์ž๋‹˜๊ณผ ์ƒ์˜ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค
  2. ๋‹น๊ทผ๋งˆ์ผ“์˜ ๊ฒฝ์šฐ ์œ„์น˜ ์„ค์ •์ด ์•„์˜ˆ ๋‹ค๋ฅธ ๋‘ ๊ณณ์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์–ด์žˆ๋”๋ผ๊ณ ์š”(ex.๋Œ€์ „์— ์‚ฌ๋Š”๋ฐ ๋Œ€์ „๊ณผ ์„œ์šธ ์„ ํƒ ๊ฐ€๋Šฅ)
  3. '์œ„์น˜๋ฅผ ์ž…๋ ฅํ•˜์ง€ ์•Š์•˜์„ ๋•Œ' ๋ง์”€ํ•˜์‹œ๋Š” ๊ฑฐ ๋งž์œผ์‹ค๊นŒ์š”??
  4. 17px์ž…๋‹ˆ๋‹ค (์•„์ด์ฝ˜์— ๋งž์ถ˜ ๊ฒƒ)
  5. ์•„๋‡จ ์ด๊ฑด ์ œ ์‹ค์ˆ˜์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค (๋™์ผํ•˜๊ฒŒ ์ˆ˜์ •ํ•ด๋†“์•˜์Šต๋‹ˆ๋‹ค!)
  6. ์ฃผ๋กœ 1920px์„ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ์ค„ ์•Œ๊ณ  ์‚ฌ์šฉํ–ˆ๋Š”๋ฐ ๊ฑฐ๊ธฐ๊นŒ์ง€๋Š” ์ƒ๊ฐ์„ ๋ชป ํ•ด๋ณธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹คใ…œใ…œ  ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค. ์–ด๋А ์‚ฌ์ด์ฆˆ๊ฐ€ ์ ๋‹นํ•œ์ง€ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ท

 

 

3๋ฒˆ์— ๋Œ€ํ•ด ์—ฌ์ญค๋ณด์‹  ์ด์œ ๋Š”

์œ„์น˜ ์ž…๋ ฅ ์ „์— ์œ„์น˜ํŒ์—…์˜ '์™„๋ฃŒ๋ฒ„ํŠผ'์ด ํ™œ์„ฑํ™” ๋˜์–ด์žˆ๋Š” ๊ฒŒ ์ด์ƒํ•˜๋‹ค๊ณ  ๋А๊ปด์ง€์…จ๋˜ ๊ฒƒ ๊ฐ™๋‹ค.

๋“ฃ๊ณ ๋ณด๋‹ˆ ๋งž๋Š” ๋ง์ด๊ณ  ์ข‹์€ ์•„์ด๋””์–ด๋ผ๊ณ  ์ƒ๊ฐ๋ผ์„œ

์ž…๋ ฅ ์ „์—๋Š” ๋ฒ„ํŠผ์„ ๋น„ํ™œ์„ฑํ™” ํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ๋‹ค!

 

๋˜!

'ํ˜„์œ„์น˜ ๊ฒ€์ƒ‰ ๋ฒ„ํŠผ'์„ ์•„๋ž˜์— ๋‘์—ˆ์—ˆ๋Š”๋ฐ,

์œ„์น˜ ๊ฒ€์ƒ‰์‹œ ๋‚˜์˜ค๋Š” '๊ฒ€์ƒ‰๊ฒฐ๊ณผ์ฐฝ'์ด ๊ทธ ๋ฒ„ํŠผ์„ ๊ฐ€๋ฆฌ๋Š” ๋ฌธ์ œ์ ์„ ์ง€์ ํ•ด์ฃผ์…”์„œ

๊ธฐํš์ž๋‹˜๊ณผ ์ƒ์˜ํ•˜์— ๊ฒ€์ƒ‰๋ฒ„ํŠผ์˜ ์ขŒ์ธก์— ์œ„์น˜ํ•˜๋„๋ก ์ˆ˜์ •ํ•˜์˜€๋‹ค.

์ˆ˜์ •ํ•œ ๊ฒฐ๊ณผ

 

 

๊ทธ๋ฆฌ๊ณ  ์ €๋…์— ๊ฐœ๋ฐœ์ž๋‹˜๊ณผ ํšŒ์˜์‹œ๊ฐ„์„ ๊ฐ€์ง€๊ฒŒ ๋˜์—ˆ๋‹ค!

 

 

flexible design...

๋ฐ˜์‘ํ˜•๋””์ž์ธ ์–ด๋ ต๋„ค...

 

pcํ™”๋ฉด๊ณผ mobileํ™”๋ฉด ๋‘˜ ๋‹ค ๋””์ž์ธํ•ด์•ผ ํ•˜๋Š”๋ฐ

๋ฐ˜์‘์„ฑ์„ ๋†’์ผ ์ˆ˜ ์žˆ๋Š” ๋””์ž์ธ ํ”„๋กœ์„ธ์Šค์™€ ์‹œ์Šคํ…œ์ด ํ•„์š”ํ•˜๋‹ค.

 

๊ฐœ๋ฐœ์ž๋‹˜๊ป˜์„œ ๋ณธ์ธ์ด ๋‹ค๋‹ˆ๊ณ  ์žˆ์œผ์‹  ์Šคํƒ€ํŠธ์—…์˜ ๋””์ž์ธ ์‹œ์Šคํ…œ์— ๋Œ€ํ•ด์„œ ๋Œ€๋žต ์•Œ๋ ค์ฃผ์…จ๋‹ค.

๋””์ž์ธ์‹œ์Šคํ…œ..์ด ์ตœ๋Œ€ํ•œ ๋งŽ์•„์•ผ ์ข‹๋‹ค๊ตฌ!

 

๋””์ž์ธ์‹œ์Šคํ…œ..

21๋…„ 12์›” ๋ง์— ๊ฐ€๊ณ  ์‹ถ์€ ํšŒ์‚ฌ ๋ฉด์ ‘ ๋ณด๊ณ  ์™€์„œ ๋Œ€์ถฉ ์•Œ๊ณ  ์žˆ๋”ฐ.

์™œ๋ƒ? ๋””์ž์ธ์‹œ์Šคํ…œํŒ€ ui๋””์ž์ด๋„ˆ ๋ฉด์ ‘์ด์—ˆ๊ธฐ ๋•Œ๋ฌธ!

์œ ํŠœ๋ธŒ๋กœ ์—ด์‹ฌํžˆ ์ฐพ๊ณ  ๋ฒผ๋ฝ์น˜๊ธฐ ๊ณต๋ถ€ํ–ˆ์—ˆ๋‹ค ใ…Žใ…Ž

๋ฉด์ ‘์€ ๋ถ™์„ ์ค„ ์•Œ์•˜์ง€๋งŒ^^; ์ง€๊ธˆ ์ด๋Ÿฌ๊ตฌ ์žˆ๋„นใ…Ž

๊ทธ๋ž˜๋„ ์—ญ์‹œ ๊ณต๋ถ€ํ•ด๋†“์œผ๋ฉด ๋… ๋˜๋Š” ๊ฑด ์—†๋‹ค.์ด๋ ‡๊ฒŒ ์œ ์šฉํ•˜๊ฒŒ ์“ฐ์ด๋‹ˆ๊นŒ !!

 

๋””์ž์ธ์‹œ์Šคํ…œ์ด๋ž€?
: ๋””์ž์ธ์„ ๋ณด๋‹ค ์‰ฝ๊ณ  ํšจ์œจ์ ์œผ๋กœ ํ•˜๊ฒŒ ๋„์™€์ฃผ๋Š” ์‹œ์Šคํ…œ

 

 

๊ทธ๋ž˜์„œ ์ตœ๋Œ€ํ•œ figma์—์„œ

1. component๋ฅผ ๋งŽ์ด ์ œ์ž‘ํ•˜์—ฌ

2. pc์™€ mobile์˜ ๋ณ€ํ™”๊ฐ€ ๋งŽ์ด ์—†๋„๋ก

์ˆ˜์ •ํ•ด๋ณด๊ธฐ๋กœ ํ–ˆ๋‹ค.

 

๋งŽ์ด ๋ฐฐ์šด๋‹ค...๋‚˜ ์„ฑ์žฅํ•˜๋„ค..์ฐฉํ•œ ์‚ฌ๋žŒ๋“ค ๋•๋ถ„์—..

 

๋ฐ˜์‘ํ˜•๋””์ž์ธ์„ ๊ณ ๋ คํ•˜์—ฌ ์ˆ˜์ •ํ•œ ๊ฒฐ๊ณผ!

 

ํ†ต์ผํ•  ์ˆ˜ ์žˆ๋Š” ๊ฑด ๋‹ค ํ†ต์ผ์„ ์‹œ์ผฐ๋‹ค.

๋ณ€ํ•œ ๊ฑด font-size์™€ width ์ •๋„!?

 

์•ž์œผ๋กœ ๊ณต๋ถ€ํ•  ๊ฒŒ ๋งŽ๋‹ค.

ux์™€ ๋ฐ˜์‘ํ˜• ์—ด์‹ฌํžˆ ๊ณต๋ถ€ํ•ด์•ผ์ง€ !!

 

favicon๋„ ์š”์ฒญํ•˜์…จ๋Š”๋ฐ

๋กœ๊ณ ๊ฐ€ ์•„์ง ํ™•์ •์ด ์•ˆ ๋ผ์„œ ๋‹ค์Œ ๋ฒˆ์— ๋“œ๋ฆฐ๋‹ค๊ตฌ ํ–ˆ๋‹ค!

 

๊ทธ๋ฆฌ๊ณ  ๊ฐœ๋ฐœ์— ๊ด€์‹ฌ์ด ์žˆ๋‹ค๊ณ  ํ–ˆ๋”๋‹ˆ

๊ฐœ๋ฐœ ๊ด€๋ จ ๊ฐ•์˜๋ž‘ ๋งํฌ๋„ ๋ณด๋‚ด์ฃผ์…จ๋‹คใ… 

๋‚˜๋ฅผ ๋ฐœ์ „์‹œ์ผœ์ฃผ๋Š” ์‚ฌ๋žŒ๋“ค..๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค

๋Œ“๊ธ€