IUEditor Manual¶

환영합니다! 아이유에디터 공식 메뉴얼입니다.

한글 매뉴얼 PDF 다운받기 : http://iueditor.org/static/IUEditorManualKo.pdf

프로그램은 아래 홈페이지에서 다운받아 주세요.

IUEditor Homepage : http://iueditor.org
IUEditor Facebook Page (Korean): https://www.facebook.com/iueditor

아이유에디터란? What is IUEditor?¶

아이유에디터 IUEditor (이하 아이유에디터) 는 디자인 & 개발 프로세스를 단순화하는데 최적화되어 있는 웹에디터 입니다.

장점 Advantages¶

아이유에디터는 GUI 기반 프로그램으로 사용자가 코딩없이 프로토타입을 디자인할 수 있습니다.
하나의 프로젝트 파일로 여러 크기의 디바이스에 대응할 수 있는 프로덕트나 웹사이트를 개발할 수 있습니다.
파이썬 Python 과 같은 백엔드 Backend 와 통합되어 있습니다.

가치 Values¶

아이유에디터는 디자이너가 퍼블리셔의 도움없이 개발자와 협업할 수 있게하여, 여러분의 팀, 회사의 시간과 비용을 절약할 수 있습니다.
여러분의 회사나 팀이 프로덕트나 웹사이트를 빠르게 출시할 수 있게 하여, 린 프로세스 Lean Process를 도입하고 더 나은 결과물을 만들 수 있습니다.

조금더 ...¶

Javascript 매뉴얼은 http://cdn.iueditor.org/js/readme.html 에 있습니다.

구동환경 Environment¶

아이유에디터 는 Mac OS X 10.14(모하비) 이상의 환경에서만 동작합니다.

브라우저 지원 : Chrome, Safari, Firefox, Opera - current / IE 9.0 이상

메뉴 Menu¶

아이유에디터 IUEditor¶

About IUEditor : 사용자 IUEditor의 버젼 정보를 보여줍니다.
Preference : 사용자 IUEditor의 환경설정 Preference 창을 엽니다.

파일 File¶

New Project : 새 프로젝트 만들기 창을 띄웁니다.
Open : Finder에서 오픈할 프로젝트를 찾습니다.
Open Recent : 최근 사용한 IU프로젝트 파일을 오픈합니다.
Save : 현재 프로젝트 파일을 저장합니다.
Save As : 현재 프로젝트 파일을 다른 이름으로 저장합니다.
Close : 현재 프로젝트를 닫습니다.

프로젝트 Project¶

Build : 프로젝트를 브라우저로 빌드합니다. 상단툴바의 빌드실행버튼과 동일한 기능입니다.
Build Clean : 빌드 데이터를 지웁니다. 빌드에 오류가 있을 때 문제를 해결할 수 있습니다.
Stop : 빌드를 멈춥니다.
Project Setting : 프로젝트 셋팅 Project Setting 패널을 띄웁니다.
Project Code : 프로젝트 코드 Project Code 패널을 보여줍니다.
Refresh Page : 페이지를 새로고침 합니다. 캔버스에 오류가 있을 때 문제를 해결할 수 있습니다.

뷰 View¶

Show Tab Bar : 탭바를 보여줍니다.
Show All Tabs : 전제 탭을 보여줍니다.
ZoomOut : 캔버스를 확대합니다.
ZoomIn : 캔버스를 축소합니다.
Outline : 위젯 외곽선을 보여줍니다.
Ruler : 스테이지에 룰러 요소를 보여줍니다.
Guide : 설정해 놓은 가이드라인을 보여줍니다.
Tracing : 이미지 트레이싱 기능을 on/off 합니다.
Enter Full Screen : 전체화면으로 전환합니다.

창 Window¶

Event : 이벤트 패널 Event Panel 을 보여줍니다.
Resource : 리소스 패널 Resource Panel 을 보여줍니다.
Memo : 메모 패널 Memo Panel 을 보여줍니다.
Manage Custom Widgets : 커스텀 위젯 관리 패널 Manage Custom Widgets Panel 을 보여줍니다.
Log : 로그패널을 보여줍니다.

지원 Help¶

Search : IUEditor의 기능을 검색합니다.
Documentation : IUEditor 메뉴얼 사이트를 방문합니다.
Ask IUEditor : 프로그램에 대한 문의를 할 수 있는 웹페이지로 이동합니다.
Acknowledgements : 프로그램에 사용된 API에 대한 정보를 보여줍니다.

상단 툴바 Top Toolbar¶

상단 툴바는 커맨드 Command / 탭 메뉴 Tab Menu / 스테이지 Stage 영역으로 구분됩니다.

커맨드 Command¶

커맨드 영역은 프로젝트 레벨에서 동작하는 기능 들로 구성되어 있습니다.

빌드 실행 버튼 : 현재 스테이지에 있는 요소들을 기준으로 HTML/CSS/JS 파일을 생성합니다. 빌드 생성 전 아이유 프로젝트를 로컬에 저장해야만 빌드가 가능합니다.

서버 중지 버튼 : 로컬 호스트 서버를 중지합니다.

빌드 타입 설정 버튼 : 빌드를 실행할 타입을 설정합니다. 생성한 프로젝트 타입에 따라 옵션이 달라집니다.

디자인 / 디벨롭 / 프로토타입 모드 변경 버튼 : 프로그램 기본 설정은 디자인 모드 Design Mode 입니다. 이 버튼을 눌러 디자인 모드 Design Mode, 디벨롭 모드 Develop Mode , 프로토타입 모드 Prototype Mode 로 각각 변경할 수 있습니다.

탭 메뉴 Tab Menu¶

상단 툴 바 중앙에 위치한 탭 메뉴 영역에서는 스타일 / 속성 / 텍스트 / 트랜스폼 / 마우스-오버 / 링크 탭 메뉴가 있습니다. 각 탭 메뉴를 선택하면, 상단 툴바 하단의 프로퍼티 패널에 보여집니다.

스타일 탭 Style Tab : 선택한 위젯의 라운딩 / 보더 / 박스 쉐도우 / 투명도 / 배경 이미지 등을 설정할 수 있습니다.
속성 탭 Property Tab : 선택한 각 위젯의 개별 속성을 변경할 수 있습니다. 각 위젯 별로 설정 가능한 항목이 다릅니다.
텍스트 탭 Text Tab : 폰트 패밀리 / 두께 / 크기 / 컬러 / 행간 / 자간 / 제목 텍스트 / 정렬 등을 설정할 수 있습니다.
트랜스폼 탭 Transform Tab : 선택한 위젯의 회전 값 Rotation 값 등을 설정하여 형태를 변형시킬 수 있습니다.
마우스-오버 탭 Mouse-Over Tab : 선택한 위젯이 마우스 오버 상태일 때 변화하는 값을 설정 할 수 있습니다.
링크 탭 Link Tab : 선택한 위젯에 링크 Hyperlink 를 설정할 수 있습니다.

스테이지 Stage¶

트레이싱 Tracing : 트레이싱은 디자인 이미지를 스테이지 배경에 추가하여, 좀 더 빠른 작업이 가능하도록 도와줍니다. 트레이싱 아이콘을 눌러 트레이싱 모드를 on/off 시킬 수 있으며, 트레이싱 이미지 팝업에서 좀 더 세세한 조정이 가능합니다.
페이지 설정 Page Setting : 현재 작업 중인 페이지의 너비 / 미디어쿼리 등을 변경합니다. (미디어 쿼리 팝업을 열어 새로운 쿼리를 생성하거나, 기존 미디어쿼리를 복사하여 생성할 수도 있습니다. )
줌 Zoom : 작업 중인 페이지의 줌-인/아웃 을 설정합니다.

중앙 툴바 Middle Toolbar¶

