보랑취향

첨부한 01_전수감시상황판.jpg와 동일하게 맞춰줘.[색] 헤더 그라데이션, 카드 배경, primary 파랑, 차트 3개 시리즈(면+선), 전년대비 배지(빨강/파랑)를 이미지에서 스포이드로 뽑은 HEX로 맞출 것. 내가 적은 HEX: …[크기] 데스크톱 기준으로, 차트 SVG 영역은 카드 본문 너비 100%, 높이는 이미지와 비슷하게 약 OOpx (또는 데이터 행 N개 높이). 미니 연도 막대 그래프는 가로 100px 고정.[구조] HTML은 시맨틱 유지, 스타일은 외부 CSS만. 인라인 style 금지.차이 나는 부분은 “이미지 대비 지금 코드에서 무엇이 다른지” 한 줄씩 짚고 수정해줘.1. 참조를 하나로 고정 같은 파일을 첨부: 01_전수감시상황판.jpg (또는 스크린샷 1장). “이 이미지 한 장을..

1️⃣ 디자인 → 코드로 바꿀 때 (가장 많이 씀)네가 말한 방식 맞아 👇피그마 화면 캡처 넣고“이거 HTML/CSS로 만들어줘”“React 컴포넌트로 만들어줘”👉 그러면 AI가 실제 코드로 변환해줌2️⃣ 디자인 구조 설명시키기화면 이미지 넣고👉 “이 UI 구조 분석해줘”결과:헤더 / 카드 / 버튼 구조 정리UX 흐름 설명3️⃣ 기존 코드 개선개발자가 만든 코드 넣고👉 “이거 더 깔끔하게 리팩토링해줘”4️⃣ 기능 추가 요청“여기에 다크모드 추가해줘”“이 버튼 클릭하면 모달 뜨게 해줘”👉 그냥 말로 설명하면 구현해줌🎯 디자인 기준으로 보면✔️ 이렇게 쓰면 좋음피그마 → 코드 변환디자인 시스템 만들기컴포넌트 정리반응형 코드 생성❌ 이렇게 생각하면 틀림👉 “그냥 이미지 넣으면 완벽한 디자인 만들어..

피그마에서 실무에서 사용하는 디자인 시스템 구축 순서 10단계를 정리했습니다.이 순서대로 진행하면 디자인 → 토큰 → 컴포넌트 → 개발 연결까지 자연스럽게 됩니다.피그마 디자인 시스템 만드는 순서 (실무 10단계)1️⃣ 디자인 원칙 정의먼저 디자인 시스템의 기준을 정합니다.예브랜드 톤UI 스타일접근성 기준대표 참고Material DesignCarbon Design System2️⃣ Color 시스템 만들기먼저 Primitive 색상을 정의합니다.예blue-50blue-100blue-500gray-100gray-900 이 단계는 global token입니다.3️⃣ Typography 시스템 정의폰트 규칙을 정의합니다.예Heading / h1Heading / h2Body / largeBody / smallC..

피그마에서 실무에서 많이 사용하는 디자인 시스템 구조는 보통Design Tokens → Foundations → Components → Patterns → Templates 순서로 구성됩니다.(대기업·스타트업 대부분 이 구조를 사용)아래는 실무에서 가장 많이 쓰는 구조입니다.피그마 디자인 시스템 구조 (실무 기준)1️⃣ Foundations (기초 스타일)디자인의 기본 규칙포함되는 것ColorTypographySpacingGridRadiusShadowIcon예Foundations ├ Color ├ Typography ├ Spacing ├ Grid ├ Radius └ Shadow 예시color.primarycolor.secondaryspacing.8radius.sm 2️⃣ Design Tokens디자인 값..

피그마 디자인 시스템 참고 사이트 TOP 101️⃣ Design Systems Hunt전 세계 147개 이상 디자인 시스템 모음회사별 디자인 시스템 탐색 가능UI 패턴 비교하기 좋음추천 이유👉 디자인 시스템 레퍼런스 1위 사이트2️⃣ Best Design Systems디자인 시스템 + UI 컴포넌트 라이브러리 모음Figma / React / Tailwind 등 필터 가능추천 이유👉 디자인 + 개발 둘 다 참고 가능 3️⃣ Figma Community관련 소프트웨어→ Figma실제 디자이너들이 만든UI kit디자인 시스템컴포넌트수천 개 다운로드 가능추천 이유👉 실제 Figma 파일 바로 사용 가능4️⃣ Design System Hub다양한 기업 디자인 시스템 비교컴포넌트 / 토큰 / UX 패턴 분석추..

1️⃣ Material Design 공식 사이트회사: Google특징가장 유명한 디자인 시스템안드로이드 앱 UI 표준컴포넌트와 디자인 가이드 매우 풍부사용 기술React (Material UI)AndroidWeb대표 UI카드FAB 버튼Material Grid2️⃣ Fluent UI 공식 사이트회사: Microsoft특징Windows / Office UI 기반 디자인기업용 SaaS에서 많이 사용사용 기술ReactWeb ComponentsMicrosoft 365 UI3️⃣ Bootstrap 공식 사이트회사: Twitter특징가장 오래된 UI 프레임워크웹사이트 제작 속도 매우 빠름사용 기술 Button 대표 기능Grid systemModalNavbar 4️⃣ Carbon Design System 공식 사이트회..

Frame(프레임)안 텍스트 반응형!반응형할 부분을 선택[부모,자식요소] 각각 오토레이아웃 (shift+A)을 해서 글자와 배경을 합쳐준다. 1. 오토레이아웃 그룹속 메뉴 각각(자식) 을 선택한다. Fill container 을 클릭해서 반응형 될때마다 자연스럽게 늘어났다 줄었다 되게 만든다.참고> Fill container 이 안보일때부모 프레임 선택Shift + A → Auto Layout 적용다시 자식 레이어 선택그러면 메뉴에👉 Fill container 가 나타납니다. 2. 전체 그룹(부모)도 fill container 3. 글로벌 메뉴도 각각(자식) Fil Container4. 글로벌 메뉴 전체(부모) 도 Fil Container결과 : 이렇게 줄어들게 된다.이미지속 텍스트 반응형 (이..

삽입 - 그림 - 이 디바이스 그림 - 자르기 - 가로세로비율 - 16:9Shift 클릭 + 마우스로 조정하여 나타내고싶은 범위를 맞춰 Enter클릭한다. 16:9 로 맞춰진 A이미지를 마우스로 늘려서 B이미지 처럼 슬라이드에 꽉 채워준다.A이미지B이미지삽입 - 도형 - 사각형 선택해서 도형을 그려준다. 도형바탕에서 오른쪽 마우스 클릭 - 도형서식오른쪽 도형서식이 나오면 [선 없음] 클릭! 페인트통 선택! 색상선정 [투명도선정]아래처럼 결과물이 만들어 진다. 텍스트 삽입삽입 - 텍스트상자 - 가로텍스트상자그리기텍스트를 슬라이드 이미지 안에 찍으면 안되고슬라이드 밖에 찍어서 내용 넣기.Shift 선택해서 슬라이드 가운데 끌어온다.도형추가하기도형서식 - 사선클릭 - 사선도형을 넣을 위치에 만들어 준다.오..