๐ก 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 ๊ฐ์ ์ ํ์ฉํด๋ณด์](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fukm0e%2FbtsCLqfuJpZ%2FRHQATpunSEhAclIS9VGTeK%2Fimg.png)
[UXUI] Google Lighthouse๋ฅผ UI/UX ๊ฐ์ ์ ํ์ฉํด๋ณด์
Google Lighthouse๋? ํน์ ์ด๋ฐ ๊ฒฝํ ์์ผ์ ๊ฐ์? ๐โโ๏ธ ๋ถ๋ช ๋ด๊ฐ ๋ง๋ ์น์ฌ์ดํธ์ธ๋ฐ, ๋ญ๊ฐ ๋ฌธ์ ์ธ์ง ๋ํต ๋ชจ๋ฅด๊ฒ ๋ค. ๐โโ๏ธ ์ฌ์ฉ์๋ค์ด ์๊พธ ๋๋ฆฌ๋ค๊ณ ํ๋๋ฐ, ์ด๋๋ฅผ ์๋ด์ผ ํ ์ง ๋ง๋งํ๋ค. ๐โโ๏ธ ์ด์ฌํ ๋ง๋ค์๋๋ฐ, ๊ฒ์ ์์ง์์ ์ ์ฐพ์์ฃผ์ง ์๋๋ค. Lighthouse๋ ์น์ฌ์ดํธ์ ์ฑ๋ฅ, ์ ๊ทผ์ฑ, SEO๋ฅผ ํ ๋ฐฉ์ ํด๊ฒฐํด ์ฃผ๋ ๋๊ตฌ์ ๋๋ค. ์น ๊ฐ๋ฐ์์ UX/UI ๋์์ด๋๋ผ๋ฉด ๊ผญ ์์์ผ ํ ํ์ ๋๊ตฌ์ฃ . ํ์ด์ง ๋ก๋ฉ ์๋๋ ๋ฌผ๋ก , ์ฌ์ฉ์ ๊ฒฝํ, ์ ๊ทผ์ฑ ๋ฌธ์ ๊น์ง ์ฝ ์ง์ด๋ ๋๋ค. ๊ฒ๋ค๊ฐ ๊ฒ์ ์์ง ์ต์ ํ(SEO)๊น์ง ๋์์ค๋ค๋, UI ๊ฐ์ ์ ๋ง ์ฝ์ฃ ? Lighthouse, ์ด๋ป๊ฒ ์ฌ์ฉํ ๊น? 1. Chrome DevTools๋ฅผ ํตํ ์ฌ์ฉ Google Chrome ๋ธ๋ผ์ฐ์ ์์ ์ํ๋ ์น ํ์ด..
![[UI] 2๋ฐฐ์, 3๋ฐฐ์ ์์
์ ํ๋ ์ด์ : ํผ๊ทธ๋ง์ ํฌํ ์ต](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FHDD1N%2FbtsCsxOsBjP%2FQjUzHXiOi4UnZoQRdbG4dK%2Fimg.webp)
[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..