[UX/UI 기초] 와이어프레임 작성하기

와이어프레임 작성하기 🧩

와이어프레임은
웹사이트나 서비스의 화면 구조를 설계하는 과정입니다.

정보 구조를 기반으로
각 화면에 어떤 요소가 들어가는지
배치와 구조를 설계합니다.

즉

화면 구성
레이아웃
요소 배치
사용자 흐름

을 설계하는 단계입니다.

와이어프레임은
UI 디자인 전에 반드시 진행하는 UX 설계 단계입니다.

주요 포인트 Top3

01. 와이어프레임이란 무엇인가 🧩

와이어프레임은
웹사이트 또는 서비스의 화면 구조를 설계하는 작업입니다.

디자인 요소보다
구조와 배치에 집중하는 것이 특징입니다.

예를 들어

헤더
메인 콘텐츠
사이드바
푸터

이러한 구조를 먼저 설계합니다.

즉 와이어프레임은
화면의 뼈대를 만드는 작업입니다.

또한 와이어프레임은
UI 디자인 이전 단계에서 진행합니다.

UX 설계 흐름

정보 구조 설계
→ 와이어프레임
→ UI 디자인
→ 프로토타입

이러한 흐름으로 진행됩니다.

02. 와이어프레임이 중요한 이유 🎯

와이어프레임을 먼저 설계하면

화면 구조를 빠르게 확인 가능
UX 흐름 확인 가능
개발 구조 파악 가능

이러한 장점이 있습니다.

특히 UX 설계에서는
구조 설계가 매우 중요합니다.

반대로 와이어프레임 없이
바로 디자인을 진행하면

구조가 계속 변경됨
UX 문제가 발생함
작업 시간이 증가함

이러한 문제가 발생할 수 있습니다.

👉 따라서 와이어프레임은 필수 단계입니다.

03. 와이어프레임 구성 요소 🧱

와이어프레임에는
보통 다음 요소가 포함됩니다.

헤더
네비게이션 메뉴
메인 콘텐츠 영역
버튼
이미지 영역
카드 영역
푸터

이러한 요소를
화면에 배치하는 작업입니다.

예시

헤더
 ├ 로고
 ├ 메뉴

메인 영역
 ├ 배너
 ├ 콘텐츠 카드

푸터
 ├ 회사 정보

👉 구조 중심으로 설계합니다.

04. 와이어프레임 예시 📐

예를 들어 메인 페이지 와이어프레임

이처럼
화면을 영역 단위로 설계합니다.

👉 디자인 요소는 최소화합니다.

05. 와이어프레임 종류 📚

와이어프레임은 크게 두 가지로 나뉩니다.

Low Fidelity 와이어프레임 ✏️

간단한 구조 설계

박스
텍스트
버튼 위치

빠르게 설계하는 단계입니다.

High Fidelity 와이어프레임 🎨

UI 디자인에 가까운 설계

실제 UI 구조
컴포넌트 배치
상세 레이아웃

디자인 전 단계입니다.

👉 보통 Low → High 순서로 진행합니다.

06. 와이어프레임 작성 도구 🛠

와이어프레임 작성 도구

Figma
Adobe XD
Sketch

가장 많이 사용하는 도구는
Figma 입니다.

👉 협업이 쉽고 사용이 간단합니다.

07. 와이어프레임 작성 순서 📋

와이어프레임 작성 순서

정보 구조 설계
화면 목록 정의
레이아웃 구성
요소 배치
UX 흐름 확인

이 순서로 진행합니다.

👉 UX 설계 흐름에 맞춰 진행합니다.

GOYO.’s Tip 💡

와이어프레임 단계에서는
디자인 요소를 최소화하는 것이 좋습니다.

색상이나 스타일보다
구조와 사용자 흐름에 집중해야 합니다.

또한 와이어프레임은
빠르게 여러 버전을 만드는 것이 좋습니다.

여러 구조를 비교하면서
더 나은 UX를 설계할 수 있습니다.

마무리 🎯

이번 글에서는
화면 구조를 설계하는
와이어프레임에 대해 알아봤습니다.

✔ 화면 구조 설계
✔ UX 흐름 설계
✔ 와이어프레임 종류
✔ 작성 순서

와이어프레임은
UI 디자인 전에 진행하는 중요한 단계입니다.

다음 단계에서는
UI 설계 원칙에 대해 알아보겠습니다.