🎨 2020 졜고의 툴둜 λ½‘νžŒ Figma 이 | 컀리어리

🎨 2020 졜고의 툴둜 λ½‘νžŒ Figma 이야기 🎈 ν•œ 쀄 μš”μ•½ - FigmaλŠ” μƒκ°λ§ŒνΌ 쉽고, 생각 μ΄μƒμœΌλ‘œ μ–΄λ ΅λ‹€. βœ”οΈ FigmaλŠ” μ œκ°€ 처음으둜 μ“΄ 'λ””μžμΈ ν˜‘μ—…νˆ΄'μž…λ‹ˆλ‹€. μ§€κΈˆ νšŒμ‚¬μ— μž…μ‚¬ν•˜λ©° 처음으둜 μ‚¬μš©ν•œ ν”„λ‘œλ•νŠΈμ£ . 사싀, 곡동 μ°½μ—…ν–ˆμ„ λ•Œ, μ™€λ””μ¦ˆ μŠ€ν† λ¦¬ λ””μžμΈμ„ κΈ°νšν•˜λ©° λ„μž…ν•΄λ³ΌκΉŒ ν–ˆμ—ˆμ–΄μš”. βœ”οΈ ν•˜μ§€λ§Œ κ·Έλ•ŒλŠ” 'μ–Έμ–΄μ˜ μž₯λ²½'이 λ„ˆλ¬΄λ‚˜ μ»€μ„œ ν¬κΈ°ν–ˆλ”λž¬μ£ . κ·Έλ•Œ 포기 μ•ˆ ν–ˆμœΌλ©΄ μ§€κΈˆ 더 μœ μš©ν•˜κ³  'μžμ•Œ' μ‚¬μš©ν–ˆμ„ ν…λ°λΌλŠ” 아쉬움이 남기도 ν•΄μš”. ν¬κΈ°ν•˜κ³  ν–ˆλ˜ 생각은 'ν•œκ΅­μ–΄ 버전 λ‚˜μ˜€λ©΄ μ‚¬μš©ν•΄μ•Όμ§€.' βœ”οΈ ν—ˆλ‚˜ ν˜„μž¬, ν•œκ΅­μ–΄νŒμ€ λ‚˜μ˜€μ§€ μ•Šμ•˜μ§€λ§Œ μ—΄μ‹¬νžˆ μ‚¬μš©ν•˜κ³  μžˆμ–΄μš”. 우리 λ””μžμ΄λ„ˆλ‹˜μ˜ μΉœμ ˆν•œ μ„€λͺ…을 톡해 배우고, 유튜브λ₯Ό 톡해 배우며, λ°”λ‘œλ°”λ‘œ μ‹€μ „μœΌλ‘œ μ΄ν–‰ν•˜κ³  있죠. 생각보닀 쉬웠고, 생각 μ΄μƒμœΌλ‘œ μ–΄λ €μ›Œμš”. βœ”οΈ λ­λž„κΉŒ λ‹¨μˆœν•œ κΈ°λŠ₯을 μ‚¬μš©ν•  λ•ŒλŠ” κ°„νŽΈν•˜κ³  νŽΈλ¦¬ν•΄μš”. PPT보닀 λΉ λ₯΄κ²Œ μž‘μ—…μ„ ν•  수 있고, 이미지 파일둜 λ‹€μš΄λ‘œλ“œν•˜κ±°λ‚˜ 내보낼 λ•Œλ„ νŽΈν•΄μš”. λ˜ν•œ, μž‘μ—… 쀑인 νŽ˜μ΄μ§€λ₯Ό 링크둜 μ „λ‹¬ν•˜μ—¬, ν˜‘μ—…λ„ λΉ λ₯΄κ²Œ 진행할 수 μžˆμ–΄μš”. βœ”οΈ μ œκ°€ ν”Όκ·Έλ§ˆλ₯Ό μ‚¬μš©ν•˜λŠ” 뢀뢄은 λ‹¨μˆœνžˆ 이 정도(?)μ—μš”. 뭐 가끔 썸넀일도 λ§Œλ“€κ³ , 포샡 λŒ€μ‹ ν•΄μ•Ό ν•˜λŠ” 이미지 μž‘μ—…λ„ ν•˜μ§€λ§Œ 정말 λ‹¨μˆœν•˜κ²Œ μ‚¬μš©ν•˜κ³  있죠. μ•„ 가끔은 ν”Όκ·Έλ§ˆ μžΌμ„ ν™œμš©ν•˜κΈ°λ„ ν•΄μš”. βœ”οΈ λ‹€μ–‘ν•˜κ²Œ μ‚¬μš©ν•œλ‹€κ³  ν•˜λŠ”λ° μ—¬μ „νžˆ μ €λŠ” FigmaλΌλŠ” κ·Έλ†ˆμ„ 잘 λͺ¨λ₯΄κ² μ–΄μš”. λ‹€λ₯Έ λΆ„λ“€ 보면 μ—„μ²­ νœ™νœ™! μ“±μ‹Ή! ν•˜λ©΄μ„œ ν™”λ €ν•˜κ²Œ μ‚¬μš©ν•˜λ˜λ°, λ””μžμΈμ  감각이 μ—†μ–΄μ„œ 그런 건지 μ €λŠ” λΆˆκ°€λŠ₯ν•˜λ„€μš”. (μŠ¬ν¬λ‹·πŸ€£) βœ”οΈ μ•„ν‹°ν΄μ—μ„œλ„ λͺ‡ 가지 μž₯점이 μžˆλŠ”λ°μš”. 저도 κ³΅κ°ν•˜λŠ” 츑면이 μžˆμ–΄μ„œ μš”μ•½ μ’€ ν•΄λ³Όκ²Œμš”. πŸ’• ν”Όκ·Έλ§ˆ μž₯점 λͺ‡ 가지 1. Pages βœ”οΈ pagesλ₯Ό ν™œμš©ν•˜λ©΄ λ‹€μ–‘ν•œ 주제의 화면듀을 ν•˜λ‚˜μ˜ 링크 μ•ˆμ— μ‚½μž…ν•  수 μžˆλ‹€. μš°λ¦¬λŠ” μŠ¬λž™μ— κ³΅μœ ν•  λ•Œ 링크λ₯Ό νŽ˜μ΄μ§€ μ΄λ¦„μœΌλ‘œ μ§€μ •ν•˜μ—¬ κ³§λ°”λ‘œ ν•΄λ‹Ή νŽ˜μ΄μ§€λ₯Ό 확인할 수 μžˆλ„λ‘ κ°€μ΄λ“œν•˜λŠ” 쀑이닀. βœ”οΈ 특히 ν”Œλ‘œμš°μ— λ”°λ₯Έ ν™”λ©΄ κΈ°νšμ„ 전달할 λ•Œ, pages의 μˆœμ„œλ₯Ό λ§žμΆ°λ†” λˆ„κ΅¬λ‚˜ 흐름을 μ‰½κ²Œ νŒŒμ•…ν•  수 μžˆλ‹€. λ˜ν•œ, κΆκΈˆν•œ μ‚¬ν•­μ΄λ‚˜ 아이디어가 있으면 ν•΄λ‹Ή νŽ˜μ΄μ§€μ—λ§Œ μ²΄ν¬ν•˜κ³  μ•ˆλ‚΄ν•˜λ©΄ 되기 λ•Œλ¬Έμ— λ”μš± νŽΈλ¦¬ν•˜λ‹€. βœ”οΈ μ•„μ£Ό μž¬λ―ΈμžˆλŠ” ν›„λ¬Έ ν•œ 가지, μ–΄λŠ ν•œ λŒ€ν‘œλ‹˜μ€ AWS λ•Œλ¬Έμ— μ™Έμ£Όλ₯Ό 맑겼으며, AWS μ‹œμŠ€ν…œμ„ λͺ¨λ₯΄λŠ” 상황, κ°‘μžκΈ° μ•žμ— μžˆλŠ” κ°œλ°œμžμ—κ²Œ μ΄λ ‡κ²Œ 짜증 λ‚Έλ‹€. "μ™œ AWSλŠ” Figma처럼 μ‹€μ‹œκ°„μœΌλ‘œ 업무 ν•˜λŠ” κ±° 확인이 μ•ˆ λ˜λŠ” κ±°μ˜ˆμš”?!" 2. μ‹€μ‹œκ°„ ν˜‘μ—… βœ”οΈ μš°λ¦¬λŠ” μž¬νƒ ν•  λ•Œ 각자의 μ§‘μ—μ„œ ν”Όκ·Έλ§ˆ νŽ˜μ΄μ§€λ₯Ό 보며 νšŒμ˜ν–ˆλŠ”λ°, ν•œ μ‚¬λžŒμ„ μ„ νƒν•˜μ—¬ μ˜΅μ €λΉ™μ„ ν•  수 μžˆμ–΄, μŠ€ν”Όμ»€μ˜ μ›€μ§μ΄λŠ” 화면을 따라가며 λ‚΄μš©μ„ μ‰½κ²Œ 확인할 수 μžˆλ‹€. βœ”οΈ νž˜λ“€κ²Œ 마우슀 포인터가 μ›€μ§μ΄λŠ” 것을 λ”°λΌκ°ˆ ν•„μš” 없이, μ˜΅μ €λΉ™λ§Œ μ²΄ν¬ν•˜λ©΄ κ·Έ μ‚¬λžŒμ˜ μ‹œμ•Όλ‘œ λ³΄μ—¬μ£Όλ‹ˆ 정말 νŽΈλ¦¬ν•˜λ‹€. κ²Œλ‹€κ°€ 락 κΈ°λŠ₯을 μ§€μ •ν•˜λ©΄ 고정값이 λ³€ν•˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμ— μž‘μ—…ν•  λ•Œ νŽΈλ¦¬ν•˜λ‹€. 3. λ””μžμΈ μ‹œμŠ€ν…œ ꡬ성 βœ”οΈ λ””μžμΈ μ‹œμŠ€ν…œμ„ ꡬ성할 λ•Œ, ν•œ μœ„μΉ˜μ— μ»΄ν¬λ„ŒνŠΈλ₯Ό κ³ μ •μ‹œν‚€λ©΄ μ–Έμ œλ“ μ§€ κ°€μ Έλ‹€ μ‚¬μš©ν•  수 μžˆλ‹€. 사싀 κΈ°νšμ΄λ“  뭐든 μ»΄ν¬λ„ŒνŠΈ λΌμ΄λΈŒλŸ¬λ¦¬κ°€ μ—†λ‹€λ©΄ 일일이 κ·Έλ¦¬κ±°λ‚˜, 볡사해와야 ν•˜λŠ”λ° μ—μ…‹μ—μ„œ μ„ νƒν•˜μ—¬ μ‚¬μš©ν•  수 있기 λ•Œλ¬Έμ— νŽΈλ¦¬ν•˜λ‹€. 4. 단좕킀 βœ”οΈ λ‹¨μΆ•ν‚€λŠ” 생각보닀 직관적이닀. 동그라미λ₯Ό 그릴 λ•ŒλŠ” o, ν…μŠ€νŠΈλ₯Ό 넣을 λ•ŒλŠ” t, 쀄 그을 λ•ŒλŠ” μ†Œλ¬Έμž l 등이 κ·Έλ ‡λ‹€. λ˜ν•œ λ³΅μ‚¬λŠ” alt만 λˆ„λ₯΄λ©΄ 돼, μ‰½κ²Œ 볡사할 수 μžˆλ‹€. 이 λ•Œλ¬ΈμΈμ§€ pptλ₯Ό μ‚¬μš©ν•  λ•Œλ„ μ•ŒνŠΈλ₯Ό λˆ„λ₯΄λ©° 'μ™œ 볡사가 μ•ˆ λ˜λŠ” κ±°μ•Ό?'λΌλŠ” 생각도 ν•œλ‹€. 5. plug in βœ”οΈ μ²˜μŒμ—λŠ” ν”Όκ·Έλ§ˆκ°€ μ˜μ–΄λ‘œ 돼 μžˆλ‹€ λ³΄λ‹ˆ, 마우슀 였λ₯Έμͺ½ ν‚€λ₯Ό λˆŒλ €μ„ λ•Œ ν˜Όλž€ν•œ κ°μ •λ§Œ λŠκΌˆμ—ˆλ‹€. κ·Έλž˜μ„œ ν”ŒλŸ¬κ·ΈμΈμ΄ μžˆλŠ” 쀄도 λͺ°λžκ³ , ν•„μš” μ—†λ‹€λŠ” μƒκ°λ§Œ ν–ˆμ—ˆλ‹€. ν•˜μ§€λ§Œ μ΅μˆ™ν•΄μ§€κ³  λ‚˜λ‹ˆ 'μ΄λ ‡κ²Œ νŽΈλ¦¬ν•œ 것듀이 μžˆμ–΄?'λΌλŠ” 생각을 ν•˜κ²Œ 됐고, 적극적으둜 ν™œμš© 쀑이닀. βœ”οΈ λͺ¨λ“  ν”ŒλŸ¬κ·ΈμΈμ„ μ‚¬μš©ν•˜λŠ” 것은 μ•„λ‹ˆμ§€λ§Œ, μ•„μ΄μ½˜ ν”ŒλŸ¬κ·ΈμΈμ΄λ‚˜ wireframe ν”ŒλŸ¬κ·ΈμΈ, HTML To Figmaκ°€ 이에 ν•΄λ‹Ήν•œλ‹€. μ•„, ν•˜λ‚˜ 더 μžˆλŠ”λ° charts ν”ŒλŸ¬κ·ΈμΈμ΄λ‹€. 차트λ₯Ό μ•„μ£Ό νŽΈλ¦¬ν•˜κ²Œ λ§Œλ“€ 수 μžˆμ–΄ μ½˜ν…μΈ  λ§Œλ“€ λ•Œ μ•„μ£Ό μœ μš©ν•˜λ‹€.

