Codex 실전 가이드 4편에서는 스크린샷 변환 멀티모달, 시각적 검증 (Visual Verification), Figma 토큰 동기화, 웹 접근성 수칙, 그리고 StudyFlow E2E 구현 사례를 다룹니다.
1. 스크린샷 한 장을 화면 설계로 바꾸는 법 (Image-to-Code)
모바일 앱 mock-up 이미지나 손으로 그린 와이어프레임 스크린샷을 Codex 멀티모달 프롬프트에 주입하여 즉시 HTML/CSS 및 컴포넌트로 변환하는 기법입니다.
Image-to-Code 프롬프트 구조 템플릿
[Image Analysis & Code Generation Request]
1. Layout Structure:
- Header: 로고, 네비게이션 메인 탭 4개, 프로필 아바타
- Hero Section: 좌측 카피 문구, 우측 터미널 카드 뷰
- Bento Grid: 3열 카드 반응형 Grid 레이아웃
2. Style Specification:
- Dark theme using HSL color tokens (bg: #0a0908, accent: #ff6b35)
- Typography: Bricolage Grotesque display font
3. Interactive Micro-animations:
- Card hover: -5px translateY with 0 20px 40px rgba(0,0,0,0.4) box-shadow
2. 만든 화면을 눈으로 다시 검증하는 법 (Visual Verification)
AI가 코드를 작성했더라도 렌더링된 실제 화면이 폰트 깨짐이나 반응형 찌그러짐을 겪지 않는지 Visual Verification Loop를 구동해야 합니다.
Playwright 기반 시각적 렌더링 캡처 스크립트 예시
// scripts/visual-verify.js
import { chromium } from 'playwright';
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.setViewportSize({ width: 1920, height: 1080 });
await page.goto('http://localhost:8787');
// Desktop view screenshot
await page.screenshot({ path: 'artifacts/screenshot-desktop.png', fullPage: true });
// Mobile view screenshot
await page.setViewportSize({ width: 375, height: 812 });
await page.screenshot({ path: 'artifacts/screenshot-mobile.png', fullPage: true });
await browser.close();
console.log('Visual screenshots captured in artifacts/ directory!');
})();
- Headless Browser Screenshot: Playwright / Puppeteer를 통해 1920x1080 데스크톱 뷰와 375x812 모바일 뷰 스크린샷 자동 캡처
- Diff Image Audit: 디자인 원본 이미지와 캡처된 스크린샷을 시각적으로 비교 분석하여 픽셀 오차 및 여백 바로잡기
3. Figma와 코드를 왕복하며 맞추는 법 (Figma Design Sync)
Figma의 디자인 토큰(Color, Typography, Spacing)과 코드베이스의 CSS 변수를 MCP(Model Context Protocol) 또는 API로 동기화합니다.
Figma Tokens ➔ Vanilla CSS 변수 동기화 예시
:root {
/* Figma Color Tokens */
--brand-primary: #ff6b35;
--brand-secondary: #f2c879;
--brand-bg: #0a0908;
--brand-surface: #16130f;
/* Figma Spacing & Radius Tokens */
--radius-lg: 1.5rem;
--radius-pill: 100px;
--spacing-container: 5vw;
}
- Design System Tokens: Figma Variables ➔ CSS Variables (
--accent: #ff6b35,--radius: 18px) 자동 매핑 - Component Parity: Figma 컴포넌트 이름과 React/HTML 클래스명을 1:1 매칭하여 디자인 불일치 예방
4. 웹 접근성(a11y)과 디자인 시스템 준수 수칙
- Semantic HTML:
<div>남발을 지양하고<main>,<section>,<article>,<nav>정통 태그 사용 - Keyboard Navigation: 모든 버튼 및 링크에 명확한
:focus-visible아웃라인 표시 - Color Contrast: 텍스트와 배경 색상 대비 비율 최소 4.5:1 이상 유지
- Screen Reader Support: 모든 아이콘 버튼에
aria-label명시 지정
5. StudyFlow E2E 구축 실전 사례
학습 관리 플랫폼 StudyFlow의 대시보드, 강좌 목록, 실시간 출석 현황 컴포넌트를 앤드투앤드(E2E)로 완결짓는 실전 워크플로우입니다.
- Data Layer: Cloudflare D1 수강생 테이블 생성
- API Layer: Workers JSON API 엔드포인트 구현
- UI Layer: Vanilla CSS 글래스모피즘 인터페이스 결합