제품 개발의 와이어프레임에 대한 종합 가이드
게시 됨: 2018-04-13웹 개발 프로젝트는 집을 짓는 것과 많은 공통점이 있습니다. 집을 지을 때 자연스럽게 이 일을 할 수 있는 최고의 사람을 선택하게 됩니다. 경험과 심오한 지식을 갖춘 사람을 원하고 건축업자가 정해진 시간과 승인된 예산 내에서 작업을 완료할 수 있는 올바른 프로세스를 갖추고 있는지 확인하고 싶을 것입니다. 무엇을 확신합니까? 청사진 맞죠? 글쎄요, 웹 개발 분야에서는 와이어프레이밍입니다.
목차
와이어프레임이란 무엇입니까?
간단히 말해서, 와이어프레임은 웹페이지의 삽화입니다. 와이어프레임은 중요한 페이지에서 어떤 종류의 인터페이스 요소가 위치를 찾을 것인지 명확히 하는 웹 페이지 레이아웃입니다. 인터랙션 디자인 프로세스의 중요한 부분입니다.
와이어프레이밍의 주요 목표는 프로젝트의 초기 단계에서 페이지를 시각적으로 이해하여 모든 이해 관계자와 프로젝트 팀 구성원의 승인을 얻는 것입니다. 또한 와이어프레임은 사이트에 통합된 용어와 구조가 사용자 기대를 충족하는지 확인하기 위해 전역 및 보조 탐색을 만드는 데 사용됩니다.
와이어프레임, 모형 및 프로토타입의 차이점은 무엇입니까?
와이어프레임
와이어프레임은 사이트의 골격이나 기본 구조와 같습니다. 와이어프레임은 기능에 더 관심이 있습니다. 예를 들어 사이트 또는 앱의 와이어프레임은 탐색, 기본 버튼, 열 등을 묘사합니다. 이는 건축 설계의 청사진과 동일시될 수 있습니다.
모형
반면에 목업은 제품을 보다 사실적으로 표현한 것입니다. 와이어프레임 모형과 달리 세부사항에 중점을 둡니다. 색상, 글꼴, 아이콘, 차트, 이미지와 같은 모든 측면이 고려됩니다.
원기
프로토타입은 프로젝트에 대한 충실도가 높은 시각적 표현을 제공합니다. 프로토타입은 목업에 추가할 가치가 있는 것으로 생각할 수 있습니다. 프로토타입은 이름에서 알 수 있듯이 제품이 어떻게 생겼는지 정확하게 보여줍니다. 프로토타이핑에는 와이어프레임을 함께 연결하고, 버튼을 해당 방문 페이지에 연결하고, 드롭다운 메뉴를 레이어링하는 작업이 포함됩니다.
더 단순화하기 위해 이들은 스케치(가장 단순한 디자인의 기본 단계인 손으로 그리기)에서 시작하여 프로토타입 생성으로 끝나는 제품 디자인 프로세스의 모든 단계입니다.
모바일 앱용 와이어프레이밍
모바일 앱용 와이어프레이밍은 웹사이트용 와이어프레이밍과 유사한 이점을 제공합니다. 앱의 모양과 작동 방식에 대한 명확한 아이디어를 제공합니다. 아무도 막연한 아이디어를 사는 것을 좋아하지 않습니다. 와이어프레이밍은 프로젝트를 전환하는 동안 매우 간편합니다. 또한 초기 단계에서 변경할 수 있으므로 제품 개발의 전체 비용을 절감할 수 있습니다.
모바일 앱용 와이어프레이밍 시 염두에 두어야 할 한 가지 중요한 사항은 제품을 출시할 플랫폼(iOS 또는 Android)을 고려하는 것입니다. 
와이어프레임 작업 시 염두에 두어야 할 중요한 사항
와이어프레임을 만드는 동안 와이어프레임은 사이트의 주요 콘텐츠 및 탐색 요소가 페이지에서 표시될 위치에 대한 안내일 뿐입니다. 일러스트레이션의 목적은 시각적 디자인을 묘사하는 것이 아니므로 항상 단순하게 유지하는 것이 좋습니다. 시간과 노력을 절약할 수 있습니다. 다음은 와이어프레이밍 중에 유용할 몇 가지 팁입니다.
- 단순하고 충실도가 낮은 와이어프레임으로 시작하십시오.
- 색상 사용을 피하십시오. 차이를 묘사하기 위해 회색조를 고수하고 싶을 수도 있습니다.
- 이미지를 사용할 필요가 없습니다. 일반적인 아이디어를 제공하기 위해 이미지 대신 기하학적 모양을 사용하십시오.
- 일반 글꼴을 사용하고 와이어프레이밍하는 동안 전체 글꼴을 동일하게 유지합니다. 타이포그래피는 프로세스의 필수적인 부분이 아닙니다.
- 모든 페이지를 와이어프레임할 필요가 없습니다.
와이어프레임은 문제를 생각하고 인터페이스를 지정하는 절차입니다. 다른 형태의 개발 프로세스와 마찬가지로 와이어프레이밍도 제대로 수행되지 않으면 위험할 수 있습니다.
와이어프레임에 예시된 필수 요소
와이어프레이밍의 요소는 구축하려는 사이트 유형, 무엇보다도 클라이언트 요구 사항에 따라 크게 달라집니다. 그러나 머리글, 바닥글, 로고, 검색 필드, 탐색 시스템, 본문 콘텐츠, 공유 버튼, 이동 경로와 같이 표준 와이어프레이밍 요소로 자주 통합되는 특정 요소가 있습니다.
와이어프레임의 유형
와이어프레임은 포함하는 세부 사항의 양에 따라 생산 프로세스(종이 스케치와 컴퓨터로 그린 이미지)가 다를 수 있습니다. 와이어프레임 생산을 나타내는 데 널리 사용되는 두 가지 용어는 저충실도 와이어프레임과 고충실도 와이어프레임입니다.
- 저충실도 와이어프레임 – 쉽고 빠르게 개발할 수 있습니다. 그들은 팀 의사 소통을 촉진하는 데 도움이됩니다. 종종 저충실도 와이어프레임에는 단순한 이미지, lorem ipsum 텍스트가 필러로 포함됩니다.
- 고충실도 와이어프레임 – 향상된 세부 수준으로 인해 문서화에 더 적합합니다. 이 와이어프레임은 페이지의 모든 작은 항목에 대한 정보를 보유합니다.
와이어프레임을 만드는 이유는 무엇입니까?
다음은 와이어프레임의 몇 가지 중요한 이점입니다.
- 와이어프레임은 웹 또는 앱 개발 중 커뮤니케이션에서 중추적인 역할을 합니다. 모든 이해 관계자에게 기회를 제공합니다. 클라이언트, 개발자, 디자이너는 웹사이트 구조를 시각화하고 명확한 그림을 얻을 수 있습니다.
- 와이어프레임으로 아이디어를 전달하고 전달하는 것이 더 쉽습니다.
- 와이어프레임은 프로젝트에 명확성을 더할 뿐만 아니라 모든 상호 작용 및 레이아웃 요구 사항을 처리할 수 있게 해줍니다.
- 와이어프레이밍은 콘텐츠 개발 디자인을 친숙하게 만듭니다.
- 와이어프레임은 클라이언트가 요구 사항에 대해 생각하게 하고 프로젝트 목표와 주요 초점을 정의하는 데 도움이 됩니다.
- 초기 단계에서 제품에 대한 피드백을 수집하는 데 도움이 됩니다.
- 와이어프레임을 사용하면 디자이너는 웹사이트의 여러 섹션에 대한 레이아웃을 생성할 수 있으므로 보다 유동적인 크리에이티브 프로세스가 가능합니다.
와이어프레임 프로세스의 중요한 단계
와이어프레임을 구성하는 동안 따라야 할 몇 가지 중요한 단계는 다음과 같습니다.
- 연구 – 다른 디자이너들이 어떻게 와이어프레임을 만들고 있는지에 대한 약간의 아이디어는 영감을 찾는 데 많은 도움이 될 것입니다.
- 도구 선택 – 와이어프레임을 생성하는 데 사용할 수 있는 여러 도구가 있습니다. 편의에 따라 하나를 선택할 수 있습니다.
- 그리드 설정 – 무료로 다운로드할 수 있는 여러 그리드 템플릿이 있으며 Telerik, UI 그리드 등을 사용하여 자신만의 그리드 템플릿을 사용자 정의할 수도 있습니다.
- 레이아웃 결정 – 상자를 놓고, 가능한 경우 콘텐츠를 추가하고, 불일치가 있는 경우 이 단계에서 클라이언트를 참여시켜 의사소통을 합니다.
- 프로토타입으로 변환합니다.
와이어프레임을 만드는 몇 가지 인기 있는 도구
어떤 종류의 와이어프레이밍을 목표로 하고 있든, 저충실도 또는 고충실도에 상관없이 와이어프레이밍 도구를 사용하면 보다 전문적으로 보이고 우선 순위가 높고 조직적인 방식으로 작업할 수 있습니다. 다음은 효과적으로 사용할 수 있는 7가지 와이어프레이밍 도구 목록입니다.
- 발사믹
- 모의 흐름
- 인비슨
- 와이어프레임.cc
- 핫글루
- 피도코
- 액셔
와이어프레임은 제품 개발자가 갖추어야 할 필수 기술 중 하나입니다. 성공적인 제품 관리자가 되려면 제품 디자인의 기본을 이해하기 위한 기초가 되는 와이어프레임 및 기타 제품 개발 기술에 대한 전체적인 접근 방식을 보유해야 합니다. 이것은 확실히 제품 개발 분야에서 성공적인 경력을 쌓기 위한 관문이 될 것입니다.
세계 최고의 대학에서 온라인으로 제품 관리 과정 을 공부 하십시오. 석사, 이그 제 큐 티브 PGP 또는 고급 인증 프로그램을 획득하여 경력을 빠르게 추적하십시오.
