Видео

아... 최근에 피그마가 업데이트되어 하단으로 내려갔습니다..! 조금 달라졌습니다

시청 감사합니다. 원하시는 작업물 무탈히 만드시길 바랍니다!!

저도 확인해보니 동영상 제작당시로부터 업데이트가 있어서 그런것 같습니다. www.codeit.kr/community/questions/UXVlc3Rpb246NjQ5OGNjOWJmYWEwZGU0NmE1NGE3NjQy 두번째 답변 확인하세요!

@@mona_dev 찾아봐주시기까지 너무 감사합니다!

시청 감사합니다 :)

영상 잘 봐주셔수 감사합니다☺️

앗 그런가요!! 입문용으로 보시기에 좋아요! 댓글 감사합니다☺️

Figma? 물어보시는걸까요~?

헉 우와우와 정성글 감사합니다~~ 늦었지만 새해복 많이 받으세요~:)

www.figma.com/downloads/ 다운받아서 사용하시면 되세요~ 그리고 커뮤니티는 매번 위치가 변동되더라구요 오늘기준 메인페이지 왼쪽 하단에 있습니다!

시청감사합니다:)

시청감사합니다:)

시청 감사합니다 :)

시청 감사합니다~ :)

둘다 좋은 방법이라고 생각듭니다. 그냥 들었을때의 느낌은, 초반엔 무엇을 배치할지 잘 모르니 기존에 있는 어플을 보고 똑같이 만들어보며 화면 구성에대한 감을 익히고, 유아이 키트등을 활용해서 직접 만들고 싶은것들을 구상하고, 직접 만드는 순서로 하면 좀 더 이해도가 있는 상황에서 다양한 도전을 하실수 있을것같아요!

일괄 관리가 됩니다~ 보기에는 똑같아보일수는 있지만 추후에 수정할때 한번에 수정이 되어서 빠르게 수습 가능해요!

아마도 무료도 커뮤니티 들어갈 수 있을거에요! 보니까 수시로 위치가 바껴서 못찾으실수도 있고.. 지금은 상단 좌측에 집모양 옆에서 지구본..? 모양 아이콘이 있습니다. 그걸로 들어가시면 되세요

오! 해결했어요! 제가 잘못하고 부모컴포넌트는 선택을 하지 않은 채로 오토 레이아웃을 추가했네요ㅎㅎ

@@허우회-t9n 네! 맞아요! 스스로 해결되어 다행입니다 :)

맞아요.. 프로그램 배울때 가장 어려운게 프로그램 설치 라고 할정도로ㅎㅎ 사실은 어려운 프로그램이 아닌데 너무 당연해서 그냥 건너뛰는 경우가 많죠ㅎㅎ 도움이 되어 다행입니다~

화면을 봐야 알겠지만 오토레이아웃 상태가 상하로 되어있는것같은데요.. 해당 영역 선택하시고 우측에 Auto layout 이 ↓인지, →인지 봐보세요! 이런 아이콘이 안나온다면 레이어 선택이 잘못되어 있는거라서 하위 레이어/사위레이어를 눌러서 오토레이아웃이 먹힌 것을 찾아보세요

시청 감사합니다:)

링크 공유하시면 됩니다 (상단 우측 share 버튼에서 주소 확인 가능)

보통은 pdf로 export 해서 pdf 리더기로 보여줍니다~

