[개발일지] 크리에이티브 툴 로딩 플래시 수정 · 카드뽑기 디자인 리뉴얼 · 저장 브랜딩 수정

크리에이티브 툴 페이지 진입 시 본문이 잠깐 비어 보이던 문제를 수정하고,
카드뽑기 화면·버튼·저장 이미지 브랜딩을 크리에이티브 톤으로 정비한 날입니다.

크리에이티브 툴 페이지 로딩 플래시

크리에이티브 섹션 툴 페이지에 진입하면 본문이 잠깐 비어 보이다가
갑자기 내용이 나타나는 현상이 있었습니다.

원인이 세 가지가 겹쳐있었습니다.

첫 번째는 iframe 비동기 로딩입니다.
툴 페이지는 /tools/xxx.html 을 iframe 으로 불러오는 구조인데,
페이지 HTML 이 먼저 그려지고 iframe 내부의 파일은 그 뒤에 네트워크를 타고 들어옵니다.
이 사이에 iframe 영역이 흰 배경으로 노출되는 것이 문제였습니다.

두 번째는 iframe 배경색 미지정이었습니다.
iframe 에 background 스타일이 없어서 브라우저 기본값인 흰색이 보였고,
다크 테마 페이지에서 특히 눈에 띄었습니다.

세 번째는 높이 상태값 교체 시점의 레이아웃 시프트입니다.
iframeHeight 상태가 null 로 시작해서 측정값으로 바뀔 때 레이아웃이 툭 바뀌는 느낌이 있었습니다.

수정 방법

iframe 을 감싸는 wrapper div 를 두고, 그 위에 배경색 오버레이를 얹었습니다.

const [iframeLoaded, setIframeLoaded] = useState(false);
const bgColor = (resolvedTheme ?? 'dark') === 'light' ? '#f5f5f5' : '#0d0d0d';

페이지 진입 시 오버레이가 배경색으로 iframe 영역을 덮고 있다가,
iframe 의 onLoad 이벤트가 발생하면 iframeLoaded 를 true 로 바꿔서 0.25초 페이드아웃합니다.
툴 간 이동 시에도 상태를 초기화해서 매번 동일하게 동작합니다.

? 카드 디자인 리뉴얼

단색·그라데이션 카드뽑기 페이지에서 뽑기 전에 보이는 ? 카드가
기존에 짙은 녹색 계열 그라데이션으로 채워져 있었습니다.

크리에이티브 섹션 키컬러인 #00f0ff (시안)와 전혀 어울리지 않아서
디자인을 처음부터 다시 잡았습니다.

새 디자인 구성

배경: #090b10 에 도트 그리드 패턴 오버레이
radial-gradient 두 겹으로 — 중앙 글로우 + 22px 간격 도트
테두리: rgba(var(--accent-rgb), 0.22) 얇은 선
코너 브래킷: ::before / ::after 로 좌상·우하 L자형 장식
물음표 아이콘: 원형 컨테이너 + 글로우 펄스 애니메이션
기존 배경이 움직이는 gradientMove 제거, 아이콘 글로우만 남김

CSS 변수 --accent-rgb 를 그대로 사용해서
다크모드(시안)와 라이트모드(퍼플) 전환이 별도 분기 없이 자동으로 됩니다.

뽑기 버튼 리뉴얼

기존 버튼은 키컬러로 꽉 채운 솔리드 스타일이었습니다.
새 ? 카드와 디자인 언어가 달라서 함께 손봤습니다.

배경 투명 + 키컬러 테두리 아웃라인으로 교체했습니다.
호버 시 테두리가 선명해지고 외부 글로우와 시머 스윕이 들어오고,
클릭하면 살짝 채워집니다.

알약형(border-radius: 50px)에서 4px 로 바꿔서
? 카드 코너 브래킷과 같은 언어를 씁니다.

코드 복사·다시 뽑기·카드 저장 액션 버튼도 동일한 아웃라인 계열로 통일했습니다.

카드 저장 이미지 브랜딩 수정

카드를 저장하면 캔버스에 로고와 푸터 크레딧을 그려서 JPG로 내보내는데,
사이트와 다른 표기가 들어가 있었습니다.

항목	수정 전	수정 후
파일명	`nfpdesign_색상코드_날짜.jpg`	`StudioNFP_색상코드_날짜.jpg`
이미지 로고	`NFP`(녹색) + `DESIGN`(흰색)	`Studio`(흰색) + `NFP`(시안)
크레딧 색	`#01FF75` 초록	`#00f0ff` 시안
저작권 연도	`2025` 하드코딩	`new Date().getFullYear()`