수월한 IT

NTSC에서 개발된 계산식을 사용한 바탕색 대비 가독성 있는 폰트색 만들기 본문

BOOKS/수월한 자바스크립트

NTSC에서 개발된 계산식을 사용한 바탕색 대비 가독성 있는 폰트색 만들기

IT여행자 2025. 3. 23. 20:29
728x90

안녕하세요 IT 이곳저곳을 여행하고 있는 IT여행자입니다.

 

이번 여행지는 제목과 같이 NTSC(Nation Television System Committee)에서 만든 비디오 신호의 밝기를 계산하여 바탕색 대비 가독성 있는 문자색을 지정하는 여행을 해 보려 합니다. 물론 각 프로젝트별로 지정된 디자인 패턴이 있어 색상을 임의로 지정하지는 않겠지만, 본 예시는 바탕색이 랜덤 하게 바뀔 수 있다는 가정하에 출발합니다.

구현된 실제 문자색을 보면 검은색 아니면 흰색의 문자색으로 표현되지만 이는 바탕색의 밝기를 계산하여 자동으로 설정되어 어떤 바탕색이 되든지 최상의 가독성 있는 문자색이 만들어집니다.

가중치 계산식은 아래와 같습니다.

NTSC 가중치 계산식  ( (red*299) + (green*587) + (blue*114) )/1000

 

[프로그램 실행 결과]

 

바탕색이 밝으면 문자색은 검은색으로, 바탕색이 어두운 색이면 문자색은 흰색으로 계산되어 표시됩니다. 페이지를 새로고침할 때마다 바탕색과 문자색이 바뀌므로 여러분들이 보고 계시는 화면과 다를 수 있습니다.

 

 

 

[준비물]

VSC(Visual Studio Code) + Live Server Extension

 

여행을 떠날 준비가 되었다면 시작해 보겠습니다.

 

html, css

그림과 같이 여러 개의 바탕색을 갖는 버튼을 만들고 css는 민망하지 않을 수준까지만 작성되었습니다. 또한 css와 javascript 코드는 파일을 따로 분리하지 않고 하나의 html 파일에 담아 두었습니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가독성있는 폰트컬러</title>
    <style>
       <!-- 스타일 작성 부분 -->
    </style>
</head>
<body>
    <div id="main">
        <h2>가독성있는 폰트컬러</h2>
        <div id="btnZone">
            <button type="button" class="btnType">1</button>
            <button type="button" class="btnType">2</button>
            <button type="button" class="btnType">3</button>
            <button type="button" class="btnType">4</button>
            <button type="button" class="btnType">5</button>
            <button type="button" class="btnType">6</button>
            <button type="button" class="btnType">7</button>
            <button type="button" class="btnType">8</button>
            <button type="button" class="btnType">9</button>
            <button type="button" class="btnType">10</button>
        </div>
    </div>
    <script>
     /* 스크립트 작성 부분 */
    </script>
</body>
</html>

 

아래의 코드는 버튼들의 모양을 지정한 css 부분입니다. <!-- 스타일 작성 --> 부분에 넣어 주시면 되겠습니다.

 

#btnZone>button{
    width:120px;
    height:80px;
    font-size:50px;
    margin:3px;
}

 

javascript

영상 내에서는 부분코드들이나 진행 코드들이 존재하지만 본 지면에서는 최종 코드만을 설명하도록 하겠습니다. 중간 과정의 내용이 궁금하시다면 영상을 참조해 주시기 바랍니다. 버튼의 바탕색과 문자색은 페이지를 새로 고침 할 때마다 바뀝니다.

 

let btnType = document.querySelectorAll(".btnType"); //(1)
let bgColors=[] //버튼 바탕색 저장 배열
 
for(i=0 ; i<btnType.length ; i++){ //(2)
    let r = parseInt(Math.random()*256); // 0~255
    let g = parseInt(Math.random()*256); // 0~255
    let b = parseInt(Math.random()*256); // 0~255
    bgColors[i] = `rgb(${r}, ${g}, ${b})`; //(3)
}
 
// 랜덤하게 버튼의 바탕색 지정
btnType.forEach((btn, index)=>{ //(4)
    btn.style.backgroundColor = bgColors[index]; //(5)
    btn.style.color= getChangeFontColor(bgColors[index]); //(6)
})
// 넘겨받은 버튼의 바탕색을 기준으로 폰트색을 조정
function getChangeFontColor(color){ 
    let r, g,b;
    let match=color.match(/\d+/g); //(7)
    r = match[0];
    g = match[1];
    b = match[2];
    // 바탕색의 밝기를 기준으로 색의 민감도 계산
    let brightness = ( (r*299) + (g*587) + (b*114) ) /1000; //(8)
    return brightness>128 ? "black" : "white"; //(9)
}

 

(1) ".btnType" 클래스명으로 10개의 버튼을 모두 가져와 btnType객체에 담아 둡니다.

(2) 버튼의 개수만큼 루프를 돌면서 rgb 색상을 각각 랜덤 하게 발생시킵니다.

(3) "rgb(r,g,b)"와 같은 문자열을 만들기 위해 백틱(`)을 사용하여 문자열을 만들어 배열에 저장하였습니다.

(4) 10개의 버튼을 forEach() 문을 사용하여 반복처리 하였고, btn은 버튼객체, index는 버튼의 위치값이라 보시면 됩니다.

(5) 랜덤 하게 발생시켜 저장한 배열의 index값을 가져와 버튼의 바탕색으로 지정하였습니다.

(6) 버튼의 바탕색을 인수값으로 하여 getChangeFontColor() 함수를 부르면 NTSC 가중치 계산식에 따른 문자색을 전달받아 해당 버튼의 문자색을 지정합니다.

(7) 매개변수로 들어온 color값은 "rgb(100,120,150)"와 같이 전달될 것입니다. 이를 정규식을 사용하여 숫자들만 선택하여 match 배열을 만들면 match=[100,120,150]와 같이 만들어집니다.

(8) r,g,b 색을 사용하여 NTSC 가중치 계산식으로 계산하여 변수 brightness에 저장합니다.

(9) 계산된 brightness값이 128보다 크다는 의미는 바탕색이 밝은 색임을 나타냅니다. 따라서 문자색은 128을 기준으로 검정 또는 흰색이 리턴되어 버튼의 문자색이 됩니다.

 

이것으로 이번 여행지를 마무리 짓고 저는 또 다른 여행지에서 찾아 뵙겠습니다. 감사합니다.

 

관련 영상 : https://youtu.be/tF4wd4N8ANA

관련 코드 : https://github.com/hiparkwg/readability_font_color.git

 

 

'BOOKS > 수월한 자바스크립트' 카테고리의 다른 글

<dialog/>태그의 다양한 활용과 SPA구현  (0) 2025.04.01
<template/>를 사용한 동적 페이지 만들기  (0) 2025.03.22
localStorage VS indexedDB를 사용한 현재 상태값 실시간 저장하기  (0) 2025.03.22
chart.js를 사용한 데이터 시각화하기 #3/3  (4) 2024.12.27
chart.js를 사용한 데이터 시각화하기 #2/3  (0) 2024.12.27
'BOOKS/수월한 자바스크립트' Related Articles more