와이어프레임이란 무엇이며, 어떻게 만드는가? (What Are Wireframes, and How Do I Make Them?)

이 글은 Holiday EngWhat Are Wireframes, and How Do I Make Them?글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다

BA, Developers 및 UX 신규 사용자를 위한 와이어프레임에 대한 초보 가이드

와이어프레임은 모든 제품의 라이프사이클에서 UX 디자인 설계의 필수 요소로 간주됩니다. 많은 이해당사자들이 페이지의 내용을 볼 수 있는 첫 번째 기회이며, 제품에서 무엇이 작동하고 무엇이 작동하지 않는지에 대한 깊은 대화를 시작하는 첫 번째 시각 자료입니다.
만약 여러분이 노련한 UXer가 아니라면, 그것은 약간 위협적으로 보일 수도 있습니다. 결국, 시각적으로 명확하고 이해하기 쉬운 방법으로 여러분의 아이디어를 제시하면서 창조적으로 그려내고 있습니다. 말할 것도 없이 많은 UX 디자이너들이 그래픽 디자인 배경 출신이지 않습니까? 그렇다면 훌륭한 예술 기술이 필요하다는 뜻인가요?
다행히 대답은 "아니오"입니다. "절대 아닙니다!" (아니면 왜 제가 이 글을 쓰고 있을까요?")
와이어프레임은 누구나 사용할 수 있는 이 멋지고 마술적인 속임수입니다. 따라서 그림을 그릴 필요 없이 여러분의 생각과 이해당사자들이 합의에 도달할 수 있습니다. BA 또는 Developer, Data Architect 또는 새로 주조한 Designer를 사용하면 누구나 매우 기본적인 모양을 가진 와이어 프레임을 만들 수 있습니다.

와이어프레밍이란 무엇입니까?

하지만 한 걸음 뒤로 물러서서 와이어프레임이 무엇인지 정의해 보겠습니다.
큰 그림, 와이어프레임은 애플리케이션의 프로토타입입니다. 페이지상에 어떤 내용이 실릴지 보여주는 거친 목업이지만, 세부적인 색상, 그래픽 디자인, 미묘한 모양은 아닙니다.
presentation
프로토타입의 연속성은 다음과 같습니다. 왼쪽에서 오른쪽으로 이동함에 따라 픽셀별 쇼 개발자가 페이지에 무엇이 있어야 하는지 또는 드롭다운 애니메이션이 어떻게 표시되는지 정확하게 디자인 설계할 때까지 상황은 더욱 복잡해지고 복잡해집니다. 고밀도 프로토타입에는 전문화된 디자인 설계 기술과 도구가 필요하지만, 와이어프레임은 많은 수의 무료 도구로 누구나 할 수 있는 낮은 충실도의 디자인입니다.
더 큰 범주의 와이어프레임 안에서, 우리는 더 많은 고장을 가지고 있습니다. 스케치/화이트보딩은 기본적으로 서로 다른 매체에서만 동일합니다. 스케칭과 화이트보딩은 일반적으로 브레인스토밍이나 아이디어를 시작할 때 매우 일찍 일어나며, 기본적인 모양만 사용하여 만들어집니다.
자세한 와이어프레임은 조금 더 늦게, 아마도 공부가 시작될 때 일어납니다. 이제 몇 가지 아이디어를 확장하고, 컴퓨터 도구를 사용하여 만들었으며, 페이지에서 세부 내용을 얻기 시작했습니다. 하지만 결정적으로, 그것은 여전히 같은 기본 형태입니다. 다시 말하지만, 누구나 할 수 있고, 얼마든지 공짜로 만들 수 있습니다.
presentation
세 가지 모두의 예입니다. 스케치하는 것은 일반적으로 종이에 있는 것처럼 보이지만, 그것은 그럴 필요가 없습니다. 마찬가지로, 상세한 와이어프레임은 컴퓨터에 있을 필요가 없습니다. 화이트보딩은요? 음, 화이트보딩은 화이트보드에 있어야 하는데... 제가 칠판을 사용하지 않는다면요? 화이트보드를 칠 수 있나요? 아니면 그냥 스케치하는 건가요? ...초크보드요?

어디서부터 시작할까요?

빈 페이지 증후군은 현실적이고, 작가들만의 문제가 아닙니다. 디지털 또는 물리적으로 넓은 백색 공간을 마주하는 것은 우리 모두에게 위협적입니다. 10분 동안 마커를 손에 든 채 빈 공간을 응시하고 있는 자신을 발견하면 아래의 팁을 따르세요.

목표를 적는 것부터 시작하세요.

당신이 해결하려는 문제는 무엇입니까? 당신이 만들고자 하는 화면은 무엇입니까? 종이에 적어 두세요. 그러면 여러분이 어떤 문제를 풀고 있는지 모든 사람들이 알고 있습니다.

그리고 나서, 유용한 다른 것들은 모두 적으세요.

이미 몇 가지 제한 사항, 가정 또는 관련 정보를 알고 계십니까? 모바일에 있거나, 5가지 요소를 포함해야 한다는 것을 알고 있거나, 사용자가 불러야 할 특정 가정이 있을 수 있습니다. 모든 것을 페이지에 적어놓으세요.
이것은 여러분의 생각을 정리하는 데 도움이 될 뿐만 아니라, 여러분은 이 항목들을 기억하는 데 어떤 인지적 부담을 갖는 것도 원하지 않을 것입니다. 여러분은 여러분의 두뇌가 전적으로 아이디어, 브레인스토밍, 그리고 새로운 디자인에 집중되기를 원합니다.

막히면 직사각형을 그리고 채우기 시작하세요.

빈 페이지 증후군을 극복하는 비결은 다음과 같습니다. 여러분의 첫 번째 아이디어는 다른 모든 사람들에게 도약점이 될 것입니다.
처음에 제대로 해내지 못할 가능성이 높아요, 아주 좋아요! 그것은 모든 압력을 없앱니다. 그것은 여러분의 첫 번째 아이디어가 (그럴까요?) 끔찍할 수 있다는 것을 의미하며, 중요한 것은 다음 아이디어에 도달하기 위해서, 그리고 다음 아이디어에 도달하기 위해서 어떤 것을 페이지에 올리는 것입니다.
그 생각이 얼마나 많은 시간을 제가 페이지를 15분이나 더 응시하지 않고 아무것도 하지 못하게 했는지 말할 수 없습니다. 그리고 저를 믿으세요, 일단 여러분이 그 페이지에 글을 올리기 시작하면, 아이디어들이 나오기 시작할 것입니다.

간단한 와이어프레임을 만드는 전술입니다.

하지만 좋은 것들을 찾아봐요. 페이지나 화이트보드에 물건을 넣기 위한 몇 가지 팁은 무엇입니까 빠르고 즉각적으로 인식할 수 있는 제품 화면을 만들기 위해 따라야 할 일반적인 아이디어는 무엇입니까?
제가 이 글에서 몇 번 언급했듯이, 그것은 모두 매우 기본적인 모양에 관한 것입니다. 모두 직사각형, 원, 삼각형, 선입니다. 그리고 그것이 정말로 그것에 대한 전부입니다!

프레임

프레임부터 시작: 사각형 직사각형 또는 다소 수평형 직사각형은 브라우저 창이고 더 작고 좁은 직사각형은 태블릿과 모바일 프레임입니다.
presentation
멋진 와이어프레임 틀이네요 왼쪽의 브라우저 창, 오른쪽의 모바일입니다.

머리글과 이미지

머리글은 페이지 상단에서 약간 아래쪽에 있는 줄에 추가하여 작성됩니다. 머리글에는 자리 표시자 텍스트, 로그인 아바타/사람(아래에 반원이 있는 작은 원), 햄버거 메뉴(수평선 3개)가 있습니다.
이미지는 매우 쉽습니다. 그것들은 단지 커다란 "X"가 있는 직사각형입니다. 이 시점에서 실제 이미지를 그리는 것은 시간 낭비입니다. 그리고 여러분은 단지 그곳에 무언가가 있을 것이라는 것을 나타내기를 원할 뿐입니다. 좀 더 많은 컨텍스트를 제공하려는 경우 사각형 안에 항상 "나무" 또는 "영웅 이미지"를 쓸 수 있습니다. 그것만 있으면 돼요.
presentation
일부 머리글(headers) 및 이미지 자리 표시자(image placeholders)에 추가됩니다.

페이지 내용

검색 상자(Search boxes)는 돋보기 안경(원 및 선)이 있는 직사각형일 뿐입니다. 입력 영역은 빈 사각형 또는 직선형이며 드롭다운은 다시 직사각형이지만 이번에는 아래쪽 당근(열린 삼각형)을 사용합니다.
텍스트는 공백이 있는 경우 또는 줄만 줄줄 작성됩니다. 여기서 요점은 단지 큰 아이디어입니다. "저장"과 같은 주요 작업은 쓸 수 있을 만큼 짧을 수 있지만 대신 다른 텍스트를 사용할 수도 있습니다.
"저장"에 대해 말하자면 버튼은 명령 텍스트가 포함된 직사각형이며 마지막으로 아이콘은 종종 작은 원이나 정사각형으로 표시됩니다.
보시는 것처럼 모두 직사각형, 삼각형, 원, 선입니다!
presentation
와이어프레임은 바디 콘텐츠들로 채워져 있습니다. 브라우저 버전에서 상단 내비게이션이 누락되고 모바일에서 저장 버튼이 누락되는 것을 알 수 있습니다. 음... . . . . .

주석

이때 프레임 사이의 경로에 추가하기 시작하거나 작업에서 발생한 무작위 질문에 대해 생각하기 시작할 수 있습니다. 그 모든 것을 적으세요!
코페티 선(Confetti lines )은 무언가가 클릭되었거나 해당 요소에 대한 작업이 수행되었음을 보여주는 좋은 방법입니다. 그러면 화살표는 두 화면 사이의 연결을 보여줍니다.
진행하면서 떠오르는 질문이나 랜덤한 아이디어가 있으면 각각을 나타내는 별이나 글머리 기호로 이미지 옆에 적습니다. 이것은 여러분이 그것들을 잊지 않도록 해줄 것이고, 여러분의 뇌를 자유롭게 해 줄 것입니다.
presentation
와이어프레임도 완전해 보이고 심지어 경로도 있어요

색 Color

그리고 가장 큰 것은 색깔입니다. 이것에 대해 몇몇 다른 생각의 학교들이 있지만, 저는 여러분이 색깔을 적게 사용하든지 아니면 전혀 사용하지 말아야 한다고 강하게 믿습니다.
색은 매우 강력합니다. 바로 시선을 끌게 되고, 그래픽 디자인 선택의 영역으로 진입하기 시작합니다. 이해당사자들은 왜 어떤 것은 파란색이고 다른 것은 녹색인지 또는 갑자기 "이 파란색이 앱에 가장 적합한 파란색이라고 생각되면"에 대한 대화에 너무 많이 집중하기 쉽습니다.
색상은 실제 페이지 레이아웃에서 완전히 배제하는 것이 가장 좋습니다. 그러면 대신 높은 수준의 아이디어, 흐름, 구조에 집중할 수 있습니다.
그러나 모든 것이 말하듯이, 색상은 페이지 레이아웃 밖에서 유용할 수 있습니다. 경로 표시기를 페이지의 일부가 아니라는 것을 보여주는 다른 색상으로 만들 수도 있습니다. 또는 나중에 쉽게 인식할 수 있도록 주석에 색 범주를 추가하는 것이 유용할 수 있습니다.
presentation

상세 와이어프레임을 작성하는 전술

마지막으로, 자세한 와이어프레임으로 넘어가고 싶습니다. 좋은 소식은 이런 간단한 와이어프레임을 기반으로 구축된다는 것입니다. 그래서 이전 섹션의 거의 모든 것이 여전히 적용된다는 것입니다. 세부적인 와이어프레임으로 초기 디자인을 좀 더 다듬고 몇 가지 추가 요소에 집중할 수 있게 되었습니다.

배치

간단한 스케치와 화이트보드 와이어프레임과 관련이 있지만, 보다 세부적인 디자인에 들어가면서 실제로 이 기능이 작동하게 됩니다.
장소는 주로 다음과 같은 관례에 관한 것입니다. 아이 트래킹 연구는 사람들이 이미지를 볼 때 "Z" 또는 "F" 패턴을 따른다는 것을 보여주었습니다. 왼쪽 위, 오른쪽 위, 왼쪽 가운데, 오른쪽 가운데 등을 살펴봅니다. 즉, 페이지 컨텐츠도 왼쪽/중앙 상단에 있는 가장 중요한 컨텐츠와 오른쪽 하단에 있는 가장 중요한 컨텐츠의 일반적인 레이아웃을 따라야 합니다.
presentation
표준 "Z" 레이아웃입니다. "F"는 본질적으로 같지만, 대신 F처럼 보입니다. 이 구조는 왼쪽에서 오른쪽으로 읽는 문화를 위한 것입니다. 오른쪽에서 왼쪽으로 읽혀진 것들은 바뀝니다!

중요함

여기에 추가하기 위해 중요함은 세부 와이어프레임에 포함할 또 다른 요소입니다. 제가 '중요함'이라고 하는 것은, 여러분의 눈이 얼마나 빨리 원소에게 끌려가는지를 말하는 것입니다. 더 크고 대담한 것은 여러분의 관심을 끌며, 목적을 위해 조금씩 사용되어야 합니다. 크고 아름다운 이미지는 제품을 판매하고, 대담하게 색칠된 실행 버튼은 클릭할 위치를 사용자에게 보여주지만, 너무 많은 중요한 것은 사용자를 압도할 것입니다!
presentation
위쪽의 편집현황 영역 아래의 게시버튼은 놓치지 않도록 더 어둡게 되어 있으며, 제인 도이가 올린 큰 이미지가 바로 눈길을 끌 것입니다.

아이콘 및 이미지

운 좋게도, 이 시점에서 여러분은 여전히 어떤 이미지들도 필요하지 않습니다. 여러분은 아마도 여전히 그것들이 어떻게 될지 모르지만, 더 중요한 것은, 화려하고 세밀한 이미지들은 단지 흐름과 구조로부터 주의를 딴 데로 돌리게 될 것입니다.
아이콘의 경우 와이어프레임을 지원하는 많은 컴퓨터 도구에는 페이지를 끌어서 놓을 수 있는 표준 아이콘이 있습니다. 만약 당신이 그것을 찾으면, 그것을 추가하세요. 만약 여러분의 것이 아니라면, 그것들을 원이나 정사각형으로 남겨두고 만약 그것이 나온다면 그들과 이야기하세요.
presentation
이 페이지에 걸쳐 표준 아이콘이 많아요. 그들은을 보고 싶은데, 이 단계에서 필요한 유용한 거!

본문

항상 가능한 경우 실제 텍스트를.
이것은 두 가지 이유에서다. 첫째, 사람들은 페이지에 있는 것을 볼 수 없다면 동의하거나 동의하지 않을 수 없습니다. 둘째, 텍스트 길이는 설계에 큰 영향을 미칩니다. 작은 예로, 디자이너들이 많은 일을 하는 것을 볼 수 있습니다. 짧은 사용자 이름(예: Ann Smith)으로 모든 디자인을 만든다면, 사용자들이 훨씬 더 긴 이름(예: Sarah-Beth Dabrowski)을 입력하면, 갑자기 디자인이 깨집니다!
그러나 실제 텍스트로 추가할 수 없는 경우 다음 최선의 옵션은 랜덤 라틴 텍스트인 Lorem Ipsum을 사용하는 것입니다. 이 시점에서 무작위적인 스퀴글은 지났고, 아직 어떤 내용이 될지는 모르지만 페이지에 텍스트에 대한 대략적인 아이디어가 있어야 합니다.(참고, 로렘 입숨 생성기를 구글에 입력하기만 하면, 필요 이상으로 많은 결과를 얻을 수 있습니다!)
presentation
아주 짧은 이름들이 있어요. 저는 Madhavi Ramakrishna가 이 앱을 사용하지 않았으면 좋겠어요. 또한, 측면 패널에는 재치 있게 사용되는 로렘 입숨도 있습니다.

워크플로우를 구축

자세한 와이어프레임에서 마지막으로 강조하려는 것은 전체 워크플로우입니다. 지금이 바로 여러분의 행복한 길과 행복하지 않은 길을 만들 때입니다. 사용자가 플랫폼과 어떻게 상호 작용합니까? 딸아이는 클릭할 곳을 어떻게 알 수 있고, 그가 거래를 성공적으로 완료했을 때 어떻게 알 수 있을까요? 물론 지금이 그러한 오류 메시지에 적기라는 것은 말할 것도 필요한 필드는 무엇이며 사용자가 입력하는 것을 잊어버린 경우 어떻게 됩니까?
이러한 모든 워크플로우 세부 정보는 제품을 구축하는 데 매우 중요하며, 간단한 와이어프레임으로 모두 수행할 수 있습니다!
presentation
샘플 와이어 흐름입니다. 기본적으로 프로세스 흐름이지만 실제 와이어프레임은 경로의 각 단계에 있습니다.

그림은 가치가 없습니다...모든 단어들입니다.

간단히 요약하면 다음과 같습니다.
  • 와이어프레임은 누구나 쉽게 만들 수 있는, 빠르고 강력한 시제품입니다.
  • 빈 페이지를 마주할 때는 목표와 관련 세부사항을 적어놓고 직사각형을 그리면서 와이어프레임을 시작하세요!
  • 단순하거나 세부적인 와이어프레임은 모두 직사각형, 원, 삼각형 및 선으로 작성할 수 있습니다.
  • 더 자세한 와이어프레임에 들어가면서 배치, 중요도, 텍스트 및 워크플로우와 같은 것들을 생각하기 시작합니다.
  • 와이어프레임에는 색상 또는 세부 그래픽 디자인이 없어야 합니다.
BA, Developer, PM, Data Scientist, Architect, UX Designer 또는 다른 제품 사용자와 상관 없습니다. 와이어프레임은 이해관계자들이 자신의 생각을 시각화하고 같은 방향으로 움직이도록 돕는 데 매우 중요합니다. 그리고 운 좋게도, 우리 모두에게 그것들은 가장 쉽게 만들어 낼 수 있는 것들입니다!
본 섹션은 BA, PM, Developers 및 UX 신규 사용자를 대상으로 한 UX 와이어프레임 기본에 관한 다중 부품 시리즈의 첫 번째 파트입니다. 2부에서는 일부 와이어프레임을 빠르게 생성하는 데 사용할 수 있는 몇 가지 키 무료 또는 일반적인 엔터프라이즈 라이센스 도구를 살펴보겠습니다.

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


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