๐Ÿ’ป ์ฝ”๋“œ์™€ ๋””์ž์ธ์˜ ๊ฐ„๊ทน์„ ํ™• ์ค„์ธ ํ”ผ๊ทธ๋งˆ์˜ ๋Œ€๊ทœ๋ชจ ์—…๋ฐ์ดํŠธ ๐ŸŽ‰ CSS๋ฅผ ๋ฐฐ์šฐ๋‹ค ๋ณด๋ฉด ์ด๋Ÿฐ ์˜๋ฌธ์ด ์ƒ๊ธฐ๊ณค ํ–ˆ๋Š”๋ฐ์š”. ์ฝ”๋“œ์—์„œ๋Š” margin ๊ฐ’, ํ˜น์€ padding ๊ฐ’์„ ์ƒ, ํ•˜, ์ขŒ, ์šฐ์— ๊ฐ๊ฐ ์ค„ ์ˆ˜ ์žˆ๋Š”๋ฐ ์™œ ๋””์ž์ธ ํˆด์—์„œ๋Š” ๋ถˆ๊ฐ€๋Šฅํ• ๊นŒ? ์ฝ”๋“œ์—์„œ๋Š” ๋™์ผํ•œ ์ปดํฌ๋„ŒํŠธ๋กœ ์ƒํƒœ๊ฐ’๋งŒ ๋ฐ”๋€” ๋ฟ์ธ๋ฐ, ์™œ ๋””์ž์ธ ํˆด์—์„œ๋Š” hover, active, disabled ์ƒํƒœ๋ฅผ ๋”ฐ๋กœ ์ปดํฌ๋„ŒํŠธํ™”ํ•ด์•ผ ํ• ๊นŒ? ํ”ผ๊ทธ๋งˆ๋Š” ์ด๋ฒˆ Config Europe์—์„œ ๋Œ€๊ทœ๋ชจ ์—…๋ฐ์ดํŠธ๋ฅผ ๋ฐœํ‘œํ–ˆ๋Š”๋ฐ์š”. ์ด๋ฒˆ ์—…๋ฐ์ดํŠธ๋กœ ๋””์ž์ธ๊ณผ ์ฝ”๋“œ์˜ ๋‹ค๋ฅธ ๊ตฌํ˜„ ๋ฐฉ์‹์—์„œ ์˜ค๋Š” ๊ฐ„๊ทน์„ ์—„์ฒญ๋‚˜๊ฒŒ ์ค„์—ฌ์ค„ ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. 1๏ธโƒฃ Variant (11์›” ๋ฆด๋ฆฌ์ฆˆ ์˜ˆ์ •) ์ด์ œ ๋”์ด์ƒ ์—ฌ๋Ÿฌ๊ฐœ์˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ํ•˜๋‚˜์˜ ์ปดํฌ๋„ŒํŠธ ์•ˆ์— ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์†์„ฑ์ด ์กด์žฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค๋ฉด, Button ์ปดํฌ๋„ŒํŠธ์— Primary/Seondary ์†์„ฑ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด ๋ฒ„ํŠผ์€ ๋‹จ์ผํ•œ ์ปดํฌ๋„ŒํŠธ๋กœ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ๋งˆ์น˜ ์ฝ”๋“œ์—์„œ์ฒ˜๋Ÿผ์š”! 2๏ธโƒฃ Interactive Component (๋‚ด๋…„ 1์›” ๋ฆด๋ฆฌ์ฆˆ ์˜ˆ์ •) ์ด์ œ ํ”ผ๊ทธ๋งˆ๊ฐ€ ํ”„๋กœํ† ํƒ€์ž… ๊ธฐ๋Šฅ์—๋„ ๋ณธ๊ฒฉ์ ์œผ๋กœ ํž˜์„ ์Ÿ๋Š” ๋ชจ์–‘์ž…๋‹ˆ๋‹ค. ์ด์ œ ํ”ผ๊ทธ๋งˆ์—์„œ๋„ ์ปดํฌ๋„ŒํŠธ๋ฅผ '์ž‘๋™์‹œํ‚ฌ' ์ˆ˜ ์žˆ์–ด์š”! ๊ธฐ์กด์—๋Š” ํŽ˜์ด์ง€ ๋‹จ์œ„๋กœ๋งŒ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ ์šฉํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค๋ฉด, ์ด ๊ธฐ๋Šฅ์€ ์ปดํฌ๋„ŒํŠธ ๋‹จ์œ„์— ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ ์šฉ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฐ ๋ฐฉํ–ฅ์˜ ์—…๋ฐ์ดํŠธ๊ฐ€ ๊ณ„์† ๋œ๋‹ค๋ฉด ๊ฒฐ๊ตญ์—” ๋ณ„๋„์˜ ํ”„๋กœํ† ํƒ€์ž… ํˆด์„ ์‚ฌ์šฉํ•  ํ•„์š” ์—†์ด ํ”ผ๊ทธ๋งˆ์—์„œ ๋ชจ๋“  ๋””์ž์ธ ์ž‘์—…์„ ํ•˜๊ฒŒ ๋  ์ˆ˜ ์žˆ์ง€ ์•Š์„๊นŒ ์ƒ๊ฐ๋ฉ๋‹ˆ๋‹ค. 3๏ธโƒฃ ๋” ์—…๊ทธ๋ ˆ์ด๋“œ ๋œ Auto Layout (11์›” ๋ฆด๋ฆฌ์ฆˆ ์˜ˆ์ •) CSS์˜ Box model, Flexbox ๊ธฐ๋Šฅ์„ ๊ทธ๋Œ€๋กœ ์žฌํ˜„ํ•œ ๊ฐ•๋ ฅํ•ด์ง„ Auto Layout์ด ์—…๋ฐ์ดํŠธ๋  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. Auto Layout ๋œ ํ”„๋ ˆ์ž„ ์•ˆ์— ์š”์†Œ๋ฅผ ๋„ฃ๊ณ  fill content๋ฅผ ๋ˆ„๋ฅด๋ฉด, ํ”„๋ ˆ์ž„์˜ ๋„ˆ๋น„์— ๋งž์ถฐ ์ž๋™์œผ๋กœ ๊ฐ๊ฐ์˜ ์š”์†Œ๋“ค์ด ์ผ์ •ํ•˜๊ฒŒ ๋„ˆ๋น„๋ฅผ ๋‚˜๋ˆ  ๊ฐ–์Šต๋‹ˆ๋‹ค. ๋˜, ๊ธฐ์กด์—๋Š” ์ƒ-ํ•˜, ์ขŒ-์šฐ padding ๊ฐ’์„ ํ•œ๊บผ๋ฒˆ์— ๋ณ€๊ฒฝํ•  ์ˆ˜๋ฐ–์— ์—†์—ˆ์ฃ . ์ด์ œ๋Š” ์ƒ, ํ•˜, ์ขŒ, ์šฐ์˜ padding ๊ฐ’์„ ๋”ฐ๋กœ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ ์™ธ์—๋„ ์ปดํฌ๋„ŒํŠธ ๊ฒ€์ƒ‰, Inspect ๊ธฐ๋Šฅ์ด ํ›จ์”ฌ ๋” ์ง๊ด€์ ์ด๊ณ  ํŽธ๋ฆฌํ•˜๊ฒŒ ๊ฐœ์„ ๋˜์–ด ํ˜„์žฌ ์ ์šฉ ๋˜์—ˆ๋‹ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์ €๋Š” ํŠนํžˆ Variant๊ฐ€ ์ •๋ง ๋งˆ์Œ์— ๋“œ๋Š”๋ฐ์š”. ์ปดํฌ๋„ŒํŠธ ๊ฐœ์ˆ˜๊ฐ€ ํ›จ์”ฌ ์ค„์–ด๋“ค๊ณ  ๊น”๋”ํ•˜๊ฒŒ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์•„ ๊ธฐ๋Œ€๊ฐ€ ๋ฉ๋‹ˆ๋‹ค!

