IUEditor Manual

_images/iueditor-facebook-ad-img-A03.png

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

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

참고

아이유에디터는 현재 개인용 그리고 비상업적 용도에 한하여 누구나 무료로 사용하실 수 있습니다. (최대 5페이지)

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

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

장점 Advantages

  • 아이유에디터는 GUI 기반 프로그램으로 사용자가 코딩없이 프로토타입을 디자인할 수 있습니다.

  • 하나의 프로젝트 파일로 여러 크기의 디바이스에 대응할 수 있는 프로덕트나 웹사이트를 개발할 수 있습니다.

  • 파이썬 Python 과 같은 백엔드 Backend 와 통합되어 있습니다.

가치 Values

  • 아이유에디터는 디자이너가 퍼블리셔의 도움없이 개발자와 협업할 수 있게하여, 여러분의 팀, 회사의 시간과 비용을 절약할 수 있습니다.

  • 여러분의 회사나 팀이 프로덕트나 웹사이트를 빠르게 출시할 수 있게 하여, 린 프로세스 Lean Process를 도입하고 더 나은 결과물을 만들 수 있습니다.

조금더 ...

구동환경 Environment

_images/os_x_el_capitan.jpg

아이유에디터 는 Mac OS X 10.10.a - Yosemite 이상의 환경에서만 동작합니다. 서버 업로드 기능을 사용하기 위해서는 Git 과 Heroku Toolbelt 를 설치하셔야 합니다. (Heroku 연동을 위해서는 Heroku 계정이 필요합니다.)

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

상단 툴바 Top Toolbar

_images/iu_manual_top_toolbar.png

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

_images/iu_manual_top_toolbar_command.png

커맨드Command

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

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

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

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

  • 시나리오 / 에디트 모드 변경 버튼 : 프로그램 기본 설정은 에디트 모드 Edit Mode 입니다. 이 버튼을 눌러 시나리오 모드 Scenario Mode 와 에디트 모드를 변경할 수 있습니다.

탭 메뉴 Tab Menu

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

_images/iu_manual_top_toolbar_tab03_style.png

  • 스타일 탭 Style Tab : 선택한 위젯의 라운딩 / 보더 / 박스 쉐도우 / 투명도 / 배경 이미지 등을 설정할 수 있습니다.

_images/iu_manual_top_toolbar_tab02_property.png

  • 속성 탭 Property Tab : 선택한 각 위젯의 개별 속성을 변경할 수 있습니다. 각 위젯 별로 설정 가능한 항목이 다릅니다.

_images/iu_manual_top_toolbar_tab01_text.png

  • 텍스트 탭 Text Tab : 폰트 패밀리 / 두께 / 크기 / 컬러 / 행간 / 자간 / 제목 텍스트 / 정렬 등을 설정할 수 있습니다.

_images/iu_manual_top_toolbar_tab04_transform.png

  • 트랜스폼 탭 Transform Tab : 선택한 위젯의 회전 값 Rotation 값 등을 설정하여 형태를 변형시킬 수 있습니다.

_images/iu_manual_top_toolbar_tab05_mouse_over.png

  • 마우스-오버 탭 Mouse-Over Tab : 선택한 위젯이 마우스 오버 상태일 때 변화하는 값을 설정 할 수 있습니다.

_images/iu_manual_top_toolbar_tab06_backend.png

  • 링크 탭 Link Tab : 선택한 위젯에 ** 링크 Hyperlink** 를 설정할 수 있습니다.

_images/iu_manual_top_toolbar_TQZ.png

스테이지 Stage

  • 고정 위젯 숨김 버튼 Fixed Widget Show / Hide button : 포지션 속성이 고정 Fixed 인 위젯을 스테이지에서 감출 수 있는 기능입니다.

  • 트레이싱 Tracing : 트레이싱은 디자인 이미지를 스테이지 배경에 추가하여, 좀 더 빠른 작업이 가능하도록 도와줍니다. 트레이싱 아이콘을 눌러 트레이싱 모드를 on/off 시킬 수 있으며, 트레이싱 이미지 팝업에서 좀 더 세세한 조정이 가능합니다.

  • 페이지 설정 Page Setting : 현재 작업 중인 페이지의 너비 / 미디어쿼리 등을 변경합니다. (미디어 쿼리 팝업을 열어 새로운 쿼리를 생성하거나, 기존 미디어쿼리를 복사하여 생성할 수도 있습니다. )

  • 줌 Zoom : 작업 중인 페이지의 줌-인/아웃 을 설정합니다.

중앙 툴바 Middle Toolbar

_images/iu_manual_middle_toolbar.png

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

페이지 캡쳐 Page Capture

현재 페이지를 캡쳐하여 프로토타입 모드 Prototype Mode 의 커스텀 섬네일에 추가합니다.

포지션 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

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

위젯 보기 버튼 Show Widget Button

버튼을 눌러 오른쪽에 위젯 패널을 보이게 하고 숨깁니다. 위젯 패널에는 아이유에디터에서 사용 가능한 모든 위젯들 보여집니다. IU WIDGETS탭과 CUSTOM WIDGETS탭으로 나뉘어 있습니다.

Go To Widget Panel

위젯 패널 Widget Panel

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

아이유 위젯 IU Widgets

_images/iu_manual_iuwidgets.png

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

Go To Widget Property

커스텀 위젯 Custom Widgets

