728x90
반응형

전체 글 76

피그마 이미지 내보내기 | PNG·SVG·PDF 차이와 화질 깨짐 해결

피그마 이미지 내보내기를 했는데 글자가 흐릿하거나, 투명해야 할 배경이 흰색으로 저장되는 경우가 있다. 같은 디자인을 PNG와 SVG로 내보냈더니 결과가 달라 보이기도 한다.이럴 때는 무조건 3x로 다시 저장하기보다 무엇을, 어디에, 얼마나 크게 사용할지부터 정하는 편이 빠르다. 화면 캡처와 개발용 아이콘은 같은 내보내기 설정을 쓸 이유가 없기 때문이다.이 글은 Figma Design의 정적 이미지 내보내기를 기준으로 PNG·JPG·SVG·PDF 선택법과 화질 깨짐, 투명 배경, 글꼴 문제의 확인 순서를 정리한다.30초 요약글자와 UI가 들어간 화면 이미지는 PNG부터 검토한다.사진 중심이고 투명 배경이 필요 없다면 JPG를 검토한다.확대해서 쓸 벡터 아이콘·로고는 SVG가 적합하다.검토용 문서나 고정된..

Design Posts 2026.10.07

피그마 오토레이아웃 사용법 | Hug·Fill·Fixed 차이와 안 늘어날 때 해결

피그마에서 버튼 문구를 바꿨더니 글자가 밖으로 튀어나온다. 카드 너비를 늘렸는데 안쪽 텍스트는 그대로다. 튜토리얼에 보이는 ‘Fill container’가 내 화면에는 없다.오토레이아웃을 처음 쓸 때 자주 만나는 문제다. 대부분은 기능이 고장 난 게 아니라 어떤 레이어를 기준으로 크기가 바뀌는지 설정하지 않아서 생긴다.이 글에서는 피그마 오토레이아웃의 핵심인 Hug contents, Fill container, Fixed 차이를 정리하고, 버튼과 카드에 적용하는 방법까지 살펴본다.30초 요약Hug contents: 안쪽 콘텐츠에 맞춰 크기가 바뀐다.Fill container: 부모 오토레이아웃에서 사용 가능한 공간을 채운다.Fixed: 지정한 너비나 높이를 유지한다.너비와 높이는 각각 다르게 설정할 수 ..

Design Posts 2026.10.07

피그마 무료 플랜 파일 3개 제한 해결 2026 | Drafts·휴지통 정리법

피그마 무료(Starter) 플랜으로 작업하다 보면 어느 날 갑자기 새 파일을 만들 수 없게 되는 순간이 온다. "파일을 만들 수 없습니다"라는 안내와 함께 업그레이드를 권하는 창이 뜨면 당황스럽지만, 사실 이건 결제를 해야만 풀리는 문제가 아니다. Drafts와 휴지통 구조만 이해하면 대부분 무료로 해결된다.이 글에서는 피그마 무료 플랜의 파일 개수 제한이 정확히 어떤 기준으로 걸리는지, 지금 당장 공간을 만드는 방법, 그리고 그래도 안 풀릴 때 팀이 잠기는(Locked) 상황까지 순서대로 정리했다.30초 요약· 피그마 Starter(무료) 팀은 폴더 1개 안에 Figma 디자인·Sites 합산 3개, FigJam 3개, Slides 3개까지만 만들 수 있다· Drafts(초안)는 폴더에 속하지 않은 ..

Design Posts 2026.10.05

피그마 메이크(Figma Make) 사용법 2026 | 프롬프트로 프로토타입 만들기

