더 나은 와이어프레임을 만들기 위한 12가지 유용한 팁(12 Practical Tips for Creating Better Wireframes)

이 글은 uxplanet.org12 Practical Tips for Creating Better Wireframes 글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다

대부분의 제품 디자이너는 주로 제품의 기능을 시연하는 데 사용되는 사용자 인터페이스의 낮은 충실도 표현인 와이어프레임 개념을 잘 알고 있습니다. 와이어프레임은 디자인 프로세스의 필수 요소입니다. 웹 및 모바일 앱의 청사진과 같은 기능을 통해 제품의 기반을 설정하고 무엇이 작동하고 무엇이 작동하지 않는지를 조기에 발견하는 데 도움이 됩니다.
아래에서는 와이어프레밍 기술을 향상시키는 12가지 방법을 확인할 수 있습니다. 이 글의 그림은 가장 인기 있고 고전적인 와이어프레밍 도구 중 하나인 Balsamiq를 사용하여 작성되었습니다.

1. 목표를 명확히 합니다.

와이어프레임을 사용하여 무엇을 달성하고 싶습니까? 와이어프레임을 만들기 전에 반드시 대답해야 하는 근본적인 질문입니다. 명확한 목표가 없다면, 여러분의 와이어프레임은 큰 가치를 가져오지 않을 것입니다.

2. 먼저 종이에 당신의 생각을 스케치하세요.

좋아하는 디자인 도구에 바로 뛰어들어 보는 것이 좋을 것 같지만, 펜과 종이를 사용하여 와이어프레임을 스케치하면 훨씬 더 나은 결과를 얻을 수 있습니다. 관념화 단계 동안, 여러분의 목표는 가능한 한 많은 아이디어를 제시하고 각 개념의 장단점을 따져보는 것입니다. 더 많은 옵션이 있을수록 좋습니다. 종이 또는 화이트보드에 그리면 여러 솔루션을 탐색하고 다양한 기회를 식별할 수 있습니다. 그 중 어느 하나에도 너무 깊이 들어가지 않고 가능한 한 많은 버전을 만드는 데 초점을 맞추어야 합니다.

3. 적당한 크기의 캔버스를 사용하세요.

캔버스의 적절한 크기를 선택하는 것은 와이어프레밍의 기본 규칙 중 하나입니다. 디자인하는 것과 다른 크기를 선택할 경우 중간 또는 높은 충실도의 프로토타이핑 도구로 전환할 때 보정이 필요한 레이아웃이 됩니다. 즉, 요소의 밀도가 잘못되면 시각적 계층 구조가 잘못되기 때문에 요소의 구성을 재고해야 합니다.
presentation
iPhone X를 디자인하는 경우, iPhone X의 치수가 있는 캔버스를 사용합니다.

4. 그리드를 사용합니다.

레이아웃에 배치되는 요소는 조정 가능하고, 서로 바꿀 수 있으며, 쉽게 확장할 수 있어야 합니다. 그리드를 사용하면 프로토타입에 더욱 매끄러운 적응을 통해 빠르게 와이어프레임을 만들 수 있습니다. 그리드 시스템은 다양한 요소를 배치하는 데 도움이 될 수 있습니다.
presentation
Balsamiq는 다양한 템플릿과 심볼을 제공합니다. "More Controls..."에서 찾을 수 있습니다.

5. 일관성을 위해 노력하세요.

일관성이 핵심입니다. UI 요소가 일치하는지 확인합니다. 각 화면의 버튼, 탭 및 라벨은 일관된 디자인을 가져야 합니다. 재사용 가능한 스타일과 기호를 작성하여 디자인의 일관성을 확보할 수 있습니다(기호는 단일 기능 부분을 나타내는 컨트롤 그룹임).
presentation
기호는 프로세스 속도를 높이고 디자인을 일관적으로 유지하는 데 도움이 됩니다. Balsamiq는 Symbols 개념을 지원합니다.

6. 개별 화면이 아닌 흐름의 관점에서 생각해 보세요.

사용자 경험은 사용자가 제품을 사용할 때 거쳐야 하는 과정입니다. 제품 디자인의 목표는 이러한 과정을 최대한 원활하게 수행하는 것입니다. 개별 화면이 아닌 사용자 상호작용 측면에서 생각해야 이 목표를 달성할 수 있습니다.
와이어프레임은 항상 생성하고자 하는 경험 측면에서 질문해야 합니다. 흐름을 디자인할 때는 항상 특정 화면이 다른 화면과 어떻게 작동하는지 생각하게 됩니다. 다음과 같은 질문을 해야 합니다.
  • 이 화면에서 가장 중요한 것은 무엇입니까?
  • 사용자가 어떻게 상호작용해야 합니까?
  • 그들은 다음에 무엇을 볼 것으로 예상합니까?
presentation
화살표를 사용하여 두 개의 화면을 연결합니다.

7. 프로세스 초기에 컨텐츠를 보유하는 것을 목표로 합니다.

Lorem Ipsum은 원래 사본을 사용할 수 없을 때 디자이너가 사용하는 더미 텍스트입니다. 항상 더미 플레이스홀더(placeholders) 대신 실제 컨텐츠를 사용하는 것이 좋습니다. 왜일까요? 그 이유는 크게 두 가지입니다.
  • 실제 컨텐츠를 사용하면 레이아웃에 맞는지 여부를 확인할 수 있습니다. 실제 콘텐츠가 사용자 레이아웃과 맞지 않으면 콘텐츠에 맞게 레이아웃을 조정해야 합니다.
  • 더미 콘텐츠는 와이어프레임 검토 세션에서 중요한 피드백을 생성하지 않습니다. 모르는 것에 대한 사람들의 의견을 얻기란 어렵습니다. 관련 콘텐츠는 보다 사려 깊은 피드백을 제공합니다.