_images/iu_manual_customwidgets.png

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

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

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

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

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

캔버스 Canvas

_images/iu_manual_canvas.png

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

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

_images/iu_manual_canvas_context_single.png

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

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

_images/iu_manual_canvas_context_single_widget.png

  • 메모 추가 Add Memo : 현재 선택된 위젯에 메모를 추가할 수 있는 메모 패널 을 불러옵니다.

  • 위젯 내보내기 Export to Widget : 현재 선택된 위젯을 커스텀 위젯 Custom Widget 으로 만들 수 있는 위젯 내보내기 패널 을 호출합니다.

  • 이벤트 보기 Show Event : 현재 선택된 위젯에 연결된 이벤트를 수정 / 추가 할 수 있는 이벤트 패널 을 불러옵니다.

  • 탭 선택  Select Tab : 원하는 속성 탭 으로 바로 이동합니다.

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

_images/iu_manual_canvas_context_multi.png

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

  • 정럴 Align : 현재 선택된 위젯들을 정렬하는 기능입니다. 좌측 정렬 Align Left, 중앙 정렬 Align Center, 우측 정렬 Align Right, 상단 정렬 Align Top, 세로 중앙 정렬 Align Middle, 하단 정렬 Align Bottom 이 있습니다.

_images/iu_manual_canvas_context_multi_align.png

  • 크기 Size : 현재 선택된 위젯들의 크기를 맞추어 주는 기능입니다. 가로 맞춤 Match Width, 세로 맞춤 Match Height 가 있습니다.

_images/iu_manual_canvas_context_multi_size.png

개발자 모드 Developer Mode

_images/iu_manual_developer_mode.png

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

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

HTML ID

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

커스텀 코드 Custom Code

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

프로토타입 모드 Prototype Mode

_images/iu_manual_advanced_prototype_mode.png

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

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

히스토리 Revision History

_images/ic_SB_revision.png

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

  • Add New Date Button : 히스토리 테이블에 새 히스토리를 추가합니다.

  • Remove Date Button : 히스토리 테이블에서 선택된 히스토리를 지웁니다.

워크플로우 Project Workflow

_images/ic_SB_workflow.png

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

_images/iu_manual_advanced_prototype_mode_thumbnail.png

  • Default thumbnails : 프로젝트에 포함된 페이지들의 섬네일 목록.

  • Custom thumbnails : Page Capture 버튼으로 캡쳐된 페이지들의 섬네일 목록.

참고

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

_images/iu_manual_advanced_prototype_mode_workflow.png

  • Rectangle Button : 선택된 노드 아래에 사각형 다이어그램을 추가합니다.

  • Rhombus Button : 선택된 노드 아래에 다이아몬드 다이어그램을 추가합니다.

  • Inward Label : 선택된 노드 위에 표시되는 텍스트를 입력합니다.

  • Outward Label : 선택된 노드 아래에 표시되는 텍스트를 입력합니다.

개별 화면 정의 Node Definition

_images/ic_SB_screen.png

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

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

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

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

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

헤로쿠 관리 Heroku Management

_images/iu_manual_advanced_heroku.png

프로젝트 > Upload to Heroku (⇧⌘H) 메뉴를 실행하면 위와 같은 헤로쿠 관리 패널 이 뜹니다.

헤로쿠 관리 패널에서는 유저 개인의 계정에 접속해서 헤로쿠 서버로 업로드해줍니다. 아이유에디터로 만든 웹사이트를 서버에서 바로 볼 수 있는 매우 편리한 기능입니다.

서버 업로드 Upload to Server

_images/iu_manual_advanced_server.png

프로젝트 > Upload to Server (⇧⌘U) 메뉴를 실행하면 위와 같은 서버 업로드 패널 이 뜹니다.

서버 업로드 패널에서는 사용자가 직접 서버에 IU Project의 결과물을 업로드 할 수 있습니다. 접속을 위해서는 주소와 SSH포트넘버, 사용자 아이디, 비밀번호, 업로드할 경로가 필요합니다. 하단의 state 메시지 영역에서 진행상황을 확인할 수 있습니다.

프로젝트 셋팅 Project Setting

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

_images/iu_manual_project_setting_01default.png

디폴트 Default

  • Project Title : 브라우져에서 보여질 프로젝트의 타이틀을 입력합니다.

  • Favicon : 파비콘 이미지를 설정합니다. 리소스로 불러들여온 후에 사용이 가능합니다.

  • Custom Header Code : 프로젝트 내 모든 페이지에 공통으로 적용될 커스텀 코드를 입력합니다.

참고

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

_images/iu_manual_project_setting_02meta.png

메타 Meta

  • Meta Image : 메타이미지를 설정합니다. 외부경로 (URL)만 입력 가능합니다.

  • Author : 메타데이타에 포함될 제작자의 이름을 입력합니다.

  • Project URL : 메타데이타에 포함될 프로젝트의 URL 경로를 입력합니다.

  • Project Keywords : 메타데이타에 포함될 프로젝트의 키워드를 입력합니다. (복수 입력 가능 / 엔터나 콤마로 구분)

  • Project Description : 메타데이타에 포함될 프로젝트 설명을 입력합니다.

  • Facebook Admin : 메타데이타에 포함될 페이스북 어드민 아이디를 입력합니다.

  • Facebook App ID : 메타데이타에 포함될 페이스북 앱 아이디를 입력합니다.

