두 가지 주어진 색상 사이에서 무작위 색상을 생성하는 함수를 작성해야 합니다. 이 문제는 단계별로 나누어 접근하면 훨씬 쉽게 해결할 수 있습니다.
문제 해결 접근 방식
- 첫 번째 단계 → 두 숫자 사이에서 무작위 숫자를 생성하는 함수를 작성합니다.
- 두 번째 단계 → 무작위 색상을 생성할 때 16진수 체계를 그대로 사용하지 않고, 각 자리의 16진수 값을 0~15 범위의 10진수 값으로 변환하여 활용합니다.
- 마지막 단계 → 주어진 색상 문자열을 한 글자씩 반복하면서 각 자리마다 무작위 값을 뽑아 새로운 색상 코드를 만듭니다.
구현 예제
const randomBetween = (a, b) => {
const max = Math.max(a, b);
const min = Math.min(a, b);
return Math.floor(Math.random() * (max - min) + min);
};
const randomColor = (firstColor, secondColor) => {
first = firstColor.toUpperCase().substring(1, secondColor.length);
second = secondColor.toUpperCase().substring(1, firstColor.length);
const scale = '0123456789ABCDEF';
let color = '#';
for(let i = 0; i < first.length && i < second.length; i++ ){
const random = randomBetween(scale.indexOf(first[i]),
scale.indexOf(second[i]));
color += scale[random];
};
return color;
};
console.log(randomColor('#34324a', '#42342c'));
console.log(randomColor('#f43250', '#12342c'));
console.log(randomColor('#34324a', '#47942c'));
console.log(randomColor('#ffffff', '#000000'));실행 결과
콘솔에서 확인할 수 있는 출력 결과는 다음과 같습니다.
#33332A
#C23328
#36822B
#35102A
참고 — 이 함수는 매번 실행할 때마다 무작위 결과를 반환하기 때문에 위 출력은 가능한 여러 결과 중 하나일 뿐입니다. 실행할 때마다 다른 색상 코드가 나오는 것이 정상입니다.
동작 원리 정리
randomBetween 함수는 Math.random()과 Math.floor()를 조합해 최솟값과 최댓값 사이의 정수를 반환합니다. randomColor 함수는 입력받은 두 색상 코드에서 # 기호를 제거한 뒤 대문자로 통일하고, 16진수 문자 집합(0123456789ABCDEF)에서 각 자리에 해당하는 인덱스를 찾아 그 사이의 무작위 값을 선택합니다. 이렇게 선택된 문자들을 이어 붙여 새로운 HEX 색상 코드를 완성합니다.