와이어 프레임 설계에 대한 기본 가이드

아름답게 디자인된 사이트를 구축하기 전에 처음부터 시작할 필요한 것들이 있다. 바로 사이트가 어떻게 보이기를 원하는지에 대한 개요를 작성하는 것이다. 그래야 꼬인 부분을 해결하고 비즈니스에 가장 적합한 웹 사이트를 제공할 수 있다.

하지만 어떻게 웹 사이트 개요를 만들까? 물론 와이어 프레임을 만들어 작성한다.

와이어 프레임에 익숙하지 않은 경우, 도움이 되는 가이드가 있다. 다음과 같은 질문에 대한 답을 얻으려면 계속 읽어보길 바란다.

• 와이어 프레임이란?
• 어떤 유형의 와이어 프레임이 있는가?
• 왜 와이어 프레임을 사용해야 하는가?

 

와이어 프레임(wireframes)이란?

와이어 프레임은 간단한 흑백 윤곽으로 페이지의 특정 요소의 위치를 명시한다. 와이어 프레임은 페이지 및 사이트 요소, 사용자 흐름 및 페이지 구조에 중점을 둔다. 웹 디자이너는 일반적으로 클라이언트가 사이트 레이아웃의 기본 개요를 볼 수 있도록 돕기 위해 와이어 프레임을 사용한다.

 

3 가지 유형의 와이어 프레임

와이어 프레임 개념 설명 다음으로 살펴볼 것은 다양한 유형의 와이어 프레임이다. 와이어 프레임에는 세 가지 유형이 있다.

 

1. 저 충실도 와이어 프레임(Low-fidelity wireframes)

첫 번째 유형의 와이어 프레임은 저 충실도 와이어 프레임이다. 이러한 와이어 프레임은 사이트의 가장 간단한 개요다. 회사들은 일반적으로 웹 사이트에 대한 아이디어를 짜내기 위한 출발점으로만 사용한다.

[그림] 저 충실도 와이어 프레임의 예

낮은 충실도의 와이어 프레임을 만들 때는 스케일이나 픽셀 정확도에 대한 걱정 없이 아이디어를 얻는 데 집중한다. 이러한 개요에는 사이트에 있는 이미지, 모양 및 기타 콘텐츠의 단순한 버전이 있다.

이 개요는 주의를 산만하게 하는 요소나 사용자 경험에 영향을 미치는 요인은 고려하지 않는다. 대신, 그들은 여러분의 아이디어를 내려놓고 실현 가능한 사이트 구조로 구성하는 데 집중한다.

 

2. 중간 충실도 와이어 프레임(Mid-fidelity wireframes)

다음 유형은 중간 충실도 와이어 프레임이다. 이 와이어 프레임은 가장 자주 사용된다. 이 유형은 이미지나 타이포그래피를 사용하지 않지만 사이트 레이아웃의 보다 자세한 구성 요소를 포함한다.

[그림]중간 충실도 와이어 프레임의 예

예를 들어, 이미지 또는 본문 텍스트를 넣을 자리 표시자 상자가 있다. 실제 이미지 나 텍스트는 없지만 변경 작업을 수행할 수 있도록 사이트의 전체적인 모양 레이아웃을 제공하게 될 것이다.

다른 와이어 프레임과 마찬가지로 중간 충실도 와이어 프레임은 흑백 색상을 사용하지만 요소를 구별하고 요소를 강조하는 데 도움이 되는 회색 음영도 제공한다. 이 와이어 프레임 설계는 글꼴에 다른 포인트 가중치를 사용하여 제목을 분리하고 명확한 구분을 만든다.

이 와이어 프레임 구조에서는 요소가 페이지에서 서로 작동하는 방식을 보여주는 데 중점을 둔다. 이 유형을 사용하면 웹 디자이너가 사이트의 실제 이미지와 텍스트에 주의를 분산시키지 않고 사이트의 유용성을 더 잘 이해할 수 있다.

 

3. 고 충실도 와이어 프레임(High-fidelity wireframes)

와이어 프레임 개발을 수행할 때, 일부 회사는 고 충실도 와이어 프레임을 사용하도록 선택할 수 있다. 이 유형을 사용하면 윤곽선이 더 많이 그려진다. 요소는 특정 픽셀 크기로 조정된다. 고화질 와이어 프레임은 또한 자리 표시자 대신 사이트의 실제 이미지와 텍스트를 사용한다.

[그림] 고 충실도 와이어 프레임의 예