_images/iu_manual_project_setting_03build.png

빌드 Build

  • Build Path : 빌드 실행 시 생성되는 폴더의 경로를 설정합니다.

  • Build Resource Path : 빌드 실행 시 생성되는 리소스 폴더의 경로를 설정합니다.

  • Resource Prefix : 프로젝트가 사용할 리소스 폴더의 경로를 설정합니다.

  • Link Prefix : 프로젝트가 사용할 링크의 경로를 설정합니다.

  • HTML Port : 프로젝트가 사용할 로컬호스트 서버의 포트를 설정합니다.

참고

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

_images/iu_manual_project_setting_04django.png

장고 Django

참고

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

  • Django Build Path : 빌드 실행 시 생성되는 장고 폴더의 경로를 설정합니다.

  • Django Resource Path : 빌드 실행 시 생성되는 장고 리소스 폴더의 경로를 설정합니다.

  • Django Resource Prefix : 장고 프로젝트가 사용할 리소스 폴더의 경로를 설정합니다.

  • Runserver after build : 빌드 실행 이후에 로컬호스트 서버 실행 여부를 설정합니다.

  • Django Port : 장고 프로젝트가 사용할 로컬호스트 서버의 포트를 설정합니다.

  • Python Interpreter Path : 장고 프로젝트가 사용하는 파이썬 인터프리터의 경로를 설정합니다.

  • Django Manage.py Path : 장고 프로젝트가 사용하는 Manage.py 파일의 경로를 설정합니다.

리소스 패널 Resource Panel

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

_images/iu_manual_panel_resource.png

  • Import Resource Button : 파인더를 통해 외부리소스를 불러옵니다.

  • Import Clipart Button : 임포트 클립아트 Import Clipart 화면을 통해 아이유에디터에서 제공하는 클립아트를 불러옵니다.

  • Resource Type Select Button : 리소스 패널에 있는 파일을 모두 보기 / 이미지 보기 / 동영상 보기 로 필터링하여 줍니다.

  • Add New Folder Button : 리소스 패널에 새로운 폴더를 생성합니다.

  • Delete Button : 선택한 파일 또는 폴더를 삭제합니다.

클립아트 불러오기 Import Clipart

아이유에디터에서 제공하는 클립아트를 불러올 수 있습니다.

_images/iu_manual_panel_resource_clipart.png

  • Import : 선택한 클립아트를 리소스 패널에 추가합니다.

  • Cancel : 클립아트를 추가하지 않고 현재 창을 닫습니다.

  • Grid / List View Change Button : 리스트 뷰 / 그리드 뷰 를 변경할 수 있는 토글 버튼입니다.

  • Clipart Type Select Button : 클립아트 파일을 모두 보기 / 아이콘 등으로 필터링하여 줍니다.

  • Search : 클립아트 이름을 기준으로 검색할 수 있습니다.

리소스 관리 팁 Resource Management Tip

  • 폴더를 생성하여 리소스를 관리 할 수 있습니다.

  • 이미지 리소스를 이미지 위젯에 드래그 & 드롭하여 넣을 수 있습니다.

이벤트 패널 Event Panel

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

_images/iu_manual_panel_event_01scr.png

스크롤 애니메이터 Scroll Animator

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

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

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

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

_images/iu_manual_panel_event_02var.png

베리에이블 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 : 마우스오버 또는 클릭 시 트리거가 동작하도록 설정합니다.

_images/iu_manual_panel_event_03receiver.png

리시버 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키(키보드)를 누르거나 Eqation에서 삭제하면 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 항목을 실행시키면 등장합니다. 선택된 위젯에 부가 설명을 추가할 때 사용됩니다.

_images/iu_manual_panel_memo.png

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

  • Title : 타이틀을 입력합니다.

  • Memo : 내용을 입력합니다.

참고

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

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

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

_images/iu_manual_panel_import_widget.png

상단 바 Top Bar

  • Widget Tab : 불러오기 한 위젯의 목록을 관리하고 내보내기 한 커스텀 위젯을 불러옵니다.

  • Page Tab : 불러오기 한 페이지의 목록을 관리하고 내보내기 한 페이지를 불러옵니다.

  • Composition Tab : 불러오기 한 컴포지션의 목록을 관리하고 내보내기 한 컴포지션을 불러옵니다.

  • Widget Info Toggle Button : 커스텀 위젯 정보 을 껐다 켤 수 있는 토글 버튼입니다.

  • Search Bar : 커스텀 위젯의 이름을 검색할 수 있습니다.

위젯 그룹 리스트 Widget Group List

패널 좌측에는 커스텀 위젯의 그룹 리스트가 보여집니다. 각 그룹을 선택하면, 그룹에 해당되는 커스텀 위젯들만 커스텀 위젯 리스트 에서 볼 수 있습니다.

커스텀 위젯 리스트 Custom Widget List

패널 중앙에는 선택된 그룹에 해당되는 커스텀 위젯들이 보여집니다.

  • Import : 커스텀 위젯 파일을 불러옵니다.

  • Refresh : 리스트를 새로고침 합니다.

  • Open Folder : 커스텀 위젯 파일 폴더로 이동합니다.