일단 이 영상의 컨셉은 개발자가 많은 종류의 폰트를 사용하는것을 좋아하지 않는다 입니다. (다 코드에 반영을 해야하니까요. 그리고 수익을 올리는데 영향을 주는 큰 요소도 아니기도 해서 그런 노동을 투자한다?) 그리고 외부 폰트를 심는것 보다는 시스템 폰트를 사용하는것을 선호한다는 것을 이야기를 하고 있습니다. 샌프란시스코는 영문, 애플산돌은 국문입니다. 숫자를 문장에서 노출시킬시에는 해당하는 언어로 노출시키면 될것 같습니다. 숫자 단독으로 사용할경우, 서비스에 설정된 언어를 사용하게 할것 같은데,, 혹시나 다국어 서비스에, 숫자가 다르게 보이는게 싫다. 라고 한다면 서비스의 기준이 되는 국가 언어를 사용하도록 할것 같아요. 사실 답이란건 없고, 개발자와의 규칙을 만드는것이 좋으며, 되도록 변수가 적은쪽으로 타이포 시스템을 설정하는게 서로에게 잡음 없이 편합니다.. 저도 자세히는 몰라 찾아보았는데요, SF pro display는 ios 13이후에 나온 폰트라고 하네요. 보통 display 라고 명명하는것들은 크게 디자인하는 포인트 폰트로 사용하는 스타일들에 붙이는 명칭인것으로 보아 SF pro는 본문에, SF pro display는 대기화면? 시계나 이런데에 쓰이지 않았을까 추측합니다(그때 디자인도 바뀌었던걸로 기억합니다. 아닐수 있음 주의) 그런데 앞서 설명드렸던 내용과 같이 개발자분들은 핸드폰 기본 폰트를 사용하는것을 편해한다는것엔 부합하지만 각각의 폰트 영역에 폰트 스타일을 다르게 넣는것을 다 인지하고 작업하실지는 사실 저는 물음표 입니다. 많이 고도화된 서비스라면 이러한 미세함까지 캐치하여 작업해주실 순 있지만 초기 기능 늘리기 급급한 환경이라면 이러한 디테일까지 확인하고 해주실지,, 오히려 디자이너가 디테일까지 다 잡아서 신경써 놓았음에도 불구하고 개발자가 안해주면 그만입니다..(ㅠㅠ) 작업 분위기에 맞게 디자인 디테일에 힘을 어디까지 줄건지 고민하고 들어가시면 좋을것 같습니다!

정확히는 잘 모르지만 x1(1배), x2(2배), x3과 같이 여러 사이즈를 전달합니다! 개발자분께 문의해서 어떤 사이즈를 물어보는것도 방법이지만, 차라리 추출하는 방법을 알려주시면 직접 해가시는게 개발자분도 다양한 방법으로 가져갈 수 있어서 처음엔 꺼려하실순 있지만 더 좋아하실거에요!

자식 컴포넌트의 경우 사이즈 변경이나 속성이 완전이 달라지는건 안되지만 색상값 변경과 같은 간단한것은 됩니다!

저건 무시해주시면 되고 3:02초 부분을 보시면 나옵니다! 상단의 #모양의 Frame 을 누르면 오른쪽에 Iphone 11 등이 나옵니다. (촬영전 연습으로 이걸 여러번 클릭해놓아서 왼쪽에 쌓여있는 이유입니다;)

시청감사합니다🥰

안녕하세요! 질문이 잘 이해가 안되는데요, 맞는 답변인지 모르겠지만 컴포넌트 구성이 Rectangle 1, Line 1, Text 1 세개의 레이어를 합친것입니다. 만약 이 내용물들이 따로 논다면 컴포넌트내에 오토레이아웃이 들어간건 아닌지?? 제가 질문을 잘못이해한것같아서 제대로 된 답변인지..;;

@@mona_dev 헉 제가 봐도 개떡같이 설명했는데 제가 궁금했던 부분에대해 정확히 말씀해주셨어요.라인이 들어가는것을 rectangle을 얇게 만들어서 rectangle 두개로 만드는걸로 이해해서 잘못 생각하고 있었어요 ㅋㅋㅋㅋ 그리고 따로노는것 역시 말씀해주신대로 컴포넌트 문제인거같아요. 답변 감사합니다! 다음 단계도 열심히 들을게요 ㅎㅎ :)

1. 수업 하다보면 서른 넘어서도 시작하는 사람 많습니다~ 2. 일년간 수업을 받는데 포토샵은 안가르치나요..?; 피그마 위주로 배우고 포토샵은 만져보고 취업하면 되지 않을까 싶습니다. (포토샵은 안써도 디자이너들은 기본으로 포토샵, 일러스트 합니다) 추가 : 일년 준비할 이유를 모르겠습니다. 기본을 배우고 일단 취업해서 실무를 부딪히는편이 빠르게 몸에 익힐 수 있지 않을까 싶습니다.

아 shift+방향키 입니다. 유용한 키로, 일반적으로 방향키만 사용하면 1px씩 움직이지만 shift 도 같이 누르면 10px씩 움직입니다!

피그마로 머릿속에 있는 아이디어들 끄집어내어 많은 작업물 만드세요~~!:D

