Search
๐ŸŽจ

Design Engineer - Web

flex Design Engineer

ํ”Œ๋ ‰์Šค๋Š” ๊ธฐ์—…์˜ ์‚ฌ๋žŒ๊ณผ ์กฐ์ง ๋ฌธ์ œ๋ฅผ ํ•จ๊ป˜ ํ•ด๊ฒฐํ•ฉ๋‹ˆ๋‹ค
ํ”Œ๋ ‰์ŠคํŒ€์˜ Design Engineer๋Š” Engineering Chapter, Design Platform Team์— ์†Œ์†๋˜์–ด ์‚ฌ๋žŒ๊ณผ ์กฐ์ง์˜ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ์ œํ’ˆ์„ ์œ„ํ•œ ๋””์ž์ธ ์‹œ์Šคํ…œ์„ ๊ฐœ๋ฐœํ•˜๊ณ  ์šด์˜ํ•ฉ๋‹ˆ๋‹ค. ๋””์ž์ธ ์‹œ์Šคํ…œ์„ ํ†ตํ•ด ์ œํ’ˆ ๊ฒฝํ—˜์˜ ๊ธฐ์ค€์„ ๋งŒ๋“ค๊ณ , ์ด๋ฅผ ํ†ตํ•ด ์ข‹์€ ๊ฒฝํ—˜๊ณผ ๋น ๋ฅธ ์ดํ„ฐ๋ ˆ์ด์…˜์„ ๋•์Šต๋‹ˆ๋‹ค.
์„ธ์ƒ์—๋Š” ์ˆ˜๋งŽ์€ ์กฐ์ง์ด ์กด์žฌํ•˜๋ฉฐ, ์ง€๊ธˆ๋„ ๋งค์ดˆ ์ƒˆ ์กฐ์ง์ด ํƒ„์ƒํ•ฉ๋‹ˆ๋‹ค. ์กฐ์ง์€ ๊ทธ ์ˆ˜๋งŒํผ์ด๋‚˜ ์ธ์‚ฌ ๋ฐ ๊ทผํƒœ ๊ด€๋ฆฌ, ๊ณ„์•ฝ ๋ฐ ๊ธ‰์—ฌ, ํ‰๊ฐ€์™€ ๋ณด์ƒ๊นŒ์ง€ ์ „๋ฐฉ์œ„์— ๊ฑธ์ณ ๋‹ค์–‘ํ•œ ๋ฌธํ™”์™€ ์ •์ฑ…์„ ๊ฐ€์ง‘๋‹ˆ๋‹ค. ์–ด๋Š ์กฐ์ง์—๋‚˜ ํŽธ๋ฆฌํ•˜๊ฒŒ ๋Š๊ปด์ง€๋ฉด์„œ๋„ ์•„์ง ๋ฐœ๊ฒฌ๋˜์ง€ ์•Š์€ ์šฉ๋ก€๊นŒ์ง€ ํ’ˆ์„ ์ˆ˜ ์žˆ๋Š” ์ œํ’ˆ์„ ๋งŒ๋“œ๋Š” ์ผ์€ ๋„์ „์ ์ด์ง€๋งŒ ๋‹ฌ์„ฑํ• ๋งŒํ•œ ๊ฐ€์น˜๊ฐ€ ์ถฉ๋ถ„ํ•œ ๊ณผ์ œ์ž…๋‹ˆ๋‹ค.
ํ”Œ๋ ‰์ŠคํŒ€์— ํ•ฉ๋ฅ˜ํ•ด, ๋†’์€ ์—”์ง€๋‹ˆ์–ด๋ง ํ’ˆ์งˆ ๊ธฐ์ค€์„ ๊ณ ์ˆ˜ํ•˜๋ฉฐ, ์•ˆ์ •์„ฑ๊ณผ ๋ณด์•ˆ์„ฑ์˜ ํƒ€ํ˜‘ ์—†์ด ์ œํ’ˆ์„ ๋น ๋ฅด๊ณ  ์ง€์†์ ์œผ๋กœ ์ „๋‹ฌํ•˜๋ฉฐ, ๊ทธ ๊ณผ์ •์—์„œ ์œ ์—ฐํ•˜๊ฒŒ ๋ณ€ํ™”๋ฅผ ์ˆ˜์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋””์ž์ธ ์‹œ์Šคํ…œ์„ ๋งŒ๋“œ๋Š” ์—ฌ์ •์— ํ•จ๊ป˜ํ•˜์„ธ์š”.