Embracing the tension between code and design

Figma

 Embracing the tension between code and design

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

๋˜๋Š”

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

2020๋…„ 9์›” 20์ผ ์˜คํ›„ 4:10

๋Œ“๊ธ€ 0

    ํ•จ๊ป˜ ์ฝ์€ ๊ฒŒ์‹œ๋ฌผ

    ใ€Š์–ด๋–ค ๊ฒƒ์€ ๋‹ค๋ฅด๊ฒŒ ์‚ด๊ฒŒ ํ•œ๋‹คใ€‹

    ์–ด

    ... ๋” ๋ณด๊ธฐ

    โŸช๐Ÿš€ ์œ ๋‹ˆ์ฝ˜์ด๋ผ ๋ถˆ๋ฆฌ๋˜ ๊ทธ๋“ค, ์ด์ œ ์ง„์งœ ์‹ค๋ ฅ์„ ๋ณด์—ฌ์ค„ ๋•ŒโŸซ

    ์–ด

    ... ๋” ๋ณด๊ธฐ

    ํ† ์Šคยท๋‹น๊ทผยท์˜ค๋Š˜์˜์ง‘, ์ฐ”๋” ํ‘์ž๋ผ๊ณ  ์›ƒ์„ ๋•Œ ์•„๋‹™๋‹ˆ๋‹ค (ํŒŒ์ธ๋“œ์–ด์Šค ์ด์žฌ์šฉ ํšŒ๊ณ„์‚ฌ) | Walcoln SJ Rhee

    www.linkedin.com

    ํ† ์Šคยท๋‹น๊ทผยท์˜ค๋Š˜์˜์ง‘, ์ฐ”๋” ํ‘์ž๋ผ๊ณ  ์›ƒ์„ ๋•Œ ์•„๋‹™๋‹ˆ๋‹ค (ํŒŒ์ธ๋“œ์–ด์Šค ์ด์žฌ์šฉ ํšŒ๊ณ„์‚ฌ) | Walcoln SJ Rhee

    ใ€Š๊ทผ์œก์€ ๊ณ ์ง€์‹ํ•˜์ง€๋งŒ โ€œ์•„, ์ข‹์ง€์š”"ใ€‹

    ๊ทผ

    ... ๋” ๋ณด๊ธฐ


    ใ€Š์ถฉ์‹คํ•˜๊ฒŒ, ์ •์งํ•˜๊ฒŒใ€‹

    ๊ธฐ๋ก์€ ๋ฌธ์ œ๊ฐ€ ์•„๋‹ˆ๋‹ค. ์ง€๊ธˆ์— ์™€์„œ๋Š” ์•„๋ฌด๋ฆฌ ๋…ธ๋ ฅ์„ ํ•ด๋ณธ๋“ค, ์•„๋งˆ๋„ ์ Š์€ ๋‚ ๊ณผ ๋˜‘๊ฐ™์ด ๋‹ฌ๋ฆฌ์ง€๋Š” ๋ชปํ•  ๊ฒƒ์ด๋‹ค. ๊ทธ ์‚ฌ์‹ค์„ ๊ธฐ๊บผ์ด ๋ฐ›์•„๋“ค์ผ ๊ฒƒ์ด๋‹ค. ๋ณ„๋กœ ์œ ์พŒํ•œ ์ผ์ด๋ผ๊ณ  ๋งํ•˜๊ธฐ ์–ด๋ ต์ง€๋งŒ, ๊ทธ๊ฒƒ์ด ๋‚˜์ด๋ฅผ ๋จน์–ด๊ฐ„๋‹ค๋Š” ์ผ์ธ ๊ฒƒ์ด ๋ถ„๋ช…ํ•˜๋‹ค. ๋‚˜์—๊ฒŒ ์—ญํ• ์ด ์žˆ๋Š” ๊ฒƒ๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ, ์‹œ๊ฐ„์—๋„ ์—ญํ• ์ด ์žˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์‹œ๊ฐ„์€ ๋‚˜ ๊ฐ™์€ ์‚ฌ๋žŒ๋ณด๋‹ค๋Š” ํ›จ์”ฌ ์ถฉ์‹คํ•˜๊ฒŒ, ํ›จ์”ฌ ์ •์งํ•˜๊ฒŒ ๊ทธ ์ง๋ฌด๋ฅผ ๋‹คํ•˜๊ณ  ์žˆ๋‹ค. ์ž ์‹œ๋„ ์‰ฌ์ง€ ์•Š๊ณ  ๊ณ„์† ์ „์ง„ํ•ด์˜ค์ง€ ์•Š์•˜๋Š”๊ฐ€.

    ... ๋” ๋ณด๊ธฐ

    ์ง€๋‚œ 2012๋…„ ์„ค๋ฆฝ๋œ ๋นŒ๋”AI๋Š” ์ฝ”๋”ฉ ์ง€์‹ ์—†์ด๋„ AI๋กœ ๋ˆ„๊ตฌ๋‚˜ ์•ฑ์„ ์ œ์ž‘ํ•  ์ˆ˜ ์žˆ๋Š” ์†”๋ฃจ์…˜์„ ์ œ๊ณตํ•˜๋Š” ์Šคํƒ€ํŠธ์—…์ด๋‹ค. ์‚ฌ์šฉ์ž๊ฐ€ ์›ํ•˜๋Š” ๊ธฐ๋Šฅ๊ณผ ๋””์ž์ธ์„ ์„ ํƒํ•˜๋ฉด ์ž๋™์œผ๋กœ ์•ฑ์ด ์ƒ์„ฑ๋˜๋Š” ๊ตฌ์กฐ๋กœ, ์•ฑ ๊ฐœ๋ฐœ์— ๋“ค์–ด๊ฐ€๋Š” ๋น„์šฉ๊ณผ ์‹œ๊ฐ„, ์ธ๋ ฅ ์˜์กด๋„๋ฅผ ํฌ๊ฒŒ ์ค„์ธ๋‹ค๋Š” ์ ์—์„œ ํ˜์‹  ๋ชจ๋ธ๋กœ ์ฃผ๋ชฉ๋ฐ›์•˜๋‹ค.

    ... ๋” ๋ณด๊ธฐ

    ์ด๋ฐ์ผ๋ฆฌ-์„ธ์ƒ์„ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ,์„ธ์ƒ์„ ๋”ฐ๋œปํ•˜๊ฒŒ

    ์ด๋ฐ์ผ๋ฆฌ

    ์ด๋ฐ์ผ๋ฆฌ-์„ธ์ƒ์„ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ,์„ธ์ƒ์„ ๋”ฐ๋œปํ•˜๊ฒŒ

    ์กฐํšŒ 740


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

    1

    ๋‹ฌ๋ ˆ Apollo GraphQL Software Engineer

    ๐ŸŽฏ ์œ ํŠœ๋ธŒ์— 100๋ฒˆ์งธ ์ฝ”๋”ฉ ํ…Œ์ŠคํŠธ ๋ฌธ์ œ ํ’€์ด ์˜์ƒ์„ ์˜ฌ๋ ธ์Šต๋‹ˆ๋‹ค!

    2

    ๊น€ํ•˜๋ฆผ ์šฐ์•„ํ•œํ˜•์ œ๋“ค ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž

    ํƒ€์ž… ์•ˆ์ „ํ•œ API ๋ชจํ‚น์œผ๋กœ ํ”„๋ก ํŠธ์—”๋“œ ์ƒ์‚ฐ์„ฑ ๋†’์ด๊ธฐ

    3

    Arawn Park Senior Engineer & Engineering Lead

    ๋‚˜๋Š” ์‹œ์Šคํ…œ ๋นŒ๋”์ด๋‹ค

    4

    ์„๋ฏผ ์ปค๋ฆฌ์–ด ์ฝ”์น˜

    ์ด์ง์˜ ์กฐ๊ฑด

    5

    ๊ณจ๋นˆํ•ด์ปค Chief Maker

    ์–ด์ œ ์ถœ์‹œ๋œ ๋”ฐ๋ˆ๋”ฐ๋ˆํ•œ ChatGPT Codex๋ฅผ ์‹ค์ œ ํ”„๋กœ์ ํŠธ