와이어프레임 및 프로토타이핑의 역사

우리는 최근에 와이어프레임과 프로토타입의 세계와 그들이 설계 및 개발 프로세스를 위해 무엇을 할 수 있는지 상당히 조사하고 있습니다. 그러나 우리는 아직 이 분야의 역사, 특히 와이어프레임의 역사에 대해서는 다루지 않았습니다. 이 게시물에서 우리는 바로 그렇게 할 것입니다.

'와이어프레임'이라는 용어는 어디에서 유래했나요?

와이어프레임이라는 용어는 실제로 웹 디자인에서 사용되기 전에 사용되었습니다. 원래 와이어프레임은 CAD(Computer Aided Design)에서 3D 개체를 표시하는 데 사용되었습니다. 세부 사항이 필요 없이 자동차 디자인을 묘사하기 위해 제조에서 사용되는 스타일을 알아볼 수 있을 것이며, 그림이 와이어로 만들어진 것처럼 보이게 하기 때문에 '와이어프레임'이라는 용어를 추측할 수 있습니다.

웹 디자인에서 '와이어프레임'은 페이지 또는 앱 화면의 골격 프레임워크를 나타내는 시각적 가이드입니다. 그들은 일반적으로 인터페이스 요소와 탐색 시스템을 포함한 기능적 레이아웃을 묘사합니다. 와이어프레임은 일반적으로 타이포그래피 스타일, 색상 또는 그래픽이 부족한데, 이는 주요 초점이 내용의 기능, 동작 및 우선 순위에 있기 때문입니다. 이것은 CAD 역사의 직접적인 결과입니다. 즉, 화면이 어떻게 보이는지가 아니라 화면이 무엇을 하는지에 초점을 맞춥니다.

겸손한 와이어프레임의 역사는 복잡하며, 웹과 앱에서 사용하기 위해 누가 이 용어를 만들었는지에 대해서는 약간의 논쟁이 있습니다. 이런 종류의 일에서 흔히 볼 수 있듯이, 많은 당사자들이 거의 동시에 같은 용어를 만든 것 같습니다.

와이어프레임은 가장 일반적으로 충실한 연필 및 종이 스케치의 형태를 취하지만, 애니메이션 및 클릭 가능한 버전(프로토타입이 실제로 등장하는 곳)과 마찬가지로 충실도가 높은 버전도 그 자리를 차지합니다.

실제로 기능하는 와이어프레임은 개발자에게는 유용하지만 시각적 평가를 수행할 수 있는 수단은 적습니다. 자체 Indigo Studio와 같은 도구는 이러한 종류의 와이어프레임뿐만 아니라 훨씬 더 '설계된' 다양성을 지원하며 사용 사례 스토리보드도 완벽하게 지원합니다.

정적인 디자인에서 더 많은 그래픽(심지어 애니메이션)이 있는 와이어프레임으로의 이러한 변화는 성숙한 UX를 수용해야 할 필요성에 의해 주도되었으며, 이는 앱의 인기가 기하급수적으로 증가함에 따라 점점 더 중요해지고 있습니다. 사용자 경험에 대한 더 높은 존중의 와이어프레임 선택은 전우(brother-in-arms)인 프로토타입과 유사합니다.

The Prototype Timeline

타임라인 측면에서 프로토타입은 상대적으로 짧은 타임라인을 가지고 있습니다. 다음은 70년대 이후 이 분야가 이룬 발전에 대한 간략한 타임라인입니다.

1970– 윈스턴 로이스(Winston Royce)가 폭포 모델을 소개합니다.

1980– 순서도를 닮은 최초의 기본 프로토타입 등장

1985– 사용성 테스트를 위해 종이 프로토타이핑이 통합되었습니다.

1987- Microsoft PowerPoint – 이제 거친 와이어프레임을 만들기 위한 일반적인 도구

1988 – Boehm founds The Spiral Model

1990- 어도비 포토샵 – UX 디자이너들이 가장 좋아하는 도구

1991 – IBM introduces RAD (Rapid Application Development) software development

2001 – Agile Manifesto released

2005– 웹 기반(SaaS) 프로토타이핑의 영향력 확대

2008 – Lean UX movement is born

2010– 기술 발전으로 코딩 없이 충실도가 높은 SaaS 프로토타이핑이 가능해졌습니다.

 

그리고 그것은 우리를 최신 상태로 만듭니다. 프로토타이핑이 이룬 진전을 쉽게 볼 수 있으며 속도가 느려질 기미가 보이지 않습니다. 와이어프레임과 프로토타입은 모두 개발자의 작업을 더 쉽게 하기 위해 지속적으로 조정되고 발전하고 있습니다.

미래는 어떠한가?

요즘에는 와이어프레임이 더 상호 작용하고 프로토타입이 더 유용해짐에 따라 두 용어가 병합되고 있습니다. 훌륭한 UX 디자이너나 UI 개발자에게 물어보면 그들은 그들을 하나로 볼 것입니다. 다양한 유형의 와이어프레임과 프로토타입(lo-fi, hi-fi, 애니메이션, 스케치 등)이 항상 필요합니다. 물론 각각은 프로젝트 요구 사항에 따라 장단점이 있습니다.

디자인 도구도 분야가 성숙하고 변화함에 따라 반응해야 합니다. Indigo Studio의 최신 릴리스를 통해 사용자는 정적 와이어프레임, 클릭 가능한 프로토타입 및 그 사이의 모든 것을 만들 수 있습니다. Indigo Studio를 사용하면 코드를 한 줄도 작성하지 않고도 프로토타입을 만들 수 있습니다.

새로운 스토리보드 기능은 인터랙티브한 프로토타입 환경에서 특히 유용합니다. 사용자 스토리와 앱 스토리를 함께 통합하고 개발하는 데 도움이 됩니다. 앱뿐만 아니라 경험의 프로토타입을 만드는 데 정말 도움이 됩니다.

스토리보드는 드래그 앤 드롭할 수 있는 다양한 장면을 제공하여 실제 시나리오나 사용 사례를 묘사하는 고유한 스토리를 만들 수 있습니다. Indigo는 세트 화면만 와이어프레임하는 경우보다 앱이 훨씬 더 완전히 사용되는 방법을 개발하는 데 도움이 됩니다.

Indigo를 사용하면 프로토타입을 보여줄 때 앱이 무엇을 할 수 있는지 간단히 설명할 필요가 없습니다. 이제 전체 경험에 고객을 포함시켜 더 풍부한 참여도를 이끌어내고 궁극적으로 더 나은 최종 제품을 만들 수 있습니다.