[๐Ÿš€๋ฐ˜์‘ํ˜• ๋””์ž์ธ ์‹œ 7๊ฐ€์ง€ ์ฒดํฌ๋ฆฌ์ŠคํŠธ] ๋ฐ˜์‘ํ˜• ๋””์ž์ธ์ด๋ž€, ์›น ํ™˜๊ฒฝ์—์„œ ๋‹ค์–‘ํ•œ ๋””๋ฐ”์ด์Šค์— ์ตœ์ ํ™”๋œ ์ƒํƒœ๋ฅผ ๋œปํ•ฉ๋‹ˆ๋‹ค. ํ•œ ๊ฐ€์ง€ ๋””๋ฐ”์ด์Šค์™€ ํ•ด์ƒ๋„๋งŒ ๊ณ ๋ คํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๊ธฐ์— ๊ณ ๋ คํ•ด์•ผ ํ•  ์‚ฌํ•ญ๋“ค์ด ์—ฌ๋Ÿฟ ์กด์žฌํ•˜๋Š”๋ฐ์š”! 1.ํ˜„์žฌ ์›น ์‚ฌ์ดํŠธ ํ™•์ธ ์ด๊ฑด ์ด๋ฏธ ์›น์‚ฌ์ดํŠธ๊ฐ€ ๊ตฌ์ถ• ๋˜์—ˆ๋‹ค๋Š” ๊ฐ€์ •์—์„œ ์‹œ์ž‘๋˜๋Š” ์ฒดํฌ๋ฆฌ์ŠคํŠธ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค. ๊ตฌ๊ธ€์—์„œ ์ œ๊ณตํ•ด์ฃผ๋Š” ์ตœ์ ํ™” ํ…Œ์ŠคํŠธ ๋“ฑ์„ ํ™œ์šฉํ•ด ํ˜„์žฌ ์›น์‚ฌ์ดํŠธ๊ฐ€ ๋ฐ˜์‘ํ˜•์œผ๋กœ ๊ตฌ์ถ• ๋˜์—ˆ๋Š”์ง€, ๋ชจ๋ฐ”์ผ ํ™˜๊ฒฝ์—์„œ๋„ ์ž˜ ์ž‘๋™ํ•˜๋Š”์ง€๋ฅผ ๋จผ์ € ํ™•์ธํ•ด๋ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. 2.๋ฐ˜์‘ํ˜•์ด ์•„๋‹Œ ์š”์†Œ๋“ค ํ™•์ธ ๋ฐ ์ˆ˜์ • 1๋ฒˆ ํ…Œ์ŠคํŠธ๋ฅผ ํ†ตํ•ด ๋ฐ˜์‘ํ˜•์— ํ•„์š”ํ•œ ์š”์†Œ๋“ค์ด ๋ฌด์—‡์ธ์ง€, ์šฐ๋ฆฌ์—๊ฒŒ ๋ถ€์กฑํ•œ ์ ์€ ๋ฌด์—‡์ธ์ง€ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฐ”, ์ด๋ฏธ์ง€, ํฐํŠธ, ๋ฒ„ํŠผ ๋“ฑ์ด ๋ฐ˜์‘ํ˜•์— ๋”ฐ๋ผ ์ž˜ ํ™•์ธ ๋  ์ˆ˜ ์žˆ๋Š”์ง€ ๋“ฑ์„ ํ™•์ธํ•ด๋ด์•ผ ํ•˜๋Š” ๊ฒƒ! 3.๋””๋ฐ”์ด์Šค ๋ณ„ ์†๋„ ํ…Œ์ŠคํŠธ 1๋ฒˆ์—์„œ ๋‚˜์˜จ ์–˜๊ธฐ์™€ ์ด์–ด์ง€๋Š” ๋‚ด์šฉ์ธ๋ฐ์š”! ๋ฐ˜์‘ํ˜•์ด๋ž€ ๋‹ค์–‘ํ•œ ๋””๋ฐ”์ด์Šค๋ฅผ ์ง€์›ํ•ด์•ผ ํ•˜๊ธฐ์—, ๋””๋ฐ”์ด์Šค ๋ณ„ ์†๋„์— ๋งŽ์€ ์‹ ๊ฒฝ์„ ์จ์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋ฐ”์ผ๋กœ ์ ‘์†ํ–ˆ๋Š”๋ฐ PC์— ๋น„ํ•ด ์†๋„๊ฐ€ ๋Š๋ฆฌ๋‹ค๋ฉด ์‚ฌ์šฉ์ž๋“ค์—๊ฒŒ ์ข‹์ง€ ์•Š์€ ๊ฒฝํ—˜์„ ์ œ๊ณตํ•ด์ค„ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ! 4.โ€™Finger tapsโ€™ ๊ณ ๋ ค ๋…ธํŠธ๋ถ, ๋ฐ์Šคํฌํƒ‘์—์„œ์˜ ์ ‘์† ํ™˜๊ฒฝ๊ณผ ๋ชจ๋ฐ”์ผ์—์„œ์˜ ์‚ฌ์šฉ ํ™˜๊ฒฝ์€ ๋‹ค๋ฅผ ์ˆ˜ ๋ฐ–์— ์—†์Šต๋‹ˆ๋‹ค. ๋ชจ๋ฐ”์ผ์—์„œ๋Š” ํŠนํžˆ ์†๊ฐ€๋ฝ์„ ํ™œ์šฉํ•œ ์ด๋™, ์ „ํ™˜ ๋“ฑ์ด ๋งŽ์ด ๋ฐœ์ƒํ•˜๋Š”๋ฐ์š”. ๋•Œ๋ฌธ์— ๋ฐ˜์‘ํ˜• ๊ตฌ์ถ• ์‹œ ํƒญํ•‘ ํ™˜๊ฒฝ์— ๋Œ€ํ•œ ๊ณ ๋ฏผ์ด ๋ฐ˜๋“œ์‹œ ์ด์–ด์ ธ์•ผ ํ•ฉ๋‹ˆ๋‹ค. 5.ํƒ์ƒ‰ ํ™˜๊ฒฝ ๊ณ ๋ ค ๋ชจ๋ฐ”์ผ์€ PC์— ๋น„ํ•ด ํ™˜๊ฒฝ์  ์ œ์•ฝ์ด ๋งŽ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ ํƒ์ƒ‰ ๊ด€์ ์—์„œ๋Š” ๋” ๊ทธ๋ ‡์ฃ . ๋ฉ”์ธ ๋ฉ”๋‰ด์— ํ•ด๋‹นํ•˜๋Š” ๋‚ด์šฉ๋“ค์„ GNB ๋“ฑ์— ํŽผ์ณ ๋‚ผ ์ˆ˜ ์žˆ๋Š” PC์— ๋น„ํ•ด ๋ชจ๋ฐ”์ผ์—์„œ๋Š” ์ข์€ ์˜์—ญ์œผ๋กœ ์ธํ•ด ๋™์ผํ•œ ๊ตฌ์„ฑ์ด ์–ด๋ ต์Šต๋‹ˆ๋‹ค. ์ด ๋•Œ ํ–„๋ฒ„๊ฑฐ ๋ฉ”๋‰ด ์‚ฌ์šฉ ๋“ฑ ๋ชจ๋ฐ”์ผ ํ™˜๊ฒฝ์— ๋งž๋Š” ๋ณ„๋„์˜ ๊ธฐํš ์š”์†Œ๋“ค์„ ํ•จ๊ป˜ ๊ณ ๋ ค ํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. 6.ํŒ์—… ํŒ์—…์€ ์—ฌ์ „ํžˆ ์‚ฌ์šฉ์ž๋“ค์—๊ฒŒ ํŠน์ • ์†Œ์‹์„ ์•Œ๋ฆฌ๋Š” ์ค‘์š”ํ•œ ์—ฐ๊ฒฐ๊ณ ๋ฆฌ๋กœ ํ™œ์šฉ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. PC์—์„œ๋Š” ์ž˜ ๋ณด์ด๋Š” ํŒ์—…์ด ๋ชจ๋ฐ”์ผ์—์„œ๋Š” ์ผ๋ถ€ ์ž˜๋ ค ๋ณด์ธ๋‹ค๋ฉด? ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ข‹์ง€ ์•Š์€ ์˜ํ–ฅ์„ ๋ผ์น  ์ˆ˜ ๋ฐ–์— ์—†์Šต๋‹ˆ๋‹ค. ์ด ๊ฒฝ์šฐ ์›น์ด๋‚˜ ๋ชจ๋ฐ”์ผ ๋ฒ„์ „์— ๋”ฐ๋ผ ํŒ์—… ์‚ฌ์ด์ฆˆ๋ฅผ ๋ณ„๋„๋กœ ๊ณ ๋ คํ•˜๋Š” ๋“ฑ์˜ ์žฅ์น˜๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. 7.์‹œ๊ฐ์ ์œผ๋กœ ์–ด์ƒ‰ํ•œ ์ ์€ ์—†๋Š”์ง€ ํ™•์ธ ๋ฉ”๋‰ด๊ฐ€ ์ž˜๋ฆฌ์ง€๋Š” ์•Š๋Š”์ง€, ํ…Œ์ด๋ธ”์ด ํ•ด์ƒ๋„์— ๋”ฐ๋ผ ์ž˜ ์ •๋ˆ ๋˜์–ด ์žˆ๋Š”์ง€, ์ธ๋„ค์ผ ์‚ฌ์ด์ฆˆ๊ฐ€ ํ•ด์ƒ๋„ ๋ณ„ ์„ค์ • ๋˜์–ด ์žˆ๋Š”์ง€ ๋“ฑ ํ•ด์ƒ๋„๋‚˜ ์ ‘๊ทผํ•˜๋Š” ๋””๋ฐ”์ด์Šค ์ข…๋ฅ˜์— ๋”ฐ๋ผ ์›น์‚ฌ์ดํŠธ๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ์š”์†Œ๋“ค์ด ์‹œ๊ฐ์ ์œผ๋กœ ์ž˜ ์ •๋ฆฌ๋˜์–ด ์žˆ๋Š”์ง€ ํ™•์ธํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. (๐Ÿ‘‹์ค‘์š”ํ•œ ์ด์œ ๊ฐ€ ๋ญ”๊ฐ€์š”?) ์›น ์„œ๋น„์Šค ๊ตฌ์ถ• ์‹œ, ๋ฐ˜์‘ํ˜•์ด ํ•„์ˆ˜๋Š” ์•„๋‹ˆ์—์š”. ๋ชจ๋ฐ”์ผ ๋Œ€ํ‘œ ํ•ด์ƒ๋„์™€ ์›น ๋Œ€ํ‘œ ํ•ด์ƒ๋„๋งŒ ๊ฐ€์ง€๊ณ  ๊ฐ๊ฐ ์ž‘์—… ํ•  ์ˆ˜๋„ ์žˆ๊ณ , ์นด์นด์˜ค ๋ฉ”์ด์ปค์Šค์™€ ๊ฐ™์ด ํƒœ๋ธ”๋ฆฟ ์‚ฌ์ด์ฆˆ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์›น ํ™˜๊ฒฝ์—์„œ๋„ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์ž‘์—… ํ•˜๋Š” ๊ฒƒ๋„ ๊ฐ€๋Šฅํ•˜์ฃ . ๋ฐ˜์‘ํ˜•์€ ์›น์‚ฌ์ดํŠธ๋ฅผ ๊ตฌ์ถ•ํ•˜๋Š” ํ•˜๋‚˜์˜ ๋ฐฉ๋ฒ• ์ค‘ ํ•˜๋‚˜๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์ค‘์š”ํ•œ ๊ฑด, ๋ˆ„๊ฐ€ ์‚ฌ์šฉํ•˜๋Š”์ง€ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋Šฅ์ด ๋ฌด์—‡์ธ์ง€ ์ด ๋‘ ๊ฐ€์ง€๋ผ๊ณ  ์ƒ๊ฐํ•ด์š”. ์˜ˆ๋ฅผ ๋“ค์–ด ์ง€๊ธˆ ์จ๋ณด๋Ÿฌ ๊ฐ‘๋‹ˆ๋‹ค์˜ ๊ฒฝ์šฐ ์ตœ์ดˆ ์˜ˆ์ƒ๊ณผ ๋‹ค๋ฅด๊ฒŒ ๋ฐ์Šคํฌํƒ‘์œผ๋กœ ์ ‘์†ํ•˜๋Š” ๋น„์œจ์ด 80% ์ด์ƒ ๋˜๋Š”๋ฐ์š”. ํ•ด๋‹น ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ์›น ๋ฒ„์ „์„ ์ œ๊ฐ€ ๊ณ ๋ คํ•œ๋‹ค๊ณ  ํ•˜๋ฉด ๋ฐ˜์‘ํ˜•์„ ์„ ํƒํ•˜์ง€ ์•Š์„ ๊ฐ€๋Šฅ์„ฑ์ด ๋†’์Šต๋‹ˆ๋‹ค. ๋น ๋ฅด๊ฒŒ ๋งŒ๋“ค๊ณ  ํ…Œ์ŠคํŠธ ํ•œ๋‹ค! ๋ผ๋Š” ๊ด€์ ์—์„œ๋Š” ๋”๋”์šฑ ๋ง์ด์ฃ . ๋ฐ์ดํ„ฐ๋ฅผ ํฌํ•จํ•œ ์—ฌ๋Ÿฌ ์ƒํ™ฉ์„ ๊ณ ๋ ค ํ–ˆ์„ ๋•Œ, ๋ฐ˜์‘ํ˜•์œผ๋กœ ๊ตฌ์ถ•ํ•ด์•ผ๊ฒ ๋‹ค๋Š” ํŒ๋‹จ์ด ์„ฐ๋‹ค๋ฉด ์œ„์™€ ๊ฐ™์€ ๋‚ด์šฉ์„ ๊ผญ ํ™•์ธํ•ด๋ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ตœ์†Œ, ์ตœ๋Œ€ ํ•ด์ƒ๋„๋ฅผ ์„ค์ •ํ•˜๋Š” ๊ฒƒ์œผ๋กœ ์‹œ์ž‘ํ•ด ํ•ด์ƒ๋„์˜ ๋ณ€ํ™”์— ๋”ฐ๋ผ ๋ ˆ์ด์•„์›ƒ์ด ์–ด๋–ป๊ฒŒ ๋ณ€๊ฒฝ๋˜๋Š”์ง€ ๋“ฑ์ด ๊ธฐํš ๋‹จ๊ณ„์—์„œ ์ถฉ๋ถ„ํžˆ ๊ณ ๋ ค๋˜์–ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด์ฃ . ๋ฐ˜์‘ํ˜• ๊ตฌ์ถ•์‹œ ์กฐ๊ธˆ์ด๋‚˜๋งˆ ๋„์›€์ด ๋  ์ˆ˜ ์žˆ๋Š” ์ž๋ฃŒ๋ผ๋Š” ์ƒ๊ฐ์— ๊ณต์œ ํ•ฉ๋‹ˆ๋‹ค. (๋ณธ๋ฌธ์—๋Š” ํ™œ์šฉ ๊ฐ€๋Šฅํ•œ ํˆด๋“ค๋„ ํ•จ๊ป˜ ํฌํ•จ๋˜์–ด ์žˆ์–ด์š”!) (๐Ÿ’Œํ•จ๊ป˜ ์ฝ์–ด๋ณด์„ธ์š”!) ๋ฐ˜์‘ํ˜• ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋Š” ์˜คํ”ˆ์†Œ์Šค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ โ€˜Muuriโ€™ : http://bit.ly/2w20kbq ์›น์‚ฌ์ดํŠธ์˜ ๋ชจ๋ฐ”์ผ ์ตœ์ ํ™” ์ •๋„์™€ ์†๋„๋ฅผ ๋น ๋ฅด๊ฒŒ ํ…Œ์ŠคํŠธ ํ•˜๋Š” ๋ฐฉ๋ฒ•! : http://icunow.co.kr/testmysite/

