상세 컨텐츠

본문 제목

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

Design News/Design Trend

by 김현욱 a.k.a. 마루 2021. 7. 5. 15:51

본문

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

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

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

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

 

와이어 프레임(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

 

관련글 더보기

댓글 영역