홈페이지 관리 시연 영상

드래그 앤 드롭과 클릭으로누구나 쉽게 홈페이지 유지관리를 할 수 있습니다. 이제는 문구 하나, 이미지 하나 바꿀 때마다 전문인력에 맡기지 않아도 됩니다.


홈페이지 관리가 쉬워지면서 생기는 변화들을 상상해보세요!!


디자인기초위젯별 기능 설명 (디자인 요소)

이미지 위젯

텍스트 위젯과 더불어 가장 자주 쓰이는 위젯입니다. 페이지에 이미지 요소를 삽입하 고자 할 때 사용합니다.

  • 이미지 삽입 방법: 왼쪽 상단 이미지 영역에 마우스 커서를 올려놓으면 이미지를 업로드 하거나 아임웹이 제공하는 이미지를 선택할 수 있습니다.
  • 이미지 채우기: 이미지를 그리드에 빈 공간 없이 가득 채우게 됩니다. 이 옵션이 해제되면 허용된 그리드 공간 내에서 이미지를 잘림 없이 표현합니다.
  • 라이트박스:  이미지를 누르면 주변이 어두워지면서 큰 이미지로 확대하여 보여줍니다. 이미지 링크와 함께 사용할 경우 이 옵션이 무시됩니다.
  • 원형 이미지: 이미지를 원형으로 만듭니다. 이미지의 원본 비율과 상관 없이 정원 형태로 만듭니다.
  • 흑백 이미지: 이미지를 흑백으로 만듭니다.
  • 선명하게: 이미지가 좀 더 선명하게 보입니다.  이미지 유형에 따라 부적절하게 보일 수 있으니 주의해야 합니다.
  • 높이/높이고정: 이미지의 높이를 지정합니다. 높이고정이 활성화 되면 기기에 상관 없이 지정된 높이로 표현됩니다.
  • 설명: 이미지와 함께 출력할 텍스트를 삽입합니다. 이미지 아래에 표시하거나 겹쳐서 표시할 수도 있습니다.
  • 음영: 이미지 위에 입힐 색상을 지정할 수 있습니다.


롤오버 이미지란?

롤오버 이미지란 마우스 커서가 이미지에 올라갔을 때 발동되는 효과 또는 이미지 전환을 말합니다. 롤오버 이미지 설정이 비어있으면 마우스를 올려도 변화가 생기지 않습니다.

예를들어 롤오버 이미지 항목에서 "흑백 이미지"를 체크하게 되면 마우스를 올렸을 때 흑백 이미지로 표현됩니다.


이미지맵 위젯

하나의 이미지에 여러 링크 영역을 구현하고자 할 때 사용합니다.


사용방법

  1. 이미지 맵으로 사용할 이미지를 업로드 합니다.
  2. 이미지 맵 링크의 추가 버튼을 눌러 링크 영역을 추가하고 이동될 경로를 지정합니다.
  3. 이미지에서 링크 영역을 적절한 크기로 배치합니다.
  4. 이미지 맵 링크는 여러번 추가할 수 있습니다.


텍스트 위젯

텍스트 콘텐츠를 페이지에 삽입할 때 사용합니다. 더블클릭하여 편집모드로 진입할 수 있으며 자유롭게 텍스트를 작성할 수 있습니다.

: 단락 구분(Enter) 외에도 줄바꾸기(Shift+Enter)를 통해 다음 줄에 붙여서 작성할 수 있습니다.

텍스트 위젯은 다른 위젯과 마찬가지로 오른쪽 버튼을 눌러 설정 창에 진입이 가능합니다. 이곳에서는 텍스트 위젯의 전체적인 배경색, 간격, 테두리 등을 설정할 수 있습니다.


여백 위젯


여백 위젯은 디자인 모드에서만 흐린 점선으로 표시되며 실제로는 공간만 차지할 뿐 보이진 않습니다.

아임웹의 그리드 시스템 특성상 여백 위젯은 원하는 크기 조정이나 배치를 위해 필요합니다. 예를들어 이미지 위젯을 본문폭의 절반 만큼만 표현하고 가운데로 배치하고자 할 때 여백 위젯을 이미지위젯의 양 옆에 배치함으로써 표현할 수 있습니다.

여백 위젯은 특별한 추가 설정이 없으며 폭과 높이 조정만 가능합니다. PC에서 추가된 12그리드 크기(본문 가로폭을 가득 채우는 크기)의 여백은 1/2 높이로 자동 변환되어 모바일에서 표현되며, 그렇지 않은여백은 자동으로 숨겨집니다.


동영상 위젯

