ํŠœํ† ๋ฆฌ์–ผ ๐Ÿ‘‰ ๊ฒŒ์‹œ ๋ฐฉ๋ฒ• Dropbox์— ์›น ์‚ฌ์ดํŠธ ํ˜ธ์ŠคํŒ…

(2020 ๋…„ 10 ์›” 19 ์ผ)

์ด ์ž์Šต์„œ๋Š” Sketch2React์—์„œ HTML๋กœ ๋‚ด๋ณด๋‚ด๊ณ  ์ž์‹ ์˜ Dropbox์— ๊ฒŒ์‹œํ•˜๊ธฐ์œ„ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค! ๊ทธ๋ฆฌ๊ณ  ํ˜ธ์ŠคํŒ…์— ํ•œ ํ‘ผ๋„ ๋“ค์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๐Ÿค– ๐Ÿ’ช

๊ทธ๊ฒƒ์— ๊ด€์‹ฌ์ด ์žˆ์œผ์‹ญ๋‹ˆ๊นŒ? ๐Ÿ˜บ ๋ˆ„๊ฐ€ ์•ˆํ• ๊นŒ์š”? ์ด ์›Œํฌ ํ”Œ๋กœ์˜ ์‚ฌ์šฉ ์‚ฌ๋ก€๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  1. ๋„๊ตฌ for Sketch
  2. ์ž์‹ ์—๊ฒŒ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋งํ•ฉ๋‹ˆ๋‹ค.
    “์ด์ œ ๋ญ์•ผ?! ํ˜ธ์ŠคํŒ… ๋น„์šฉ์„ ์ •๋ง๋กœ ์ง€๋ถˆํ•ด์•ผํ•ฉ๋‹ˆ๊นŒ? FTP / ํด๋ผ์šฐ๋“œ ๊ฒŒ์‹œ ์„œ๋น„์Šค๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์ž์„ธํžˆ ๋ฐฐ์šฐ๋Š” ๋ฐ ์‹ ๊ฒฝ์ด ์“ฐ์ผ ํ•„์š”๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?
  3. ๋‚ด ๋ง : ๋‹น์‹ ์€ ์นœ๊ตฌ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค!

์ด๋ฏธ Dropbox๊ฐ€์žˆ๋Š” ๊ฒฝ์šฐ DropPages ๋ผ๋Š” ๊น”๋”ํ•œ ์†”๋ฃจ์…˜์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ตœ๋Œ€ 50MB์˜ ์›น ์‚ฌ์ดํŠธ ์ €์žฅ ์šฉ๋Ÿ‰์„ ๋ฌด๋ฃŒ๋กœ ์ œ๊ณตํ•˜๋ฏ€๋กœ ๋””์ž์ธ์„ ๊ณต๊ฐœํ•˜๋Š” ๋ฐ ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค. ์ •๋ง ๋น ๋ฅด๋‹ค ๐Ÿš€

๋˜ํ•œ ์ „์ฒด ์›น ์‚ฌ์ดํŠธ๊ฐ€ Dropbox์— ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ํŒŒ์ผ์„ ํŽธ์ง‘ํ•˜๊ณ  ์—…๋ฐ์ดํŠธํ•˜๋Š” ๊ฒƒ์€ ์ด์ „ ํŒŒ์ผ์„ ๊ต์ฒดํ•˜๋Š” ๋ฌธ์ œ ์ผ๋ฟ์ž…๋‹ˆ๋‹ค. , Dropbox๊ฐ€ ๋™๊ธฐํ™”๋˜๊ณ  ์งœ๋ฆฟํ•ด์งˆ ๋•Œ๊นŒ์ง€ ๊ธฐ๋‹ค๋ฆฌ์„ธ์š”. ์—…๋ฐ์ดํŠธ๋˜์—ˆ์Šต๋‹ˆ๋‹ค!