커스텀 위젯 정보 Custom Widget Info

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

  • Preview : 커스텀 위젯의 프리뷰를 보여줍니다.

  • Zoom In / Out : 프리뷰 화면을 줌 인 / 아웃 시킵니다.

  • Name : 커스텀 위젯의 파일 명입니다.

  • Group : 커스텀 위젯의 그룹 명입니다.

  • Tag : 커스텀 위젯에 추가된 태그 목록입니다. 클릭하여 편집할 수 있습니다.

  • Description : 커스텀 위젯의 상세 설명입니다. 클릭하여 편집할 수 있습니다.

위젯 내보내기 패널 Export Widget Panel

위젯 내보내기 패널은

하여 불러올 수 있습니다.

_images/iu_manual_panel_export_widget.png

  • Customize Viewport Size : 커스텀파일의 뷰포트를 원하는 사이즈로 조정합니다.

  • Name : 커스텀 파일의 이름을 입력합니다.

  • New Group : 커스텀 파일의 그룹을 입력합니다.

  • Export Directory : 커스텀 파일을 내보낼 경로를 설정합니다.

  • Description : 커스텀 파일에 설명을 입력합니다.

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

_images/icon_IUW_128x128.png

위 1) 상황에서 내보내기 Export 기능을 실행 하면, 로컬디스크에는 커스텀위젯이름.iuw 파일이 생성됩니다. 이 파일은 위젯 불러오기 패널 에서 불러온 후에 사용 가능합니다.

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

_images/icon_IUP_128x128.png

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

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

_images/icon_IUC_128x128.png

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

프로젝트 타입 Project Type

_images/icon_IU_128x128.png

디폴트 프로젝트 Default Project

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

_images/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

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

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

_images/iu_manual_project_new_django.png

Angular JS프로젝트 Angular JS Project

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

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

_images/iu_manual_project_new_angularjs.png

워드프레스 프로젝트 Wordpress Project

워드프레스 테마를 편집할 수 있는 프로젝트 타입입니다. 빌드타입을 Wordpress로 선택하면워드프레스 테마로 빌드됩니다.

워드프레스: 기본 사용 WordPress: Basic Usage

참고

워드프레스 동영상 튜토리얼 https://www.youtube.com/watch?v=ZbjSCoE0Ano&list=PLWlO_EZgRC0aLLZ-oe_yMqdEaV4KdM5-l&index=1

소개 Introduction

IUEditor의 기능을 활용해 워드프레스 테마를 생성할 수 있습니다.

_images/iu_manual_wordpress_basic_use_newproject.png

  • New Project > WordPress 에서 원하는 템플릿을 선택합니다.

_images/iu_manual_wordpress_basic_use_widgetgroup.png

  • 우측하단 WordPress 위젯들을 활용해 테마에 필요한 요소들을 삽입할 수 있습니다.

페이지 구성 Anatomy of Pages

_images/iu_manual_wordpress_basic_use_theme_anatomy.png

  • index: 블로그 홈 화면 및 테마 전체의 기본이 되는 필수 페이지 입니다.

  • single: 블로그의 특정 포스트 링크로 진입했을때 출력되는 페이지 입니다.

  • archive: 기간이나 작성자 등을 기준으로 조회할때 출력되는 페이지 입니다.

  • category: 특정 카테고리내 글 목록을 조회할때 출력되는 페이지 입니다.

  • page_404: 잘못된 URL로 진입한 경우 출력되는 페이지 입니다.

그 외 테마에 필요한 페이지는 사용자가 임의로 추가할 수 있습니다. (예: page.php, date.php 등)

참고

워드프레스 테마의 페이지 구성에 대해 좀 더 자세한 정보는 다음 링크를 참조하시기 바랍니다. https://yoast.com/wordpress-theme-anatomy/

설정 Settings

_images/iu_manual_wordpress_basic_use_buildsetting.png

프로젝트 > 프로젝트 셋팅 메뉴를 실행하거나 ⇧⌘P 키를 입력해 프로젝트 셋팅 패널을 열고, 워드프레스 WordPress 탭을 선택해 워드프레스 관련 설정을 변경할 수 있습니다.

  • WordPress theme Build Path: 생성된 테마 파일들을 출력할 경로입니다. 경로끝에 $AppName을 입력해 프로젝트명으로 최종 경로를 만들 수 있습니다.

  • WordPress Resource Path: 이미지, CSS 등 테마 파일의 리소스가 저장될 로컬 경로입니다.

  • WordPress User Source Path: 사용자가 추가로 삽입한 CSS, JS 파일들이 저장될 로컬 경로입니다.

  • WordPress Resource Prefix: 웹 상에서 Resource Path에 접근하는 URL 경로입니다.

  • WordPress User Source Prefix: 웹 상에서 User Source Path에 접근하는 URL 경로입니다.

워드프레스: 사이트 정보 WordPress: Site Information

_images/WPSiteTitle.png

사이트 제목 Site Title

_images/iu_manual_wordpress_site_title.png

  • 워드프레스 사이트 생성시 혹은 wp-admin에서 설정한 site title이 출력됩니다.

  • Site title를 Header섹션에 넣으면 테마내의 페이지간에 공유할 수 있습니다.

_images/WPSiteDescription.png

사이트 부제 Site description

_images/iu_manual_wordpress_site_description.png

  • wp-admin에서 설정한 site description 항목이 출력됩니다.

  • Site description을 Header섹션에 넣으면 테마내의 페이지간에 공유할 수 있습니다.

