Visualdive핑거프레스가이드

핑거프레스가이드는 핑거프레스안에서

제공되는 기능에대한설명입니다.

누구나쉽고, 간편하게차별화된

나만의글을작성할수있습니다.

핑거프레스의놀라운기능을지금둘러보세요!

기본편집기에서핑거프레스편집기로전환

핑거프레스로 제작된 스토리텔링 콘텐츠는

비주얼다이브에서 확인하실 수 있습니다.

http://www.visualdive.com/category/format/story-cat/

Steps

Step 1 • 열(Row)와컬럼(Column)

• 텍스트블록

8

• 이미지

• 동영상플레이어

• 구글지도(GoogleMap)

• 싱글아이콘

• 간격/ 여백

Step 2 • 가로/ 세로탭

• 아코디언

18

• ProgressBar

• 버튼!

• FancyText

• 플립(Filp) 박스

• 하이라이트박스

• 다중아이콘

• 인포(Info) 테이블

• 움직이는배너

• 목록아이콘

• 카운터

Step 3 • 사용자HTML

• 타임라인

30

• 모달(Modal) 박스

• CharDive(차트다이브)

• 고급슬라이드

• iHover

Step 1

핑거프레스는열(Row)과 컬럼(Column)으

로짜여진그리드(Grid)를통해사용자가원

하는다양한레이아웃을구성할수있습니다.

Step1

열(Row)과컬럼(Column)

열(Row)

열(Row)은콘텐츠를구성하는 ‘가로’를의미합니다. 컬럼(column)이 추가되지않은상태의열영역

은1컬럼상태로,전체너비(full width)가됩니다.

• 열을세로로나누기위해서는컬럼(column-단)을활용하세요.

• 열안에열을추가한상태로열/탭/세로탭/아코디언는해당열에첨가하실수없습니다.

• 열편집– Full-width content 옵션을설정하면배경이미지와함께해당열에포함되어있는모

든콘텐츠의가로길이가늘어납니다.

• 열(Row)와컬럼(Column)

• 텍스트블록

• 이미지

• 동영상플레이어

• 구글지도(GoogleMap)

• 싱글아이콘

• 간격/ 여백

8

Step1

열(Row)과컬럼(Column)

Step1

열(Row)과컬럼(Column)

컬럼(Column)

컬럼(Column)은 열(row)을 세로로나누는 ‘단’ 입니다. 핑거프레스의컬럼은12등분을기준으로합

니다. 컬럼을추가하려면열요소왼편에있는 ‘컬럼(Column)추가하기’ 옵션을이용하세요.

열(row) 안에열을추가한경우, 요소의상단에생성되는컬럼편집창을통해컬럼의너비(width)를

설정할수있습니다.

컬럼을추가한상태에서요소첨가없이레이아웃을변경할경우, 기존의컬럼은사라집니다. 반대로,

요소가있는상태에서는레이아웃을변경해도해당컬럼의요소는사라지지않습니다.

핑거프레스Column구조

기본으로제공되는구조외에사용자레이아웃옵션에서1/3 + 2/3, 1/4 + 3/4, 1/6 + 5/6, 1/12 +

11/12과같은조합을사용하여컬럼을분할할수있습니다.

열(Row) 편집– 패럴랙스(Parallax)

패럴랙스(Parallax)란?

상하좌우로움직이는스크롤에반응하여콘텐

츠와배경요소간의시차가발생하는것을의

미합니다.

이러한 패럴랙스 효과로 발생한 시차는 페

이지를 동적으로 만들어 주어 디지털 스토

리텔링과 같은 인터렉티브(interactive)

페이지에적합한효과로활용됩니다. 열 (

row) 요소의 오른쪽에 위치한 ‘열 편집 –

Background’ 옵션을 통해핑거프레스에서

제공하는다채로운 패럴랙스 효과를 구현해

보세요.

1/11/2 1/2

1/3 1/3 1/31/4 1/4 1/4 1/4

1/6 1/6 1/6 1/6 1/6 1/61/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12

9 10

Step1

텍스트블록

Step1

텍스트블록

기본적인텍스트를편집할수있습니다. CSS애

니메이션을텍스트블록에추가하여보다더재미

있는효과를연출해보세요! ‘텍스트 -비주얼’옵

션에서제공하는메뉴들을이용해원하는기능을

텍스트블록에간편하게추가하실수있습니다.