Dropbox๊ฐ€ ๋†€๋ผ ์šธ ์ •๋„๋กœ ๋น ๋ฆ…๋‹ˆ๋‹ค . ์„œ๋น„์Šค์—์„œ ๋‹ค์šด๋กœ๋“œ ๊ฐ€๋Šฅํ•œ ํŒŒ์ผ์„ ํ˜ธ์ŠคํŒ… ํ•œ ๊ฒฝํ—˜์ด์žˆ๋Š” ๋ชจ๋“  ์‚ฌ๋žŒ์€ ์ด๋ฏธ ์ด๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์ง€๋งŒ HTML, CSS ๋ฐ Javascript๋ฅผ ํ˜ธ์ŠคํŒ…ํ•˜๋Š” ๊ฒƒ์ด ๋งค์šฐ ๋น ๋ฅด๋‹ค๋Š” ์‚ฌ์‹ค์€ ๋ชฐ๋ž์Šต๋‹ˆ๋‹ค.

DropPages์—๋Š” ์•ฝ๊ฐ„์˜ ์„ค์ •์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์ด์ „, Sketch ๋‚ด๋ถ€ ๋ฐ ์›น ์‚ฌ์ดํŠธ๋ฅผ Sketch2React ์—์„œ HTML๋กœ ๋‚ด ๋ณด๋‚ธ ํ›„์—๋„

๊ฑฑ์ •ํ•˜์ง€ ๋งˆ์„ธ์š”. ๋งค์šฐ ์‰ฝ์Šต๋‹ˆ๋‹ค. ๋‹น์‹ ๊ณผ ํ•จ๊ป˜. ๐Ÿค– ๐Ÿ’ช

ํŠœํ† ๋ฆฌ์–ผ ์š”๊ตฌ ์‚ฌํ•ญ

๊ฐ„๋‹จํ•œ ๋ฐ๋ชจ ์›น ์‚ฌ์ดํŠธ

Sketch2React 100 \% ์Šคํƒ€์ผ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ Sketch๋กœ 100 \% ์ œ์ž‘

์ด ์ž์Šต์„œ์˜ ๋ชฉ์ ์œผ๋กœ์ด ๋ฐ๋ชจ ์›น ์‚ฌ์ดํŠธ ๋‚ด Dropbox์—์„œ ํ˜ธ์ŠคํŒ…๋˜๋Š” Sketch2React๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ Sketch ๋‚ด์—์„œ 100 \% ์ œ์ž‘๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊น”๋” ํ•˜๊ตฐ์š”?

๊ณต๋ถ€ ๋ชฉ์ ์œผ๋กœ ์—ฌ๊ธฐ์—์„œ ์Šค์ผ€์น˜ ํŒŒ์ผ ์„ ๋‹ค์šด๋กœ๋“œ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ’Ž

๐Ÿ‘จโ€๐Ÿณ ์•„์ง ๋‚˜์™€ ํ•จ๊ป˜ ์š”๋ฆฌ๋ฅผ ์‹œ์ž‘ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

1 ๋‹จ๊ณ„ โ€” ์‹œ์ž‘ํ•˜๊ธฐ

์ด ํด๋”๋Š” Dropbox์— ์ถ”๊ฐ€๋ฉ๋‹ˆ๋‹ค.
  1. ์—ฌ๊ธฐ a๋กœ ์ด๋™ํ•˜์„ธ์š”. >, Dropbox์— ๋กœ๊ทธ์ธํ•˜๊ณ  DropPages๊ฐ€ ๊ท€ํ•˜์˜ ๊ณ„์ •์— ์•ก์„ธ์Šค ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ—ˆ์šฉํ•ฉ๋‹ˆ๋‹ค. DropPages๋Š” Apps๋ผ๋Š” ํด๋”์— My.DropPages๋ผ๋Š” ๋ณ„๋„์˜ ํด๋”๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค. ๊ฑฑ์ •ํ•˜์ง€ ๋งˆ์„ธ์š”. ๋ชจ๋“  ๊ฒƒ์ด ๋‹ค๋ฅธ ๋ชจ๋“  ๊ฒƒ๊ณผ ๊น”๋”ํ•˜๊ฒŒ ๋ถ„๋ฆฌ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.