워드프레스: 아티클 WordPress: Article

워드프레스의 post, page와 같은 하나의 아티클을 표현합니다. 구성요소로 제목, 본문, 썸네일, 날짜, 저자 등을 포함할 수 있습니다.

_images/WPArticle.png

아티클 위젯 Article Widget

_images/iu_manual_wordpress_article_widget.png

  • 아티클 구성요소들을 포함하는 워드프레스 테마의 핵심 위젯입니다.

  • 삽입된 하나의 아티클 위젯은 사이트 적용시 페이지 문맥에 따라 단독으로(single.php), 혹은 반복되어 리스트(index.php, archive.php 등)로 출력됩니다.

  • 프로퍼티 탭의 Sample Repeat에 지정된 횟수에 따라 에디터에서 아티클 샘플이 반복출력되어 레이아웃 작업에 활용할 수 있습니다.

    • 반복출력시 포지션Position 속성이 렐러티브Relative로 설정되어야 합니다.

  • 아티클 요소, 코멘트, 코멘트 입력 폼, 태그 블록 위젯들은 아티클 위젯의 하위에 삽입되어야 합니다.

_images/WPArticleSubject.png

아티클 제목 Article Title

_images/iu_manual_wordpress_article_title.png

  • 해당 아티클(post/page)의 제목이 출력됩니다.

  • 아티클 위젯 하위에 삽입되어야 정상 동작합니다.

  • Property 탭에서 Link 여부를 선택할 수 있습니다.

_images/WPArticleBody.png

아티클 본문 Article Body

_images/iu_manual_wordpress_article_body_full.png _images/iu_manual_wordpress_article_body_excerpt.png

  • 해당 아티클의 본문이 출력됩니다.

  • 아티클 위젯 하위에 삽입되어야 동작합니다.

  • Property 탭의 Type에서 본문의 전체(full)/일부(excerpt) 출력여부를 선택할 수 있습니다.

    • 일부(excerpt)만 출력하도록 선택한 경우, 출력 길이를 단어수 단위로 정할 수 있습니다. (기본값: 55)

  • Property 탭에서 Link 여부를 선택할 수 있습니다.

_images/WPArticleElement.png

아티클 요소 Article Element

_images/iu_manual_wordpress_article_element.png

  • 해당 아티클의 선택된 구성요소(썸네일/저자/기록날짜)가 출력됩니다.

    • 출력을 원하는 요소를 Property 탭의 Element type에서 지정할 수 있습니다.

  • 반드시 아티클 위젯 하위에 삽입되어야 동작합니다.

  • Property 탭에서 Link 여부를 선택할 수 있습니다.

워드프레스: 카테고리 WordPress: Category

워드프레스의 특정 아티클 혹은 아티클 목록의 카테고리를 출력합니다.

카테고리 위젯 Category Widget

_images/iu_manual_wordpress_category_widget.png

  • 카테고리를 출력하기 위해 사용되는 위젯입니다.

  • 세가지 타입(레이블, 리스트, 경로) 중 선택할 수 있으며, 출력형태가 달라집니다.

카테고리 레이블 Category Label

_images/iu_manual_wordpress_category_label.png

  • 특정 아티클(post/page)이 소속된 카테고리가 한 번 출력됩니다.

  • 아티클 위젯 하위에 삽입되어야 정상 동작합니다.

카테고리 리스트 Category List

_images/iu_manual_wordpress_category_list.png

  • 현 페이지에 포함된 상위 카테고리 리스트를 출력합니다.

  • 프로퍼티 탭의 Sample Repeat 설정에 따라 에디터에 반복되어 출력됩니다.

카테고리 경로 Category Path

_images/iu_manual_wordpress_category_path.png

  • 현재 아티클이 포함된 카테고리의 경로를 나타냅니다.

워드프레스: 코멘트 WordPress: Comment

포스트에 작성된 코멘트 및 코멘트 입력폼을 디자인하는 위젯들입니다.

코멘트 위젯 Comment Widget

_images/iu_manual_wordpress_comment_widget.png

  • 해당 아티클에 달린 코멘트들을 출력합니다.

  • 아티클 위젯 하위에 삽입되어야 합니다.

  • 프로퍼티 탭의 Sample Repeat에 지정된 횟수에 따라 에디터에서 코멘트 샘플이 반복출력되어 레이아웃 작업에 활용할 수 있습니다.

    • 반복출력시 포지션Position 속성이 렐러티브Relative로 설정되어야 합니다.

  • 코멘트 요소들은 코멘트 위젯의 하위에 삽입되어야 합니다.

코멘트 요소 Comment Element

_images/iu_manual_wordpress_comment_element.png

  • 코멘트 위젯 하위에 삽입되어야 합니다.

  • 프로퍼티탭의 타입 목록에서 코멘트 본문, 아바타, 작성자명, 날짜, 이메일, 주소 등으로 설정할 수 있습니다.

코멘트 입력폼 Comment Input Form

_images/iu_manual_wordpress_comment_input_form.png

  • 코멘트 입력 폼과 구성요소들을 표시합니다.

  • 반드시 아티클 위젯 하위에 삽입되어야 동작합니다.

워드프레스: 기타 WordPress: Etc

_images/WPPageLink.png

페이지 링크 Page Link

