[TIL] Day46 #UI/UX

Beanxxยท2022๋…„ 6์›” 29์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
46/120
post-thumbnail

2022.06.29(Wed)

[TIL] Day46
[SEB FE] Day44

์˜ค๋Š˜์€ ์–ด์ œ Figma Clone์„ ์ง„ํ–‰ํ–ˆ๋˜ ์‚ฌ์ดํŠธ์ธ ์นด์นด์˜คํ†ก์˜ UI/UX๋ฅผ ๋ถ„์„ํ•ด๋ณด๊ณ  UI๋ฅผ ๊ฐœ์„ ํ•ด๋ณด๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์กŒ๋‹ค. ๋งŽ์€ ์‚ฌ์šฉ์ž๊ฐ€ ์นด์นด์˜คํ†ก์„ ์ด์šฉํ•˜๋Š” ๋งŒํผ ๋‹ค๋ฐฉ๋ฉด์—์„œ UI/UX๊ฐ€ ๋›ฐ์–ด๋‚œ ํŽธ์ด์—ˆ๋‹ค. ๐Ÿ‘

๐Ÿ“Ž UI ๋ถ„์„

1. KakaoTalk์—์„œ ์‚ฌ์šฉ์ค‘์ธ UI Design Pattern

  • Tab: ์นœ๊ตฌ๋ชฉ๋ก, ์ฑ„ํŒ…๋ชฉ๋ก, ๋”๋ณด๊ธฐ... ํƒญ
  • Modal: ํ”„๋กœํ•„ ์‚ฌ์ง„ ํด๋ฆญ์‹œ ์ƒ์„ธ ํ”„๋กœํ•„ ํ™”๋ฉด ๋ชจ๋‹ฌ
  • Toggle: ์„ค์ • ํƒญ์— ์กด์žฌ
  • Tag: ์ถ”์ฒœ ํ‚ค์›Œ๋“œ ๋ฐ ๋‹จํ†ก๋ฐฉ์—์„œ ํŠน์ • ์ธ๋ฌผ ํ˜ธ์ถœ
  • ๋ฌดํ•œ ์Šคํฌ๋กค: ์นœ๊ตฌ๋ชฉ๋ก, ์ฑ„ํŒ…๋ชฉ๋ก, ์ฑ„ํŒ…๋ฐฉ ๋‚ด์šฉ ์Šคํฌ๋กค
  • ์ž๋™ ์™„์„ฑ: ๋‹จํ†ก๋ฐฉ ํŠน์ • ์ธ๋ฌผ ํ˜ธ์ถœ์‹œ ์ด๋ฆ„ ์ž๋™ ์™„์„ฑ, ์นœ๊ตฌ ๊ฒ€์ƒ‰
  • ์•„์ฝ”๋””์–ธ: ์ฑ„ํŒ…๋ฐฉ ๊ณต์ง€ ์ ‘๊ธฐ ๋ฐ ์ƒ์ผ์ธ ์นœ๊ตฌ, ์ฆ๊ฒจ์ฐพ๊ธฐ, ์ฑ„๋„ ๋“ฑ
  • ์บ๋Ÿฌ์…€: ์‡ผํ•‘ ํƒญ์—์„œ์˜ ๊ด‘๊ณ 
  • ๋“œ๋กญ๋‹ค์šด: ์„ ๋ฌผํ•˜๊ธฐ ํƒญ์—์„œ ์„ ๋ฌผ ์นดํ…Œ๊ณ ๋ฆฌ ์„ ํƒ
  • ํŽ˜์ด์ง€๋„ค์ด์…˜: ์‡ผํ•‘ ํ†ก๋”œ๋ฐ•์Šค ํ•ญ๋ชฉ์— ์กด์žฌ

2. Column Grid System ์‚ฌ์šฉ ์—ฌ๋ถ€

์‹ค์ œ ์นดํ†ก์—์„œ ์‚ฌ์šฉํ–ˆ๋Š”์ง€๋Š” ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ Figma Clone์—์„œ Column Grid๋Š” ๋”ฐ๋กœ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•˜๋‹ค.
๋‹ค๋งŒ, Column Grid ๋Œ€์‹  ์ฑ„ํŒ…๋ชฉ๋ก์„ ๋ณด์—ฌ์ค„ ๋•Œ Row Grid (10์ค„)๋ฅผ ์‚ฌ์šฉํ•˜์˜€๋‹ค.