대부분의 회사는 나중에 사이트 개발 단계에 있는 경우, 이 와이어 프레임을 사용한다. 이 와이어 프레임은 대화형 요소 또는 메뉴 흐름과 같은 복잡한 사이트 프로세스를 구체화하는 데 이상적이다.

 

와이어 프레임을 사용해야 하는 이유는 무엇인가?

다른 와이어 프레임에 대해 배운 후에는 와이어 프레임을 사용하여 사이트를 디자인해야 하는 이유가 궁금할 수 있다. 와이어 프레임을 사용하면 어떤 이점이 있을까?

웹 디자인에 와이어 프레임 개발이 중요한 6가지 이유는 다음과 같다.

 

1. 와이어 프레임은 페이지의 깔끔한 개요를 제공한다.

웹 사이트를 디자인할 때 레이아웃을 명확하게 파악하여 최상의 경험을 제공하도록 디자인을 조정하고 최적화할 수 있다. 하지만 사이트의 모든 요소를 ​​제거하려는 경우 수행하기 어려운 작업이다.

와이어 프레임 개발, 특히 중간 충실도 와이어 프레임을 사용하면 사이트 레이아웃을 단순화하고 페이지를 깔끔하게 볼 수 있다. 주의가 산만 해지는 것에 대해 걱정할 필요가 없으며 보다 명확한 그림을 얻을 수 있도록 사이트를 기본 사항으로 제한할 수 있다.

사이트의 흐름을 더 명확하게 파악하면 잠재 고객이 웹 사이트와 상호 작용하는 방식을 더 잘 이해하여 최상의 경험을 제공하고 있는지 확인할 수 있다.

 

2. 와이어 프레임은 방문자의 관점에서 사이트를 볼 수 있도록 도와준다.

와이어 프레임 UX 디자인은 청중의 눈을 통해 사이트를 보는 데 매우 중요하다. 사이트의 흐름을 이해할 수 있을 뿐만 아니라 사람들이 사이트와 상호 작용하는 방식에 대한 더 나은 아이디어를 얻을 수 있다.

와이어 프레임 구조를 사용하면 다음과 같은 구성 요소를 분석할 수 있다.

• 탐색(Navigation)
• 전환 경로(Path to conversion)
• 페이지 구성(Page organization)

사이트 설정의 이 원시 버전을 사용하면 잠재 고객이 사이트의 여러 부분과 상호 작용하는 방식을 이해할 수 있다. 핵심적으로 사이트가 청중을 위해 사용하기 쉬운 지 또는 특정 작업을 완료하는 데 방해가 되는 요소들이 있는지 확인할 수 있다.

 

3. 와이어 프레임을 통해 결함 식별 가능

앞서 언급했듯이 와이어 프레임 설계를 사용하면 청중이 보는 대로 사이트를 볼 수 있고 사람들이 콘텐츠와 상호 작용하는 방식을 더 잘 이해할 수 있다. 이와 함께 결함을 보다 효율적으로 식별할 수도 있다.

사이트 흐름을 분석하든 전환 경로를 분석하든 각 단계에 집중하여 사용자가 혼란스러울 수 있는 부분이나 단계를 놓칠 수 있는 부분을 식별할 수 있다.

와이어 프레임 구조를 보는 동안 탐색이 흐트러지거나 혼란스럽거나 전환 경로에 단계가 누락된 것을 발견할 수 있다. 와이어 프레임을 사용하면 나중에 비용이 많이 들고 더 큰 문제가 발생하기 전에 이러한 문제를 조기에 식별할 수 있다.

그것은 우리에게 다음 혜택을 가져다준다.

 

4. 와이어 프레임으로 비용 절감

와이어 프레임 UX 디자인을 사용하면 비용을 절약할 수 있다. 와이어 프레임 없이 사이트를 디자인하면 앞으로 큰 비용이 발생할 수 있다.

와이어 프레임 개발을 사용하면 시작하기 전에 사이트의 개요를 작성할 수 있다. 이는 사이트를 만들기 전에 사이트를 수정하고 조정할 시간이 있다는 것을 의미한다. 사이트 구축에 비용을 투자하기 전에 문제를 파악하고 미리 해결할 수 있다.

와이어 프레임을 사용하지 않는 경우, 발생할 수 있는 시나리오는 다음과 같다.

