코드 생성 옵션
생성 모드
Codia는 다양한 사용 사례에 맞는 코드 생성 모드를 제공합니다:
스탠다드 모드
합리적인 기본값으로 디자인에서 완전한 컴포넌트를 생성. 대부분의 프로젝트에 적합.
컴포넌트 모드
복잡한 디자인을 재사용 가능한 컴포넌트로 분해. 각 컴포넌트는 적절한 임포트/익스포트가 포함된 독립 파일로 생성.
페이지 모드
라우팅 설정, 메타 태그, 반응형 디자인을 포함한 전체 페이지 레이아웃 생성. 랜딩 페이지와 마케팅 사이트에 적합.
Base Code vs AI Code
Codia는 다양한 요구에 맞는 두 가지 코드 생성 수준을 제공합니다:
Base Code
Base Code는 DSL 인식 모델을 사용하여 빠르게 코드를 생성합니다. 디자인과 거의 100% 시각적 충실도를 보장하며 생성 속도가 빠릅니다. 다만 특히 복잡한 Figma 레이아웃에서는 코드 품질이 기본 수준입니다.
AI Code
AI Code는 전문 엔지니어 수준의 코드를 생성합니다. 학습된 LLM, 스마트 구조 분석, 비전 인식을 활용하여 수동 조정이 거의 필요 없는 고품질 프로덕션 코드를 제공합니다.
선택 방법
- Base Code — 속도 우선이고 UI가 디자인과 시각적으로 일치하면 충분한 경우
- AI Code — 개발하고 유지보수할 수 있는 프로덕션 품질 코드가 필요한 경우
AI 기반 기능
AI Code에는 기존 코드 생성과 차별화되는 6가지 핵심 기능이 있습니다:
1. 지능형 레이아웃 인식
디자인의 실제 DOM 구조를 자동 식별하여 정확한 레이아웃 매핑을 수행. AI는 절대 위치 지정에 의존하지 않고 공간 관계를 이해하여 Flexbox와 Grid를 사용한 시맨틱 레이아웃을 생성.
2. 지능형 네이밍
각 요소의 콘텐츠와 구조를 분석하여 의미 있는 변수명과 클래스명을 생성. AI는 NLP 기술로 일반적인 식별자 대신 userNameInput이나 primaryButton 같은 이름을 생성.
3. 스마트 레이어 병합
개발자 의도에 맞는 이미지 슬라이싱 최적화와 지능형 자동 이미지 압축을 적용. AI가 어떤 레이어를 단일 에셋으로 병합해야 하는지 식별하고 최적의 파일 형식을 선택.
4. 스마트 UI 컴포넌트 감지
버튼, 카드, 내비게이션, 폼 등 일반적인 UI 패턴을 감지하고 적절한 재사용 가능 컴포넌트를 생성. 복잡한 레이아웃에서도 일반적인 컴포넌트를 누락하지 않음.
5. 자동 AutoLayout
AutoLayout과 FlexLayout을 자동으로 구현하여 절대 위치 지정 대신 반응형 제약 기반 레이아웃을 생성. iOS(SwiftUI) 및 크로스 플랫폼(Flutter) 출력에 특히 유용.
6. 불필요한 레이어 제거
코드 품질에 부정적 영향을 미치는 중복, 숨김, 장식 전용 레이어를 식별하고 제거. 더 깔끔하고 가벼우며 성능이 좋은 코드를 제공.
고급 기능
스마트 컴포넌트 감지
Codia AI는 일반적인 UI 패턴을 자동 감지하고 적절한 컴포넌트를 생성:
- 내비게이션 바와 헤더
- 카드 레이아웃과 그리드
- 유효성 검사가 포함된 폼 요소
- 모달 다이얼로그와 오버레이
- 리스트와 테이블 뷰
에셋 추출
이미지, 아이콘 및 기타 에셋은 자동으로:
- 디자인에서 추출
- 웹 전달을 위해 최적화
- 생성된 코드에서 적절한 경로로 참조
접근성
생성된 코드에는 기본적으로 접근성 기능이 포함:
- 시맨틱 HTML 요소 (
nav,main,article등) - ARIA 레이블 및 역할
- 키보드 내비게이션 지원
- 색상 대비 준수
API 통합
공개 OpenAPI 사양은 독립형 코드 생성 엔드포인트가 아니라 시각 구조화 및 미디어 변환 엔드포인트를 중심으로 제공합니다. 자동화 워크플로우에서는 먼저 이미지를 구조화된 디자인 데이터로 변환한 다음, 해당 결과를 자체 코드 생성 또는 디자인 가져오기 파이프라인에서 사용하세요.
curl 'https://api.codia.ai/v1/open/image_to_design' \
-X POST \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"image_url": "https://example.com/design.png"
}'이미지에서 디자인 구조로 변환하는 자세한 내용은 Visual Struct API를, 전체 엔드포인트 목록은 API Reference를 참고하세요.
문제 해결
일반적인 문제
- 요소 누락 — 모든 레이어가 표시되고 숨겨져 있지 않은지 확인
- 잘못된 계층 구조 — 디자인 도구에서 레이어 그룹화 확인
- 스타일 차이 — 커스텀 폰트는 수동 설정이 필요할 수 있음