Balsamiq를 사용하여 와이어프레임 시작하기

와이어프레임은 화면 레이아웃을 시각화하는 활동으로 이상적으로 정의할 수 있습니다. 오늘날 시장에는 많은 와이어프레이밍 도구가 있지만 가장 쉽고 가장 널리 사용되는 것은 오늘의 주제인 Balsamiq입니다. 하지만 그 전에 와이어프레임이 필요한 이유를 먼저 이해합시다.
소프트웨어 개발에 관해서는 개발이 시작되기 전에도 최종 제품이 어떻게 보일지 아는 것이 중요합니다. 이 제품의 초기 시각화는 모든 이해 관계자를 위한 지침 역할을 하고 미래에 발생할 수 있는 모호성을 피하는 데 도움이 됩니다.
예전에는 소프트웨어 요구 사항을 도출하기 위해 텍스트 단락이 사용되었습니다.

그러나 이러한 텍스트 덩어리는 시각화를 진행하기에 충분하지 않았습니다. 요구 사항을 읽는 각 사람이 나머지와 다를 수 있는 방식으로 시각화할 것이기 때문입니다. 이러한 모호성은 많은 혼동을 일으키고 시간, 비용 및 노력의 낭비를 초래합니다. 원인을 돕기 위해 와이어프레임이 그림에 등장합니다. 쉽기 때문에 전체 개발 프로세스에 가져옵니다.

이 문서에서는 다음과 같은 질문을 이해하는 데 도움이 됩니다.

• • 발사믹이란?

• • 시작하는 방법?

• 최종 와이어프레임/목업을 내보내는 방법은 무엇입니까?

발사믹이란?

본질적으로 와이어프레임은 펜을 사용하여 냅킨에서 수행할 수 있습니다. 결국, 그것은 결국 스케치 일뿐입니다. 그러나 전문가와 공동 작업 및 공유하는 경우 오늘날 시장에 나와 있는 많은 도구 중 하나로 전환하는 것이 좋습니다. 이러한 도구 중 하나는 Balsamiq입니다. 사용하기 쉽고 유용한 와이어프레임을 구축하기 위한 많은 기능을 제공합니다.
Balsamiq은 훌륭한 도구이며 와이어프레임 및 협업의 모든 요구 사항을 충족합니다. 빠른 와이어프레이밍을 수행하고, 실시간 피드백을 받고, 이러한 피드백을 통합하고, 와이어프레임을 개선할 수 있는 고유한 기능 세트가 있습니다. 이것은 결국 전체 팀이 레이아웃과 관련된 애플리케이션의 기능에 맞춰지도록 합니다.
Balsamiq를 사용하면 와이어프레임을 공유하는 동안 유연성을 허용하는 PNG 또는 PDF 형식으로 와이어프레임을 내보낼 수 있으므로 멀리 떨어져 있는 팀 구성원과 공동 작업하는 것도 수월합니다.
가장 효과적인 와이어프레임 도구 10가지

발사믹 시작하기

Balsamiq은 Windows 및 Mac OS에서 사용할 수 있으며 온라인에서 다운로드할 수 있습니다 . 도구를 다운로드하고 열면 다음과 같은 화면이 표시됩니다.

위의 스크린샷과 같이 Balsamiq의 사용자 인터페이스는 다음과 같이 네 부분으로 나뉩니다.

• • 항해자

• • UI 라이브러리

• • 조사관

• 와이어프레임 공간/면적

빨간색으로 강조 표시된 섹션은 섹션 관리자와 프로젝트 정보 사이를 전환하기 위한 것입니다. 기능은 UI 라이브러리에 포함되어 있으므로 자세히 살펴보겠습니다.

UI 라이브러리

UI 라이브러리는 다양한 화면 요소에 따라 분류됩니다.
Balsamiq에서 사용할 수 있는 다양한 화면 요소 범주에 대해 알아보겠습니다.

• • All − 이것을 클릭하면 Balsamiq에서 제공하는 모든 UI 요소가 표시됩니다. 가로로 스크롤하면 보거나 사용할 수 있습니다.

• • 자산 - 이 섹션에는 업로드할 수 있고 나중에 와이어프레임에서 사용할 수 있는 항목이 포함됩니다.

• • Big - 여기에는 자리 표시자, 브라우저 창, iPhone 및 iPad와 같이 상당히 큰 화면 요소가 포함됩니다.

• • 버튼 - 이 섹션에는 액션 버튼, 체크박스 등과 같이 와이어프레임에 필요한 모든 버튼 컨트롤이 포함되어 있습니다.

• • 공통 - 이 섹션은 가장 일반적인 상호 작용을 나타내는 데 사용되는 모양으로 구성됩니다.

• • Containers - Window, FieldSet, Browser 등과 같은 옵션이 포함되어 있습니다. 이름에서 알 수 있듯이 Window, FieldSet, Browsers 등이 포함됩니다.

• • 양식 - 이 카테고리에는 입력 요소, 라디오 버튼, 제출 버튼 등과 같은 양식과 관련된 모든 컨트롤이 포함되어 있습니다.