"디자인 시안은 완성했는데, 실제로 눌러보고 테스트할 수 있는 프로토타입이 필요하다." 이런 상황에서 피그마 메이크(Figma Make)는 코드를 몰라도 글로 설명만 하면 동작하는 앱을 만들어 준다. 디자인 파일을 가져와 그대로 살려낼 수도 있고, 아예 빈 화면에서 프롬프트만으로 시작할 수도 있다.이 글은 피그마 메이크를 처음 써보는 디자이너를 위해 썼다. 어떤 요금제에서 쓸 수 있는지, 실제 사용 순서는 어떻게 되는지, AI 크레딧은 얼마나 드는지, 그리고 발행까지 가는 과정을 공식 문서 기준으로 정리했다.30초 요약· 피그마 메이크는 프롬프트만으로 인터랙티브 앱을 만드는 AI 도구로, 유료 플랜의 Full 시트에 포함되고 Starter 플랜에서도 체험 가능· 사용 순서는 프레임 시작 또는 기존 디자인..

Design Posts 2026.10.05

앱 아이콘 사이즈 가이드 2026 | iOS·안드로이드 규격 총정리

앱 아이콘을 만들 때마다 "이번엔 몇 픽셀이었지"를 검색하게 되는 건 디자이너라면 누구나 겪는 일이다. iOS는 1024, 180, 120처럼 숫자가 여러 개고, 안드로이드는 적응형 아이콘이라는 별도 개념까지 있어서 헷갈리기 쉽다. 이 글은 애플 공식 Human Interface Guidelines와 구글 플레이 콘솔 공식 문서를 기준으로 지금 바로 작업할 때 필요한 사이즈만 정리했다.결론부터 말하면 iOS는 1024x1024px 마스터 파일 하나만 있으면 되고, 안드로이드는 플레이 스토어용 512x512px와 적응형 아이콘용 레이어 두 장을 따로 준비해야 한다. 아래에서 각 사이즈가 어디에 쓰이는지, 왜 그 숫자인지까지 함께 짚는다.30초 요약· iOS는 1024x1024px PNG 1장만 제출하면 X..

Design Posts 2026.10.04

모바일 앱 디자인 사이즈 2026 | 아이폰·갤럭시 화면 규격 정리

모바일 앱이나 반응형 웹을 만들 때 가장 먼저 막히는 질문은 의외로 간단하다. "피그마에서 프레임을 몇 x 몇으로 잡아야 하지?" 아이폰도 모델마다 화면 크기가 다르고, 갤럭시는 제조사마다 해상도가 제각각이라 검색할 때마다 숫자가 헷갈린다.이 글은 2026년 10월 기준으로 현재 판매 중인 아이폰과 갤럭시 S 시리즈의 화면 규격을 포인트(pt)·픽셀(px)·PPI까지 한 번에 정리하고, 포인트와 dp와 px를 헷갈리지 않는 법, 피그마에서 기기별 프레임을 설정하는 실무 방법까지 다룬다.30초 요약· 아이폰 기준 프레임은 iPhone 16/16 Pro 계열 390~402pt 너비가 사실상 표준· 아이폰은 포인트(pt), 안드로이드는 dp 단위로 디자인하고 실제 픽셀(px)은 배수로 자동 환산된다· 갤럭시는..

Design Posts 2026.10.04

피그마 한글 폰트 안 보일 때 | 로컬 폰트 설치와 폰트 깨짐 해결

피그마에서 텍스트 레이어를 눌렀는데 분명히 설치한 한글 폰트가 목록에 없거나, 공유받은 파일을 열었더니 글씨가 전혀 다른 모양으로 바뀌어 있는 경우가 있다. 대부분 폰트 파일이 망가진 게 아니라 피그마가 로컬 폰트를 읽어오는 방식을 몰라서 생기는 문제다.이 글에서는 피그마 공식 도움말을 기준으로 한글 폰트가 안 보이는 원인을 짚고, 브라우저와 데스크톱 앱 각각에서 로컬 폰트를 설치해 쓰는 방법, 그리고 글꼴 깨짐·충돌 경고가 뜰 때 바로 적용할 수 있는 해결 순서를 정리했다. 30초 요약· 피그마는 기본으로 구글 폰트만 포함하고, 한글 폰트 같은 로컬 폰트는 별도로 설치해야 보인다· 데스크톱 앱은 글꼴 도우미가 내장되어 있지만, 브라우저는 FigmaAgent(글꼴 설치 프로그램)를 따로 설치해야 한다·..