Responsive Design Checklist: Your 7-Item List for Responsive Design

WebFX Blog

Responsive Design Checklist: Your 7-Item List for Responsive Design

๋‹ค์Œ ๋‚ด์šฉ์ด ๊ถ๊ธˆํ•˜๋‹ค๋ฉด?

๋˜๋Š”

์ด๋ฏธ ํšŒ์›์ด์‹ ๊ฐ€์š”?

2020๋…„ 5์›” 18์ผ ์˜ค์ „ 3:26

๋Œ“๊ธ€ 0




๋น„์Šทํ•œ ๊ฒŒ์‹œ๋ฌผ

์ฃผ๊ฐ„ ์ธ๊ธฐ TOP 10

1

๐™๐™ž๐™˜๐™๐™–๐™ง๐™™ ์ฒ˜์Œ ๋ฐฐ์›Œ๋„ ์žฌ๋ฏธ์žˆ๊ณ  ๊ฐ€์น˜์žˆ๋Š” DATA/AI ๊ต์œก์„ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

์•„๋งˆ์กด ์ถœ์‹  ์—”์ง€๋‹ˆ์–ด๊ฐ€ ์•Œ๋ ค์ฃผ๋Š” ์ด๋ ฅ์„œ ์ž‘์„ฑ ํŒ

