Figma-to-HTML/PROCESS-CONTROL.md

Figma → HTML 프로세스 제어

변경 전 반드시 확인

1. 소스는 Figma 데이터다

• gradient 방향: Figma 데이터의 각도에서 CSS 변환 (CSS = 90 - Figma)
• border-radius: Figma 데이터 그대로 (스케일만)
• PNG를 보고 방향을 판단하지 않는다
• PNG는 픽셀 데이터 분석으로만 교차 검증에 사용

2. 이미지 해석 금지

• 멀티모달 이미지 해석으로 gradient 방향 판단 불가 (미묘한 alpha에서 틀림)
• 방향 확인이 필요하면 픽셀 데이터를 숫자로 분석
• "보니까 ~인 것 같다" 금지. 데이터로 확인

3. 작동하는 것은 건드리지 않는다

• 사용자가 A만 문제라고 하면 A만 수정
• B, C가 "같은 이유로 틀릴 것 같다"고 추측해서 함께 바꾸지 않는다
• 변경 전: 현재 값이 뭔지 기록
• 변경 후: 변경한 값이 뭔지 기록
• 되돌려야 할 때 정확히 어디로 돌아가는지 알아야 한다

4. 한 번에 하나만 바꾼다

• gradient 각도와 border-radius를 동시에 바꾸지 않는다
• 하나 바꾸고 확인, 맞으면 다음 하나

5. 사용자가 말한 것만 한다

• 사용자의 피드백을 자의적으로 해석하지 않는다
• "주황색 gradient가 안 맞다" → 주황색 gradient만 수정
• 초록, 다른 요소는 건드리지 않는다

6. 찍어맞추기 금지

• 0deg 안 되면 180deg, 그것도 안 되면 90deg... 이런 식 금지
• 값을 바꾸기 전에 WHY를 먼저 설명할 수 있어야 한다
• 설명 못하면 바꾸지 않는다

7. "쉬운 전면 재작성" 절대 금지

• 80점 결과물에서 2가지 문제를 고칠 때, 구조를 flex/grid 등으로 전면 재작성하지 않는다
• 기존에 맞춘 수십 가지(pill 크기, 위치, 비율, border 걸침)가 전부 깨진다
• 기존 구조 유지 + 문제만 정확히 수정이 원칙
• 보완이 안 되면 그 방식을 오답노트로 두고 다른 방식으로 접근
• 점점 나빠지면 즉시 멈추고 마지막 OK 상태로 복원
• 구조 변경이 불가피하면 사전에 영향 범위 분석 + 사용자 확인 후 진행

Figma 도형 gradient 처리 프로세스

1. Figma gradient 각도 확인
2. gradient를 0으로 돌린 기본 상태 파악
   - border-radius: Figma 값 그대로
   - gradient: CSS 90deg (Figma 0 = 왼→오 = CSS 90deg)
3. CSS로 기본 상태 구현
4. Figma gradient 각도 적용: CSS = 90 - Figma각도
5. 위치(left, top)와 크기(width, height) 배치

Figma gradient 각도 체계

Figma  0° = 왼쪽 진 → 오른쪽 옅 = CSS  90°
Figma -90° = 위 진 → 아래 옅     = CSS 180°
Figma -180° = 오른쪽 진 → 왼쪽 옅 = CSS 270°
Figma  90° = 아래 진 → 위 옅     = CSS   0°

변환: CSS = 90 - Figma