_images/iu_manual_wordpress_page_link.png

  • 워드프레스의 페이지 내비게이션 page navigation을 출력합니다.

  • 프로퍼티탭에서 Previous, Next 링크의 텍스트를 변경할 수 있습니다.

_images/WPTag.png

태그 블록 Tag Block

_images/iu_manual_wordpress_tag_block.png

  • 해당 아티클의 태그들을 표시합니다.

  • 반드시 아티클 위젯 하위에 삽입되어야 동작합니다.

  • 태그 블록 내 첫번째 태그를 선택해 프로퍼티탭에서 반복 횟수를 설정할 수 있습니다.

페이지 Page

_images/IUPage.png

페이지 세팅 Page Setting

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

_images/iu_manual_sheet_page_setting.png

  • Empty Layout : 빈 레이아웃 입니다.

  • Header + Footer : 헤더 + 페이지 컨텐트 + 푸터로 구성되어 있습니다.

  • Header : 헤더 + 페이지 컨텐트로 구성되어 있습니다.

  • Footer : 페이지 컨텐트 + 푸터로 구성되어 있습니다.

  • 페이지 타이틀 Page Title : 현재 페이지의 타이틀을 입력합니다.

  • 페이지 키워드 Page Keyword : 현재 페이지의 키워드를 입력합니다. (여러 키워드 입력 가능)

  • 페이지 설명 Page Description : 현재 페이지의 페이지 설명을 입력합니다.

  • 페이지 메타 이미지 Page Meta Image : 현재 페이지의 메타 이미지 경로를 입력합니다. (URL 을 입력)

페이지 커스텀 코드 Page Custom Code

페이지 커스텀 코드 버튼을 눌러 페이지 커스텀 코드 패널을 불러올 수 있습니다.

_images/iu_manual_sheet_page_custom_code.png

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

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

페이지 기본 위젯 Page Default Widget

_images/IUHeader.png

헤더 Header

페이지의 상단에 위치하는 영역입니다. 헤더영역에는 헤더 컴포지션이나 다른 컴포지션을 임포트 할 수 있습니다.

_images/IUPageContent.png

페이지컨텐트 Page Content

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

_images/IUFooter.png

푸터 Footer

페이지의 하단에 위치하는 영역입니다. 푸터영역에는 푸터 컴포지션이나 다른 컴포지션을 임포트 할 수 있습니다.

_images/IUSection.png

섹션 Section

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

_images/IUCenterBox.png

센터박스 Centered Box

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

컴포지션 Composition

_images/IUClass.png

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

기본 위젯 Basic Widget

_images/IUBox.png

박스 Box

_images/iu_manual_prop_basic_IUBox.png

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

속성

  • 하위요소 : 가능

  • 링크 : 가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 가능

  • 백엔드 엘립시스 : 불가능

_images/IUText.png

텍스트 Text

_images/iu_manual_prop_basic_IUText.png

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

속성

  • 하위요소 : 불가능

  • 링크 : 가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 가능

  • 백엔드 엘립시스 : 가능

_images/IUFloatingImage.png

이미지 Image

_images/iu_manual_prop_basic_IUFloatingImage.png

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

속성

  • 하위요소 : 불가능

  • 링크 : 가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 불가능

  • 백엔드 엘립시스 : 불가능

_images/IUImage.png

스태틱 이미지 Static Image

_images/iu_manual_prop_basic_IUImage.png

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

속성

  • 하위요소 : 불가능

  • 링크 : 가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 가능

  • 백엔드 엘립시스 : 가능

_images/IUCell.png

셀 Cell

_images/iu_manual_prop_basic_IUCell.png

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

속성

  • 하위요소 : 불가능

  • 링크 : 가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 가능

  • 백엔드 엘립시스 : 가능

_images/IUIconButton.png

아이콘 버튼 Icon Button

_images/iu_manual_prop_basic_IUIconButton.png

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

속성

  • 하위요소 : 불가능

  • 링크 : 가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 가능

  • 백엔드 엘립시스 : 가능

복합 위젯 Complex Widget

_images/IUTransition.png

트랜지션 Transition

_images/iu_manual_prop_complex_IUTransition.png

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

속성

  • 하위요소 : 불가능

  • 링크 : 가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 불가능

  • 백엔드 엘립시스 : 불가능

_images/IUCarousel.png

구글맵 Google Map

_images/iu_manual_prop_complex_IUGoogleMap.png

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

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

  1. 에디터 모드에서는 미리보기가 600x600 사이즈로만 지원되지만 아웃풋모드에서는 정상작동합니다.

  2. 대한민국 지도에는 컬러테마가 적용되지 않습니다.

속성

  • 하위요소 : 불가능

  • 링크 : 불가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 불가능

  • 백엔드 엘립시스 : 불가능

_images/IUWebMovie.png

웹무비 WebMovie

_images/iu_manual_prop_complex_IUWebMovie.png

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

Vimeo : http://vimeo.com/영상주소 Youtube : http://youtu.be/영상주소

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

속성

  • 하위요소 : 불가능

  • 링크 : 불가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 가능

  • 백엔드 엘립시스 : 불가능

_images/IUTable.png

테이블 Table

_images/iu_manual_prop_complex_IUTable.png

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

속성

  • 하위요소 : 불가능

  • 링크 : 가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 가능

  • 백엔드 엘립시스 : 가능

_images/IUSimpleTabView.png

