1. 오늘 학습 키워드
- 와이어프레임(Wireframe)
- UX 설계
- 정보 구조(IA)
- 사용자 흐름(User Flow)
- MVP 설계
2. 오늘 학습 내용을 나만의 언어로 정리하기
오늘은 와이어프레임에 대해 학습했다.
와이어프레임은 단순히 화면을 그리는 것이 아니라
👉 사용자의 행동 흐름을 시각적으로 설계하는 과정이다.
이전에는 화면을 만들 때
- UI 디자인
- 예쁜 화면
에 집중했다.
하지만 와이어프레임은
👉 디자인이 아니라 구조에 집중하는 단계이다.
즉,
와이어프레임은 “어떻게 보일까?”가 아니라
“사용자가 어떻게 행동할까?”를 설계하는 도구다.
3. 와이어프레임의 역할
① 사용자 흐름 시각화
사용자가 서비스를 사용할 때
- 어디에서 시작해서
- 어떤 과정을 거쳐
- 어디로 이동하는지
를 화면 단위로 표현한다.
👉 WHY
눈에 보이지 않는 사용자 흐름을
👉 구체적으로 확인할 수 있다.
② 정보 구조 정리
- 어떤 정보가 필요한지
- 어떤 순서로 보여줄지
를 결정한다.
예 (유희왕 카드 서비스)
- 카드 검색
- 가격 정보
- 판매자 정보
- 구매 버튼
👉 WHY
정보가 많아질수록
👉 구조가 중요해진다.
③ 문제 발견
와이어프레임을 그리면서
- 불필요한 단계
- 복잡한 흐름
- 부족한 정보
를 발견할 수 있다.
👉 WHY
실제로 만들기 전에
👉 문제를 미리 발견할 수 있다.
4. 와이어프레임 구성 요소
📱 기본 화면 요소
- 헤더 (검색, 메뉴)
- 콘텐츠 영역
- 버튼 (CTA)
- 리스트 / 카드 UI
🔄 사용자 흐름 예시 (유희왕 카드)
1️⃣ 카드 검색
2️⃣ 카드 상세 페이지
3️⃣ 가격 비교 확인
4️⃣ 판매자 선택
5️⃣ 구매
👉 인사이트
사용자는
👉 “검색 → 비교 → 판단 → 구매”
이 흐름으로 움직인다.
5. 학습하며 겪었던 문제점 & 에러
문제 정의
처음에는 와이어프레임을 그릴 때
👉 화면 하나하나만 생각했다.
그래서 전체 흐름이 끊겼다.
내가 한 시도
- 먼저 User Flow를 정리
- 그 다음 화면 설계
해결 방법
👉 “이 화면 다음에 사용자는 어디로 갈까?”
이 질문을 계속하면서 설계했다.
새롭게 알게 된 점
와이어프레임은
- 화면 설계가 아니라
- 흐름 설계다.
그리고
👉 기능보다 “사용자 행동”이 먼저다.
6. 내일 학습할 것
- 저해상도 → 고해상도 와이어프레임 발전
- 실제 서비스 화면 구조 분석
- 사용자 테스트 (피드백 받기)
- MVP 기능 구체화
📎 오늘의 한 줄 인사이트
와이어프레임은 화면을 그리는 것이 아니라
사용자의 행동 흐름을 설계하는 과정이다.