와이어프레임(Wireframe)이란?
와이어프레임은 웹사이트, 앱 또는 기타 디지털 제품의 사용자 인터페이스(UI)를 시각화하는 데 사용되는 도구입니다. 와이어프레임은 일반적으로 간단한 선, 도형 및 텍스트로 구성되어 있으며 색상, 글꼴 및 기타 스타일 요소가 포함되지 않습니다. 이는 디자이너가 사용자 흐름과 인터페이스의 구조에 집중할 수 있도록 하기 위한 것입니다.
와이어프레임은 제품 개발 프로세스의 초기 단계에서 사용되는 것이 일반적입니다. 이를 통해 디자이너는 아이디어를 테스트하고 사용자의 피드백을 수집할 수 있습니다. 와이어프레임은 또한 제품의 개발 및 구현 비용을 절감하는 데 도움이 될 수 있습니다.
와이어프레임에는 여러 가지 유형이 있습니다. 가장 일반적인 유형은 다음과 같습니다.
- 스케치 와이어프레임: 가장 기본적인 유형의 와이어프레임입니다. 일반적으로 종이에 손으로 그려집니다.
- 로우-피델리티 와이어프레임: 스케치 와이어프레임보다 더 세부적인 와이어프레임입니다. 일반적으로 컴퓨터 프로그램으로 만들어집니다.
- 하이-피델리티 와이어프레임: 로우-피델리티 와이어프레임보다 더 정교한 와이어프레임입니다. 일반적으로 색상, 글꼴 및 기타 스타일 요소를 포함합니다.
와이어프레임은 다양한 도구를 사용하여 만들 수 있습니다. 가장 일반적인 도구는 다음과 같습니다.
- 마이크로소프트 워드
- 마이크로소프트 파워포인트
- Adobe XD
- Sketch
- Figma
사이트맵에서 와이어프레임으로
와이어프레임 작성 전 사이트맵을 작성해보세요. 사이트맵은 웹사이트의 구조와 페이지 목록을 정리하여 만든 파일입니다. (예: 메인페이지, 회사소개, 제품 및 서비스, 뉴스 및 이벤트, 연락처, 채용정보, 고객센터, 블로그 등..)
만들고자 하는 웹사이트에 어떤 페이지로 구성할지 결정했다면 위의 이미지와 같은 방법으로 각 페이지마다 와이어프레임을 만들어보세요.
저는 와이어프레임을 공책에 작성하는것을 좋아합니다. 컴퓨터로 와이어프레임을 작성하고 싶다면 피그마 사용을 추천합니다.
- Figma : 피그마는 웹 기반의 협업 디자인 툴입니다. 웹사이트, 앱, 프로토타입, UI, UX 등 다양한 디자인을 제작할 수 있습니다. 피그마는 별도의 설치 없이 웹 브라우저만 있으면 어디서나 사용할 수 있습니다. 그리고 여러 사용자가 동시에 같은 파일을 작업할 수 있으며, 실시간으로 변경 사항을 공유할 수 있습니다.
와이어프레임은 제품 개발 프로세스의 중요한 부분입니다. 이를 통해 디자이너는 사용자의 요구 사항을 충족시키고 성공적인 제품을 만드는 데 도움이 되는 인터페이스를 만들 수 있습니다.