콘텐츠가 없는 경우 작업 중인 제품에서 사용하게 될 콘텐츠와 유사한 길이와 음색을 기록합니다.
presentation
Lorem Ipsum의 문제. 왼쪽: 더미 콘텐츠가 있는 모바일 앱, 오른쪽: 실제 콘텐츠가 있는 모바일 앱입니다.

8. 색상을 의도적으로 사용합니다.

색은 다목적 도구입니다. 적절한 미학을 창조하는 데 사용할 수도 있고, 사용자의 시선을 필수 요소로 유도하는 데 사용할 수도 있습니다. 와이어프레밍에 관해서라면, 많은 디자이너들은 색을 사용하는 것을 건너뛸 것을 권장합니다. 색상으로 만들어진 와이어프레임은 주의를 산만하게 할 수 있기 때문입니다.
하지만 와이어프레임에서 색상을 사용하는 것이 금지되어 있다는 뜻은 아닙니다. 색상을 사용하실 계획이라면, 간격을 두고 꾸준히 사용하세요. 예를 들어, 선택한 색을 사용하여 중요한 개체(즉, 대화형 UI 요소)를 강조 표시할 수 있습니다.
presentation
색상을 사용하여 첫 번째 레이아웃에서 대화형 요소(Floating Action 버튼)를 강조 표시하고 두 번째 레이아웃에서 현재 선택한 항목을 강조 표시합니다.

9. 예쁘지 않게 기능적으로 만들어 주세요.

많은 디자이너들은 완벽주의자이며, 어떤 완벽주의자라도 세부적인 부분을 다듬는데 시간을 더 들이는 것은 유혹적일 수 있습니다. 하지만 그런 유혹은 피하는 게 좋아요. 설계의 시각적 측면에 시간을 더 할애하면 와이어프레밍의 목적을 잊고 아이디어를 전달하고 검증할 수 있습니다. 세부 사항을 완벽하게 만드는 데 너무 집중하면 너무 정교하게 다듬어지지만 솔루션 중심의 와이어 프레임이 만들어지지 않을 위험이 있습니다.
와이어프레이밍은 빠른 아이디어에 관한 것입니다. 와이어프레이밍은 무언가를 만들고 다른 사람들과 그것을 검증하는 가장 빠른 방법이어야 합니다.
하지만 와이어프레임의 세부사항 수준을 어떻게 정의할 수 있을까요? 이 모든 것은 디자인 프로세스의 단계에 따라 달라집니다. 디자인 프로세스(이념)의 초기 단계에 있고 다양한 개념을 탐구해야 하는 경우, 박스에서 와이어프레임을 만들어 인터페이스에 대한 대략적인 아이디어를 제공할 수 있습니다.
presentation
기본 개체에서 와이어프레임을 생성하면 요소의 올바른 계층을 생성할 수 있습니다.

10. 와이어에 너무 집착하지 마세요.

당신의 생각에 너무 감정적으로 집착하지 마세요. 와이어프레이밍의 목표는 빠른 아이디어이며, 우리는 잦은 변화와 피봇을 즐길 의향이 있어야 한다는 것을 기억하라. 여러분의 아이디어에 대한 감정적인 애착은 여러분의 창의성을 제한하고 전체 제품 팀에게 장애물이 될 수 있습니다.

11. 주석을 추가합니다.

와이어프레임은 핵심 설계도이며, 제품 제작에 대한 디자이너 및 개발자의 가이드입니다. 하지만 모든 청사진들이 읽기 쉬운 것은 아닙니다. 아이디어는 스스로 말하지 않습니다. 그렇기 때문에 와이어프레임을 다른 사람들에게 보여줄 계획이라면 화면에 간단한 주석을 도입하는 것이 항상 더 좋습니다. 주석을 사용하는 목적은 컨텍스트를 작성하여 다른 사용자가 디자인의 의미를 쉽게 이해할 수 있도록 하는 것입니다.
presentation
Balsamiq에는 사용자가 의견을 추가할 수 있는 스티커 메모가 있습니다.

12. 피드백을 요청합니다.

절대로 혼자 와이어를 연결하지 마세요! 디자인 솔루션에 대한 협업 대화를 위한 공간을 만듭니다. 여러분의 아이디어를 다른 사람들과 공유하고, 여러분의 일에 대한 그들의 의견을 얻으세요. 피드백을 자주 받습니다. 특히 디자인 프로세스 초기에 다양한 사례를 살펴봐야 하는 경우 더욱 중요합니다.
하지만 앞으로 다가올 시각적 디자인 솔루션이 아닌, 여러분이 만들고 있는 경험에 초점을 맞춰 토론해야 합니다.

결론

잘 처리되면 와이어프레임은 여러분의 생각을 명확히 하고 여러분의 디자인에 대한 명확한 방향을 정할 수 있습니다. 다른 디자인 기술과 마찬가지로 와이어프레임은 시간이 지남에 따라 학습되고 완벽해질 수 있습니다.
Words by Nick Babich
원래 Balsamiq’s UI Education Site에 게시되었습니다.

이 글은 번역 글입니다. 원본 링크입니다.


안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2LxR0Bz

https://bit.ly/2L6WsZp