중앙 툴바는 캔버스 바로 상단에 위치하며, 새로고침 / 포지션 / 프레임 / 배경컬러 / 위젯 보기 버튼 영역으로 구분됩니다.

새로고침 Refresh¶

현재 캔버스를 새로고칩니다.

포지션 Position¶

선택된 요소의 포지션을 설정합니다. (단위를 % 로 바꿀 경우, x/y 값은 드래그로 변경되지 않으며 w/h 값 역시 드래그로 변경되지 않습니다.)

포지션 Position : 위젯의 포지션을 Absolute, Relative, Fixed 중 한 가지로 설정합니다.

서브 포지션 Sub Position : 위젯의 포지션 기준을 무엇으로 할 지 서브 포지션을 설정합니다.

정렬 버튼 Align Button : 위젯을 가운데로 맞춥니다. 여러위젯을 선택하여 정렬할 수 있습니다.

포지션 속성 설정 팝업 Position setting popup : 요소의 포지션 가운데 고정 Fixed Center Position, 오버플로우 Overflow, z-index 속성을 변경할 수 있습니다.

x 좌표 입력필드 & 스텝퍼 X position input field & Stepper : 요소의 x 좌표를 직접 입력하거나, 스텝퍼를 이용하여 1px 씩 조절합니다. px 또는 % 로 단위를 변경할 수 있습니다.

y 좌표 입력필드 & 스텝퍼 Y position input field & Stepper : 요소의 y 좌표를 직접 입력하거나, 스텝퍼를 이용하여 1px 씩 조절합니다. px 또는 % 로 단위를 변경할 수 있습니다.

프레임 Frame¶

선택된 요소의 높이와 너비값을 설정합니다.

Width 값 입력필드 & 스텝퍼 Width value input field & Stepper : 요소의 width 값을 직접 입력하거나, 스텝퍼를 이용하여 1px 씩 조절합니다. px 또는 % 로 단위를 변경할 수 있습니다.

Height 값 입력필드 & 스텝퍼 Height value input field & Stepper : 요소의 height 값을 직접 입력하거나, 스텝퍼를 이용하여 1px 씩 조절합니다. px 또는 % 로 단위를 변경할 수 있습니다.

최소/최대 크기 설정 팝업 Min/Max-width & Min/Max-height setting popup : 요소의 최소/최대 높이 또는 너비를 설정할 수 있습니다.

배경컬러 Background Color¶

선택된 요소의 배경색을 선택하거나 투명값으로 설정할수 있습니다.

위젯 패널 Widget Panel¶

위젯 툴바는 화면 오른쪽에 위치하며 중앙 툴바의 오른쪽 끝에 있는 Show/Hide 위젯 토글 버튼 으로 보여주고 감출 수 있습니다. 아이유 위젯 / 커스텀 위젯 탭으로 구분됩니다.

아이유 위젯 IU Widgets¶

IU WIDGETS 탭에서는 아이유에디터에서 사용 가능한 모든 위젯들이 보여집니다. 기본적으로 박스 / 텍스트 / 이미지 / 셀 위젯 을 제공하며, 웹페이지에서 활용할 수 있는 다양한 위젯을 지원합니다. Base, Complex, Programming 그룹으로 구분되어 있습니다. Show/Hide 버튼 으로 각 그룹의 위젯 목록을 펼치고 접을 수 있습니다. 오른쪽 클릭 으로 위젯의 상세정보를 확인할 수 있습니다.

기본 위젯에 대해 알아보기 Go To Widget Property.

커스텀 위젯 Custom Widgets¶

CUSTOM WIDGETS 탭에서는 위젯 불러오기 로 불러온 커스텀 위젯들이 보여집니다. 커스텀 위젯이 속한 그룹명으로 구분되어 있으며 Show/Hide 버튼으로 각 그룹의 위젯 목록을 펼치고 접을 수 있습니다. 드래그 앤 드롭 이나 더블 클릭 하여 위젯을 캔버스에 추가 할 수 있습니다. 오른쪽 클릭 으로 커스텀 위젯의 상세정보를 확인할 수 있습니다. 상세정보는 위젯 관리 패널 에서 수정할 수 있습니다.

새로고침 버튼 Refresh Button : 커스텀 위젯 라이브러리를 최신상태로 업데이트 합니다.

검색 영역 Search Field : 커스텀 위젯을 이름이나 태그로 검색합니다.

확대/축소 버튼 Zoom in/Zoom out Button : 커스텀 위젯의 섬네일을 확대/축소 합니다.

커스텀 위젯 불러오기에 대해 알아보기 Go To Manage Custom Widgets Panel.

네비게이션 Navigation¶

네비게이션 영역은 캔버스 바로 좌측에 위치하며, 스트럭쳐 / 페이지 / 컴포지션 영역으로 구분됩니다.

스트럭쳐 Structure¶

현재 선택한 페이지에 속한 요소들 (섹션, 헤더, 푸터, 페이지컨텐트, 위젯 등)의 구조를 트리형태로 보여주는 패널입니다. 요소를 삭제 하거나, 드래그 앤 드롭으로 위치를 이동 할 수도 있으며, 새로운 섹션을 추가 할 수 있습니다. 스트럭쳐에 추가된 요소들의 이름은 사용자가 원하는 이름으로 수정가능합니다.

팝업 추가 버튼 Add New Popup Button : 새로운 팝업을 추가합니다.

패널 추가 버튼 Add New Panel Button : 새로운 패널을 추가합니다.

섹션 추가 버튼 Add New Section Button : 새로운 섹션을 추가합니다.

삭제 버튼 Delete Button : 선택된 위젯을 삭제합니다.

페이지 Pages¶

프로젝트에서 사용되는 모든 페이지들을 관리하는 패널입니다. 새로운 페이지/폴더를 생성 하거나 삭제 할 수 있습니다. 또한 페이지 설정을 통해 페이지의 레이아웃이나 정보를 변경할 수 있습니다. 페이지에 추가된 요소들의 이름은 사용자가 원하는 이름으로 수정가능합니다.

커스템 페이지 추가 버튼 Add New Custom Page Button : 새로운 템플릿 페이지를 추가합니다.

페이지 추가 버튼 Add New Page Button : 새로운 페이지를 추가합니다.

그룹 추가 버튼 Add New Group Button : 새로운 페이지 그룹을 추가합니다.

삭제 버튼 Delete Button : 선택된 페이지나 그룹을 삭제합니다.

페이지에 마우스 오버시 해당 페이지의 설정을 할 수 있습니다. 페이지 레이아웃이나 기타 해당하는 페이지의 속성을 정합니다.

컴포지션 Compositions¶

임포트 위젯이나 헤더, 푸터, 사이드바로 임포트할 컴포지션을 관리하는 패널입니다. 새로운 컴포지션/폴더를 생성하거나 삭제할 수 있습니다.

커스텀 컴포지션 추가 버튼 Add New Custom Composition Button : 새로운 커스텀 컴포지션을 추가합니다.

컴포지션 추가 버튼 Add New Page Button : 새로운 컴포지션을 추가합니다.

그룹 추가 버튼 Add New Group Button : 새로운 컴포지션 그룹을 추가합니다.

삭제 버튼 Delete Button : 선택된 컴포지션이나 그룹을 삭제합니다.

참고사항 References¶

위젯/파일/그룹 이름 수정

각 선택된 셀에서 엔터/탭 키를 이용하여 수정모드로 들어갈 수 있습니다. 페이지/컴포지션에서 기본이름으로 정해진 페이지/컴포지션은 이름을 수정할 수 없습니다. 그밖에도 아래에 이름에 사용할 수 없는 단어들이 나열되어 있습니다.

주석

id / ifdef / default - 이 단어들은 네이밍에 사용할 수 없습니다.

캔버스 Canvas¶