DropPages โ€” ์™ผ์ชฝ์˜ ํŒŒ๋ž€์ƒ‰ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฆ…๋‹ˆ๋‹ค.
  1. ํŒŒ๋ž€์ƒ‰ ์ƒˆ ์‚ฌ์ดํŠธ ๋งŒ๋“ค๊ธฐ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฆ…๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  droppages.com ์ด๋ผ๋Š” ๋‹จ์–ด๋ฅผ ํฌํ•จํ•˜๋Š” ์ด๋ฆ„์„ ์ง€์ •ํ•˜์„ธ์š”. ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ๋ฌด๋ฃŒ DropPages ๊ณ„์ • ํ•œ๋„ ๋‚ด์—์„œ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

    yourname.droppages.com

    ๐Ÿค– ๐Ÿ’ช ProTip! ๋งž์ถค ๋„๋ฉ”์ธ๊ณผ ๋” ๋งŽ์€ ์ €์žฅ ์šฉ๋Ÿ‰์„ ์›ํ•˜๋ฉด ์œ ๋ฃŒ ๊ตฌ๋… ์— ๊ฐ€์ž…ํ•˜๋ฉด๋ฉ๋‹ˆ๋‹ค. ์ด ํŠœํ† ๋ฆฌ์–ผ์€ ๋‚˜์ฒ˜๋Ÿผ 100 \% ๋ฌด๋ฃŒ๋กœ ์‚ฌ์šฉ ํ•ด๋ณด๊ณ  ์‹ถ๋‹ค๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๋‹ค. ๐Ÿ˜†

  2. DropPages๊ฐ€ ์šฐ๋ฆฌ๋ฅผ ์œ„ํ•ด ๋งŒ๋“  ๊ฒƒ์„ ์‚ดํŽด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์„ธ ๊ฐœ์˜ ํด๋”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
์ฝ˜ํ…์ธ  ๋ฐ ๊ณต๊ฐœ๋Š” ์šฐ๋ฆฌ๊ฐ€ ๋‹ค๋ฃจ๋Š” ํด๋”์ž…๋‹ˆ๋‹ค. ์ด ํŠœํ† ๋ฆฌ์–ผ์—์„œ
  1. ์ฝ˜ํ…์ธ  ๋ฐ ๊ณต๊ฐœ ๋ฐ DropPages๊ฐ€ ์„ค์น˜ ํ•œ ํ•ญ๋ชฉ (index.txt ๋ฐ main.css)์„ ์‚ญ์ œํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ๋“ค์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ๊ฑฑ์ •ํ•˜์ง€ ๋งˆ์„ธ์š”. ์ด๋Ÿฌํ•œ ํŒŒ์ผ์„ ๋ฉ‹์ง„ Sketch2React HTML ํŒŒ์ผ๋กœ ๋Œ€์ฒด ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์™„์ „ํžˆ ๋ฌด์‹œํ•  ์ˆ˜์žˆ๋Š” ํ…œํ”Œ๋ฆฟ์ž…๋‹ˆ๋‹ค.

2 ๋‹จ๊ณ„ โ€” Sketch๋กœ ์ด๋™ํ•ด ๋ด…์‹œ๋‹ค! ๐Ÿ’Ž

์ž˜ ์ค€๋น„ํ–ˆ์Šต๋‹ˆ๋‹ค ๊ฐ„๋‹จํ•œ ๋งˆํฌ ์—… ์„ ์‚ฌ์šฉํ•˜๋Š” Sketch์˜ ๋ฐ๋ชจ ์›น ์‚ฌ์ดํŠธ. ๋ฐ๋ชจ ์ผ ๋ฟ์ธ๋ฐ ์™œ ๋‘ ํŽ˜์ด์ง€ ์ด์ƒ์„ ์ž‘์„ฑํ•ด์•ผํ•ฉ๋‹ˆ๊นŒ? ์˜ˆ .

์ €๋Š” ๋ฌด๋ฃŒ Sketch2React ๊ตฌ์„ฑ ์š”์†Œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์‚ฌ์šฉ์ž ์ง€์ • ๋ณ€๊ฒฝ์„ ์ˆ˜ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค (๋ฌผ๋ก  ์ €๋Š” ๋””์ž์ด๋„ˆ์ž…๋‹ˆ๋‹ค. ํ•˜๋ฃจ ์ข…์ผํ• ๊นŒ์š”? ๐Ÿ˜†)

๋ถ€ํŠธ ์ŠคํŠธ๋žฉ ํด๋ž˜์Šค btn-block์„ ์ถ”๊ฐ€ํ•˜๋ฉด๋ฉ๋‹ˆ๋‹ค. ์ฝ”๋“œ ์•ฑ์—์„œ ๋ฒ„ํŠผ์ด ์ „์ฒด ๋„ˆ๋น„๊ฐ€๋ฉ๋‹ˆ๋‹ค โ€” yummi!

