00 개요
- 현재 외주업체랑 UI/UX에 관하여 협업중인데, IA와 Wireframe에 대한 개념 정리
- IA 및 Wireframe은 성공적인 UI/UX 설계를 위해 필수적
- 프로젝트 초기에 적절한 IA와 와이어프레임 작업이 진행되면 사용자가 원하는 정보를 쉽게 찾을 수 있고, 명확한 인터페이스로 높은 사용자 만족도를 이끌어낼 수 있
01 IA 및 Wireframe 개념 정리
1. IA 정의
- 정보 구조 (Information Architecture, IA)
- IA란, 웹사이트나 앱의 콘텐츠와 기능을 체계적으로 조직화하여 사용자들이 정보에 쉽게 접근 가능하도록 만드는 것
- IA는 사용자 경험의 핵심 요소로, 사용자가 정보를 어떻게 찾고 탐색하는지에 관한 연구를 바탕으로 설계됨
- IA는 메뉴, 네비게이션, 콘텐츠의 우선순위 등을 정의하여, 사용자들이 논리적이고 직관적으로 목표에 도달할 수 있도록 도움
- IA는 Site Map으로 시각화되서 표현됨 (하단 "02 사용되는 시기 및 방법 > 1. IA 사용 시기 및 방법 > 1) 사이트 맵 (Site Map)이란" 참조)
1. Wireframe 정의
- 와이어프레임 (Wireframe)
- 와이어프레임은 웹사이트나 앱의 레이아웃을 시각적으로 표현한 초기 설계 도구로, 디자인의 기본적인 구조를 보여줌
- 주로 페이지의 구조, 요소의 위치, 사용자 인터페이스 (UI) 구성 요소의 관계 등을 간략하게 스케치한 형태로, 세부 디자인 없이도 기본적인 흐름과 기능을 파악할 수 있음
- 와이어프레임은 개발자와 디자이너가 프로젝트 초기에 UI/UX를 협의하고 테스트하는 데 유용하며, 이후의 비주얼 디자인 및 프로토타입 작업에 중요한 참고 자료로 활용됨
1) 로우 피델리티 (low-fidelity):
- 시각적 디자인 요소가 제한되어 있음, 주로 선, 박스, 텍스트 등으로 이루어진 간단한 구조
2) 레이아웃 및 구조:
- 디자인의 주요 레이아웃 및 구조를 보여줌, 페이지 간의 전환, 요소의 배치 및 상호 작용을 명확히 함
3) 기능 및 상호 작용:
- 사용자가 제품을 사용하는 방법을 이해하기 쉽도록 각 요소의 기능과 상호 작용을 설명함
02 사용되는 시기 및 방법
- IA 및 Wireframe은 UX/UI 디자인 프로세스의 여러 단계에서 사용됨
- 요약:
- IA(정보 구조)는 프로젝트 초기에 사용자 요구사항을 분석하고 이를 바탕으로 웹사이트/앱의 구조를 설계하는 데 사용됨
- Wireframe(와이어프레임)은 이후에 디자인의 기본적인 틀을 정의하고 프로토타입을 만드는 데 사용됨
1. IA 사용 시기 및 방법
| 단계 | 방법 |
| 프로젝트 초기 | 사용자 연구 및 요구사항 수집 이후(research 단계 이후)에 IA 설계 시작 사용자가 웹사이트/앱에서 어떤 정보를 찾고 어떻게 상호작용할 것인지에 대한 이해를 바탕으로 이루어짐 |
| 분석 | IA 설계는 사용자가 원하는 콘텐츠를 이해하고 접근하기 쉽도록 도와줌 이를 통해 메뉴, 카테고리, 페이지 계층 구조 등을 결정함 |
| 피드백 및 반복 | 초기 IA를 기반으로 한 프로토타입을 만들고 사용자 피드백을 수집하여 IA를 수정, 개선 |
- 인스타그램 예시 (정보 구조 (IA)를 바탕으로 표현된 Site map):
1) 사이트 맵 (Site Map)이란
- UX/UI 디자인에서 사이트 맵은 IA (정보 구조)의 결과물 중 하나
- 웹사이트/앱의 전체 구조를 시각적으로 표현한 것
- 사용자가 사이트 탐색 시 어떻게 이동해야 하는지에 대한 대략적인 지도
- 정보 구조 (Information Architecture, IA)를 시각화하여 사용자가 콘텐츠를 발견하고 이동하는 데 도움을 줌
- 즉, 정보 구조(IA)는 웹사이트/앱의 구조를 설계하는 프로세스(과정)을 의미, 사이트 맵은 정보 구조를 시각적으로 표현하는 도구
- 아래와 같이 주로 트리 형식
- 상위 수준의 페이지에서 시작하여 하위 수준의 페이지로 이어지는 관계를 보여줌
- 각 페이지는 일반적으로 링크되어 있고 페이지 간의 계층 구조 및 관계를 명확하게 나타냄
2. Wireframe 사용 시기 및 방법
| 단계 | 방법 |
| 디자인 단계 | IA가 결정된 후에는 Wireframe을 작성하여 인터페이스의 구조과 레이아웃을 설계 UI 디자이너 및 개발자가 디자인의 기본적인 틀을 이해하고 작업할 수 있도록 도와줌 |
| 디자인 시안에 대한 토론 | Wireframe을 사용하여 디자인에 대한 아이디어를 공유하고 토론하는 데 사용됨 디자인의 초기 단계에서 의사소통과 협업을 강화함 |
| 프로토타이핑 | Wireframe은 프로토타입의 초기 버전으로 사용됨 사용자의 피드백을 수집하고 디자인을 개선하는 데 활용됨 |
- 인스타그램 예시:
