1 – EmailJS 계정과 이메일 서비스 준비 1.1 – EmailJS 계정 만들기 브라우저 주소창에 https://dashboard.emailjs.com/sign-up을 입력하고 Enter를 누릅니다. 가입 화면이 열리면 이메일 주소와 비밀번호를 입력합니다. 구글 계정으로 가입하려면 [Sign up with Google]을 클릭합니다. [Sign Up] 버튼을 클릭합니다. 가입한 이메일로 인증 메일이 오면 메일 안의 확인 링크를 클릭합니다. 로그인하면 대시보드 화면이 열립니다. EmailJS는 브라우저에서 실행되는 자바스크립트만으로 … 더 읽기
1. “스킬”이 무엇인가 스킬은 AI에게 미리 넣어 두는 작업 설명서다. 마크다운 파일 한 장이며, “이 상황에서는 이런 순서로, 이런 규칙을 지키며 일해라”를 적어 둔 것이다. 여기서 반드시 구분해야 하는 개념이 둘 있다. 구분 정체 비유 MCP 도구 실제로 Figma 파일을 읽고 쓰는 연결 통로 (use_figma, get_design_context 등) 손과 눈 스킬 그 도구를 언제·어떤 순서로 쓸지 … 더 읽기
이 문서는 여러 명이 한 팀이 되어 참고 사이트(KB손해보험)를 다시 만들어 보는 실습의 디자인 시스템 등록 단계를 다룬다. Figma Design 파일 안 에이전트로 변수·스타일·컴포넌트·베리언트를 등록하되, 이름과 값을 Tailwind CSS v4의 테마 변수 체계에 1:1로 맞추는 것이 목표다. 여기 적힌 값은 2026년 7월 기준 Tailwind CSS v4.3 공식 문서의 기본 테마 변수 목록에서 뽑았다. 끝까지 따라 … 더 읽기
먼저 디자인부터 품질 확인까지 이어지는 흐름을 살펴보고, 이어서 Claude Code에 보낼 입력문을 순서대로 실행합니다. 마지막에는 같은 구축 과정을 파일별 설명과 검사 기준까지 포함해 자세히 확인합니다. 첫 번째 부분인 “Figma 디자인부터 QA까지, 하네스 한 바퀴 세팅”에서는 하네스의 전체 흐름과 최소 구축 절차를 확인합니다. 웹사이트 리디자인 팀프로젝트에서 Figma 시안을 코드로 옮길 때, AI 코딩 도구가 팀 규칙을 … 더 읽기
이 문서는 피그마(Figma)에서 제작한 모션 그래픽을 투명 배경이 포함된 동영상 파일로 내보내고, 어도비 프리미어 프로(Adobe Premiere Pro)에서 곧바로 합성할 수 있도록 돕는 플러그인과 로컬 인코더 시스템의 구현 프롬프트를 다룬다. 피그마 환경에서 애니메이션 프레임을 추출하는 클라이언트와 이를 퀵타임(QuickTime) 동영상으로 변환하는 서버 간의 연동 구조를 설명한다. 영상 편집 소프트웨어와의 호환성을 확보하기 위한 코덱 설정과 바이너리 구조 검증 … 더 읽기
slide 좌측상단 메인메뉴 클릭 막히면 — AI 코치에게 묻기 이 문서에서 익힌 피그마 슬라이드 파일 저장하기(메인 메뉴에서 내보내기·저장)를 내 작업에 적용하다 막히면, 아래를 대화형 AI(ChatGPT·Claude·Gemini)에 붙여 넣어 실습 코치로 삼는다. 답을 한꺼번에 받지 말고 한 단계씩 풀어 간다. 너는 피그마 슬라이드 저장 실습 코치다. 나는 슬라이드 좌측 상단 메인 메뉴에서 파일을 저장·내보내는 법을 배웠고, 내 … 더 읽기
1. UI 스타일 가이드를 만들 때 꼭 지켜야 할 것 스타일 가이드는 팀이 함께 보는 약속표와 같다. 색·글씨·간격을 한 곳에 정해 두면, 화면이 몇 장으로 늘어도 모두 같은 기준으로 만든다. 한 곳에만 정해 두고 모두 그곳에서 꺼내 쓴다. 화면마다 다시 정하지 않는다. 직접 칠하지 말고 스타일로 등록해 쓴다. 원본 하나만 고치면 그 스타일을 쓴 곳이 … 더 읽기
1. 컴포넌트 프로퍼티 피그마의 컴포넌트 프로퍼티(Component Properties)는 컴포넌트 내부의 요소를 일일이 수정하지 않고도, 인스턴스 패널에서 속성값을 변경해 디자인을 효율적으로 관리하는 기능이다. [완료파일)] 2. 종류 프로퍼티 설명 활용 예시 Boolean 레이어의 표시 여부를 True/False로 제어 아이콘 표시/숨김, 버튼 라벨 표시 여부 Text 인스턴스 내 텍스트 내용을 직접 수정 버튼 문구, 입력 필드 플레이스홀더 Instance Swap 컴포넌트 … 더 읽기
1. 디자인 토큰 1.1 이런 경험이 있는가? 디자인 작업을 하다 보면 이런 상황이 자주 생긴다. 개발자: "버튼 색이 피그마랑 다른데요?" 디자이너: "아, 제가 쓴 파란색이 #2563EB인데 혹시 #1D4ED8 쓰셨나요?" 개발자: "… 비슷해 보여서 그냥 썼어요." 또는 이런 상황도 있다. 디자이너: "브랜드 컬러가 바뀌었어요. 파란색 → 보라색으로요." 개발자: "피그마에 파란색이 쓰인 곳이 87군데네요. 다 찾아서 바꿔야 … 더 읽기
피그마 인터페이스 설계 1. 와이어프레임에 아이콘 넣기 1-1. 준비 <li> 시작 프레임으로 이동합니다. (05-인터페이스/1.아이콘넣기) </li> <li> 플러그인을 설치합니다. (Iconify) </li> <li> 순서대로 진행합니다. </li> 1-2. 아이콘 넣기 <li> 그림과 같이 아이콘을 겹쳐 놓습니다. </li> <li> 색상 복제 적용: 피그마의 색상 HEX 코드를 복사하여 Iconify의 color 입력 상자에 붙여넣은 후 아이콘을 적용해봅니다. </li> <li> 하단 탭바의 … 더 읽기