์ œ๊ฐ€ ํ•œ ๋ช‡ ๊ฐ€์ง€ ๊น”๋”ํ•œ ์ž‘์—…์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • Restyled ๋ฉ‹์ง„ ํŒŒ๋ž€์ƒ‰ ๋ฐฐ๊ฒฝ์˜ ์นด๋“œ ๊ตฌ์„ฑ ์š”์†Œ ์ค‘ ํ•˜๋‚˜
  • btn-block
  • ๋‚ด๊ฐ€ ๊ฐ€์žฅ ์ข‹์•„ํ•˜๋Š” ์ข‹์€ ์ œํ’ˆ ์ œ๊ณต ์—…์ฒด ์ค‘ ํ•˜๋‚˜ ์ธ Icons8 ์˜ ๋†€๋ผ์šด ๋ฌด๋ฃŒ ์ผ๋Ÿฌ์ŠคํŠธ๋ ˆ์ด์…˜์„ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค.

๋ญ?! ์ด ์Šคํƒ€์ผ์ด ์ „ํ˜€ ๋งˆ์Œ์— ๋“ค์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ €๋Š” ๋””์ž์ด๋„ˆ์ž…๋‹ˆ๋‹ค ๐Ÿ˜†
  • ํŠน์ • ๋ถ€ํŠธ ์ŠคํŠธ๋žฉ ํด๋ž˜์Šค๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ์œ„์˜ ๐Ÿ‘†์—์„œ ๋ณผ ์ˆ˜ ์žˆ๋“ฏ์ด Sketch2React์—์„œ ๋ฎ์–ด ์“ฐ์ง€ ์•Š๋Š” ์ผ๋ถ€ ๊ธฐ๋ณธ ๋™์ž‘์„ ์ž๋™์œผ๋กœ ์ƒ์†ํ•˜๋Š” ๊ตฌ์„ฑ ์š”์†Œ์˜ ๋ชจ์–‘์„ ์กฐ์ž‘ํ•ฉ๋‹ˆ๋‹ค. ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๋งž์ถค CSS ๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.
์ด ์ฝ”๋“œ๋ฅผ ์ง์ ‘ ์ž‘์„ฑ ํ–ˆ์Šต๋‹ˆ๊นŒ? ์•„๋‹ˆ, ๋‚ด๊ฐ€ ๋ดค์–ด. ๐Ÿ˜†

๋‚ด ์•„๋ฆ„๋‹ค์šด ๋ฒ„ํŠผ์˜ ๋ชป์ƒ๊ธด ๋ฐ‘์ค„์„ ์ œ๊ฑฐํ•˜์—ฌ ๋‚ด๊ฐ€ ์ฐพ๋˜ ๊ฒƒ์„ ๋‹ฌ์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค! ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป ์‚ฌ์šฉ์ž ์ •์˜ CSS๋ฅผ ์‚ฌ์šฉํ•œ ๊ฒฐ๊ณผ ๐Ÿ‘‡

Aaaa ์—ฌ๊ธฐ์— ๋ชป์ƒ๊ธด ๋ฐ‘์ค„์ด ์—†์Šต๋‹ˆ๋‹ค!

์ฝ”๋“œ๊ฐ€ ์ •๋ง ๋ฌด์„ญ๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค๋ฉด ๊ฑฑ์ •ํ•  ํ•„์š” ์—†์Šต๋‹ˆ๋‹ค. Sketch2React๋Š” ์ œ๊ฐ€ ์ถ”๊ฐ€ ํ•œ ์ด๋Ÿฌํ•œ ๋ชจ๋“  ์ถ”๊ฐ€ ํ•ญ๋ชฉ ์ธ ๋งž์ถค CSS ์—†์ด๋„ ์™„๋ฒฝํ•˜๊ฒŒ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ์–ตํ•˜์„ธ์š”, ์ €๋Š” 2018 ๋…„ ์ดˆ์— ์ฒซ ๋ฒˆ์งธ ๊ณต๊ฐœ ์•ŒํŒŒ๋ฅผ ์ถœ์‹œํ•˜๊ธฐ ์ „๋ถ€ํ„ฐ ์ด๊ฒƒ์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ˜บ ๐Ÿ’ช

