208 lines
6.4 KiB
HTML
208 lines
6.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>LS 아이콘 생성기</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
padding: 20px;
|
||
|
|
background: #f0f0f0;
|
||
|
|
}
|
||
|
|
.preview {
|
||
|
|
background: white;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 10px;
|
||
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
|
|
margin: 20px;
|
||
|
|
}
|
||
|
|
canvas {
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
margin: 10px;
|
||
|
|
}
|
||
|
|
button {
|
||
|
|
background: #0033A0;
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
padding: 15px 30px;
|
||
|
|
font-size: 16px;
|
||
|
|
border-radius: 5px;
|
||
|
|
cursor: pointer;
|
||
|
|
margin: 5px;
|
||
|
|
}
|
||
|
|
button:hover {
|
||
|
|
background: #002080;
|
||
|
|
}
|
||
|
|
.sizes {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 20px;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.size-item {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
color: #0033A0;
|
||
|
|
}
|
||
|
|
.instructions {
|
||
|
|
background: white;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 10px;
|
||
|
|
max-width: 600px;
|
||
|
|
margin: 20px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>LS 타라유텍 앱 아이콘 생성기</h1>
|
||
|
|
|
||
|
|
<div class="preview">
|
||
|
|
<h2>미리보기</h2>
|
||
|
|
<div class="sizes" id="previews"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<button onclick="downloadAll()">모든 아이콘 다운로드</button>
|
||
|
|
<button onclick="generateZip()">ZIP으로 다운로드</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="instructions">
|
||
|
|
<h3>📋 사용 방법</h3>
|
||
|
|
<ol>
|
||
|
|
<li>"모든 아이콘 다운로드" 클릭</li>
|
||
|
|
<li>다운로드된 이미지들을 다음 폴더에 복사:
|
||
|
|
<ul>
|
||
|
|
<li>ic_launcher_48.png → android/app/src/main/res/mipmap-mdpi/ic_launcher.png</li>
|
||
|
|
<li>ic_launcher_72.png → android/app/src/main/res/mipmap-hdpi/ic_launcher.png</li>
|
||
|
|
<li>ic_launcher_96.png → android/app/src/main/res/mipmap-xhdpi/ic_launcher.png</li>
|
||
|
|
<li>ic_launcher_144.png → android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png</li>
|
||
|
|
<li>ic_launcher_192.png → android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>round 아이콘도 동일하게 복사</li>
|
||
|
|
<li>APK 재빌드</li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const sizes = [
|
||
|
|
{ name: 'mdpi', size: 48 },
|
||
|
|
{ name: 'hdpi', size: 72 },
|
||
|
|
{ name: 'xhdpi', size: 96 },
|
||
|
|
{ name: 'xxhdpi', size: 144 },
|
||
|
|
{ name: 'xxxhdpi', size: 192 }
|
||
|
|
];
|
||
|
|
|
||
|
|
function drawLSLogo(ctx, size) {
|
||
|
|
const scale = size / 200;
|
||
|
|
ctx.scale(scale, scale);
|
||
|
|
|
||
|
|
// 배경 (선택사항 - 투명하게 하려면 주석 처리)
|
||
|
|
// ctx.fillStyle = 'white';
|
||
|
|
// ctx.fillRect(0, 0, 200, 200);
|
||
|
|
|
||
|
|
// LS 로고 그리기
|
||
|
|
ctx.font = 'bold 120px Arial';
|
||
|
|
ctx.textAlign = 'center';
|
||
|
|
ctx.textBaseline = 'middle';
|
||
|
|
|
||
|
|
// L (파란색)
|
||
|
|
ctx.fillStyle = '#0033A0';
|
||
|
|
ctx.fillText('L', 70, 100);
|
||
|
|
|
||
|
|
// S (파란색)
|
||
|
|
ctx.fillStyle = '#0033A0';
|
||
|
|
ctx.fillText('S', 130, 100);
|
||
|
|
|
||
|
|
// 빨간 포인트 추가 (선택사항)
|
||
|
|
ctx.fillStyle = '#E31E24';
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(160, 60, 8, 0, Math.PI * 2);
|
||
|
|
ctx.fill();
|
||
|
|
}
|
||
|
|
|
||
|
|
function createIcon(size, round = false) {
|
||
|
|
const canvas = document.createElement('canvas');
|
||
|
|
canvas.width = size;
|
||
|
|
canvas.height = size;
|
||
|
|
const ctx = canvas.getContext('2d');
|
||
|
|
|
||
|
|
// 투명 배경
|
||
|
|
ctx.clearRect(0, 0, size, size);
|
||
|
|
|
||
|
|
if (round) {
|
||
|
|
// 둥근 마스크
|
||
|
|
ctx.save();
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(size/2, size/2, size/2, 0, Math.PI * 2);
|
||
|
|
ctx.clip();
|
||
|
|
}
|
||
|
|
|
||
|
|
drawLSLogo(ctx, size);
|
||
|
|
|
||
|
|
if (round) {
|
||
|
|
ctx.restore();
|
||
|
|
}
|
||
|
|
|
||
|
|
return canvas;
|
||
|
|
}
|
||
|
|
|
||
|
|
function displayPreviews() {
|
||
|
|
const container = document.getElementById('previews');
|
||
|
|
container.innerHTML = '';
|
||
|
|
|
||
|
|
sizes.forEach(({name, size}) => {
|
||
|
|
const div = document.createElement('div');
|
||
|
|
div.className = 'size-item';
|
||
|
|
|
||
|
|
const canvas = createIcon(size);
|
||
|
|
canvas.style.width = '96px';
|
||
|
|
canvas.style.height = '96px';
|
||
|
|
|
||
|
|
const label = document.createElement('div');
|
||
|
|
label.textContent = `${name} (${size}x${size})`;
|
||
|
|
|
||
|
|
div.appendChild(canvas);
|
||
|
|
div.appendChild(label);
|
||
|
|
container.appendChild(div);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function downloadCanvas(canvas, filename) {
|
||
|
|
const link = document.createElement('a');
|
||
|
|
link.download = filename;
|
||
|
|
link.href = canvas.toDataURL('image/png');
|
||
|
|
link.click();
|
||
|
|
}
|
||
|
|
|
||
|
|
function downloadAll() {
|
||
|
|
sizes.forEach(({name, size}) => {
|
||
|
|
// 일반 아이콘
|
||
|
|
const canvas = createIcon(size, false);
|
||
|
|
downloadCanvas(canvas, `ic_launcher_${size}.png`);
|
||
|
|
|
||
|
|
// 둥근 아이콘
|
||
|
|
setTimeout(() => {
|
||
|
|
const roundCanvas = createIcon(size, true);
|
||
|
|
downloadCanvas(roundCanvas, `ic_launcher_round_${size}.png`);
|
||
|
|
}, 100);
|
||
|
|
});
|
||
|
|
|
||
|
|
alert('모든 아이콘 다운로드를 시작했습니다!\n다운로드 폴더를 확인하세요.');
|
||
|
|
}
|
||
|
|
|
||
|
|
async function generateZip() {
|
||
|
|
alert('ZIP 다운로드 기능은 별도 라이브러리가 필요합니다.\n"모든 아이콘 다운로드"를 사용해주세요.');
|
||
|
|
}
|
||
|
|
|
||
|
|
// 페이지 로드 시 미리보기 생성
|
||
|
|
displayPreviews();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|