• • 아이콘 - 여기에는 특정 작업을 나타내는 데 사용할 수 있는 아이콘 세트가 포함되어 있습니다. 예를 들어, 저장 버튼 대신 플로피 아이콘 등. Balsamiq은 다양한 작업에 사용할 수 있는 방대한 무료 아이콘 모음을 제공합니다.

• • iOS - 여기에는 iOS에 특정한 UI 컨트롤이 포함됩니다.

• • 레이아웃 - 레이아웃은 기본 페이지/기능을 나타내야 할 때 매우 중요합니다. 이 범주에는 세로/가로 탭, 아코디언 등과 같은 대부분의 레이아웃이 포함됩니다.

• • 마크업 - 이것은 와이어프레임의 특정 컨트롤에 대한 주석을 추가하는 데 사용됩니다. 또한 많은 시나리오에서 연결을 표시하는 데 사용되는 설명선이 포함되어 있습니다.

• • 미디어 - 이 섹션에서는 와이어프레임에서 이미지/비디오/사운드를 표시하는 데 도움이 되는 모든 미디어 관련 UI 컨트롤을 사용할 수 있습니다.

• • 기호 - 공통 구성 요소를 만드는 시간을 줄일 수 있는 재사용 가능한 구성 요소 모음입니다.

• Text - 이름에서 알 수 있듯이 여기에는 텍스트와 관련된 모든 UI 컨트롤이 포함됩니다. 텍스트 블록, 콤보 상자, 링크 모음 등과 같은 기능을 이 범주에서 사용할 수 있습니다.

이러한 구성 요소에 대한 지식과 함께 Balsamiq에서 구성 요소를 쉽게 끌어다 놓을 수 있다는 사실은 원하는 와이어프레임을 빠르고 효과적으로 생성하는 데 도움이 됩니다.
다음 중 이미 사용하고 있는 제품 관리 도구는 무엇입니까?

이제 웹 사이트에 대해 홈, 제품 및 서비스, 연락처 및 회사 소개라는 네 페이지의 와이어프레임을 만들었다고 가정합니다. 이제 우리는 와이어프레임을 스케치가 아닌 본격적인 웹사이트처럼 보이게 하는 또 다른 필수 작업을 수행해야 합니다. 이를 위해서는 웹사이트에 이상적으로 연결되는 페이지를 연결해야 합니다. 또한 링크를 사용하면 와이어프레임 사이를 쉽게 앞뒤로 이동할 수 있습니다.

페이지 연결하기

이 단계는 와이어프레임이 모든 웹사이트에서와 같이 순서대로 표시되는 데 도움이 됩니다. 이 탐색을 수행하려면 오른쪽 상단 모서리에 있는 링크 모음을 클릭합니다 .
먼저 홈페이지를 제품 및 서비스 페이지에 연결하여 시작하겠습니다.

• • 홈페이지 로 이동

• 오른쪽 상단 모서리 에 있는 링크 바를 클릭하십시오

속성 창 참조

녹색으로 강조 표시된 섹션은 지금까지 생성한 다양한 와이어프레임을 보여줍니다. 홈 페이지를 연결하여 시작하겠습니다. 사용 가능한 목업 목록을 보려면 드롭다운을 클릭하십시오. 아래와 같은 목록이 표시됩니다.

표시되는 드롭다운 목록에서 제품 및 서비스를 선택하여 홈에서 제품 및 서비스로 연결되는 링크를 만듭니다. 마찬가지로 다른 페이지에 대해서도 동일한 절차를 반복합니다.
의사결정의 기술: 관리자, 리더 및 제품 담당자를 위한 것

와이어프레임 내보내기

방금 생성한 와이어프레임은 PDF 또는 PNG와 같은 보다 일반적인 형식으로 클라이언트/최종 사용자에게 제공할 수 없다면 아무 소용이 없습니다. 이를 위해 Balsamiq을 사용하면 이러한 형식 중 하나로 모형을 쉽게 내보낼 수 있습니다.
이 예에서는 목업을 PDF 형식으로 내보내고 있습니다. 이를 위해 프로젝트 메뉴 를 클릭한 다음 PDF로 내보내기를 클릭합니다.
아래와 같은 화면이 나타납니다.

"연결 힌트 표시" 확인란을 선택합니다.
그런 다음 PDF로 내보내기 를 클릭합니다 . PDF를 내보낼 로컬을 지정할 수 있는 팝업이 표시됩니다. 진행률은 아래와 같이 진행률 표시줄에 표시됩니다.

내보내기가 완료되면 확인 상자가 나타납니다. 상자를 클릭하면 설정한 모든 탐색과 함께 PDF를 볼 수 있습니다.
최소한의 실행 가능한 제품 구축 – 얼마가 너무 많습니까?

마무리…
오늘날 애플리케이션 개발 세계에서 와이어프레이밍의 중요성은 부정할 수 없습니다. 그들은 전체 작업량을 완화시키는 많은 기능을 제공합니다. 와이어프레임 도구는 절대적으로 부족하지 않지만 Balsamiq은 모든 요구 사항을 충족시키는 몇 안 되는 도구 중 하나입니다!

세계 최고의 대학에서 온라인 MBA 과정을 배우십시오. 석사, 이그 제 큐 티브 PGP 또는 고급 인증 프로그램을 획득하여 경력을 빠르게 추적하십시오.