사용자 인터페이스에 대한 와이어프레임 다이어그램 만들기

사용자 인터페이스에 대한 와이어프레임 다이어그램 만들기

와이어프레임 템플릿은 소프트웨어 애플리케이션의 중간 피델리티 모의 기능을 만들기 위해 설계되었습니다. 템플릿은 Windows, 인터넷 및 모바일 디바이스용 애플리케이션과 같은 광범위한 소프트웨어 유형에 사용할 수 있습니다.

  1. 대화 상자 스텐실을 클릭하고 애플리케이션 양식 또는 대화 상자 폼을 페이지로 끌어서 시작하세요. 이 스텐실에서 다른 셰이프를 추가하여 UI의 기본 구조를 간략하게 설명합니다.

  2. 도구 모음 스텐실을 클릭하여 메뉴 및 기타 애플리케이션 아이콘을 추가합니다.

  3. 다른 네 가지 기본 스텐시(컨트롤,커서,공통 아이콘 및 웹 미디어 아이콘)에 있는 셰이프를 사용하여 UI를 채우고 애플리케이션의 기능을 보여줄 수 있습니다.

일부 와이어프레임 셰이프에는 사용자 지정 가능한 속성이 있습니다. 이러한 셰이프 사용에 대한 몇 가지 팁은 다음과 같습니다.

실행할 작업

대화 상자 만들기

도형

지원서 양식

전체 애플리케이션의 경계를 제공하는 컨테이너입니다. 오른쪽 위 모서리에 있는 연결점에는 Windows 단추 셰이프가 있습니다.

대화 상자 양식

대화 상자에 대한 아이콘, 컨트롤 및 텍스트를 보관할 컨테이너입니다. 오른쪽 위 모서리에 있는 연결점에는 Windows 단추 셰이프가 있습니다.

Windows 단추

이 셰이프를 사용하여 표현할 단추를 선택합니다. 닫기, 최대화, 최소화 또는 복원(일반적으로 애플리케이션 및 대화 상자 폼의 오른쪽 위 모서리에 있는 단추). 폼에서 셰이프를 놓을 때 원하는 단추를 선택하고 셰이프를 마우스 오른쪽 단추로 클릭하고 단추 형식을 클릭하여 나중에 변경할 수 있습니다.

셰이프를 마우스 오른쪽 단추로 클릭한 다음 활성 표시를 클릭하여 단추의 음영을 변경합니다.

상태 표시줄

상태 표시줄 항목, 아이콘 및 분할자에 대한 컨테이너입니다. 상태 표시줄 항목은 두 번 클릭하여 텍스트를 추가할 수 있는 중간 길이 막대입니다. 아이콘, 진행률 표시줄, 슬라이더 또는 기타 셰이프를 추가하기 위한 중앙 연결 지점도 있습니다. 상태 표시줄 아이콘은 공통 아이콘 또는 웹 및 미디어 아이콘에서 아이콘을 놓을 수 있는 중앙 연결점이 있는 짧은 막대입니다. 다른 셰이프 간에 상태 표시줄 분할을 삭제하여 구분을 볼 수 있습니다.

스크롤 막대

마우스 오른쪽 단추로 클릭하여 세로 또는 가로로 지정하고 슬라이더의 길이(지문 길이)를 설정합니다. 노란색 컨트롤 핸들을 사용하여 스크롤 막대의 길이를 따라 슬라이더를 이동합니다.

그래버의 재조정

스크롤 막대 및 상태 막대에서만 사용할 수 있습니다. 페이지에 떨어뜨리면 형식을 설정할 수 있도록 대화 상자가 나타납니다.

탭 막대

탭 항목에 대한 컨테이너입니다. 위쪽 탭 항목 또는 아래쪽 탭 항목을 추가한 후 탭 항목을 마우스 오른쪽 단추로 클릭하거나 탭 모서리에 포인터를 놓을 때 주황색 강조 표시와 함께 나타나는 파란색 삽입 화살표를 클릭하여 더 추가할 수 있습니다.

셰이프를 마우스 오른쪽 단추로 클릭한 다음 활성 탭 설정 을 클릭하여 탭의 음영을 변경합니다.

Tab 표시줄을 선택하면 컨테이너 도구의 서식 탭을 사용하여 Tab 표시줄 스타일을 변경할 수 있습니다.

맨 위로 이동

도구 모음 만들기

도형

메뉴 모음

