유저자료실

2025.07.23 10:52

PWA 팝업 스킨 제작 가이드

본 가이드는 추후 업데이트 될 0.0.5 버전에서 적용할 수 있습니다.

기본 구조
스킨은 두 개의 파일로 구성됩니다:

popup.html - 팝업 구조
popup.css - 디자인 스타일

폴더 생성
popup/내스킨이름/
├── popup.html
└── popup.css

HTML 파일 작성
popup.html에 다음과 내용을 작성하세요:

<div class="pwa-install-popup">
    <div class="pwa-popup-content">
        <button class="pwa-close-btn">{{closeIcon}}</button>
        
        <h2 class="pwa-popup-title">{{title}}</h2>
        <p class="pwa-popup-description">{{description}}</p>
        
        <button class="pwa-install-btn">{{installButtonText}}</button>
        <button class="pwa-later-btn">{{laterButtonText}}</button>
    </div>
</div>


필수 클래스
반드시 포함해야 하는 클래스들:

pwa-install-popup - 메인 컨테이너
pwa-close-btn - 닫기 버튼
pwa-install-btn - 설치 버튼
pwa-later-btn - 나중에 버튼

기본 CSS 작성
popup.css에 최소한 이런 스타일이 필요합니다:

css.pwa-install-popup {
    position: fixed;
    display: none;
    z-index: 99999;
}

.pwa-install-popup.show {
    display: block !important;
}

.pwa-close-btn,
.pwa-install-btn,
.pwa-later-btn {
    cursor: pointer;
    border: none;
}

모바일 대응
css@media (max-width: 480px) {
    .pwa-popup-content {
        width: 100%;
        padding: 20px;
    }
}


스킨 적용하기
JavaScript에서 스킨을 적용하려면:
javascriptawait changePWAPopupSkin('내스킨이름');


주의사항

클래스 이름을 정확히 지켜주세요
z-index는 99999 이상으로 설정
모바일에서도 잘 보이도록 테스트
다크모드를 고려하면 더 좋습니다

간단한 예제
하단 고정 스타일:
css.pwa-install-popup {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: white;
    padding: 20px;
    border-top: 1px solid #ddd;
    display: none;
    z-index: 99999;
}

.pwa-install-popup.show {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.pwa-install-btn {
    background: #007AFF;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}

.pwa-later-btn {
    background: transparent;
    color: #666;
    padding: 10px 20px;
}

.pwa-close-btn {
    background: none;
    font-size: 20px;
    color: #999;
}

  • 공유링크 복사

    댓글목록

    등록된 댓글이 없습니다.