이전 글에서는 슬라이더를 조작하여 배경색을 변경하는 웹 페이지를 만드는 방법을 다뤘습니다. 이번에는 그 페이지에 랜덤 색상 생성 기능을 추가해 보겠습니다.
웹 디자인 중 색상에 대한 영감이 떠오르지 않을 때, 미리 정해진 색상 팔레트 대신 무작위로 색을 생성하고 바로 결과를 확인할 수 있는 기능이 있다면 매우 유용합니다.
먼저 기존 코드를 살펴보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>컬러 팔레트</title>
<style>
#colorBox {
width: 200px;
height: 200px;
margin: 20px;
}
body {
background-color: #eee;
}
</style>
</head>
<body>
<h2>컬러 팔레트</h2>
<p>현재 색상: RGB(<span id="redVal">0</span>, <span id="greenVal">0</span>, <span id="blueVal">0</span>)</p>
<label for="redSlider">빨강:</label>
<input type="range" id="redSlider" min="0" max="255" value="0" oninput="refreshColor()">
<label for="greenSlider">초록:</label>
<input type="range" id="greenSlider" min="0" max="255" value="0" oninput="refreshColor()">
<label for="blueSlider">파랑:</label>
<input type="range" id="blueSlider" min="0" max="255" value="0" oninput="refreshColor()">
<div id="colorBox" style="background-color: rgb(0, 0, 0);"></div>
<script>
function refreshColor() {
let r = document.getElementById('redSlider').value;
let g = document.getElementById('greenSlider').value;
let b = document.getElementById('blueSlider').value;
document.getElementById('redVal').textContent = r;
document.getElementById('greenVal').textContent = g;
document.getElementById('blueVal').textContent = b;
let color = 'rgb(' + r + ',' + g + ',' + b + ')';
document.getElementById('colorBox').style.backgroundColor = color;
}
refreshColor();
</script>
</body>
</html>
이 코드는 슬라이더를 통해 직접 색상을 조합하지만, 무작위 색상이 필요한 경우에는 적합하지 않습니다. 이러한 한계를 개선하기 위해 랜덤 색상 생성 버튼을 추가하겠습니다.
아래는 확장된 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>컬러 팔레트 with 랜덤</title>
<style>
#colorBox {
width: 300px;
height: 300px;
margin: 20px;
border: 2px dashed #000;
}
body {
background-color: #eee;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h2>컬러 팔레트</h2>
<p>현재 색상: RGB(<span id="redVal">0</span>, <span id="greenVal">0</span>, <span id="blueVal">0</span>)</p>
<label for="redSlider">빨강:</label>
<input type="range" id="redSlider" min="0" max="255" value="0" oninput="refreshColor()">
<label for="greenSlider">초록:</label>
<input type="range" id="greenSlider" min="0" max="255" value="0" oninput="refreshColor()">
<label for="blueSlider">파랑:</label>
<input type="range" id="blueSlider" min="0" max="255" value="0" oninput="refreshColor()">
<button onclick="pickRandomColor()">랜덤 색상 생성</button>
<div id="colorBox" style="background-color: rgb(0, 0, 0);"></div>
<script>
function refreshColor() {
let r = document.getElementById('redSlider').value;
let g = document.getElementById('greenSlider').value;
let b = document.getElementById('blueSlider').value;
document.getElementById('redVal').textContent = r;
document.getElementById('greenVal').textContent = g;
document.getElementById('blueVal').textContent = b;
let color = 'rgb(' + r + ',' + g + ',' + b + ')';
document.getElementById('colorBox').style.backgroundColor = color;
adjustBorder(color);
}
function adjustBorder(color) {
let rgb = color.match(/\d+/g).map(Number);
let brightness = (rgb[0] + rgb[1] + rgb[2]) / 3;
let borderColor = brightness > 128 ? '#000' : '#fff';
document.getElementById('colorBox').style.borderColor = borderColor;
}
function pickRandomColor() {
let r = Math.floor(Math.random() * 256);
let g = Math.floor(Math.random() * 256);
let b = Math.floor(Math.random() * 256);
document.getElementById('redSlider').value = r;
document.getElementById('greenSlider').value = g;
document.getElementById('blueSlider').value = b;
refreshColor();
}
</script>
</body>
</html>
이제 '랜덤 색상 생성' 버튼을 클릭할 때마다 무작위 RGB 값이 슬라이더와 색상 표시 영역에 반영됩니다. pickRandomColor 함수는 0~255 사이의 난수를 생성하여 각 슬라이더에 할당하고, refreshColor를 호출해 화면을 갱신합니다. 또한 adjustBorder 함수가 배경색의 밝기에 따라 테두리 색상을 자동으로 변경하여 가독성을 높였습니다.