κΈ°νšμžκ°€ Figma μ“°λŠ” 법: 1λΆ€

brunch

2022λ…„ 4μ›” 1일 μ˜€ν›„ 2:41

λŒ“κΈ€ 0

ν•¨κ»˜ 보면 더 쒋은

πŸ˜΅β€πŸ’« μš°λ¦¬κ°€ λ¬Έμ œμ— λ‹Ήλ©΄ν–ˆμ„ λ•Œ, μ–Έμ œ 함정에 빠질까? πŸŽˆν•œ 쀄 μš”μ•½ - WHYκ°€ μ•„λ‹Œ, WHAT에 μ§‘μ€‘ν–ˆμ„ λ•Œ 빠진닀. βœ”οΈ μ œκ°€ μ’‹μ•„ν•˜λŠ” μ„œν΄μ΄ μžˆμ–΄μš”. λ°”λ‘œ 사이먼 사이λ„₯의 κ³¨λ“ μ„œν΄μ΄μ£ . μ™œ κ³¨λ“ μ„œν΄μ„ μ’‹μ•„ν•˜λƒκ³ μš”? WHYλ‘œλΆ€ν„° λ¬Έμ œμ— μ ‘κ·Όν•˜κΈ° λ•Œλ¬Έμ΄μ—μš”. WHYλŠ” μš°λ¦¬κ°€ μ§λ©΄ν•œ 문제λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•œ λͺ©μ  κ·Έ 자체λ₯Ό μ˜λ―Έν•΄μš”. βœ”οΈ λͺ©μ μ΄λΌ 함은? μš°λ¦¬κ°€ 문제 해결에 집쀑할 λ•Œ, λ‹€λ₯Έ 곳으둜 ν©μ–΄μ§€κ±°λ‚˜ ν˜λŸ¬λ‚˜κ°€μ§€ λͺ»ν•˜λ„둝 λΆ™μž‘λŠ” 졜고의 κΈ°λŠ₯이라 μ—¬κ²¨μ Έμš”. νšŒμ‚¬λ‘œ 치면 λ―Έμ…˜μ΄λ‚˜ 비전이 될 수 있겠죠? 그런 μΈ‘λ©΄μ—μ„œ 문제λ₯Ό ν•΄κ²°ν•  λ•Œ, WHYλŠ” 곧 우리의 λ―Έμ…˜μ΄ λΌμš”. βœ”οΈ 그럼 μ‚¬μš©μžκ°€ μš”μ²­ν•œ 문제 해결에 μžˆμ–΄ WHYλŠ” λ¬΄μ—‡μœΌλ‘œ μΉ˜ν™˜μ΄ κ°€λŠ₯ν• κΉŒμš”? λ°”λ‘œ Needsμž…λ‹ˆλ‹€. μ†ŒλΉ„μžμ—κ²Œ 무엇이 ν•„μš”ν•˜κ³ , 무엇을 λ˜μ Έμ€˜μ•Ό ν•˜λŠ”μ§€, μ–΄λ–»κ²Œ 보면 λ‹¨κΈ°μ μœΌλ‘œ 집쀑할 수 μžˆλŠ” 졜고의 선택지라 μ—¬κΈΈ 수 μžˆμ–΄μš”. βœ”οΈ λ˜ν•œ, λͺ…ν™•ν•œ λͺ©μ μ§€μ— λŒ€ν•΄ λ‹€μ–‘ν•œ 해결책을 μ œμ‹œν•  수 있죠. λ‹ˆμ¦ˆλ₯Ό μΆ©μ‘±μ‹œν‚¬ 수 μžˆλŠ” 방법은 λ§Žκ±°λ“ μš”. κ°€λ Ή 갈증이 λ‚  λ•Œ μš°λ¦¬λŠ” 무엇을 ν•΄μ•Ό ν•΄μ†Œν•  수 μžˆμ„κΉŒμš”? 물을 λ§ˆμ‹œλ©΄ λ©λ‹ˆλ‹€. λ˜λŠ” 음료λ₯Ό λ§ˆμ‹œλ©΄ λ©λ‹ˆλ‹€. λ˜ν•œ, 침을 λͺ¨μ•„μ„œ μ‚Όν‚€.. 이건 μ•„λ‹ˆλ„€μš”.😐 βœ”οΈ 반면 WHAT에 μ§‘μ€‘ν•˜κ²Œ 되면 μ–΄λ–€ ν˜„μƒμ΄ μΌμ–΄λ‚ κΉŒμš”? 결과적인 츑면으둜 μ ‘κ·Όν•˜κΈ° λ•Œλ¬Έμ—, μ†ŒλΉ„μžκ°€ μš”μ²­ν•œ 근본적인 Needsλ₯Ό νŒŒμ•…ν•˜μ§€ λͺ»ν•΄μš”. κ·Έμ € μ†ŒλΉ„μžκ°€ λ˜μ§„ 말을 따라 'κΈ°λŠ₯적'으둜 μ ‘κ·Όν•˜μ—¬ 문제λ₯Ό ν•΄κ²°ν•  뿐이죠. βœ”οΈ 그런 μΈ‘λ©΄μ—μ„œ κΈ°λŠ₯에 μ§‘μ€‘ν•˜λŠ” 초기 μŠ€νƒ€νŠΈμ—…λ“€μ΄ λ§Žμ€λ°μš”. κΈ°λŠ₯을 톡해 문제λ₯Ό ν•΄κ²°ν•˜λ € ν•˜λ‹€λ³΄λ‹ˆ λΉ™ λŒμ•„κ°€λŠ” κ²½μš°κ°€ λ°œμƒν•˜κΈ°λ„ ν•˜μ£ . 예λ₯Ό λ“€μ–΄ μ†ŒλΉ„μžλŠ” 글을 μ“°κ³  싢은 λ‹ˆμ¦ˆκ°€ μžˆμ–΄μš”. 그러면 μ§€κΈˆ λ‹Ήμž₯ 글을 μ“Έ 수 μžˆλŠ” κΈ°λŠ₯을 μ œκ³΅ν•˜λ©΄ λΌμš”. βœ”οΈ ν•˜μ§€λ§Œ 글을 μ“°λ‹€λŠ” 것을 맨 λ§ˆμ§€λ§‰μ— λ°°μΉ˜ν•˜μ—¬, 글을 μ“°κ²Œ λ˜λŠ” κ³Όμ • 그리고 κ·Έ μ΄ν›„μ˜ κ³Όμ—…κΉŒμ§€ μƒκ°ν•˜μ—¬ λΉ™ λŒμ•„μ˜€λŠ” κ²½μš°κ°€ λ§Žμ•„μš”. 글을 μ¨μ„œ ꡐλ₯˜ν•˜κ²Œ λ§Œλ“€κ² λ‹€. 글을 μ¨μ„œ μƒˆλ‘œμš΄ 이읡을 μ°½μΆœν•˜κ² λ‹€ λ“±λ“± 말이죠. μ •μž‘ μ†ŒλΉ„μžμ˜ λ‹ˆμ¦ˆλŠ” λ‹¨μˆœν•˜κ²Œ '글을 μ“΄λ‹€'λΌλŠ” 것인데 λ§μ΄μ—μš”. βœ”οΈ μ œκ°€ 글을 μΌλŠ”λ° 정말 ν—·κ°ˆλ¦¬κ²Œ μ¨λ†¨λ„€μš”. 제 κΈ€λ³΄λ‹€λŠ” 아티클을 μ°Έκ³ ν•˜λŠ”κ²Œ 더 쒋을 κ±° κ°™μ•„μš”. μ•„μ£Ό κ°„λ‹¨ν•˜κ³  λͺ…λ£Œν•˜κ²Œ 정리λ₯Ό μž˜ν•΄μ£Όμ…¨κ±°λ“ μš”.🀣 μ§¬μ—μ„œ λ‚˜μ˜€λŠ” λ°”μ΄λΈŒλŠ” μ‰½κ²Œ 따라가지 λͺ»ν•˜λŠ” κ±° κ°™λ„€μš”.😁

ν•΄κ²°μ±…μ—λ§Œ 집쀑할 λ•Œ λΉ μ§€λŠ” 함정

brunch

μΆ”μ²œ ν”„λ‘œν•„

ν˜„μ§μžμ—κ²Œ 업계 μ£Όμš” μ†Œμ‹μ„ λ°›μ•„λ³΄μ„Έμš”.

β€Œ
β€Œβ€Œ
β€Œ
β€Œ
β€Œβ€Œ
β€Œ
β€Œ
β€Œβ€Œ
β€Œ
β€Œ
β€Œβ€Œ
β€Œ
β€Œ
β€Œβ€Œ
β€Œ

ν˜„μ§μžλ“€μ˜ 'μ§„μ§œ μΈμ‚¬μ΄νŠΈ'κ°€ λ‹΄κΈ΄ 업계 μ£Όμš” μ†Œμ‹μ„ λ°›μ•„λ³΄μ„Έμš”.

컀리어리 | μΌμž˜λŸ¬λ“€μ˜ 컀리어 SNS