메뉴 표시줄 항목에 대한 컨테이너입니다. 메뉴 표시줄 항목을 추가한 후 항목을 마우스 오른쪽 단추로 클릭하여 상태(예: 활성화 또는 선택), 형식(일반 또는 드롭다운), 아이콘에 대한 공간 추가 여부를 설정합니다. 바로 가기 메뉴를 사용하여 더 많은 메뉴 표시줄 항목을 추가하거나 파란색 삽입 화살표를 클릭할 수도 있습니다.

드롭다운 메뉴

메뉴 항목에 대한 컨테이너입니다. 메뉴 항목을 추가한 후 항목을 마우스 오른쪽 단추로 클릭하여 상태(예: 활성화 또는 선택), 형식(예: 일반 또는 라디오) 및 메뉴 너비로 설정할지 여부를 설정합니다. 바로 가기 메뉴를 사용하여 더 많은 메뉴 항목을 추가하거나 파란색 삽입 화살표를 클릭할 수도 있습니다.

드롭다운 메뉴를 메뉴 표시줄 항목에 연결하여 열려 있는 메뉴를 보여줄 수 있습니다. 메뉴 표시줄 항목에는 드롭다운 메뉴의 위쪽 모서리에 연결할 수 있는 연결점이 아래쪽 모서리에 있습니다.

맨 위로 이동

폼에 컨트롤 추가

도형

하이퍼링크

페이지에 하이퍼링크 셰이프를 놓을 때 링크 대상을 설정할 수 있도록 하이퍼링크 대화 상자가 나타납니다.

단추

단추 셰이프를 마우스 오른쪽 단추를 클릭하여 단추의 상태 또는 모양(예: 사용 가능 또는 선택)을 설정합니다.

목록 상자

목록 상자 항목에 대한 컨테이너입니다. 목록 상자를 마우스 오른쪽 단추로 클릭하여 목록의 방향을 설정합니다(예: 위쪽에서 아래쪽 또는 오른쪽으로). 목록 상자 항목을 추가한 후 항목을 마우스 오른쪽 단추로 클릭하여 상태를 설정하고(예: 사용 가능 또는 선택), 항목에 추가 공간(예: 아이콘 추가)을 추가하려는 경우 자리 표시자 설정 바로 가기 메뉴를 사용하여 목록 상자 항목을 더 추가하거나 파란색 삽입 화살표를 클릭할 수도 있습니다.

목록 상자를 선택하면 컨테이너 도구의 서식 탭을 사용하여 목록 상자 스타일을 변경할 수 있습니다.

확인란

확인란을 마우스 오른쪽 단추로 클릭하여 선택(예: 선택 또는 선택되지 않은 상태) 및 상태(예: 사용 가능 또는 마우스로 마우스를 들이기)를 설정합니다.

트리 컨트롤

트리 컨트롤 항목에 대한 컨테이너입니다. 트리 컨트롤 항목을 추가한 후 항목을 마우스 오른쪽 단추로 클릭하여 내기 제어를 제어하고 확장되거나 축소된 상태 및 자리 스페이스와 같은 트리의 속성을 설정합니다.

바로 가기 메뉴를 사용하여 트리 컨트롤 항목을 더 추가하거나 파란색 삽입 화살표를 클릭할 수도 있습니다.

트리 컨트롤을 선택하면 컨테이너 도구의 서식 탭을 사용하여 트리 컨트롤 스타일을 변경할 수 있습니다.

음성 메일 슬라이더 아이콘

슬라이더를 마우스 오른쪽 단추로 클릭하여 틱 표시의 번호 및 위치와 같은 속성을 설정할 수 있습니다. 노란색 컨트롤 핸들을 사용하여 슬라이더를 이동합니다.

진행률 표시줄

노란색 컨트롤 핸들을 사용하여 진행률 표시기를 이동합니다.

일정

페이지에 일정을 놓을 때 달력과 연도를 설정할 수 있도록 대화 상자가 나타납니다. 나중에 설정을 변경하려면 셰이프를 마우스 오른쪽 단추로 클릭한 다음 구성을 클릭합니다.

맨 위로 이동

추가 도움이 필요하신가요?

Office 기술 확장
교육 살펴보기
새로운 기능 우선 가져오기
Office Insider 참여

이 정보가 유용한가요?

의견 주셔서 감사합니다!

피드백을 주셔서 감사합니다. Office 지원 에이전트와 연락하는 것이 도움이 될 것 같습니다.

×