IA / 와이어프레임이 뭔가요?
UXUI 디자인에서 이들의 역할과 해야 하는 이유들
UXUI 디자인을 경험하셨다면 혹은 관심 있다면 한 번쯤 AI, 와이어프레임이라는 이야기를 들어보신 적이 있을 실 것입니다. 또한 알고 계신 분들이 있다면 알기는 알겠는데 이 둘을 언제 어떻게 해야 하는지 고민을 해본 적도 있으실 것이라고 생각합니다.
그나마 와이어프레임을 들어본 적이 많지만, IA라는 단어가 생소하게 혹은 어렵게 들리시는 분들도 계실 것입니다. 이는 정보 구조 (Information Architecture - IA)라는 의미를 가지고 있습니다.
단순하게 설명하자면, 비즈니스가 원하는 지향점을 확실하게 소비자에게 제공하는 것을 생각하는 것을 중점으로 구조화입니다.
IA와 Wireframe은 언제 어떻게 사용되게 될까요?
정보구조(IA)와 와이어프레임은 UX/UI 디자인 프로세스의 여러 단계에서 사용됩니다. 각각의 사용 시기와 방법들에 대해 설명하도록 하겠습니다.
[정보구조 (Information Architecture - IA)]
1. 프로젝트 초기 단계
사용자 연구 및 요구사항 수집 이후(리서치 단계 이후)에 정보구조를 설계합니다. 이것은 사용자가 웹사이트 또는 앱에서 어떤 정보를 찾고 어떻게 상호작용할 것인지에 대한 이해를 바탕으로 이루어집니다.
2. 분석 단계
정보구조 설계는 사용자가 원하는 콘텐츠를 이해하고 접근하기 쉽도록 도와줍니다. 이를 통해 메뉴, 카테고리, 페이지 계층 구조 등을 결정합니다.
3. 피드백 및 반복
초기 정보구조를 기반으로 한 프로토타입을 만들고 사용자 피드백을 수집하여 정보구조를 수정, 개선합니다.
[와이어프레임]
1. 디자인 단계
정보구조가 결정된 후에는 와이어프레임을 작성하여 인터페이스의 구조와 레이아웃을 설계합니다. 이는 UI 디자이너 및 개발자가 디자인의 기본적인 틀을 이해하고 작업할 수 있도록 도와줍니다.
2. 디자인 시안에 대한 토론
와이어프레임을 사용하여 디자인에 대한 아이디어를 공유하고 토론하는 데 사용됩니다. 이는 디자인의 초기 단계에서 의사소통과 협업을 강화합니다.
3. 프로토타이핑
와이어프레임은 프로토타입의 초기 버전으로 사용됩니다. 이를 통해 사용자의 피드백을 수집하고 디자인을 개선하는데 활용됩니다.
요약하면, 정보구조는 프로젝트 초기에 사용자 요구사항을 분석하고 이를 바탕으로 웹사이트 또는 앱의 구조를 설계하는 데 사용되며, 와이어프레임은 이후에 디자인의 기본적인 틀을 정의하고 프로토타입을 만드는 데 사용됩니다. 이러한 두 가지 요소는 UX/UI 디자인 프로세스를 진행하는 데 중요한 부분을 차지하며, 함께 사용되어 최종적으로 사용자 중심의 제품을 개발하는 데 기여합니다
IA / Wire frame을 어떻게 사용되고 있을까요?
여러분은 인스타그램을 얼마나 사용하시나요? 초기 인스타에선 사진을 보고나 올리는 용도로 사용했다면, 이제는 쇼핑 및 정보 획득 용으로 사용하고 있지 않으신가요?
즉 초기에는 간단한 정보구조를 가졌더라면 지금은 광고, 쇼핑콘텐츠를 제공하는 구조도를 늘리는 정보구조를 추가했다는 이야기로 설명됩니다.
인스타그램은 초기 수익모델이 없었지만 페이스북 인수 이후 광고노출을 늘려 현재는 스토리와 피드, 탐색 탭은 물론 사용자 콘텐츠 사이사이에 광고 노출을 늘리고 있다. 여기에 쇼핑 콘텐츠를 제공해 이용자가 직접 플랫폼 내에서 쇼핑할 수 있도록 기능 개선에도 주력하고 있습니다. 이에 따라 AI도 변화하기 시작하면서 와이어프레임 기획이 추가되면서 계속 업그레이드를 지속적으로 하고 있습니다.
[인스타그램 AI (정보구조도)] 사진 출처:Alison Crawford
[인스타그램 Wireframe] 출처 : Megan Mae /Instagram Wire frame 정보 구조 (Information Architecture-IA)는 무엇일까요?
IA는 프로젝트의 지도 Guidance)의 역할을 수행하면서 콘텐츠를 구조화하는 과정입니다. IA 콘텐츠의 맥락, 사용자를 고려한 상호작용디자인 중 하나이며, 추상적인 아이디어를 구체화함으로써 가시화할 수 있는 일입니다.
IA는 정보 구조는 디지털 제품의 내비게이션과 구조화된 내용을 설계하는 프로세스입니다. 이것은 사용자가 제품 또는 웹사이트에서 정보를 쉽게 찾을 수 있도록 하는 것이 목표입니다. 정보 구조의 핵심 목표는 사용자 경험을 개선하고 사용자들이 제품을 사용하는 과정을 단순화하는 것입니다. 이 문서를 통해 협업 관련자와(PM, 디자이너, 개발자) 소통하므로 직관적인 표현이 중요합니다.
출처: : Lucia Wang / Main components of information architecture. IA은 어떻게 표현하면 좋을까요? Site map은 뭔가요?
UX/UI 디자인에서 사이트 맵(Site Map)은 웹사이트 또는 앱의 전체 구조를 시각적으로 표현한 것입니다. 이는 사용자가 사이트를 탐색할 때 어떻게 이동해야 하는지에 대한 개략적인 지도로서 작동합니다. 사이트 맵(Site Map)과 정보구조(Information Architecture, IA)는 UX/UI 디자인에서 밀접하게 관련되어 있습니다.
아마존 IA ] 출처 1: Aaiperim사이트 맵은 정보구조의 결과물 중 하나로써, 웹사이트 또는 앱의 전체적인 구조를 시각적으로 나타냅니다. 이는 사용자가 사이트를 탐색할 때 어떻게 이동해야 하는지에 대한 개략적인 지도로 작동합니다. 사이트 맵은 정보구조를 시각화하여 사용자가 콘텐츠를 발견하고 이동하는 데 도움을 줍니다.
따라서, 정보구조(IA)는 웹사이트 또는 앱의 구조를 설계하는 프로세스를 의미하고, 사이트 맵은 이 정보구조를 시각적으로 표현하는 도구입니다. 정보구조는 사용자의 경험을 개선하고 콘텐츠를 구조화하는 데 중요한 역할을 하며, 사이트 맵은 이러한 정보구조를 사용자와 팀 간에 시각적으로 전달하는 데 도움을 줍니다.
구조화된 정보 제공
사용자는 사이트 맵을 통해 웹사이트의 구조를 이해하고 특정 콘텐츠를 찾을 수 있습니다. 각 페이지의 계층 구조와 관계를 시각적으로 확인할 수 있습니다.
내비게이션 가이드
사이트 맵은 사용자에게 사이트 내에서 어디로 이동해야 하는지에 대한 안내를 제공합니다. 이것은 사용자가 원하는 정보를 빠르게 찾을 수 있도록 돕습니다.
사용자 경험 개선
잘 설계된 사이트 맵은 사용자의 탐색 경험을 개선할 수 있습니다. 사용자가 사이트를 탐색하면서 헤매거나 혼란스러워하는 것을 방지하고 직접적이고 효율적인 경로를 제시합니다.
출처:altexsoft 사이트 맵은 주로 트리 형식이며, 상위 수준의 페이지에서 시작하여 하위 수준의 페이지로 이어지는 관계를 보여줍니다. 각 페이지는 일반적으로 링크되어 있고, 페이지 간의 계층 구조와 관계를 명확하게 나타냅니다. 사이트 맵은 UX/UI 디자이너 및 개발자가 웹사이트 또는 앱의 구조를 계획하고 설계하는 데 중요한 도구입니다.
와이어프레임은 무엇일까요?
와이어프레임 (Wireframe): 와이어프레임은 디지털 제품의 인터페이스를 시각적으로 표현하는 것으로, 디자인의 기본적인 구조를 보여줍니다. 이것은 디자인의 디테일이나 시각적 요소보다는 주로 레이아웃과 기능을 중점적으로 다룹니다. 와이어프레임은 고객, 디자이너, 개발자 간에 아이디어를 공유하고 의사소통을 원활하게 하는 데 사용됩니다. 일반적으로 와이어프레임은 IA에서의 Sitemap을 시각적으로 제품에 가깝게 보여주는 역할을 하며 커뮤니케션의 효율을 돕습니다.
와이어프레dla로우 피델리티 (Low-fidelity)
와이어프레임은 시각적 디자인 요소가 제한되어 있으며, 주로 선, 박스, 텍스트 등으로 이루어진 간단한 구조로 표현됩니다.
레이아웃 및 구조
와이어프레임은 디자인의 주요 레이아웃 및 구조를 보여줍니다. 이것은 페이지 간의 전환, 요소의 배치 및 상호 작용을 명확히 합니다.
기능 및 상호 작용
사용자가 제품을 사용하는 방법을 이해하기 쉽도록 각 요소의 기능과 상호 작용을 설명합니다.
정보 구조와 와이어프레임은 제품 또는 웹사이트의 디자인 및 사용자 경험을 개선하는 데 중요한 역할을 합니다. 이들은 디자이너, 개발자 및 이해 관계자들 간의 의사소통을 원활하게 하고 제품의 디자인 과정을 효율적으로 관리하는 데 도움이 됩니다.
어려워 보이는 AI, 와이어프레임은 프로젝트의 방향성을 거시적으로 보여주는 파트라고 숙지하시면 편하게 프로젝트에 대입하실 수 있습니다. UXUI 디자인에서 리서치를 마치면 결론 도출을 하고 구조화 작업을 진행하게 되면서 어려움을 겪게 되시는 상황들이 많습니다.
이때에 도움이 되시길 바라면서 글을 마칩니다.
감사합니다.
[참고자료]
노컷뉴스, 김민수기자, 인스타, 유튜브 따돌렸다…"작년 매출 24조 원"
브런치, 뉴비 PM 기획노트, "IA, 와이어프레임을 통해 서비스 의도를 분석하는 방법"
피그마, Aaiperim , Information architecture(IA) of Amazon website
Medium, 김민석, '[번역] 웹디자인을 위한 IA (Information Architecture) 만들기'
altrxsoft, How to Create Information Architecture for Web Design
medium, Lucia Wang , Why IA Matters for UX — A Brief History of Information Architecture
Medium, Instagram, the principles of Information Architecture (IA) used to support user experience and strengthen relationships
westmj.log, Minji Seo, W3 D1 - 원티드의 비즈니스모델 (BMC)
[참고 링크 - 연습해 보세요]
인스타그램 Wireframe 출처 : Megan Mae / Instagram Wire frame
[글쓴이 소개]
현재 기획자이자 문제해결 디자이너입니다. 문제를 읽고 방향을 잡고 문제해결을 목적으로 눈으로 보이는 것들을 구현하는 것에 재미를 느끼고 있습니다. 좋은 기회로 UXUI 인터렉션 디자인 포지션으로 독일에서 일한 경력과 대학 및 기업을 대상으로 UX/ UI을 교육을 하고 있습니다. 현재 알고 있는 것들을 저만의 관점으로 풀어 기록하고 공유하려 합니다.