심플 탭 Simple Tab View

_images/iu_manual_prop_complex_IUSimpleTabView.png

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

속성

  • 하위요소 : -

  • 링크 : -

  • 스크롤 애니메이터 : -

  • 배경이미지 : -

  • 백엔드 엘립시스 : -

_images/IUTabView.png

탭 뷰 Tab View

_images/iu_manual_prop_complex_IUTabView.png

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

속성

  • 하위요소 : -

  • 링크 : -

  • 스크롤 애니메이터 : -

  • 배경이미지 : -

  • 백엔드 엘립시스 : -

_images/IUCollapsible.png

컬랩시블 Collapsible

_images/iu_manual_prop_complex_IUCollapsible.png

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

속성

  • 하위요소 : -

  • 링크 : -

  • 스크롤 애니메이터 : -

  • 배경이미지 : -

  • 백엔드 엘립시스 : -

_images/IUImport.png

임포트 Import

_images/iu_manual_prop_complex_IUImport.png

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

속성

  • 하위요소 : 불가능

  • 링크 : 가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 가능

  • 백엔드 엘립시스 : 불가능

_images/IUTweetButton.png

트위터 공유 버튼 Tweet Share Button

_images/iu_manual_prop_complex_IUTweetButton.png

현재 페이지를 트위터로 공유할 수 있는 트위터 위젯입니다. Property에서 형태를 설정할수 있으나 크기는 조정되지 않습니다.

속성

  • 하위요소 : 불가능

  • 링크 : 가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 가능

  • 백엔드 엘립시스 : 불가능

_images/IUFBLike.png

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

_images/iu_manual_prop_complex_IUFBLike.png

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

속성

  • 하위요소 : 불가능

  • 링크 : 가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 가능

  • 백엔드 엘립시스 : 불가능

_images/IUCenterBox.png

센터박스 Centered Box

_images/iu_manual_prop_complex_IUCenterBox.png

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

속성

  • 하위요소 : 불가능

  • 링크 : 가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 가능

  • 백엔드 엘립시스 : 불가능

_images/IUProgressBar.png

프로그레스 바 Progress Bar

_images/iu_manual_prop_complex_IUProgressBar.png

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

속성

  • 하위요소 : 불가능

  • 링크 : 가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 불가능

  • 백엔드 엘립시스 : 불가능

_images/IUSVG.png

SVG (Scalable Vector Graphics)

_images/iu_manual_prop_complex_IUSVG.png

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

속성

  • 하위요소 : 불가능

  • 링크 : 가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 불가능

  • 백엔드 엘립시스 : 불가능

프로그래밍 위젯 Programming Widget

_images/PGForm.png

폼 Form

_images/iu_manual_prop_pg_PGForm.png

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

속성

  • 하위요소 : 가능

  • 링크 : 불가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 가능

  • 백엔드 엘립시스 : 불가능

_images/PGTextField.png

인풋 텍스트 Input Text

_images/iu_manual_prop_pg_PGTextField.png

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

속성

  • 하위요소 : 불가능

  • 링크 : 가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 가능

  • 백엔드 엘립시스 : 불가능

_images/PGTextView.png

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

_images/iu_manual_prop_pg_PGTextView.png

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

속성

  • 하위요소 : 불가능

  • 링크 : 가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 가능

  • 백엔드 엘립시스 : 불가능

_images/PGSelect.png

셀렉트 Select

_images/iu_manual_prop_pg_PGSelect.png

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

속성

  • 하위요소 : 불가능

  • 링크 : 가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 가능

  • 백엔드 엘립시스 : 불가능

_images/PGHTML.png

HTML (Hyper Text Markup Language)

_images/iu_manual_prop_pg_PGHTML.png

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

속성

  • 하위요소 : 불가능

  • 링크 : 불가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 가능

  • 백엔드 엘립시스 : 불가능

_images/PGCollection.png

콜렉션 Collection

_images/iu_manual_prop_pg_PGCollection.png

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

속성

  • 하위요소 : 불가능

  • 링크 : 가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 가능

  • 백엔드 엘립시스 : 불가능

_images/PGPageLinkSet.png

페이지 링크 셋 Page Link Set

_images/iu_manual_prop_pg_PGPageLinkSet.png

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

속성

  • 하위요소 : 불가능

  • 링크 : 가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 가능

  • 백엔드 엘립시스 : 불가능

_images/PGCheckBox.png

체크박스 Checkbox

_images/iu_manual_prop_pg_PGCheckBox.png

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

속성

  • 하위요소 : 불가능

  • 링크 : 가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 불가능

  • 백엔드 엘립시스 : 불가능

_images/PGRadioButton.png

라디오 버튼 Radio Button

_images/iu_manual_prop_pg_PGRadioButton.png

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

속성

  • 하위요소 : 불가능

  • 링크 : 가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 불가능

  • 백엔드 엘립시스 : 불가능

_images/PGButton.png

버튼 Button

_images/iu_manual_prop_pg_PGButton.png

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

속성

  • 하위요소 : 불가능

  • 링크 : 불가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 가능

  • 백엔드 엘립시스 : 불가능

_images/PGFileUpload.png

파일 업로드 File Upload

_images/iu_manual_prop_pg_PGFileUpload.png

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

속성

  • 하위요소 : 불가능

  • 링크 : 불가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 불가능

  • 백엔드 엘립시스 : 불가능