Design Posts 2026.10.04

디자인 툴 학생 무료 혜택 총정리 2026 | 피그마, 어도비, 프레이머, 노션

디자인을 처음 배우거나 포트폴리오를 준비하는 학생이라면, 유료 디자인 도구의 월 구독료가 꽤 부담스럽다. 다행히 피그마, 어도비, 프레이머, 노션은 모두 학생과 교사를 위한 공식 무료 혹은 할인 플랜을 운영한다. 조건과 신청 방법만 알면 대부분 10분 안에 끝난다.이 글은 네 도구의 2026년 9월 기준 학생 혜택을 공식 페이지를 기준으로 정리했다. 어떤 전공, 어떤 작업을 하느냐에 따라 먼저 신청할 도구가 달라지니 비교표와 추천 순서까지 함께 확인하자.30초 요약· 피그마: 고등교육·고등학교 학생은 1년마다, 교사는 2년마다 재인증하면 프로페셔널 요금제가 계속 무료(SheerID 인증)· 어도비: Creative Cloud Pro(올 앱)가 한국 공식 페이지 기준 66% 할인, 완전 무료가 아니라 매년..

Design Posts 2026.10.03

컬러 팔레트 사이트 추천 2026 | 배색 도구 10선과 UI 컬러 가이드

예쁜 색 다섯 개를 골랐는데 막상 화면에 올리면 어색했던 경험, 디자이너라면 한 번쯤 있다. 이유는 간단하다. 컬러 팔레트 사이트에서 찾은 색 조합은 ‘나란히 놓인 색’일 뿐이고, UI는 배경, 텍스트, 버튼, 상태 색처럼 각자 역할이 다른 색이 겹겹이 쌓이는 구조이기 때문이다.그래서 이 글은 두 부분으로 나눴다. 앞에서는 영감용, AI 추천용, UI 시스템용, 접근성 검사용으로 나눠 2026년 9월 기준 실제로 쓸 만한 색 조합 사이트 10곳을 무료 여부와 함께 정리했다. 뒤에서는 60-30-10 법칙, 브랜드 컬러에서 UI 팔레트를 만드는 법, 다크모드, WCAG 명도 대비 기준까지 실무 배색 가이드를 담았다.30초 요약· 영감은 Color Hunt, Coolors, Adobe Color, 맥락 기반..

Design Posts 2026.10.03

UX UI 포트폴리오 가이드 2026 | 채용 담당자가 보는 케이스 스터디 작성법

AI로 그럴듯한 화면을 몇 분 만에 뽑아내는 시대가 되면서, UX UI 포트폴리오를 보는 눈도 달라졌다. 깔끔한 목업과 매끈한 문장은 이제 누구나 만든다. 그래서 채용 담당자는 화면보다 ‘이 사람이 왜 그렇게 결정했는지’, ‘그 결정을 어떻게 검증했는지’를 먼저 찾는다.이 글은 2025~2026년 채용 담당자 조사와 NN/g(Nielsen Norman Group)의 포트폴리오 가이드를 바탕으로, 디자이너 포트폴리오 만드는 법을 처음부터 끝까지 정리했다. 케이스 스터디 구조, AI 시대의 차별화 포인트, 적정 분량, 플랫폼별 비용 비교, 제출 전 체크리스트까지 한 번에 가져갈 수 있다. 신입 디자이너 포트폴리오를 준비하는 사람이라면 7장의 상황별 추천부터 봐도 좋다.30초 요약· 채용 담당자는 포트폴리오를..

Design Posts 2026.09.30
728x90
반응형