피그마처럼 기획·설계용 UI/UX 디자인을 하는 도구(와이어프레임, 화면 설계, 프로토타입 중심) 위주로 무료/유료 섞어서 10개 정리해 보겠습니다. 모두 HTML/CSS 산출물보다는 기획 단계의 화면 디자인·프로토타이핑에 초점이 맞춰진 도구들입니다. pixso
1. Adobe XD (유료+제한적 무료)
2. Sketch (유료, mac 전용)
3. Penpot (완전 무료, 오픈소스)
- 웹 기반 오픈소스 UI 디자인·프로토타입 툴로, SVG를 기본 형식으로 쓰고 자체 호스팅도 가능해 보안·데이터 통제에 강점. clickup
- 피그마와 거의 동일한 인터페이스와 기능(컴포넌트, 프로토타입, 개발자 Inspect 등)을 무료로 제공해 비용 민감한 팀에 적합. clickup
4. Pixso / 픽소 (프리미엄, 한국어 강점)
- UI 디자인, 프로토타입, 온라인 화이트보드, 플로우차트까지 통합한 올인원 협업 플랫폼으로 피그마와 기능이 매우 유사함. pixso
- 한국어 환경과 로컬 협업, 데이터 보안(프라이빗 배포) 등을 강조해 국내 팀에서 피그마 대안으로 많이 거론됨. pixso
5. Lunacy (무료 위주)
6. Quant-UX (무료)
- 웹 기반 UI 디자인 및 프로토타입 툴로, 디자인 로직과 비즈니스 로직 분리에 중점을 둔 실험·테스트 지향 도구. wpmet
- 하이파이 비주얼보다는 사용자 플로우와 인터랙션 테스트에 초점이 있어, 기획 단계에서 UX 검증용으로 적합. wpmet
7. Framer (프리미엄, 무료 플랜 있음)
- 원래 코드 기반 프로토타이핑에서 출발했지만, 현재는 피그마처럼 비주얼 UI 디자인과 인터랙션을 동시에 지원하는 툴. clickup
- 간단한 사이트 퍼블리싱 기능도 있으나, 기획 단계에서 인터랙션이 풍부한 프로토타입을 만드는 용도로 많이 사용됨. clickup
8. Axure RP (유료)
- 복잡한 로직과 조건, 상태 변화를 다루는 고급 UX 프로토타이핑 툴로, 엔터프라이즈급 페이지 플로우·업무 프로세스 설계에 많이 쓰임. edrawsoft
- 하이파이 비주얼보다는 기능·흐름 정의에 강해서, BA/기획자 관점의 화면·시나리오 설계에 적합. edrawsoft
9. Balsamiq Wireframes (유료, 로우파이)
- 손그림 스타일의 로우파이 와이어프레임 전용 도구로, 비주얼 디테일을 배제하고 정보 구조와 레이아웃 논의에 최적화. edrawsoft
- 화면기획서 초반 단계에서 빠르게 구조만 잡고, 이후 피그마/다른 툴로 하이파이 디자인을 옮기는 패턴에 잘 맞음. edrawsoft
10. Whimsical / Miro 와이어프레임 (부분 무료)
- 화이트보드·플로우차트·마인드맵 중심 협업 툴이지만, 기본 와이어프레임 컴포넌트를 제공해 간단한 UI 스케치를 할 수 있음. pixso
- 정교한 UI 디테일보다는 기획 회의, 사용자 플로우, 화면 흐름 공유용으로 쓰기에 좋음. pixso
참고: “기획 단계용”으로 고르실 때 팁
- 화면 구조·플로우 위주: Balsamiq, Axure, Whimsical/Miro, Quant-UX
- 실서비스 수준 UI까지 한 번에: Figma, Penpot, Pixso, Adobe XD, Sketch, Lunacy, Framer
- 자체 호스팅·보안 요구 높을 때: Penpot, Pixso(프라이빗 배포 옵션) 고려. wpmet
기획/설계만 하실 거라면, 무료 기준으로는 Penpot + Balsamiq(또는 Whimsical 무료 플랜) 조합이 깔끔하고, 유료까지 포함하면 Penpot 또는 Pixso에 Axure/Balsamiq를 보조로 붙이는 구성이 많이 쓰이는 편입니다. wpmet
UI 기획용 와이어프레임 템플릿은 대표적으로 다음 같은 서비스에서 무료로 받아서 바로 편집·활용할 수 있습니다. gritnut.tistory
1. Figma Community (와이어프레임 전용 섹션)
- Figma 커뮤니티의 Wireframes 카테고리에서 웹·모바일용 와이어프레임 키트와 예시 템플릿을 1000개 이상 무료로 사용할 수 있습니다. figma
- 브라우저에서 바로 열어서 구조만 수정해 기획 산출물로 쓰기 좋고, PDF·이미지로 내보내서 공유도 가능합니다. figma
2. Miro 와이어프레임 템플릿
- Miro는 화이트보드 도구지만, 제품 기획용 와이어프레임 템플릿 모음을 무료로 제공하며 웹·앱용 기본 UI 컴포넌트 라이브러리를 함께 제공합니다. miro
- 완성된 와이어프레임은 이미지나 PDF로 쉽게 내보낼 수 있어 기획 문서에 넣기 수월합니다. miro
3. Canva 프로토타입·와이어프레임 템플릿
- Canva의 프로토타입 영역에서 와이어프레임 샘플과 프로토타입 템플릿을 무료로 제공하며, 브라우저에서 드래그앤드롭으로 빠르게 수정할 수 있습니다. canva
- 디자인 툴에 익숙하지 않은 기획자도 사용하기 쉬운 편이라 초기 화면 설계용 산출물 만들 때 유용합니다. canva
4. Figma 무료 템플릿 모음 사이트들
- 블로그·튜토리얼에서 Figma 무료 템플릿 사이트로 saasdesign.io, uidesigntemplates.com, templatefreebies.com 등이 소개되며, 이들 사이트에서 와이어프레임·UI 키트를 무료로 제공합니다. gritnut.tistory
- 주로 Figma 파일(.fig) 형태여서 Figma 무료 계정으로 열어 구조만 바꿔서 화면기획에 활용할 수 있습니다. gritnut.tistory
5. Freepik / 벡터 리소스 기반 와이어프레임
- Freepik 등에서는 “UI 디자인 와이어프레임” 또는 “wireframe website” 키워드로 검색하면 와이어프레임 레이아웃 벡터·이미지를 무료 다운로드할 수 있습니다. kr.freepik
- 통일된 템플릿이라기보다는 슬라이드나 문서에 끼워 넣을 수 있는 레이아웃 예시 이미지로, 간단한 구조 설명용 산출물에 적합합니다. kr.freepik
추가로, Lucidchart 같은 다이어그램 도구도 와이어프레임 템플릿을 제공하니, 화면 흐름도와 함께 관리하고 싶을 때 후보로 보셔도 좋습니다. lucidchart
Figma용 무료 와이어프레임 템플릿은 보통 “커뮤니티 파일” 형태로 제공되며, 링크만 알면 바로 복제해서 쓸 수 있습니다. figma
1. Figma 공식 와이어프레임 키트 모음
- Figma 공식 와이어프레임 키트 모음 페이지(웹사이트 상단에 “와이어프레임 키트” / “Wireframe kits” 텍스트가 있는 공식 템플릿 허브)를 통해 여러 기본 키트를 무료로 사용할 수 있습니다. figma
- 각 템플릿 카드에서 “이 템플릿 사용하기 / Use this template” 버튼을 누르면 본인 계정으로 복제되어 바로 편집 가능합니다. figma
2. Figma Community – Wireframes 카테고리
- Figma Community의 Wireframes 전용 목록(“Free Wireframe Examples, Templates & Kits | Figma” 페이지)에서 1000개 이상 무료 와이어프레임 템플릿과 키트를 탐색할 수 있습니다. figma
- 이 페이지에서 검색창에 “web wireframe”, “app wireframe”, “lo-fi” 등을 입력해 목적에 맞는 템플릿만 골라 쓸 수 있습니다. figma
3. 개별 무료 와이어프레임 키트 예시
- 블로그에서 추천하는 대표 무료 템플릿으로는 “Wireframes Kit Free”, “Wireframe for Figma (by Ridd)”, “UX Wireframe Kit (by Setproduct)”, “Lo-fi Wireframe Kit (by Waldo)” 등이 있으며, 각각 Figma Community 파일 링크로 제공됩니다. lionbum.tistory
- 이런 템플릿은 링크를 열고 “Open in Figma” 또는 “Duplicate”만 누르면 바로 본인 워크스페이스로 복제되어 재사용할 수 있습니다. heyaiidea
4. Figma 템플릿 링크 모음형 사이트
- Figmapedia 같은 Figma 정보 사이트에서는 “무료 와이어프레임 템플릿 1500개를 사용할 수 있는 사이트”라는 제목으로 Visily 등 와이어프레임 템플릿 제공 서비스를 링크 모음 형태로 정리해 두기도 합니다. figmapedia
- 이런 페이지를 통해 Figma와 호환되거나 비슷한 와이어프레임 템플릿 서비스로 한 번에 넘어가 볼 수 있습니다. figmapedia
5. 추천 사용 패턴
- “정석” 와이어프레임: Figma 공식 Wireframe kits 페이지에서 기본 키트 하나 선택 후, Community Wireframes 목록에서 필요한 레이아웃만 추가로 가져오기. figma
- 빠른 기획: Ridd, Setproduct, Waldo 같은 제작자의 Lo‑fi/UX Wireframe Kit를 베이스로 복제해 필요한 화면만 잘라 쓰는 방식으로 초기 IA·플로우까지 한 번에 정리. lionbum.tistory
모바일 앱용 로우파이 Figma 와이어프레임은 Figma 커뮤니티 안에서 키워드/카테고리로 찾는 것이 가장 효율적입니다. 현재 외부 페이지를 직접 열어볼 수는 없어서 대표적인 검색 경로와 키워드 위주로 정리해 드리겠습니다. lionbum.tistory
1. Figma Community 진입 경로
- Figma 상단 메뉴에서 Community → 검색창에
lo-fi wireframe, mobile wireframe, lo-fi app 같은 키워드를 입력하면 모바일 앱용 로우파이 템플릿이 다수 나옵니다. figma
- 특히 Community 내
Wireframes 카테고리와 Mobile apps 서브컬렉션에서 모바일 전용 템플릿을 모아서 볼 수 있습니다. figma
2. 추천 검색 키워드 / 유형
Low-fi Wireframe Template : 이름 그대로 로우파이 와이어프레임 키트 파일이 있으며, 모바일/웹 컴포넌트가 페이지로 나뉘어 있는 템플릿이 대표적입니다. figmaBloo Lo-Fi Wireframe Kit : 로우파이 스타일 UI 컴포넌트와 화면 템플릿을 묶어 둔 키트가 있어서, 모바일 앱 화면을 빠르게 조합하기에 적합합니다. figma
3. 모바일 앱 전용 컬렉션 활용
- Figma의
편집 가능한 모바일 앱 와이어프레임 템플릿 컬렉션에서는 iOS·Android용 와이어프레임 템플릿을 모바일 전용으로 모아 제공합니다. figma
- 여기서도
lo-fi, wireframe kit 등의 필터/키워드를 추가로 사용하면 디테일이 낮은 기획용 템플릿 위주로 좁혀볼 수 있습니다. figma
4. 한국어 블로그/가이드 참고
- 국내 블로그 글들에서
wireframes kit free 같은 Figma Community 파일 링크를 직접 추천해 주며, 로우파이·하이파이 템플릿을 섞어 쓰는 방법도 함께 소개하고 있습니다. lionbum.tistory
- 이 글들에서 제안하는 기준(디테일 너무 높지 않을 것, 컴포넌트 구조가 명확할 것 등)을 참고해, Figma Community에서 비슷한 스타일의 모바일 템플릿을 골라 쓰면 좋습니다. lionbum.tistory
5. 선택 팁 (모바일 로우파이 기준)
- 색상 거의 없음(흑백/회색 위주), 단순 아이콘/박스 중심인 템플릿을 고르면 이해관계자들과 구조만 논의하기 좋습니다. choojongbum
- 네비게이션, 리스트, 상세, 설정 등 기본 화면 패턴이 세트로 들어 있는 키트를 선택하면 이후 플로우 정의와 사용자 시나리오 작성이 편해집니다. figma
Google의 Stitch(스티치)는 AI 기반 UI 디자인·프로토타이핑 도구에 속한다고 보면 됩니다. marcus-story.tistory
어떤 카테고리인가?
- Google Labs에서 제공하는 실험적 생성형 UI 디자인 툴 / 프로토타이핑 툴로, 프롬프트로 웹·모바일 앱 UI를 자동 생성해 주는 서비스입니다. brunch.co
- 생성된 결과를 Figma로 보내서 편집하거나 HTML·CSS·React 코드로 바로 내보낼 수 있어, 디자인과 프론트엔드 사이를 잇는 디자인-개발 브릿지 도구 성격도 강합니다. blog.secondbrush.co
피그마 등과의 관계로 보면
- 피그마처럼 캔버스에서 직접 그리는 도구라기보다, Gemini 기반 AI가 UI 시안을 만들어 주고 그걸 다른 툴(Figma 등)로 가져와 다듬는 AI 어시스턴트형 디자인 툴에 가깝습니다. marcus-story.tistory
- 화면기획/와이어프레임 단계에서 “아이디어 → 초안 UI → 코드”까지를 빠르게 넘기는 용도로 쓰이는, AI UI 생성기 + 프로토타이핑 툴의 하이브리드라고 정리할 수 있습니다. cuxxmi.tistory
Google Stitch는 프롬프트 기반 AI UI 디자인 생성 및 프로토타이핑 도구로, 텍스트나 이미지 입력만으로 웹·모바일 UI를 빠르게 만들어 줍니다. media.fastcampus.co
접근 및 시작 방법
Stitch는 Google Labs 실험 프로젝트로 제공되며, labs.google.com 또는 Google 계정으로 접근해 "Stitch"를 검색하거나 Labs 대시보드에서 활성화하면 사용 가능합니다. 표준 모드(Standard, 빠른 생성)와 실험 모드(Experimental, 고급 기능)를 선택해 시작하며, 프롬프트 입력창에 "모바일 쇼핑 앱 홈화면, 카드 리스트와 하단 네비게이션 포함" 같은 설명을 넣으면 즉시 여러 페이지 UI를 생성합니다. marcus-story.tistory
주요 기능
- 자연어/이미지 UI 생성: 텍스트 설명(예: "다크 모드 뉴스 앱")이나 스케치·와이어프레임 이미지를 업로드해 레이아웃·색상·컴포넌트를 자동 설계. 동일 프롬프트로 여러 변형 버전 생성 가능. digitalbourgeois.tistory
- 대화형 수정: 생성된 화면을 선택해 "버튼 크기 키워", "컬러 팔레트 변경" 등 채팅으로 세밀 조정. 전체 테마(라이트/다크, 폰트, 코너 반경) 일괄 적용. aisparkup
- 내보내기 옵션: Figma로 직접 복사(레이어 유지), HTML/CSS/Tailwind/React 코드 다운로드. 개발 handover에 최적화. moge
실전 사용 팁
- 기획 단계 활용: 로우파이 와이어프레임 대신 바로 하이파이 UI 초안을 만들어 피드백 루프 단축. 모바일 앱의 경우 "iOS 스타일 로그인 플로우 5개 화면"처럼 구체적으로 지정. tilnote
- 반복 워크플로우: 생성 → Figma 편집 → 코드 내보내기 순으로 사용하면 디자인-개발 간극 최소화. 실험 모드에서 이미지 참조로 기존 UI 스타일 복제 가능. aisparkup
- 한계: 아직 Labs 실험 단계라 한국어 프롬프트가 영어 대비 약할 수 있으니 영어+이미지 병행 추천. media.fastcampus.co
Google Stitch는 설치 없이 브라우저에서 바로 사용할 수 있는 웹 기반 AI UI 디자인 도구입니다. Google Labs 실험 프로젝트라 별도 다운로드나 앱 설치가 필요 없고, Google 계정만 있으면 누구나 접근 가능합니다. marcus-story.tistory
접근 및 시작 가이드
Stitch 시작은 Google Labs 대시보드에서 진행하세요.
- 1단계: 브라우저(Chrome 권장)에서 labs.google.com 접속 후 Google 계정으로 로그인합니다. media.fastcampus.co
- 2단계: Labs 홈 화면에서 "Stitch" 또는 "UI 디자인" 관련 카드 검색(또는 "Search Labs"에 "Stitch" 입력) 후 "Try it out" 또는 "Activate" 버튼 클릭. developers.googleblog
- 3단계: Stitch 대시보드 열리면 모드 선택(Standard: 기본 생성 / Experimental: 고급 기능) 후 프롬프트 입력창에서 "간단한 모바일 앱 홈화면" 등 설명 넣고 Enter. aisparkup
주요 시작 화면 구성
- 프롬프트 입력: 텍스트 설명, 이미지 업로드(스케치·참조 UI), 또는 URL 입력으로 UI 생성 시작.
- 생성 결과: 1~5개 변형 페이지가 캔버스에 나타나며, 마우스 드래그로 조합·재배치 가능. digitalbourgeois.tistory
- 우측 툴바: 채팅 수정(예: "네비게이션 바 추가"), 테마 변경(컬러·폰트), 내보내기(Figma/코드) 버튼. blog.gaerae
추가 팁 및 주의사항
- 첫 사용 시: 영어 프롬프트가 더 정확하니 "Clean mobile app dashboard with bottom nav"처럼 시작하세요. 한국어도 지원되지만 결과가 덜 일관적일 수 있습니다. marcus-story.tistory
- Labs 실험 특성: 가끔 대기열이 있거나 기능 변경될 수 있으니, Chrome 확장 없이 순수 웹 사용 권장. 무료지만 사용량 제한(하루 생성 횟수) 있을 수 있음. tilnote
- 연동 추천: 생성 직후 Figma "Paste from clipboard"로 가져와 세밀 편집하면 워크플로우 완성. moge