커리큘럼으로

커리큘럼

이온디 12

Week 1: Figma 디자인 최적화 기초

세션 1-0: Figma MCP 환경 구축 (2시간)

학습 목표 - Figma MCP 서버 설치 및 연동 - 첫 Figma 디자인 불러오기 성공 - 기본 워크플로우 이해

주요 내용 1. Figma Access Token 발급 (15분) 2. Claude MCP 연동 (20분) 3. Figma 링크 추출 실습 (10분) 4. 첫 퍼블리싱 실습 (45분) - 간단한 로그인 폼 디자인 준비 - Claude에 프롬프트 작성 - HTML/CSS 결과 확인 5. 문제 해결 (20분)

실습 과제 - [ ] Figma MCP 연동 완료 스크린샷 제출 - [ ] 본인 디자인 1페이지 퍼블리싱 성공 - [ ] 발생한 오류 및 해결 과정 정리

세션 1-1: AI 친화적 Figma 디자인 원칙 (2시간)

학습 목표 - AI가 이해하기 쉬운 Figma 구조 설계 - 퍼블리싱 효율을 높이는 레이어 네이밍 전략

주요 내용 1. AI 친화적 디자인 원칙 - 디자인과 설명의 분리 - 8000px 제한 이해 및 대응 - 컴포넌트 단위 분리 전략

  1. 레이어 구조 설계

    • Semantic한 네이밍 규칙
    • 섹션 단위 분리 (header, content, footer)
    • 레이어 중첩 최적화

  2. 실습: 기존 디자인 파일 리팩토링

세션 1-2: Figma 디자인 체크리스트 완성 (2시간)

주요 내용 1. Figma 디자인 필수 체크리스트 27가지 - 폰트 설정 (Variable 폰트 지양) - 폰트 크기 표준화 (소수점 금지) - 컬러 시스템 구축 - 자간 설정 (px 단위 사용) - 섹션 간격 통일 - 아이콘 표준화 - 반응형 브레이크포인트 (3단계) - Inner Width 규격

  1. 라인 처리의 올바른 방법

    • Stroke Line ❌
    • Rectangle Box ✅

  2. 실습: 체크리스트 기반 디자인 검수

Week 2: Figma MCP 기본 활용

세션 2-1: 프롬프트 엔지니어링 기초 (2시간)

학습 목표 - AI에게 정확한 지시를 전달하는 프롬프트 작성법 - 반응형 퍼블리싱 요청 전략

주요 내용 1. 효과적인 프롬프트 구조 - 작업 경로 명시 - Figma URL 제공 - 반응형 우선순위 지정 - 스타일 분리 전략 - 스크린샷 첨부

  1. 반응형 작업 지시 방법

    • PC 우선 → 축소 vs 모바일 퍼스트
    • 브레이크포인트별 Figma URL 제공

  2. 실습: 로그인 페이지 퍼블리싱 요청 프롬프트 작성

세션 2-2: 실전 프롬프트 템플릿 (2시간)

주요 내용 1. 기본 페이지 퍼블리싱 템플릿 2. 모듈 스킨 퍼블리싱 템플릿 3. 애니메이션 요청 템플릿 4. 다국어 번역 템플릿

실습 - 회원가입 폼 퍼블리싱 - 스타일 충돌 해결

세션 2-3: 디자인 토큰과 정밀 퍼블리싱 (2시간)

학습 목표 - 디자인 토큰의 개념 이해 - Figma Dev Mode에서 정확한 CSS 값 추출 - SCSS 변수 시스템 구축 - 디자인-퍼블 불일치 방지

주요 내용 1. Figma MCP의 한계 이해 - 구조 vs 정밀 수치 - 실제 불일치 사례 분석 (lllayer_kda 프로젝트)

  1. 디자인 토큰 정의

    • Typography 토큰 (font-size, line-height, letter-spacing)
    • Spacing 토큰 (4px 배수 체계)
    • Color 토큰 (Primary, Secondary, Surface)

  2. SCSS 변수 시스템 구축

    • _variables.scss 작성
    • 반응형 Mixin 정의
    • 프로젝트 전체 적용

  3. 토큰 기반 프롬프트 작성법

    • 프롬프트에 토큰 표 명시
    • AI가 정확한 값을 적용하도록 유도

실습 - Figma Dev Mode에서 값 추출 - _variables.scss 파일 생성 - 기존 코드의 하드코딩 값을 변수로 교체 - 디자인-퍼블 1:1 검증

Week 3: 실무 프로젝트 적용

세션 3-1: 레이아웃 시스템 구축 (2시간)

학습 목표 - GNB/Footer 분리 전략 - 모듈 스킨과 레이아웃 연동

주요 내용 1. 디렉토리 구조 설계 

layouts/
├── layout.html (메인 레이아웃)
├── assets/
│   ├── css/components/ (SCSS)
│   ├── pages/ (서브페이지 HTML)
│   └── js/
└── modules/
    └── member/skins/

  1. 스타일 분리 전략

    • Layout SCSS: 공통 컴포넌트
    • Module HTML: 구조만
    • 경로 문제 해결 (상대경로 vs 절대경로)

  2. 실습: 회원 모듈 퍼블리싱

세션 3-2: 인터랙션 & 애니메이션 구현 (2시간)

학습 목표 - Figma 코멘트로 인터랙션 전달 - JavaScript 애니메이션 자동 생성

주요 내용 1. Figma 코멘트 활용법 - 호버 효과 설명 - 모션 레퍼런스 링크 제공 - 속도/이징 명시

  1. AI에게 애니메이션 요청

    • 페이드업 모션
    • 마퀴 모션
    • 호버 인터랙션

  2. 실습: About 페이지 애니메이션

Week 4: 최적화 & 배포

세션 4-1: 다국어 페이지 자동화 (2시간)

학습 목표 - 동일 구조의 다국어 페이지 일괄 생성 - 번역 자동화 워크플로우

주요 내용 1. 다국어 Figma 파일 구조 - 언어별 노드 ID 매핑 - 공통 HTML 구조 유지

  1. AI 번역 요청 전략

    위 파일의 영문 버전을 아래 피그마를 보고
중국어 간체 버전으로 텍스트를 수정해주세요.
@https://www.figma.com/...

  2. 실습: About/Rules 페이지 5개 언어 생성

    • English, 한국어, 日本語, 简体中文, 繁體中文

세션 4-2: 프로젝트 최종 점검 & 배포 (2시간)

학습 목표 - 크로스 브라우징 테스트 - 성능 최적화 - 실서버 배포

주요 내용 1. 최종 체크리스트 - 반응형 breakpoint 검증 - 이미지 최적화 (WebP) - CSS 압축 - 접근성 검수

  1. 문제 해결 사례 연구

    • CSS 우선순위 충돌
    • 경로 문제 (상대/절대)
    • 폰트 로딩 최적화

  2. 실습: 수강생 프로젝트 발표

강의 일정 예시

주차 일시 주제 실습
1주차 2/1 (토) 14:00-16:00 Figma 디자인 최적화 파일 리팩토링
2주차 2/8 (토) 14:00-16:00 Figma MCP 기초 첫 페이지 퍼블
3주차 2/15 (토) 14:00-16:00 실무 프로젝트 적용 회원 모듈 완성
4주차 2/22 (토) 14:00-16:00 최적화 & 배포 최종 발표
목록으로