본문 바로가기
Background
[Phase] GIF 만드는 법, lottie JSON 사용하는 법. 단조로운 이미지만으로는 부족할 때 간단하게 웹으로 GIF 만드는 법에 대해 공유해 드리려 합니다. Phase app.phase.com이 Phase라는 솔루션도 피그마처럼 유료와 무료가 나뉘어 있습니다.또한, 피그마처럼 웹으로 작업을 진행할 수 있습니다.간단하게 사용하신다면 무료 플랜으로도 충분하니 아래 사용법을 통해 GIF를 만들어 보시기를 바랍니다.우선 Phase 웹에 들어갑니다.회원가입 진행 후 화면에 들어가면 아래와 같습니다.우측에 있는 파란색 "+ New" 버튼을 클릭하여 새로운 토대(도화지)를 생성합니다.우선은 간단하게 도형을 그리는 법과, 이미지를 추가하는 방법을 배워보겠습니다.대부분의 단축키는 피그마와 비슷합니다.r: 사각형 도형o: 둥근 도형p: 곡선t: 텍스트 박스n: 컨테이너 만들기h:.. 2025. 6. 23.
[Figma] 피그마 AI로 누끼 따는 법 (이미지 해상도 향상, 이미지 생성) 최근 여러 소프트웨어에서 AI 기능이 출시되고 있습니다.피그마에서는 AI를 통해 배경 제거, 이미지 해상도 향상, 이미지 생성을 할 수 있습니다.아직 베타 기능이라 무료이지만, 나중에는 유료 기능으로 바뀔 수도 있을 것 같네요.누끼 따는 법(배경 제거):방법: 피그마 > 디자인 파일 > 배경을 제거할 이미지 클릭 > AI 버튼 클릭 > 배경 제거 클릭배경 제거 진행 시 상당히 괜찮은 퀄리티로 배경을 제거해 줍니다.이미지 해상도 향상: 방법: 피그마 > 디자인 파일 > 배경을 제거할 이미지 클릭 > AI 버튼 클릭 > 배경 제거 클릭오른쪽에 있는 그림이 해상도를 향상한 이미지입니다.확대해서 보시면 픽셀이 좀 더 오밀조밀한 것을 볼 수 있습니다.원리는 게이밍 모니터에서 지원하는 업스케일링과 비슷한 것 같습니.. 2025. 4. 22.
프론트엔드 개발자가 알아야 하는 피그마 사용법 (기초) "혹시 피그마 사용할 줄 아세요?"요즘 면접 질문 때 프론트엔드나 퍼블리셔들에게 자주 들어오는 질문일 것입니다.디자이너랑 협업할 때 다양한 툴(포토샵, 일러스트레이터, 어도비 XD, 피그마)로 작업하니 다 조금씩은 사용할 줄 알면 좋습니다. 이중 최근 트렌드는 피그마입니다. 트렌드 때문이 아니서라도 여러 디자이너와의 협업에서 피그마가 가장 사용 경험이 좋았기에 개발자의 피그마 간단 사용 방법을 꼭 공유하고 싶었습니다.피그마의 장점필수 기능 무료.피그마 개발자 모드는 유료입니다. 무료여도 충분히 사용하는데 이상없었습니다.개발자 모드에서는 CSS를 좀 더 편하게 가져오거나, 간격 확인을 마우스 호버로만 할 수 있습니다.Drafts에 작업물 무한 저장 가능. (Drafts는 메모장 같은 개념입니다.)All p.. 2024. 10. 20.