페이지에 동영상을 간편하게 삽입할 수 있습니다. YouTube 또는 Vimeo의 해당 동영상 URL을 동영상 주소에 입력하기만 하면 자동으로 삽입됩니다.

  • 커버 이미지: 기본적으로 YouTube 또는 Vimeo 에 설정된 대표 이미지를 가져오지만 다른 커버 이미지를 업로드하면 해당 커버 이미지가 적용됩니다.
  • 라이트 박스: 동영상 재생 버튼을 누르면 주변부가 어두워지며 큰 화면으로 영상이 재생됩니다.
  • 반복 재생: 동영상 재생이 끝나도 다시 처음부터 재생합니다.


가로선 위젯

문단이나 콘텐츠 묶음 사이를 명확하게 구분하기를 원할 때 가로선 위젯을 사용합니다. 가로선 위젯은 매우 단순한 구조를 가지고 있으며 길이, 두께, 선모양, 선색을 설정할 수 있습니다.


버튼 위젯

페이지에 버튼 위젯을 삽입하여 특정한 위치로 유도할 수 있습니다.

여러 버튼을 한 번에 추가할 수 있으며, 각각의 버튼을 다른 스타일로 설정할 수도 있습니다.


메뉴 리스트 위젯

아임웹에서는 상단에서 풀다운 형태로 서브메뉴들을 표시하지만, 본문 영역에 서브 메뉴를표시하고자 할 때 사용합니다.

메뉴 리스트 위젯을 추가한 이후 메뉴가 수정,삭제, 이동된 사항들을 자동으로 반영해 줍니다.

참고: 메뉴 리스트 위젯은 모바일에서 자동 숨김 처리 됩니다.

  • 다른 스타일: 위젯 설정창 중앙부에 있는 다른 스타일 버튼을 눌러 메뉴 리스트 위젯의 스타일을 선택할 수 있습니다.
  • 기준 위치: 기본값은 현재메뉴이며 원하는대로 서브메뉴가 표시되지 않으면 기준 위치를 적절하게변경합니다.
  • 메뉴, 텍스트, 정렬: 선택한 스타일의 세부 디자인 요소(각종 색상, 텍스트 크기 등)를 설정합니다.


타이틀 위젯

현재 위치한 메뉴명을 출력해 줍니다. 일반적으로는 잘 사용하지 않지만 섹션 설정에서 사이드 영역의 상단에 타이틀 위젯을 배치하면 매번 페이지 제목을 입력하지 않아도 되므로 편리합니다. 단, 타이틀 위젯이 관련 모든 페이지에 자동으로 삽입되는 것은 아니기 때문에 각 페이지마다 타이틀 위젯을 복사해 붙여넣으셔야 합니다.


단일 지도 위젯

하나의 위치정보를 사용자에게 알려주고자 할 때 사용합니다. 주로 "찾아오시는 길" 또는 Contact 메뉴 등에서 많이 활용합니다.

  • 주소: 주소의 전체 또는 일부만 입력하고 엔터를 누르면 검색된 주소 목록이 표시됩니다. 예를들어연희동 413-16 을 입력한 후 엔터를 누르면 아래에 주소 목록이 표시되고 이를 누르면 위치 정보가반영됩니다. 건물 층수나 호수 등 추가 주소 정보는 상세 주소 항목에 입력합니다.
  • 지도 핀 이동주소를 입력하면 자동으로 해당 주소의 위치로 지도가 이동되며 핀이 생성됩니다. 핀의 위치를 변경하려면 지도에서 해당 위치에 더블클릭하고 적용 버튼을 누릅니다.
  • 정보핀에 말풍선으로 표시될 정보를 입력합니다.


코드 위젯

코드 위젯은 고급 사용자를 위한 기능입니다. 외부 모듈 및 사용자 정의 스타일시트 및 스크립트 등을 내 사이트에 삽입하고 싶은 경우 사용합니다. 따라서 이 위젯을 사용하기 위해서는 관련 지식이필요합니다.

  • 코드 위젯에는 클라이언트 사이드에서 동작하는 모든 요소(HTML, CSS, JavaScript 등)를 삽입할수 있습니다. 단 서버 사이드에서 사용하는 언어(JSP, PHP 등) 및 데이터베이스(MySQL,MariaDB, MS-SQL 등)는 사용할 수 없습니다.
  • 코드 위젯은 다른 위젯과 달리 확인 버튼을 눌러야 저장됩니다.
  • 디자인 모드의 오동작을 방지하기 위해 코드위젯은 미리보기에서만 실행됩니다.


아이콘 위젯

아이콘 위젯은 그래픽툴이나 이미지를 사용하지 않고 폰트 아이콘을 이용해 사이트에 아이콘을 삽입할 수 있게 해줍니다.

수백가지의 아이콘을 삽입할 수 있으며, 자유롭게 크기와 색상을 조정할 수 있습니다.