๐Ÿ“Ž UX ๋ถ„์„

1. ํ”ผํ„ฐ ๋ชจ๋นŒ์˜ UX 7์š”์†Œ ์ถฉ์กฑ ์—ฌ๋ถ€

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-06-29 แ„‹แ…ฉแ„’แ…ฎ 3 48 20

2. User flow

Frame 13 (1)

๐Ÿ“Ž ์‚ฌ์šฉ์„ฑ ํ‰๊ฐ€

1. ์ œ์ด์ฝฅ ๋‹์Šจ์˜ 10๊ฐ€์ง€ ์‚ฌ์šฉ์„ฑ ํ‰๊ฐ€ ๊ธฐ์ค€ ์ถฉ์กฑ ์—ฌ๋ถ€

  • ์‹œ์Šคํ…œ ์ƒํƒœ์˜ ๊ฐ€์‹œ์„ฑ: โญ•๏ธ ์‚ฌ์ง„, ๋™์˜์ƒ ์ „์†ก ๋“ฑ์—์„œ ๋กœ๋”ฉ ์ง„ํ–‰ ์ƒํ™ฉ ๋ณด์—ฌ์คŒ
  • ์‹œ์Šคํ…œ & ํ˜„์‹ค ์„ธ๊ณ„ ์ผ์น˜: โญ•๏ธ ํ”ฝํ† ๊ทธ๋žจ, ์•„์ด์ฝ˜ ๋งŽ์ด ์‚ฌ์šฉ / ์‰ฌ์šด ๋‹จ์–ด ์‚ฌ์šฉ(์ƒ์ผ์ธ ์นœ๊ตฌ, ์ฆ๊ฒจ์ฐพ๊ธฐ ...) โ†’ ์ฝ๊ธฐ ์‰ฌ์›€
  • ์‚ฌ์šฉ์ž ์ œ์–ด & ์ž์œ : โญ•๏ธ ์‹ค์ˆ˜๋กœ ์ „์†กํ•œ ๋ฉ”์„ธ์ง€ ์‚ญ์ œ ๊ฐ€๋Šฅ ๋‹จ, ์‚ญ์ œ ์ทจ์†Œ๋Š” ๋ชปํ•จ
  • ์ผ๊ด€์„ฑ & ํ‘œ์ค€: โญ•๏ธ ๋‹ค๋ฅธ ๋ฉ”์‹ ์ € ์•ฑ๊ณผ ๋น„๊ตํ•˜์—ฌ ๋น„์Šทํ•œ UI๋กœ ๊ตฌ์„ฑ
  • ์˜ค๋ฅ˜ ๋ฐฉ์ง€: โญ•๏ธ ์ฑ„ํŒ… ๋ฉ”์„ธ์ง€ ์‚ญ์ œ์‹œ ์žฌ์ฐจ ํ™•์ธ
  • ๊ธฐ์–ต๋ณด๋‹จ ์ง๊ด€: โญ•๏ธ ์ตœ๊ทผ ๊ฒ€์ƒ‰ ์ €์žฅ ๊ธฐ๋Šฅ ์กด์žฌ
  • ์‚ฌ์šฉ์˜ ์œ ์—ฐ์„ฑ & ํšจ์œจ์„ฑ: โŒ ๋ชจ๋‘์—๊ฒŒ ๊ฐ™์€ ๊ธฐ๋Šฅ ์ œ๊ณต
  • ๋ฏธํ•™์ ์ด๊ณ  ๋ฏธ๋‹ˆ๋ฉ€ํ•œ ๋””์ž์ธ: โŒ ๋ถ€๊ฐ€ ๊ธฐ๋Šฅ ๋„ˆ๋ฌด ๋งŽ์Œ-๊ฒŒ์ž„, ์‡ผํ•‘, ์„ ๋ฌผํ•˜๊ธฐ, ๋ฉ”์ด์ปค์Šค, ํ—ค์–ด์ƒต ...
  • ์˜ค๋ฅ˜ ์ธ์‹, ์ง„๋‹จ, ๋ณต๊ตฌ ์ง€์›: โญ•๏ธ ์˜ค๋ฅ˜ ์›์ธ ๋ช…์‹œ-์ „์†ก ์‹คํŒจ, ์ธํ„ฐ๋„ท ์—ฐ๊ฒฐ ๋ถˆ์•ˆ์ • ...
  • ๋„์›€๋ง & ์„ค๋ช… ๋ฌธ์„œ: โญ•๏ธ ๊ณ ๊ฐ์„ผํ„ฐ/๋„์›€๋ง, ๊ฐ€์ด๋“œ ์กด์žฌ

