넥사크로 N 스케치는 UI 패턴으로 제공되는 화면 구성과 데이터를 선택해 클릭 몇 번으로 손쉽게 업무 화면 결과물을 만들 수 있습니다. 넥사크로 N 스케치를 설치했으니 웹브라우저에서 실행할 수 있는 화면을 만들어봅니다.
새로운 화면(Form) 만들기
넥사크로 N 스케치에서는 미리 만들어진 UI 패턴이나 레이아웃을 선택해 화면을 만들 수 있습니다.
1
넥사크로 N 스케치를 실행합니다.
2
메뉴에서 [FILE > New Form] 항목을 선택합니다.
3
New Form 위자드에서 [UI Pattern > Dashboard] 항목을 선택하고 두 번째 이미지를 선택합니다.
4
Form Name 항목을 입력하고 [Create] 버튼을 클릭합니다.
5
선택한 UI 패턴에 해당하는 화면이 작업영역에 표시되는 것을 확인합니다.
만든 화면을 웹브라우저에서 실행하기
넥사크로 N 스케치는 만들어진 화면을 바로 웹브라우저에서 실행할 수 있습니다.
1
메뉴에서 [RUN > Run Application] 항목을 선택합니다.
2
웹브라우저에 아래와 같은 화면이 표시되는지 확인합니다.
3
왼쪽 메뉴 영역에서 [TEST] 항목을 클릭하면 만든 화면이 표시됩니다.
화면에 표시되는 제목 바꾸기
선택한 UI 패턴에 따라 제목이나 화면 크기 등 몇 가지 속성을 변경할 수 있습니다.
1
작업영역에서 "공지사항" 항목을 마우스로 클릭해서 선택합니다.
오른쪽 DESIGN 패널에 COLUMNS, VIEW TYPE 정보가 표시되는 것을 확인합니다.
2
VIEW TYPE 목록에서 파란색 테두리로 표시된 항목 왼쪽 아래의 연필 모양 아이콘을 클릭합니다.
수정할 수 있는 속성 목록이 새 창으로 표시됩니다.
3
Title Text 항목을 "공지사항"에서 "Notice"로 수정합니다.
4
작업영역에 항목 이름이 변경된 것을 확인합니다.
5
메뉴에서 [RUN > Run Application] 항목을 선택합니다.
6
변경한 내용을 저장할 것인지 묻는 창이 표시되면 [Save] 버튼을 클릭합니다.
7
웹브라우저에 수정한 내용이 반영된 화면이 표시되는지 확인합니다.
화면에 표시되는 내용 바꾸기
넥사크로 N 스케치는 지정한 UI 패턴에 데이터 소스를 연결해서 표나 차트 등 다양한 형태로 데이터를 표시합니다.
1
작업영역에서 "공지사항" 항목을 마우스로 클릭해서 선택합니다.
오른쪽 DESIGN 패널에 COLUMNS, VIEW TYPE 정보가 표시되는 것을 확인합니다.
2
COLUMNS 항목으로 마우스 포인터를 이동하면 3개의 아이콘이 표시됩니다.
두 번째 "Data Source Editor" 항목을 클릭합니다.
3
작업영역에 Data Source 편집창이 열립니다.
4
첫 번째 줄 공지제목 항목을 더블클릭합니다.
항목을 더블클릭하면 내용을 수정할 수 있는 편집 상태가 됩니다.
5
내용을 "Nexacro Sketch 출시"에서 "넥사크로 N 스케치 출시"로 수정합니다.
수정 후 엔터키를 입력하거나 다른 항목을 클릭하면 편집창이 닫힙니다.
6
메뉴에서 [FILE > Save] 항목을 선택합니다.
7
변경한 내용을 반영할 것인지 묻는 창이 표시되면 [Save] 버튼을 클릭합니다.
데이터를 변경하면 해당 데이터를 사용하고 있는 화면에 영향을 주기 때문에 이를 확인하는 과정입니다.
8
작업영역 탭에서 "TEST.xfdl"을 클릭합니다.
9
변경한 내용이 반영되었는지 확인합니다.
만든 화면을 이미지로 저장하기
넥사크로 N 스케치에서 만든 화면은 이미지로 저장해 프레젠테이션을 위해 사용할 수 있습니다.
1
작업영역에 화면이 열려 있는 상태에서 메뉴[FILE > Export > Form Image] 항목을 선택합니다.
2
저장할 이미지 파일 형식을 선택합니다.
JPEG, SVG, PNG 중 하나를 선택할 수 있습니다.
화면 테마 변경하기
넥사크로 N 스케치는 화면의 각 요소의 색상을 테마를 선택해 한 번에 변경할 수 있습니다.
1
왼쪽 사이드바에서 테마 아이콘을 클릭합니다.
2
테마 목록에서 가장 아래 빨간색 테마를 클릭합니다.
3
메뉴에서 [FILE > Save] 항목을 선택합니다.
4
메뉴에서 [RUN > Run Application] 항목을 선택합니다.
5
웹브라우저에 아래와 같이 빨간색 테마가 반영된 화면이 표시되는지 확인합니다.