๊ทœ์น™์ด ๊นจ์ ธ์•ผํ•ฉ๋‹ˆ๋‹ค (๋•Œ๋กœ๋Š”)

์ดํ•ดํ•ด์•ผ ํ•  ํ”์ ๊ณผ ์˜ค๋ฅ˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๋งค์šฐ ์ค‘์š”ํ•œ DropPages ๊ทœ์น™ ํ•˜๋‚˜๊ฐ€ Sketch2React์˜ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ์—ฐ๊ฒฐ ๊ทœ์น™ ์ค‘ ํ•˜๋‚˜์— ์™„์ „ํžˆ ์–ด๊ธ‹๋‚ฉ๋‹ˆ๋‹ค. ๐Ÿ˜†

์ผ๋ฐ˜์ ์œผ๋กœ Sketch2React ์šฉ์œผ๋กœ ๋””์ž์ธ ํ•  ๋•Œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์—ฐ๊ฒฐํ•ฉ๋‹ˆ๋‹ค.

์ผ๋ฐ˜ Sketch2React ์—ฐ๊ฒฐ ๋™์ž‘
  1. ์—ฐ๊ฒฐ ๊ฐ€๋Šฅํ•œ ์†์„ฑ์ด์žˆ๋Š” ๊ตฌ์„ฑ ์š”์†Œ ํ•˜๋‚˜๋ฅผ ์„ ํƒํ•˜์„ธ์š”.
  2. W Sketch ๋‚ด๋ถ€์˜ ๋ฐ”๋กœ ๊ฐ€๊ธฐ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ•ด๋‹น ๊ตฌ์„ฑ ์š”์†Œ์™€ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋ฅผ ์—ฐ๊ฒฐํ•ฉ๋‹ˆ๋‹ค.
  3. ์•„๋ž˜์™€ ๊ฐ™์ด ํ•ด๋‹น ๊ตฌ์„ฑ ์š”์†Œ ๋‚ด๋ถ€์˜ {attribute.url} ํŒจ๋„์— ./artboardname.html์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

./artboardname.html

  1. ๋˜ํ•œ ๋ชจ๋“  ๋งํฌ ์‹œ์ž‘์œผ๋กœ ๋Œ์•„ ๊ฐ€๊ธฐ ์ด๋ฆ„์€ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ง€์ •ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

./index.html

์•Œ๊ฒ ์Šต๋‹ˆ๋‹ค. ๐Ÿค– ๐Ÿ’ช ์ด๋ ‡๊ฒŒํ•˜๋ฉด ๋ฉ‹์ง„ ์ฝ”๋“œ ๋‚ด๋ณด๋‚ด๊ธฐ์—์„œ ๋ชจ๋“  ๊ฒƒ์ด ๊น”๋”ํ•˜๊ณ  ๋ฉ‹์ง‘๋‹ˆ๋‹ค. ๋˜ํ•œ ๋‚ด ๋ณด๋‚ธ ํด๋” (HTML) ์ „์ฒด๋ฅผ FTP ์„œ๋ฒ„๋กœ ๋Œ์–ด๋‹ค ๋†“์œผ๋ฉด ๋ชจ๋“  ๋งํฌ๊ฐ€ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

React ๋‚ด๋ณด๋‚ด๊ธฐ์˜ ๊ฒฝ์šฐ ๋‚ด ๋ณด๋‚ธ ํด๋”๋กœ ๋“ค์–ด๊ฐ€์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์•ฝ๊ฐ„ ๋‹ค๋ฆ…๋‹ˆ๋‹ค. ๋งํฌ๊ฐ€ ์ž‘๋™ํ•˜๋„๋ก ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ–ˆ์ง€๋งŒ์ด ํŠœํ† ๋ฆฌ์–ผ์—๋Š” ํ•ด๋‹น๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋‹น์—ฐํžˆ ์šฐ๋ฆฌ๋Š” ํ•˜๋‚˜ ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ‘จโ€๐Ÿ’ป

Btw React๋Š” DropPages์—์„œ๋„ ์ง€์›๋˜์ง€ ์•Š์œผ๋ฏ€๋กœ ๊ทธ๋ƒฅโ€ฆ