캔버스는 아이유에디터에서 작업하는 화면을 말합니다. 위젯이나 섹션을 추가할 수 있으며, 수정한 내용이 바로바로 보여집니다.

컨텍스트 메뉴 - 단일 위젯 Context Menu - Single Widget¶

위젯을 선택한 상태이거나, 캔버스 상에서 우클릭을 하면, 컨텍스트 메뉴를 호출할 수 있습니다.

위젯 Widget : 현재 마우스 포인터 위치에 있는 모든 위젯을 보여주어 선택을 손쉽게 할 수 있도록 도와줍니다.

메모 추가 Add Memo : 현재 선택된 위젯에 메모를 추가할 수 있는 메모 패널 을 불러옵니다.
위젯 내보내기 Export to Widget : 현재 선택된 위젯을 커스텀 위젯 Custom Widget 으로 만들 수 있는 위젯 내보내기 패널 을 호출합니다.
이벤트 보기 Show Event : 현재 선택된 위젯에 연결된 이벤트를 수정 / 추가 할 수 있는 이벤트 패널 을 불러옵니다.
탭 선택 Select Tab : 원하는 속성 탭 으로 바로 이동합니다.

컨텍스트 메뉴 - 복수 위젯 Context Menu - Multiple Widget¶

복수의 위젯을 선택한 상태에서 우클릭을 하면, 컨텍스트 메뉴를 호출할 수 있습니다.

정럴 Align : 현재 선택된 위젯들을 정렬하는 기능입니다. 좌측 정렬 Align Left, 중앙 정렬 Align Center, 우측 정렬 Align Right, 상단 정렬 Align Top, 세로 중앙 정렬 Align Middle, 하단 정렬 Align Bottom 이 있습니다.
크기 Size : 현재 선택된 위젯들의 크기를 맞추어 주는 기능입니다. 가로 맞춤 Match Width, 세로 맞춤 Match Height 가 있습니다.

개발자 모드 Developer Mode¶

상단 툴바에서 모드 변경 버튼 을 클릭하면 개발자 모드로 전환할 수 있습니다.

개발자모드로 바꾸면 오른쪽에 코드 패널 이 나타납니다. HTML ID / 커스텀 코드 Custom Code 영역으로 구분됩니다.

HTML ID¶

위젯의 HTML ID를 변경할 수 있습니다. Export HTML ID 체크박스가 있습니다. HTML ID는 Preference - Project에서 항상 내보낼 지, 선택된 위젯만 내보낼 지 기본설정을 변경할 수 있습니다.

커스텀 코드 Custom Code¶

캔버스에서 선택된 위젯에 백엔드, custom css, script 코드를 입력할 수 있습니다. 위젯과 프로젝트 타입에 따라 탭 구성이 달라집니다.

프로토타입 모드 Prototype Mode¶

상단 툴바에서 Mode Switch Button 을 눌러 Prototype Mode 로 전환할 수 있습니다.

여러명이 하나의 프로젝트를 같이 작업할 때, 프로토타입 모드에서 프로젝트와 관련된 히스토리와 워크플로우, 메모 등을 공유하고 관리할 수 있습니다. 프로토타입 모드는 히스토리 Revision History / 워크플로우 Project Workflow / 화면 정의 Node Description 세가지 페이지를 제공합니다. Refresh Workflow 버튼은 워크플로우를 초기 상태로 리셋 시킵니다. Build Scenario 버튼은 프로토타입 문서를 HTML Prototype 으로 빌드합니다. Refresh Thumbnail 버튼을 누르면 워크플로우와 페이지 리스트에 있는 페이지 섬네일들을 최신상태로 업데이트 시킵니다.

히스토리 Revision History¶

프로젝트의 히스토리 Revision History 를 보여줍니다. 히스토리를 변경하거나 추가할 수 있습니다.

Add New Date Button : 히스토리 테이블에 새 히스토리를 추가합니다.
Remove Date Button : 히스토리 테이블에서 선택된 히스토리를 지웁니다.

워크플로우 Project Workflow¶

프로젝트의 워크플로우 Workflow 를 보여줍니다. 섬네일을 드래그 앤 드롭 하여 노드를 추가할 수 있습니다. Delete키를 눌러 선택된 노드를 지울 수 있습니다.

Default thumbnails : 프로젝트에 포함된 페이지들의 섬네일 목록.
Custom thumbnails : Page Capture 버튼으로 캡쳐된 페이지들의 섬네일 목록.

주석

커스텀 섬네일은 Editor Mode 에서 툴바의 Page Capture 를 눌러 추가할 수 있습니다.

Rectangle Button : 선택된 노드 아래에 사각형 다이어그램을 추가합니다.
Rhombus Button : 선택된 노드 아래에 다이아몬드 다이어그램을 추가합니다.
Inward Label : 선택된 노드 위에 표시되는 텍스트를 입력합니다.
Outward Label : 선택된 노드 아래에 표시되는 텍스트를 입력합니다.

개별 화면 정의 Node Definition¶

각 페이지의 개별 화면 정의 Node Definition 화면을 보여줍니다. 화면 정의 Screen description과 기타사항 Exception area에 내용을 추가하고 편집할 수 있습니다. 워크플로우 화면에서 섬네일을 더블클릭 해도 개별 화면 정의 Node Definition 로 넘어갑니다.

메모 이미지 추가 영역 : 리소스 패널에서 메모 넘버링을 대체할 이미지를 선택합니다.

Add Memo Button : 메모 테이블에 새 메모를 추가합니다.

Delete Button : 메모 테이블에서 선택된 메모를 지웁니다.

스크린샷 영역을 클릭하면 클릭한 지점에 메모를 표시할 수 있습니다.

프로젝트 셋팅 Project Setting¶

프로젝트 > 프로젝트 셋팅 메뉴를 실행하거나 ⇧⌘P 키를 실행하면 프로젝트 셋팅 패널이 보여집니다. 디폴트 Default , 메타 Meta, 빌드 Build, 장고 Django 탭 메뉴를 눌러 각 항목의 내용을 추가하거나 수정할 수 있습니다.

디폴트 Default¶

Project Title : 브라우져에서 보여질 프로젝트의 타이틀을 입력합니다.
Favicon : 파비콘 이미지를 설정합니다. 리소스로 불러들여온 후에 사용이 가능합니다.
Custom Header Code : 프로젝트 내 모든 페이지에 공통으로 적용될 커스텀 코드를 입력합니다.

주석

Project Default Width 는 프로젝트 생성 이후에는 변경이 불가능합니다.

메타 Meta¶

Meta Image : 메타이미지를 설정합니다. 외부경로 (URL)만 입력 가능합니다.
Author : 메타데이타에 포함될 제작자의 이름을 입력합니다.
Project URL : 메타데이타에 포함될 프로젝트의 URL 경로를 입력합니다.
Project Keywords : 메타데이타에 포함될 프로젝트의 키워드를 입력합니다. (복수 입력 가능 / 엔터나 콤마로 구분)
Project Description : 메타데이타에 포함될 프로젝트 설명을 입력합니다.
Facebook Admin : 메타데이타에 포함될 페이스북 어드민 아이디를 입력합니다.
Facebook App ID : 메타데이타에 포함될 페이스북 앱 아이디를 입력합니다.

빌드 Build¶

Build Path : 빌드 실행 시 생성되는 폴더의 경로를 설정합니다.
Build Resource Path : 빌드 실행 시 생성되는 리소스 폴더의 경로를 설정합니다.
Resource Prefix : 프로젝트가 사용할 리소스 폴더의 경로를 설정합니다.
Link Prefix : 프로젝트가 사용할 링크의 경로를 설정합니다.
HTML Port : 프로젝트가 사용할 로컬호스트 서버의 포트를 설정합니다.

주석

