급여 명세서를 PDF로 생성하는 시스템을 만들 때, 회사 브랜드 컬러를 적용해야 하는 경우가 많다. 디자이너가 준 색상 코드를 PDF 라이브러리에 맞게 변환하는 과정에서 색상 변환기가 유용했다.
HEX vs RGB vs CMYK
웹 디자인에서는 HEX(#FF5733)나 RGB를 주로 쓰지만, PDF 생성 라이브러리에 따라 RGB 배열이나 CMYK가 필요할 수 있다. 인쇄용 PDF라면 CMYK가 더 정확하다.
// HEX to RGB function hexToRgb(hex) { const result = /^#?([a-fd]{2})([a-fd]{2})([a-fd]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null; }
legogo.kr/color-converter에서 다양한 색상 포맷 변환을 해볼 수 있다.
급여 명세서 레이아웃
급여 명세서 PDF는 보통 이런 섹션으로 구성된다.
- 회사 로고와 명세서 제목
- 지급 대상자 정보 (이름, 사번, 부서)
- 지급 항목 (기본급, 수당, 상여금)
- 공제 항목 (4대보험, 소득세)
- 실수령액
각 섹션에 브랜드 컬러를 적용해서 일관된 느낌을 준다.
PDF 생성 라이브러리
Node.js에서는 PDFKit, jsPDF, puppeteer 등을 사용한다. PDFKit은 저수준 제어가 가능하고, puppeteer는 HTML을 PDF로 변환하는 방식이다. 복잡한 레이아웃이면 HTML → PDF가 편하다.
const doc = new PDFDocument(); doc.fillColor("#1a73e8").fontSize(20).text("급여 명세서");
다크 모드 대응
요즘은 급여 명세서를 앱으로 조회하는 경우도 많다. 다크 모드에서도 잘 보이려면 배경색과 텍스트 색상을 동적으로 조절해야 한다. 색상 변환 도구로 명도를 조절한 색상을 준비해두면 편하다.
접근성 고려
색각 이상이 있는 사용자를 위해 색상 대비를 신경 써야 한다. WCAG 기준으로 4.5:1 이상의 대비율을 권장한다. 중요한 정보는 색상만으로 구분하지 말고 텍스트나 아이콘을 함께 사용한다.
이메일 발송
생성된 PDF는 이메일로 발송하는 경우가 많다. 암호화 PDF로 만들어서 개인정보를 보호한다. 비밀번호는 생년월일이나 사번 뒷자리 같은 본인만 아는 정보로 설정한다.
정리하면
급여 명세서 PDF 시스템은 디자인, 데이터, 보안이 모두 중요하다. 색상 작업이 필요할 때 온라인 색상 변환기를 활용하면 효율적이다.