์–ด๋–ป๊ฒŒ ๋˜๋‚˜์š”?

๋ฌธ์ œ๋Š”์ด ๊ทœ์น™์„ ๋”ฐ๋ฅด๋Š” ๋™์‹œ์— DropPages๋ฅผ ํ†ตํ•ด Dropbox์— ํŽ˜์ด์ง€๋ฅผ ๊ฒŒ์‹œํ•˜๊ธฐ์œ„ํ•œ ์ข‹์€ ์›Œํฌ ํ”Œ๋กœ๋ฅผ ์›ํ•  ๊ฒฝ์šฐ์ด ๊ทœ์น™์„ ์œ„๋ฐ˜ํ•ด์•ผํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋•Œ๋•Œ๋กœ ๊ทœ์น™์ด ๊นจ์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค ๐Ÿ˜ฌ ๐Ÿ‘

๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด DropPages์— ์›น ์‚ฌ์ดํŠธ (๋˜๋Š” ํ”„๋กœํ†  ํƒ€์ž…)๋ฅผ ๊ฒŒ์‹œ ํ•œ ํ›„ ๋‹ค๋ฅธ ํŽ˜์ด์ง€์— ๋งํฌ ๋œ ์š”์†Œ๋ฅผ ํด๋ฆญํ•˜๋ฉด์ด ์˜ค๋ฅ˜ ๋ฉ”์‹œ์ง€๊ฐ€ ๋ฒฝ๋Œ์ฒ˜๋Ÿผ ๋ถ€๋”ช ํž ๊ฒƒ์ž…๋‹ˆ๋‹ค. :

URL์ด ์ •ํ™•ํ•ฉ๋‹ˆ๊นŒ? ์ฝ˜ํ…์ธ  ํŽ˜์ด์ง€์—๋Š” ํ™•์žฅ์ž๊ฐ€ ์—†์–ด์•ผํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์šฐ๋ฆฌ๋Š” ์ด๊ฒƒ์„ ์›ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ผ์–ด๋‚˜์ง€ ์•Š๊ฒ ์Šต๋‹ˆ๊นŒ? ์ด๊ฒƒ์ด ์ œ๊ฐ€ ๋ฐœ๊ฒฌ ํ•œ ํ•ด๊ฒฐ์ฑ…์ด ๋งค๋ ฅ์ฒ˜๋Ÿผ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

์ˆ˜์ • ๐Ÿค– ๐Ÿ’ช

์ผ๋ฐ˜์ ์ธ .html ํ™•์žฅ์ž ๋งŒ ์ œ๊ฑฐํ•˜๋ฉด ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋ชจ๋“  ๋งํฌ์—์„œ ์‹œ์ž‘์œผ๋กœ ๋Œ์•„๊ฐ€๋Š” ๊ฒƒ์€ ์•„๋‹™๋‹ˆ๋‹ค! โš ๏ธ

Sketch2React ๋งํฌ์— ๋Œ€ํ•œ DropPages ํŠน์ • ๊ทœ์น™

  1. ์—ฐ๊ฒฐ ๊ฐ€๋Šฅํ•œ ์†์„ฑ์ด์žˆ๋Š” ํ•˜๋‚˜์˜ ๊ตฌ์„ฑ ์š”์†Œ ์„ ํƒ
  2. Sketch ๋‚ด์—์„œ W ๋ฐ”๋กœ ๊ฐ€๊ธฐ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ•ด๋‹น ๊ตฌ์„ฑ ์š”์†Œ์™€ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋ฅผ ์—ฐ๊ฒฐํ•ฉ๋‹ˆ๋‹ค.
  3. ./ artboardname ์ถ”๊ฐ€ {์†์„ฑ.url} ํŒจ๋„ (์•„๋ž˜ ์ฐธ์กฐ) :

./artboardname

  1. ๋˜ํ•œ ์‹œ์ž‘์œผ๋กœ ๋Œ์•„๊ฐ€๋Š” ๋ชจ๋“  ๋งํฌ ๋Š” ์ด๋ฆ„์„ ์ง€์ •ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

./index.html

๋งˆ์ง€๋ง‰ ๊ทœ์น™์— ํŠนํžˆ์ฃผ์˜ํ•˜์„ธ์š”. nr 4 .