맞아요! 제 영상중에 인기가 없는 영상이지만.. 내가 쓰는 툴이 무슨 툴인지 알게되어 더 정을 가지고 다룰수도 있고, 상사분들 설득하기 좋은 영상까지는 생각 못했지만 다양한 피그마의 장점을 알릴 수 있어 제가 애정하는 영상입니다:) 시청 감사합니다!

아이콘이나 이미지는 개발자가 피그마에서 다운받아갑니다~ 오히려 개발자분들도 요청할 필요가 없으니 편해하시구요. 다만 버튼은 다운 받는게 아닌 개발요소라 export해가진 않습니다

@@mona_dev 아... 약간 개념차이가 있나봐요. 제플린이나 xd는 svg, png 포맷 선택해서 그냥 다운받는데, 영상에서는 단순히 다운이 아니라 제외하거나 포함하는 작업 포함 export하길래 그 작업은 처음 보는거라 문의드렸습니다. 사실 다운받을 때 예를들어 아이콘 포함된 라운드 버튼이라면 아이콘만 받아야하는데 라운드버튼 + 아이콘 그룹으로 묶어서 다운받게 되어 있으면 재요청해서 다시 받는 것보다 오히려 편할 것 같습니다.

@@smh51403 아 그렇죠 제플린의 경우 디자이너가 export가능하도록 지정(설정?)을 해줘야하는데 피그마의 경우, 레이어별로 원하는것을 받을 수 있어서 편합니다 :) 초반에 사용툴이 어색하다보니 그러한 마찰들은 있는게 보편적이고, 어려운점이 없는지 물어보고, 가이드도 필요하면 만들어주고 옆에서 사용방법 가르쳐주고 하다보면 어느 포지션이든 편리하다보 좋아하는게 피그마입니다

원하는 도형들을 다 선택하시고 상단바 가운데에 보시면 사각형 두개가 겹쳐진게 보입니다 (Union Selection) 그걸 누르셔서 하나로 만드실 수 있어요

시청 감사합니다 :)

글쎄요.. 원본이 없다면 다 캡쳐를 떠서 피그마에 스크린들을 정리하고, 새로 기획되거나 수정이 될 부분들만 디자인 작업할것같습니다. 이해가 되실까요..! 외주할땐 원본파일 받기 필수입니다..!

@@mona_dev 바쁘신와중에도 답변주셔서 감사합니다.. 원본은 있는데 외주업체에서 PSD로작업하셔서 피그마로 옮겨야해서 멘붕이었어요 ㅠㅠ

@@yeolmaelog 혹시나 해서 찾아보니 magicul.io/converter/psd-to-figma 이런것도 있고 psd to figma 치면 몇개 나오는것같아요! 아마도 컨버팅 하면 레이어나 정리가 좀 안될것같긴하지만.. 혹시나 싶어서 알려드립니다! 고생하세요!^ㅠ

@@mona_dev 감사합니다! 모나님 영상보면서 열심히 공부하고있어요 지식공유해주셔서 정말 감사합니다

개발관련 내용이라 이건 저도 잘 모르겠어요! 짧은 지식으로는 네이티브앱이라면 아이폰용으로 다시 만들어야할테고 작업하신 언어가 하이브리드 라면 알아서 호환될것같긴 합니다! 참고로 보통 디자인은 한벌만 제공합니다. (예전엔 두벌 만드는 경우도 있었지만 지금은 없는것같아요)

자동저장입니다! 따로 저장을 하고 싶다면 File > Save As.fig ... 로 하시면 됩니다.

피드백 감사합니다:)

아~ 저건 그냥 컨트롤 Z 입니다. 그냥 뒤로간거에요! 너무 쉬운거라; 언급을 안한듯 합니다

아! 안내를 안드렸네요 Alt키 입니다.(맥기준, 윈도우도 같은걸로 알곤 있습니다) 보통 포토샵에서도 많이 쓰는 기능이라 설명을 안드린듯 합니다;

Empty 레이어라기보다는 구분선이라고 보시면 됩니다. 사람마다 적용방식은 다르겠지만 저의 경우는 흰 바탕에 올려놓기도하고 자주 사용해서 따로 컴포넌트로 만들어서 사용합니다:)

헉 맞습니다. 영문을 1포인트 키워주는게 맞는습니다!!!!