웹사이트를 만들거나 기획안을 설명할 때, 완성된 코딩이 없어도 UI 구조를 보여주는 것만으로도 큰 도움이 됩니다.
그럴 때 필요한 것이 바로 웹 목업(Mockup)입니다.
디자인 툴을 몰라도 사용할 수 있는 Figma(피그마)는 웹 기반으로 간편하고, 무료로 시작할 수 있어 비디자이너도 손쉽게 목업 작업을 할 수 있는 도구로 각광받고 있습니다.
이번 글에서는 피그마로 웹 목업을 만드는 전체 흐름을 완전 초보자 기준으로 실전 중심으로 설명드릴게요.
UI/UX 기획자, 기초 디자이너, 기획서 작성자에게 매우 유용한 가이드입니다.
✅ 피그마란 무엇인가요?
피그마(Figma)는 웹 기반의 디자인 툴로, 설치 없이 브라우저만 있으면 바로 사용 가능하며, 팀원과의 협업, 실시간 피드백, 디자인 시스템 구축이 가능한 장점이 있습니다.
✅ 주요 특징
- 클라우드 기반
- 무료 플랜 존재
- 플러그인/템플릿 풍부
- UI/UX 디자인에 특화
✅ 피그마로 웹 목업 만들기 전 준비사항
- Figma 계정 생성
- https://www.figma.com
- 구글 계정으로 로그인 가능
- 프로젝트 생성
- [New File] 클릭 → 새 디자인 캔버스 열기
- 템플릿 확인 (선택 사항)
- Figma Community에서 웹 UI Kit 검색
- 템플릿을 활용하면 속도 5배 빨라짐
✅ 웹 목업 구성 요소는 무엇으로 이루어질까?
- 헤더(Header): 로고, 메뉴, 검색창 등
- 히어로 영역(Hero Section): 메인 이미지, 제목, CTA 버튼
- 본문(Content): 카드, 텍스트, 이미지, 정보 등
- 푸터(Footer): 하단 링크, 연락처, 저작권 정보
📌 실제로 피그마로 작업할 땐 이 순서를 위에서 아래로 쌓듯 만들면 됩니다.
✅ 웹 목업 실전 제작 절차 (기초 버전)
🔹 STEP 1. 프레임(Frame) 만들기
- 도구 모음에서 ‘Frame(F)’ 선택
- 사이즈는 웹 기본 규격인 1440 x 1024 픽셀 사용
- 프레임 이름은 “Home Page” 등으로 지정
🔹 STEP 2. 헤더 섹션 구성
- 사각형(Rectangle) 도구로 상단 바 생성
- 텍스트 도구(T)로 로고, 메뉴 텍스트 입력
- 정렬 기능으로 균형 맞추기
📌 팁: 메뉴는 Home | About | Services | Contact 등으로 구성
🔹 STEP 3. 히어로 이미지 영역 만들기
- 대형 사각형 → 배경 이미지 설정 (Fill > Image)
- 위에 제목, 부제목, 버튼 배치
- 버튼은 사각형 + 텍스트 그룹으로 제작
🔹 STEP 4. 콘텐츠 카드 추가
- 카드 형태의 박스를 반복해서 배열
- 각 카드 안에 이미지, 제목, 설명, 버튼 구성
- Auto Layout 기능 사용하면 정렬 쉽게 가능
🔹 STEP 5. 푸터 만들기
- 전체 프레임 하단에 어두운 사각형
- 작은 글씨로 ‘© 2025 Company. All rights reserved.’
- 링크나 SNS 아이콘도 넣으면 완성도 상승
🔹 STEP 6. 플러그인 활용 (선택)
- ‘Icons8’, ‘Unsplash’, ‘Lorem Ipsum’ 플러그인 설치
- 바로 아이콘, 이미지, 더미 텍스트 삽입 가능
📌 플러그인은 오른쪽 메뉴 > 플러그인 > 커뮤니티에서 설치
✅ 완성한 목업 공유하는 방법
- 링크 복사: 상단 [Share] 버튼 → 보기 권한 선택
- PDF 저장: 파일 > Export > PDF 선택
- 이미지 내보내기: 각 프레임 선택 → PNG/JPG 저장
✅ 초보자가 흔히 하는 실수
| 실수 | 해결 방법 |
| 텍스트 정렬 불균형 | 정렬 도구 + Auto Layout 적극 사용 |
| 전체 프레임 크기 부족 | 처음부터 1440px 이상의 큰 프레임 설정 |
| 이미지 깨짐 | 고해상도 Unsplash 이미지 사용 |
| 컴포넌트 없이 복사 반복 | 버튼, 카드 등은 컴포넌트로 만들기 |
✅ 실전 팁: 비디자이너를 위한 핵심 전략
- Auto Layout만 잘 써도 레벨업 가능
- Figma Community에서 무료 템플릿 활용
- 폰트는 구글 폰트 위주로 깔끔하게
- 그리드(Grid) 기능을 켜서 정렬 시각화
- 마우스로 디자인하는 대신 수치 입력을 습관화
✅ 결론
Figma는 복잡한 툴이 아니라, 웹사이트의 구조를 빠르게 목업하고 공유하는 데 최적화된 도구입니다.
특히 코드 없이 기획 아이디어를 시각적으로 보여줘야 할 때 Figma로 만든 웹 목업은 협업의 강력한 무기가 될 수 있습니다.
처음엔 조금 낯설더라도, 오늘 소개한 단계만 차근차근 따라 해보면 단 1~2시간 안에 여러분만의 웹 구조 목업을 완성하실 수 있습니다.
'셍띠네' 카테고리의 다른 글
| 아이폰 배터리 성능 확인하는 법과 교체 시기, 꼭 알아야 할 기준 정리 (0) | 2025.04.09 |
|---|---|
| 에자일 문화란? 채용 공고에서 말하는 ‘애자일 조직’의 진짜 의미 정리 (1) | 2025.04.08 |
| 부동산 등기부등본 무료 열람 가능한 방법, 최신 절차 정리 (2) | 2025.04.08 |
| 해외 직구 상품 반품하려면? 통관 이후 반품 절차 총정리 (0) | 2025.04.08 |
| 인터넷 속도 느려졌을 때, 뭐부터 확인해야 할까? 컴퓨터·모바일 점검 순서 (1) | 2025.04.08 |