회사 웹 사이트를 구축하고 소규모 비즈니스 웹 사이트 빌더를 리서치하기로 결정한다. 여러분의 리서치에서 Squarespace를 발견하고 여러분의 비즈니스에 적합하다고 생각한다. 와이어 프레임 개발에서 손을 떼고 사이트 구축을 시작한 경우.

이 시점에서 이미 Squarespace를 사용하고 사이트의 세련된 테마에 돈을 투자하기 위해 월 사용료를 지불했다.

여러분은 사이트를 개설하고 그것은 성공적이다.

1년 후 운영이 증가하고 그 결과 고객을 위한 제품 제공이 증가한다. 수많은 새로운 제품이 출시되어 고객이 제품을 찾을 수 있도록 보다 심층적이고 체계적인 내비게이션을 만들어야 한다는 사실을 깨닫게 된다.

단, Squarespace는 심층 내비게이션 모음을 구축하는 기능을 제공하지 않는다.

이러한 성장을 계획하지 않았고 이제 사이트 빌더가 이를 수용할 수 없다는 것을 알게 되었다.

이제 완전히 새로운 사이트를 다른 곳에 구축해야 하므로 비즈니스에 더 많은 비용과 시간이 소요된다.

그러나 와이어 프레임을 사용하고 사이트 확장을 계획했다면, Squarespace가 비즈니스에 가장 적합하지 않다는 것을 식별할 수 있었다.

또한 와이어 프레임은 사이트가 게시된 후 비용이 많이 드는 실수를 방지한다. 전환 프로세스에서 문제를 발견하고 문제를 해결하기 위해 외부 회사를 고용해야 하는 대신 출시 전에 문제를 식별하고 추가 비용을 피할 수 있다.

 

5. 와이어 프레임으로 시간 절약

와이어 프레임 개발은 시간을 절약하기 때문에 비즈니스에도 중요하다. 와이어 프레임은 계획된 디자인을 만드는 데 도움이 되므로 사이트를 구축할 준비가 되었을 때 실행하기가 더 쉽다.

연구 논문을 쓰는 것처럼 생각하면 된다. 단순히 글쓰기를 시작하고 인용문을 어디에 두어야 할지, 그리고 여러분이 글을 어떻게 구성해야 하는지를 알아내려고만 하지 않을 것이다. 어떻게 하면 논문의 의미를 이해할 수 있도록 하기 위해 재배치하고 다시 쓰는 데 시간을 낭비하게 될 것이다.

대신 글을 쓰기 전에 개요를 작성하여 논문의 흐름과 인용문을 포함할 위치를 결정한다. 이 개요는 다음에 작성할 내용을 알고 있으므로 보다 효율적으로 작성하는 데 도움이 된다.

와이어 프레임과 다르지 않다.

와이어 프레임은 웹 사이트의 디자인을 만드는 데 도움이 되는 개요다. 요소를 변경하고 작동할 때까지 사이트 구조의 다른 부분을 변경하는 데 시간을 낭비하는 대신 계획된 개요를 사용하여 설계 시 시행착오를 피할 수 있다.

 

6. 와이어 프레임은 미래 계획에 도움이 된다.

와이어 프레임 개발을 수행하는 마지막 이유는 미래를 계획하는 데 도움이 되기 때문이다. 사이트를 처음 디자인할 때, 현재 비즈니스 요구에 맞는 웹 사이트를 구축하는 경우, 온라인에서 계속 성장함에 따라 사이트도 함께 성장해야 한다.

와이어 프레임은 사이트가 미래를 위해 스케일업이 가능한지 확인하는 데 도움이 될 수 있다. 와이어 프레임을 통해 페이지 및 콘텐츠를 추가할 때 사이트가 성장을 얼마나 잘 처리하는지 확인할 수 있다. 와이어 프레임의 크기가 제대로 조정되지 않은 경우 구축을 시작하기 전에 조정하여 스케일을 조정할 수 있다.

스케일업의 일반적인 예는 내비게이션에 더 많은 제품을 추가하는 것이다.

비즈니스가 성장함에 따라 사이트에 더 많은 제품을 추가하는 경향이 있다. 즉, 내비게이션을 조정해야 한다. 와이어 프레임을 사용하면 비즈니스에 따라 확장되고 전체 사이트 또는 그 흐름을 방해하지 않는 내비게이션을 설계할 수 있다.

와이어 프레임은 미래를 계획하는 데 매우 중요하므로 비즈니스 변화에 따라 사이트가 조정되도록 할 수 있다.

원문 링크. What is a wireframe? Your Go-To Guide on Wireframe Design