헤루Product Engineer (프로덕트 엔지니어)
3.1 (14)헤루
경력근거: 에이전시가 쌓아 온 브랜드 전략·디자인 데이터를 제품 기능으로 만들어요
어제 확인채용 공고 보기
공고의 핵심 업무 첫 줄이 '에이전시가 쌓아 온 브랜드 전략·디자인 데이터를 제품 기능으로 만들어요' 이고 바로 다음 줄이 'LLM·생성형 AI API를 붙여 브랜딩 서비스를 개발해요' 입니다. 헤루가 쌓아 온 데이터 가운데 제품 기능으로 옮기기 가장 쉬운 것이 브랜드 가이드라인인데, 연혁에는 '에듀윌 전체 브랜딩 가이드라인 재정립 컨설팅' 과 우리은행 같은 작업, 클래스101 의 '브랜드 일관성 기반 콘텐츠 및 상세페이지 비주얼 디자인' 이 적혀 있습니다. 생성형 AI 가 시안을 대신 만들어 주는 SaaS 에서 에이전시가 가진 고유한 자산은 그 시안이 브랜드답게 나왔는지 정하는 기준이고, 이 관리자 페이지는 그 기준을 숫자로 바꿔 시안마다 적용합니다. 자격요건의 'AI가 만든 코드의 오류와 품질을 직접 검토하고, 실제 서비스에 넣어도 되는지 판단할 수 있는 분' 은 AI 결과물을 내보내기 전에 규칙으로 거르는 이 화면의 구조와 같은 질문입니다. 이 포트폴리오는 색 공간 변환과 규칙 판정을 Next.js 관리자 페이지와 API 로 묶는 기술을 보여줍니다. 브랜드 전략이나 디자인 감각에 대한 전문성은 주장하지 않습니다.
핵심 업무에 '에이전시가 쌓아 온 브랜드 전략·디자인 데이터를 제품 기능으로 만들어요' 와 'LLM·생성형 AI API를 붙여 브랜딩 서비스를 개발해요' 가 나란히 있습니다. 브랜드 가이드라인을 숫자로 바꿔 생성형 AI 시안에 적용하는 판정이 그 두 줄을 한 기능으로 잇습니다.
연혁에 '전체 브랜딩 가이드라인 재정립 컨설팅' 이 두 번 나오고 클래스101 작업은 '브랜드 일관성 기반 콘텐츠 및 상세페이지 비주얼 디자인' 입니다. 가이드라인을 지켰는지 판단하는 기준이 이미 회사 안에 있습니다.
자격요건에 'AI가 만든 코드의 오류와 품질을 직접 검토하고, 실제 서비스에 넣어도 되는지 판단할 수 있는 분' 이, 우대사항에 'Railway, Cloudflare, AWS 중 하나 이상을 실서비스에 써 본 분' 이 있습니다. 2·3주차의 Railway·R2·Lambda 배포가 이 항목을 받습니다.
헤루가 만드는 AI 브랜딩 SaaS 에서 고객사 마케터가 생성형 AI 로 뽑은 프로모션 배너·상세페이지 시안을 내보내기 전에, 그 브랜드의 가이드라인(팔레트·지정 서체·로고 최소 크기와 여백)을 지켰는지 시안마다 다섯 판정 중 하나로 알려주는 관리자 페이지입니다. 시안은 레이어 단위로 읽고, 채움 색은 사람 눈에 보이는 차이에 맞춘 표준 색차 공식(CIEDE2000)으로 팔레트 색과 얼마나 다른지 재며, 로고는 폭과 둘레 여백을 브랜드별 규정과 견줍니다. 가이드라인 값은 헤루 디자이너가 브랜드마다 한 번 입력해 두고, 마케터와 디자이너가 같은 화면을 보며 내보낼 시안과 고칠 시안을 정합니다.
헤루 브랜딩 SaaS 로 프로모션 배너·상세페이지 시안을 AI 로 뽑는 고객사 마케터와, 그 브랜드 가이드라인을 만든 헤루 디자이너 — 같은 화면에서 내보낼 시안과 고칠 시안을 정한다
AI 시안이 가이드라인을 벗어나는 일은 대개 눈에 띄는 큰 실수가 아니라 비슷한 주황, 비슷한 고딕, 조금 작은 로고처럼 사람 눈으로는 넘어가기 쉬운 차이입니다. 디자이너가 만든 가이드라인은 PDF 와 피그마 페이지에 이미 있지만 시안을 받을 때마다 그 값과 한 장씩 맞춰 보는 사람이 없습니다. 팔레트 색과의 색차, 지정 서체 목록, 로고 폭과 여백을 브랜드별 숫자로 넣어 두면 시안이 나오는 즉시 어느 레이어가 어떤 규정을 어겼는지 정해지고, 디자이너는 판정이 걸린 시안만 열어 보면 됩니다.
마케터가 시안 레이어 JSON 을 올리면 시안마다 다섯 판정 중 하나와 문제 레이어, 가장 가까운 브랜드 색과 색차가 판정별 칸에 나오는 Next.js 관리자 페이지를 Vercel 에 배포합니다. 브랜드 가이드라인은 디자이너가 입력 화면에서 팔레트·서체·로고 규정을 넣어 둡니다. 시안은 SaaS 편집기가 내보낸 레이어 JSON 을 받는다고 두고, Figma 에서 읽어 오는 일은 2주차로 미룹니다.
가이드라인을 읽고 제가 판정을 단 합성 시안 60장과 화면 판정을 견주는 정답 대조 화면을 더하고(실제 도입에서는 헤루 디자이너가 이 판정을 답니다), Figma REST API 로 프레임의 레이어 좌표를 읽어 로고 여백을 직접 계산합니다. 판정 API 와 PostgreSQL 은 Railway 에 올리고, 시안 썸네일은 Cloudflare R2 에 둡니다.
마케터가 문구와 용도를 적으면 클로드가 브랜드 팔레트와 지정 서체를 프롬프트에 넣어 시안 레이어를 만들고, 같은 판정을 거친 뒤 화면에 올립니다. 가이드라인을 넣은 생성과 넣지 않은 생성의 판정 분포를 같은 브리프 20건으로 견주고, 생성 작업은 AWS Lambda 에서 돌립니다.
마케터가 하루앤원데이 추석 시안 묶음을 올리면 추석 배너_03 이 팔레트에 없는 색 칸에 배경 #E8742A, 가장 가까운 테라코타 #D9622B, 색차 6.5 와 함께 서고, 추석 상세_02 는 로고 여백 6px 와 규정 24px 로 로고 주변 여백 부족 칸에 섭니다. 디자이너는 내보내기 가능 칸의 배너_01·배너_05 는 건너뛰고, 걸린 다섯 장 가운데 판정 두 개가 겹친 배너_09 부터 엽니다.
2주차 정답 대조 탭은 합성 시안 60장에 제가 가이드라인을 읽고 단 판정과 화면 판정이 갈린 시안을 판정별로 모아 보여줍니다. 판정을 단 사람도 시안을 지은 사람도 저라서, 이 일치 수는 색차 계산과 우선순위가 문서대로 도는지까지만 말해 줍니다.
로고 폭과 여백이 규정값과 정확히 같은 시안, 색차 2.6 으로 허용치 3.0 바로 안쪽인 시안과 색차 2.3 으로 온결 허용치 2.0 을 막 넘은 시안, 채움 색이 없는 상품 사진 레이어, 여백을 잴 상대가 없는 로고만 있는 시안, 두 판정이 함께 걸린 시안을 고정 데이터로 두고 판정 함수를 고칠 때마다 결과가 그대로인지 테스트로 돌립니다.
진짜 성능 검증은 여기서 멈춥니다. 위 수치는 작성자가 만든 시안과 가이드라인으로 잰 자가채점이라, 헤루 고객사 마케터가 실제로 덜 고치게 되는지는 실제 시안과 디자이너의 판정 기록이 있어야 잴 수 있습니다. 그 기록이 오면 가장 먼저 볼 숫자는 이 화면이 내보내기 가능으로 낸 시안을 디자이너가 다시 고친 비율입니다.
시안 60장 일치 수는 제가 만든 시안에 제가 단 판정을 견준 값이라, 실제 고객사 시안에서 가이드라인 위반을 잘 잡는다는 근거가 아닙니다. 면접에서는 색차 계산과 판정 우선순위가 어떻게 도는지 화면으로 보이고, 실제 시안을 받으면 디자이너 판정과 어긋나는 시안부터 함께 보겠다고 말합니다.
색과 서체가 규정에서 멀리 벗어난 시안만 있으면 부등호를 거꾸로 써도 판정이 맞게 나옵니다. 규정값과 정확히 같은 로고(DR-HARU-B05), 허용치 바로 안쪽 색(2.6)과 좁은 허용치를 막 넘은 색(DR-ONG-B04, 2.3 대 2.0), 채움 색이 없는 사진 레이어(D02-L2), 여백을 잴 상대가 없는 로고(DR-ONG-B02), 두 판정이 겹친 시안(DR-HARU-B09)을 섞어 규정값 언저리에서 판정이 제대로 갈리는지 봅니다.
CIEDE2000 색차는 화면 sRGB 기준이라 인쇄 CMYK 시안이나 그라데이션·투명도가 들어간 레이어에서는 사람이 보는 차이와 어긋납니다. 1주차는 단색 채움만 판정하고, 그라데이션 레이어는 실제 도입에서 디자이너와 기준을 다시 정할 과제로 남깁니다.
브랜드마다 허용 색차를 몇으로 둘지는 디자이너의 판단이라 이 화면이 정하지 않습니다. 허용치를 너무 좁게 잡으면 사진 위 반투명 텍스트까지 걸려, 마케터가 판정을 믿지 않게 되는 쪽이 더 큰 위험입니다.
로고 여백을 1주차에는 입력 값으로 받습니다. 실제 시안에서는 레이어 좌표로 계산해야 하므로, 2주차 Figma 가져오기에서 계산값과 입력값이 어긋나는 시안을 따로 봅니다.
① 인라인 샘플 · ② seed.json 다운로드 · ③ 증강 프롬프트. 세 층 모두 동일한 schema 에서 파생.
고객사 마케터가 헤루 SaaS 에서 생성형 AI 로 뽑은 시안을 편집기가 레이어 단위로 내보낸 표입니다. 한 줄이 레이어 하나이고 시안 번호, 시안 이름, 브랜드, 레이어 종류, 채움 색, 서체, 폭, 로고 둘레 여백을 둡니다. 상품 사진 레이어와 브랜드가 준 로고 파일은 단색이 아니라 채움 색이 비어 있고, 배경 위에 로고만 놓인 시안은 여백을 잴 상대가 없어 clearspace_px 가 비어 있습니다.
| draft_id | draft_name | brand_id | layer_id | layer_type | fill_hex | font_family | width_px | clearspace_px |
|---|---|---|---|---|---|---|---|---|
| DR-HARU-B01 | 추석 배너_01 | BR-HARU | B01-L1 | 텍스트 | #3B2A20 | Pretendard | 420 | — |
| DR-HARU-B01 | 추석 배너_01 | BR-HARU | B01-L2 | 로고 | — | — | 120 | 40 |
| DR-HARU-B03 | 추석 배너_03 | BR-HARU | B03-L1 | 도형 | #E8742A | — | 1,080 | — |
| DR-HARU-B03 | 추석 배너_03 | BR-HARU | B03-L2 | 텍스트 | #3B2A20 | Gmarket Sans | 380 | — |
| DR-HARU-B07 | 추석 배너_07 | BR-HARU | B07-L1 | 텍스트 | #3B2A20 | Noto Sans KR | 460 | — |
아래 JSON Schema 를 그대로 만족하는 시안 레이어 표를 120줄 더 만들어 주세요. 브랜드 BR-HARU·BR-ONGYEOL·BR-MOAM·BR-PLANB·BR-NURI 다섯 곳의 시즌 프로모션 배너와 상세페이지 시안 40장 안팎을 만들고, 시안 한 장에 레이어 두세 개를 둡니다. 채움 색은 대문자 #RRGGBB 로 씁니다. 쉬운 데이터만 만들지 말고 다음을 섞으세요: 브랜드 팔레트 색과 아주 가깝지만 조금 밝거나 어두운 색, 허용치 바로 안쪽과 바로 바깥쪽 색, 지정 서체와 비슷한 다른 고딕 서체, 규정 최소 폭과 정확히 같은 로고와 몇 px 모자란 로고, 규정 여백과 같은 여백과 한 자릿수 여백, 채움 색이 null 인 상품 사진 레이어, 로고만 있어 clearspace_px 가 null 인 시안, 한 시안에 두 가지 위반이 겹친 경우. 판정 결과나 위반 여부를 적는 열은 넣지 마세요. 형식 깨뜨리기 시도로 fill_hex 를 'rgb(232,116,42)'·'E8742A' 처럼 다른 꼴로 적은 줄 5건을 따로 만들어 파서가 걸러내는지 보게 합니다.
{"type":"object","properties":{"draft_id":{"type":"string","description":"시안 한 장의 번호입니다. 한 시안의 레이어는 같은 draft_id 를 씁니다"},"draft_name":{"type":"string","description":"마케터가 붙인 시안 이름입니다"},"brand_id":{"type":"string"},"layer_id":{"type":"string"},"layer_type":{"type":"string","enum":["텍스트","로고","도형","이미지"]},"fill_hex":{"type":["string","null"],"pattern":"^#[0-9A-F]{6}$","description":"텍스트·도형의 채움 색입니다. 사진 이미지와 브랜드가 준 로고 파일은 단색이 아니라 null 입니다"},"font_family":{"type":["string","null"],"description":"텍스트 레이어의 서체 이름입니다. 텍스트가 아니면 null 입니다"},"width_px":{"type":"number","minimum":0,"description":"레이어 가로 폭(px)입니다"},"clearspace_px":{"type":["number","null"],"minimum":0,"description":"로고 레이어 외곽에서 가장 가까운 다른 레이어(배경 도형 제외)까지의 거리(px)입니다. 로고가 아니거나, 로고 말고 다른 요소가 없으면 null 입니다"}},"required":["draft_id","draft_name","brand_id","layer_id","layer_type","fill_hex","font_family","width_px","clearspace_px"]}{"type":"object","properties":{"draft_id":{"type":"string","description":"시안 한 장의 번호입니다. 한 시안의 레이어는 같은 draft_id 를 씁니다"},"draft_name":{"type":"string","description":"마케터가 붙인 시안 이름입니다"},"brand_id":{"type":"string"},"layer_id":{"type":"string"},"layer_type":{"type":"string","enum":["텍스트","로고","도형","이미지"]},"fill_hex":{"type":["string","null"],"pattern":"^#[0-9A-F]{6}$","description":"텍스트·도형의 채움 색입니다. 사진 이미지와 브랜드가 준 로고 파일은 단색이 아니라 null 입니다"},"font_family":{"type":["string","null"],"description":"텍스트 레이어의 서체 이름입니다. 텍스트가 아니면 null 입니다"},"width_px":{"type":"number","minimum":0,"description":"레이어 가로 폭(px)입니다"},"clearspace_px":{"type":["number","null"],"minimum":0,"description":"로고 레이어 외곽에서 가장 가까운 다른 레이어(배경 도형 제외)까지의 거리(px)입니다. 로고가 아니거나, 로고 말고 다른 요소가 없으면 null 입니다"}},"required":["draft_id","draft_name","brand_id","layer_id","layer_type","fill_hex","font_family","width_px","clearspace_px"]}헤루 디자이너가 브랜드 가이드라인에서 옮겨 적은 팔레트 표입니다. 브랜드마다 주색·보조색·배경색·텍스트색을 한 줄씩 두고 가이드라인에 적힌 색 이름을 함께 둡니다.
| brand_id | color_hex | role | color_name |
|---|---|---|---|
| BR-HARU | #D9622B | 주색 | 테라코타 |
| BR-HARU | #F4EBDD | 배경색 | 오트밀 크림 |
| BR-HARU | #3B2A20 | 텍스트색 | 로스트 브라운 |
| BR-HARU | #7A8B5C | 보조색 | 올리브 |
| BR-ONGYEOL | #1F3A5F | 주색 | 딥 네이비 |
아래 JSON Schema 를 그대로 만족하는 브랜드 팔레트를 30줄 더 만들어 주세요. brand_rules 에 있는 브랜드마다 주색 하나, 보조색 한두 개, 배경색 하나, 텍스트색 하나를 두고 색 이름은 디자이너가 가이드라인에 붙일 법한 한국어 이름으로 씁니다. 같은 브랜드 안의 두 색은 CIEDE2000 색차가 10 이상 나도록 서로 뚜렷하게 고르고, 판정 결과는 넣지 마세요.
{"type":"object","properties":{"brand_id":{"type":"string"},"color_hex":{"type":"string","pattern":"^#[0-9A-F]{6}$"},"role":{"type":"string","enum":["주색","보조색","배경색","텍스트색"]},"color_name":{"type":"string","description":"디자이너가 가이드라인에 적은 색 이름입니다"}},"required":["brand_id","color_hex","role","color_name"]}{"type":"object","properties":{"brand_id":{"type":"string"},"color_hex":{"type":"string","pattern":"^#[0-9A-F]{6}$"},"role":{"type":"string","enum":["주색","보조색","배경색","텍스트색"]},"color_name":{"type":"string","description":"디자이너가 가이드라인에 적은 색 이름입니다"}},"required":["brand_id","color_hex","role","color_name"]}헤루 디자이너가 브랜드마다 한 번 입력해 두는 가이드라인 규정표입니다. 지정 서체 목록, 디지털 시안에서 로고의 최소 폭과 둘레 여백, 팔레트 색과의 허용 색차를 둡니다. 이 화면은 이 값을 받아 쓰기만 하고 새로 정하지 않습니다.
| brand_id | brand_name | allowed_fonts | logo_min_width_px | logo_clearspace_px | max_delta_e |
|---|---|---|---|---|---|
| BR-HARU | 하루앤원데이 | ["Pretendard","Gmarket Sans"] | 80 | 24 | 3 |
| BR-ONGYEOL | 온결 | ["Noto Serif KR","Pretendard"] | 96 | 32 | 2 |
| BR-MOAM | 모암 티하우스 | ["Nanum Myeongjo"] | 72 | 20 | 3 |
| BR-PLANB | 플랜비 짐 | ["Gmarket Sans","Montserrat"] | 88 | 24 | 4 |
| BR-NURI | 누리 문구 | ["Jua","Pretendard"] | 64 | 16 | 3 |
아래 JSON Schema 를 그대로 만족하는 브랜드 가이드라인 규정을 20줄 더 만들어 주세요. 카페·병원·학원·뷰티·스포츠 같은 동네 브랜드부터 중견 기업 브랜드까지 섞고, 지정 서체는 한두 개, 로고 최소 폭은 56~120px, 둘레 여백은 16~40px, 허용 색차는 1.5~4.0 범위에서 고릅니다. 허용 색차가 2.0 처럼 엄격한 브랜드와 4.0 처럼 느슨한 브랜드를 섞고 판정 결과는 넣지 마세요.
{"type":"object","properties":{"brand_id":{"type":"string"},"brand_name":{"type":"string"},"allowed_fonts":{"type":"array","items":{"type":"string"},"minItems":1,"description":"가이드라인이 지정한 서체 이름 목록입니다"},"logo_min_width_px":{"type":"number","minimum":0,"description":"디지털 시안에서 로고가 가져야 할 최소 가로 폭(px)입니다"},"logo_clearspace_px":{"type":"number","minimum":0,"description":"로고 둘레에 비워 둬야 할 최소 여백(px)입니다"},"max_delta_e":{"type":"number","minimum":0,"description":"시안 색과 가장 가까운 팔레트 색 사이에 허용하는 CIEDE2000 색차입니다"}},"required":["brand_id","brand_name","allowed_fonts","logo_min_width_px","logo_clearspace_px","max_delta_e"]}{"type":"object","properties":{"brand_id":{"type":"string"},"brand_name":{"type":"string"},"allowed_fonts":{"type":"array","items":{"type":"string"},"minItems":1,"description":"가이드라인이 지정한 서체 이름 목록입니다"},"logo_min_width_px":{"type":"number","minimum":0,"description":"디지털 시안에서 로고가 가져야 할 최소 가로 폭(px)입니다"},"logo_clearspace_px":{"type":"number","minimum":0,"description":"로고 둘레에 비워 둬야 할 최소 여백(px)입니다"},"max_delta_e":{"type":"number","minimum":0,"description":"시안 색과 가장 가까운 팔레트 색 사이에 허용하는 CIEDE2000 색차입니다"}},"required":["brand_id","brand_name","allowed_fonts","logo_min_width_px","logo_clearspace_px","max_delta_e"]}| TypeScript | hex 를 CIELAB 으로 바꾸는 변환, CIEDE2000 색차, 레이어별 규칙 판정과 우선순위를 타입이 있는 순수 함수로 짜고 단위 테스트를 붙입니다. |
| Next.js | 시안 판정 보드와 가이드라인 입력 화면을 App Router 로 만들고, 시안 업로드와 판정을 Route Handler 로 받습니다. |
| React | 판정별 칸, 시안 카드, 레이어 상세 서랍을 컴포넌트로 나눠 같은 시안을 마케터와 디자이너가 같은 모양으로 봅니다. |
| Tailwind CSS | 판정별 색 배지와 팔레트 견본 칩을 브랜드 색 변수로 그려 가이드라인 색이 화면에서 그대로 보이게 합니다. |
| Framer Motion | 판정을 다시 돌렸을 때 시안 카드가 다른 칸으로 옮겨 가는 움직임을 넣어 무엇이 바뀌었는지 보이게 합니다. |
| Vercel | 1주차 관리자 페이지를 배포해 링크 하나로 마케터와 디자이너가 같은 화면을 엽니다. |
| Railway | 2주차에 판정 API 와 PostgreSQL(브랜드 가이드라인·시안·판정 이력)을 올립니다. |
| Cloudflare | 2주차에 시안 썸네일을 R2 에 올리고 판정 카드에서 바로 띄웁니다. |
| AWS | 3주차에 가이드라인을 넣은 시안 생성 작업을 Lambda 로 돌려 화면 요청과 분리합니다. |
| Figma | 2주차에 REST API 로 프레임의 노드 좌표와 서체·채움 색을 읽어 draft_layers 모양으로 바꾸고 로고 여백을 좌표로 계산합니다. |
| LLM API | 판정이 걸린 시안에 수정 메모를 쓰고, 3주차에는 가이드라인을 넣은 시안 레이어를 생성합니다. |
| Claude Code | 색 변환과 판정 함수를 만들 때 테스트를 먼저 쓰게 하고, 생성된 코드는 경계값 시안(DR-HARU-B05)으로 직접 돌려 확인합니다. |
✗ fail → 경계 시안이 걸리면 비교 부등호와 반올림 순서부터 고쳐 다시 돌립니다.
✓ pass → 2주차 정답 대조와 Figma 가져오기, Railway 배포로 넘어갑니다.
✗ fail → 허용치 근처에 몰리면 브랜드별 max_delta_e 를 디자이너와 다시 정하고 생성은 미룹니다.
✓ pass → 3주차 가이드라인을 넣은 생성과 판정 분포 비교로 넘어갑니다.
위 예측 UI 는 3주차까지 완주했을 때의 화면입니다. 1주차에 실제로 만드는 것은 아래 표시된 화면 하나입니다.
verdict사유 라벨 · draft_id + 한 줄 요약(근거 수치 포함)화면·코드·면접에서 이 단어를 그대로 씁니다. 키는 출력 스키마의 enum 과 같습니다.
가이드라인 안내보내기 가능팔레트에 없는 색팔레트 밖 색지정되지 않은 서체미지정 서체로고 주변 여백 부족로고 여백 부족로고가 최소 크기보다 작음로고 크기 미달시안마다 한 줄로 내는 가이드라인 판정입니다. 판정과 함께 문제 레이어, 팔레트와 가장 먼 색의 색차와 가장 가까운 브랜드 색, 같은 시안에서 함께 걸린 판정, 마케터용 수정 메모를 실어 판정 보드의 칸과 상세 서랍이 그대로 읽습니다.
{"type":"object","properties":{"draft_id":{"type":"string"},"brand_id":{"type":"string"},"draft_name":{"type":"string"},"verdict":{"type":"string","enum":["가이드라인 안","팔레트에 없는 색","지정되지 않은 서체","로고 주변 여백 부족","로고가 최소 크기보다 작음"],"description":"걸린 판정이 여럿이면 로고가 최소 크기보다 작음, 로고 주변 여백 부족, 팔레트에 없는 색, 지정되지 않은 서체 순으로 앞선 하나입니다"},"also_found":{"type":"array","items":{"type":"string","enum":["팔레트에 없는 색","지정되지 않은 서체","로고 주변 여백 부족","로고가 최소 크기보다 작음"]},"description":"verdict 말고도 같은 시안에서 걸린 판정입니다"},"flagged_layer_id":{"type":["string","null"],"description":"verdict 를 만든 레이어입니다. 가이드라인 안이면 null 입니다"},"nearest_palette_hex":{"type":["string","null"],"description":"시안에서 팔레트와 가장 먼 채움 색 레이어를 골라, 그 색과 가장 가까운 같은 brand_id 의 brand_palette.color_hex 입니다. 채움 색 레이어가 없으면 null 입니다"},"color_distance":{"type":["number","null"],"minimum":0,"description":"정적 계산값입니다. fill_hex 와 color_hex 를 sRGB(D65)에서 CIELAB 으로 바꿔 CIEDE2000 색차를 구하고, 레이어마다 가장 가까운 팔레트 색과의 값을 고른 뒤 그 가운데 가장 큰 값을 소수 첫째 자리로 반올림합니다"},"evidence":{"type":"array","items":{"type":"object","properties":{"table":{"type":"string","enum":["draft_layers","brand_palette","brand_rules"]},"field":{"type":"string"},"agg":{"type":["string","null"],"enum":["count","sum","avg","min","max",null]},"value":{}},"required":["table","field","value"]}},"summary":{"type":"string"},"fix_note":{"type":["string","null"],"description":"클로드가 판정 행을 받아 쓴 수정 메모입니다. 가이드라인 안이면 null 입니다"}},"required":["draft_id","brand_id","draft_name","verdict","also_found","flagged_layer_id","nearest_palette_hex","color_distance","evidence","summary","fix_note"]}[
{
"draft_id": "DR-HARU-B01",
"brand_id": "BR-HARU",
"draft_name": "추석 배너_01",
"verdict": "가이드라인 안",
"also_found": [],
"flagged_layer_id": null,
"nearest_palette_hex": "#3B2A20",
"color_distance": 0,
"evidence": [
{
"table": "draft_layers",
"field": "font_family",
"agg": null,
"value": "Pretendard"
},
{
"table": "draft_layers",
"field": "width_px",
"agg": null,
"value": 120
},
{
"table": "brand_rules",
"field": "logo_min_width_px",
"agg": null,
"value": 80
},
{
"table": "draft_layers",
"field": "clearspace_px",
"agg": null,
"value": 40
},
{
"table": "brand_rules",
"field": "logo_clearspace_px",
"agg": null,
"value": 24
}
],
"summary": "제목 서체가 지정 서체 Pretendard 이고, 로고는 폭 120px·여백 40px 로 규정 80px·24px 를 넘겨 내보내도 됩니다.",
"fix_note": null
},
{
"draft_id": "DR-HARU-B03",
"brand_id": "BR-HARU",
"draft_name": "추석 배너_03",
"verdict": "팔레트에 없는 색",
"also_found": [],
"flagged_layer_id": "B03-L1",
"nearest_palette_hex": "#D9622B",
"color_distance": 6.5,
"evidence": [
{
"table": "draft_layers",
"field": "fill_hex",
"agg": null,
"value": "#E8742A"
},
{
"table": "brand_palette",
"field": "color_hex",
"agg": null,
"value": "#D9622B"
},
{
"table": "brand_rules",
"field": "max_delta_e",
"agg": null,
"value": 3
}
],
"summary": "배경 도형 #E8742A 와 가장 가까운 브랜드 색은 테라코타 #D9622B 이고 색차가 6.5 라 허용치 3.0 을 넘었습니다.",
"fix_note": "배경을 테라코타 #D9622B 로 바꾸면 하루앤원데이 주색과 같아집니다. 생성 결과가 더 밝은 주황으로 나온 경우라 프롬프트에 색 코드를 직접 적어 다시 뽑는 편이 빠릅니다."
},
{
"draft_id": "DR-HARU-B07",
"brand_id": "BR-HARU",
"draft_name": "추석 배너_07",
"verdict": "지정되지 않은 서체",
"also_found": [],
"flagged_layer_id": "B07-L1",
"nearest_palette_hex": "#3B2A20",
"color_distance": 0,
"evidence": [
{
"table": "draft_layers",
"field": "font_family",
"agg": null,
"value": "Noto Sans KR"
},
{
"table": "brand_rules",
"field": "allowed_fonts",
"agg": null,
"value": [
"Pretendard",
"Gmarket Sans"
]
}
],
"summary": "제목이 Noto Sans KR 로 들어갔는데 하루앤원데이 지정 서체는 Pretendard 와 Gmarket Sans 입니다.",
"fix_note": "제목 레이어 서체를 Pretendard 로 바꾸세요. 글자 폭이 조금 넓어지니 줄바꿈 위치를 한 번 확인합니다."
},
{
"draft_id": "DR-HARU-D02",
"brand_id": "BR-HARU",
"draft_name": "추석 상세_02",
"verdict": "로고 주변 여백 부족",
"also_found": [],
"flagged_layer_id": "D02-L3",
"nearest_palette_hex": "#F4EBDD",
"color_distance": 0,
"evidence": [
{
"table": "draft_layers",
"field": "clearspace_px",
"agg": null,
"value": 6
},
{
"table": "brand_rules",
"field": "logo_clearspace_px",
"agg": null,
"value": 24
},
{
"table": "draft_layers",
"field": "fill_hex",
"agg": null,
"value": null
},
{
"table": "draft_layers",
"field": "layer_id",
"agg": null,
"value": "D02-L2"
}
],
"summary": "로고와 상품 사진 사이가 6px 라 규정 여백 24px 에 못 미칩니다. 상품 사진 D02-L2 는 채움 색이 없어 색 판정에서 뺐습니다.",
"fix_note": "로고를 위로 18px 이상 올리거나 상품 사진을 줄여 로고 둘레를 24px 비우세요."
},
{
"draft_id": "DR-HARU-B11",
"brand_id": "BR-HARU",
"draft_name": "추석 배너_11",
"verdict": "로고가 최소 크기보다 작음",
"also_found": [],
"flagged_layer_id": "B11-L1",
"nearest_palette_hex": "#F4EBDD",
"color_distance": 0,
"evidence": [
{
"table": "draft_layers",
"field": "width_px",
"agg": null,
"value": 58
},
{
"table": "brand_rules",
"field": "logo_min_width_px",
"agg": null,
"value": 80
}
],
"summary": "로고 폭이 58px 라 하루앤원데이 최소 폭 80px 보다 작습니다.",
"fix_note": "로고를 80px 이상으로 키우세요. 배너 높이가 낮아 로고가 눌렸다면 세로형 대신 가로형 로고 파일을 씁니다."
},
{
"draft_id": "DR-HARU-B05",
"brand_id": "BR-HARU",
"draft_name": "추석 배너_05",
"verdict": "가이드라인 안",
"also_found": [],
"flagged_layer_id": null,
"nearest_palette_hex": "#F4EBDD",
"color_distance": 2.6,
"evidence": [
{
"table": "draft_layers",
"field": "fill_hex",
"agg": null,
"value": "#EFE3D0"
},
{
"table": "brand_palette",
"field": "color_hex",
"agg": null,
"value": "#F4EBDD"
},
{
"table": "brand_rules",
"field": "max_delta_e",
"agg": null,
"value": 3
},
{
"table": "draft_layers",
"field": "width_px",
"agg": null,
"value": 80
},
{
"table": "draft_layers",
"field": "clearspace_px",
"agg": null,
"value": 24
}
],
"summary": "배경 #EFE3D0 은 오트밀 크림과 색차 2.6 으로 허용치 안이고, 로고 폭 80px·여백 24px 는 규정값과 같아 미달이 아닙니다.",
"fix_note": null
},
{
"draft_id": "DR-ONG-B02",
"brand_id": "BR-ONGYEOL",
"draft_name": "가을 신제품 배너_02",
"verdict": "가이드라인 안",
"also_found": [],
"flagged_layer_id": null,
"nearest_palette_hex": "#F7F5F0",
"color_distance": 0,
"evidence": [
{
"table": "draft_layers",
"field": "clearspace_px",
"agg": null,
"value": null
},
{
"table": "draft_layers",
"field": "width_px",
"agg": null,
"value": 120
},
{
"table": "brand_rules",
"field": "logo_min_width_px",
"agg": null,
"value": 96
}
],
"summary": "배경 위에 로고만 있는 시안이라 여백을 잴 상대 레이어가 없어 여백 판정을 하지 않았고, 로고 폭 120px 는 최소 96px 를 넘습니다.",
"fix_note": null
},
{
"draft_id": "DR-HARU-B09",
"brand_id": "BR-HARU",
"draft_name": "추석 배너_09",
"verdict": "로고가 최소 크기보다 작음",
"also_found": [
"팔레트에 없는 색"
],
"flagged_layer_id": "B09-L2",
"nearest_palette_hex": "#D9622B",
"color_distance": 15.5,
"evidence": [
{
"table": "draft_layers",
"field": "width_px",
"agg": null,
"value": 64
},
{
"table": "brand_rules",
"field": "logo_min_width_px",
"agg": null,
"value": 80
},
{
"table": "draft_layers",
"field": "fill_hex",
"agg": null,
"value": "#C94F4F"
},
{
"table": "brand_palette",
"field": "color_hex",
"agg": null,
"value": "#D9622B"
}
],
"summary": "로고 폭 64px 가 최소 80px 에 못 미쳐 이 판정이 앞서고, 배경 #C94F4F 도 테라코타와 색차 15.5 로 팔레트 밖입니다.",
"fix_note": "로고를 80px 이상으로 키우고 배경은 테라코타 #D9622B 나 오트밀 크림 #F4EBDD 중 하나로 바꾸세요. 두 가지를 같이 고쳐야 내보낼 수 있습니다."
},
{
"draft_id": "DR-ONG-B01",
"brand_id": "BR-ONGYEOL",
"draft_name": "가을 신제품 배너_01",
"verdict": "가이드라인 안",
"also_found": [],
"flagged_layer_id": null,
"nearest_palette_hex": "#1F3A5F",
"color_distance": 0,
"evidence": [
{
"table": "draft_layers",
"field": "font_family",
"agg": null,
"value": "Noto Serif KR"
},
{
"table": "brand_rules",
"field": "allowed_fonts",
"agg": null,
"value": [
"Noto Serif KR",
"Pretendard"
]
},
{
"table": "draft_layers",
"field": "width_px",
"agg": null,
"value": 140
},
{
"table": "draft_layers",
"field": "clearspace_px",
"agg": null,
"value": 48
},
{
"table": "brand_rules",
"field": "logo_clearspace_px",
"agg": null,
"value": 32
}
],
"summary": "온결 지정 서체인 Noto Serif KR 로 제목을 썼고 글자색은 딥 네이비 그대로이며, 로고 폭 140px·여백 48px 가 규정 96px·32px 를 넘습니다.",
"fix_note": null
},
{
"draft_id": "DR-ONG-B04",
"brand_id": "BR-ONGYEOL",
"draft_name": "가을 신제품 배너_04",
"verdict": "팔레트에 없는 색",
"also_found": [],
"flagged_layer_id": "O04-L1",
"nearest_palette_hex": "#1F3A5F",
"color_distance": 2.3,
"evidence": [
{
"table": "draft_layers",
"field": "fill_hex",
"agg": null,
"value": "#22406A"
},
{
"table": "brand_palette",
"field": "color_hex",
"agg": null,
"value": "#1F3A5F"
},
{
"table": "brand_rules",
"field": "max_delta_e",
"agg": null,
"value": 2
}
],
"summary": "배경 도형 #22406A 와 가장 가까운 브랜드 색은 딥 네이비 #1F3A5F 이고 색차 2.3 이 온결 허용치 2.0 을 넘었습니다.",
"fix_note": "배경을 딥 네이비 #1F3A5F 로 바꾸세요. 눈으로는 거의 같은 남색이지만 온결은 허용 색차를 2.0 으로 좁게 잡은 브랜드라 이 정도 차이도 걸립니다."
}
][자동 검증 · 코드가 판정합니다] 1. verdict 가 가이드라인 안·팔레트에 없는 색·지정되지 않은 서체·로고 주변 여백 부족·로고가 최소 크기보다 작음 다섯 값 중 하나인지 확인합니다. 2. 필수 필드 draft_id·brand_id·draft_name·verdict·also_found·flagged_layer_id·nearest_palette_hex·color_distance·evidence·summary·fix_note 가 모두 존재하는지 확인합니다. 3. color_distance 를 다시 계산합니다. 같은 draft_id 에서 fill_hex 가 있는 레이어마다 같은 brand_id 의 brand_palette.color_hex 전부와 CIEDE2000 색차를 구해 가장 작은 값을 고르고, 그 가운데 가장 큰 값을 소수 첫째 자리로 반올림한 수와 같은지 봅니다. DR-HARU-B03 은 #E8742A 와 #D9622B 의 색차 6.5 입니다. 4. 텍스트·도형 레이어의 가장 가까운 팔레트 색과의 색차가 brand_rules.max_delta_e 보다 크면 그 시안에 팔레트에 없는 색이 걸립니다. 견줄 때는 반올림 전 색차를 쓰고, 같은 값은 넘지 않은 것으로 둡니다. DR-ONG-B04 는 #22406A 와 #1F3A5F 의 색차 2.3 이 온결 허용치 2.0 을 넘어 걸리고, DR-HARU-B05 의 2.6 은 하루앤원데이 허용치 3.0 안이라 걸리지 않습니다. 5. layer_type 이 텍스트이고 font_family 가 같은 brand_id 의 brand_rules.allowed_fonts 에 없으면 지정되지 않은 서체가 걸립니다. 6. layer_type 이 로고이고 clearspace_px 가 brand_rules.logo_clearspace_px 보다 작으면 로고 주변 여백 부족이 걸립니다. clearspace_px 가 null 이면 여백 판정을 하지 않습니다. 7. layer_type 이 로고이고 width_px 가 brand_rules.logo_min_width_px 보다 작으면 로고가 최소 크기보다 작음이 걸립니다. DR-HARU-B05 의 80px 는 규정 80px 와 같아 걸리지 않습니다. 8. 한 시안에 판정이 여럿 걸리면 verdict 는 로고가 최소 크기보다 작음, 로고 주변 여백 부족, 팔레트에 없는 색, 지정되지 않은 서체 순으로 앞선 하나이고 나머지는 also_found 에 들어가는지 봅니다. 아무것도 걸리지 않으면 verdict 는 가이드라인 안이고 also_found 는 빈 배열입니다. 9. color_distance 가 채워졌으면 0 이상인지 범위를 봅니다. 10. evidence 의 table·field 가 draft_layers·brand_palette·brand_rules 에 실재하는 컬럼인지 대조합니다. 11. agg 가 없는 evidence 의 value 가 그 컬럼에 수록된 행의 값 원문과 같은지 확인합니다. 12. summary 와 fix_note 가 존댓말로 끝나는지 확인합니다. [수동 검증 · 사람이 봅니다] 1. 색차 허용치 안이라 가이드라인 안으로 나온 시안이 실제로 브랜드 색처럼 보이는지는 헤루 디자이너가 모니터에서 확인합니다. 2. fix_note 가 시안의 판정 사유와 다른 것을 고치라고 하지 않는지 마케터가 읽고 확인합니다. [평가 러너 · 2주차] 1. 가이드라인을 읽고 판정을 손으로 단 합성 시안 60장에서 화면 판정과 사람 판정이 시안마다 일치하는 수를 셉니다. 실제 도입에서는 헤루 디자이너가 이 판정을 답니다. 2. Figma 파일에서 읽은 레이어 좌표로 다시 잰 clearspace_px 로 같은 판정이 나오는지 시안마다 대조합니다.