• ‘미디어추가’ 버튼을이용해텍스트와이미지를함께첨부할수있습니다.

• ‘텍스트– 텍스트’ 옵션의태그(tag)를사용할경우, 사용하고자하는태그버튼을두번누르면

해당태그를닫을수있습니다(전문가권장).예시 : 1번클릭→<code>,2번클릭→</code>

디자인옵션

디자인옵션은 ‘열(row) 편집, 텍스트블록, 이미지, 비디오플레이어’에있는옵션으로, Margin/

Border(테두리)/Padding값을컨트롤할수있는옵션입니다.모든값은픽셀(px)로적용됩니다.

• Margin(바깥 여백) :테두리를기준으로요소의상하좌우의공간을뜻합니다.배경색과같은스타

일속성은부여되지않으며, margin 값을설정할경우, margin 값을포함한요소의길이나높이

가늘어나요소와요소간의여백으로작용합니다.

• Border :테두리를의미합니다.테두리의두께를입력하지않고색상만지정했을경우테두리는생

성되지않습니다.

• Padding(안쪽여백) :요소의테두리와요소안에위치하고있는콘텐츠와의사이여백을의미합

니다. padding값을설정할경우,요소의길이나높이는늘어나지않고요소의안쪽으로여백이생

깁니다.이같은경우,요소안에있는콘텐츠에변형이생길수있습니다.

비주얼옵션 텍스트옵션

11 12

Step1

이미지

Step1

동영상플레이어

이미지를간편하게추가하세요.미디어라이브러리

와사용자업로드를통해원하는이미지를페이지에

첨부하실수있습니다.

동영상플레이어기능을통해유튜브(YouTube)와

비메오(Vimeo) 영상을간편하게첨부할수있습

니다.

• ‘파일업로드’옵션을사용하여이미지를직접업로드할경우,사용자이미지는미디어라이브러리

에우선등록된후에사용이가능합니다.미디어라이브러리는핑거프레스에접속하는모든사용

자가열람할수있음으로,저작권에접촉되지않는이미지를업로드해주세요.

• ‘이미지크기’옵션에이미지의크기를지정하지않으면,해당요소가포함되어있는컬럼에맞춰이

미지가자동조절됩니다.사용자가원하는이미지의크기를설정하여레이아웃을디자인하세요.

• 이미지의크기를임의로축소할경우원본이미지의일부가잘릴수있습니다.

Full사이즈상태에서컬럼너비에맞춰진원본이미지

1909pixcels

1262pic

xels

• 동영상의url은 ‘http://’ 까지입력해주세요.

• 예시 : https://vimeo.com/57463725

• 링크가져오기 : 유튜브와비메오모두해당동영상을재생하는창의url을복사하는방법과영상의

‘공유/Share’ 버튼을클릭하여얻을수있는url주소모두사용이가능합니다.

• 단, embed 되어아이프레임(iframe) 태그(tag)로제공되는주소는사용하실수없습니다.

유튜브url가져오기

13 14

비메오url가져오기

Step1

구글지도(Google Map).싱글아이콘

Step1

간격/여백

간편하게구글지도를첨부하세요.요소와요소, 콘텐츠와콘텐츠사이에간격을만드

세요! 간격/여백은픽셀(px)값으로설정합니다.

Just아이콘.

• Google maps에서맵을생성하세요.

• 1) 상호, 주소등을이용해사용자가원하는위치를찾습니다.

• 2) 위치를찾은후“Share” 버튼을클릭합니다.

• 3) 지도퍼가기를통해아이프레임(iframe) 태그를복사하여이곳에붙여넣기합니다.

• 링크공유하기의url 주소는적용되지않으므로지도퍼가기의아이프레임(iframe) 태그를복사하

여붙여넣기하세요.

• 싱글아이콘은핑거프레스에서제공하는아이콘뿐만아니라,사용자가직접디자인한이미지

를아이콘으로사용할수있습니다.사용자이미지사용을원할때, ‘Icon to display’옵션에서 ‘

Custom Image Icon’을선택하세요.

• 싱글아이콘은해당요소가속해있는컬럼(column)의 전체너비(width)를차지합니다.

• 링크, 애니메이션, 툴팁(Tooltip) 아이콘에설정할수있습니다.

• 간격/여백기능은페이지가보여질각각의디바이스(Device) 별로구분하여설정이가능합니다.

• 열(Row) 간격조절만가능합니다.