프로젝트가 사용하는 주소가 루트 패스 root path 가 아닐 경우, 리소스 프리픽스와 링크 프리픽스 경로를 수정해야 합니다.

장고 Django¶

주석

장고 셋팅은 장고 프로젝트 에서만 설정 가능합니다.

Django Build Path : 빌드 실행 시 생성되는 장고 폴더의 경로를 설정합니다.
Django Resource Path : 빌드 실행 시 생성되는 장고 리소스 폴더의 경로를 설정합니다.
Django Resource Prefix : 장고 프로젝트가 사용할 리소스 폴더의 경로를 설정합니다.
Runserver after build : 빌드 실행 이후에 로컬호스트 서버 실행 여부를 설정합니다.
Django Port : 장고 프로젝트가 사용할 로컬호스트 서버의 포트를 설정합니다.
Python Interpreter Path : 장고 프로젝트가 사용하는 파이썬 인터프리터의 경로를 설정합니다.
Django Manage.py Path : 장고 프로젝트가 사용하는 Manage.py 파일의 경로를 설정합니다.

프로젝트 코드 Project Code¶

프로젝트 코드 버튼 Project > Project Code ⇧⌘C 을 눌러 프로젝트 코드 패널을 불러올 수 있습니다.

해당 코드는 모든 페이지에 들어갑니다.

HTML¶

<head>
   <!-- start : your code -->
   <!-- auto generated code by IUEditor -->
   <!-- end : your code -->
 </head>

Back-end¶

<!-- page head custom code for back-end : your code -->
<!DOCTYPE html>
<head>
   <!-- start : your code -->
   <!-- auto generated code by IUEditor -->
   <!-- end : your code -->
 </head>

리소스 패널 Resource Panel¶

리소스 패널은 아이유에디터 메뉴 View > Resource 항목을 활성화 시키면 등장합니다. Image, Video 같은 사용자 리소스를 추가, 관리할 수 있습니다. 아이유에디터에서 제작 불가능한 이미지나 동영상 요소, 클립아트를 불러올 수 있는 패널입니다. 임포트 가능한 파일 종류는 이미지파일, 동영상 파일, 자바스크립트, css, json 이 있습니다.

주석

Supported Image File Types : gif, jpg, jpeg, png, ico, icns, svg, bmp

주석

Supported Video File Types : mp4, ogg, webm

Import Resource Button : 파인더를 통해 외부리소스를 불러옵니다.
Resource Type Select Button : 리소스 패널에 있는 파일을 모두 보기 / 이미지 보기 / 동영상 보기 로 필터링하여 줍니다.
Add New Folder Button : 리소스 패널에 새로운 폴더를 생성합니다.
Delete Button : 선택한 파일 또는 폴더를 삭제합니다.

리소스 관리 팁 Resource Management Tip¶

폴더를 생성하여 리소스를 관리 할 수 있습니다.
이미지 리소스를 이미지 위젯에 드래그 & 드롭하여 넣을 수 있습니다.

이벤트 패널 Event Panel¶

이벤트 패널은 아이유에디터 메뉴 View > Event 항목을 활성화 시키면 등장합니다. 스크롤 애니메이터, 베리에이블 트리거 같은 이벤트를 추가할 수 있습니다.

스크롤 애니메이터 Scroll Animator¶

세로로 긴 웹페이지를 스크롤 하게 될 경우, 선택한 요소들에 대한 애니메이션 이벤트를 추가합니다. 스크롤 애니메이터는 해당요소가 브라우저 중앙에 근접할수록 After값에 가까워집니다. 그래서 페이지를 스크롤해서 해당 요소에 포커싱 될 때 Before 값에서 After 값으로 조정됩니다.

X-Position : X 위치 값에 대한 애니메이션을 추가합니다.

Y-Position : Y 위치 값에 대한 애니메이션을 추가합니다.

Opacity : Opacity 투명도 값에 대한 애니메이션을 추가합니다.

베리에이블 Variable¶

선택된 위젯에 특정액션이 발생되도록 (롤오버 or 클릭) 변수값과 옵션을 설정합니다.

Variable Name : 현재 페이지에 설정 된 모든 Variable 리스트를 보여줍니다. row를 클릭하면 해당 Variable을 사용하는 Triggered Widget 리스트를 볼 수 있습니다. Variable을 사용하는 Widget이 없으면 Variable Name 리스트에서 삭제 됩니다.

Triggered Widget : Variable Name 에서 선택한 Variable을 사용하는 Triggered Widget 리스트를 보여줍니다. row를 클릭하면 해당 위젯으로 포커스가 이동합니다. row를 선택한 후, delete 키(키보드)를 누르거나 New Variable Name에서 삭제하면 Triggered Widget 리스트에서 삭제 됩니다.

New Variable Name : 트리거의 변수값을 설정합니다. ID나 Name과 같은 역할을 합니다.

Value Count : 트리거의 초기값과, 최대 몇 개의 리시버를 가질지 최대값을 설정합니다.

Trigger Action : 마우스오버 또는 클릭 시 트리거가 동작하도록 설정합니다.

리시버 Receiver¶

트리거메뉴에서 정의한 변수가 Equation의 조건과 일치하게 될 경우, 리시버가 설정된 위젯을 보여줍니다.

Variable Name : 현재 페이지에 설정 된 모든 Variable 리스트를 보여줍니다. row를 클릭하면 해당 Variable을 사용하는 Receiver Widget 리스트를 볼 수 있습니다. 예를 들어, a라는 Variable을 선택하면 a==1, aa==1, 1==abc 와 같은 a 가 포함된 Equation을 갖는 위젯들을 보여줍니다. Variable을 사용하는 Widget이 없으면 Variable Name 리스트에서 삭제 됩니다.

Receiver Widget : Variable Name 에서 선택한 Variable을 사용하는 Receiver Widget 리스트를 보여줍니다. row를 클릭하면 해당 위젯으로 포커스가 이동합니다. row를 선택한 후, delete 키(키보드)를 누르거나 Equation에서 삭제하면 Receiver Widget 리스트에서 삭제 됩니다.

Equation : Trigger에서 지정한 변수에 대한 조건식을 지정합니다. 예시) a==1

Scroll Location : Receiver 위젯의 Equation이 만족했을 때, 위젯이 보여지는 스크롤 위치를 지정하는 옵션입니다. 옵션을 지정하면 Start와 End사이에 스크롤이 위치했을 때에만 보여지고, 옵션을 지정하지 않으면 스크롤 위치와 상관없이 보여지게 됩니다.

Animation Effect : Receiver 위젯이 보여질 때 나타나는 애니메이션 효과 입니다.

Duration : Animation Effect가 실행되서 끝날 때 까지의 시간입니다. 예를 들어, 3.0s를 입력하면 Animation Effect가 3초동안 실행됩니다.

메모 패널 Memo Panel¶

메모 패널은 아이유에디터 메뉴 View > Memo 항목을 실행시키면 등장합니다. 선택된 위젯에 부가 설명을 추가할 때 사용됩니다.

Show / Hide Table Toggle Button : 현재 페이지에서 추가된 모든 메모를 볼 수 있는 테이블 뷰를 숨김 / 보임 시킬수 있는 토글 버튼 입니다.
Title : 타이틀을 입력합니다.
Memo : 내용을 입력합니다.

주석

메모 테이블 뷰에서는 각 메모의 넘버 / 타이틀 / 내용 을 수정할 수 있습니다.

커스텀 위젯 관리 패널 Manage Custom Widgets Panel¶

위젯 불러오기 패널은 아이유에디터 메뉴 Project - Manage Custom Widgets 항목을 실행하면 등장합니다. 사용자가 내보내기 Export 한 커스텀 위젯 Custom Widget, 페이지 Page, 컴포지션 Composition 파일을 프로젝트에 추가할 때 사용됩니다. 그리드 뷰 의 확대/축소 보기 모드가 지원되며, 우측에서 커스텀 위젯 정보 Custom Widget Information 를 수정할 수 있습니다. 패널 상단의 토글 버튼으로 상세 화면을 열고 닫을 수 있습니다.

