앱/가이드에 학술대회 포스터, 큰 이미지를 반영하고 싶으신가요? 혹은 제작한 특정 이미지를 반영하고 싶으신 경우, 전체 이미지를 HTML 파일로 변환하여 업데이트 하실 수 있습니다.
아래 이미지는 App 이용 가이드에 대한 안내 포스터를 이미지로 반영한 예시 입니다.
이미지로 반영하시면, 가이드 내 검색은 불가능합니다.
1. 이미지 준비 (1MB이하)
1MB 이하의 이미지를 준비하세요. (1MB 이상은 변환 되지 않습니다.)
모바일에 적합한 이미지는 가로 1,000pix 이상이며 세로형 스타일의 이미지를 준비해주세요.
2. 이미지 HTML 코드 변환
Image Encoder: https://www.base64-image.de/
해당 사이트에서 이미지 업데이트 및 코드 추출(무료)을 진행하세요.
A.코드 변환
1.이미지 업데이트 후
2.아래 변환 리스트에서 "</>show code" 버튼 클릭
B.코드 복사 / 추출
"For use in <img> elements:"의 "Select all" 클릭 / 복사
3. HTML 파일 생성
A.아래 "temp.html"파일을 다운받고 메모장에서 열기. (Window: 메모장 / MAC: TextMate.app)
B.코드 아래, "<body><img src="" width="100%">" 부분에서 다음 영역에 src="{추출/복사한 코드}" 입력 (따옴표 사이에 넣어주세요.)
{코드}
<!DOCTYPE html>
<html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=yes" content="target-densitydpi=device-dpi">
<title>Guidebook</title>
<style type="text/css">body{font-family:"Times New Roman", Times, serif;}
#m {list-style:none;padding-left:0px;padding-right:0px;margin:0 auto;}
#m li {padding-bottom:10px;padding-top:10px;}
.x {list-style-type:lower-alpha;}
.a{font-size:120%;color:#333333;text-decoration:none;}
.t{padding-left:20px;padding-right:20px;font-size:150%;font-weight:bold;text-align:center;}
v{font-size:120%;}
.ab{text-align:justify;font-size:120%;}</style>
</head>
<body><img src="" width="100%"></body></html>
C.저장하기 (파일 포맷은 html 유지하여 저장하세요.)
4. html 업데이트
이제 빌더에 제작한 Html 파일을 업데이트 하세요.
- 빌더에서 Webview 기능을 선택 및 메뉴에 추가하고 아이콘, 메뉴 이름을 변경하세요.
- 추가한 Webview 메뉴를 선택
- Format: Upload a custom HTML snippet. 를 선택
- HTML File: Upload HTML file 버튼을 클릭하여 제작한 html 파일을 업데이트 - 저장하면 업데이트 완료됩니다.