์ด๋Ÿฐ ์ผ์„ ํ•จ๊ป˜ ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

โ€ข
Platform DesignํŒ€์˜ Design Engineer๋กœ ์›น ์ œํ’ˆ์˜ ํ•ต์‹ฌ ์žฌ๋ฃŒ์ธ ๋””์ž์ธ ์‹œ์Šคํ…œ์„ ๋งŒ๋“ค๊ณ  ํŒ€์— ์ „ํŒŒํ•ฉ๋‹ˆ๋‹ค.
โ€ข
Component, UI Pattern, UX ๋ฌธ๋ฒ• ๋“ฑ์„ ์„ค๊ณ„ํ•˜๊ณ  ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์ถ”์ƒํ™”ํ•˜์—ฌ Product Designer, Product Engineer์—๊ฒŒ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ๋น ๋ฅธ ์†๋„๋ฅผ ์œ ์ง€ํ•˜๋ฉด์„œ ์ œํ’ˆ ์ผ๊ด€์„ฑ๊ณผ ์ตœ๊ณ  ์ˆ˜์ค€์˜ UX ๊ฒฝํ—˜์„ ๋งŒ๋“œ๋Š”๋ฐ ๋ชฐ๋‘ํ•ฉ๋‹ˆ๋‹ค.
โ€ข
๊ณผ์ •์—์„œ Engineer์™€ Designer ๊ฐ„์˜ ๊ธด๋ฐ€ํ•œ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์ด ์š”๊ตฌ๋ฉ๋‹ˆ๋‹ค.
โ€ข
Platform Design ํŒ€์€ ์ด๋Ÿฐ ๊ฒƒ์„ ์ข‹์•„ํ•˜๊ณ  ์ด์— ๊ฒฌ์ค„๋งŒํ•œ Design System, ์›น ์ œํ’ˆ์„ ๋งŒ๋“ค๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋ถ„๊ณผ ํ•จ๊ป˜ ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

โ€ข
๋””์ž์ธ ์‹œ์Šคํ…œ์— ๋Œ€ํ•œ ์ดํ•ด๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ํ™•์žฅ์„ฑ ์žˆ๋Š” ์ปดํฌ๋„ŒํŠธ ์„ค๊ณ„ ์—ญ๋Ÿ‰์„ ๊ฐ–์ถ”์‹  ๋ถ„
โ€ข
์šฐ์•„ํ•œ Web UX๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ HTML, CSS, React ๋“ฑ ์ตœ์‹  ๊ธฐ์ˆ  ๋™ํ–ฅ์— ๋Œ€ํ•œ ๊นŠ์€ ์ดํ•ด๋ฅผ ๊ฐ–์ถ”์‹  ๋ถ„
โ€ข
Typography, Color, Layout ๋“ฑ ์กฐํ˜• ์š”์†Œ์˜ ์ค‘์š”์„ฑ์— ๋Œ€ํ•ด ์ดํ•ดํ•˜๊ณ  Engineering์œผ๋กœ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์œผ์‹  ๋ถ„
โ€ข
Slickํ•œ ๊ฒฝํ—˜์„ ์œ„ํ•œ Animation, Transition ๊ตฌํ˜„ ๊ฒฝํ—˜์ด ์žˆ์œผ์‹  ๋ถ„
โ€ข
1px, ์˜๋„ํ•œ ์ •๋ ฌ์ด ํ‹€์–ด์ง์„ ๋ถˆํŽธํ•ดํ•˜๋Š” ๋ถ„
โ€ข
UX๋ฟ ์•„๋‹ˆ๋ผ Maker์˜ ์ƒ์‚ฐ์„ฑ์„ ์˜ฌ๋ฆฌ๊ธฐ ์œ„ํ•œ ์ผ์— ํฅ๋ฏธ๋ฅผ ๋Š๋ผ๋Š” ๋ถ„
โ—ฆ
Developer Experience๋ฅผ ๊ณ ๋ คํ•œ ์„ค๊ณ„
โ—ฆ
Figma Plugin ์ œ์ž‘ ๋“ฑ