상단 바 Top Bar¶

Widget Tab : 불러오기 한 위젯의 목록을 관리하고 내보내기 한 커스텀 위젯을 불러옵니다.
Page Tab : 불러오기 한 페이지의 목록을 관리하고 내보내기 한 페이지를 불러옵니다.
Composition Tab : 불러오기 한 컴포지션의 목록을 관리하고 내보내기 한 컴포지션을 불러옵니다.
Widget Info Toggle Button : 커스텀 위젯 정보 Custom Widget Information 를 껐다 켤 수 있는 토글 버튼입니다.
Search Bar : 커스텀 위젯의 이름을 검색할 수 있습니다.

커스텀 위젯 정보 Custom Widget Information¶

패널 우측에는 선택된 커스텀 위젯의 정보가 보여집니다.

Preview : 커스텀 위젯의 프리뷰를 보여줍니다.
Zoom In / Out : 프리뷰 화면을 줌 인 / 아웃 시킵니다.
Name : 커스텀 위젯의 파일 명입니다.
Group : 커스텀 위젯의 그룹 명입니다.
Tag : 커스텀 위젯에 추가된 태그 목록입니다. 클릭하여 편집할 수 있습니다.
Description : 커스텀 위젯의 상세 설명입니다. 클릭하여 편집할 수 있습니다.

위젯 내보내기 패널 Export Widget Panel¶

위젯 내보내기 패널은

스트럭쳐나 캔버스에서 특정 위젯을 선택하여 컨텍스트 메뉴 > 위젯 내보내기 Export Widget 실행
페이지를 선택하여 컨택스트 메뉴 > 페이지 내보내기 Export Page 실행
컴포지션을 선택하여 컨텍스트 메뉴 > 컴포지션 내보내기 Export Composition 실행

하여 불러올 수 있습니다.

Customize Viewport Size : 커스텀파일의 뷰포트를 원하는 사이즈로 조정합니다.
Name : 커스텀 파일의 이름을 입력합니다.
New Group : 커스텀 파일의 그룹을 입력합니다.
Export Directory : 커스텀 파일을 내보낼 경로를 설정합니다.
Description : 커스텀 파일에 설명을 입력합니다.

페이지 내보내기 Export Page (.iup)¶

위 2) 상황에서 내보내기 Export 기능을 실행 하면, 로컬디스크에는 커스텀페이지이름.iup 파일이 생성됩니다. 이 파일은 네비게이션 - 페이지 탭 에서 커스텀 페이지 추가 버튼 으로 불러올 수 있습니다.

컴포지션 내보내기 Export Composition (.iuc)¶

위 3) 상황에서 내보내기 Export 기능을 실행 하면, 로컬디스크에는 커스텀위젯이름.iuc 파일이 생성됩니다. 이 파일은 네비게이션 - 컴포지션 탭 에서 커스텀 컴포지션 추가 버튼 으로 불러올 수 있습니다.

프로젝트 타입 Project Type¶

디폴트 프로젝트 Default Project¶

백엔드가 연결되지 않는 프로젝트 타입입니다. 파일 > 새 프로젝트 를 실행하여 새 프로젝트 창을 열어 선택할 수 있습니다.

resource/iu_manual_project_new_default.png

Empty Page (Header / Footer) : 빈 레이아웃 (헤더 + 페이지 컨텐트 + 푸터) 프로젝트를 생성합니다.
Empty Page (Header) : 빈 레이아웃 (헤더 + 페이지 컨텐트) 프로젝트를 생성합니다.
Empty Page (Blank) : 빈 레이아웃 (페이지 컨텐트) 프로젝트를 생성합니다.
IUPro : IUPro 템플릿 프로젝트를 생성합니다.
Paper : IUPaper 템플릿 프로젝트를 생성합니다.
IUAcademy : IUAcademy 템플릿 프로젝트를 생성합니다.
Recent Project : 최근 사용했던 (최대 5개) 프로젝트 목록입니다.
Open Project : 사용할 프로젝트를 직접 선택합니다.

주석

빈 레이아웃 프로젝트를 선택 시, 새 프로젝트 창 하단에서 프로젝트의 기본 너비를 설정할 수 있습니다.

장고 프로젝트 Django Project¶

백엔드가 연결되는 프로젝트 타입입니다. 파일 > 새 프로젝트 를 실행하여 새 프로젝트 창을 열어 선택할 수 있습니다.

사용가능한 메뉴는 디폴트 프로젝트와 동일합니다.

resource/iu_manual_project_new_django.png

Angular JS프로젝트 Angular JS Project¶

백엔드가 연결되는 프로젝트 타입입니다. 파일 > 새 프로젝트 를 실행하여 새 프로젝트 창을 열어 선택할 수 있습니다.

사용가능한 메뉴는 디폴트 프로젝트와 동일합니다.

resource/iu_manual_project_new_angularjs.png

페이지 Page¶

페이지 세팅 Page Setting¶

페이지에는 직접적으로 위젯을 삽입할수 없습니다. 먼저 페이지 설정 버튼을 눌러 페이지 세팅 패널을 통해, 페이지의 레이아웃을 정한 후 각각 해당하는 곳에 위젯을 삽입합니다.

Empty Layout : 빈 레이아웃 입니다.
Header + Footer : 헤더 + 페이지 컨텐트 + 푸터로 구성되어 있습니다.
Header : 헤더 + 페이지 컨텐트로 구성되어 있습니다.
Footer : 페이지 컨텐트 + 푸터로 구성되어 있습니다.
페이지 타이틀 Page Title : 현재 페이지의 타이틀을 입력합니다.
페이지 키워드 Page Keyword : 현재 페이지의 키워드를 입력합니다. (여러 키워드 입력 가능)
페이지 설명 Page Description : 현재 페이지의 페이지 설명을 입력합니다.
페이지 메타 이미지 Page Meta Image : 현재 페이지의 메타 이미지 경로를 입력합니다. (URL 을 입력)

페이지 커스텀 코드 Page Custom Code¶

Page Header Custom Code : 페이지 헤더 Header 부분에 추가할 커스텀 코드를 입력합니다.
Page Header Custom Code for Backend : 페이지 헤더 Header 부분에 추가할 백엔드 커스텀 코드를 입력합니다.

페이지 기본 위젯 Page Default Widget¶

페이지 Page¶

페이지는 html 문서와 동일하며, 속성 탭에서 페이지 구조를 변경할 수 있습니다.

페이지컨텐트 Page Content¶

페이지의 본문 컨텐츠 영역입니다. 페이지 컨텐트 요소는 삭제 불가능하며, 하위요소로 섹션을 추가할 수 있습니다.

섹션 Section¶

페이지컨텐트의 하위 요소인 섹션입니다. 섹션에는 위젯을 자유롭게 추가할 수 있습니다.

센터박스 Centered Box¶

섹션이 생성되면 자동으로 추가되는 위젯요소입니다. 페이지의 요소를 가운데로 정렬시키기 위해 사용됩니다. 사이즈나 위치조절이 불가능하며, 너비는 작업중인 미디어쿼리 사이즈를 따라갑니다. 가운데 정렬이 불필요할때는 삭제해도 무관합니다.

패널 Panel¶

패널 그룹의 + 버튼을 눌러 패널을 추가합니다. 패널을 호출하려면 위젯과 링크를 생성하고 패널에 대한 링크 대상을 선택해야합니다.

컴포지션 Composition¶

반복되는 위젯의 조합을 Composition내에서 구성하여 Import/Header/Footer/Collection에서 사용할 수 있습니다.

기본 위젯 Basic Widget¶