• 열을세로로나누고있는컬럼과컬럼사이의여백을조절하고싶을때는열오른쪽에위치한 ‘열

편집– 디자인옵션’에서Margin(마진)/Padding(패딩)으로 조절하세요.

15 16

Step2

가로/세로탭

Step 2

탭브라우징(tab browsing)과 같이해당영역안

에서여러개의내용을탭클릭하여이동할수있습

니다.

가로탭

• 탭제목이상단에위치합니다.

• 노란색의탭편집창을클릭하면탭제목을편집하실수있습니다. tab-002

• 탭을추가하려면마지막탭제목옆에있는 ‘+’를누르면빈탭이추가됩니다.

• 노란색탭편집창에 ‘+’로표기되어있는 ‘Prepend to 탭’을클릭하면탭안에탭/세로탭/아코디

언을제외한나머지요소를첨가하여세부내용을구성할수있습니다.

• 가로/ 세로탭

• 아코디언

• ProgressBar

• 버튼!

• FancyText

• 플립(Filp) 박스

• 하이라이트박스

• 다중아이콘

• 인포(Info) 테이블

• 움직이는배너

• 목록아이콘

• 카운터

18

Step2

가로/세로탭

Step2

아코디언

세로탭

• 탭의세로형입니다. 탭의제목이왼쪽에위치합니다.

• 세로탭은탭의제목이왼편으로오는특성상, full 너비(width), 1, 2 컬럼너비에서사용을권장

합니다.

• 세부편집사항은 ‘탭’과동일합니다.

여러개의콘텐츠를하나의영역에서접었다펼수

있습니다.많은양의콘텐츠를함축된제목으로만

우선노출하기원할때유용합니다.아코디언의제

목을클릭해해당내용을확인해보세요!

• 아코디언의제목을클릭하면영역이펼쳐지면서해당콘텐츠의내용이보여집니다.

• 펼쳐진영역을다시접어놓기원할때는해당내용의제목을클릭하세요.

• 노란색의섹션편집창을클릭하면섹션제목을편집하실수있습니다. accordion-002

• 섹션을추가하려면하단의 ‘섹션더하기’를클릭하세요.

• 노란색섹션편집창에 ‘+’ 로표기되어있는 ‘Prepend to 섹션’을클릭하면섹션안에탭/세로탭/

아코디언을제외한나머지요소를첨가하여세부내용을구성할수있습니다.

19 20

Step2

Progress Bar

Step2

버튼!

여러개의수치(value) 값을비교하고싶을때,움

직이는막대그래프를 이용하여 데이터(data)를

차트(Chart)화 할수있습니다.

• 그래프 막대에 적용될 값을 ‘값(숫자)|제목|색상 ’ 순으로 입력하세요. 예시 : 90|

Design|#BD343C

• 색상은 ‘그래프막대색상’옵션에변경하실수있습니다. ‘그래프막대색상’옵션에서선택한색상

은모든막대에일괄적으로적용됩니다.그래프의막대색상을개별적으로설정하려면색상을HEX

값으로입력하세요.예시 : #024059, #498BA6, #F2622E

• 그래프막대의제목은영문/한글모두입력이가능합니다.

• 단위를입력하면그래프막대안에제목/값과함께표기됩니다.

다양한편집옵션을이용하여사용자디자인이반

영된멋진버튼을생성하세요!

• 버튼편집창의 ‘General’에서버튼의기본옵션을선택하세요.

• ‘Background’ 에서는마우스호버(Hover) 효과를설정할수있습니다.

• 버튼안에아이콘을삽입할수있으며, 버튼의테두리와그림자를설정할수있습니다.

• ‘Tooltip’을 설정하면버튼위에마우스가올라갔을때, 말풍선이생깁니다. 말풍선의위치는 ‘

Tooltip’옵션에서설정할수있습니다.

마우스를올려놓았을때모양바꾸기효과(Hover)

▼

21 22

마우스를오려놓으면버튼모양과색상이아래쪽형태로변형됩니다.

Step2

Fancy Text & 플립(Flip)박스

Step2

하이라이트박스& 다중아이콘

문장의특정부분에타이핑효과나움직임을주고

싶을때!부가적인디자인요소로활용하세요.

• 접두사와접미사사이의 ‘Fancy Text’에 입력된텍스트에한정하여효과가적용됩니다.

• ‘Advanced Settings’에서 효과의속도를설정할수있습니다.

