Sparkle 사용법

아래는 웹 UI 구성과 인터랙션 개념의 이해를 돕고자 웹 디자인을 위한 심플한 툴인 스파클(Sparkle) 사용 가이드를 소개 한다.

Page Setup

각 페이지에는 기본 설정이 필요하다. 첫 번째 팝업은 페이지 유형을 지정한다. 새 사이트를 시작하면 첫 페이지가 “Home page(홈 페이지)”로 설정되고 다른 페이지는 “Regular Page(일반 페이지)”로 설정된다.

두 번째 필드는 페이지 제목이다. 기본적으로 Sparkle은 접두어 “페이지”뒤에 프로그래시브 번호가 붙은 페이지의 이름을 지정한다. 사용자는 이것을 바꿔야한다, 그것은 검색 엔진 관련성에서 매우 중요하기 때문이다. 페이지 제목을 클릭하여 변경할 수 있으며, 페이지 제목은 브라우저에 페이지 및 책갈피 이름으로 표시되며 검색 엔진에 자동 노출된다.

세 번째 필드인 페이지 파일 이름은 대부분 웹 사이트 설정 방법에 대한 세부 정보이지만 검색 엔진에 단서를 제공한다. 뿐만 아니라, 웹 사이트의 첫 페이지는 일반적으로 “index.html”이라고한다. 첫 페이지의 파일 이름은 변경할 수 없다.

Regular Page(일반 페이지)는 기본적으로 페이지 제목에서 파일 이름을 가져 오지만 “사용자 정의 파일 이름”을 클릭하고 페이지 이름을 입력하여 새 파일 이름으로 사용자 정의 할 수 있다.

기본 정보를 완성하기 위해 설명 및 키워드는 소위 말하는 “페이지 메타 태그” 정보의 내용을 검색 엔진 및 기타 로봇 리더기가 페이지 설명으로 사용하는 경우가 있다.

페이지를 퍼블리싱하려고 할때 제외하도록 선택한 경우에 페이지를 편집하고 페이지를 연결할 수 있으며 페이지는 미리보기에서 작동하지만 페이지를 최종 퍼블리싱 할 때 관련 데이터(assets)을 내보낼 수 없으며 페이지에 대한 링크 정보가 적용되지 않는다.

검색 엔진 메타 데이터 생성을 사이트 설정에서 재정의 할 수있는 페이지 설정, 추가 섹션을 전역 설정으로 적용할 수 있다. 디자이너는 소셜 미디어에 공유되는 경우, 추가 적으로 현재 페이지의 커버 이미지를 등록하여 공유되는 소셜 매체를 통해 표시할 수 있다.

페이지 정렬은 윈도우가 레이아웃보다 클 때 페이지 레이아웃이 브라우저에 표시되는 방법을 제어하며 기본값은 센터이다.

페이지의 배경은 Built-in patterns의 Custom patterns, 또는 동영상(Youtube, Vimeo, from Disk)으로 채울 수 있다. 비디오 옵션을 사용하면 전체 창 크기로 확장되는 비디오 배경을 사용할 수 있다.

색상을 선택하려면 둥근 원을 클릭하면 사전 정의 된 색상 견본과 함께 색상 선택 도구가 나타난다. 색상 설정에 대한 자세한 내용은 확인 컬러 페이지를 참고한다.

Managing Pages

새 페이지를 추가하려면 페이지 외곽선 하단의 + (더하기) 버튼을 클릭한다. 새 페이지 또는 페이지 모음 인 섹션을 추가 할 수 있다.

페이지 추가하기 :
페이지, 섹션 및 메뉴 : 섹션은 여러가지 용도로 사용될 수 있으며, 계층적으로 복잡한 페이지 작업이나 Onepage 작업에 유용하다.
개인 정보 보호 페이지 : 세팅에서 설정 가능하며, 자동 생성된다.
기존 페이지 가져오기 : 코딩 환경이 아니므로 완벽한 코드를 가져올 수 없다. 하지만 단순한 갤러리 형식과 같은 이미지 중심의 페이지는 유사하게 가져올 수 있다.

Editing Content

여러 요소에서 애니메이션을 사용할 수 있다. 애니메이션은 스크롤링과 동기화되지 않고 스크롤링에 의해 트리거된다. 페이지가 로드 될 때 애니메이션 요소가 뷰에 있으면 즉시 트리거된다.

Text : 텍스트 블록을 추가
Box : 박스 추가
Wide box : 브라우저 창만큼 넓게 미리 설정된 상자를 추가
Image : 이미지 추가
Gallery : 이미지 갤러리를 추가
Map : 구글 지도를 추가
Video : 동영상 요소를 추가
Audio : 오디오 요소를 추가
Menu : 메뉴 추가
Button, Text Input, Checkbox and Radio button : 폼 요소 또는 동작 버튼을 추가
Embed : 타사 웹 사이트에서 제공하는 코드를 추가
Twitter widget : 트위터 타임라인이나 트위터 페이지 링크를 추가
Facebook widget : 페이스북의 공유 버튼 또는 페이지 링크를 추가

Animation

Fade : 효과 설정
Move Up : 전환 값
Duration : 지속 시간
Delay : 지연 시간
Repeat : 반복 시간
Page bottom offset : 요소가 나타날 때와 비교하여 애니메이션이 트리거되도록 스크롤해야하는 오프셋 값이다. 하단 오프셋을 0으로 설정하면 요소 상단이 표시되는 즉시 애니메이션 트리거가 실행되지만, 약간 지나면 애니메이션을 자연스럽게 표현할 수 있다.

The Font Panel

스파클이 제공 한 목록으로 600 개 이상의 웹 글꼴을 설치 가능하며, 구글의 웹 폰트 프로젝트 및 시스템 글꼴을 사용하거나 자신의 웹 글꼴을 Sparkle에 추가 할 수도 있다.
글꼴 패널은 글꼴 메뉴에 표시된 글꼴을 제어하는 데 사용되며, 원하는 글꼴 카드 오른쪽 위에있는 + 버튼을 눌러 열 수 있다.

여기에서 사용 가능한 모든 글꼴이 표시되고 활성화 된 글꼴은 모서리에 녹색으로 표시된다. Google의 webfont 색인에서 제공되는 글꼴을 클릭하면 자동으로 다운로드되고 즉시 활성화된다. 사용시 Google에서 제공하는 웹 글꼴이 개인 정보 보호 및 성능을 위해 웹 사이트에 포함된다.

Sparkle은 일반적으로 사용되는 글꼴에 대한 글꼴 스택을 미리 정의 했으므로 패널을 사용하여 기본 제공 글꼴을 조정해야한다.
예를들면 Georgia는 Sparkle에 표시되고 Mac 시스템에서는 가장 많이 사용된다. 그러나 Windows 또는 Linux에서 실행되는 브라우저에서는 조지아가 설치되지 않을 가능성이 높으므로 브라우저는 Times 또는 Times New Roman를 사용한다.

마지막으로 사용자 정의 웹 글꼴 창을 사용하여 로컬 시스템에서 웹 글꼴을 추가 할 수 있다. 웹 사이트에서 사용할 때 글꼴 파일은 사이트의 일부로 포함된다. 이 창을 통해 각 글꼴 패밀리에 대해 여러 가중치를 입력 할 수 있으며 단일 글꼴로 그룹화된다.

Sparkle은 TTF, OTF, WOFF 또는 WOFF2 형식의 글꼴을 허용하여 필요한 웹 표준 형식을 내부적으로 생성한다.