분류 전체보기 (76) 썸네일형 리스트형 [Figma 꿀팁] 디자이너가 자주쓰는 Figma 단축키 25개.zip 안녕하세요. 실무에서 매일 피그마(Figma)를 쓰는 디자이너 분들, 혹은 이제 막 시작하신 분들께 도움이 될만한 Figma 단축키 25개를 들고왔습니다. 이번 포스팅에서는 2025년 기준, 실무 디자이너들이 가장 자주 쓰는 Figma 단축키 25개를 정리해드릴게요. 정말 자주 쓰는 단축키만 콕 집어 빠르게 작업하고 싶은 분들이라면 이 글을 북마크해두세요! ✔️ 이런 분들을 위한 글이에요- 피그마를 막 시작했는데 손이 느린 느낌이 드는 분- 마우스 클릭 없이 빠르게 작업하고 싶은 분- 실무에서 많이 쓰는 단축키만 압축해서 알고 싶은 분- 디자이너와 협업하는 기획자, 퍼블리셔, 마케터✅ 왜 단축키를 외워야 할까?Figma는 클라우드 기반 툴이지만, 단축키만큼은 로컬 프로그램 못지않게 강력합니다. 매번 마우.. [Figma 꿀팁] 팀 프로젝트에서 꼭 알아야할 권한 설정 & 버전 관리 방법 Figma는 디자이너 혼자만 쓰는 툴이 아닙니다. 요즘은 기획자, 개발자, 마케터까지 모두 피그마에 들어와 실시간으로 협업하는 시대죠. 하지만 여러 명 동시에 작업하다 보면, 누가 뭘 수정했는지 모르겠고, 실수로 컴포넌트를 날려먹는 참사도 종종 발생합니다. 그래서 오늘은 실무에서 꼭 알아야 할 Figma의 권한 설정과 버전 관리 꿀팁을 정리해봤습니다. 협업이 많아질수록, 이 설정 하나하나가 프로젝트 퀄리티와 직결됩니다. 1. 팀원 권한은 정확히 나눠야 한다.Figma에서는 공유 링크 하나로 누구나 들어올 수 있지만, 실무에서는 누가 수정 가능한가를 반드시 구분해야합니다.권한 종류 요약권한설명Can View 보기만 가능 (기획자, 마케터 용)Can Edit직접 수정 가능(디자이너, 프론트 개발자)Can.. [Figma 꿀팁] 기획자 + 디자이너 실무과정 / Figma로 앱 기획서 시안 만드는 방법 실제 앱을 기획하고 디자인 할 때, 많은 팀이 아직도 파워포인트나 엑셀로 화면 기획서를 작성하고 있죠. 하지만 실무에서는 빠른 협업과 피드백을 위해 Figma 에서 바로 앱 기획서 시안을 만드는 방식이 점점 더 일반화되고 있습니다. 이번 글에서는 제가 실제 프로젝트에서 사용하는 figma 앱 기획서 제작 과정을 처음부터 끝까지 전부 공유해드리겠습니다. 기획자, 디자이너 모두에게 도움이 될 수 있도록 기획 의도부터 컴포넌트 활용까지 전체 플로우를 정리했습니다. Step 1. 앱 기획 목적 정리 & 핵심 화면 스케치가장 먼저 정리해야 하는 것은 이 두가지입니다. (1) 앱의 핵심 기능은 무엇인지?예) 기록형 앱인지, SNS인지, 전자상거래인지 등(2) 사용자의 흐름(플로우)은 어떻게 흘러가는지?홈 > .. [Figma 꿀팁] 색상, 폰트, 버튼 스타일 가이드 만드는 법 | 디자인시스템 디자인 시스템은 브랜드나 서비스의 일관성을 유지하고, 협업 효율을 극대화하는 핵심 도구입니다.그 중에서도 색상, 타이포그래피, 버튼 스타일은 가장 기본이자 중요한 세 가지 구성 요소입니다. 이번 글에서는 Figma를 이용해 색상, 폰트, 버튼 가이드를 체계적으로 만드는 방법을 실무 중심으로 정리해드리겠습니다. 디자인 시스템을 처음 만들거나 정리해보고 싶은 디자이너분들께 도움이 되기를 바랍니다. 1. 색상 시스템 정리하기색상은 브랜드 인상과 사용자 경험에 직접적으로 영향을 주는 요소입니다. 기본적으로 아래 3가지 카테고리로 나누어 정리하는 것이 좋습니다. 색상 분류 예시- Primary Color : 브랜드 대표 색상 (ex. Blue !#1C9FFC)- Secondary color : 보조 색상- .. [Figma 꿀팁] 피그마 Auto Layout 제대로 쓰는 법 완벽 정리 피그마(Figma)는 단순 디자인 툴을 넘어 개발 협업과 프로토타입 제작까지 모두 가능한 종합 UXUI 툴로 자리잡았죠. 그 중에서도 실무 디자이너라면 반드시 익혀야하는 기능이 바로 'Auto Layout'(오토 레이아웃)입니다. 처음엔 어렵게 느껴질 순 있지만, 한번만 원리를 익히면 레이아웃 작업속도가 매우 빨라지고 수정시에도 스트레스가 줄어듭니다. 이번 글에서는 Auto Layout의 개념부터 실무 적용 팁까지 전부 정리해드릴게요! 💡Auto Layout이란?Auto layout은 컴포넌트의 간격, 정렬, 크기 변화 등을 자동으로 조절해주는 기능입니다. 간단히 말하면, 상자에 콘텐츠를 넣었을 때 그 콘텐츠의 위치와 정렬을 맞춰주는 '스마트한 박스'를 만드는 거죠. 예를 들어 버튼 안의 텍스트가 길어.. 📂 gif 파일 사이즈, 용량 조절하는 방법.zip 외주 작업할 때 알아둬야 할 꿀팁!디자이너로 일을하다보면 종종 gif 파일을 받아서 수정/업로드 해야하는 경우가 있습니다. 외주 업체나 영상 담당자에게 gif로 요청을 했는데, 막상 받아보면 해상도가 들쭉날쭉하거나 용량이 너무 커서 웹에 못 올리는 경우가 있습니다. 이런 경우에는 어쩔 수 없이 2차 가공을 해야하는데요. 실제로 저도 클라이언트가 모바일 상세페이지에 gif 파일 삽입을 요청했는데, 2000px짜리 gif를 전달받아서 무려 20mb짜리를 가공해야했던 적이 있습니다. 그래서 그 때 직접 gif 사이즈도 줄이고, 용량도 압축했던 좋은 방법을 소개해드립니다. ✔️ gif 화면 해상도 줄이는 방법gif의 화면 크기(픽셀)가 너무 클 경우, 모바일 또는 웹용으로 줄여줘야 로딩속도도 빨라지고, 깔끔하.. 웹사이트 제작시 꼭 필요한 HTML 코드 10가지 정리.zip 웹사이트 제작 시에 자주 쓰는 코드들 매번 복사 붙여넣기 하고 있지않나요?' 아 이거 맨날 쓰는데 또 까먹었네' 하는 경험 있으실 거에요. 그래서 오늘은 실무에서 진짜 자주쓰는 HTML 코드 10가지를 한번에 정리해드리겠습니다. 1. 기본 HTML 문서 구조HTML 문서를 만들 때 가장 처음 사용하는 기본 뼈대입니다. 2. 새 창으로 열기외부 사이트로 이동할 때 자주 사용하는 코드입니다.사이트 바로가기 3. 이미지 삽입웹 페이지에 이미지를 삽입할 때 사용하는 기본 코드입니다. 4. 버튼처럼 보이는 링크CTA(call to Action) 버튼처럼 보이게 스타일화 된 링크입니다. 자세히 보기 5. 유튜브 영상 삽입블로그나 홈페이지에 영상 삽입할 때 딱! 6. 이미지, 텍스트 나란히 정렬아이콘+텍스트 같.. 상단 fps n/a, gpu, cpu, 지연시간 탭 지우는 방법 요즘 게임하다보면 화면 상단에 갑자기 FPS N/A GPU, CPU, 지연시간 같은 정보가 갑자기 떠있을 때가 있습니다. 저도 어느 날 갑자기 오른쪽 위에 알 수 없는 숫자들이 잔뜩 떠 있어서 처음엔 '이게 뭐지?' 싶었어요. 프레임 수(FPS)나 지연시간이나 성능 체크할 때는 유용하지만, 계속 게임이 실행되는 와중에도 떠 있으니까 은근 신경쓰이고 집중도 잘 안되더라구요. 특히 화면에 많은 UI가 나오는 전략 게임같은 경우에는 더구나 그렇더라구요. 그런데 알고 보니 이게 제가 의도치 않게 단축키를 눌러버려서 나타나는 기능이더라구요. 해결 방법부터 말씀드리면, Alt + R 키 한번만 눌러주면 해결됩니다. 목차 1. 언제부터 생긴 건지 모르게 뜬 오버레이 2. 해결 방법은 의외로 간단 .. 이전 1 ··· 4 5 6 7 8 9 10 다음
