๐Ÿ’ก UXUI

    [UXUI] ๋น„์ฆˆ๋‹ˆ์Šค ๋ชจ๋ธ ์šฉ์–ด ์ „๋ถ€ ์•Œ์•„๋ณด๊ธฐ : B2B, B2C, SaaS ์™ธ 9๊ฐ€์ง€

    1. B2B (Business to Business) ๊ธฐ์—… ๊ฐ„ ๊ฑฐ๋ž˜ ๊ธฐ์—… ๊ฐ„ ๊ฑฐ๋ž˜๋ฅผ ์˜๋ฏธํ•˜๋Š” ์šฉ์–ด๋กœ, ๊ธฐ์—…์ด ๋‹ค๋ฅธ ๊ธฐ์—…์—๊ฒŒ ์ƒํ’ˆ์ด๋‚˜ ์„œ๋น„์Šค๋ฅผ ํŒ๋งคํ•˜๋Š” ๋ชจ๋ธ์ž…๋‹ˆ๋‹ค. B2B ๊ฑฐ๋ž˜๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ ๋Œ€๋Ÿ‰ ์ฃผ๋ฌธ, ์žฅ๊ธฐ ๊ณ„์•ฝ, ๋งž์ถคํ˜• ์„œ๋น„์Šค ๋“ฑ์ด ํŠน์ง•์ž…๋‹ˆ๋‹ค. ์˜ˆ์‹œ - ์‚ผ์„ฑ์ „์ž : ์ „์„ธ๊ณ„์˜ ๋‹ค์–‘ํ•œ ๊ธฐ์—…๋“ค์— ๋ฐ˜๋„์ฒด ๊ณต๊ธ‰ 2. B2C (Business to Consumer) ๊ธฐ์—…๊ณผ ์†Œ๋น„์ž ๊ฐ„ ๊ฑฐ๋ž˜ B2C ๋ชจ๋ธ์—์„œ๋Š” ๊ธฐ์—…์ด ์ตœ์ข… ์†Œ๋น„์ž์—๊ฒŒ ์ƒํ’ˆ์ด๋‚˜ ์„œ๋น„์Šค๋ฅผ ํŒ๋งคํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ธฐ์—…์€ ์ œ์กฐ์—…์ฒด์ผ ์ˆ˜๋„ ์žˆ๊ณ , ์†Œ๋งค์—…์ฒด๋‚˜ ์œ ํ†ต์—…์ฒด์ผ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. B2C ๊ธฐ์—…์€ ์†Œ๋น„์ž์—๊ฒŒ ๋„๋‹ฌํ•˜๊ธฐ ์œ„ํ•ด ์—ฌ๋Ÿฌ ์œ ํ†ต ์ฑ„๋„์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ์˜จ๋ผ์ธ ์Šคํ† ์–ด, ๋ฌผ๋ฆฌ์  ๋งค์žฅ, ์ œ3์ž ์†Œ๋งค์—…์ฒด ๋“ฑ์„ ํฌํ•จํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์†Œ๋น„์ž์˜ ๊ฐœ์ธ์ ์ธ ์š”๊ตฌ์— ๋งž์ถ˜ ..

    [UXUI] Google Lighthouse๋ฅผ UI/UX ๊ฐœ์„ ์— ํ™œ์šฉํ•ด๋ณด์ž

    [UXUI] Google Lighthouse๋ฅผ UI/UX ๊ฐœ์„ ์— ํ™œ์šฉํ•ด๋ณด์ž

    Google Lighthouse๋ž€? ํ˜น์‹œ ์ด๋Ÿฐ ๊ฒฝํ—˜ ์žˆ์œผ์‹ ๊ฐ€์š”? ๐Ÿ™‹โ€โ™€๏ธ ๋ถ„๋ช… ๋‚ด๊ฐ€ ๋งŒ๋“  ์›น์‚ฌ์ดํŠธ์ธ๋ฐ, ๋ญ๊ฐ€ ๋ฌธ์ œ์ธ์ง€ ๋„ํ†ต ๋ชจ๋ฅด๊ฒ ๋‹ค. ๐Ÿ™‹โ€โ™€๏ธ ์‚ฌ์šฉ์ž๋“ค์ด ์ž๊พธ ๋А๋ฆฌ๋‹ค๊ณ  ํ•˜๋Š”๋ฐ, ์–ด๋””๋ฅผ ์†๋ด์•ผ ํ• ์ง€ ๋ง‰๋ง‰ํ•˜๋‹ค. ๐Ÿ™‹โ€โ™€๏ธ ์—ด์‹ฌํžˆ ๋งŒ๋“ค์—ˆ๋Š”๋ฐ, ๊ฒ€์ƒ‰ ์—”์ง„์—์„œ ์ž˜ ์ฐพ์•„์ฃผ์ง€ ์•Š๋Š”๋‹ค. Lighthouse๋Š” ์›น์‚ฌ์ดํŠธ์˜ ์„ฑ๋Šฅ, ์ ‘๊ทผ์„ฑ, SEO๋ฅผ ํ•œ ๋ฐฉ์— ํ•ด๊ฒฐํ•ด ์ฃผ๋Š” ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. ์›น ๊ฐœ๋ฐœ์ž์™€ UX/UI ๋””์ž์ด๋„ˆ๋ผ๋ฉด ๊ผญ ์•Œ์•„์•ผ ํ•  ํ•„์ˆ˜ ๋„๊ตฌ์ฃ . ํŽ˜์ด์ง€ ๋กœ๋”ฉ ์†๋„๋Š” ๋ฌผ๋ก , ์‚ฌ์šฉ์ž ๊ฒฝํ—˜, ์ ‘๊ทผ์„ฑ ๋ฌธ์ œ๊นŒ์ง€ ์ฝ• ์ง‘์–ด๋ƒ…๋‹ˆ๋‹ค. ๊ฒŒ๋‹ค๊ฐ€ ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”(SEO)๊นŒ์ง€ ๋„์™€์ค€๋‹ค๋‹ˆ, UI ๊ฐœ์„  ์ •๋ง ์‰ฝ์ฃ ? Lighthouse, ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ• ๊นŒ? 1. Chrome DevTools๋ฅผ ํ†ตํ•œ ์‚ฌ์šฉ Google Chrome ๋ธŒ๋ผ์šฐ์ €์—์„œ ์›ํ•˜๋Š” ์›น ํŽ˜์ด..

    [UI] 2๋ฐฐ์ˆ˜, 3๋ฐฐ์ˆ˜ ์ž‘์—…์„ ํ•˜๋Š” ์ด์œ : ํ”ผ๊ทธ๋งˆ์™€ ํฌํ† ์ƒต

    [UI] 2๋ฐฐ์ˆ˜, 3๋ฐฐ์ˆ˜ ์ž‘์—…์„ ํ•˜๋Š” ์ด์œ : ํ”ผ๊ทธ๋งˆ์™€ ํฌํ† ์ƒต

    UI ๋””์ž์ธ์—์„œ ์ด๋ฏธ์ง€์™€ ๊ทธ๋ž˜ํ”ฝ์˜ ํ•ด์ƒ๋„๋Š” ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์— ํฐ ์˜ํ–ฅ์„ ๋ฏธ์นฉ๋‹ˆ๋‹ค. ํฌํ† ์ƒต๊ณผ ํ”ผ๊ทธ๋งˆ์™€ ๊ฐ™์€ ๋””์ž์ธ ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ, 2๋ฐฐ์ˆ˜ ๋˜๋Š” 3๋ฐฐ์ˆ˜๋กœ ์ž‘์—…ํ•˜๊ฑฐ๋‚˜ exportํ•ด์•ผ ํ•œ๋‹ค๋Š” ๋ง์„ ์ž์ฃผ ๋“ฃ๊ฒŒ ๋˜๋Š”๋ฐ, ์™œ์ผ๊นŒ์š”? ํฌํ† ์ƒต์—์„œ 2๋ฐฐ์ˆ˜, 3๋ฐฐ์ˆ˜๋กœ ์ž‘์—…ํ•ด์•ผ ํ•˜๋Š” ์ด์œ ๊ฐ€ ๋ญ˜๊นŒ์š”? ํฌํ† ์ƒต์—์„œ 2๋ฐฐ์ˆ˜ ๋˜๋Š” 3๋ฐฐ์ˆ˜ ์ž‘์—…์„ ํ•˜๋Š” ์ด์œ ๋Š” ์ฃผ๋กœ ๊ณ ํ•ด์ƒ๋„ ๋””์Šคํ”Œ๋ ˆ์ด๋ฅผ ์ง€์›ํ•˜๊ธฐ ์œ„ํ•ด์„œ์ž…๋‹ˆ๋‹ค. ๋ ˆํ‹ฐ๋‚˜ ๋””์Šคํ”Œ๋ ˆ์ด์™€ ๊ฐ™์€ ๊ณ ํ•ด์ƒ๋„ ๋””์Šคํ”Œ๋ ˆ์ด๋Š” ํ”ฝ์…€ ๋ฐ€๋„๊ฐ€ ๋†’์•„์„œ ํ‘œ์ค€ ํ•ด์ƒ๋„์˜ ์ด๋ฏธ์ง€๊ฐ€ ์ž‘๊ณ  ํ๋ฆฟํ•˜๊ฒŒ ๋ณด์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ์›๋ž˜ ํฌ๊ธฐ๋ณด๋‹ค ํฐ ์ด๋ฏธ์ง€๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ณ ํ•ด์ƒ๋„์—์„œ๋„ ์„ ๋ช…ํ•˜๊ฒŒ ๋ณด์ด๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, 100x100 ํ”ฝ์…€์˜ ์ด๋ฏธ์ง€๋ฅผ 200x200 ํ”ฝ์…€(2๋ฐฐ์ˆ˜) ๋˜๋Š” 300x300 ํ”ฝ์…€(3๋ฐฐ์ˆ˜)๋กœ ์ œ์ž‘ํ•˜..

    [UI] ๋””์ž์ด๋„ˆ๊ฐ€ ์•Œ์•„์•ผ ํ•  ํ•„์ˆ˜ ๋‹จ์œ„: SP, DP, DPI, PPI, PX, PT

    ๋””์ž์ด๋„ˆ๊ฐ€ ์•Œ์•„์•ผ ํ•  ํ•„์ˆ˜ ๋‹จ์œ„: SP, DP, DPI, PPI, PX, PT ๋””์ž์ธ์€ ๋‹จ์ˆœํžˆ ์‹œ๊ฐ์  ์•„๋ฆ„๋‹ค์›€์„ ๋„˜์–ด์„œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜๊ณผ ๋ฐ€์ ‘ํ•˜๊ฒŒ ์—ฐ๊ฒฐ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ํšจ๊ณผ์ ์ธ ๋””์ž์ธ์„ ์œ„ํ•ด์„œ๋Š” ๋‹ค์–‘ํ•œ ๋‹จ์œ„์™€ ๊ฐœ๋…์„ ์ •ํ™•ํžˆ ์ดํ•ดํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” SP, DP, DPI, PPI, PX, PT์™€ ๊ฐ™์€ ํ•ต์‹ฌ ๋‹จ์œ„๋“ค์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. 1. SP (Scale Independent Pixels) ์•ˆ๋“œ๋กœ์ด๋“œ ๊ฐœ๋ฐœ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๊ธ€๊ผด ํฌ๊ธฐ ๋‹จ์œ„์ž…๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž์˜ ๊ธฐ๊ธฐ ์„ค์ •์— ๋”ฐ๋ผ ๊ธ€๊ผด ํฌ๊ธฐ๊ฐ€ ์กฐ์ ˆ๋˜์–ด, ์ ‘๊ทผ์„ฑ๊ณผ ์‚ฌ์šฉ์„ฑ์„ ๋†’์ž…๋‹ˆ๋‹ค. SP๋Š” ํŠนํžˆ ์•ˆ๋“œ๋กœ์ด๋“œ์˜ ์ ‘๊ทผ์„ฑ ๊ธฐ๋Šฅ๊ณผ ๋ฐ€์ ‘ํ•˜๊ฒŒ ์—ฐ๊ด€๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ex) ์‚ฌ์šฉ์ž์˜ ์‹œ๋ ฅ ๋ฌธ์ œ๋‚˜ ์„ ํ˜ธ์— ๋”ฐ๋ผ ๊ธ€๊ผด ํฌ๊ธฐ๋ฅผ ์กฐ์ •ํ•  ๋•Œ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. 2. DP (Density-ind..