이제 드디어 코드(뇌)와 디자인(얼굴)을 합체할 시간입니다.
이 작업까지 마치면, 브라우저에서 실제로 작동하는 “완성된 첫 번째 앱”을 직접 볼 수 있습니다.
📦 1. 필수 준비 사항
먼저, index.html 파일이 있는 같은 폴더 안에 아래 6개의 이미지가 저장되어 있어야 합니다.
| 파일명 | 용도 |
|---|---|
| logo.png | 메인 화면 로고 / 타이틀 이미지 |
| level1.png | 결과 화면 캐릭터 (등급 1) |
| level2.png | 결과 화면 캐릭터 (등급 2) |
| level3.png | 결과 화면 캐릭터 (등급 3) |
| level4.png | 결과 화면 캐릭터 (등급 4) |
| level5.png | 결과 화면 캐릭터 (등급 5) |
만약 이미지가 없어도 앱은 정상적으로 작동하지만,
‘엑박(깨진 이미지 아이콘)’이 뜨기 때문에 디자인이 망가진 것처럼 보일 수 있습니다.
정식 배포 전에는 반드시 이미지가 준비되어 있어야 합니다.
🧩 2. index.html 파일에 이미지 연결하기
이전 글에서 제작한 index.html 파일은 기본 기능만 작동하는 상태였습니다.
이제 여기에 로고 이미지와 캐릭터 이미지를 삽입하여
UI를 완성하는 단계로 들어갑니다.
✔ 메인 화면에 로고 넣기
이 부분의 HTML 코드 블록을 찾아서 다음처럼 이미지를 넣어줍니다.
<div id="start-screen" class="screen active">
<img src="logo.png" alt="앱 로고" style="width:180px; margin-bottom:20px;" />
<h1>내로남불 판독기</h1>
<button id="start-btn">시작하기</button>
</div>
이 코드 한 줄만으로도 메인 화면의 완성도가 크게 올라갑니다.
이미지를 PNG로 저장했기 때문에 배경 투명도도 자연스럽게 유지됩니다.
✔ 결과 화면에 등급별 캐릭터 넣기
결과가 계산되면 점수에 따라 결과 레벨이 결정됩니다.
여기에서 자동으로 level1.png ~ level5.png 중 하나가 나타나도록 코드를 추가합니다.
결과 화면 HTML:
<div id="result-screen" class="screen">
<img id="result-image" src="" alt="결과 캐릭터"
style="width:200px; margin:20px auto; display:block;" />
<h2 id="result-title"></h2>
<p id="result-desc"></p>
<div style="width:100%; height:80px; background:#ddd; border-radius:8px;
margin:20px 0;">
<p style="text-align:center; padding-top:25px; color:#555;">
광고가 들어갈 자리
</p>
</div>
<button id="retry-btn">다시하기</button>
</div>
결과 이미지 선택 로직(JS):
function showResult(score) {
let level = 1;
if (score >= 81) level = 5;
else if (score >= 61) level = 4;
else if (score >= 41) level = 3;
else if (score >= 21) level = 2;
// 해당 레벨의 이미지 표시
document.getElementById("result-image").src = `level${level}.png`;
...
}
위와 같이 구현하면
점수 → 레벨 → 캐릭터 이미지 자동 연결 흐름이 완성됩니다.
🎉 3. 적용 후 실행해보기
이제 준비된 index.html 파일을 더블 클릭하면
사용자 흐름 그대로 메인 → 질문 → 결과까지 디자인이 들어간
완성형 프로토타입 앱을 직접 확인할 수 있습니다.
만약 이미지가 안 나온다면 폴더 구조를 다시 확인하세요.
📁 내로남불앱폴더 ├─ index.html ├─ logo.png ├─ level1.png ├─ level2.png ├─ level3.png ├─ level4.png └─ level5.png
🔜 다음 글 예고
다음 글에서는 광고 삽입(AdMob 구조)과
앱 배포를 위한 PWA(웹 앱)를 패키징하는 방법까지 이어갑니다.