<aside> 📎

참고 출처

1. UX Prototypes: Low Fidelity vs. High Fidelity — Nielsen Norman Group — 프로토타입의 충실도(fidelity)를 시각·인터랙션·콘텐츠 세 영역으로 구분하는 기준의 권위 있는 근거입니다.
2. What Are Wireframes? — Balsamiq — 와이어프레임의 정의와 역할, 제작 시기를 실무 관점에서 설명한 자료입니다.
3. The Guide to Wireframing — UXPin — 와이어프레임의 핵심 요소와 팀 커뮤니케이션 도구로서의 역할을 다룬 자료입니다. </aside>

앞선 UI 디자인 기초 레슨들에서 우리는 타이포그래피, 컬러, 레이아웃, 아이콘 같은 화면을 구성하는 시각 요소를 익혔습니다. 그런데 막상 새로운 화면을 만들려고 하면 "무엇을, 어디에 배치할 것인가"라는 더 근본적인 질문에 부딪힙니다. 색과 폰트를 정하기 전에 화면의 뼈대부터 잡아야 하기 때문입니다. 이번 레슨에서는 그 뼈대를 그리는 도구인 와이어프레임과, 완성도 단계를 나누는 Lo-Fi·Hi-Fi 개념을 익힙니다. 이 개념은 다음 레슨에서 AI로 와이어프레임을 생성하고 Figma에서 다듬는 작업의 토대가 됩니다.

와이어프레임과 Lo-Fi/Hi-Fi 프로토타입

• 와이어프레임은 화면을 예쁘게 그리는 작업이 아니라, 화면의 구조와 흐름을 설계하는 작업입니다.
• 건축에서 외관을 꾸미기 전에 평면도부터 그리듯, UI도 색과 폰트를 입히기 전에 무엇이 어디에 놓이는지를 먼저 정합니다.
• 이번 레슨의 목표는 와이어프레임의 역할을 이해하고, 프로젝트 단계에 맞는 완성도(fidelity)를 선택할 수 있게 되는 것입니다.

와이어프레임이란

• 와이어프레임(Wireframe)의 정의
  • 와이어프레임은 디지털 프로덕트의 뼈대를 시각화한 설계도입니다. 화면의 구조, 레이아웃, 주요 요소의 배치를 보여 주며, 세부 디자인 전에 전체적인 사용자 경험의 흐름과 구조를 검토할 수 있게 합니다.
  • 색상이나 폰트 같은 시각적 디테일보다 구조와 기능에 집중한다는 점이 핵심입니다.
• 와이어프레임의 주요 역할
  • 커뮤니케이션 도구: 기획자·디자이너·개발자가 같은 화면을 보며 동일한 비전을 공유합니다.
  • 검증과 비용 절감: 본격적인 디자인·개발 전에 레이아웃과 정보 구조를 점검해 나중에 발생할 수정 비용을 줄입니다.
  • 흐름 점검: 화면 간 이동과 인터랙션의 논리적 흐름을 미리 확인합니다.
• 와이어프레임의 핵심 요소
  • 레이아웃 구조: 헤더, 본문, 푸터 등 영역 구분
  • 콘텐츠 배치: 텍스트, 이미지, 버튼 등의 위치
  • 기능 요소: 내비게이션, 검색창, 입력 폼 등
  • 화면 간 이동 흐름: 한 화면에서 다음 화면으로의 연결
• 예를 들어 쇼핑 앱의 상품 목록 화면을 와이어프레임으로 그린다면, 어떤 색의 버튼인지가 아니라 "상단에 검색창, 그 아래 카테고리 탭, 본문에 2열 상품 그리드, 하단에 탭바"처럼 무엇이 어디에 놓이는지를 정의합니다.

충실도(Fidelity)의 이해

• 충실도(Fidelity)란
  • 충실도는 프로토타입이 실제 최종 제품과 얼마나 닮았는지를 나타내는 정도입니다. Nielsen Norman Group은 충실도를 한 덩어리가 아니라 세 영역으로 나누어 봅니다.
  • 시각적 충실도(Visual): 색·폰트·이미지 등 시각 요소가 실제 제품과 얼마나 가까운가
  • 기능적 충실도(Functionality/Interactivity): 클릭·전환 등 인터랙션이 실제처럼 동작하는가
  • 콘텐츠 충실도(Content): 실제 콘텐츠를 담았는가, 더미 텍스트(예: 'Lorem ipsum')를 썼는가
  • 하나의 프로토타입이 세 영역 모두에서 높을 필요는 없습니다. 검증하려는 목적에 따라 영역별로 충실도를 다르게 가져갑니다.
• Lo-Fi(Low Fidelity) 프로토타입
  • 낮은 충실도로 빠르게 제작하는 초기 단계의 와이어프레임입니다. 흑백 또는 회색조의 간단한 도형·선·텍스트로 화면 구조를 표현합니다.
  • 목적은 레이아웃과 정보 구조를 검증하고, 빠른 반복 수정으로 아이디어를 구체화하는 것입니다. 제작 시간이 짧아 초기 단계에서 여러 대안을 빠르게 비교할 수 있습니다.
  • 주의: Lo-Fi 단계에서는 색·폰트·이미지 같은 시각 디테일에 시간을 쓰지 않습니다. 너무 정교하게 만들면 빠른 수정이라는 장점이 사라집니다.
• Hi-Fi(High Fidelity) 프로토타입
  • 실제 제품과 유사한 수준의 충실도를 가진 프로토타입입니다. 실제 브랜드 컬러·타이포그래피·이미지를 적용하고, 인터랙션과 애니메이션까지 구현하기도 합니다.
  • 목적은 최종 제품의 모습을 구체적으로 확인하고, 사용자 테스트로 실제 사용성을 검증하며, 개발팀에 정확한 디자인 스펙을 전달하는 것입니다.
  • 주의: 제작에 시간과 노력이 많이 들므로, Lo-Fi 단계에서 충분히 검증한 후에 제작하는 것이 효율적입니다. 디자인 시스템과 컴포넌트를 활용하면 제작 속도를 높일 수 있습니다.

Lo-Fi에서 Hi-Fi로 발전시키기

• 단계적 발전 과정
  • 프로토타입은 일반적으로 세 단계를 거쳐 완성도를 높입니다.
  • Lo-Fi: 기본 구조와 레이아웃을 정의합니다.
  • Mid-Fi: 콘텐츠를 구체화하고 일부 스타일을 적용합니다.
  • Hi-Fi: 완성된 디자인 시스템을 적용하고 인터랙션을 구현합니다.
  • 각 단계마다 이해관계자의 피드백을 받아 점진적으로 완성도를 높이는 것이 핵심입니다.