요즘은 버튼 몇 번만 누르면 화면이 만들어진다.
Figma, Canva, 각종 AI 디자인 도구들은 몇 초 만에 앱 화면, 랜딩페이지, 대시보드 시안을 만들어 준다.
그런데 이상한 일이 벌어진다.
화면은 있는데, 쓸 수가 없다.
디자인은 있는데 구조가 없고, 요소는 많은데 맥락이 없다.
이 문제를 해결하는 출발점이 바로 **와이어프레임(Wireframe)**이다.
와이어프레임이란 무엇인가?
와이어프레임은 디자인이 아니라 구조도다.
색도, 폰트도, 이미지도 없는 상태에서
“이 화면에 무엇이, 어떤 순서로, 어떤 관계로 배치되는가”를 정리한 설계도다.
건축으로 치면 인테리어가 아니라 평면도에 가깝다.
| 구분 | 의미 |
|---|---|
| UI 디자인 | 어떻게 보일 것인가 |
| 와이어프레임 | 무엇이 어디에 있어야 하는가 |
| UX | 사용자가 어떤 흐름으로 움직이는가 |
AI는 UI 디자인은 잘한다.
하지만 와이어프레임은 대신 만들어주지 않는다.
왜냐하면 와이어프레임은 판단의 결과이기 때문이다.
AI 시대에 와이어프레임이 더 중요해진 이유
AI 이전에는
“디자인을 잘하는 사람”이 중요했다.
AI 이후에는
“무엇을 만들지 정하는 사람”이 중요해졌다.
AI는 수백 개의 화면을 만들어 준다.
하지만 그중에서 무엇을 버리고 무엇을 남길지는 사람이 결정해야 한다.
이 결정이 바로 와이어프레임이다.
- 어떤 정보가 핵심인가?
- 사용자가 먼저 봐야 할 것은 무엇인가?
- 이 기능이 정말 필요한가?
이 질문에 답한 결과가 화면 구조로 나타난다.
Figma는 ‘디자인 툴’이 아니라 ‘사고 도구’다
많은 사람들이 Figma를 디자인 툴로만 쓴다.
하지만 Figma의 진짜 힘은 프레임과 레이아웃 구조에 있다.
Figma에서 와이어프레임을 만든다는 것은,
머릿속 사고 구조를 화면으로 외주 주는 일이다.
텍스트로 생각하면 복잡해지는 것도
프레임으로 나누면 구조가 보이기 시작한다.
Figma로 와이어프레임을 만들 때의 기본 규칙
1. 색을 쓰지 않는다
와이어프레임 단계에서는 흑백만 사용한다.
색은 판단을 흐린다. 구조만 보이게 해야 한다.
2. 콘텐츠 대신 박스를 쓴다
글 대신 Text, 이미지 대신 Image, 버튼 대신 Button
의미를 표시하는 자리표시자만 둔다.
3. 정렬이 곧 사고다
왼쪽 정렬, 중앙 정렬, 그리드
이것은 디자인이 아니라 정보의 위계다.
실제로 Figma에서 만드는 기본 와이어프레임 구조
예를 들어 ‘AI 메모 대시보드’를 만든다고 가정하면:
[Frame: Main]
├─ Top Bar
│ ├─ Logo
│ ├─ Search
│ └─ User Menu
├─ Sidebar
│ ├─ Notes
│ ├─ Projects
│ └─ Archive
└─ Content Area
├─ Header
├─ Card List
└─ Detail Panel이 구조만 만들어도,
“어떤 기능이 어디에 있어야 하는가”가 보이기 시작한다.
여기까지 오면, AI로 화면을 생성해도 흔들리지 않는다.
왜냐하면 기준이 있기 때문이다.
와이어프레임은 AI를 조종하는 도구다
많은 사람들이 AI에게
“예쁜 대시보드 만들어줘”라고 요청한다.
하지만 더 좋은 프롬프트는 이것이다.
“이 구조를 기준으로 UI를 만들어줘.”
와이어프레임이 있으면
AI는 도구가 되고,
없으면 AI는 장난감이 된다.
정리
AI 시대의 경쟁력은 속도가 아니라 구조다.
Figma로 와이어프레임을 만든다는 것은
화면을 그리는 것이 아니라 사고를 설계하는 것이다.
디자인이 아니라
판단의 시각화.
이것이 지금 우리가 Figma를 써야 하는 이유다.