๐Ÿ“Ž ๊ฐœ์„ ํ•œ Figma Clone

์–ด์ œ ํ–ˆ๋˜ Figma Clone ์ž‘์—…์— ํ”„๋กœํ•„ ํ™”๋ฉด ํด๋ฆญ์‹œ ์ƒ์„ธ ํ”„๋กœํ•„ ํ™”๋ฉด์ด ๋ชจ๋‹ฌ์ฐฝ์œผ๋กœ ๋‚˜์˜ค๋„๋ก ๊ฐœ์„ ํ–ˆ์œผ๋ฉฐ, ๋”๋ณด๊ธฐ ํƒญ ํ•˜๋‹จ์— ๊ด‘๊ณ ๋“ค์„ ์บ๋Ÿฌ์…€๋กœ ๋“ฑ์žฅํ•˜๋„๋ก ๊ฐœ์„ ํ•˜์˜€๋‹ค.

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-06-29 แ„‹แ…ฉแ„’แ…ฎ 3 59 30

๐Ÿค‘ ์ž๋ฃŒ๊ตฌ์กฐ ์ง€์‹์ด ๊ฑฐ์˜ ๋ฌด์ง€ํ•œ ์ƒํƒœ์—์„œ ์š”์ฆ˜ Coplit ๋ฌธ์ œ๋ฅผ ํ’€๋ ค๊ณ  ํ•˜๋‹ˆ๊นŒ ์–ด๋–ป๊ฒŒ ํ’€์–ด์•ผ ํ• ์ง€ ์ ‘๊ทผ์ด ๋ถˆ๊ฐ€ํ–ˆ๋‹ค,, ๊ฐœ๋… ์ฐพ์•„๋ด๋„ ๊ฑฐ์˜ ๋ธ”๋กœ๊ทธ ๊ธ€์ด ๋Œ€๋ถ€๋ถ„์ด๋ผ ์ œ๋Œ€๋กœ ํ•™์Šตํ•˜๊ธฐ๊ฐ€ ์–ด๋ ค์› ๋‹ฌ๊นŒ.. ๊ทธ๋Ÿฌ๋˜ ์ฐฐ๋‚˜์— ์˜ค๋Š˜ Udemy - 'JavaScript ์•Œ๊ณ ๋ฆฌ์ฆ˜ & ์ž๋ฃŒ๊ตฌ์กฐ ๋งˆ์Šคํ„ฐํด๋ž˜์Šค' ๊ฐ•์˜ ์„ธ์ผํ•˜๊ธธ๋ž˜ ํ˜นํ•ด์„œ 17,000โ‚ฉ์— ๊ตฌ๋งคํ–ˆ๋‹ค. ์—ด์‹ฌํžˆ ๋“ฃ์žใ…๐Ÿ’ช

โœ… ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค Lv.1_๋ฌธ์ž์—ด ๋‹ค๋ฃจ๊ธฐ ๊ธฐ๋ณธ ๋ฌธ์ œ ํ’ˆ
โ˜‘๏ธ Coplit-๋ฐฐ์—ด, ๊ฐ์ฒด ๋ถ€๋ถ„ ๋ฌธ์ œ ๋‹ค์‹œ ํ’€์–ด๋ณด๊ธฐ
โ˜‘๏ธ ํ•œ์ž… ๋ฆฌ์•กํŠธ ๊ฐ•์˜ JS ํŒŒํŠธ ๊ฐ•์˜ ๋“ฃ๊ธฐ
โ˜‘๏ธ Udemy ์•Œ๊ณ ๋ฆฌ์ฆ˜&์ž๋ฃŒ๊ตฌ์กฐ ๊ฐ•์˜ - ํŠธ๋ฆฌ ์ˆœํšŒ(๊นŠ์ด์šฐ์„ ํƒ์ƒ‰) ๋ถ€๋ถ„ ๊ฐ•์˜ ๋“ฃ๊ธฐ

profile
FE developer

0๊ฐœ์˜ ๋Œ“๊ธ€