๊ทธ๋Ÿฐ ๋‹ค์Œ ์ผ๋ฐ˜ ๋‚ด๋ณด๋‚ด๊ธฐ์™€ DropPages ํŠน์ • ๋‚ด๋ณด๋‚ด๊ธฐ์— ๋ชจ๋‘ ์ž‘๋™ํ•˜๋Š” ์›Œํฌ ํ”Œ๋กœ๋ฅผ ์–ด๋–ป๊ฒŒ ์„ค์ •ํ•ฉ๋‹ˆ๊นŒ? ์‹ค์ œ๋กœ ์•ฝ๊ฐ„์˜ ์กฐ์ •์ด ํ•„์š”ํ•œ ๋งํฌ ์ผ ๋ฟ์ด๋ฏ€๋กœ ๋จผ์ € ์ผ๋ฐ˜์ ์ธ ์›Œํฌ ํ”Œ๋กœ๋กœ ๋””์ž์ธํ•˜๊ณ  ๋นŒ๋“œ ํ•œ ๋‹ค์Œ ๋™์ผํ•œ Sketch ํŒŒ์ผ์„ ๋ณต์ œํ•˜๊ณ  myfilename-droppages ์™€ ๊ฐ™์€ ์ด๋ฆ„์œผ๋กœ ํ˜ธ์ถœํ•˜๊ณ  ๋‚ด ์ธ์ƒ.

์šฐ๋ฆฌ๋Š” ๋””์ž์ด๋„ˆ์ด๊ธฐ ๋•Œ๋ฌธ์— ์œก์ฒด ๋…ธ๋™์€ ์šฐ๋ฆฌ๋ฅผ ๊ฒ์ฃผ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๐Ÿ˜† ๐Ÿ‘

๋งˆ์นจ๋‚ด ์šฐ๋ฆฌ๋Š” godamnit์„ ๋‚ด๋ณด๋‚ผ ์ค€๋น„๊ฐ€๋˜์—ˆ์Šต๋‹ˆ๋‹ค!

์ข‹์•„, ์ง€๊ธˆ๊นŒ์ง€ ์ž ๋“ค์ง€ ์•Š์•˜๊ฑฐ๋‚˜ ์ •์‹ ์  ์žฅ์• ๊ฐ€ ์žˆ์—ˆ๋‹ค๋ฉด ๊ฐ€์žฅ ์นœํ•œ ์นœ๊ตฌ์—๊ฒŒ ๊ฒฝ์˜๋ฅผ ํ‘œํ•ฉ๋‹ˆ๋‹ค! ์ด์ œ์ด ํŠœํ† ๋ฆฌ์–ผ์˜ ์žฌ๋ฏธ์žˆ๋Š” ๋ถ€๋ถ„์œผ๋กœ, ์‹ค์ œ๋กœ Sketch2React์—์„œ HTML๋กœ ๋‚ด๋ณด๋‚ด๊ณ ์ด๋ฅผ Dropbox์— ๊ฒŒ์‹œํ•ฉ๋‹ˆ๋‹ค!

Sketch2React์—์„œ HTML๋กœ ๋‚ด๋ณด๋‚ด๊ธฐ

  1. ๋””์ž์ธ ํ•œ ๊ฐ ํŽ˜์ด์ง€๋ฅผ ํ•œ ๋ฒˆ โ€” ์ด๋Ÿฌํ•œ ๋ฐฉ์‹์œผ๋กœ ๋‚ด๋ณด๋‚ด๊ธฐ ๋ฒˆ๋“ค์— ์ถ”๊ฐ€๋ฉ๋‹ˆ๋‹ค.
  2. ๋‹ค์šด๋กœ๋“œ ๐Ÿ‘‰ HTML ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๊ณ  ๋””์Šคํฌ์— ์ €์žฅ
  3. zip ์••์ถ• ํ•ด์ œ
  4. Voila ์™„๋ฃŒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค! ์ด์ œ ์ด๊ฒƒ์„ Dropbox์— ์—…๋กœ๋“œํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค!

Dropbox.com์— ์—…๋กœ๋“œ