• 핑거프레스에서제공하는아이콘뿐만아니라, 사용자아이콘을업로드하여플립박스에첨부하

실수있습니다. 아이콘을첨부하지않을경우해당영역은빈여백으로남아있게됩니다.

• 회전할박스의앞/뒷면은각각편집이가능하며, 뒷면에는사용자가연결하고싶은링크를설정

하실수있습니다.

• 박스의너비(width)는박스가속해있는컬럼(column)의 너비와비례합니다.

(접두사)안녕하세요. |(접미사)입니다.

(접두사)안녕하세요. 비주얼다이브|(접미사)입니다.

타이핑 효과 적용되어 한글자씩입력

마우스가영역위로오버(over)되면 해당영역의

박스가회전하면서숨겨진내용을보여줍니다.반

전의효과!

해당박스에마우스호버(Hover) 효과를줍니다.

하이라이트박스를추가하여사용자레이아웃에재

미있는요소로활용하세요!

많은수의아이콘을원하는컬럼(Column) 위치에

한번에추가할수있습니다.링크,애니메이션,툴

팁(Tooltip)을추가하여재미있는요소로활용하세

요!

하이라이트박스에사용자링크를추가하실수있습니다.

• 싱글아이콘이한컬럼에하나의아이콘입력만가능하다면, 다중아이콘은한컬럼안에여러개의

아이콘을입력할수있습니다.

• 여러개의아이콘에각각링크를추가하여원하는페이지로연결하세요.

• 링크설정과아이콘사이의간격, 툴팁(Tooltip) 설정은 ‘Other Settings’에서 설정할수있습니

다.

23 24

간편하게인포(Info) 테이블을만들수있는기능입

니다.부가적인정보나알림,강조하고싶은내용을

인포테이블을통해표현하세요.

이미지와텍스트에마우스호버(Hover) 효과를주

어동적인요소로활용할수있습니다.배너에첨부

한내용은이미지위에마우스가오버(over) 되었

을때보여집니다.

• 디자인스타일을선택하면,사용자가선택한디자인스

타일의색상에따라테이블의스타일이구성됩니다.

• 인포테이블의내용을구성하고단락을구분하고싶을

때,줄바꿈외에텍스트편집창의 ‘수평선’옵션을활용

하여라인을구성할수있습니다.

• 인포테이블위로마우스가오버(over)되면그림자효

과가연출됩니다.

Step2

하이라이트박스& 다중아이콘

Step2

움직이는배너

• 움직이는배너의제목과내용을입력하면, 마우스가오버(over) 되기전까지는이미지와제목만

노출됩니다. 단, 사용자가선택한스타일에따라이미지만노출되는경우도있습니다.

• 움직이는배너에링크를추가하실수있습니다.

• ‘반응설정’으로움직이는배너를각각디바이스(Device)에최적화하세요.

이미지위로마우스가오버되면흰색라인과글씨가미끄러지듯좌우에서등장합니다.

25 26

마우스를 내리면다시미끄러지듯좌우로사라집니다.

우측<움직이는배너> 내용과관련있는이미지 ▶

Step2

목록아이콘

Step2

카운터

아이콘을활용해목록을만드세요. 아이콘과텍스

트를함께입력하실수있습니다.

사용자가 지정한 숫자를 자동으로 카운터 (

Counter)합니다.

• 요소보기에서목록아이콘을선택한후빈여백을클릭하면목록아이콘아이템선택창이뜹니다.

• 목록아이콘아이템편집창의 ‘List Content’ 에서아이콘과함께노출될목록의텍스트를편집하

실수있습니다.

• 카운터는아이콘과함께활용할수있습니다.

• ‘Counter Value Prefix/Counter Value Suffix’옵션은생략할수있습니다.값이입력되었다면,

카운터값의앞/뒤에표기됩니다.

• ‘카운터롤링’ 시간을설정하여카운트되는속도를조절하세요.

숫자가지정된속도에따라가시적으로카운팅됩니다

▼

27 28

Step 3

• 사용자HTML

• 타임라인

• 모달(Modal)박스

• Chart Dive(차트다이브)

• 고급슬라이드

• iHover

Step3

사용자HTML

사용자가직접필요한 HTML 태그(tag)를 입력할

수있습니다. HTML과 태그사용에대한전반적인

이해를필요로함으로,전문가사용을권장합니다.

• a name, iframe 태그등을활용해보세요.