박스 Box¶

가장 기본적인 위젯이며 <div> 태그로 생성됩니다. 주로 레이아웃을 설정하는데에 사용되며 하위요소를 묶어주는 그룹 용도로도 사용됩니다.

속성

하위요소 : 가능
링크 : 가능
스크롤 애니메이터 : 가능
배경이미지 : 가능
백엔드 엘립시스 : 불가능

텍스트 Text¶

텍스트 위젯입니다. <p> 태그로 생성되며 Text 탭에서 <h1> 혹은 <h2> 태그로 변경할 수 있습니다. 텍스트 위젯을 생성하고 더블클릭하면 텍스트를 입력할 수 있으며, 그 상태에서 한번 더 더블클릭하면 부분편집모드로 변경됩니다.

속성

하위요소 : 불가능
링크 : 가능
스크롤 애니메이터 : 가능
배경이미지 : 가능
백엔드 엘립시스 : 가능

이미지 Image¶

이미지 위젯입니다. 라이브러리에 추가한 이미지를 선택하거나, 이미지 URL을 직접 입력해 불러올수 있습니다. Fit widget size to image size 버튼을 누르면 불러온 이미지 사이즈에 맞춰 위젯 사이즈가 자동으로 변경됩니다. 위젯영역 내에서 이미지의 사이즈와 정렬상태을 변경할 수 있습니다.

속성

하위요소 : 불가능
링크 : 가능
스크롤 애니메이터 : 가능
배경이미지 : 불가능
백엔드 엘립시스 : 불가능

스태틱 이미지 Static Image¶

스태틱 이미지 위젯입니다. 라이브러리에 추가한 이미지를 선택하거나, 이미지 URL을 직접 입력해 불러올수 있습니다. Fit widget size to image size 버튼을 누르면 불러온 이미지 사이즈에 맞춰 위젯 사이즈가 자동으로 변경됩니다.

속성

하위요소 : 불가능
링크 : 가능
스크롤 애니메이터 : 가능
배경이미지 : 가능
백엔드 엘립시스 : 가능

셀 Cell¶

텍스트가 자동으로 중앙정렬 되어 있는 위젯입니다. 위젯의 높이 H 는 픽셀 px 단위만 사용할 수 있습니다.

속성

하위요소 : 불가능
링크 : 가능
스크롤 애니메이터 : 가능
배경이미지 : 가능
백엔드 엘립시스 : 가능

아이콘 버튼 Icon Button¶

셀 위젯에 이미지를 추가할 수 있는 아이콘 버튼 위젯입니다. 이미지와 텍스트가 자동으로 중앙정렬 되고, 이미지의 크기, 위치 좌우배치 등을 변경할 수 있습니다.

속성

하위요소 : 불가능
링크 : 가능
스크롤 애니메이터 : 가능
배경이미지 : 가능
백엔드 엘립시스 : 가능

복합 위젯 Complex Widget¶

트랜지션 Transition¶

트랜지션 위젯입니다. 트랜지션 위젯은 하위에 2개의 아이템을 가지고 있으며, 클릭 혹은 마우스오버시 1번 아이템에서 2번 아이템으로 전환됩니다. Effect와 Duration을 설정해 다양하게 커스터마이징 가능합니다.

속성

하위요소 : 불가능
링크 : 가능
스크롤 애니메이터 : 가능
배경이미지 : 불가능
백엔드 엘립시스 : 불가능

캐러젤 Carousel¶

캐러젤 위젯입니다. 하위 아이템은 Box와 속성이 동일하므로 자유롭게 요소를 추가할수 있습니다. Property에서 아이템 개수를 추가하거나 컨트롤러나 오토플레이 등의 옵션을 설정할 수 있습니다.

속성

하위요소 : 불가능
링크 : 내부요소에만 가능
스크롤 애니메이터 : 불가능
배경이미지 : 불가능
백엔드 엘립시스 : 불가능

구글맵 Google Map¶

구글맵 위젯입니다. 좌표값을 설정하면 원하는 위치를 보여줄 수 있습니다.

컬러스타일이나, 줌 설정 등 다양하게 커스터마이징할 수 있습니다.

주석

에디터 모드에서는 미리보기가 600x600 사이즈로만 지원되지만 아웃풋모드에서는 정상작동합니다.
대한민국 지도에는 컬러테마가 적용되지 않습니다.

속성

하위요소 : 불가능
링크 : 불가능
스크롤 애니메이터 : 가능
배경이미지 : 불가능
백엔드 엘립시스 : 불가능

웹무비 WebMovie¶

웹무비 위젯입니다. Vimeo와 Youtube에 업로드 된 영상을 불러올 수 있습니다. 영상을 불러올때는 다음과 같이 짧은 주소를 이용합니다.

Vimeo : http://vimeo.com/videoURL
Youtube : http://youtu.be/videoURL

자동재생/자동반복 등의 설정이 가능합니다.

속성

하위요소 : 불가능
링크 : 불가능
스크롤 애니메이터 : 가능
배경이미지 : 가능
백엔드 엘립시스 : 불가능

비디오 클립 Video Clip¶

비디오 클립 위젯입니다. 리소스 패널에서 비디오를 입력할 수 있습니다.

Property

Child : Invalid
Link : Valid
Scroll Animator : Valid
Background Image : Valid
Backend Ellipsis : Invalid

테이블 Table¶

테이블 위젯입니다. 캔버스에 간단한 표를 그릴 수 있습니다.

속성

하위요소 : 불가능
링크 : 가능
스크롤 애니메이터 : 가능
배경이미지 : 가능
백엔드 엘립시스 : 가능

심플 탭 Simple Tab View¶

탭 뷰 위젯입니다. 탭 뷰 위젯보다 구조가 단순합니다. 탭 선택 시 각각의 탭에 연결된 탭 컨텐츠를 보여줍니다.

속성

하위요소 : -
링크 : -
스크롤 애니메이터 : -
배경이미지 : -
백엔드 엘립시스 : -

탭 뷰 Tab View¶

탭 뷰 위젯입니다. 탭 선택 시 각각의 탭에 연결된 탭 컨텐츠를 보여줍니다.

속성

하위요소 : -
링크 : -
스크롤 애니메이터 : -
배경이미지 : -
백엔드 엘립시스 : -

컬랩시블 Collapsible¶

컬랩시블 위젯입니다. 컬랩시블 아이템을 선택 시 컨텐츠 영역을 보여줍니다. 트랜지션 효과와 타이밍 등을 설정할 수 있습니다.

속성

하위요소 : -
링크 : -
스크롤 애니메이터 : -
배경이미지 : -
백엔드 엘립시스 : -

임포트 Import¶

컴포지션을 불러오는 임포트 위젯입니다. 헤더 또는 푸터 그리고 커스텀 컴포지션 요소를 임포트 할 수 있는 위젯입니다. 하나의 컴포지션을 여러개의 임포트에 불러올수 있어 다양한 응용이 가능합니다.

속성

하위요소 : 불가능
링크 : 가능
스크롤 애니메이터 : 가능
배경이미지 : 가능
백엔드 엘립시스 : 불가능

페이스북 좋아요 버튼 Facebook Like Button¶

현재 페이지를 페이스북으로 공유할 수 있는 페이스북 위젯입니다. Property에서 공유할 URL 의 주소와 컬러 테마를 설정할수 있으나 크기는 조정되지 않습니다.

속성

하위요소 : 불가능
링크 : 가능
스크롤 애니메이터 : 가능
배경이미지 : 가능
백엔드 엘립시스 : 불가능

센터박스 Centered Box¶

페이지의 요소를 가운데로 정렬시켜주는 센터박스 위젯입니다. 섹션에는 자동으로 추가되지만, 필요시 다른 요소에 추가할 수 있도록 위젯으로도 만들어져 있습니다. 센터박스 크기는 가로:미디어쿼리값, 세로:100%로 고정되어있으며 변경은 불가능합니다. 이외의 속성은 일반 Box 위젯과 동일합니다.