๋‚ด๊ฐ€ ๋ฐœ๊ฒฌ ํ•œ ๊ฐ€์žฅ ํšจ๊ณผ์ ์ธ ์—…๋กœ๋“œ ๋ฐฉ๋ฒ•์€ ์‹ค์ œ๋กœ์ด ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ง์ ‘ . ๋™๊ธฐํ™”๋Š” ๋” ๋น ๋ฆ…๋‹ˆ๋‹ค. ํŠนํžˆ ๋™์ผํ•œ ํŒŒ์ผ์„ ๋ฐ˜๋ณตํ•ด์„œ ๋‹ค์‹œ ์—…๋กœ๋“œํ•˜๊ธฐ ์‹œ์ž‘ํ•  ๋•Œ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ์‹ค์‹œ๊ฐ„์œผ๋กœ ํ™•์ธํ•˜๋ฉด ํ•ญ์ƒ ์—…๋ฐ์ดํŠธ / ์ˆ˜์ •ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๊ทธ๋ ‡๊ฒŒ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ๊ทธ๋ ‡๊ฒŒํ•˜๊ธฐ ์ „์— ์ด๋ฏธ์ง€ ์ž์‚ฐ์„ ์••์ถ•ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค , ์ €๋Š” ์šฐ์ˆ˜ํ•œ TinyPNG ์„œ๋น„์Šค๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฆ„๊ณผ ๋‹ฌ๋ฆฌ JPGS๋„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

์ด ํŒŒ์ผ์„ Content์— ๋“œ๋กญ

๋ชจ๋“  HTML ํŽ˜์ด์ง€๋Š” ์ƒˆ๋กœ ์ƒ์„ฑ ๋œ ์›น ์‚ฌ์ดํŠธ์˜ Content ํด๋”๋กœ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค. ๋‚ด ๋ชจ์Šต์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋‚ด ๋ณด๋‚ธ Sketch2React HTML ํŒŒ์ผ์„ Content ํด๋”์— ๋†“์Šต๋‹ˆ๋‹ค.

์ด ํŒŒ์ผ์„ ๊ณต๊ฐœ๋กœ ๋“œ๋กญ

๊ณต๊ฐœ๋Š” ๋ชจ๋“  CSS, ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ ๋ฐ ์ด๋ฏธ์ง€ ์• ์…‹์„ ๋ณด์œ ํ•ฉ๋‹ˆ๋‹ค. ๋‚ด ๋ชจ์Šต์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋‚ด ๋ณด๋‚ธ Sketch2React CSS, JS ๋ฐ ์ด๋ฏธ์ง€ ํด๋”๋ฅผ ์—ฌ๊ธฐ์— ๋†“์Šต๋‹ˆ๋‹ค.

์ด์ œ DropPages ๊ณ„์ •์œผ๋กœ ๋Œ์•„๊ฐ€์„œ ์ง€๊ธˆ ๊ฒŒ์‹œ ์™„๋ฃŒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค! ๋ชจ๋“  ๊ฒƒ์ด ๋™๊ธฐํ™”๋˜๊ณ  ์—…๋กœ๋“œ๋˜๋Š” ๋ฐ ๋ช‡ ๋ถ„ ์ •๋„ ๊ฑธ๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ž ์‹œ๋งŒ ๊ธฐ๋‹ค๋ ค์ฃผ์„ธ์š”.

๋™๊ธฐํ™” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ๋นจ๊ฐ„์ƒ‰ ๋™๊ธฐํ™” ์žฌ์„ค์ • ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ ๋‹ค์‹œ ๊ฒŒ์‹œํ•˜๋ฉด ๊ฒฐ๊ตญ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

๋‚ด ์—…๋กœ๋“œ btw์ž…๋‹ˆ๋‹ค ๐Ÿ‘‡

http://articledemo.droppages.com/index.html

๐Ÿ˜บ ๐Ÿ‘ ์—ฌ๋Ÿฌ๋ถ„,์ด ํŠœํ† ๋ฆฌ์–ผ์ด ์ฆ๊ฑฐ์› ๊ธฐ๋ฅผ ๋ฐ”๋ผ๋ฉฐ ๋””์ž์ธ์—์„œ ์ฝ”๋”ฉ๊นŒ์ง€์˜ ์›Œํฌ ํ”Œ๋กœ์— ์œ ์šฉํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•˜์„ธ์š”.