이것을 상상해보십시오 : 당신은 앱에 대한 멋진 아이디어를 가지고 있습니다. 당신은 당신의 마음 속에서 명확하게 볼 수 있습니다 - 어떻게 작동하는지, 사용자가 그것을 좋아할 방법, 그것이 실제 문제를 어떻게 해결하는지. 그러나 개발자에게 설명하려고 할 때, 무언가가 번역에서 손실됩니다. 당신의 머리 속에 명확하게 보인 것은 설명하려고 할 때 혼란스러워집니다.
이것은 거의 모든 기업가에게 발생하며, 이것이 와이어 프레임이 존재하는 이유입니다. 마리티노에서 우리는 성공한 앱과 실패한 앱의 차이가 종종 적절한 와이어 프레임으로 시작했는지 여부에 달려 있음을 배웠습니다.
와이어 프레임은 실제로 무엇입니까?
기술 용어를 잊어 버리십시오. 와이어 프레임은 아무도 색상, 글꼴 또는 화려한 그래픽에 대해 걱정하기 전에 앱의 대략적인 스케치입니다. 집의 평면도를 생각해보십시오 - 각 방이 어디로 가는지, 어떻게 연결되는지, 사람들이 공간을 통해 어떻게 움직이는지 보여줍니다.
디지털 세계에서 와이어 프레임은 각 화면에서 모든 버튼, 메뉴 및 콘텐츠의 위치를 보여줍니다. 그들은 의도적으로 기본입니다 - 회색 상자와 단순 텍스트 만. 목표는 아름다운 것을 만드는 것이 아니라 작동하는 것을 만드는 것입니다.
와이어 프레임이 해결하는 숨겨진 문제
대부분의 사람들은 와이어 프레임이 단순한 계획이라고 생각하지만, 사실 그들은 문제 해결 도구입니다. 다음은 너무 늦기 전에 그들이 포착하는 것입니다.
네비게이션 악몽 : 귀하의 앱이 귀하에게 완벽한 의미가 있을 수 있지만 낯선 사람이 사용 방법을 이해할 수 있습니까? 와이어 프레임은 네비게이션이 혼란스럽거나 사용자가 갇힐 수있는 경우를 나타냅니다.
누락 된 부분 : 프로젝트 중간에 중요한 것을 잊었음을 깨닫게되었습니까? 와이어 프레임은 사용자 여정의 모든 단계를 고려하도록 강제합니다.
통신 격차 : 디자이너, 개발자 및 이해 관계자가 동일한 프로젝트에 대해 다른 정신 이미지를 가지고 있으면 상황이 빠르게 나빠집니다. 와이어 프레임은 모든 사람에게 동일한 참조 지점을 제공합니다.
기능 과부하 : 간단한 앱이 복잡해질 때까지 “하나만 더 기능을 추가”하기 쉽습니다. 와이어 프레임은 너무 많은 것을하려고 할 때를 보는 데 도움이됩니다.
왜 대부분의 팀이이 단계를 건너 뛰는가 (그리고 왜 그들이 그래야하는 이유)
우리는 그것을 얻습니다. 와이어 프레임은 인상적으로 보이지 않습니다. 투자자에게 보여주고 싶은 것이 아니거나 소셜 미디어에서 흥분하는 것입니다. 지루하고, 완성되지 않으며, 기본 것처럼 보입니다.
하지만 그것이 그들의 힘입니다. 지루함으로써, 그들은 당신을 정말로 중요한 것에 집중하도록 강제합니다 - 당신의 앱이 당신이 풀기로 설정한 문제를 실제로 해결하는지 여부입니다.
팀은 와이어 프레임을 건너 뜁니다 “실제”처럼 보이는 것을 보고 싶어하기 때문입니다. 그러나 와이어 프레임없이 빌드하는 것은 레시피없이 요리하는 것과 같습니다. 당신이 운이 좋을 수도 있지만 아마도 많은 재료를 낭비 할 것입니다.
완전한 와이어 프레이밍 프로세스 : 실제로 발생하는 것
우리의 와이어 프레이밍 프로세스는 단순히 화면에 상자를 그리는 것이 아닙니다. 문제를 이해하고 해결하는 체계적인 접근 방식입니다.
발견 단계 : “왜”를 이해
우리가 무언가를 그리기 전에 우리는 당신이 정말로 달성하려는 것을 이해해야합니다. 이것은 단순히 기능에 관한 것이 아니라 당신이 해결하는 더 깊은 문제와 누구를 위해입니다.
당신을 놀라게할 수있는 질문을 할 것입니다 : 귀하의 사용자에게 성공이 무엇처럼 보입니까? 당신의 앱을 사용하기 전에 무엇을하고 있었습니까? 완료 후 어떤 일이 발생합니까? 이러한 통찰력은 따라오는 모든 것을 형성합니다.
사용자 여정 매핑 : 빵 부스러기 따라 가기
다음으로 우리는 사용자가 앱을 통해 취할 수있는 모든 가능한 경로를 매핑합니다. 이상적인 경로뿐만 아니라 엉망이고 현실적인 경로도 있습니다.
누군가 실수를 할 때 어떤 일이 발생합니까? 돌아 가고 싶으면 어떻게 되나요? 산만하거나 서두를 때 앱을 사용하면 어떻게되나요? 좋은 와이어 프레임은 이러한 모든 시나리오를 설명합니다.
빠른 스케치 : 아이디어를 빠르게 얻기
이곳은 우리가 화이트 보드와 마커로 손을 더럽히는 곳입니다. 목표는 마스터피스를 만드는 것이 아니라 다양한 접근 방식을 빠르게 저렴하게 탐색하는 것입니다.
우리는 동일한 화면을 5 가지 방법으로 스케치 할 수 있습니다. 어느 레이아웃이 가장 자연스럽게 느껴지는지 확인하십시오. 요소를 이동하고, 다른 그룹화를 시도하고, 동일한 문제에 다양한 접근 방식을 테스트합니다.
디지털 와이어 프레임 생성 : 명확하게하기
다양한 옵션을 탐색 한 후에 각 화면의 구조와 기능을 명확하게 전달하는 깨끗한 디지털 와이어 프레임을 만듭니다.
이것들은 예술 작품이 아닙니다 - 그들은 청사진입니다. 모든 것이 어디로 가는지, 모든 것이 어떻게 연결되는지 정확히 보여주고, 시각적 인 산만 함은 없습니다.
테스트 및 검증 : 현실 확인 시간
이것은 이론이 현실을 만나는 곳입니다. 우리는 와이어 프레임에서 클릭 가능한 프로토 타입을 만들고 실제 사람들이 사용해보도록합니다.
이것은 종종 겸손합니다. 우리에게 명백한 것은 사용자를 완전히 혼란스럽게 할 수 있습니다. 하지만 와이어 프레임 설계 중에이를 배우는 것이 출시 후보다 낫습니다.
반복 및 개선 : 더 나아지게하기
테스트에서 배운 내용을 바탕으로 우리는 와이어 프레임을 개선합니다. 이는 복잡한 흐름을 단순화하거나 정보를 재구성하거나 처음에는 생각하지 못한 단계를 추가하는 것을 의미 할 수 있습니다.
이 프로세스는 구조가 실제 사람들이 실제 상황에서 실제로 작동한다고 확신 할 때까지 반복됩니다.
좋은 와이어 프레임이 실제로 달성하는 것
와이어 프레임이 제대로 수행되면 여러 중요한 결과를 만듭니다.
- 공유 된 이해 : 프로젝트에 관여하는 모든 사람 (개발자에서 이해 관계자까지)은 와이어 프레임을보고 정확히 무엇을 구축하는지 이해할 수 있습니다.
- 감소 된 위험 : 잠재적 문제를 조기에 식별함으로써 와이어 프레임은 개발 프로세스의 후기에 비용이 많이 드는 변경을 방지합니다.
- 더 빠른 개발 : 개발자는 따를 명확한 사양이있을 때 더 효율적으로 작업 할 수 있습니다.
- 개선 된 사용자 환경 : 먼저 기능에 초점을 맞춤으로써 와이어 프레임은 최종 제품이 사용자에게 실제로 잘 작동하도록 보장합니다.
빨간 깃발 : 와이어 프레임이 작동하지 않을 때
모든 와이어 프레임이 똑같이 작성되는 것은 아닙니다. 와이어 프레이밍 프로세스가 궤도 이탈 할 수 있다는 경고 신호가 있습니다.
- 와이어 프레임이 너무 광택이 있거나 상세하면 설계와 구조를 혼합하고 있습니다.
- 각 요소가 어디에 있는지 설명 할 수 없다면 와이어 프레임은 아직 충분히 생각되지 않습니다.
- 이해 관계자가 와이어 프레임에 대한 주요 변경을 계속 요청한다면 발견 단계가 철저하지 않았습니다.
- 와이어 프레임이 오류 상태 및 에지 케이스를 설명하지 않으면 불완전합니다.
와이어 프레임에서 현실로 : 다음 단계
와이어 프레임이 승인되면 따라오는 모든 것의 기초가됩니다. 시각적 디자이너는 이를 앱의 실제 모양을 만드는 가이드로 사용합니다. 개발자는 기능을 구축하기위한 사양으로 사용합니다.
이 구조화 된 접근 방식은 더 적은 놀람, 더 적은 재작업, 최종 제품이 모두가 구축에 동의 한 것과 일치함을 의미합니다.
결론 : 와이어 프레임이 중요한 이유
모두가 빠르게 이동하고 빠르게 출시하려는 세계에서 와이어 프레임은 불필요한 단계처럼 보일 수 있습니다. 하지만 사실 그들은 작동하는 것을 구축하는 가장 빠른 방법입니다.
적절하게 와이어 프레임하는 데 시간을 투자함으로써 앱에 내장 된 문제를 해결하는 훨씬 더 오랜 프로세스를 피할 수 있습니다. 당신은 더 나은 제품을 만들고, 개발 비용을 절감하고, 결국 사용자가 실제로 사용하려는 것을 얻습니다.
스마트하게 구축을 시작할 준비가 되셨습니까?
당신의 아이디어는 튼튼한 기초를 가질 자격이 있습니다. 마리티노에서 우리는 성공하는 앱과 웹 사이트를 구축하여 와이어 프레이밍 프로세스를 완벽하게 해왔습니다.
냅킨 스케치에서 시작 하든 상세한 요구 사항이 있든, 우리는 와이어 프레임을 만드는 데 도움을 드릴 수 있습니다.
마리티노에 지금 연락하십시오 상담을 위해. 청사진에서 시작하여 실제로 작동하는 것을 구축해봅시다.