속성

하위요소 : 불가능
링크 : 가능
스크롤 애니메이터 : 가능
배경이미지 : 가능
백엔드 엘립시스 : 불가능

프로그레스 바 Progress Bar¶

최대치 대비 현재 비율을 나타태주는 프로그레스 바를 그릴 수 있는 위젯입니다. 프로그레스 바의 크기와 컬러를 자유롭게 선택 가능하며, 줄무늬나 움직임 등 옵션을 설정할 수 있습니다.

속성

하위요소 : 불가능
링크 : 가능
스크롤 애니메이터 : 가능
배경이미지 : 불가능
백엔드 엘립시스 : 불가능

SVG (Scalable Vector Graphics)¶

SVG를 사용할 수 있는 위젯입니다. 아이유에디터에서는 메뉴, 검색, 체크, 좌/우 화살표 등의 형태를 기본으로 제공합니다. Property 에서 배경컬러, 스트로크 컬러등을 설정 할 수 있으며, 외부에서 그린 SVG 이미지의 코드를 붙여넣어 원하는 형태를 사용할 수 도 있습니다.

속성

하위요소 : 불가능
링크 : 가능
스크롤 애니메이터 : 가능
배경이미지 : 불가능
백엔드 엘립시스 : 불가능

프로그래밍 위젯 Programming Widget¶

폼 Form¶

폼 위젯입니다. Input 요소를 감싸주는 <form> 태그 위젯입니다. 따라서, Input 요소를 추가하기 전에 필수로 생성해야 합니다. 폼 위젯을 먼저 만들고 그 안에 Input 위젯을 넣어주세요.

속성

하위요소 : 가능
링크 : 불가능
스크롤 애니메이터 : 가능
배경이미지 : 가능
백엔드 엘립시스 : 불가능

인풋 텍스트 Input Text¶

인풋 텍스트 위젯입니다. Form 위젯에 추가하여 사용자로부터 텍스트를 입력받을수 있습니다.

속성

하위요소 : 불가능
링크 : 가능
스크롤 애니메이터 : 가능
배경이미지 : 가능
백엔드 엘립시스 : 불가능

인풋 패러그래프 텍스트 Input Paragraph Text¶

인풋 텍스트(문장) 위젯입니다. Form 위젯에 추가하여 사용자로부터 텍스트를 입력받을수 있습니다. (긴 문장에 사용)

속성

하위요소 : 불가능
링크 : 가능
스크롤 애니메이터 : 가능
배경이미지 : 가능
백엔드 엘립시스 : 불가능

셀렉트 Select¶

셀렉트 위젯입니다. Form 위젯에 추가하여 사용자로부터 특정 값을 입력받을수 있습니다. (여러 개의 옵션 중 선택된 1개의 값을 받아올 경우 사용)

속성

하위요소 : 불가능
링크 : 가능
스크롤 애니메이터 : 가능
배경이미지 : 가능
백엔드 엘립시스 : 불가능

HTML (Hyper Text Markup Language)¶

HTML 위젯입니다. IUEditor에 원하는 위젯이 없을 경우 직접 HTML 코드를 작성해서 넣을 수 있습니다. 하지만 원하는 위젯이 있다면 iu@jdalb.org로 의견을 보내주세요!

속성

하위요소 : 불가능
링크 : 불가능
스크롤 애니메이터 : 가능
배경이미지 : 가능
백엔드 엘립시스 : 불가능

콜렉션 Collection¶

컴포지션을 불러오는 콜렉션 위젯입니다. 하나의 컴포지션을 반복해서 사용하려고 할때 유용합니다. 한 줄에 몇 개의 컴포지션이 보이게 할지 정할 수 있습니다.

속성

하위요소 : 불가능
링크 : 가능
스크롤 애니메이터 : 가능
배경이미지 : 가능
백엔드 엘립시스 : 불가능

페이지 넘버 셋 Page Number Set¶

페이지 링크 셋 위젯입니다. 콜렉션 뷰로 불러온 다수의 요소를 페이지 단위로 제어하고 싶을 때 사용합니다. 주로 게시판이나 페이지 세트의 링크를 만들 때 사용합니다. 한 번의 몇개의 숫자를 나타낼 것인지 정할 수 있습니다.

속성

하위요소 : 불가능
링크 : 가능
스크롤 애니메이터 : 가능
배경이미지 : 가능
백엔드 엘립시스 : 불가능

체크박스 Checkbox¶

체크박스 위젯입니다. 기본 형태의 체크박스 위젯입니다. 사용자가 원하는 만큼 여러 개의 위젯을 자유롭게 배치할 수 있습니다.

속성

하위요소 : 불가능
링크 : 가능
스크롤 애니메이터 : 가능
배경이미지 : 불가능
백엔드 엘립시스 : 불가능

라디오 버튼 Radio Button¶

라디오 버튼 위젯입니다. 기본 형태의 라디오 버튼 위젯입니다. 사용자가 원하는 만큼 여러 개의 위젯을 자유롭게 배치할 수 있습니다.

속성

하위요소 : 불가능
링크 : 가능
스크롤 애니메이터 : 가능
배경이미지 : 불가능
백엔드 엘립시스 : 불가능

버튼 Button¶

버튼 위젯입니다. Default / Reset / Submit 3 가지 타입 중에 1가지를 선택해서 사용합니다. Form에서 입력받은 내용을 전송하는 기능을 담당합니다.

속성

하위요소 : 불가능
링크 : 불가능
스크롤 애니메이터 : 가능
배경이미지 : 가능
백엔드 엘립시스 : 불가능

파일 업로드 File Upload¶

파일 업로드 위젯입니다. 업로드 버튼을 선택하여 서버로 올릴 파일을 선택할 수 있습니다. (1개의 파일)

속성

하위요소 : 불가능
링크 : 불가능
스크롤 애니메이터 : 가능
배경이미지 : 불가능
백엔드 엘립시스 : 불가능

스위치 Switch¶

스위치 위젯입니다. 스위치를 토글하여 ON-OFF 상태로 변경할 수 있습니다.

속성

하위요소 : 불가능
링크 : 불가능
스크롤 애니메이터 : 가능
배경이미지 : 불가능
백엔드 엘립시스 : 불가능

플립 스위치 Flip Switch¶

플립 스위치 위젯입니다. 플립 스위치를 토글하여 ON-OFF 상태로 변경할 수 있습니다.

속성

하위요소 : 불가능
링크 : 불가능
스크롤 애니메이터 : 가능
배경이미지 : 불가능
백엔드 엘립시스 : 불가능

슬라이더 Slider¶

슬라이더 위젯입니다. 슬라이더를 선택하여 원하는 값을 입력하거나, 수치를 입력하여 슬라이더를 조정할 수 있습니다.

속성

하위요소 : 불가능
링크 : 불가능
스크롤 애니메이터 : 가능
배경이미지 : 불가능
백엔드 엘립시스 : 불가능

레인지 슬라이더 Range Slider¶

레인지 슬라이더 위젯입니다. 레인지 슬라이더의 포인터를 이동시켜 원하는 값을 입력하거나, 수치를 입력하여 슬라이더를 조정할 수 있습니다.

속성

하위요소 : 불가능
링크 : 불가능
스크롤 애니메이터 : 가능
배경이미지 : 불가능
백엔드 엘립시스 : 불가능

알려진 버그¶

현재 버젼까지의 버그리스트 입니다. 사용에 참고 부탁 드립니다.

이벤트 패널 - 스크롤 애니메이터¶

원칙적으로 스크롤 애니메이터는 포지션이 Absolute 상태에서만 입력이 가능합니다만, 간혹 Relative 상태에서도 입력이 가능한 경우가 발생합니다.