_images/PGSwitch.png

스위치 Switch

_images/iu_manual_prop_pg_PGSwitch.png

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

속성

  • 하위요소 : 불가능

  • 링크 : 불가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 불가능

  • 백엔드 엘립시스 : 불가능

_images/PGFlipSwitch.png

플립 스위치 Flip Switch

_images/iu_manual_prop_pg_PGFlipSwitch.png

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

속성

  • 하위요소 : 불가능

  • 링크 : 불가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 불가능

  • 백엔드 엘립시스 : 불가능

_images/PGSlide.png

슬라이더 Slide

_images/iu_manual_prop_pg_PGSlide.png

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

속성

  • 하위요소 : 불가능

  • 링크 : 불가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 불가능

  • 백엔드 엘립시스 : 불가능

_images/PGRangeSlide.png

레인지 슬라이더 Range Slide

_images/iu_manual_prop_pg_PGRangeSlide.png

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

속성

  • 하위요소 : 불가능

  • 링크 : 불가능

  • 스크롤 애니메이터 : 가능

  • 배경이미지 : 불가능

  • 백엔드 엘립시스 : 불가능

알려진 버그

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

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

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

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

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

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

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

환경설정 Preference

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

일반 General

_images/iu_manual_preference_general.png

  • 탭 메뉴 Select Tab Menu : 탭메뉴를 상단 툴바에서 보이도록 할 지 선택합니다.

  • 가이드 라인 색 Guide Line Color : 가이드라인 색상을 변경합니다. (가이드라인 보기 : View > Guide ⌘;)

  • Custom Template List URL : 새 프로젝트 템플릿 목록에 커스텀 템플릿을 적용하기 위해 plist URL을 입력합니다.

프로젝트 Project

_images/iu_manual_preference_project.png

  • 세이브 옵션 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

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

_images/iu_manual_preference_fonts.png

커스텀 템플릿 Custom Template

새프로젝트 만들기에 노출되는 템플릿 목록을 커스터마이즈 할 수 있습니다. 커스텀 템플릿을 적용하기 위해서 아래 가이드를 따라 주세요.

1. plist 만들기

내부에서 템플릿 리스트 구조는 plist 파일을 통하여 이루어지며 구조는 아래와 같습니다.

plist 구조

_images/iu_manual_preference_custom_plist.png

  • 1. isTemplate : 무조건 YES를 적어주시면 됩니다. (No는 내부에서만 사용하고 있습니다.)

  • 2. downLoadLink : 다운로드를 받을 수 있는 zip파일입니다. download를 위해 iu파일이 zip파일로 묶어져 있어야 합니다.

  • 3. filename : zip파일안의 iu파일 이름입니다.

  • 4. thumbnail : new document 화면에서 보이는 thumbnail입니다.

  • 5. previewLink : preview 버튼을 누르면 연결되는 화면입니다. 이미지 파일 혹은 실제 페이지로 구성되어 있습니다.

Project type

  • 0 : default project

  • 1 : django project

  • 2 : angular js project

  • 3 : wordpress project

2. 서버에 저장하기

1에서 만든 plist 파일을 내 서버에 저장합니다. plist의 url주소를 확인합니다.

3. URL 입력

_images/iu_manual_preference_general.png

plist의 URL주소를 preference에 적용하면 다음 IUEditor실행부터 template이 반영된 모습을 확인할 수 있습니다.

템플릿 Templates

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

_images/iupro.png _images/paper.png _images/academy.png

단축키 Shortcut

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

프로젝트 관리 Project Management

  • Project Setting (⇧⌘P) : 프로젝트 설정 창을 보여줍니다.

  • Upload to Heroku (⇧⌘H) : 히로쿠 설정 창을 보여줍니다.

  • Refresh (⇧⌘F) : 현재 페이지를 다시 불러옵니다.

  • Import Custom Widget (⇧⌘W) : 커스텀 위젯 패널을 불러옵니다.

위젯 추가 Add Widget

  • IUBox (⌘1) : 캔버스에 추가하기 위해 IUBox위젯을 선택합니다.

  • IUText (⌘2) : 캔버스에 추가하기 위해 IUText위젯을 선택합니다.

  • IUImage (⌘3) : 캔버스에 추가하기 위해 IUImage위젯을 선택합니다.

  • IUStatic Image (⌘4) : 캔버스에 추가하기 위해 IUStatic Image위젯을 선택합니다.

  • IUCell (⌘5) : 캔버스에 추가하기 위해 IUCell위젯을 선택합니다.

위젯 사용 Widget Control

  • Copy (⌘C) : 선택한 위젯을 복사합니다.

  • Paste (⌘V) : 복사한 위젯을 붙여넣습니다.

  • Undo (⌘Z) : 실행한 기능을 되돌립니다.

  • Duplicate (⌘D) : 선택한 위젯을 동일한 레벨에 복제합니다.

  • Redo (⇧⌘Z) : 언두한 기능을 다시 실행합니다.

뷰 관리 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 (⌘\) : 프로토타입 모드 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.

Heroku

AWS 처럼 클라우드 호스팅을 제공하는 PaaS. 개인 계정당 5개의 홈페이지를 무료로 사용가능합니다.

python

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

widget

아이유 에디터에서는 스테이지에 추가되는 모든 요소들을 위젯이라고 표현합니다.