• 태그안에인라인(inline) 요소로 ‘style’을 넣으실수있습니다.

예시 : <p style=”font-family:맑은고딕;”>테스트</p>

30

Step3

타임라인

Step3

타임라인

지나간기록과이벤트를타임라인형식으로남기세

요. ‘타임라인아이템,주요타임라인아이템,아이

템구분자’를추가하여간편하게사용자타임라인

을만드실수있습니다.

• 요소보기에서타임라인을선택한후빈여백을클릭하면타임라인아이템선택창이뜹니다.

• 아이템구분자(Separator) : 타임라인아이템을구분해주는역할을합니다.

• 타임라인아이템 :타임라인의가운데선을중심으로양쪽으로교차되며타임라인의내용을이룹니

다.

• 타임라인위/아래아이템 : 타임라인박스의위/아래화살표를선택하여타임라인전체의시작과

끝에위치시킬수있는아이템입니다.

• 타임라인의년/월/일은자동으로생성되지않습니다.

• 사용자가타임라인아이템을추가한순서대로타임라인이구성됩니다. 별도의날짜가필요할때는

직접타임라인아이템의텍스트편집창에입력하세요.

• 타임라인의전체너비(full width)는 타임라인요소가위치하는컬럼(column)의 너비와비례합

니다.

31 32

Step3

모달(Modal) 박스&고급슬라이드

Step3

Chart Dive(차트다이브)

부트스트랩(Bootsrap)의 모달(Modal) 박스

기능입니다. 텍스트, 이미지뿐만아니라 유튜브

(YouTube), 비메오(Vimeo) 동영상첨부도가

능합니다.

• 모달박스를이용하면, 페이지에내용을열거하거나새창/탭으로띄우기하지않아도현재페이지

에서사용자가보여주길원하는내용을별도의창으로생성할수있습니다.

• 모달박스의실행형태는 ‘버튼/이미지/텍스트/페이지로딩시자동실행’으로설정할수있습니

다.

• 동영상을첨부하기위해서는 ‘모달박스내용’편집창에있는 ‘Add a video’옵션을이용하세요.

첨부된동영상의너비(width)는 사용자가설정한모달박스의크기가갖는너비(width)에자동

으로맞춰집니다.

최적화된 21개의다양한차트로사용자데이터를

시각화하세요.차트다이브가이드에서자세한설

명을보실수있습니다!

• 사용자데이터를시각화하기위해최적화된차트다이브입니다. 사용자의데이터특성에따라차

트스타일을선택하여사용하세요.

• 데이터입력은①편집창에직접입력하는방법과②‘csv 파일업로드’로사용자로컬파일을가져오

는방법이있습니다.

차트다이브http://story.visualdive.co.kr/chartdive-guide

이미지,텍스트와같은요소로슬라이드를생성할

수있습니다.다양한옵션들을설정하여사용자가

원하는 ‘고급슬라이드’를만들어보세요!

• 요소보기에서고급슬라이드를선택한후빈여백을클릭하면슬라이드에추가할수있는요소선

택창이뜹니다.

• 슬라이드옵션에서자동재생, 화살표, 네비게이션등을상세하게설정하실수있습니다.

33 34

Step3

iHover

Step3

iHover

마우스호버(Hover) 효과로이미지와텍스트를재

미있게표현하세요.다양한마오스오버스타일이

이미지와텍스트를인상깊게연출합니다!

• 호버(hover) 효과란마우스가요소위에위치할때움직임이구현되는것을이야기합니다.

• iHover를 클릭하면 iHover 썸네일을설정하는옵션창이제일먼저뜹니다. 옵션창에서는 iHover

의모양, 가로너비(width),정렬을설정할수있습니다.

• iHover 아이템옵션창에서호버효과와텍스트를편집하실수있습니다.

• 열안에한번더추가된열에서는 iHover를 첨가하실수없습니다.

너비250px로설정된 iHover썸네일

이미지위로마우스를올려놓으면입체적효과가적용되어이미지가변합니다.

호버(Hover)효과 1 적용시마

우스를이미지에올리면90도 입

체적으로회전하며이미지가 변

환됩니다. 다시마우스를내리면

원래대로돌아옵니다.

호버(Hover)효과 6 적용시마우

스를올리면입체적으로돌출효과

가적용되며 자연스럽게 이미지가

변환됩니다. 마우스를내리면원래

의이미지로돌아옵니다.

35 36

Thank you핑거프레스가이드