이벤트 패널 - 사용 불가능한 변수명¶

변수명에는 언더바(_) 를 제외한 특수문자를 사용할 수 없습니다. (~,!,@,#,$,%,^,&,*,+,?,=,...) 또한, 숫자도 변수명의 맨 앞에 쓸 수 없습니다.

파일 경로내 '#' 또는 '@' 문자가 들어갈 경우¶

IU파일이 위치한 폴더경로에 '#' 또는 '@' 문자가 들어갈 경우, 리소스 경로를 제대로 불러올 수 없습니다. 폴더 명에 해당 문자열 사용을 자제해주세요.

환경설정 Preference¶

IUEditor의 사용환경을 설정합니다.

일반 General¶

탭 메뉴 Select Tab Menu : 탭메뉴를 상단 툴바에서 보이도록 할 지 선택합니다.
가이드 라인 색 Guide Line Color : 가이드라인 색상을 변경합니다. (가이드라인 보기 : View > Guide ⌘;)
Custom Template List URL : 새 프로젝트 템플릿 목록에 커스텀 템플릿을 적용하기 위해 plist URL을 입력합니다.

프로젝트 Project¶

세이브 옵션 Project Save Option : Minimize Data 체크시 프로젝트의 json파일을 압축합니다.
컴파일 옵션 Compile Option
- Export HTML ID Option : HTML ID를 모든 위젯에 기본으로 생성되도록 할 것인지, 선택된 위젯만 HTML ID를 만들 것인지 선택합니다.
- Name on Structure : HTML문서에 위젯 이름을 포함할 것인지 선택합니다.
Resource Copy Option : 커스텀 위젯 Custom Widget 을 캔버스에 추가할 때 중복되는 리소스를 어떻게 처리할 지 선택합니다.
Widget Option : 섹션을 추가할 때 센터박스를 기본으로 포함되도록 할 것인지 선택합니다.

폰트 Fonts¶

폰트 리스트에 새 웹폰트를 추가합니다.

템플릿 Templates¶

IUEditor에서 사용할 수 있는 템플릿의 모음입니다. 프로그램 실행시 첫 화면에서 볼수있습니다.

단축키 Shortcut¶

단축키에 대한 설명입니다.

프로젝트 관리 Project Management¶

Project Setting ⇧⌘P : 프로젝트 설정 창을 보여줍니다.
Refresh ⇧⌘F : 현재 페이지를 다시 불러옵니다.
Import Custom Widget ⇧⌘W : 커스텀 위젯 패널을 불러옵니다.

뷰 관리 View Management¶

Zoom In ⌘+ : 스페이지를 확대합니다.
Zoom Out ⌘- : 스테이지를 축소합니다.
Widget Panel ⌘↵ : 위젯 패널을 보여주고 감춥니다.
Event Panel ⇧⌘E : 이벤트 패널을 보여줍니다.
Resource Panel ⇧⌘R : 리소스 패널을 보여줍니다.
Memo ⇧⌘M : 메모 패널을 보여줍니다.

모드 변경 Mode Switch¶

에디터 모드 Editor Mode ⌘[ : 에디터 모드 Editor Mode로 전환합니다.
개발자 모드 Developer Mode ⌘] : 개발자 모드 Developer Mode로 전환합니다.
프로토타입 모드 Prototype Mode :kbd:`⌘` : 프로토타입 모드 Prototype Mode로 전환합니다.

캔버스 뷰 관리 Canvas View Management¶

Show Outline ⌘L : 위젯의 외곽요소를 보여줍니다.
Show Widget Info ⌘I : 위젯의 정보를 보여줍니다. (추가된 메모를 나타냅니다.)
Show Ruler ⌘R : 스테이지에 룰러 요소를 보여줍니다.
Show Guide ⌘; : 설정해 놓은 가이드 라인을 보여줍니다.
Tracing ⇧⌘T : 이미지 트레이싱 기능을 on/off 합니다.

용어 Dictionary¶

본 메뉴얼에서 사용된 용어에 대한 설명입니다.

build¶

아이유에디터는 스테이지에서 보여지는 내용을 실제 사용가능한 파일로 생성하여 줍니다. 이 작업을 '빌드를 실행한다'라고 표현합니다.

django¶

python web framework.

python¶

server-side programming language. ruby와 더불어 가장 인기있는 프로그래밍 언어 중 하나입니다.

튜토리얼 Tutorials¶

IUEditor를 배울 수 있는 기본 튜토리얼입니다.

튜토리얼 사이트 가기

Tutorial 101 - 블로그 스타일 웹페이지 만들기

Tutorial 201 - 반응형 매거진 뷰 만들기 Part1 - 디자인

Tutorial 202 - 반응형 매거진 뷰 만들기 Part2 - 미디어쿼리

IUEditor Manual¶

아이유에디터란? What is IUEditor?¶

장점 Advantages¶

가치 Values¶

조금더 ...¶

구동환경 Environment¶

메뉴 Menu¶

IUEditor 메뉴 바 Menu Bar 에 대한 설명입니다.¶

아이유에디터 IUEditor¶

파일 File¶

프로젝트 Project¶

뷰 View¶

창 Window¶

지원 Help¶

상단 툴바 Top Toolbar¶

커맨드 Command¶

탭 메뉴 Tab Menu¶

스테이지 Stage¶

중앙 툴바 Middle Toolbar¶

새로고침 Refresh¶

포지션 Position¶

프레임 Frame¶

배경컬러 Background Color¶

위젯 보기 버튼 Show Widget Button¶

위젯 패널 Widget Panel¶

아이유 위젯 IU Widgets¶

커스텀 위젯 Custom Widgets¶

네비게이션 Navigation¶

스트럭쳐 Structure¶

페이지 Pages¶

컴포지션 Compositions¶

참고사항 References¶

캔버스 Canvas¶

컨텍스트 메뉴 - 단일 위젯 Context Menu - Single Widget¶

컨텍스트 메뉴 - 복수 위젯 Context Menu - Multiple Widget¶

개발자 모드 Developer Mode¶

HTML ID¶

커스텀 코드 Custom Code¶

프로토타입 모드 Prototype Mode¶

히스토리 Revision History¶

워크플로우 Project Workflow¶

개별 화면 정의 Node Definition¶

프로젝트 셋팅 Project Setting¶

디폴트 Default¶

메타 Meta¶

빌드 Build¶

장고 Django¶

프로젝트 코드 Project Code¶

HTML¶

Back-end¶

리소스 패널 Resource Panel¶

리소스 관리 팁 Resource Management Tip¶

이벤트 패널 Event Panel¶

스크롤 애니메이터 Scroll Animator¶

베리에이블 Variable¶

리시버 Receiver¶

메모 패널 Memo Panel¶

커스텀 위젯 관리 패널 Manage Custom Widgets Panel¶

상단 바 Top Bar¶

위젯 그룹 리스트 Widget Group List¶

커스텀 위젯 리스트 Custom Widget List¶

커스텀 위젯 정보 Custom Widget Information¶

위젯 내보내기 패널 Export Widget Panel¶

위젯 내보내기 Export Widget (.iuw)¶

페이지 내보내기 Export Page (.iup)¶

컴포지션 내보내기 Export Composition (.iuc)¶

프로젝트 타입 Project Type¶

디폴트 프로젝트 Default Project¶

장고 프로젝트 Django Project¶

Angular JS프로젝트 Angular JS Project¶

페이지 Page¶

페이지 세팅 Page Setting¶

페이지 커스텀 코드 Page Custom Code¶

페이지 기본 위젯 Page Default Widget¶

페이지 Page¶

헤더 Header¶

페이지컨텐트 Page Content¶

푸터 Footer¶

섹션 Section¶

센터박스 Centered Box¶