시작하기 전에 알아야 할 것들

개발하기 전에 꼭 확인하세요!

• 해상도
• '기가지니, ooo해줘' 라는 가이드를 넣고 싶다면?
• 리소스 관리
  • 폰트
  • 이미지 파일 크기
  • 애니메이션
  • 비디오 재생 초기화

해상도

3rd Party 화면은 1920 x 1080 으로 표시됩니다. HTML에 아래 Meta Tag를 등록해야 정상적으로 보여집니다.

   <meta name="viewport" content="height=1080, width=1920, user-scalable=no" />

※ 관련 내용: 2. 일반사항 - 화면 해상도 설정

'기가지니, ooo 해줘' 라는 가이드를 넣고 싶다면?

'기가지니'를 사용자가 설정한 호출어로 넣어주세요.
appinfo.getUserInfo 의 extra.kwsid를 이용하면 됩니다.
'기가지니', '지니야', '친구야', '자기야' 를 전달 받을 수 있습니다.

gigagenie.appinfo.getUserInfo (null,function(result_cd,result_msg,extra){
    if(result_cd===200){
        var kwsid=extra.kwsid;
        console.log("kwsid:"+kwsid);
});

리소스 관리

폰트

기가지니 기본 폰트 사용을 권장합니다.
폰트 파일을 사용할 경우 크기를 최대한 압축해서 사용해 주세요.

이미지 파일 크기

• 한 페이지에서 불러오는 이미지의 전체 사이즈 합이 200KB를 넘지 않는 것을 권장합니다.
• 이미지 크기 줄이는 팁
  • 이미지대신 텍스트를 사용하기
  • PNG 파일 압축 사이트를 이용해서 줄이기 (예: tinypng.com )
• 배경이미지나 아이콘 등은 한 개의 레이어로 표시해 주세요.

애니메이션

• gif 파일일 경우

  • 10fps를 권장합니다.

• Javascript를 이용할 경우

  • 100ms를 권장합니다.
  • 예시:

  
    var width = 100;
    document.getElementById("rightBar").style.width = '100%';
    document.getElementById("leftBar").style.width = '100%';
    window.setTimeout(function() {  
        barTimer = setInterval(bar, 100); //100ms로 설정
    }, 1000);  
    function bar() {
        if (width < 0) {
            clearInterval(barTimer);
        } else {
            width--;
            document.getElementById("rightBar").style.width = width + '%';
            document.getElementById("leftBar").style.width = width + '%';
        }
    }
  

비디오 재생 초기화

• 비디오 재생을 종료할 경우 항상 초기화가 필요합니다. ('나가기', '종료', 페이지 이동, 같은 페이지 내 다른 비디오 재생 등)
• 예시:

    gigagenie.voice.onRequestClose=function(){ //나가기 이벤트 발생
        console.log("onRequestClose");
	video.src = ""; //비디오 초기화
        gigagenie.voice.svcFinished(null, function(result_cd, result_msg, extra){ //서비스 종료
            if(result_cd == 200){
            }
        })
    }