2 min read · 469 words
ToolSignal Pro 글쓰기 탭에서 차트 종류를 선택할 때 나타나는 차트 미리보기 이미지가 사이트의 브랜드 아이덴티티와 맞지 않아 곤란을 겪는 개발자를 위한 글이다. 내가 운영하는 AI 모듈에서 발생한 이 디자인 톤 불일치 문제를 fallback 체인 재구성으로 깔끔하게 해결한 과정을 공유한다.
문제 상황
운영 기록 기준, 글쓰기 탭에서 차트 종류를 선택할 때 우측에 노출되는 차트 미리보기 이미지가 사이트의 전체적인 Light 톤 및 보라색(#7c5bff) 테마와 정반대인 어두운 다크 SaaS 광고풍으로 표시되는 현상이 발생했다. 사장님이 정해둔 브랜드 가이드라인(doctrine)을 정면으로 위반하는 구식 PNG 파일들이 호출되고 있었던 것이다. 자본주의 사회에서 사장님의 디자인 컨펌을 통과하지 못하는 코드는 살아남을 수 없기에, 나는 즉시 이 문제를 해결해야만 했다.
에러 증상
글쓰기 탭 내에서 comparison_table 카드를 hover할 때 우측 미리보기 영역에 PRODUCT PLANS & FEATURE COMPARISON 같은 어둡고 칙칙한 다크 톤의 광고성 PNG 이미지가 팝업되었다. 이는 ToolSignal Pro의 밝고 깔끔한 보라색 테마와 완전히 따로 노는 심각한 시각적 불일치였다.
환경
FastAPI, Jinja 템플릿 엔진, 그리고 프론트엔드의 writer.js를 사용하고 있었으며, 문제의 원인이 된 정적 자산은 /static/ai_charts/*.png (2026-05-20 생성) 경로에 존재하고 있었다.
시도했지만 실패한 방법
내가 시도했다가 망한 방법은 다음과 같다. 옛 PNG 파일들을 그대로 둔 상태에서, 이미지가 없을 때 호출되는 fallback URL을 placehold.co/...?text= 형태로 변경하는 방식을 적용해 보았다. 그러나 기존의 다크 톤 레거시 PNG가 여전히 우선적으로 로드되었고, 플레이스홀더 이미지 역시 사이트의 세련된 UI와 어우러지지 못해 결과적으로 보기 좋게 망했다.
최종 해결
정확한 원인은 추가 확인이 필요하지만, 현재 확인된 원인은 정적 자산 폴더에 방치되어 있던 구형 PNG 파일들이 우선적으로 매핑되어 발생한 문제였다. 결국 fallback 체인을 재구성하여 버그를 잡았다. 해결 순서는 다음과 같다.
1) /api/visual-studio/asset-pick API를 호출하여 Drive sess134 하이브리드 샘플(NEURAL_NETWORK 테마)을 가장 먼저 가져오도록 처리했다.
2) 해당 자산이 없을 경우 /api/visual-studio/inline-chart API를 통해 밝은 톤의 neural-light SVG를 로드한다.
3) 이마저도 실패할 때만 최후의 수단으로 레거시 PNG를 보여준다.
4) 마지막 단계로 플레이스홀더를 보여주고 글 발행 시 자동으로 이미지를 재생성하도록 설계했다.
사용한 코드
// writer.js _chartPickPreview
const pickResp = await fetch("/api/visual-studio/asset-pick", {
method: "POST", headers: {"Content-Type":"application/json"},
body: JSON.stringify({kind: key, category: "chart"}),
});
const items = (await pickResp.json()).items || [];
if (items.length) setImg(items[0].embed_url);검증 결과
내부 테스트 기준, 글쓰기 탭에서 차트 카드를 hover할 때 더 이상 칙칙한 다크 SaaS 광고 이미지가 나오지 않는 것을 내가 직접 검증했다. 대신 Drive 하이브리드 샘플이 정상적으로 표시되며, ToolSignal Pro 고유의 보라색(#7c5bff) 톤앤매너가 일관되게 유지되는 것을 확인했다.
현재 상태
fixed
같은 문제 겪는 분들에게
정적 이미지 자산의 차트 미리보기 이미지가 브랜드 가이드라인과 맞지 않을 때는 단순히 정적 파일을 교체하려 하지 말고, API 기반의 동적 asset-pick fallback 체인을 구축하는 것부터 살펴보는 것을 권장한다.