와이어프레임을 디자인 하는 팁 | 매거진에 참여하세요

대부분의 제품 디자이너들은 와이어프레임(Wireframe)이라는 개념에 익숙합니다.

와이어프레임은 사용자 인터페이스의 저수준 표현으로, 주로 제품의 기능을 보여주기 위해 사용됩니다.

와이어프레임은 디자인 프로세스에서 필수적인 부분입니다.

웹 및 모바일 앱의 청사진 역할을 하며, 제품의 기반을 설정하고 초기 단계에서 무엇이 작동하고 무엇이 작동하지 않는지 발견하는 데 도움을 줍니다.

아래에서는 와이어프레임 기술을 향상시키기 위한 12가지 방법을 소개합니다.

이 글의 삽화는 가장 인기 있고 클래식한 와이어프레임 도구 중 하나인 Balsamiq을 사용하여 만들어졌습니다.

1. 목표를 명확히 하라

와이어프레임을 사용하여 무엇을 달성하고 싶은가? 와이어프레임을 만들기 전에 반드시 답해야 할 근본적인 질문입니다.

명확한 목표 없이는 와이어프레임이 큰 가치를 제공하지 못할 것입니다.

2. 먼저 종이에 아이디어를 스케치하라

1. 즉시 선호하는 디자인 도구로 뛰어드는 것이 좋은 아이디어처럼 보일 수 있지만, 펜과 종이로 와이어프레임을 스케치하는 것이 훨씬 더 나은 결과를 낼 수 있습니다.

2. 아이디어 구상 단계에서는 가능한 많은 아이디어를 내고 각 개념의 장단점을 따져보는 것이 목표입니다.

4. 옵션이 많을수록 좋습니다. 종이나 화이트보드에 그리는 것은 여러 솔루션을 탐구하고 다양한 기회를 식별할 수 있게 해줍니다.

5. 너무 깊이 파고들지 않고 가능한 한 많은 버전을 만드는 데 초점을 맞춰야 합니다.

3. 적절한 크기의 캔버스를 사용하라

캔버스의 올바른 크기를 선택하는 것은 와이어프레임의 필수 규칙 중 하나입니다.

디자인하려는 크기와 다른 크기를 선택하면, 중간 또는 고수준의 프로토타이핑 도구로 전환할 때 수정이 필요한 레이아웃이 만들어질 것입니다.

요소의 밀도가 잘못되면 시각적 계층 구조가 잘못되어 요소의 조직을 재고해야 할 필요가 생깁니다.

예를 들어, iPhone X를 디자인한다면 iPhone X의 크기를 가진 캔버스를 사용하세요.

4. 그리드를 사용하라

레이아웃에 배치된 요소는 조정 가능하고 교환 가능하며 쉽게 확장 가능해야 합니다.

그리드를 사용하는 것은 빠르게 와이어프레임을 만들고 프로토타입에 원활하게 적용할 수 있는 완벽한 방법입니다. 그리드 시스템은 다양한 요소를 배치하는 데 도움을 줄 수 있습니다.
Balsamiq은 훌륭한 템플릿과 심볼 컬렉션을 제공합니다. "More Controls…"에서 찾을 수 있습니다.

5. 일관성을 유지하라

일관성이 핵심입니다. UI 요소가 일관되도록 해야 합니다. 각 화면의 버튼, 탭 및 레이블은 일관된 디자인을 가져야 합니다.

재사용 가능한 스타일과 심볼(심볼은 단일 기능을 나타내는 컨트롤 그룹)을 만들어 디자인 일관성을 달성할 수 있습니다.
심볼은 프로세스를 가속화하고 디자인의 일관성을 유지하는 데 도움을 줍니다. Balsamiq은 심볼 개념을 지원합니다.

6. 개별 화면이 아닌 흐름으로 생각하라

사용자 경험은 사용자가 제품을 사용할 때 거치는 여정입니다.

제품 디자인의 목표는 이 여정을 가능한 한 원활하게 만드는 것입니다. 이 목표는 개별 화면이 아닌 사용자 상호작용의 관점에서 생각할 때만 달성할 수 있습니다.
와이어프레임은 항상 만들고자 하는 경험의 관점에서 질문을 받아야 합니다. 흐름을 위해 디자인할 때는 특정 화면이 다른 화면과 어떻게 작동할지 항상 생각해야 합니다.

다음과 같은 질문을 해야 합니다:

• - 이 화면에서 가장 중요한 것은 무엇인가?

• - 사용자는 어떻게 상호작용해야 하는가?

• - 다음에 무엇을 보기를 기대하는가?
  

• 

7. 초기 단계에서 콘텐츠를 확보하라

• 
  Lorem Ipsum은 원본 콘텐츠를 사용할 수 없을 때 디자이너들이 사용하는 더미 텍스트입니다.

