Page Comparison

컴포넌트 목록은 상황에 따라 추가, 삭제 및 디자인이 변경될 수 있습니다.

...

01. With Background

백그라운드와 함께 사용할 수 있는 헤더 컴포넌트이다. 백그라운드 헤더는 Text, Swipe Cards 2가지 타입이 있다.

Image Added 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

01-01. Text Type

Default는 Text 타입으로, 백그라운드 헤더 컴포넌트 추가 시 다음과 같이 텍스트와 버튼이 화면에 출력된다.

...

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/HeaderWithBackground

01-02. Card Type

Swipe card 타입으로, 백그라운드 헤더 컴포넌트를 설정 하면, 다음과 같이 텍스트와 Swipe가 화면에 출력된다.

...

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/HeaderWithBackground

...

02. with Countdown

카운트다운과 함께 사용하는 헤더 컴포넌트이다.

Image Added 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

컴포넌트 추가 초기 화면은 다음과 같다.

...

카운트다운 헤더는 Text, Circular 2가지 , Icon Countdown 3가지 타입이 있다.

...

모든 카운트다운 헤더에 공통으로 들어가는 카운트다운 UI 타입은 End Date와 D-day 2가지가 있다.

• End date : 카운트다운 종료일시를 직접 지정하여 셋팅

• D-day : 카운트다운을 시작할 Base Date를 지정하고, 카운트할 D-day 일수를 지정하여 셋팅

End date	Image Added
D-day	Image Added

Icon Countdown의 경우에만, 아이콘 설정 관련 옵션이 추가로 출력된다.

...

카운트다운 헤더 종류와 카운트 UI타입별 결과물은 다음과 같다.

	카운트 타입{End date}	카운트 타입{D-day}
Text	Image Added	Image Added
Circular	Image Added	Image Added
Icon	Image Added	Image Added

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/HeaderWithCountdown

...

03. with Video

비디오와 함께 사용되는 헤더 컴포넌트이다.

Image Added 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

컴포넌트 추가 후, 다음과 같이 옵션 설정이 가능하다영상과 버튼, 2개의 셋팅 옵션 영역을 확인할 수 있다.

...

비디오는 Upload, Url 2가지 방법으로 셋팅 할 수 있다. 유투브 URL을 삽입하면 다음과 같이 화면에 영상이 출력된다.삽입하고 저장하면, 아래와 같이 영상이 화면내에서 Play된다. (ex. 아이온커뮤니케이션즈 홍보 유투브 영상 : https://www.youtube.com/watch?v=fq6kI35Kfmg)

...

...

추가로 설정 가능한 옵션은 다음과 같다. 모두 ON으로 설정 후 확인해보자.

• Display Controls : 동영상 재생 관련 컨트롤러 출력 여부 설정

• Auto Play : 동영상이 자동으로 바로 시작되는 기능 사용 여부 설정

• Loop : 동영상 종료 후, 루프로 반복 재생되는 기능 사용 여부 설정

• Muted : 무음처리 기능 사용 여부 설정

설정이 완료되었다면, 화면 상단 중앙에 있는 Preview를 클릭하여, 미리보기를 진행하자.

...

Header with Video가 아래와 같이 출력된다. 화면에 마우스 오버시 Display Controls가 출력되고, Auto Play로 영상은 화면 진입시 바로 자동 재생된다. Loop가 ON이기 때문에 영상 종료 후에도 계속 반복 재생되고, Muted 처리되어 음소거 상태로 영상이 재생된다. Muted를 화면에서 해제하여 소리나게 변경할 수 있다.

...

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/HeaderWithVideo

...

04. with Chart

챠트를 함께 사용하는 헤더 컴포넌트이다.

Image Added 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

컴포넌트 추가 초기 화면은 다음과 같다.

...

...

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/HeaderWithChart

...

05. with Device

디바이스와 함께 출력되는 헤더 컴포넌트이다. 백그라운드 헤더는 Mobile Features, Side by side, Card Grid, Text Grid 총 4가지 타입이 있다.

...

컴포넌트를 추가하면, Default로 Mobile Features 타입의 헤더가 다음과 같이 출력된다.

...

디바이스 이미지를 삽입하여 활용할 수 있는 헤더 컴포넌트이다.

Image Added 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

컴포넌트를 추가시 Default 화면은 다음과 같다.

...

디바이스 이미지 삽입을 원치 않는다면 Hide Image 옵션을 ON으로 설정하면 된다.

...

Heading과 Text는 해당 영역을 클릭하여 설정할 수 있다.

...

• Type : 헤딩의 크기 선택

• Text : 헤딩에 입력될 문자 설정

• Background : 헤딩 BG 칼라 설정

• Setting : 기본으로 제공하는 preset과 Customized 로 선택 가능

  • Font Family : 폰트 설정

  • Size(px) : 헤딩 사이즈 값 직접 입력

  • Line Spacing : 헤딩 위 아래 라인 간격 설정

  • Character : 노출 문자 개수 설정 가능

  • Color : 헤딩 문자 칼라 설정

  • Align : 헤딩 정렬 설정

  • Option : 볼드(헤딩의 경우, 이미 볼드 처리가 되어 있음), 기울기, 밑줄, 취소선 선택 가능

버튼을 추가, 삭제, 수정 할 수 있다.

...

설정() 아이콘을 클릭하면 버튼 상세 설정 화면이 Modal로 출력 된다.

...

버튼에 앱스토어, 구글 플레이 다운로드 링크를 설정한뒤 저장하자.

...

...