ํ•ฉ๋ฅ˜ ์‹œ์˜ ์—…๋ฌด๋ฅผ ์ƒ์ƒํ•  ์ˆ˜ ์žˆ๋Š”, ์ตœ๊ทผ ํŒ€์—์„œ ์ž‘์—…์„ ์ง„ํ–‰ํ•˜๋ฉฐ ํ–ˆ๋˜ ๊ณ ๋ฏผ์˜ ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค.

โ€ข
์—”์ง€๋‹ˆ์–ด ๋””์ž์ด๋„ˆ ๊ฐ„์˜ ๋ถˆํ•„์š”ํ•œ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ ๋น„์šฉ์„ ์ค„์ด๊ธฐ ์œ„ํ•ด Figma ์™€ React Component์˜ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์–ด๋–ค ํ˜•ํƒœ๋กœ ๋งž์ถฐ์„œ ์ „๋‹ฌํ•ด์•ผ ํ• ๊นŒ?
โ€ข
๊ธฐ๋Šฅ๊ณผ ํ‘œํ˜„ ๋ฐฉ์‹์ด ๊ฒฐํ•ฉ ๋˜์ง€ ์•Š์œผ๋ฉด์„œ ๊ธฐ๋Šฅ์€ ์ถฉ๋ถ„ํžˆ ์ œ๊ณตํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค๋ ค๋ฉด ์–ด๋–ค ๊ฐœ๋ฐœ์ด ํ•„์š”ํ• ๊นŒ?
โ€ข
์ปดํฌ๋„ŒํŠธ๋ฅผ ์„ค๊ณ„ํ•  ๋•Œ ์—”์ง€๋‹ˆ์–ด๋Š” ์ง๊ด€์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๋ฉด์„œ๋„ ๋””์ž์ด๋„ˆ์˜ ์˜๋„๋Š” ์ถฉ๋ถ„ํžˆ ๋ฐ˜์˜ํ•˜๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ• ๊นŒ?
โ€ข
๋ณ€๊ฒฝ์„ ํ—ˆ์šฉํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ๊ณผ ์•„๋‹Œ ๊ฒƒ์„ ๊ธฐ์ค€์„ ์–ด๋–ป๊ฒŒ ์„ค์ •ํ•ด์•ผ ํ• ๊นŒ?

Platform Design ํŒ€์ด ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” ๊ธฐ์ˆ  ์Šคํƒ

โ€ข
๋””์ž์ธ ํˆด : Figma
โ€ข
์ฝ”์–ด: TypeScript, React
โ€ข
๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
โ—ฆ
์ƒํƒœ๊ด€๋ฆฌ: React Context, react-query
โ—ฆ
๋””์ž์ธ ์‹œ์Šคํ…œ: Stitches, Radix Primitives, Storybook
โ—ฆ
์• ๋‹ˆ๋ฉ”์ด์…˜: Framer-motion, CSS Animation
โ€ข
๋นŒ๋“œ ๋ฐ ํ…Œ์ŠคํŠธ : Babel, Webpack, Rollup, Jest, Testing Library
โ€ข
CI/CD : GitHub Actions, Jenkins, Yarn workspace

ํ”Œ๋ ‰์ŠคํŒ€์— ์ง€์›ํ•˜๋ ค๋ฉด?

โ€ข
๊ฒฝ๋ ฅ ์ค‘์‹ฌ์˜ ์ด๋ ฅ์„œ๋ฅผ ๋งํฌ์— ์ œ์ถœํ•ด์ฃผ์„ธ์š”.
โ€ข
์ด๋ ฅ์„œ๊ฐ€ ์—†๋‹ค๋ฉด LinkedIn ์ฃผ์†Œ ๋“ฑ์˜ ๊ฐœ์ธ ํ”„๋กœํ•„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋Š” URL์„ ๋ณด๋‚ด์ฃผ์…”๋„ ์ข‹์Šต๋‹ˆ๋‹ค.
โ€ข
ํ”Œ๋ ‰์ŠคํŒ€์€ ๋ณ‘์—ญ์ง€์ •์—…์ฒด๋กœ ์‚ฐ์—…๊ธฐ๋Šฅ์š”์› ์ „์ง ๋ฐ ๋ณด์ถฉ์—ญ ์‹ ๊ทœ ํŽธ์ž…์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.