2

ํ•œ์ •(Jung Han) ๋ผ์ธํ”Œ๋Ÿฌ์Šค ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž

2024 ํ”„๋ก ํŠธ์—”๋“œ ๋‰ด์Šค ํ•œ ๋ฐฉ์— ๋ชฐ์•„๋ณด๊ธฐ

3

๋‹ฌ๋ ˆ ๋ธ”๋กœ๊ทธ ์“ฐ๋Š” ๊ฐœ๋ฐœ์ž โœ๏ธ

GitHub Pages์— ์›น์‚ฌ์ดํŠธ ๋ฐฐํฌํ•˜๊ธฐ

4

๊น€์˜์ค‘ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž

AI ์‹œ๋Œ€, ๊ฐœ๋ฐœ์ž ๋กœ๋“œ๋งต: ์ฝ”๋”์—์„œ ์•„ํ‚คํ…ํŠธ๋กœ

5

ํ•˜์กฐ์€ ๋‹น๊ทผ ๋ชจ์ž„ Product Engineer

โ€œ์—ฐ์ฐจ๊ฐ€ ์–ผ๋งŒ๋ฐ ์ด๊ฒƒ๋„ ๋ชฐ๋ผ์š”?โ€ ์ด๋Ÿฐ ๋ง ๋“ค์„๊นŒ ๋ด ์•„๋Š” ์ฒ™ํ• 

์ถ”์ฒœ ํ”„๋กœํ•„