• 더미 플레이스홀더 대신 실제 콘텐츠를 사용하는 것이 항상 더 좋습니다. 두 가지 강력한 이유가 있습니다:

• 실제 콘텐츠를 사용하면 레이아웃에 맞는지 확인할 수 있습니다.

• 실제 콘텐츠가 레이아웃에 맞지 않으면 레이아웃을 콘텐츠에 맞게 수정해야 합니다.

• 더미 콘텐츠는 와이어프레임 검토 세션에서 유의미한 피드백을 생성하지 못합니다.

• 사람들은 알지 못하는 것에 대해 의견을 내기 어렵습니다. 관련성 있는 콘텐츠는 더 깊이 있는 피드백을 촉진합니다.
  콘텐츠가 없다면, 작업 중인 제품에서 사용할 콘텐츠와 유사한 길이와 어조의 콘텐츠를 작성하세요.

8. 의도적으로 색상을 사용하라

색상은 다목적 도구입니다. 적절한 미학을 만들거나 사용자의 눈을 중요한 요소로 이끌기 위해 사용할 수 있습니다.

와이어프레임을 만들 때 많은 디자이너들이 색상 사용을 건너뛰기를 권장합니다. 색상을 사용한 와이어프레임은 주의를 분산시킬 수 있기 때문입니다.

그렇다고 해서 와이어프레임에서 색상 사용이 금지된 것은 아닙니다.

색상을 사용할 계획이라면, 절제하고 일관되게 사용하세요. 예를 들어, 선택한 색상을 사용하여 중요한 객체(예: 상호작용 UI 요소)를 강조할 수 있습니다.

9. 예쁘게 만드는 것이 아니라 기능적으로 만들어라

9. 
   많은 디자이너들은 완벽주의자이며, 완벽주의자라면 디테일을 다듬는 데 추가 시간을 쓰고 싶은 유혹을 느낄 수 있습니다.

10. 하지만 그 유혹을 피하는 것이 좋습니다. 디자인의 시각적 측면에 추가 시간을 들이면 와이어프레임의 목적을 잊어버릴 수 있습니다.

12. 와이어프레임의 목적은 아이디어를 전달하고 검증하는 것입니다.

13. 디테일을 완벽하게 만드는 데 너무 집중하면, 너무 다듬어졌지만 솔루션 지향적이지 않은 와이어프레임을 만들 위험이 있습니다.
    와이어프레임은 빠른 아이디어 구상에 관한 것입니다. 와이어프레임은 무언가를 빠르게 만들고 다른 사람들과 검증할 수 있는 가장 빠른 방법이어야 합니다.
    그렇다면 와이어프레임의 세부 수준을 어떻게 정의할까요? 이는 디자인 프로세스의 단계에 따라 다릅니다.

15. 디자인 프로세스의 초기 단계(아이디어 구상)에 있고 다양한 개념을 탐구해야 한다면, 인터페이스의 대략적인 아이디어를 제공하기 위해 상자로 와이어프레임을 만들 수 있습니다.

10. 와이어프레임에 너무 애착을 가지지 마라

아이디어에 너무 감정적으로 애착을 가지지 마세요. 와이어프레임의 목표는 빠른 아이디어 구상이며, 우리는 변화를 받아들이고 자주 전환할 준비가 되어 있어야 합니다.

아이디어에 대한 감정적 애착은 창의성을 제한하고 전체 제품 팀에 장애물이 될 수 있습니다.

11. 주석을 추가하라

와이어프레임은 본질적으로 청사진입니다. 디자이너와 개발자가 제품을 구축하기 위한 가이드입니다. 하지만 모든 청사진이 읽기 쉬운 것은 아닙니다.

아이디어는 스스로 말하지 않습니다. 따라서 와이어프레임을 다른 사람들에게 보여줄 계획이라면, 화면에 간단한 주석을 추가하는 것이 항상 좋습니다.

주석의 목적은 컨텍스트를 만들고 다른 사람들이 디자인의 의미를 이해하기 쉽게 하는 것입니다.
Balsamiq은 사용자가 댓글을 추가할 수 있는 스티커 메모를 제공합니다.

12. 피드백을 요청하라

절대 혼자 와이어프레임을 만들지 마세요! 디자인 솔루션에 대한 협업적 대화를 위한 공간을 만드세요.

아이디어를 다른 사람들과 공유하고 작업에 대한 의견을 받으세요. 초기에 그리고 자주 피드백을 받으세요.

이는 디자인 프로세스의 시작 단계에 있고 다양한 케이스를 탐구해야 할 때 특히 중요합니다.
그러나 피드백을 고려할 때, 논의가 시각적 디자인 솔루션이 아닌 만들고자 하는 경험에 초점을 맞추도록 해야 합니다.

위의 글은 아래 원문을 번역 및 재가공한 글입니다. 원문은 아래에서 확인하실 수 있습니다.

https://balsamiq.com/learn/articles/practical-tips-for-better-wireframes/